/* ==========================================================================
   Botino 2.0 - Application (dashboard) layer
   Builds on tokens.css · base.css · components.css.
   Logged-in workspace: shell, sidebar, topbar, KPI, charts, tables,
   tabs, toggles, widget preview, modals, toasts, billing, auth.
   ========================================================================== */

body.app { background: var(--bg-soft); overflow-x: hidden; }

/* ==========================================================================
   App shell - sidebar + topbar + main
   ========================================================================== */
.shell { display: grid; grid-template-columns: var(--sb-w, 264px) 1fr; min-height: 100vh; }
.shell.is-collapsed { --sb-w: 76px; }

/* ---- Sidebar ------------------------------------------------------------ */
.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  background: var(--grad-ink); color: var(--text-on-dark);
  display: flex; flex-direction: column; padding: var(--space-5) var(--space-4);
  border-right: 1px solid var(--border-on-dark); z-index: 40;
}
.sidebar__brand { display: flex; align-items: center; gap: 0.55rem; padding: 0.2rem 0.4rem var(--space-5); }
.sidebar__brand .brand__word { font-size: 1.3rem; color: #fff; }
.sidebar__brand .brand__icon { width: 30px; height: 30px; }
.is-collapsed .sidebar__brand .brand__word { display: none; }

.sb-group { margin-bottom: var(--space-5); }
.sb-group__label { font-size: 0.68rem; font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-on-dark-muted); padding: 0 0.6rem var(--space-2); }
.is-collapsed .sb-group__label { opacity: 0; height: 0; padding: 0; overflow: hidden; }

.nav-item {
  display: flex; align-items: center; gap: 0.75rem; width: 100%;
  padding: 0.65rem 0.7rem; border-radius: var(--r-sm); color: var(--text-on-dark-muted);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-align: left;
  transition: background var(--dur), color var(--dur); position: relative;
}
.nav-item svg { width: 1.25rem; height: 1.25rem; flex: none; }
.nav-item:hover { background: rgba(255,255,255,0.07); color: #fff; }
.nav-item.is-active { background: rgba(255,255,255,0.12); color: #fff; }
.nav-item.is-active::before { content: ""; position: absolute; left: -0.5rem; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 3px; background: var(--color-teal-400); }
.nav-item__badge { margin-left: auto; font-size: 0.7rem; font-weight: var(--fw-bold); background: var(--color-primary-600); color: #fff; padding: 0.05rem 0.42rem; border-radius: var(--r-full); }
.is-collapsed .nav-item__label, .is-collapsed .nav-item__badge { display: none; }
.is-collapsed .nav-item { justify-content: center; padding: 0.65rem; }

/* token meter in sidebar */
.sb-meter { margin-top: auto; background: rgba(255,255,255,0.06); border: 1px solid var(--border-on-dark); border-radius: var(--r-md); padding: var(--space-4); }
.is-collapsed .sb-meter { display: none; }
.sb-meter__top { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-on-dark-muted); font-weight: var(--fw-semibold); margin-bottom: 0.5rem; }
.sb-meter__val { color: #fff; }
.meter { height: 8px; border-radius: var(--r-full); background: rgba(255,255,255,0.12); overflow: hidden; }
.meter__fill { height: 100%; border-radius: inherit; background: var(--grad-teal); }
.meter__fill--warn { background: linear-gradient(90deg, var(--color-warning), var(--color-warm-500)); }

/* ---- Topbar ------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--space-4);
  height: 68px; padding: 0 clamp(1rem, 0.5rem + 1.5vw, 2rem);
  background: rgba(255,255,255,0.85); backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar__toggle { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-muted); }
.topbar__toggle:hover { background: var(--color-slate-100); color: var(--text-strong); }
.topbar__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.18rem; color: var(--text-strong); }
.topbar__crumb { font-size: var(--fs-xs); color: var(--text-subtle); font-weight: var(--fw-semibold); }
.topbar__spacer { margin-left: auto; }
.topbar__right { display: flex; align-items: center; gap: 0.6rem; }

.searchbox { display: flex; align-items: center; gap: 0.5rem; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-full); padding: 0.5rem 0.9rem; width: 260px; color: var(--text-muted); }
.searchbox svg { width: 1.05rem; height: 1.05rem; flex: none; }
.searchbox input { border: none; background: none; outline: none; width: 100%; font-size: var(--fs-sm); }
.icon-btn { width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-muted); position: relative; }
.icon-btn:hover { background: var(--color-slate-100); color: var(--text-strong); }
.icon-btn svg { width: 1.2rem; height: 1.2rem; }
.icon-btn__dot { position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger); border: 2px solid var(--bg); }

.token-pill { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--color-primary-50); border: 1px solid var(--color-primary-100); color: var(--color-primary-800); border-radius: var(--r-full); padding: 0.4rem 0.5rem 0.4rem 0.8rem; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.token-pill svg { width: 1rem; height: 1rem; color: var(--color-primary-600); }
.token-pill .btn { padding: 0.32rem 0.7rem; font-size: 0.72rem; }

.account { display: flex; align-items: center; gap: 0.55rem; padding: 0.32rem 0.5rem 0.32rem 0.4rem; border-radius: var(--r-full); border: 1px solid var(--border); background: var(--bg); }
.account:hover { border-color: var(--border-strong); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); color: #fff; background: var(--grad-brand); flex: none; }
.account__meta { line-height: 1.15; text-align: left; }
.account__name { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-strong); }
.account__org { font-size: 0.7rem; color: var(--text-subtle); }

/* ---- Main / views ------------------------------------------------------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.page { padding: clamp(1.25rem, 0.5rem + 2vw, 2.25rem); max-width: 1280px; width: 100%; margin-inline: auto; }
.view { display: none; }
.view.is-active { display: block; animation: fadeIn var(--dur) var(--ease-out); }

.page-head { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-6); }
.page-head__titles { min-width: 0; }
.page-head h1 { font-size: 1.85rem; letter-spacing: var(--tracking-tight); }
.page-head__sub { color: var(--text-muted); font-size: var(--fs-sm); margin-top: 0.25rem; }
.page-head__actions { margin-left: auto; display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ==========================================================================
   Panels / cards in app
   ========================================================================== */
.panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.panel__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid var(--border); }
.panel__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--text-strong); }
.panel__sub { font-size: var(--fs-xs); color: var(--text-muted); }
.panel__actions { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }
.panel__body { padding: var(--space-5); }

/* ---- KPI cards ---------------------------------------------------------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.kpi { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-5); box-shadow: var(--shadow-xs); display: flex; flex-direction: column; gap: 0.5rem; position: relative; overflow: hidden; transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur); }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-primary-200); }
.kpi__top { display: flex; align-items: center; gap: 0.6rem; }
.kpi__icon { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; }
.kpi__icon svg { width: 1.15rem; height: 1.15rem; }
.kpi__icon--blue { background: var(--color-primary-50); color: var(--color-primary-600); }
.kpi__icon--teal { background: rgba(20,196,184,0.12); color: var(--color-teal-600); }
.kpi__icon--violet { background: rgba(139,92,246,0.12); color: var(--color-violet-700); }
.kpi__icon--warm { background: rgba(255,122,69,0.12); color: var(--color-warm-500); }
.kpi__label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.kpi__value { font-family: var(--font-display); font-size: 1.9rem; font-weight: var(--fw-extra); color: var(--text-strong); letter-spacing: -0.02em; line-height: 1; }
.kpi__value small { font-size: 1rem; font-weight: var(--fw-semibold); color: var(--text-subtle); }
.kpi__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.15rem; }
.kpi__delta { font-size: var(--fs-xs); font-weight: var(--fw-bold); display: inline-flex; align-items: center; gap: 0.2rem; }
.kpi__delta--up { color: var(--color-success); }
.kpi__delta--down { color: var(--color-danger); }
.kpi__delta--flat { color: var(--text-subtle); }
.kpi .meter { background: var(--color-slate-100); }
.kpi .meter__fill { background: var(--grad-brand); }

/* ---- Charts ------------------------------------------------------------- */
.chart { width: 100%; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-top: var(--space-3); }
.legend-item { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.legend-item .sw { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.chart-grid line { stroke: var(--border); stroke-width: 1; }
.chart-axis { font-family: var(--font-mono); font-size: 10px; fill: var(--text-subtle); }
.bars rect { transition: opacity var(--dur); }
.donut__hole { font-family: var(--font-display); }

/* segmented range selector */
.seg { display: inline-flex; gap: 0.2rem; padding: 0.25rem; background: var(--color-slate-100); border-radius: var(--r-full); }
.seg button { font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 0.4rem 0.8rem; border-radius: var(--r-full); color: var(--text-muted); transition: background var(--dur), color var(--dur); }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--color-primary-700); box-shadow: var(--shadow-xs); }

/* ==========================================================================
   Bot cards (My bots)
   ========================================================================== */
.bot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.bot-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur); }
.bot-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--color-primary-200); }
.bot-card__head { display: flex; align-items: flex-start; gap: 0.8rem; padding: var(--space-5) var(--space-5) var(--space-4); }
.bot-card__avatar { width: 46px; height: 46px; border-radius: var(--r-md); flex: none; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.1rem; }
.bot-card__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--text-strong); }
.bot-card__type { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-semibold); margin-top: 0.1rem; }
.bot-card__type svg { width: 0.9rem; height: 0.9rem; }
.bot-card__menu { margin-left: auto; }
.bot-card__body { padding: 0 var(--space-5) var(--space-4); flex: 1; }
.bot-card__desc { font-size: var(--fs-sm); color: var(--text-muted); }
.bot-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem var(--space-4); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--border); }
.bot-stat__label { font-size: 0.72rem; color: var(--text-subtle); font-weight: var(--fw-semibold); }
.bot-stat__val { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-strong); font-size: var(--fs-sm); }
.bot-card__foot { display: flex; align-items: center; gap: 0.5rem; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); background: var(--bg-softer); }
.bot-card__foot .btn { flex: 1; }

/* add-bot dashed tile */
.bot-add { border: 2px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--bg-softer); display: grid; place-items: center; text-align: center; padding: var(--space-7); color: var(--text-muted); min-height: 220px; transition: border-color var(--dur), color var(--dur), background var(--dur); }
.bot-add:hover { border-color: var(--color-primary-400); color: var(--color-primary-700); background: var(--color-primary-50); }
.bot-add__plus { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-600); color: #fff; margin: 0 auto var(--space-3); box-shadow: var(--shadow-brand); }
.bot-add__plus svg { width: 1.5rem; height: 1.5rem; }

/* ==========================================================================
   Tabs (bot config)
   ========================================================================== */
.app-tabs { display: flex; gap: 0.15rem; border-bottom: 1px solid var(--border); overflow-x: auto; }
.app-tab { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 1rem; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--dur), border-color var(--dur); }
.app-tab svg { width: 1.05rem; height: 1.05rem; }
.app-tab:hover { color: var(--text-strong); }
.app-tab[aria-selected="true"] { color: var(--color-primary-700); border-bottom-color: var(--color-primary-600); }
.app-tab .nav-item__badge { margin-left: 0.15rem; background: var(--color-teal-500); }
.app-tabpanel { display: none; padding-top: var(--space-6); }
.app-tabpanel.is-active { display: block; animation: fadeIn var(--dur) var(--ease-out); }

.config-grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-6); align-items: start; }
.config-grid--wide { grid-template-columns: 1fr; }
.sticky-side { position: sticky; top: 88px; }

/* ---- Form helpers in app ----------------------------------------------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-5); }
.field--full { grid-column: 1 / -1; }
.field__hint { font-size: var(--fs-xs); color: var(--text-subtle); }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.select { width: 100%; padding: 0.8rem 0.95rem; font-size: var(--fs-sm); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-sm); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85rem center; }
.select:focus { outline: none; border-color: var(--color-primary-500); box-shadow: var(--ring-focus); }

/* segmented radio (type / length) */
.segmented { display: inline-flex; background: var(--color-slate-100); border-radius: var(--r-sm); padding: 0.25rem; gap: 0.2rem; flex-wrap: wrap; }
.segmented label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); padding: 0.5rem 0.9rem; border-radius: var(--r-xs); cursor: pointer; transition: background var(--dur), color var(--dur); display: inline-flex; align-items: center; gap: 0.4rem; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented input:checked + label, .segmented label.is-on { background: var(--bg); color: var(--color-primary-700); box-shadow: var(--shadow-xs); }

/* toggle switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: 0.7rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch__track { width: 46px; height: 26px; border-radius: var(--r-full); background: var(--color-slate-300); position: relative; transition: background var(--dur); flex: none; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease-out); }
.switch input:checked + .switch__track { background: var(--color-primary-600); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--ring-focus); }
.switch__text { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }

/* color input row */
.color-field { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.7rem; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--bg); }
.color-field input[type="color"] { width: 34px; height: 34px; padding: 0; border: none; border-radius: var(--r-xs); background: none; cursor: pointer; flex: none; }
.color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-field input[type="color"]::-webkit-color-swatch { border: 1px solid var(--border); border-radius: var(--r-xs); }
.color-field__meta { line-height: 1.2; }
.color-field__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.color-field__hex { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }
.swatch-row { display: flex; gap: 0.4rem; margin-left: auto; }
.swatch-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
.swatch-dot.is-on { box-shadow: 0 0 0 2px var(--color-primary-600); }

.range { width: 100%; accent-color: var(--color-primary-600); }

/* ==========================================================================
   Data tables (knowledge AI, billing history, sources)
   ========================================================================== */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg); min-width: 560px; }
.table th, .table td { padding: 0.85rem 1rem; text-align: left; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table thead th { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-subtle); background: var(--bg-soft); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--bg-softer); }
.table td.num, .table th.num { text-align: right; font-family: var(--font-mono); font-size: var(--fs-xs); }
.table__q { font-weight: var(--fw-semibold); color: var(--text-strong); }
.table__a { color: var(--text-muted); }
.row-actions { display: flex; gap: 0.4rem; justify-content: flex-end; }
.confidence { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.confidence__bar { width: 46px; height: 6px; border-radius: var(--r-full); background: var(--color-slate-100); overflow: hidden; }
.confidence__bar span { display: block; height: 100%; background: var(--grad-teal); }

/* Q&A editor list */
.qa-list { display: flex; flex-direction: column; gap: var(--space-3); }
.qa-item { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); overflow: hidden; }
.qa-item__head { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.1rem; cursor: pointer; }
.qa-item__q { font-weight: var(--fw-semibold); color: var(--text-strong); font-size: var(--fs-sm); flex: 1; }
.qa-item__chev { color: var(--text-subtle); transition: transform var(--dur); }
.qa-item.is-open .qa-item__chev { transform: rotate(180deg); }
.qa-item__body { display: none; padding: 0 1.1rem 1.1rem; }
.qa-item.is-open .qa-item__body { display: block; }

/* source / file rows */
.src-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); margin-bottom: 0.55rem; }
.src-row__icon { width: 38px; height: 38px; border-radius: var(--r-sm); display: grid; place-items: center; flex: none; background: var(--color-slate-100); color: var(--text-muted); }
.src-row__icon svg { width: 1.1rem; height: 1.1rem; }
.src-row__name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.src-row__meta { font-size: var(--fs-xs); color: var(--text-subtle); }
.src-row__right { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; }
.dropzone { border: 2px dashed var(--border-strong); border-radius: var(--r-md); padding: var(--space-6); text-align: center; color: var(--text-muted); background: var(--bg-softer); transition: border-color var(--dur), background var(--dur); }
.dropzone:hover { border-color: var(--color-primary-400); background: var(--color-primary-50); }
.dropzone svg { width: 2rem; height: 2rem; color: var(--color-primary-500); margin: 0 auto var(--space-2); }

/* ==========================================================================
   Widget preview (live) - also the embeddable widget styling reference
   ========================================================================== */
.wproto { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border); background:
    radial-gradient(circle at 1px 1px, rgba(59,91,252,0.10) 1.4px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(180deg, #EEF1F8, #F4F6FC); min-height: 460px; padding: var(--space-5); }
.wproto__site { position: absolute; inset: 0; padding: var(--space-5); opacity: 0.5; pointer-events: none; }
.wproto__skeleton { height: 14px; border-radius: var(--r-full); background: var(--color-slate-200); margin-bottom: 0.7rem; }

/* The widget itself */
.cw { --cw-accent: #3B5BFC; --cw-accent-2: #6D4AF2; --cw-user: #3B5BFC; --cw-bot: #EEF2F7; --cw-text: #0B1220;
  width: 340px; background: var(--bg); border-radius: 20px; box-shadow: var(--shadow-xl); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--border); }
.cw--abs { position: absolute; right: var(--space-5); bottom: 90px; }
.cw__header { background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-2)); color: #fff; padding: 0.9rem 1rem; display: flex; align-items: center; gap: 0.7rem; }
.cw__avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.18); display: grid; place-items: center; flex: none; }
.cw__avatar svg { width: 1.2rem; height: 1.2rem; }
.cw__id { line-height: 1.2; min-width: 0; }
.cw__name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.cw__status { font-size: 0.72rem; opacity: 0.9; display: inline-flex; align-items: center; gap: 0.3rem; }
.cw__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6EE7C8; }
.cw__head-actions { margin-left: auto; display: flex; gap: 0.2rem; }
.cw__head-actions button { width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; color: #fff; opacity: 0.85; }
.cw__head-actions button:hover { background: rgba(255,255,255,0.15); opacity: 1; }
.cw__head-actions svg { width: 1rem; height: 1rem; }
.cw__body { padding: 1rem; display: flex; flex-direction: column; gap: 0.7rem; background: var(--bg-soft); max-height: 280px; overflow-y: auto; }
.cw__msg { display: flex; gap: 0.5rem; align-items: flex-end; max-width: 88%; }
.cw__msg--user { margin-left: auto; flex-direction: row-reverse; }
.cw__bubble { font-size: var(--fs-sm); line-height: 1.45; padding: 0.6rem 0.8rem; border-radius: 14px; }
.cw__msg--bot .cw__bubble { background: var(--cw-bot); color: var(--cw-text); border-bottom-left-radius: 4px; }
.cw__msg--user .cw__bubble { background: var(--cw-user); color: #fff; border-bottom-right-radius: 4px; }
.cw__msg-avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-2)); color: #fff; }
.cw__msg-avatar svg { width: 0.85rem; height: 0.85rem; }
.cw__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cw__chip { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--cw-accent); background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-full); padding: 0.35rem 0.7rem; cursor: pointer; transition: border-color var(--dur), background var(--dur); }
.cw__chip:hover { border-color: var(--cw-accent); background: var(--color-primary-50); }
.cw__typing { display: inline-flex; gap: 3px; padding: 0.65rem 0.8rem; background: var(--cw-bot); border-radius: 14px; border-bottom-left-radius: 4px; width: fit-content; }
.cw__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-subtle); animation: typing 1.2s var(--ease-in-out) infinite; }
.cw__typing span:nth-child(2) { animation-delay: 0.15s; }
.cw__typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%,60%,100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.cw__foot { padding: 0.7rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 0.5rem; background: var(--bg); }
.cw__input { flex: 1; border: 1px solid var(--border-strong); border-radius: var(--r-full); padding: 0.6rem 0.9rem; font-size: var(--fs-sm); outline: none; }
.cw__input:focus { border-color: var(--cw-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cw-accent) 22%, transparent); }
.cw__send, .cw__mic { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; }
.cw__send { background: linear-gradient(135deg, var(--cw-accent), var(--cw-accent-2)); }
.cw__mic { background: var(--bg); color: var(--cw-accent); border: 1px solid var(--border-strong); }
.cw__mic.is-rec { background: var(--color-danger); color: #fff; border-color: var(--color-danger); animation: micpulse 1.4s var(--ease-in-out) infinite; }
@keyframes micpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(229,72,77,0.4); } 50% { box-shadow: 0 0 0 8px rgba(229,72,77,0); } }
.cw__send svg, .cw__mic svg { width: 1.15rem; height: 1.15rem; }
.cw__powered { text-align: center; font-size: 0.68rem; color: var(--text-subtle); padding: 0.4rem; background: var(--bg); }
.cw__powered b { color: var(--text-muted); }

/* voice mode panel */
.cw__voice { padding: 1.5rem 1rem; background: var(--grad-ink); color: #fff; text-align: center; }
.cw__voice .wave { justify-content: center; height: 44px; }
.cw__voice .wave span { width: 4px; background: var(--color-teal-400); }
.cw__voice-cap { font-size: var(--fs-xs); color: var(--text-on-dark-muted); margin-top: 0.8rem; }
.cw__voice-q { font-size: var(--fs-sm); margin-top: 0.5rem; }

/* launcher bubble */
.cw-launcher { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--cw-accent, #3B5BFC), var(--cw-accent-2, #6D4AF2)); box-shadow: var(--shadow-brand); display: grid; place-items: center; color: #fff; position: relative; }
.cw-launcher svg { width: 1.6rem; height: 1.6rem; }
.cw-launcher--abs { position: absolute; right: var(--space-5); bottom: var(--space-5); }
.cw-launcher__badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-full); background: var(--color-danger); color: #fff; font-size: 0.7rem; font-weight: var(--fw-bold); display: grid; place-items: center; border: 2px solid var(--bg-soft); }

/* ==========================================================================
   Billing
   ========================================================================== */
.plan-card { background: var(--grad-ink); color: #fff; border-radius: var(--r-xl); padding: var(--space-6); position: relative; overflow: hidden; }
.plan-card__glow { position: absolute; inset: 0; background: radial-gradient(60% 80% at 90% -10%, rgba(44,224,195,0.25), transparent 55%); pointer-events: none; }
.plan-card__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--fw-extra); }
.plan-card__price { display: flex; align-items: baseline; gap: 0.3rem; margin: var(--space-3) 0; }
.plan-card__amt { font-family: var(--font-display); font-size: 2.4rem; font-weight: var(--fw-extra); }
.plan-card .meter { background: rgba(255,255,255,0.16); }
.token-pack { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.pack { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-5); text-align: center; background: var(--bg); cursor: pointer; transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur); position: relative; }
.pack:hover { border-color: var(--color-primary-300); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pack.is-on { border-color: var(--color-primary-600); box-shadow: var(--shadow-brand); }
.pack__tok { font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--fw-extra); color: var(--text-strong); }
.pack__price { font-size: var(--fs-sm); color: var(--text-muted); font-weight: var(--fw-semibold); margin-top: 0.2rem; }
.pack__tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); }

/* ==========================================================================
   Modal (app) + wizard + toasts
   ========================================================================== */
.amodal-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(11,18,32,0.5); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: var(--gutter); opacity: 0; transition: opacity var(--dur); }
.amodal-overlay.is-open { display: flex; opacity: 1; }
.amodal { background: var(--bg); border-radius: var(--r-xl); width: 100%; max-width: 520px; box-shadow: var(--shadow-xl); overflow: hidden; transform: translateY(12px) scale(0.98); transition: transform var(--dur) var(--ease-out); max-height: 90vh; display: flex; flex-direction: column; }
.amodal--lg { max-width: 680px; }
.amodal-overlay.is-open .amodal { transform: none; }
.amodal__head { display: flex; align-items: flex-start; gap: 0.8rem; padding: var(--space-5); border-bottom: 1px solid var(--border); }
.amodal__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h4); color: var(--text-strong); }
.amodal__sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 0.15rem; }
.amodal__close { margin-left: auto; width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-muted); flex: none; }
.amodal__close:hover { background: var(--color-slate-100); color: var(--text-strong); }
.amodal__body { padding: var(--space-5); overflow-y: auto; }
.amodal__foot { display: flex; gap: 0.6rem; justify-content: flex-end; padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); background: var(--bg-soft); }

/* wizard steps */
.wizard-steps { display: flex; gap: 0.5rem; margin-bottom: var(--space-5); }
.wizard-steps__dot { flex: 1; height: 5px; border-radius: var(--r-full); background: var(--color-slate-200); }
.wizard-steps__dot.is-on { background: var(--color-primary-600); }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.choice { border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: var(--space-4); cursor: pointer; transition: border-color var(--dur), background var(--dur); display: flex; gap: 0.7rem; align-items: flex-start; }
.choice.is-on { border-color: var(--color-primary-600); background: var(--color-primary-50); }
.choice__icon { width: 38px; height: 38px; border-radius: var(--r-sm); flex: none; display: grid; place-items: center; background: var(--color-primary-50); color: var(--color-primary-600); }
.choice.is-on .choice__icon { background: var(--color-primary-600); color: #fff; }
.choice__t { font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--text-strong); }
.choice__d { font-size: var(--fs-xs); color: var(--text-muted); }

/* toasts */
.toast-wrap { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 400; display: flex; flex-direction: column; gap: 0.6rem; max-width: 360px; }
.toast { display: flex; align-items: flex-start; gap: 0.7rem; background: var(--bg); border: 1px solid var(--border); border-left: 4px solid var(--color-primary-600); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 0.9rem 1.1rem; transform: translateX(120%); transition: transform var(--dur-slow) var(--ease-out); }
.toast.is-in { transform: none; }
.toast--success { border-left-color: var(--color-success); }
.toast--warn { border-left-color: var(--color-warning); }
.toast--error { border-left-color: var(--color-danger); }
.toast__icon { flex: none; width: 22px; height: 22px; }
.toast--success .toast__icon { color: var(--color-success); }
.toast--warn .toast__icon { color: var(--color-warning); }
.toast--error .toast__icon { color: var(--color-danger); }
.toast__icon svg { width: 100%; height: 100%; }
.toast__title { font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--text-strong); }
.toast__msg { font-size: var(--fs-xs); color: var(--text-muted); }

/* ==========================================================================
   Empty & loading states
   ========================================================================== */
.empty { text-align: center; padding: var(--space-9) var(--space-5); }
.empty__art { width: 72px; height: 72px; border-radius: var(--r-lg); margin: 0 auto var(--space-4); display: grid; place-items: center; background: var(--color-primary-50); color: var(--color-primary-500); }
.empty__art svg { width: 2rem; height: 2rem; }
.empty h3 { font-size: var(--fs-h4); margin-bottom: 0.4rem; }
.empty p { color: var(--text-muted); font-size: var(--fs-sm); max-width: 42ch; margin: 0 auto var(--space-5); }

.skeleton { background: linear-gradient(90deg, var(--color-slate-100) 25%, var(--color-slate-200) 37%, var(--color-slate-100) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: var(--r-sm); }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ==========================================================================
   Auth screens
   ========================================================================== */
.auth { display: none; min-height: 100vh; grid-template-columns: 1.05fr 1fr; }
.auth.is-active { display: grid; }
.auth__aside { background: var(--grad-ink); color: #fff; padding: clamp(2rem, 1rem + 4vw, 4rem); position: relative; overflow: hidden; display: flex; flex-direction: column; }
.auth__aside-glow { position: absolute; inset: 0; background: radial-gradient(60% 60% at 85% 10%, rgba(44,224,195,0.22), transparent 55%), radial-gradient(70% 70% at 0% 100%, rgba(109,74,242,0.4), transparent 55%); pointer-events: none; }
.auth__aside .brand { position: relative; }
.auth__pitch { margin-top: auto; position: relative; }
.auth__pitch h2 { color: #fff; font-size: var(--fs-h2); max-width: 16ch; }
.auth__pitch p { color: var(--text-on-dark-muted); margin-top: var(--space-4); max-width: 44ch; }
.auth__points { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); position: relative; }
.auth__points li { display: flex; gap: 0.6rem; align-items: center; font-size: var(--fs-sm); color: var(--text-on-dark); }
.auth__points svg { width: 1.2rem; height: 1.2rem; color: var(--color-teal-400); flex: none; }
.auth__main { display: flex; align-items: center; justify-content: center; padding: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
.auth__card { width: 100%; max-width: 400px; }
.auth__card h1 { font-size: 1.8rem; margin-bottom: 0.4rem; }
.auth__lead { color: var(--text-muted); font-size: var(--fs-sm); margin-bottom: var(--space-6); }
.auth__alt { font-size: var(--fs-sm); color: var(--text-muted); text-align: center; margin-top: var(--space-5); }
.auth__alt a { color: var(--color-primary-700); font-weight: var(--fw-bold); }
.auth__divider { display: flex; align-items: center; gap: 0.8rem; color: var(--text-subtle); font-size: var(--fs-xs); margin: var(--space-5) 0; }
.auth__divider::before, .auth__divider::after { content: ""; height: 1px; background: var(--border); flex: 1; }
.checkbox { display: flex; gap: 0.55rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; }
.checkbox input { width: 18px; height: 18px; margin-top: 0.15rem; accent-color: var(--color-primary-600); flex: none; }
.checkbox a { color: var(--color-primary-700); font-weight: var(--fw-semibold); }

/* ==========================================================================
   Misc helpers
   ========================================================================== */
.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.stack--sm { gap: var(--space-4); }
.row { display: flex; align-items: center; gap: var(--space-4); }
.row--wrap { flex-wrap: wrap; }
.muted { color: var(--text-muted); }
.divide { height: 1px; background: var(--border); border: none; margin: var(--space-5) 0; }
.tag-soft { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 0.2rem 0.55rem; border-radius: var(--r-full); background: var(--color-slate-100); color: var(--text-muted); }
.kbd { font-family: var(--font-mono); font-size: 0.75rem; background: var(--color-slate-100); border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--r-xs); padding: 0.05rem 0.35rem; color: var(--text-default); }
.dot-menu { display: flex; flex-direction: column; gap: 3px; }
.dot-menu span { width: 4px; height: 4px; border-radius: 50%; background: var(--text-subtle); }

/* activity feed */
.feed-item { display: flex; gap: 0.85rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.feed-item:last-child { border-bottom: none; }
.feed-item__dot { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.feed-item__dot svg { width: 1rem; height: 1rem; }
.feed-item__txt { font-size: var(--fs-sm); color: var(--text-default); }
.feed-item__txt b { color: var(--text-strong); font-weight: var(--fw-bold); }
.feed-item__time { font-size: var(--fs-xs); color: var(--text-subtle); margin-left: auto; white-space: nowrap; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .config-grid { grid-template-columns: 1fr; }
  .sticky-side { position: static; }
  .bot-grid { grid-template-columns: repeat(2, 1fr); }
  .token-pack { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; width: 264px; transform: translateX(-100%); transition: transform var(--dur) var(--ease-out); box-shadow: var(--shadow-xl); }
  body.app.sb-open .sidebar { transform: none; }
  body.app.sb-open::after { content: ""; position: fixed; inset: 0; background: rgba(11,18,32,0.45); z-index: 35; }
  .searchbox { display: none; }
  .auth { grid-template-columns: 1fr; }
  .auth__aside { display: none; }
}
@media (max-width: 620px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .bot-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .token-pack { grid-template-columns: 1fr 1fr; }
  .account__meta { display: none; }
  .topbar__title { font-size: 1rem; }
  .cw--abs { right: 50%; transform: translateX(50%); width: 300px; }
}