/* HomeOffice web app — chat-first · ลีนขาว (โทนเดียวกับ showcase) */
:root{
  --ink:26 32 50; --muted:92 100 120; --faint:150 156 172;
  --line:26 32 50; --surface:249 250 252; --card:255 255 255; --accent:37 99 235;
  --sh-sm:0 1px 2px rgb(26 32 50/.04),0 1px 1px rgb(26 32 50/.03);
  --sh-md:0 4px 14px -4px rgb(26 32 50/.09),0 2px 6px -2px rgb(26 32 50/.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Anuphan",system-ui,sans-serif;color:rgb(var(--ink));background:rgb(var(--surface));line-height:1.55;-webkit-font-smoothing:antialiased}
.disp{font-family:"Bai Jamjuree",sans-serif;letter-spacing:-.01em}
.num{font-variant-numeric:tabular-nums}
button,input,textarea,select{font-family:inherit}
.hidden{display:none!important}

/* auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;
  background-image:radial-gradient(1000px 400px at 85% -10%,rgb(37 99 235/.06),transparent 60%)}
.auth-card{width:100%;max-width:400px;background:rgb(var(--card));border:1px solid rgb(var(--line)/.1);border-radius:18px;box-shadow:var(--sh-md);padding:30px}
.brand{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.mark{width:38px;height:38px;border:1.5px solid rgb(var(--ink));border-radius:11px;display:grid;place-items:center}
.tabs{display:flex;gap:6px;background:rgb(var(--line)/.04);padding:4px;border-radius:11px;margin:18px 0}
.tabs button{flex:1;border:none;background:transparent;padding:8px;border-radius:8px;font-size:14px;color:rgb(var(--muted));cursor:pointer}
.tabs button.on{background:rgb(var(--card));color:rgb(var(--ink));box-shadow:var(--sh-sm);font-weight:500}
label{display:block;font-size:12.5px;color:rgb(var(--muted));margin:12px 0 4px}
input,textarea{width:100%;border:1px solid rgb(var(--line)/.16);border-radius:10px;padding:10px 12px;font-size:14px;background:#fff;color:rgb(var(--ink))}
input:focus,textarea:focus{outline:none;border-color:rgb(var(--accent));box-shadow:0 0 0 3px rgb(37 99 235/.12)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgb(var(--line)/.16);background:rgb(var(--card));color:rgb(var(--ink));padding:10px 16px;border-radius:11px;font-size:14px;font-weight:500;cursor:pointer;box-shadow:var(--sh-sm);transition:.15s}
.btn:hover{border-color:rgb(var(--ink)/.3)}
.btn-primary{background:rgb(var(--ink));color:#fff;border-color:rgb(var(--ink));width:100%;margin-top:18px}
.btn-primary:hover{background:rgb(var(--accent));border-color:rgb(var(--accent))}
.err{color:#b1453a;font-size:13px;margin-top:12px;min-height:18px}
.muted{color:rgb(var(--muted))}.small{font-size:12px}

/* app shell */
.app{display:grid;grid-template-columns:1fr 360px;grid-template-rows:auto 1fr;height:100vh}
.top{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:0 20px;height:60px;background:rgb(var(--card)/.85);backdrop-filter:blur(8px);border-bottom:1px solid rgb(var(--line)/.1)}
.top .sp{margin-left:auto}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:rgb(var(--muted));border:1px solid rgb(var(--line)/.14);padding:5px 11px;border-radius:9999px;background:rgb(var(--card))}
.icon-btn{width:38px;height:38px;border:1px solid rgb(var(--line)/.14);border-radius:10px;background:rgb(var(--card));cursor:pointer;display:grid;place-items:center;color:rgb(var(--ink))}

/* chat */
.chat{display:flex;flex-direction:column;min-height:0;border-right:1px solid rgb(var(--line)/.08)}
.thread{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:12px;max-width:760px;width:100%;margin:0 auto}
.bub{max-width:84%;padding:11px 15px;font-size:14.5px;border-radius:16px;white-space:pre-wrap}
.bub.u{align-self:flex-end;background:rgb(var(--ink));color:#fff;border-bottom-right-radius:6px}
.bub.a{align-self:flex-start;background:rgb(var(--card));border:1px solid rgb(var(--line)/.1);border-bottom-left-radius:6px;box-shadow:var(--sh-sm)}
.hello{text-align:center;color:rgb(var(--muted));margin:auto;max-width:420px}
.hello .ex{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.hello .ex button{font-size:13px;border:1px solid rgb(var(--line)/.14);background:rgb(var(--card));padding:7px 13px;border-radius:9999px;cursor:pointer;color:rgb(var(--ink))}
.composer{padding:14px 24px 20px;border-top:1px solid rgb(var(--line)/.08)}
.composer form{max-width:760px;margin:0 auto;display:flex;gap:10px;align-items:flex-end;border:1.5px solid rgb(var(--line)/.14);border-radius:16px;background:#fff;padding:8px 8px 8px 14px;box-shadow:var(--sh-md)}
.composer form:focus-within{border-color:rgb(var(--accent));box-shadow:0 0 0 4px rgb(37 99 235/.1),var(--sh-md)}
.composer textarea{border:none;box-shadow:none;resize:none;flex:1;padding:6px 0;max-height:120px}
.composer textarea:focus{box-shadow:none}
.send{width:40px;height:40px;border-radius:11px;border:none;background:rgb(var(--ink));color:#fff;cursor:pointer;display:grid;place-items:center;flex-shrink:0}
.send:hover{background:rgb(var(--accent))}.send:disabled{opacity:.4;cursor:default}

/* panels */
.side{overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px;background:rgb(var(--surface))}
.card{background:rgb(var(--card));border:1px solid rgb(var(--line)/.1);border-radius:14px;box-shadow:var(--sh-sm);padding:16px}
.card h3{font-size:13px;color:rgb(var(--muted));font-weight:600;display:flex;align-items:center;gap:7px;margin-bottom:12px}
.kpi{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-top:1px solid rgb(var(--line)/.06)}
.kpi:first-of-type{border-top:none}
.kpi b{font-family:"Bai Jamjuree";font-weight:600}
.zone{font-size:11px;font-weight:600;padding:2px 9px;border-radius:9999px;border:1px solid}
.zone.safe{color:#0f766e;border-color:rgb(16 185 129/.38);background:rgb(16 185 129/.06)}
.zone.warn{color:#92660b;border-color:rgb(234 179 8/.4);background:rgb(234 179 8/.07)}
.appr{border-top:1px solid rgb(var(--line)/.06);padding:11px 0}
.appr:first-of-type{border-top:none}
.appr .row{display:flex;gap:6px;margin-top:8px}
.appr .row button{flex:1;font-size:12.5px;padding:6px;border-radius:8px;border:1px solid rgb(var(--line)/.14);background:#fff;cursor:pointer}
.appr .row .ok{background:rgb(var(--ink));color:#fff;border-color:rgb(var(--ink))}
.empty{font-size:13px;color:rgb(var(--faint));text-align:center;padding:8px}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(12px);background:rgb(var(--ink));color:#fff;font-size:14px;padding:11px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.25s;z-index:90;box-shadow:0 10px 30px rgb(26 32 50/.22)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:860px){.app{grid-template-columns:1fr}.side{display:none}}