/* ══════════════════════════════════════════════════════════════
   Engerware Chat — Design System
   Pure black/white, no gradients, no neon. One grayscale ramp.
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

:root{
  /* Light (default) */
  --bg:        #ffffff;
  --bg-raised: #ffffff;
  --bg-sunken: #fafafa;
  --line:      #e5e5e5;
  --line-strong:#0a0a0a;
  --ink:       #0a0a0a;
  --ink-soft:  #565656;
  --ink-faint: #9a9a9a;
  --inv-ink:   #ffffff;
  --accent:    #0a0a0a;
  --accent-ink:#ffffff;
  --danger:    #b3261e;
  --danger-bg: #fdecea;
  --success:   #1f6d3b;
  --success-bg:#eaf5ee;
  --shadow:    0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --font-ui:   'Inter','Noto Sans Thai',system-ui,sans-serif;
}

html[data-theme="dark"]{
  --bg:        #0a0a0a;
  --bg-raised: #141414;
  --bg-sunken: #000000;
  --line:      #262626;
  --line-strong:#f5f5f5;
  --ink:       #f5f5f5;
  --ink-soft:  #a3a3a3;
  --ink-faint: #6b6b6b;
  --inv-ink:   #0a0a0a;
  --accent:    #f5f5f5;
  --accent-ink:#0a0a0a;
  --danger:    #ff6b61;
  --danger-bg: #2a1412;
  --success:   #4ade80;
  --success-bg:#0f2417;
  --shadow:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,textarea,select{font-family:inherit;}
a{color:inherit;}
::selection{background:var(--ink);color:var(--bg);}

::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--ink-faint);}

:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--radius-md);
  font-size:14px;font-weight:600;cursor:pointer;
  border:1px solid var(--line-strong);
  background:var(--ink);color:var(--bg);
  transition:transform .12s ease, opacity .12s ease;
  white-space:nowrap;
}
.btn:hover{opacity:.82;}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-outline:hover{border-color:var(--line-strong);opacity:1;background:var(--bg-sunken);}
.btn-ghost{background:transparent;color:var(--ink-soft);border-color:transparent;padding:8px 12px;}
.btn-ghost:hover{background:var(--bg-sunken);color:var(--ink);opacity:1;}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff;}
.btn-danger:hover{opacity:.85;}
.btn-sm{padding:7px 14px;font-size:13px;}
.btn-block{width:100%;}
.btn-icon{width:38px;height:38px;padding:0;border-radius:var(--radius-md);flex-shrink:0;}

/* ── Inputs ──────────────────────────────────────────────────── */
.field{margin-bottom:16px;text-align:left;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:7px;}
.field input,.field textarea{
  width:100%;background:var(--bg);border:1.5px solid var(--line);border-radius:var(--radius-md);
  padding:12px 14px;color:var(--ink);font-size:15px;outline:none;
  transition:border-color .15s ease;font-family:inherit;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint);}
.field input:focus,.field textarea:focus{border-color:var(--line-strong);}
.field textarea{resize:vertical;min-height:80px;}

/* ── Toast ───────────────────────────────────────────────────── */
.toast-wrap{position:fixed;bottom:20px;right:20px;z-index:3000;display:flex;flex-direction:column;gap:8px;align-items:flex-end;}
.toast{
  background:var(--ink);color:var(--bg);border-radius:var(--radius-md);
  padding:12px 16px;font-size:13px;font-weight:500;box-shadow:var(--shadow);
  transform:translateY(8px);opacity:0;transition:.2s ease;max-width:320px;
}
.toast.show{transform:translateY(0);opacity:1;}
.toast.err{background:var(--danger);color:#fff;}
.toast.ok{background:var(--success);color:#fff;}

/* ── Badge / tag ─────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:3px 8px;border-radius:5px;border:1px solid var(--line);color:var(--ink-soft);}
.dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--ink-faint);}
.dot.on{background:var(--success);}
.dot.off{background:var(--ink-faint);}

/* ── Theme toggle switch ─────────────────────────────────────── */
.theme-toggle{
  width:38px;height:38px;border-radius:var(--radius-md);border:1px solid var(--line);
  background:var(--bg);color:var(--ink);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;flex-shrink:0;transition:.15s;
}
.theme-toggle:hover{background:var(--bg-sunken);}