.help-page { color:#404040; background:#eeeeee; min-height:100vh; }
.help-page .footer { color:#747474; border-color:#d8d8d8; }
.help-shell { padding-block: 45px 52px; }
.help-intro { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:25px; }
.help-eyebrow { color:#686868; font-size:10px; letter-spacing:2.6px; margin-bottom:10px; }
.help-intro h1 { font:500 36px/1.3 var(--serif); color:#383838; }
.help-intro h1+p { color:#686868; font-size:14px; line-height:1.8; margin-top:9px; }
.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:#365d7c; border-color:#365d7c; color:white; box-shadow:0 3px 8px #34343410; }
.help-button.primary:hover { background:#294963; }
.help-button.secondary { background:#f8f8f8; 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:#f8f8f8; 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:#f5f5f5; 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:#f8f8f8; 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:#f8f8f8; 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:#e4ebf1; border-inline-start-color:#557c9d; }
.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-progress { background:#efe5ce; color:#7d612a; }
.status-waiting { background:#e9e2ee; color:#725882; }
.status-closed { background:#e0eadd; color:#536f49; }
.help-chat { display:flex; flex-direction:column; min-width:0; background:#f8f8f8; }
.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:#f8f8f8; 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:#f8f8f8; }
.chat-composer textarea { border:0; background:transparent; resize:vertical; max-height:200px; width:100%; font:15px/1.7 'Golos Text',Arial,sans-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:#f5f5f5; }
.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:#f5f5f5; 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:#f8f8f8; border:1px solid #d8d8d8; border-radius:4px; padding:8px 12px; color:#383838; font:13px 'Golos Text',Arial,sans-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:#f5f5f5; border-bottom:1px solid #d8d8d8; }
.chat-admin-tools>span { font-size:12px; color:#686868; }
.help-dialog { background:#f8f8f8; 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 'Golos Text',Arial,sans-serif; color:#383838; width:100%; background:#f8f8f8; }
.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:#f8f8f8; 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:1050px) { .player-workspace { grid-template-columns:260px minmax(0,1fr); } .chat-header { padding:18px 16px; gap:12px; } .chat-title { display:block; } }
@media(max-width:760px) {
  .help-shell { padding-block:32px; } .help-intro h1 { font-size:28px; } .help-intro { align-items:flex-start; flex-direction:column; gap:16px; }
  .help-preview { align-items:flex-start; flex-direction:column; gap:5px; }
  .player-workspace { grid-template-columns:minmax(0,1fr); } .player-workspace .help-chat { display:none; }
  .player-workspace.has-selection .help-chat { display:flex; } .player-workspace.has-selection .help-inbox { display:none; }
  .player-workspace .help-back { display:block; } .help-inbox { border:0; }
  .chat-header { flex-wrap:wrap; } .chat-title h2 { font-size:16px; } .chat-messages { height:390px; padding:18px 12px; }
  .message-bubble { max-width:87%; } .message-bubble p { font-size:14px; }
  .chat-composer { padding:12px; } .composer-hint { display:none; } .composer-actions { justify-content:space-between; }
  .attach-button span { display:inline; font-size:12px; } .chat-avatar { display:none; }
  .help-admin-list .help-list-tools { display:flex; flex-direction:column; padding:14px; gap:13px; }
  .help-filters { gap:10px; } .help-filters label { flex:1 1 100px; flex-direction:column; align-items:stretch; }
  .help-issue { padding:19px 14px; gap:10px; } .issue-title h2 { width:100%; font-size:15px; }
  .chat-admin-tools { padding:12px; flex-wrap:wrap; } .help-dialog { padding:22px; } .help-dialog textarea { min-height:180px; }
}