:root { color-scheme: light; --ink:#203c38; --muted:#657570; --line:#e1e7e2; --paper:#fff; --teal:#236b5e; --pale:#edf4ef; --amber:#8a5916; font-family: "Segoe UI", system-ui, sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#f5f6f2; font-size:14px; }
button,input,textarea { font:inherit; }
button { cursor:pointer; border:1px solid var(--line); border-radius:9px; background:white; color:var(--ink); padding:10px 13px; font-weight:600; }
button:hover:not(:disabled) { background:#e8f0eb; border-color:#95b3a3; }
button:disabled { opacity:.46; cursor:not-allowed; }
:focus-visible { outline:3px solid #63a391; outline-offset:3px; }
[hidden] { display:none !important; }
.topbar { height:86px; display:flex; justify-content:space-between; align-items:center; padding:0 30px; border-bottom:1px solid var(--line); background:#fafbf8; gap:20px; }
.brand { display:flex; align-items:center; gap:12px; }
.monogram { font-size:34px; font-family:Georgia,serif; background:var(--ink); color:#f1f4eb; border-radius:14px; width:48px; height:48px; text-align:center; line-height:41px; }
.brand strong { display:block; font-size:27px; font-weight:650; letter-spacing:-1.3px; }
.brand div>span { font-size:9px; letter-spacing:1.5px; }
.local-tag { padding:8px 13px; border:1px solid #d6e4d9; border-radius:20px; font-size:12px; color:#456658; }
.local-tag i { display:inline-block; width:7px; height:7px; border-radius:50%; background:#779d83; margin-right:7px; }
.operator { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:600; }
.operator small { display:block; color:var(--muted); font-size:11px; font-weight:400; padding-top:4px; }
.operator button { font-size:11px; margin-left:8px; }
.login-panel { min-height:calc(100dvh - 126px); display:grid; place-items:center; padding:35px 20px; background:radial-gradient(ellipse at 20% 30%,#e5ede5,transparent 75%); }
.login-card { width:min(420px,100%); background:#fff; border:1px solid var(--line); border-radius:20px; padding:32px; box-shadow:0 18px 50px #203c3810; }
.login-card h1 { margin-top:14px; }
.login-card p { color:var(--muted); line-height:1.7; font-size:13px; }
.login-card label { display:block; margin:20px 0 7px; font-size:12px; font-weight:600; }
.login-card input { border:1px solid #cbd8cd; border-radius:8px; width:100%; padding:12px; color:var(--ink); }
.login-card .test-password { background:#f6f3e8; border-radius:8px; padding:12px; font-size:11px; }
.login-card small { color:var(--muted); line-height:1.8; display:block; font-size:11px; }
#login-error { color:#913e32; }
.avatar { display:grid; place-items:center; width:34px; height:34px; background:#e7e2d5; border-radius:50%; font-family:Georgia,serif; font-size:19px; }
.safety { padding:10px 25px; background:#f6efd9; color:#705c29; text-align:center; font-size:12px; border-bottom:1px solid #e9dfbe; line-height:1.5; }
main { display:grid; grid-template-columns:290px minmax(340px,1fr) 290px; max-width:1700px; margin:auto; height:calc(100dvh - 126px); min-height:520px; }
.inbox { border-right:1px solid var(--line); display:flex; flex-direction:column; background:#fafbf8; min-height:0; }
.section-head { padding:27px 23px 10px; }
.eyebrow { font-size:9px; font-weight:700; letter-spacing:1.35px; color:#728679; }
h1 { font-size:26px; letter-spacing:-.8px; font-weight:650; margin:10px 0; }
h1 span { display:inline-block; font-size:12px; background:#e6eee6; border-radius:8px; padding:4px 7px; vertical-align:middle; letter-spacing:0; }
.section-head p { font-size:12px; line-height:1.7; color:var(--muted); margin:0; }
.search-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#search { margin:10px 18px 14px; width:calc(100% - 36px); border:1px solid var(--line); border-radius:9px; padding:11px; background:white; font-size:12px; }
.filters { margin:0 18px 17px; display:flex; gap:3px; background:#edf0eb; padding:3px; border-radius:8px; }
.filters button { flex:1; font-size:11px; white-space:nowrap; padding:8px 4px; background:transparent; border-color:transparent; }
.filters .selected { background:white; box-shadow:0 1px 3px #21312b14; }
.conversation-list { overflow:auto; flex:1; padding:0 10px; }
.contact { width:100%; text-align:left; display:block; border:1px solid transparent; border-radius:11px; padding:15px 12px; margin-bottom:6px; background:transparent; font-weight:400; }
.contact.active { background:#eaf2ea; border-color:#ccdccc; }
.contact strong { font-size:13px; font-weight:650; display:block; margin-bottom:7px; }
.contact .preview { display:block; color:var(--muted); font-size:11px; margin:7px 0 10px; line-height:1.55; }
.contact small { font-size:10px; color:#577363; }
.list-footer { padding:15px 22px; font-size:10px; color:#7a887d; line-height:1.7; border-top:1px solid var(--line); }
.conversation { display:flex; flex-direction:column; background:var(--paper); min-height:0; }
.conversation-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:25px 27px 20px; border-bottom:1px solid var(--line); }
h2 { margin:7px 0; font-size:20px; font-weight:600; letter-spacing:-.4px; }
.conversation-heading p { margin:0; color:var(--muted); font-size:12px; }
.badge { display:inline-block; background:#eaf1e9; color:#406b4e; padding:6px 9px; border-radius:6px; font-size:10px; font-weight:650; white-space:nowrap; }
.badge.waiting { color:#8a622b; background:#f8efd9; }
.badge.unknown { color:#914c39; background:#fbeae3; }
.conversation-notice { padding:12px 27px; font-size:12px; line-height:1.6; background:#f3f6f1; color:#526b59; }
.conversation-notice.warning { color:#844e32; background:#fff4e4; }
.messages { flex:1; overflow:auto; padding:26px 28px; background:radial-gradient(ellipse at 90% 80%,#f6f6f0,transparent 80%),#fcfcf9; }
.timeline-label { text-align:center; font-size:10px; color:#8b958b; margin-bottom:25px; }
.message { max-width:88%; margin:0 0 19px; }
.message.automation,.message.human { margin-left:auto; }
.message .author { display:block; color:#718174; font-size:10px; margin-bottom:6px; }
.message.automation .author,.message.human .author { text-align:right; }
.bubble { border:1px solid #e3e7df; padding:13px 16px; background:white; border-radius:3px 13px 13px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; font-size:13px; }
.automation .bubble { background:#ecf2e8; border-color:#dce7d8; border-radius:13px 3px 13px 13px; }
.human .bubble { background:#e5f0ef; border-color:#d2e5e2; border-radius:13px 3px 13px 13px; }
.receipt { font-size:9px; color:#718075; text-align:right; margin-top:5px; }
.receipt.uncertain { color:#9a553b; font-weight:600; }
.composer { padding:18px 25px 21px; border-top:1px solid var(--line); }
.composer label { display:block; font-size:11px; font-weight:600; margin-bottom:8px; }
textarea { width:100%; resize:vertical; min-height:70px; max-height:180px; padding:12px; border-radius:9px; border:1px solid #d7e0d7; background:#fcfdfb; color:var(--ink); font-size:13px; }
textarea:disabled { background:#f3f4f0; }
.composer-bottom { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-top:11px; }
.composer-bottom>span { font-size:10px; color:var(--muted); }
.primary { background:var(--teal); color:white; border:1px solid var(--teal); font-size:12px; padding:11px 15px; }
.primary:hover:not(:disabled) { background:#175245; color:white; }
.primary span { margin-left:8px; }
.wide { width:100%; }
.context { border-left:1px solid var(--line); background:#fafbf8; padding:28px 23px; overflow:auto; }
.context h2 { font-family:Georgia,serif; font-size:23px; line-height:1.3; font-weight:400; margin:11px 0; }
.context p { font-size:12px; color:var(--muted); line-height:1.65; }
.summary { margin-top:25px; border-top:1px solid var(--line); padding-top:17px; }
h3 { font-size:12px; margin:0 0 16px; font-weight:650; }
dl { margin:0; }
dt { font-size:10px; color:#829083; margin-top:14px; }
dd { margin:4px 0 0; font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.context .small-note { font-size:10px; color:#849084; }
.pending-box { padding:14px; border-radius:8px; background:#fcf3df; margin-top:20px; }
.pending-box p,.pending-box small { font-size:11px; line-height:1.6; }
.lab { margin-top:22px; border-top:1px solid var(--line); padding-top:16px; }
.lab summary { font-weight:600; font-size:12px; cursor:pointer; }
.lab p { font-size:10px; }
.lab-actions { display:grid; gap:7px; }
.lab-actions button { text-align:left; font-size:10px; padding:9px 10px; }
#maternity-form { margin-top:12px; }
#maternity-form label { display:block; font-size:11px; margin-bottom:6px; }
#maternity-send { margin-top:8px; font-size:11px; }
#maternity-reason { color:#753d32; }
.limits { border-top:1px solid var(--line); padding-top:15px; margin-top:20px; }
#feedback { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); max-width:90vw; background:#21473e; color:white; border-radius:10px; padding:12px 20px; font-size:12px; box-shadow:0 4px 20px #1232; z-index:5; }
#feedback:empty { display:none; }
.cloud-recovery { margin:20px 28px 40px; padding:24px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.cloud-recovery h2 { margin:0 0 10px; font-family:Georgia,serif; font-weight:400; }
.cloud-recovery p { font-size:13px; line-height:1.65; max-width:960px; }
.recovery-tools,.recovery-list { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.recovery-detail:not(:empty) { padding:18px; background:#f6f7f2; border-radius:8px; }
.recovery-detail pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; }
.recovery-detail button { background:#21473e; color:white; }
.offline { position:fixed; top:0; left:0; right:0; background:#753d32; color:white; text-align:center; padding:18px; z-index:10; }
.offline button { margin-left:12px; font-size:12px; }
.empty { color:var(--muted); font-size:12px; padding:20px; }
@media (max-width:1150px) { main { grid-template-columns:240px minmax(320px,1fr) 245px; } .context { padding:22px 17px; } .section-head { padding:24px 18px 10px; } .composer-bottom { flex-wrap:wrap; } .conversation-heading { padding:22px 20px; flex-wrap:wrap; } }
@media (max-width:850px) { main { grid-template-columns:220px minmax(0,1fr); height:auto; } .context { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:20px; border-top:1px solid var(--line); } .conversation { min-height:700px; } .messages { max-height:480px; } .local-tag { display:none; } .summary { margin:0; border:0; padding:0; } .inbox { max-height:840px; } }
@media (max-width:580px) { .topbar { height:74px; padding:0 17px; } .brand strong { font-size:23px; } .brand div>span { font-size:8px; } .operator { font-size:10px; } .operator small { max-width:90px; } .safety { font-size:11px; padding:10px 15px; } main { display:flex; flex-direction:column; min-height:0; } .section-head { padding:20px 18px 5px; } .section-head p,.list-footer { display:none; } h1 { font-size:22px; margin:7px 0; } #search { margin-bottom:10px; } .conversation-list { display:flex; padding:0 14px 12px; overflow:auto; flex:none; } .contact { flex:0 0 205px; margin-right:8px; margin-bottom:0; } .filters { margin-bottom:10px; } .conversation { min-height:650px; } .messages { max-height:400px; padding:22px 18px; } .composer { padding:17px; } .conversation-heading { padding:20px 18px; } .context { display:block; border-left:0; } .summary { margin-top:24px; } }