/* ---------------------------------------------------------------------------
   Papersetter — shadcn/ui-style design system (zinc), light + dark.
   Tokens mirror the shadcn "zinc" themes; components are hand-rolled in plain
   CSS against those tokens. The boot script in index.html stamps
   data-theme="light"|"dark" on <html> before first paint; the toggle in the
   sidebar flips it and persists the choice.
--------------------------------------------------------------------------- */
:root {
  /* shadcn zinc light */
  --bg: #ffffff;
  --panel: #ffffff;       /* card */
  --panel-2: #fafafa;     /* popover / nested surfaces */
  --panel-3: #f4f4f5;     /* hover surface */
  --border: #e4e4e7;
  --border-2: #d4d4d8;
  --text: #09090b;
  --muted: #52525b;
  --muted-2: #71717a;
  --primary: #18181b;     /* primary button = near-black on light */
  --primary-fore: #fafafa;
  --destructive: #dc2626;
  --green: #16a34a;
  --red: #dc2626;
  --amber: #ca8a04;
  --blue: #0284c7;
  --ring: rgba(181, 181, 189, .55);
  --sel: #e4e4e7;
  --row-sel: #e8f1f9;        /* selected-row highlight (blue tint, Excel-like) */
  --row-sel-hover: #dceaf6;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-pop: 0 4px 6px -1px rgba(0, 0, 0, .08), 0 10px 15px -3px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04);
  --shadow-dialog: 0 24px 48px -12px rgba(0, 0, 0, .18);
  --radius: 8px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
  --icon-dim: 0.4;
}

:root[data-theme="dark"] {
  /* shadcn zinc dark */
  --bg: #09090b;
  --panel: #09090b;       /* flat — separation via borders */
  --panel-2: #111113;
  --panel-3: #18181b;
  --border: #27272a;
  --border-2: #3f3f46;
  --text: #fafafa;
  --muted: #a1a1aa;
  --muted-2: #71717a;
  --primary: #fafafa;     /* primary button = white on dark */
  --primary-fore: #18181b;
  --destructive: #ef4444;
  --green: #22c55e;
  --red: #ef4444;
  --amber: #eab308;
  --blue: #7dd3fc;
  --ring: rgba(63, 63, 70, .7);
  --sel: #3f3f46;
  --row-sel: #17222e;
  --row-sel-hover: #1d2b3a;
  --shadow-card: 0 0 0 0 transparent;
  --shadow-pop: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 10px 15px -3px rgba(0, 0, 0, .3), 0 0 0 1px rgba(0, 0, 0, .1);
  --shadow-dialog: 0 24px 48px -12px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }
::selection { background: var(--sel); }

/* Thin, unobtrusive scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); }
::-webkit-scrollbar-track { background: transparent; }

body {
  margin: 0;
  font: 14px/1.5 var(--font);
  background: var(--bg);
  color: var(--text);
  display: flex;
  height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Icons (inline sprite): Phosphor (stroke, 256 viewBox) for nav/stats, UIcons
   by Flaticon (fill, 24 viewBox — see index.html) for action buttons. */
.icon { width: 16px; height: 16px; flex: none; }

/* ---------------------------------------------------------------------------
   Sidebar — dashboard shell: brand / nav / datasets / bottom bar
--------------------------------------------------------------------------- */
.sidebar { position: relative; width: 264px; min-width: 264px; background: var(--bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; transition: width .15s ease, min-width .15s ease; }

/* Collapse toggle — a small pill riding the sidebar's right edge, visible in
   both states. Below modal overlays (z 10), above the table's sticky header. */
#sidebar-toggle {
  position: absolute; top: 18px; right: -13px; z-index: 5;
  width: 26px; height: 26px; border-radius: 99px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow-card);
}
#sidebar-toggle:hover { background: var(--panel-3); }
#sidebar-toggle .icon { width: 12px; height: 12px; transition: transform .15s; }
.sidebar.collapsed #sidebar-toggle .icon { transform: rotate(180deg); }

/* Collapsed rail: icons only, centered. Text nodes that matter get tooltips
   from renderSidebar; everything textual simply hides. */
.sidebar.collapsed { width: 60px; min-width: 60px; }
.sidebar.collapsed .brand { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .brand-text,
.sidebar.collapsed .build,
.sidebar.collapsed .side-head,
.sidebar.collapsed .nav-item span:not(.nav-dot),
.sidebar.collapsed .folder > .label .caret,
.sidebar.collapsed .folder > .label .name,
.sidebar.collapsed .folder > .label .count,
.sidebar.collapsed .folder > .label .icon-btn,
.sidebar.collapsed .file .name,
.sidebar.collapsed .file .fcount { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .folder > .label { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .file { justify-content: center; padding-left: 0; padding-right: 0; }

.brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px; }
.brand-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--panel-3); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text); }
.brand-icon .icon { width: 16px; height: 16px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.brand-sub { font-size: 11px; color: var(--muted-2); }

.side-nav { padding: 0 10px 6px; display: flex; flex-direction: column; gap: 1px; }

.nav-item {
  display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%;
  background: transparent; color: var(--muted); border: 0; border-radius: 7px;
  padding: 0 10px; height: 34px; font-size: 13px; font-weight: 500; cursor: pointer;
  text-align: left;
  transition: background .1s, color .1s;
}
.nav-item:hover { background: var(--panel-3); color: var(--text); opacity: 1; }
.nav-item.active { background: var(--panel-3); color: var(--text); }
.nav-item .icon { width: 17px; height: 17px; color: var(--muted-2); }
.nav-item:hover .icon, .nav-item.active .icon { color: var(--text); }

.nav-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--red); margin-left: auto; flex: none; }

/* Theme toggle — exactly one icon, the mode you're currently in. Pure CSS on
   data-theme so it's correct before JS runs (no flash of both glyphs). */
:root:not([data-theme="dark"]) #theme-icon-moon { display: none; }
:root[data-theme="dark"] #theme-icon-sun { display: none; }

/* Datasets section (scrolls independently of the bottom bar) */
.side-section { flex: 1; overflow-y: auto; padding: 4px 0 12px; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 6px; }
.side-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); }
.icon-btn {
  background: transparent; border: 0; color: var(--muted-2); border-radius: 6px;
  width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.icon-btn:hover { background: var(--panel-3); color: var(--text); opacity: 1; }
.icon-btn .icon { width: 14px; height: 14px; }

.folder { margin-bottom: 1px; }
.folder > .label { display: flex; align-items: center; gap: 8px; padding: 7px 16px; cursor: pointer; font-weight: 500; font-size: 13px; color: var(--muted); transition: background .1s, color .1s; }
.folder > .label:hover { background: var(--panel-3); color: var(--text); }
.folder > .label .icon { width: 15px; height: 15px; color: var(--muted-2); }
.folder > .label:hover .icon { color: var(--text); }
.folder .caret { width: 12px; height: 12px; color: var(--muted-2); transition: transform .15s; flex: none; }
.folder.open .caret { transform: rotate(90deg); }
.folder .count { margin-left: auto; font-size: 11px; color: var(--muted-2); font-weight: 400; font-variant-numeric: tabular-nums; }
.file { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 36px; cursor: pointer; color: var(--muted-2); font-size: 13px; border-left: 2px solid transparent; transition: background .1s, color .1s; }
.file:hover { color: var(--text); background: var(--panel-3); }
.file.active { color: var(--text); border-left-color: var(--text); background: var(--panel-3); font-weight: 500; }
.file .icon { width: 14px; height: 14px; color: var(--muted-2); }
.file.active .icon { color: var(--text); }
.file .fcount { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; }
.file .fcount .s { color: var(--green); }

/* Bottom bar — settings / theme / account (dashboard convention) */
.side-bottom { border-top: 1px solid var(--border); padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; }
.build { margin: 0 16px; font-size: 10px; color: var(--muted-2); font-family: var(--mono); padding: 2px 6px 6px; }

/* ---------------------------------------------------------------------------
   Main column — one .view per screen, toggled by JS
--------------------------------------------------------------------------- */
main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.view[hidden] { display: none; }
.view-head { padding: 20px 28px 14px; border-bottom: 1px solid var(--border); background: var(--bg); position: relative; }
.view-head h2 { margin: 0 0 4px; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.view-head .hint { margin: 0; font-size: 12px; color: var(--muted-2); }
.view-head .build { position: absolute; top: 22px; right: 28px; padding: 0; margin: 0; }
.view-scroll { flex: 1; overflow-y: auto; padding: 24px 28px 40px; }

/* Chips as shadcn badges (secondary variant) */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip { font-size: 11px; padding: 3px 10px; border-radius: 99px; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted-2); font-variant-numeric: tabular-nums; }
.chip b { color: var(--text); font-weight: 600; margin-left: 2px; }
.chip.s b { color: var(--green); }
.chip.f b { color: var(--red); }
.chip.p b { color: var(--amber); }
.chip.o b { color: var(--blue); }

/* Table header toolbar row: the two summary chips sit on the left; the
   selection count and the primary actions (Delete / Send email) hang on the
   right, same row, instead of living down in the filter toolbar. */
.view-head .head-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.view-head .head-row .chips { margin-top: 0; }
/* Primary actions are bigger than the small ghost toolbar buttons. */
button.cta { height: 38px; padding: 0 20px; font-size: 13.5px; font-weight: 600; border-radius: 10px; }
button.cta .icon { width: 16px; height: 16px; }
button.cta.icon-only { width: 38px; padding: 0; }

/* ---------------------------------------------------------------------------
   Dashboard view
--------------------------------------------------------------------------- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; max-width: 1000px; }
.stat-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-card); }
.stat-card .k { font-size: 12px; color: var(--muted-2); display: flex; align-items: center; gap: 7px; }
.stat-card .k .icon { width: 14px; height: 14px; }
.stat-card .v { font-size: 26px; font-weight: 600; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat-card .v.green { color: var(--green); }
.stat-card .v.red { color: var(--red); }
.stat-card .v.amber { color: var(--amber); }
.stat-card .v.blue { color: var(--blue); }

.dash-sub { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--muted-2); margin: 26px 0 12px; }
.dash-folders { display: flex; flex-direction: column; gap: 12px; max-width: 1000px; }
.dash-folder { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-card); }
.dash-folder-head { display: flex; align-items: center; gap: 10px; }
.dash-folder-head .icon { width: 17px; height: 17px; color: var(--muted-2); }
.dash-folder-head .name { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.dash-folder-head .count { margin-left: auto; font-size: 12px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.dash-folder .bar { margin: 12px 0 10px; }
.dash-file { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0 -8px; border-radius: 7px; cursor: pointer; color: var(--muted); font-size: 13px; transition: background .1s, color .1s; }
.dash-file:hover { background: var(--panel-3); color: var(--text); }
.dash-file .icon { width: 14px; height: 14px; color: var(--muted-2); }
.dash-file:hover .icon { color: var(--text); }
.dash-file .fcount { margin-left: auto; font-size: 11px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.dash-file .fcount .s { color: var(--green); }

/* ---------------------------------------------------------------------------
   Toolbar (table view)
--------------------------------------------------------------------------- */
.toolbar { display: flex; gap: 8px; align-items: center; padding: 10px 28px; border-bottom: 1px solid var(--border); flex-wrap: wrap; background: var(--bg); }
#status-filter { cursor: pointer; }
.sel-count { font-size: 12px; color: var(--text); white-space: nowrap; font-weight: 500; }
.spacer { flex: 1; }

/* Inputs — shadcn Input styling */
select, input[type=search], input[type=text], input[type=number], input[type=password], input[type=email] {
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 6px 10px; font-size: 13px; font-family: var(--font); height: 32px;
  transition: border-color .1s, box-shadow .1s;
}
select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--border-2); box-shadow: 0 0 0 3px var(--ring);
}
input::placeholder { color: var(--muted-2); }
input[type=search] { min-width: 200px; border-radius: 99px; padding-left: 14px; }
input[type=file] { font-size: 12px; color: var(--muted); cursor: pointer; }
input[type=file]::file-selector-button {
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  border-radius: 6px; padding: 4px 10px; margin-right: 10px; font-size: 12px; font-family: var(--font); cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Buttons — shadcn variants: default (primary), .ghost, .danger (destructive),
   .accent (alias of primary), .small, .icon
--------------------------------------------------------------------------- */
button {
  background: var(--primary); color: var(--primary-fore); border: 1px solid transparent;
  border-radius: var(--radius); padding: 0 14px; height: 32px; font-size: 13px; font-weight: 500;
  font-family: var(--font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: opacity .1s, background .1s, box-shadow .1s;
  box-shadow: 0 0 0 0 transparent;
}
button .icon { width: 14px; height: 14px; }
button:hover { opacity: .86; }
button:active { opacity: .78; }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
button:disabled { opacity: .4; cursor: default; pointer-events: none; }
button.ghost { background: transparent; border: 1px solid var(--border); color: var(--text); }
button.ghost:hover { background: var(--panel-3); border-color: var(--border-2); opacity: 1; }
button.danger { background: var(--destructive); border-color: transparent; color: #fff; }
:root[data-theme="dark"] button.danger { border-color: rgba(239, 68, 68, .5); }
button.danger:hover { background: var(--destructive); filter: brightness(1.1); opacity: 1; }
button.accent { background: var(--primary); color: var(--primary-fore); }
button.small { padding: 0 8px; height: 24px; font-size: 11px; margin-left: 8px; border-radius: 6px; }
button.icon { position: absolute; top: 12px; right: 14px; background: transparent; border: 0; color: var(--muted-2); padding: 4px; height: auto; width: 28px; }
button.icon .icon { width: 14px; height: 14px; }
button.icon:hover { color: var(--text); background: transparent; opacity: 1; }

#msg { font-size: 12px; color: var(--green); white-space: nowrap; }

/* ---------------------------------------------------------------------------
   Table — shadcn Table look: hairline rows, sticky muted header, hover
--------------------------------------------------------------------------- */
.tablewrap { flex: 1; overflow: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg); text-align: left; padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted-2);
}
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover .th-label { color: var(--text); }
.th-label { color: inherit; }
.th-arrow { margin-left: 4px; color: var(--blue); font-size: 9px; }
thead th[aria-sort] { color: var(--text); }
td { padding: 8px 16px; border-bottom: 1px solid var(--border); white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Rows are selection surfaces (like Excel): plain arrow cursor, no text
   selection — the I-beam made click/shift-click feel wrong. The inline editor
   restores both for itself below. */
#rows td { cursor: default; user-select: none; }
td:first-child { color: var(--muted-2); }
td:nth-child(2) { color: var(--text); font-weight: 500; }
tr:hover td { background: var(--panel-2); }
/* Selected rows — Excel-style full-row highlight (click / shift-click / Ctrl+A) */
tr.selected td { background: var(--row-sel); color: var(--muted); }
tr.selected td:nth-child(2) { color: var(--text); }
tr.selected:hover td { background: var(--row-sel-hover); }
tr.selected td:first-child { box-shadow: inset 3px 0 0 var(--blue); }
td.email { font-family: var(--mono); font-size: 12px; color: var(--muted); }
td.editable:hover { box-shadow: inset 0 0 0 1px var(--border-2); }
.cell-editor { cursor: text; user-select: text; }
.cell-editor {
  width: 100%; min-width: 0; height: 24px; padding: 1px 6px; margin: -3px -6px;
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border-2); border-radius: 4px;
}
.cell-editor:focus { outline: none; box-shadow: 0 0 0 2px var(--ring); }
td.muted { color: var(--muted-2); font-size: 12px; }

/* Status tags as shadcn badges (secondary + colored variants) */
.tag { font-size: 11px; padding: 2px 10px; border-radius: 99px; font-weight: 500; border: 1px solid transparent; line-height: 1.6; }
.tag.sent { background: rgba(34, 197, 94, .1); color: var(--green); border-color: rgba(34, 197, 94, .25); }
.tag.failed { background: rgba(239, 68, 68, .1); color: var(--red); border-color: rgba(239, 68, 68, .25); }
.tag.pending { background: rgba(234, 179, 8, .12); color: var(--amber); border-color: rgba(234, 179, 8, .3); }
.tag.none { background: var(--panel-2); color: var(--muted-2); border-color: var(--border); }
.tag.clickable { cursor: pointer; transition: box-shadow .1s; }
.tag.clickable:hover { box-shadow: 0 0 0 3px var(--ring); }

/* Popup menus — status tag (set a row's status) and folder triple-dot
   (Add list / Delete folder) — shadcn DropdownMenu */
#status-menu,
#folder-menu {
  position: fixed; z-index: 30; display: flex; flex-direction: column; gap: 1px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px;
  box-shadow: var(--shadow-pop);
  min-width: 120px; animation: menu-in .1s ease-out;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-2px) scale(.98); } to { opacity: 1; transform: none; } }
#status-menu .sm-item,
#folder-menu .sm-item { background: transparent; color: var(--muted); text-align: left; justify-content: flex-start;
  border: 0; border-radius: 5px; padding: 6px 10px; height: 30px; font-size: 13px; font-weight: 400; cursor: pointer; }
#status-menu .sm-item:hover,
#folder-menu .sm-item:hover { background: var(--panel-3); color: var(--text); opacity: 1; }
#status-menu .sm-item.current { color: var(--text); font-weight: 500; }
#status-menu .sm-item.sent:hover { color: var(--green); }
#status-menu .sm-item.failed:hover { color: var(--red); }
#status-menu .sm-item.pending:hover { color: var(--amber); }
/* Folder menu items carry an icon; delete turns red on hover. */
#folder-menu { min-width: 180px; }
#folder-menu .sm-item { display: flex; align-items: center; gap: 8px; width: 100%; }
#folder-menu .sm-item .icon { width: 13px; height: 13px; color: var(--muted-2); }
#folder-menu .sm-item:hover,
#folder-menu .sm-item:hover .icon { color: var(--text); }
#folder-menu .sm-item.danger:hover,
#folder-menu .sm-item.danger:hover .icon { color: var(--red); }

#empty { color: var(--muted-2); text-align: center; padding: 80px 20px; font-size: 13px; }

/* ---------------------------------------------------------------------------
   Modals — shadcn Dialog: backdrop blur, scale-in card, layered shadow
--------------------------------------------------------------------------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 10; animation: fade-in .15s ease-out; }
/* `display:flex` above would override the [hidden] attribute; this restores it
   so overlays stay closed until opened and close/Esc/backdrop clicks work. */
.modal-overlay[hidden] { display: none; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  width: min(720px, 92vw); max-height: 90vh;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--shadow-dialog);
  animation: dialog-in .18s cubic-bezier(.16, 1, .3, 1);
}
@keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.modal-card > header { position: relative; padding: 16px 20px 14px; border-bottom: 1px solid var(--border); }
.modal-card > header h2 { margin: 0 0 2px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.modal-card > header .hint { margin: 0; font-size: 12px; color: var(--muted-2); }
.m-body { padding: 18px 20px; overflow-y: auto; }
.confirm-card { width: min(420px, 92vw); }
.confirm-card #cf-message { margin: 0 0 4px; color: var(--text); font-size: 13px; line-height: 1.5; white-space: pre-line; }
.m-warn { margin: 0 0 14px; padding: 10px 12px; background: rgba(239, 68, 68, .08); border: 1px solid rgba(239, 68, 68, .35); border-radius: var(--radius); color: var(--red); font-size: 12px; }
.m-grid { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.m-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 500; }
.m-grid label:first-child { flex: 1; min-width: 260px; }
.m-grid input { min-width: 120px; }
label > textarea {
  margin-top: 6px; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 10px; font: 13px/1.6 var(--mono); resize: vertical; width: 100%;
  transition: border-color .1s, box-shadow .1s;
}
label { font-weight: 500; }
label > input { margin-top: 6px; width: 100%; }
.hint-inline { color: var(--muted-2); font-size: 11px; font-weight: 400; }

/* Attachments list */
#m-att { margin: -4px 0 8px; }
#m-att-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#m-att-list li { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12px; }
#m-att-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
#m-att-list .size { color: var(--muted-2); margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
#m-att-list button { background: transparent; border: 0; color: var(--muted-2); font-size: 15px; line-height: 1; padding: 0 4px; height: auto; }
#m-att-list button:hover { color: var(--red); opacity: 1; }
#m-att-total.warn { color: var(--red); }
#m-actions { display: flex; gap: 8px; margin-top: 16px; }
#m-result { margin-top: 16px; }
.summary { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.summary .chip { margin: 0; }
.skip-list { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 12px; font-size: 12px; color: var(--muted); max-height: 130px; overflow-y: auto; margin-bottom: 12px; }
.skip-list .skip-item { display: flex; gap: 8px; padding: 1px 0; }
.skip-list .reason { color: var(--amber); margin-left: auto; white-space: nowrap; }
pre { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; font: 12px/1.6 var(--mono); white-space: pre-wrap; max-height: 220px; overflow-y: auto; color: var(--muted); }
.m-frame { width: 100%; height: 340px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }

/* Progress bar — shadcn Progress */
#m-progress { margin-top: 16px; }
.bar { height: 8px; background: var(--panel-3); border: 0; border-radius: 99px; overflow: hidden; }
#m-bar { height: 100%; width: 0; background: var(--text); border-radius: 99px; transition: width .3s; }
.dash-folder .bar { height: 6px; }
.p-line { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
#m-last { margin-top: 8px; font-size: 12px; color: var(--muted-2); font-family: var(--mono); }

/* Settings view — cards with icon headers */
.settings-card { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-card); margin-bottom: 16px; max-width: 1000px; }
.sc-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.sc-head h3 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.sc-icon { width: 26px; height: 26px; border-radius: 7px; background: var(--panel-3); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.sc-icon .icon { width: 14px; height: 14px; }
.sc-body { padding: 18px; }
.sc-body > label { display: block; margin-bottom: 14px; font-size: 12px; color: var(--muted); }

/* Status chips (settings headers) — clickable badges */
.smtp-chip { font-size: 11px; padding: 4px 10px; border-radius: 99px; background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .25); color: var(--green); white-space: nowrap; font-weight: 500; margin-left: auto; }
.smtp-chip.warn { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .25); color: var(--red); }

/* Settings grids */
.s-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.s-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); font-weight: 500; }
.s-grid label:first-child { grid-column: 1 / -1; } /* host spans full width */
.s-grid .pw-row { display: flex; gap: 6px; margin-top: 0; }
.s-grid .pw-row input { flex: 1; min-width: 0; }
#s-msg, #t-msg, #a-msg, #nl-msg { margin: 12px 0 0; min-height: 1em; font-size: 12px; }
#s-msg.ok, #t-msg.ok, #a-msg.ok, #nl-msg.ok { color: var(--green); }
#s-msg.warn, #t-msg.warn, #a-msg.warn, #nl-msg.warn { color: var(--red); }

/* Lead detail modal — definition list of every field the contact provided. */
#d-fields { margin: 0; display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; align-content: start; }
#d-fields dt { color: var(--muted-2); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 500; padding-top: 2px; }
#d-fields dd { margin: 0; font-size: 13px; word-break: break-word; color: var(--text); }
#d-fields dd:only-child { grid-column: 1 / -1; color: var(--muted-2); }

/* Sent-email snapshot, below the fields. Shows the exact subject + body the
   contact received (survives later template edits). */
.d-email { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.d-email h3 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.d-email h3 .icon { width: 13px; height: 13px; }
.d-email-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.d-email-subject { font-size: 13px; font-weight: 600; color: var(--text); word-break: break-word; }
.d-email-at { font-size: 11px; color: var(--muted-2); flex: none; }
.d-email-body {
  margin: 0;
  max-height: 260px;
  overflow: auto;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  white-space: pre-wrap;
  font-size: 12px;
  line-height: 1.5;
}
#d-email-none { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }

/* Login/register overlay - a narrower modal card, always on top. */
.auth-card { max-width: 360px; }
#auth-msg { min-height: 1em; margin-top: 4px; }
#auth-overlay { z-index: 1000; }

/* Spreadsheet-style grid editor (New list / Add contacts modals). */
.grid-wrap { overflow: auto; max-height: 320px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
table.grid { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 12px; }
table.grid th, table.grid td { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0; white-space: nowrap; background: var(--bg); }
table.grid th { position: sticky; top: 0; z-index: 1; background: var(--panel-2); }
table.grid input { border: 0; background: transparent; padding: 6px 8px; font: inherit; color: inherit; min-width: 90px; width: 100%; box-sizing: border-box; }
table.grid input:focus { outline: 2px solid var(--ring, var(--border-2)); outline-offset: -2px; }
.g-col-name { min-width: 110px; font-weight: 500; }
.g-locked { display: block; padding: 6px 8px; color: var(--muted); font-weight: 500; }
.g-num { width: 30px; min-width: 30px; text-align: center; color: var(--muted-2); background: var(--panel-2) !important; border-right: 1px solid var(--border); }
.g-x { border: 0; background: transparent; color: var(--muted-2); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.g-x:hover { color: var(--red, #ef4444); background: var(--panel-3, var(--panel-2)); }
.g-add-col { padding: 4px 6px !important; }
.g-fill { background: var(--panel-2) !important; min-width: 20px; }
.g-foot { display: flex; gap: 8px; margin-top: 8px; }

/* Dashboard folder cards: sent-progress fill (shared .bar track, green fill) */
.dash-folder .bar > div { height: 100%; background: var(--green); border-radius: 99px; transition: width .3s; }

/* Column widths — fixed table layout so long content can't dictate the
   table's size. Widths are applied inline on the header row by app.js, which
   also attaches a drag grip to every header cell except the "flex" column
   (Notes when present, else the last one). That flex column gets no width,
   so in fixed layout it absorbs whatever the resizable columns leave behind
   and the table always fills its container. Long text truncates (hover shows
   the full value, double-click edits). */
#tbl { table-layout: fixed; }
#tbl td.col-name, #tbl td.col-email, #tbl td.col-phone,
#tbl td.col-notes, #tbl td.col-sent, #tbl td.col-opened,
#tbl td.col-opens, #tbl td.col-other {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* While a cell's inline editor is focused, let its ring show without being
   clipped to the truncated cell box. */
#tbl td.editing { overflow: visible; }

/* Header-cell resize grips. The th is sticky (a positioning context), so the
   absolutely-placed grip hugs the column's right edge with an oversized hit
   area. Hover/drag highlight pins the divider you're about to move. */
#tbl .col-grip {
  position: absolute;
  top: 0;
  right: -5px;
  bottom: 0;
  width: 10px;
  z-index: 2;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
}
#tbl .col-grip:hover,
#tbl .col-grip.active {
  background: var(--border-2);
}
#tbl .col-grip.active { cursor: col-resize; }
/* While a drag is on, lock the cursor and prevent text selection snapping
   mid-drag (selections inside the table still work on pointerup). */
body.resizing { cursor: col-resize; user-select: none; }
body.resizing * { cursor: col-resize !important; }

/* Folder triple-dot (⋯) — pinned to the right edge of the row, opens the
   Add list / Delete folder menu. */
.folder > .label .icon-btn { width: 20px; height: 20px; margin: 0 -2px 0 auto; }
.folder > .label .icon-btn .icon { width: 12px; height: 12px; }

/* =========================================================================
   Oxie — the AI assistant panel (public/chat.js) — a flex sibling of <main>,
   so opening it pushes the table aside instead of overlaying it. Closed, it
   collapses to width 0; open, it slides out to --pw (400px by default, or
   whatever the user dragged it to — a grip on its left edge resizes it), and
   <main> reflows to fill the rest. Styled with the app's plain zinc tokens —
   neutral surfaces, a flat primary bubble, the shared --blue for affordances
   — so it reads as a working tool, not a consumer AI chatbot.
   ========================================================================= */
#chat-panel {
  --pw: 400px; /* overridden live by chat.js during resize */
  position: relative;
  flex: none;
  width: 0;
  max-width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-left: 1px solid transparent;
  transition: width .3s cubic-bezier(.16, 1, .3, 1), border-color .3s ease;
}
#chat-panel.open {
  width: var(--pw);
  border-left-color: var(--border);
}
/* While a drag is on, layout updates follow the cursor 1:1 — the .3s ease
   transition would otherwise fight the hand. */
#chat-panel.dragging,
#chat-panel.dragging > * {
  transition: none !important;
}
/* The panel's width animates but its rows must not reflow while it grows, so
   each row pins its own width (same --pw) and gets clipped by overflow:hidden
   above. Both jump together when --pw changes mid-drag. */
#chat-panel > * { width: var(--pw); flex-shrink: 0; }

/* Resize grip — a thin strip hugging the panel's left edge (the main/chat
   divider). Lives inside the panel so it's not clipped by overflow:hidden. */
#chat-grip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  z-index: 3;
  cursor: col-resize;
  touch-action: none;
}
#chat-grip:hover,
#chat-grip.drag {
  background: var(--panel-3);
}

/* Header — avatar, identity, actions */
.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.chat-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  animation: avatar-in .3s cubic-bezier(.16, 1, .3, 1);
}
@keyframes avatar-in { from { transform: scale(.6) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
.chat-avatar .icon { width: 18px; height: 18px; }
.chat-online {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 10px;
  height: 10px;
  border-radius: 99px;
  background: var(--green);
  border: 2px solid var(--panel);
}
.chat-online.pulse { animation: pulse-dot 1.3s ease-in-out infinite; }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .45); }
  50% { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}
.chat-id-text { display: flex; flex-direction: column; min-width: 0; }
.chat-id-text h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}
.chat-status { font-size: 11px; color: var(--muted-2); white-space: nowrap; transition: color .15s; }
.chat-head-actions { display: flex; gap: 2px; flex: none; }
.chat-head-actions .icon-btn { width: 28px; height: 28px; border-radius: 8px; }
.chat-head-actions .icon-btn:hover { color: var(--text); }
#chat-clear:hover { color: var(--red); }
/* Armed = second click deletes; make the state unmistakable */
#chat-clear.armed { color: var(--red); background: rgba(239, 68, 68, .12); }
#chat-clear.armed .icon { animation: chat-blink .9s steps(2) infinite; }

/* ---------------------------------------------------------------------------
   Conversation bar + switcher dropdown (Firestore-backed, lib/conversations.js)
--------------------------------------------------------------------------- */
.chat-convs { position: relative; border-bottom: 1px solid var(--border); flex: none; }
#chat-conv-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 7px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--muted);
  font: 500 12px/1.3 var(--font);
  transition: background .1s, color .1s;
}
#chat-conv-btn:hover { background: var(--panel-3); color: var(--text); }
.chat-conv-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#chat-conv-btn .icon { width: 12px; height: 12px; color: var(--muted-2); transition: transform .15s; }
#chat-conv-btn.open .icon { transform: rotate(90deg); }
.chat-conv-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 10px;
  right: 10px;
  z-index: 40; /* above the log, below nothing in the panel */
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: msg-in .18s cubic-bezier(.16, 1, .3, 1);
}
.chat-conv-menu[hidden] { display: none; }
.chat-conv-new {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: auto; /* single row, but stay explicit against button{height:32px} */
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: 500 12.5px var(--font);
  cursor: pointer;
  text-align: left;
}
.chat-conv-new:hover { background: var(--panel-3); }
.chat-conv-new .icon { width: 13px; height: 13px; color: var(--blue); }
.chat-conv-search { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.chat-conv-search input {
  width: 100%;
  padding: 6px 10px;
  font: 12px var(--font);
  color: var(--text);
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 7px;
  outline: none;
}
.chat-conv-search input:focus { border-color: var(--border-2); }
.chat-conv-list { max-height: 340px; overflow-y: auto; padding: 5px; }
.chat-conv-item {
  display: flex;
  flex-direction: column;
  align-items: stretch; /* override button's center — keep the accent bar full-width */
  gap: 2px;
  width: 100%;
  height: auto; /* override the global button{height:32px}, or flex crushes the title to 0 */
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.chat-conv-item + .chat-conv-item { margin-top: 1px; }
.chat-conv-item:hover { background: var(--panel-3); }
.chat-conv-item.current {
  background: var(--panel-3);
  box-shadow: inset 2px 0 0 var(--blue); /* accent bar — var(--blue), the panel's accent convention (the old --chat-grad-* vars are gone) */
}
.chat-conv-item.current .chat-conv-item-title { color: var(--blue); }
.chat-conv-item-title {
  font: 500 12.5px/1.35 var(--font);
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-conv-item-meta { font-size: 11px; color: var(--muted-2); }
.chat-conv-empty { padding: 14px 12px; font-size: 11.5px; color: var(--muted-2); text-align: center; }

/* Message stream */
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Bubbles */
.chat-msg {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.55;
  white-space: normal;
  word-wrap: break-word;
  animation: msg-in .24s cubic-bezier(.16, 1, .3, 1);
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.chat-msg.user {
  align-self: flex-end;
  background: var(--primary);
  color: var(--primary-fore);
  border-bottom-right-radius: 5px;
}
.chat-msg.user code {
  background: color-mix(in srgb, var(--primary-fore) 10%, transparent);
  border-color: color-mix(in srgb, var(--primary-fore) 24%, transparent);
  color: var(--primary-fore);
}
.chat-msg.assistant {
  align-self: flex-start;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
  box-shadow: var(--shadow-card);
}
.chat-msg.starting { padding-top: 12px; padding-bottom: 12px; }
.chat-msg.error {
  align-self: stretch;
  background: rgba(239, 68, 68, .06);
  border: 1px solid rgba(239, 68, 68, .3);
  color: var(--red);
  font-size: 12px;
  animation: shake .3s ease-in-out;
}
@keyframes shake {
  0%, 100% { transform: none; }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.chat-msg code {
  font: 12px/1.5 var(--mono);
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0 5px;
}

/* ---------------------------------------------------------------------------
   Markdown content inside chat bubbles (rendered by marked + DOMPurify in
   public/chat.js). Compact scale for the 400px drawer: tight margins, small
   tables that scroll horizontally rather than squeeze.
--------------------------------------------------------------------------- */
.chat-text > :first-child { margin-top: 0; }
.chat-text > :last-child { margin-bottom: 0; }
.chat-text p { margin: 0 0 8px; }
.chat-text h1, .chat-text h2, .chat-text h3, .chat-text h4 {
  margin: 14px 0 6px;
  font-size: 13px;
  letter-spacing: -.01em;
}
.chat-text h1 { font-size: 15px; }
.chat-text h2 { font-size: 14px; }
.chat-text ul, .chat-text ol { margin: 0 0 8px; padding-left: 20px; }
.chat-text li { margin: 2px 0; }
.chat-text blockquote {
  margin: 8px 0;
  padding: 4px 10px;
  border-left: 2px solid var(--border-2);
  background: var(--panel-3);
  border-radius: 0 6px 6px 0;
  color: var(--muted);
}
.chat-text blockquote p { margin: 4px 0; }
.chat-text a { color: var(--blue); text-underline-offset: 2px; }
.chat-text hr { margin: 10px 0; border: 0; border-top: 1px solid var(--border); }
.chat-text pre {
  margin: 8px 0;
  padding: 8px 10px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow-x: auto;
}
.chat-text pre code { background: none; border: 0; padding: 0; }
.chat-text table {
  margin: 8px 0;
  border-collapse: collapse;
  font-size: 12px;
  display: block; /* lets a wide table scroll inside the bubble */
  overflow-x: auto;
  max-width: 100%;
}
.chat-text th, .chat-text td {
  border: 1px solid var(--border);
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap; /* emails/dates stay on one line; table scrolls instead */
}
.chat-text th {
  background: var(--panel-3);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.chat-text tr:nth-child(2n) { background: color-mix(in srgb, var(--panel-3) 45%, transparent); }

/* Typing indicator — shown while Oxie is about to respond */
.chat-typing { display: inline-flex; align-items: center; gap: 4px; }
.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: var(--muted-2);
  animation: typing-bounce 1.1s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: .14s; }
.chat-typing span:nth-child(3) { animation-delay: .28s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Streaming cursor */
.chat-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 2px;
  vertical-align: -2px;
  border-radius: 2px;
  background: var(--blue);
  animation: chat-blink .9s steps(2) infinite;
}
@keyframes chat-blink { 50% { opacity: 0; } }

/* Tool-call chips — what Oxie is doing between replies. When input/output JSON
   is available the chip becomes a <details> that expands into an inspector. */
.chat-tool {
  align-self: flex-start;
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--panel-2);
  animation: tool-in .28s cubic-bezier(.16, 1, .3, 1);
  transition: border-color .15s, transform .15s;
}
.chat-tool:hover { border-color: var(--border-2); transform: translateY(-1px); }
.chat-tool[open] { border-radius: 10px; transform: none; } /* expanded: not a pill */
.chat-tool summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.chat-tool summary::-webkit-details-marker { display: none; }
/* Plain (non-expandable) chip: same pill layout, on the container itself */
.chat-tool:not(details) {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
}
.chat-tool:not([open]) > .chat-tool-summary {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-tool-caret {
  width: 11px;
  height: 11px;
  color: var(--muted-2);
  transition: transform .15s;
}
.chat-tool[open] .chat-tool-caret { transform: rotate(90deg); }
@keyframes tool-in {
  from { opacity: 0; transform: translateY(5px) scale(.94); }
  to { opacity: 1; transform: none; }
}
.chat-tool-ic { display: inline-flex; color: var(--blue); animation: spin-once .5s cubic-bezier(.16, 1, .3, 1); }
.chat-tool-ic .icon { width: 12px; height: 12px; }
@keyframes spin-once { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.chat-tool code { color: var(--blue); font: 11px/1 var(--mono); }
.chat-tool-detail {
  padding: 2px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
}
.chat-tool-io { display: flex; flex-direction: column; gap: 4px; }
.chat-tool-io-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.chat-tool-io pre {
  margin: 0;
  padding: 8px 10px;
  max-height: 200px;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: 11px/1.5 var(--mono);
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-tool.bad {
  border-color: rgba(239, 68, 68, .35);
  color: var(--red);
  background: rgba(239, 68, 68, .05);
}
.chat-tool.bad .chat-tool-ic, .chat-tool.bad code { color: var(--red); }

/* Rendered email drafts from preview_email */
.chat-preview {
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  font-size: 12px;
  overflow: hidden;
  animation: msg-in .24s cubic-bezier(.16, 1, .3, 1);
}
.chat-preview summary {
  cursor: pointer;
  padding: 9px 12px;
  color: var(--muted);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
.chat-preview summary::-webkit-details-marker { display: none; }
.chat-preview-subject {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-weight: 600;
}
.chat-preview-caret {
  flex: none;
  width: 12px;
  height: 12px;
  color: var(--muted-2);
  transition: transform .15s;
}
.chat-preview[open] .chat-preview-caret { transform: rotate(90deg); }
.chat-preview-tag {
  flex: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--panel-3);
  border: 1px solid var(--border-2);
  color: var(--muted);
}
.chat-preview-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 12px 8px;
  font-size: 11px;
  color: var(--muted);
}
.chat-preview-to {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.chat-preview-to .icon { width: 12px; height: 12px; color: var(--muted-2); }
.chat-preview-to b { color: var(--text); font-weight: 600; }
.chat-preview-count {
  flex: none;
  padding: 1px 8px;
  border-radius: 99px;
  background: var(--panel-3);
  border: 1px solid var(--border);
  font-size: 10px;
  color: var(--muted);
}
.chat-preview-body {
  margin: 0 12px 12px;
  max-height: 280px;
  overflow: auto;
  padding: 10px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  white-space: pre-wrap;
}

/* Approval card for the first agent send in a conversation */
.chat-approval {
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 10px 12px 12px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: msg-in .24s cubic-bezier(.16, 1, .3, 1);
}
.chat-approval > .chat-preview-tag {
  align-self: flex-start;
  background: var(--panel-3);
}
.chat-approval-recips {
  font-size: 11px;
  color: var(--muted);
  max-height: 52px;
  overflow: auto;
  line-height: 1.5;
}
.chat-approval-draft summary {
  cursor: pointer;
  color: var(--muted);
  user-select: none;
  font-size: 11px;
}
.chat-approval-draft .chat-preview-meta { padding-top: 8px; }
.chat-approval-actions {
  display: flex;
  gap: 8px;
}
.chat-approve-btn, .chat-skip-btn {
  flex: none;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-2);
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.chat-approve-btn {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-weight: 600;
}
.chat-approve-btn:hover:not(:disabled), .chat-skip-btn:hover:not(:disabled) { filter: brightness(1.08); }
.chat-approve-btn:disabled, .chat-skip-btn:disabled { opacity: .6; cursor: default; }
.chat-approval-status {
  font-size: 11px;
  color: var(--muted);
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  white-space: pre-wrap;
}

/* Welcome / empty state */
.chat-welcome {
  margin: auto;
  max-width: 320px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 8px;
  animation: msg-in .3s cubic-bezier(.16, 1, .3, 1);
}
/* display:flex above would override the [hidden] attribute (same trap as the
   panel and modal overlays) — this keeps the empty state actually hidden. */
.chat-welcome[hidden] { display: none; }
.chat-welcome .chat-avatar {
  width: 54px;
  height: 54px;
  border-radius: 14px;
}
.chat-welcome .chat-avatar .icon { width: 26px; height: 26px; }
.chat-welcome h3 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.chat-welcome p { margin: 0; font-size: 12.5px; color: var(--muted-2); line-height: 1.55; }
.chat-suggestions { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 8px; }
.chat-suggestion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 99px;
  padding: 8px 14px;
  font-size: 12px;
  height: auto;
  transition: border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.chat-suggestion:hover {
  border-color: var(--border-2);
  color: var(--text);
  transform: translateX(2px);
  box-shadow: var(--shadow-card);
  opacity: 1;
}

/* Composer */
.chat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--panel);
}
.chat-form textarea {
  flex: 1;
  resize: none;
  font: 13px/1.5 var(--font);
  padding: 10px 14px;
  max-height: 140px;
  min-height: 38px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 19px;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.chat-form textarea::placeholder { color: var(--muted-2); }
.chat-form textarea:focus-visible {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
  background: var(--bg);
}
#chat-send {
  width: 38px;
  height: 38px;
  padding: 0;
  flex: none;
  border-radius: 99px;
  background: var(--primary);
  color: var(--primary-fore);
  box-shadow: var(--shadow-card);
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
#chat-send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-pop); opacity: 1; }
#chat-send:active:not(:disabled) { transform: translateY(0) scale(.94); }
#chat-send:disabled { opacity: .35; box-shadow: none; }
#chat-send .icon { width: 17px; height: 17px; }
#chat-send.sending .icon { animation: send-bob .7s ease-in-out infinite; }
@keyframes send-bob { 0%, 100% { transform: translate(0); } 50% { transform: translate(1px, -1px); } }

@media (prefers-reduced-motion: reduce) {
  #chat-panel,
  .chat-avatar, .chat-online, .chat-online.pulse,
  .chat-msg, .chat-tool, .chat-tool-ic, .chat-suggestion,
  .chat-cursor, .chat-typing span, .chat-preview, .chat-welcome {
    animation: none !important;
    transition: none !important;
  }
}