/* ================================================================
   Tivox · Autonomous BPO — tokens tomados de tivox.lovable.app
   ================================================================ */
:root {
  --radius: 0.5rem;
  --background: oklch(97.5% 0.004 260);
  --foreground: oklch(24% 0.035 284);
  --card: #ffffff;
  --primary: #1d1b39;
  --primary-hover: #29264a;
  --primary-foreground: #fdfdfd;
  --secondary: oklch(95% 0.012 278);
  --secondary-foreground: oklch(25% 0.045 282);
  --muted: oklch(96% 0.006 260);
  --muted-foreground: oklch(49% 0.025 272);
  --accent: oklch(94% 0.014 278);
  --border: oklch(89% 0.012 270);
  --input: oklch(86% 0.018 270);
  --ring: oklch(42% 0.07 288);
  --destructive: oklch(57.7% 0.245 27.325);
  --destructive-container: oklch(95% 0.03 25);
  --success: oklch(43% 0.13 154);
  --success-container: oklch(93% 0.055 151);
  --warning: oklch(52% 0.13 70);
  --warning-container: oklch(95% 0.06 85);
  --neutral-container: oklch(93% 0.008 270);
  --neutral-foreground: oklch(47% 0.02 270);
  --table-header: oklch(97% 0.006 270);
  --sidebar: #1d1b39;
  --sidebar-foreground: oklch(98% 0.005 280);
  --sidebar-selected: #100c1a;
  --sidebar-hover: #29264a;
  --sidebar-muted: oklch(82% 0.025 276);
  --sidebar-border: rgb(255 255 255 / 0.12);
  /* Marca (logo) */
  --brand-cyan: #35a8e0;
  --brand-indigo: #2d2e82;
  --brand-purple: #662482;
  --brand-magenta: #a2195b;
  --brand-gradient: linear-gradient(90deg, var(--brand-cyan), var(--brand-indigo) 50%, var(--brand-purple) 75%, var(--brand-magenta));
  --bubble-out: oklch(94% 0.03 270);
  --bubble-in: #ffffff;
  --chat-bg: oklch(96.5% 0.006 270);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--background);
  color: var(--foreground);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-indigo); }
h1, h2, h3 { margin: 0; color: var(--foreground); }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.hidden { display: none !important; }

/* ---------------- Layout ---------------- */
.layout { display: grid; grid-template-columns: 256px 1fr; height: 100vh; }
.sidebar {
  background: var(--sidebar); color: var(--sidebar-foreground);
  display: flex; flex-direction: column; min-height: 0;
}
.sidebar__brand { padding: 24px 20px 20px; border-bottom: 1px solid var(--sidebar-border); display: flex; justify-content: center; }
.sidebar__brand img { height: 44px; width: auto; }
.sidebar__product { margin: 14px 12px 4px; padding: 0 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--sidebar-muted); }
.nav { padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; }
.nav button {
  all: unset; cursor: pointer; display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: 8px; color: var(--sidebar-foreground); font-size: 14px;
}
.nav button:hover { background: var(--sidebar-hover); }
.nav button.active { background: var(--sidebar-selected); font-weight: 500; }
.nav button:focus-visible { outline: 2px solid var(--brand-cyan); }
.nav svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav .badge-dot { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand-magenta); color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
.sidebar__footer { border-top: 1px solid var(--sidebar-border); padding: 14px 20px; display: flex; align-items: center; gap: 12px; }
.avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--sidebar-selected); border: 1px solid var(--sidebar-border); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: #fff; flex-shrink: 0; }
.sidebar__footer .meta { font-size: 13px; font-weight: 500; }
.sidebar__footer .meta small { display: block; color: var(--sidebar-muted); font-weight: 400; font-size: 11px; }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar {
  height: 64px; flex-shrink: 0; background: var(--card); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px; padding: 0 24px;
}
.topbar label { font-size: 12px; color: var(--muted-foreground); }
.topbar select { min-width: 280px; }
.topbar .spacer { flex: 1; }
.conn-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-foreground); }
.conn-pill .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--neutral-foreground); }
.conn-pill.live .dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-container); }

.page-header { background: var(--card); border-bottom: 1px solid var(--border); padding: 24px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; }
.page-header h1 { font-size: 24px; font-weight: 700; }
.page-header p { margin: 6px 0 0; color: var(--muted-foreground); }
.content { padding: 24px 32px; overflow-y: auto; flex: 1; min-height: 0; }
.view { display: none; flex-direction: column; flex: 1; min-height: 0; }
.view.active { display: flex; }

/* ---------------- Componentes ---------------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.card__body { padding: 20px; }
.card h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.card .sub { color: var(--muted-foreground); font-size: 13px; margin: 0 0 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 6px; border: 1px solid transparent;
  font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap;
  background: var(--primary); color: var(--primary-foreground);
}
.btn:hover { background: var(--primary-hover); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.btn--outline { background: var(--card); color: var(--foreground); border-color: var(--input); }
.btn--outline:hover { background: var(--muted); }
.btn--brand { background: var(--brand-gradient); border: 0; }
.btn--brand:hover { filter: brightness(1.08); background: var(--brand-gradient); }
.btn--sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn svg { width: 16px; height: 16px; }

label.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
label.field small { font-weight: 400; color: var(--muted-foreground); }
input, select, textarea {
  font: inherit; color: var(--foreground); background: var(--card);
  border: 1px solid var(--input); border-radius: 6px; padding: 8px 12px; min-height: 38px; width: 100%;
}
textarea { resize: vertical; min-height: 80px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ring); outline-offset: -1px; border-color: var(--ring); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--neutral-container); color: var(--neutral-foreground); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pill--success { background: var(--success-container); color: var(--success); }
.pill--warning { background: var(--warning-container); color: var(--warning); }
.pill--danger { background: var(--destructive-container); color: var(--destructive); }
.pill--plain::before { display: none; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--secondary); color: var(--secondary-foreground); font-size: 12px; }

.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted-foreground); background: var(--table-header); padding: 10px 14px; border-bottom: 1px solid var(--border); }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; }

.alert { border-radius: 8px; padding: 12px 14px; font-size: 13px; border: 1px solid var(--border); background: var(--muted); }
.alert--warning { background: var(--warning-container); border-color: transparent; color: oklch(35% 0.08 70); }
.alert--danger { background: var(--destructive-container); border-color: transparent; color: oklch(40% 0.15 27); }
.alert--success { background: var(--success-container); border-color: transparent; color: oklch(32% 0.1 154); }

.empty { border: 1px dashed var(--input); border-radius: 10px; padding: 48px 24px; text-align: center; color: var(--muted-foreground); background: var(--card); }
.empty .icon { width: 48px; height: 48px; border-radius: 10px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; color: var(--primary); }
.empty h3 { margin-bottom: 6px; }

.tabs { display: inline-flex; background: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; }
.tabs button { all: unset; cursor: pointer; padding: 6px 12px; border-radius: 6px; font-size: 13px; color: var(--muted-foreground); }
.tabs button.active { background: var(--card); color: var(--foreground); box-shadow: 0 1px 2px rgb(0 0 0 / .08); font-weight: 500; }

/* ---------------- Chat ---------------- */
.chat { display: grid; grid-template-columns: 300px 1fr; flex: 1; min-height: 0; border-top: 0; }
.chat__list { border-right: 1px solid var(--border); background: var(--card); display: flex; flex-direction: column; min-height: 0; }
.chat__list-head { padding: 14px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.chat__items { overflow-y: auto; overflow-x: hidden; flex: 1; }
.conv { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.conv:hover { background: var(--muted); }
.conv.active { background: var(--accent); }
.conv .avatar { background: var(--primary); }
.conv__body { min-width: 0; flex: 1; display: block; }
.conv__top { display: flex; justify-content: space-between; gap: 8px; font-weight: 500; }
.conv__top time { font-size: 11px; color: var(--muted-foreground); font-weight: 400; }
.conv__last { display: block; font-size: 12px; color: var(--muted-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }

.chat__pane { display: flex; flex-direction: column; min-height: 0; background: var(--chat-bg); }
.chat__head { background: var(--card); border-bottom: 1px solid var(--border); padding: 12px 20px; display: flex; align-items: center; gap: 12px; }
.chat__head .who { font-weight: 600; }
.chat__head .who small { display: block; font-weight: 400; color: var(--muted-foreground); }
.chat__messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: min(70%, 560px); padding: 8px 12px 6px; border-radius: 10px; box-shadow: 0 1px 1px rgb(0 0 0 / .06); white-space: pre-wrap; word-wrap: break-word; }
.bubble.in { align-self: flex-start; background: var(--bubble-in); border-top-left-radius: 2px; }
.bubble.out { align-self: flex-end; background: var(--bubble-out); border-top-right-radius: 2px; }
.bubble .meta { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font-size: 11px; color: var(--muted-foreground); margin-top: 4px; }
.bubble .err { color: var(--destructive); font-size: 12px; margin-top: 4px; }
.bubble img { max-width: 240px; border-radius: 6px; display: block; margin-bottom: 4px; }
.ticks { font-weight: 700; letter-spacing: -3px; }
.ticks.read { color: var(--brand-cyan); }
.ticks.failed { color: var(--destructive); letter-spacing: 0; }

.composer { background: var(--card); border-top: 1px solid var(--border); padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.composer__row { display: flex; gap: 10px; align-items: flex-end; }
.composer textarea { min-height: 42px; max-height: 160px; }
.window-banner { font-size: 12px; }

/* ---------------- Onboarding / páginas públicas ---------------- */
.public { min-height: 100vh; display: flex; flex-direction: column; }
.public__header { background: var(--sidebar); padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; }
.public__header img { height: 40px; }
.public__header nav a { color: var(--sidebar-muted); text-decoration: none; margin-left: 20px; font-size: 13px; }
.public__header nav a:hover { color: #fff; }
.public__hero { background: var(--sidebar); color: #fff; padding: 32px 32px 72px; position: relative; }
.public__hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--brand-gradient); }
.public__hero h1 { color: #fff; font-size: 30px; max-width: 760px; }
.public__hero p { color: var(--sidebar-muted); max-width: 760px; font-size: 15px; line-height: 1.6; }
.public__body { width: min(960px, 100% - 32px); margin: -48px auto 48px; position: relative; z-index: 1; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.steps li { counter-increment: s; display: flex; gap: 12px; align-items: flex-start; }
.steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 999px; background: var(--accent); color: var(--primary); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.step-result { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.legal { line-height: 1.7; }
.legal h2 { font-size: 18px; margin: 28px 0 8px; }
.legal p, .legal li { color: var(--foreground); }
.public__footer { margin-top: auto; text-align: center; color: var(--muted-foreground); font-size: 12px; padding: 24px; }
.public__footer a { color: var(--muted-foreground); margin: 0 8px; }

.toast-wrap { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.toast { background: var(--primary); color: #fff; padding: 12px 16px; border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / .18); max-width: 380px; font-size: 13px; border-left: 4px solid var(--brand-cyan); }
.toast.error { border-left-color: var(--brand-magenta); }

pre.json { background: var(--sidebar-selected); color: #e7e6f5; padding: 12px; border-radius: 8px; overflow: auto; max-height: 320px; font-size: 12px; margin: 8px 0 0; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .sidebar__brand { border: 0; padding: 12px 16px; }
  .sidebar__product { display: none; }
  .sidebar__footer { border: 0; padding: 8px 12px; margin-left: auto; }
  .sidebar__footer .meta { display: none; }
  .user-menu__pop { bottom: auto; top: calc(100% + 8px); left: auto; right: 0; width: 240px; }
  .nav { order: 3; flex: 1 1 100%; flex-direction: row; flex-wrap: nowrap; align-items: center; overflow-x: auto; padding: 4px 12px 8px; }
  .nav button { padding: 8px 10px; }
  .nav button span.label { display: none; }
  .topbar { height: auto; flex-wrap: wrap; padding: 12px 16px; }
  .topbar select { min-width: 0; flex: 1; }
  .page-header, .content { padding: 16px; }
  .chat { grid-template-columns: 1fr; }
  .chat__list { max-height: 240px; border-right: 0; border-bottom: 1px solid var(--border); }
  .bubble { max-width: 88%; }
}

/* ================= Autenticación ================= */
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, 44%) 1fr; }
.auth__brand { background: var(--sidebar); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth__brand::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--brand-gradient); }
.auth__brand img { height: 56px; width: auto; align-self: flex-start; }
.auth__brand h2 { color: #fff; font-size: 28px; line-height: 1.25; max-width: 420px; }
.auth__brand p { color: var(--sidebar-muted); max-width: 420px; line-height: 1.6; }
.auth__brand .glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -160px; top: -120px; background: radial-gradient(circle, rgb(53 168 224 / .25), transparent 70%); }
.auth__brand .glow.two { right: auto; left: -180px; top: auto; bottom: -160px; background: radial-gradient(circle, rgb(162 25 91 / .22), transparent 70%); }
.auth__panel { display: flex; align-items: center; justify-content: center; padding: 32px 16px; }
.auth__card { width: min(420px, 100%); }
.auth__card h1 { font-size: 24px; margin-bottom: 6px; }
.auth__card .sub { color: var(--muted-foreground); margin: 0 0 24px; }
.auth__card form { display: flex; flex-direction: column; gap: 16px; }
.auth__card .btn { height: 44px; }
.auth__links { display: flex; justify-content: space-between; font-size: 13px; margin-top: 8px; }
.pw-rules { list-style: none; padding: 0; margin: 0; font-size: 12px; color: var(--muted-foreground); display: grid; gap: 4px; }
.pw-rules li::before { content: "○ "; }
.pw-rules li.ok { color: var(--success); }
.pw-rules li.ok::before { content: "● "; }
.input-pw { position: relative; }
.input-pw input { padding-right: 64px; }
.input-pw button { all: unset; position: absolute; right: 8px; top: 10px; cursor: pointer; font-size: 12px; color: var(--muted-foreground); padding: 2px 6px; }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth__brand { padding: 20px 24px; min-height: auto; }
  .auth__brand > div, .auth__brand > small { display: none; }
  .auth__brand img { height: 44px; }
}

/* ================= Modal / menú usuario ================= */
.modal-backdrop { position: fixed; inset: 0; background: rgb(16 12 26 / .55); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 40; }
.modal { background: var(--card); border-radius: 12px; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 24px 64px rgb(0 0 0 / .3); }
.modal__head { padding: 18px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal__head h3 { font-size: 17px; }
.modal__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.modal__foot { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.icon-btn { all: unset; cursor: pointer; width: 32px; height: 32px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground); }
.icon-btn:hover { background: var(--muted); color: var(--foreground); }
.user-menu { position: relative; }
.user-menu__btn { all: unset; cursor: pointer; display: flex; align-items: center; gap: 12px; width: 100%; border-radius: 8px; padding: 4px; }
.user-menu__btn:hover { background: var(--sidebar-hover); }
.user-menu__pop { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; background: var(--card); color: var(--foreground); border-radius: 10px; box-shadow: 0 12px 32px rgb(0 0 0 / .3); padding: 6px; z-index: 30; }
.user-menu__pop button { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%; padding: 10px 12px; border-radius: 6px; font-size: 13px; }
.user-menu__pop button:hover { background: var(--muted); }
.user-menu__pop .danger { color: var(--destructive); }
.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; max-height: 200px; overflow-y: auto; padding: 8px; border: 1px solid var(--input); border-radius: 6px; }
.check-list label, label.check { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; }
.check-list input, label.check input { width: auto; min-height: 0; }
.secret-box { background: var(--accent); border-radius: 8px; padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.secret-box code { font-size: 15px; font-weight: 600; color: var(--primary); }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar input, .toolbar select { max-width: 260px; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.btn--danger { background: var(--destructive); }
.btn--danger:hover { background: oklch(50% 0.22 27); }
.modal--wide { width: min(860px, 100%); }
.user-menu__email { padding: 8px 12px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; font-size: 12px; color: var(--muted-foreground); word-break: break-all; }
.author { font-weight: 500; color: var(--secondary-foreground); }
.author--ai { background: var(--brand-gradient); color: #fff; padding: 0 6px; border-radius: 999px; font-size: 10px; letter-spacing: .04em; }
.bubble.out.ai { background: oklch(95% 0.025 240); }
.system-note { align-self: center; font-size: 12px; color: var(--muted-foreground); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; }

/* ================= AI agent ================= */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch span { width: 40px; height: 22px; border-radius: 999px; background: var(--input); position: relative; transition: background .2s; flex-shrink: 0; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.switch input:checked + span { background: var(--brand-gradient); }
.switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }
.kb-item { border: 1px solid var(--border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--muted); }
.kb-item .row input { flex: 1; }
.playground { background: var(--chat-bg); border: 1px solid var(--border); border-radius: 8px; min-height: 260px; max-height: 460px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.tool-call { align-self: flex-start; font-size: 12px; background: var(--card); border: 1px dashed var(--input); border-radius: 8px; padding: 6px 10px; color: var(--secondary-foreground); max-width: 80%; }
.tool-call code { font-size: 11px; }
.pg-meta { align-self: flex-end; font-size: 11px; color: var(--muted-foreground); }
.prompt-preview { max-height: 560px; white-space: pre-wrap; }
.conv-badges { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }
.mini-pill { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--neutral-container); color: var(--neutral-foreground); font-weight: 500; }
.mini-pill.ai { background: var(--brand-gradient); color: #fff; }
.mini-pill.human { background: var(--accent); color: var(--primary); }
.mini-pill.alert { background: var(--destructive-container); color: var(--destructive); }
.chat-mode { display: inline-flex; align-items: center; gap: 8px; }

/* ================= Calendar ================= */
.day-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--border); }
.day-row:last-child { border-bottom: 0; }
.day-row b { padding-top: 8px; }
.range { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.range input[type=time] { width: 130px; }
.range input[type=number] { width: 110px; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.slot-day { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--card); }
.slot-day h4 { margin: 0 0 8px; font-size: 13px; }
.slot-chip { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 8px; border-radius: 6px; background: var(--accent); margin-bottom: 4px; color: var(--primary); }
.slot-chip small { color: var(--muted-foreground); }
.slot-chip.full { opacity: .5; }
.conn-card { display: flex; gap: 14px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.conn-card .logo { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; flex-shrink: 0; }
@media (max-width: 900px) { .day-row { grid-template-columns: 1fr; } }

/* ================= Reports ================= */
.report-filters .field-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-foreground); }
.report-filters input[type=date] { max-width: 160px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.kpi__label { font-size: 12px; color: var(--muted-foreground); font-weight: 500; }
.kpi__value { font-size: 26px; font-weight: 700; color: var(--foreground); margin-top: 6px; }
.kpi__value small { font-size: 14px; font-weight: 500; color: var(--muted-foreground); }
.kpi__sub { font-size: 12px; color: var(--muted-foreground); margin-top: 6px; }
.dot-key { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.report-card .chart-wrap { margin-top: 12px; position: relative; }
.report-card svg { width: 100%; height: auto; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--secondary-foreground); margin-bottom: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.grid-line { stroke: var(--border); stroke-width: 1; }
.base-line { stroke: var(--input); stroke-width: 1; }
.axis-text { font-size: 11px; fill: var(--muted-foreground); font-family: Roboto, sans-serif; }
.label-text { font-size: 12px; fill: var(--secondary-foreground); font-family: Roboto, sans-serif; font-weight: 500; }
.crosshair { stroke: var(--muted-foreground); stroke-width: 1; stroke-dasharray: 3 3; }
.line-chart, .bar-chart { position: relative; }
.chart-tip { position: absolute; pointer-events: none; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / .12); padding: 8px 10px; font-size: 12px; min-width: 170px; z-index: 5; color: var(--foreground); }
.chart-tip div { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.chart-tip div span { margin-left: auto; font-weight: 600; }
.chart-tip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.chart-tip .muted { color: var(--muted-foreground); }
.hbars { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.hbar { display: grid; grid-template-columns: minmax(120px, 40%) 1fr 48px; gap: 10px; align-items: center; font-size: 13px; }
.hbar__label { color: var(--secondary-foreground); }
.hbar__track { background: var(--muted); border-radius: 4px; height: 14px; overflow: hidden; }
.hbar__fill { display: block; height: 100%; border-radius: 0 4px 4px 0; }
.hbar__value { text-align: right; font-weight: 600; }

/* ================= Message authors ================= */
.bubble__author { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .02em; margin-bottom: 3px; color: var(--muted-foreground); }
.bubble__author--customer { color: #5457C8; }
.bubble__author--ai { color: #1F7FB8; }
.bubble__author--human { color: #9A2A5D; }
.bubble.out.by-ai { background: #E6F3FB; border-left: 3px solid #2E95D0; }
.bubble.out.by-human { background: #F8E9F0; border-left: 3px solid #B0306A; }
.bubble.out.by-other { background: var(--bubble-out); border-left: 3px solid var(--input); }
.bubble.in { border-left: 3px solid #5457C8; }
.chat-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 6px 20px; font-size: 11px; color: var(--muted-foreground); background: var(--card); border-bottom: 1px solid var(--border); }
.chat-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.lg-customer { background: #5457C8; } .lg-ai { background: #2E95D0; } .lg-human { background: #B0306A; } .lg-system { background: var(--input); }

/* ================= Schedule panel inside the chat ================= */
.chat.with-side { grid-template-columns: 300px 1fr 340px; }
.chat__side { border-left: 1px solid var(--border); background: var(--card); display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.side__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--card); z-index: 1; }
.side__head small { display: block; color: var(--muted-foreground); font-size: 12px; }
.side__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.side__body h4 { margin: 6px 0 0; font-size: 13px; }
.side__where { font-size: 12px; color: var(--secondary-foreground); background: var(--accent); border-radius: 8px; padding: 8px 10px; }
.side__appt { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.side__appt small { display: block; color: var(--muted-foreground); font-size: 11px; }
.side__empty { color: var(--muted-foreground); font-size: 12px; margin: 0; }
.slot-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; max-height: 220px; overflow-y: auto; }
.slot-btn { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; border: 1px solid var(--input); border-radius: 6px; padding: 6px 4px; font-size: 13px; font-weight: 500; }
.slot-btn small { display: block; font-size: 10px; color: var(--muted-foreground); font-weight: 400; }
.slot-btn:hover { background: var(--accent); }
.slot-btn.selected { background: var(--primary); color: #fff; border-color: var(--primary); }
.slot-btn.selected small { color: #d8d6ee; }
.slot-btn:focus-visible { outline: 2px solid var(--ring); }
/* On medium screens the conversation list steps aside while the schedule panel is open. */
@media (max-width: 1400px) { .chat.with-side { grid-template-columns: 1fr 330px; } .chat.with-side .chat__list { display: none; } }
@media (max-width: 900px) { .chat.with-side { grid-template-columns: 1fr; } .chat__side { border-left: 0; border-top: 1px solid var(--border); } }
.ai-tools { border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
/* Let the chat pane shrink inside the grid (no horizontal page scroll) */
.chat__pane, .chat__list, .chat__side { min-width: 0; }
.chat__head { flex-wrap: wrap; row-gap: 8px; }
.chat__head .chat-mode, #chatControls { flex-wrap: wrap; }