.help-page { color:#404040; background:#faf8fb; min-height:100vh; }
.help-page .footer { color:#747474; border-color:#d8d8d8; }
.help-shell { padding-block: var(--content-gap) 40px; }
.help-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:25px; }
.help-intro h1 { font:500 32px/1.3 var(--serif); color:#383838; }
.help-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid #d8d8d8; border-radius:5px; padding:11px 17px; font-size:13px; font-weight:500; line-height:1.5; white-space:nowrap; transition:background .15s; }
.help-button.primary { background:#76516e; border-color:#76516e; color:white; box-shadow:0 3px 8px #34343410; }
.help-button.primary:hover { background:#60415a; }
.help-button.secondary { background:#fff; color:#465f73; }
.help-button.secondary:hover { background:#ececec; }
.help-button:disabled { opacity:.5; cursor:wait; }
.help-button svg { width:17px; height:17px; }
.help-preview { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 15px; background:#ececec; border:1px solid #d8d8d8; border-radius:5px; font-size:12px; color:#686868; line-height:1.7; margin-bottom:22px; }
.help-preview a { color:#365d7c; white-space:nowrap; text-decoration:underline; text-underline-offset:3px; }
.help-workspace { background:#fff; border:1px solid #d8d8d8; border-radius:8px; overflow:hidden; box-shadow:0 10px 40px #34343406; }
.player-workspace { display:grid; grid-template-columns:300px minmax(0,1fr); }
.help-inbox { background:#f5f1f7; border-inline-end:1px solid #d8d8d8; min-width:0; }
.help-inbox>h2 { font:500 17px var(--serif); padding:23px 20px 15px; color:#383838; }
.help-list-tools { padding:0 16px 14px; }
.help-tabs { display:flex; gap:4px; padding:4px; background:#ececec; border:1px solid #d8d8d8; border-radius:5px; }
.help-tabs button { display:flex; gap:5px; justify-content:center; align-items:center; flex:1; padding:9px 5px; font-size:12px; border-radius:3px; white-space:nowrap; }
.help-tabs button[aria-pressed="true"] { background:#fff; color:#365d7c; box-shadow:0 1px 4px #34343410; }
.help-tabs button span { color:#686868; font-size:11px; }
.help-search { display:flex; gap:9px; align-items:center; background:#fff; border:1px solid #d8d8d8; border-radius:4px; padding:9px 11px; margin-top:13px; }
.help-search svg { width:16px; height:16px; color:#686868; flex-shrink:0; }
.help-search input { width:100%; min-width:0; border:0; background:transparent; outline:0; font:inherit; font-size:13px; color:#383838; }
.help-search:focus-within { outline:2px solid #909090; outline-offset:2px; }
.help-ticket { display:block; width:100%; text-align:start; padding:19px 19px 20px; border-top:1px solid #d8d8d8; border-inline-start:3px solid transparent; }
.help-ticket:hover { background:#ececec; }
.help-ticket.selected { background:#eee6f0; border-inline-start-color:#76516e; }
.ticket-top { display:flex; justify-content:space-between; color:#686868; font-size:12px; }
.help-ticket strong { display:block; font:500 15px/1.6 var(--serif); color:#383838; margin:9px 0 14px; overflow-wrap:anywhere; }
.ticket-bottom { display:flex; gap:8px; align-items:center; justify-content:space-between; }
.ticket-bottom>span:last-child:not(.help-status) { color:#686868; font-size:11px; }
.help-status { display:inline-flex; gap:6px; align-items:center; white-space:nowrap; padding:4px 8px; border-radius:4px; font-size:12px; font-weight:500; line-height:1.5; background:#e1eaf3; color:#3b6080; }
.help-status i { height:5px; width:5px; border-radius:50%; background:currentColor; }
.status-new { background:#efe5ce; color:#7d612a; }
.status-progress { background:#e1eaf3; color:#3b6080; }
.status-waiting { background:#e9e2ee; color:#725882; }
.status-closed { background:#f7e3e5; color:#a03242; }
.help-chat { display:flex; flex-direction:column; min-width:0; background:#fff; }
.chat-header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 24px; border-bottom:1px solid #d8d8d8; }
.chat-title { display:flex; gap:10px; align-items:baseline; }
.chat-title h2 { font:500 19px/1.5 var(--serif); color:#383838; overflow-wrap:anywhere; min-width:0; }
.help-ticket-number { font-size:12px; color:#686868; }
.chat-meta { display:flex; align-items:center; flex-wrap:wrap; gap:11px; margin-top:10px; font-size:12px; color:#686868; }
.help-back { padding:0 0 9px; font-size:13px; color:#365d7c; }
/* Admin navigation must read as a full button, not a small caption. */
.admin-workspace .help-back { display:inline-flex; align-items:center; min-height:44px; padding:10px 16px; margin-bottom:14px; border:1px solid #c4d3e0; border-radius:5px; background:#e4ebf1; color:#365d7c; font-size:15px; font-weight:500; line-height:1.5; }
.admin-workspace .help-back:hover { background:#dbe6ef; border-color:#9bb1c3; }
.player-workspace .help-back { display:none; }
.close-ticket { padding:8px 10px; font-size:12px; }
.chat-messages { height:420px; overflow:auto; overscroll-behavior:contain; padding:16px 24px 25px; background-color:#e6e6e6; scrollbar-width:thin; scrollbar-color:#d1d1d1 transparent; }
.chat-day { display:flex; justify-content:center; margin:2px 0 19px; }
.chat-day span { background:#e4e4e4; padding:5px 13px; border-radius:20px; color:#686868; font-size:12px; }
.message-row { display:flex; align-items:flex-end; gap:9px; margin-bottom:15px; }
.message-row.own { flex-direction:row-reverse; }
.chat-avatar { display:flex; justify-content:center; align-items:center; height:29px; width:29px; flex:0 0 29px; border-radius:50%; font:500 12px var(--serif); color:#686868; background:#e4e4e4; }
.chat-avatar.team { color:#fff; background:linear-gradient(145deg,#6685a0,#3d5d79); }
.own .chat-avatar { display:none; }
.message-bubble { min-width:85px; max-width:82%; background:#fff; border:1px solid #d8d8d8; padding:12px 14px 8px; border-radius:12px 12px 12px 3px; box-shadow:0 2px 3px #34343406; }
.own .message-bubble { background:#dbe6ef; border-color:#c4d3e0; border-radius:12px 12px 3px 12px; }
.message-author { display:block; color:#3e617e; font-size:12px; font-weight:600; margin-bottom:6px; }
.message-bubble p { font-size:15px; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
.message-bubble time { display:block; text-align:end; margin-top:4px; color:#686868; font-size:11px; }
.chat-event { text-align:center; font-size:12px; color:#686868; margin:18px 0; line-height:1.7; }
.message-photos { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.message-photos button { padding:0; max-width:240px; }
.message-photos img { width:100%; max-height:210px; object-fit:cover; border-radius:5px; }
.chat-composer { padding:16px 20px 12px; border-top:1px solid #d8d8d8; background:#fff; }
.chat-composer textarea { border:0; background:transparent; resize:vertical; max-height:200px; width:100%; font:15px/1.7 var(--serif); color:#383838; min-height:50px; padding:4px; }
.chat-composer textarea:focus-visible { outline:2px solid #909090; border-radius:3px; }
.composer-actions { display:flex; align-items:center; gap:12px; margin-top:8px; }
.attach-button { display:flex; align-items:center; gap:6px; position:relative; cursor:pointer; padding:7px; border-radius:4px; color:#3e617e; }
.attach-button:hover { background:#ececec; }
.attach-button span { display:inline; font-size:12px; }
.attach-button input { position:absolute; width:100%; height:100%; inset:0; opacity:0; cursor:pointer; }
.attach-button:focus-within { outline:2px solid #909090; }
.composer-hint { font-size:11px; line-height:1.7; color:#686868; flex:1; }
.pending-images { display:flex; flex-wrap:wrap; gap:9px; }
.pending-images>div { position:relative; margin-bottom:10px; }
.pending-images img { width:68px; height:60px; object-fit:cover; border-radius:5px; }
.pending-images button { position:absolute; top:-4px; inset-inline-end:-5px; background:#646464; color:white; border-radius:50%; width:20px; height:20px; font-size:16px; padding:0; }
.help-error { color:#a1304c; font-size:13px; line-height:1.7; }
.help-error:not(:empty) { margin-top:9px; }
.chat-closed { padding:24px; font-size:14px; text-align:center; color:#686868; line-height:1.8; background:#f5f1f7; }
.help-empty { text-align:center; padding:60px 24px; align-items:center; justify-content:center; min-height:230px; }
.help-empty>span { display:inline-flex; padding:18px; border-radius:50%; background:#ececec; color:#686868; margin-bottom:16px; }
.help-empty h2 { font:500 20px var(--serif); color:#383838; }
.help-empty p { color:#686868; font-size:12px; line-height:1.8; margin-top:12px; }
.help-empty button { margin-top:20px; }
.help-admin-list .help-list-tools { padding:22px; background:#f5f1f7; border-bottom:1px solid #d8d8d8; display:grid; grid-template-columns:auto 1fr; gap:16px 30px; }
.help-admin-list .help-search { margin:0; }
.help-filters { display:flex; flex-wrap:wrap; gap:18px; grid-column:1/-1; }
.help-filters label,.chat-admin-tools label { display:flex; align-items:center; gap:8px; color:#686868; font-size:12px; }
.help-filters select,.chat-admin-tools select { background:#fff; border:1px solid #d8d8d8; border-radius:4px; padding:8px 12px; color:#383838; font:13px var(--serif); min-width:0; }
.help-issue { display:flex; gap:16px; align-items:flex-start; padding:23px; border-bottom:1px solid #d8d8d8; }
.help-issue:last-child { border:0; }
.help-issue:hover { background:#ececec; }
.issue-state { color:#507247; font-size:21px; line-height:22px; }
.issue-state.is-closed { color:#795d86; font-size:16px; }
.issue-main { flex:1; min-width:0; }
.issue-title { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.issue-title h2 { font:500 16px/1.6 var(--serif); color:#383838; overflow-wrap:anywhere; }
.issue-main p { margin-top:9px; color:#686868; font-size:12px; line-height:1.8; }
.help-tag { background:#ece7df; color:#72644d; font-size:11px; padding:4px 7px; border-radius:4px; }
.issue-replies { display:flex; align-items:center; gap:6px; font-size:12px; color:#686868; padding-top:3px; }
.issue-replies svg { width:14px; height:14px; }
.chat-admin-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 24px; background:#f5f1f7; border-bottom:1px solid #d8d8d8; }
.chat-admin-tools>span { font-size:12px; color:#686868; }
.help-dialog { background:#fff; border:1px solid #d8d8d8; border-radius:10px; padding:36px; color:#383838; width:min(760px,calc(100% - 30px)); max-height:90dvh; overflow:auto; box-shadow:0 20px 80px #34343425; }
.help-dialog::backdrop,.help-photo-dialog::backdrop { background:#282828a3; backdrop-filter:blur(3px); }
.help-dialog h2 { font:500 23px/1.5 var(--serif); margin-bottom:10px; }
.help-dialog form>p { font-size:13px; color:#686868; line-height:1.8; }
.help-dialog label { display:flex; flex-direction:column; gap:8px; margin-top:19px; font-size:14px; }
.help-dialog input,.help-dialog select,.help-dialog textarea { border:1px solid #d8d8d8; border-radius:4px; padding:12px; font:14px/1.7 var(--serif); color:#383838; width:100%; background:#fff; }
.help-dialog textarea { resize:vertical; min-height:240px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:25px; }
.help-photo-dialog { padding:15px; border:0; background:#fff; border-radius:8px; max-width:95vw; max-height:95dvh; }
.help-photo-dialog img { max-width:85vw; max-height:80dvh; object-fit:contain; }
.help-photo-dialog button { display:block; margin-inline-start:auto; font-size:24px; margin-bottom:8px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[dir="rtl"] .message-bubble { border-radius:12px 12px 3px 12px; }
[dir="rtl"] .own .message-bubble { border-radius:12px 12px 12px 3px; }

@media(max-width:760px) { .help-dialog { padding:22px; } .help-dialog textarea { min-height:180px; }}

.help-back { display:inline-flex; align-items:center; gap:8px; }
.help-back svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
html[dir="rtl"] .help-back svg { transform:scaleX(-1); }

/* Keep the inbox quiet and the conversation readable at every width. */
.help-inbox .help-empty { min-height: 0; padding: 30px 22px; }
.help-inbox .help-empty>span { padding: 12px; margin-bottom: 12px; }
.help-inbox .help-empty h2 { font-size: 17px; line-height: 1.5; }
.help-inbox .help-empty p { margin-top: 8px; }
.help-inbox .help-empty button { margin-top: 16px; }
.ticket-top { gap: 12px; align-items: baseline; }
.ticket-top time { text-align: end; font-size: 11px; }
.ticket-bottom { flex-wrap: wrap; justify-content: flex-start; }
.chat-header>div { min-width: 0; flex: 1; }
.chat-header { align-items: flex-start; }
.close-ticket { flex-shrink: 0; margin-top: 3px; }
.chat-messages { background: #f0f2f4; }
.composer-actions { flex-wrap: wrap; }
.composer-hint { flex-basis: 200px; }
#send-reply { margin-inline-start: auto; }
.help-page time[title] { cursor: help; }

.help-workspace[aria-busy="true"] { min-height:560px; }

/* A support inbox is a working conversation, with the reply always in reach. */
.help-shell { max-width:1280px; }
.help-workspace { height:clamp(560px,calc(100dvh - 220px),820px); border-color:#ded5e1; box-shadow:none; }
.player-workspace { grid-template-columns:320px minmax(0,1fr); }
.help-inbox { display:flex; flex-direction:column; overflow:hidden; background:#faf8fb; border-color:#ded5e1; }
.help-inbox>h2 { padding:20px 20px 16px; }
.help-list-tools { flex-shrink:0; }
.help-tickets { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; }
.help-ticket { padding:18px 20px; }
.help-ticket strong { font:500 14px/1.6 var(--serif); margin:8px 0 12px; }
.help-ticket.selected { background:#eee6f0; border-inline-start-color:#76516e; }
.help-chat { min-height:0; overflow:hidden; }
.chat-header { flex-shrink:0; padding:20px 24px; border-color:#ded5e1; }
.chat-title h2 { font:500 18px/1.45 var(--serif); }
.chat-messages { flex:1; height:auto; min-height:0; background:#faf8fb; padding:24px; }
.chat-composer { flex-shrink:0; padding:16px 20px 12px; border-color:#ded5e1; }
.chat-composer textarea { min-height:64px; max-height:120px; border:1px solid #ded5e1; border-radius:6px; padding:10px 12px; resize:vertical; }
.own .message-bubble { background:#eee6f0; border-color:#ded5e1; }
.message-bubble { max-width:min(82%,600px); box-shadow:none; }
.chat-avatar.team { background:#76516e; }
.message-author,.attach-button,.help-back { color:#76516e; }
.chat-day span { background:#eee9f1; color:#746b79; }
.help-empty h2 { line-height:1.5; }
.help-dialog { width:min(580px,calc(100% - 32px)); padding:28px; border-color:#ded5e1; box-shadow:0 20px 60px #40344826; }
.help-dialog textarea { min-height:150px; }
.help-dialog input:focus-visible,.help-dialog select:focus-visible,.help-dialog textarea:focus-visible,.help-button:focus-visible { outline:2px solid #76516e; outline-offset:3px; }