/* ==========================================================================
   Kairo — design tokens & base styles
   Token system: graphite neutrals + one configurable accent (violet default)
   Type: system font stack only — no webfont request, keeps first paint fast
   ========================================================================== */

:root{
  --bg:            #0E0F13;
  --bg-elevated:   #16171C;
  --bg-hover:      #1E2027;
  --bg-input:      #1A1B21;
  --border:        #262830;
  --border-soft:   #1D1F26;
  --text-primary:  #ECEDF0;
  --text-secondary:#9A9CA6;
  --text-tertiary: #5F6169;
  --accent:        #8B7CF6;
  --accent-hover:  #9C8FF9;
  --accent-text:   #14121E;
  --danger:        #F2545B;
  --success:       #4FD1A5;
  --warning:       #E8B04B;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-1: 0 8px 24px rgba(0,0,0,.32);
  --shadow-2: 0 2px 8px rgba(0,0,0,.24);

  --sidebar-w: 280px;
  --topbar-h: 56px;
  --composer-max-h: 200px;

  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms;
  --dur-med: 220ms;

  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="light"]{
  --bg:            #FAFAFB;
  --bg-elevated:   #FFFFFF;
  --bg-hover:      #F1F1F4;
  --bg-input:      #F3F3F6;
  --border:        #E4E4E9;
  --border-soft:   #ECECEF;
  --text-primary:  #16171C;
  --text-secondary:#5B5D68;
  --text-tertiary: #8B8D97;
  --accent-text:   #FFFFFF;
  --shadow-1: 0 8px 24px rgba(20,20,30,.10);
  --shadow-2: 0 2px 8px rgba(20,20,30,.08);
}

@media (prefers-reduced-motion: reduce), [data-reduce-motion="true"]{
  *{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

*, *::before, *::after{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
h1,h2,h3,p,ul,figure{ margin: 0; }
button{ font: inherit; color: inherit; }
input, textarea, select{ font: inherit; color: inherit; }
a{ color: var(--accent); }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.icon{ width: 20px; height: 20px; display: block; }
.icon--sm{ width: 16px; height: 16px; }

#app{
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ---------- generic buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  cursor: pointer;
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn:hover{ background: var(--bg-hover); }
.btn--block{ width: 100%; }
.btn--primary{ background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn--primary:hover{ background: var(--accent-hover); }
.btn--ghost{ background: transparent; }
.btn--danger{ background: var(--danger); border-color: var(--danger); color: #fff; }
.btn--danger:hover{ filter: brightness(1.08); }

.icon-btn{
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.icon-btn:hover{ background: var(--bg-hover); }
.icon-btn--sm{ width: 28px; height: 28px; }
.icon-btn--accent{ background: var(--accent); color: var(--accent-text); }
.icon-btn--accent:hover{ background: var(--accent-hover); }
.icon-btn:disabled{ opacity: .35; cursor: default; }
.icon-btn:disabled:hover{ background: transparent; }

.text-input{
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-primary);
}

/* ---------- banners / toasts ---------- */
.banner{
  padding: 8px 16px;
  font-size: 13px;
  text-align: center;
}
.banner--warning{ background: var(--warning); color: #221a06; }

.toast-host{
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px;
  z-index: 500;
  pointer-events: none;
}
.toast{
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  animation: toast-in var(--dur-med) var(--ease);
}
@keyframes toast-in{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none;} }

.scrim{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 40;
}

/* ---------- modals ---------- */

/* The browser's default [hidden]{display:none} loses to any author display
   rule (see .modal{display:flex} below) — so without this line every modal
   rendered on top of the app on every single page load. */
[hidden]{ display: none !important; }

.modal{
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  padding: 16px;
}
.modal__panel{
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: 20px;
  width: 100%;
  max-width: 420px;
  max-height: 86vh;
  overflow: auto;
  animation: modal-in var(--dur-med) var(--ease);
}
.modal__panel--wide{ max-width: 780px; padding: 0; }
.modal__panel--sm{ max-width: 380px; }
@keyframes modal-in{ from{ opacity:0; transform: scale(.97);} to{ opacity:1; transform:none;} }
.modal__header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border-soft);
}
.modal__actions{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
#confirmBody{ color: var(--text-secondary); margin: 8px 0 0; }
#renameInput{ margin-top: 12px; }