/* Shared application theme, with a readable, compact support layout. */
:root { --orange:#d9ac66; --red:#ff9b9b; }
body { font:15px/1.55 system-ui,sans-serif; }
header { max-width:1440px; margin:auto; padding:20px 28px; gap:20px; }
header .brand { color:var(--neon); font:700 23px Georgia,serif; }
.brand small { margin-top:5px; font:italic 12px Georgia,serif; letter-spacing:.04em; }
.brand img { object-fit:contain; flex-shrink:0; }
main { max-width:1440px; padding:25px 28px; }
h1,h2 { font-family:Georgia,serif; font-style:italic; }
h1 { font-size:32px; font-weight:700; }
h2 { font-size:19px; }
.heading { margin-bottom:20px; }
.heading p { max-width:650px; font-size:14px; }
.eyebrow { color:var(--gold); }
.layout { border-radius:0; background:var(--panel); grid-template-columns:260px minmax(0,1fr); }
.inbox { background:#0b1c0e; }
.thread { border:0; }
body .message { border-radius:0; background:#0c1b10; }
body .message.support { background:#163119; border-color:#448a39; }
body .message.assistant { background:#102619; border-color:#2c753d; }
.message p { line-height:1.65; }
.message-meta { color:var(--green); }
.message-sources { border-top:1px solid #295331; padding-top:8px; }
#messageForm { background:#071208; }
body :is(input,textarea) { background:#061007; border:1px solid var(--line); }
body button { padding:10px 20px; }
body #conversationList button { clip-path:none; border:1px solid transparent; background:transparent!important; border-left:3px solid transparent; padding:12px; }
body #conversationList button::before { display:none; }
body #conversationList button.selected { border-color:#387d31; border-left-color:var(--neon); background:#1c3b1d!important; }
body #conversationList button:hover { background:#143019!important; }
body .download { --button-face:#102716; color:var(--green); padding:8px 18px; }
body #fileList button { padding:4px 15px; }
.file-button { border-radius:0; border:1px solid #d99432; background:#173419; color:var(--text); }
#connection.online::before { color:var(--neon); }
#connection.offline::before { color:var(--red); }
#clientReference { display:block; margin-top:6px; color:var(--green); font-size:12px; overflow-wrap:anywhere; }
#conversationList small { overflow-wrap:anywhere; }
#pseudoHelp { display:block; margin-top:6px; font-size:11px; color:var(--muted); }
.name-conflict { padding:14px; margin:14px 0; border:1px solid #ba832c; background:#241d0b; }
.name-conflict p { color:#f4d599; font-size:13px; }
#messageForm:has(#nameConflict:not([hidden])) .send-row { display:none; }
.assistant-bar { background:#0d1c10; }
header #retryConnection { margin-left:auto; }
footer { font-size:12px; border:0; }
body #conversationList button.has-unread { border-left-color:#ff9f1c; background:#30200c!important; }
body #conversationList button.has-unread :is(strong,small) { color:#ffb347; }
body .badge { background:#ff9f1c; color:#1b1000; }
body .message.unread-message { border-color:#ff9f1c; border-left-width:4px; background:#2b1c0a; }
body .message.unread-message .message-meta { color:#ffb347; }
body input:read-only { color:#a4b7a5; background:#182019; opacity:.75; cursor:default; }
.offline-options { color:var(--muted); font-size:12px; margin:0 0 14px; }
.offline-options summary { cursor:pointer; }
.offline-options p { max-width:760px; }
#cacheStatus { color:#ffb347; font-size:12px; }
.privacy-info { position:relative; align-self:center; }
.privacy-info summary { display:grid; place-items:center; width:25px; height:25px; border:1px solid #ffab00; border-radius:50%; color:#ffbd48; cursor:pointer; font-weight:bold; }
.privacy-info summary::marker { content:''; }
.privacy-info p { position:absolute; z-index:5; right:0; top:28px; width:min(300px,80vw); padding:12px; background:#101d12; border:1px solid #ffab00; color:var(--text); font-size:13px; line-height:1.5; box-shadow:0 5px 20px #000a; }
#vpnIntro { width:min(680px,calc(100vw - 32px)); max-height:85vh; overflow:auto; background:#071208; color:var(--text); border:1px solid #63f45c; padding:24px; }
#vpnIntro::backdrop { background:#000b; }
#vpnIntro li { margin:12px 0; }
#vpnIntro .vpn-choice { margin:14px 0; padding:14px 16px; border:1px solid #315a35; background:#0b1b0f; }
#vpnIntro .vpn-choice h3 { margin:0 0 8px; color:var(--green); font-size:15px; }
#vpnIntro .vpn-choice ol { margin:8px 0; padding-left:22px; }
#vpnIntro .vpn-choice p { margin:8px 0 0; font-size:13px; }
#vpnIntro #vpnInstallerDownload { display:inline-block; margin:5px 0 8px; text-decoration:none; }
#vpnIntro a.vpn-open-button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 18px; border:2px solid #ff9f1c; border-radius:9px; background:#38220d; color:#ffe0ad; font:700 14px/1.4 system-ui,sans-serif; text-decoration:none; box-shadow:0 0 12px #ff9f1c33; }
#vpnIntro a.vpn-open-button:hover { background:#57330f; border-color:#ffb347; color:#fff0d1; }
#vpnIntro a.vpn-open-button:active { transform:translateY(1px); }
#vpnIntro .vpn-warning { color:#ffca7a; }
#closeVpnIntro { float:right; }
.vpn-intro-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; margin-top:20px; }
.help-capture-request { margin:12px 0 0; padding:10px 12px; border-left:3px solid #ffab00; background:#101b12; color:var(--muted); font-size:13px; }
.connection-details { font-size:13px; color:var(--muted); border-left:3px solid var(--green); padding:9px 14px; background:#0b1c0e; margin-bottom:20px; }
.connection-details p { margin:0 0 4px; }
.connection-details.unreachable { border-color:#ff9b9b; }
.presence-dot { display:inline-block; width:9px; height:9px; min-width:9px; border-radius:50%; background:#819081; margin-right:8px; }
.presence-dot.online { background:#63f45c; box-shadow:0 0 5px #63f45c66; }
.presence-dot.offline { background:#ff6b6b; }
.presence-dot.unknown { background:#d9ac66; }
#clientList { list-style:none; padding:0; margin:14px 0; }
#clientList li { margin:7px 0; }
body #clientList button { width:100%; text-align:left; clip-path:none; padding:12px; border:1px solid transparent; border-left:3px solid transparent; color:var(--text); background:transparent!important; }
body #clientList button::before { display:none; }
body #clientList button:hover { background:#143019!important; }
body #clientList button.selected { border-color:#387d31; border-left-color:var(--neon); background:#1c3b1d!important; }
body #clientList button.has-unread { border-left-color:#ff9f1c; background:#30200c!important; }
body #clientList button.has-unread strong { color:#ffb347; }
#clientList strong { overflow-wrap:anywhere; }
#clientList small { display:block; color:var(--muted); font-weight:normal; font-size:11px; margin-top:5px; overflow-wrap:anywhere; }
body .layout.admin-layout { grid-template-columns:220px 240px minmax(0,1fr); }
#requestHeading { padding-bottom:8px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.inbox-heading-meta { display:flex; align-items:center; gap:8px; text-align:right; }
#inboxClock { color:var(--muted); font-size:11px; white-space:nowrap; font-variant-numeric:tabular-nums; }
#requestEmpty { font-size:13px; color:var(--muted); }
.request-inbox { background:#08170c; }
@media(max-width:1100px) { body .layout.admin-layout { grid-template-columns:190px 205px minmax(0,1fr); } }
@media(max-width:850px) { body .layout.admin-layout { grid-template-columns:1fr 1fr; } .admin-layout>.thread { grid-column:1/-1; } }
@media(max-width:620px) { body .layout.admin-layout { grid-template-columns:1fr; } .admin-layout>.thread { grid-column:auto; } #clientList { max-height:180px; overflow:auto; } }
.help-screenshot { margin:14px 0 8px; max-width:100%; }
.help-picture { position:relative; line-height:0; }
.help-picture img { width:100%; height:auto; display:block; border:1px solid #47743f; }
.help-picture svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.help-screenshot figcaption { margin-top:8px; font-size:13px; line-height:1.5; color:#dfedda; }
#helpImageDialog { width:min(1550px,96vw); max-width:96vw; max-height:94vh; padding:18px; background:#071108; color:#dfedda; border:1px solid #5cba48; }
.help-image-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; }
#helpImageContent { overflow:auto; max-height:76vh; }
#helpImageContent .help-screenshot { width:1500px; max-width:none; }
#helpImageContent figcaption { position:sticky; left:0; max-width:85vw; }
.assistant-bar:has(#assistantStatus:empty) { display:none; }
body button:focus-visible,body a:focus-visible { outline:3px solid var(--neon); outline-offset:3px; }
.profile-remove,.history-result { width:100%; margin:4px 0 8px; text-align:left; font-size:11px; padding:8px 10px; background:#152219; color:var(--muted); border:1px solid #315a35; }
.profile-remove:hover,.history-result:hover { color:var(--green); background:#1c3b1d; }
.history-lookup { margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.history-lookup h2 { margin-bottom:8px; }
.history-lookup label { font-size:11px; }
.history-lookup button[type=submit] { margin-top:8px; width:100%; }
#historyNotice { color:var(--muted); font-size:11px; min-height:1.5em; }
#historyResults { list-style:none; margin:8px 0; padding:0; max-height:190px; overflow:auto; }
.satisfaction-panel { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:12px 24px; border-top:1px solid var(--line); background:#0b1c0e; }
.satisfaction-panel p { flex-basis:100%; margin:0; font-size:13px; color:var(--muted); }
.satisfaction-panel button { font-size:12px; }
@media(max-width:900px) { .layout { grid-template-columns:210px minmax(0,1fr); } header,main { padding:18px; } }
@media(max-width:620px) { .layout { grid-template-columns:1fr; } header { gap:14px; } header .brand { font-size:19px; } .brand img { width:42px; height:42px; } h1 { font-size:27px; } header #retryConnection { margin-left:0; } }
/* Readable replies: restrained headings, spacing and real ordered steps. */
.message .message-body{font-family:system-ui,sans-serif;font-size:14px;line-height:1.75;font-style:normal}.message-body>p+p,.message-body>ol+p{margin-top:.85rem}.message-body .answer-title{font:600 17px/1.4 system-ui,sans-serif;color:#c4f4b5;margin:0 0 .8rem}.message-body .answer-intro{color:#b5c9b0;margin-bottom:.7rem}.message-body .answer-steps{list-style:decimal;padding-left:1.65rem;margin:.6rem 0 1rem}.message-body .answer-steps li{padding-left:.3rem;margin:.7rem 0}.message-body .answer-steps li::marker{color:#78df60;font-weight:700}.message-body strong{font-weight:650;color:#d4efc8}.message-body .answer-followup{border-left:2px solid #68a551;padding:.5rem .8rem;background:#16291b;margin-top:1rem}.message-body .answer-caution{border-left:2px solid #e0ab55;padding:.6rem .8rem;margin-top:1rem;background:#282214}.message-body .chat-signature{display:flex;justify-content:flex-start;align-items:center;gap:14px;margin:1.1rem 0 0;padding:1rem 0 0;border-top:1px solid #365c30;text-align:left;flex-wrap:nowrap}.chat-signature img{object-fit:cover;width:112px;height:56px;border:1px solid #3b6235}.chat-signature>div{display:grid;gap:.15rem}.chat-signature strong{font-size:16px;color:#9ce37d}.chat-signature span,.chat-signature a{font-size:11px;line-height:1.5}.chat-signature a{margin-top:.2rem}.quick-replies{border:1px solid #426437;background:#101e12;margin-bottom:1rem;padding:.7rem 1rem}.quick-replies summary{color:#c5e7b4;cursor:pointer;font-weight:600}.quick-reply-controls{display:flex;gap:1rem;align-items:end;flex-wrap:wrap;margin-top:1rem}.quick-reply-controls>label:first-child{flex:1 1 230px}.quick-reply-controls select{display:block;width:100%;padding:.6rem;margin-top:.4rem;background:#07130a;color:#d4efc8;border:1px solid #426437;font:inherit}.quick-signature{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem}.quick-signature input{width:auto;margin:0}.quick-reply-preview{white-space:pre-wrap;max-height:210px;overflow:auto;border-left:2px solid #5b7f43;padding:.6rem 1rem;color:#cbdcc2;line-height:1.65;font-size:13px}.quick-replies>small{display:block;color:#aebda7;line-height:1.6;margin-top:.7rem}@media(max-width:620px){.message-body .chat-signature{align-items:flex-start;flex-direction:column}.quick-replies{padding:.7rem}.quick-signature{margin-bottom:0}}

/* Assistant answers use a consistent heading, readable paragraphs and steps. */
.message-body .answer-title{padding:0 0 .55rem;border-bottom:1px solid #365c30;margin-bottom:.9rem}
.message-body>p{margin:.65rem 0 0}
.message-body .answer-intro{margin-top:.25rem}
.message-body .answer-steps{margin:.35rem 0 1.1rem}
.message-body .answer-followup{margin-top:1.1rem}
.quick-reply-preview{white-space:pre-wrap}

#vpnAutoStatus{color:#ffd086}

#vpnIntro a#vpnInstallerDownload{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;min-height:48px;padding:12px 20px;border:2px solid #ff9f1c;border-radius:8px;clip-path:none;background:linear-gradient(110deg,#148b08,#41dd20)!important;color:#041503;font:700 14px/1.45 system-ui,sans-serif;text-align:center;text-decoration:none;box-shadow:0 2px 9px #0004}#vpnIntro a#vpnInstallerDownload::before{display:none}#vpnIntro a#vpnInstallerDownload:hover{background:linear-gradient(110deg,#20a912,#65ef36)!important}#vpnIntro a#vpnInstallerDownload:focus-visible{outline:3px solid #ffcf70;outline-offset:4px}#vpnInstallerDownload>span:first-child{font-size:24px;line-height:1}.human-feedback{margin-top:14px;padding-top:12px;border-top:1px solid #477340;color:#c4d9bc;font-size:12px}.human-feedback small{display:block;margin-bottom:9px}.human-feedback-actions{display:flex;gap:12px;flex-wrap:wrap}.human-feedback-actions button{min-width:90px}.send-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.send-actions #closeClientRequest{--button-face:#422715;color:#ffdda4}@media(max-width:620px){.send-actions{width:100%}.send-actions .primary{width:auto;flex:1}.send-actions #closeClientRequest{flex:0 0 auto}}

.help-frame { margin-top:12px; }
.help-step-legend { display:flex; flex-wrap:wrap; gap:6px 28px; margin:8px 0 14px; padding-left:24px; color:#e5eee4; font-size:13px; line-height:1.5; }
.help-step-legend li::marker { color:#ffb000; font-weight:bold; }
#helpImageContent .help-step-legend { max-width:85vw; position:sticky; left:0; }

.support-code-intake{width:min(620px,calc(100vw - 40px));max-height:85vh;overflow:auto;background:#07150b;color:#dbead3;border:1px solid #55953d;padding:22px}.support-code-intake label{display:grid;gap:6px;margin:12px 0}.support-code-intake input,.support-code-intake select{box-sizing:border-box;width:100%;background:#07140b;color:#dbead3;border:1px solid #446c3e;padding:10px}.support-code-intake [role=status]{color:#ffca78}
