:root{color-scheme:light;--brand:#0a1628;--accent:#00a8b5;--bg:#f4f6f9;--card:#fff;--ink:#14202e;--muted:#5d6b7a;--line:#e1e6ec;--soft:#eef2f6;--ok:#127a4a;--okbg:#e5f5ec;--warn:#9a5b00;--warnbg:#fff3dc;--bad:#a1261d;--badbg:#fdecea;--human:#2f54c9;--humanbg:#e9eefc;--r:10px}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:22px;margin:0 0 4px}h2{font-size:17px;margin:0 0 12px}
.muted{color:var(--muted)}.small{font-size:13px}

/* top bar */
.top{display:flex;align-items:center;gap:18px;background:var(--brand);color:#fff;padding:0 20px;height:58px}
.top .logo{display:flex;align-items:center;gap:10px;font-weight:650;color:#fff}
.top .logo img{height:30px;max-width:150px;object-fit:contain;background:#fff;border-radius:6px;padding:3px}
.top nav{display:flex;gap:4px;margin-left:12px;flex-wrap:wrap}
.top nav a{color:rgba(255,255,255,.82);padding:8px 12px;border-radius:8px;font-size:14px}
.top nav a:hover{background:rgba(255,255,255,.1);text-decoration:none}
.top nav a.on{background:rgba(255,255,255,.16);color:#fff}
.top .me{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:14px}
.top .me form{margin:0}
.linkbtn{background:none;border:0;color:rgba(255,255,255,.85);font:inherit;cursor:pointer;padding:6px 8px;border-radius:6px}
.linkbtn:hover{background:rgba(255,255,255,.12)}
.viewing{background:var(--warnbg);color:var(--warn);font-size:13px;padding:6px 20px;display:flex;gap:12px;align-items:center}
.viewing form{margin:0}

main{padding:22px;max-width:1180px;margin:0 auto}
main.full{max-width:none;padding:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.stack>*+*{margin-top:16px}
footer.powered{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;color:var(--muted);font-size:12px}
footer.powered .pill{display:inline-flex;align-items:center;background:#0a1628;border-radius:6px;padding:3px 7px}
footer.powered img{height:14px}

/* forms: all our own controls, the browser's are never shown */
label.f{display:block;font-size:13px;font-weight:600;margin:0 0 6px}
.field{margin-bottom:16px}
.field .help{font-size:12px;color:var(--muted);margin-top:5px}
.field .err,.formerr{font-size:13px;color:var(--bad);margin-top:6px}
.formerr{background:var(--badbg);border-radius:8px;padding:10px 12px;margin:0 0 14px}
.notice{background:var(--okbg);color:var(--ok);border-radius:8px;padding:10px 12px;font-size:14px}
.notice.warn{background:var(--warnbg);color:var(--warn)}
.in,.sel,textarea.in{width:100%;font:inherit;color:var(--ink);background:#fff;border:1px solid #cfd7e0;border-radius:8px;padding:10px 12px;outline:none;transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none}
.in:focus,.sel:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.in.bad{border-color:var(--bad)}
textarea.in{min-height:90px;resize:vertical}
.sel{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px;cursor:pointer}
.code{letter-spacing:.3em;font-size:22px;text-align:center;font-variant-numeric:tabular-nums}
.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;margin:6px 0;font-size:14px}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check .box{flex:0 0 18px;height:18px;border:1.5px solid #b6c1cd;border-radius:5px;margin-top:1px;background:#fff;display:flex;align-items:center;justify-content:center;transition:all .15s}
.check input:checked+.box{background:var(--accent);border-color:var(--accent)}
.check input:checked+.box::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.check input:focus-visible+.box{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.file{display:flex;align-items:center;gap:10px}
.file input{position:absolute;opacity:0;width:1px;height:1px}
.file .fname{font-size:13px;color:var(--muted)}

.btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:600;font-size:14px;border-radius:8px;padding:9px 16px;border:1px solid transparent;cursor:pointer;background:var(--accent);color:#fff;transition:filter .15s,transform .05s;white-space:nowrap}
.btn:hover{filter:brightness(.95);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--ink);border-color:#cfd7e0}
.btn.dark{background:var(--brand)}
.btn.danger{background:#fff;color:var(--bad);border-color:#efc4bf}
.btn.sm{padding:6px 11px;font-size:13px}
.btn:disabled{opacity:.55;cursor:default}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}

/* auth pages */
.auth{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px}
.auth .card{width:100%;max-width:420px;padding:28px}
.auth .brandhead{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.auth .brandhead img{height:36px;max-width:170px;object-fit:contain}
.qr{display:flex;justify-content:center;margin:12px 0}
.qr svg{width:200px;height:200px}
.secret{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--soft);padding:8px 10px;border-radius:8px;text-align:center;font-size:14px;word-break:break-all}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:16px;margin:14px 0}
.codes span{background:var(--soft);padding:8px;border-radius:6px;text-align:center}

/* tables */
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--line)}
table.t td{padding:10px;border-bottom:1px solid var(--soft);vertical-align:middle}
.tag{display:inline-block;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--soft);color:var(--muted)}
.tag.ai{background:var(--okbg);color:var(--ok)}
.tag.needs_human{background:var(--warnbg);color:var(--warn)}
.tag.human{background:var(--humanbg);color:var(--human)}
.tag.off{background:var(--badbg);color:var(--bad)}

/* inbox */
.inbox{display:grid;grid-template-columns:360px 1fr;height:calc(100vh - 58px);background:var(--card);border-top:1px solid var(--line)}
.inbox.viewing-on{height:calc(100vh - 58px - 31px)}
.list{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.filters{padding:12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.tabs{display:flex;gap:4px;flex-wrap:wrap}
.tabs button{font:inherit;font-size:13px;border:0;background:var(--soft);color:var(--muted);padding:6px 10px;border-radius:999px;cursor:pointer}
.tabs button.on{background:var(--brand);color:#fff}
.tabs button .n{font-weight:700;margin-left:4px}
.convs{overflow-y:auto;flex:1}
.conv{display:block;width:100%;text-align:left;font:inherit;background:none;border:0;border-bottom:1px solid var(--soft);padding:12px 14px;cursor:pointer;color:inherit}
.conv:hover{background:#f8fafc}
.conv.on{background:color-mix(in srgb,var(--accent) 9%,#fff)}
.conv .l1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.conv .who{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .when{font-size:12px;color:var(--muted);flex:none}
.conv .l2{display:flex;gap:6px;align-items:center;margin-top:5px;font-size:12px;color:var(--muted)}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.thread{display:flex;flex-direction:column;min-height:0}
.thead{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.thead .who{font-weight:650;font-size:16px}
.thead .acts{margin-left:auto;display:flex;gap:8px}
.msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;background:#fafbfc}
.m{max-width:72%;display:flex;flex-direction:column}
.m .b{padding:9px 13px;border-radius:16px;white-space:pre-wrap;word-wrap:break-word}
.m .meta{font-size:11px;color:var(--muted);margin:3px 6px}
.m.contact{align-self:flex-start}.m.contact .b{background:#fff;border:1px solid var(--line);border-bottom-left-radius:5px}
.m.ai,.m.human{align-self:flex-end;align-items:flex-end}
.m.ai .b{background:var(--accent);color:#fff;border-bottom-right-radius:5px}
.m.human .b{background:var(--human);color:#fff;border-bottom-right-radius:5px}
.m.system{align-self:center}.m.system .b{background:var(--soft);color:var(--muted);font-size:13px}
.compose{border-top:1px solid var(--line);padding:12px 14px;display:flex;gap:10px;align-items:flex-end;background:#fff}
.compose textarea{min-height:44px;max-height:160px}
.compose .hint{font-size:12px;color:var(--muted);padding:0 14px 10px;background:#fff}
.reason{font-size:13px;background:var(--warnbg);color:var(--warn);padding:8px 18px}

/* test chat */
.testchat{display:flex;flex-direction:column;height:calc(100vh - 230px);min-height:420px;padding:0;overflow:hidden}

/* our own dialog and tooltip (never confirm() or title=) */
.dlg-back{position:fixed;inset:0;background:rgba(10,22,40,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.dlg-back.open{display:flex}
.dlg{background:#fff;border-radius:12px;max-width:420px;width:100%;padding:22px;box-shadow:0 20px 50px rgba(10,22,40,.25)}
.dlg h3{margin:0 0 8px;font-size:17px}
.dlg .row{justify-content:flex-end;margin-top:18px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;font-size:14px;z-index:60;display:none;max-width:90vw}
.toast.bad{background:var(--bad)}
.tip{position:fixed;z-index:70;background:var(--ink);color:#fff;font-size:12px;padding:5px 8px;border-radius:6px;pointer-events:none;max-width:260px;display:none}

@media (max-width:800px){
  .inbox{grid-template-columns:1fr}
  .inbox.has-open .list{display:none}
  .inbox:not(.has-open) .thread{display:none}
  .top{height:auto;flex-wrap:wrap;padding:10px 16px}
  .inbox{height:auto;min-height:calc(100vh - 120px)}
  .m{max-width:88%}
  main{padding:16px}
}
.back{display:none}
@media (max-width:800px){.back{display:inline-flex}}