:root {
  /* warm-neutral palette — a little bakery warmth, still clean + professional */
  --bg:#f6f5f2; --panel:#ffffff; --panel2:#f3f0ec; --border:#e8e3dc;
  --text:#2a2723; --muted:#867e74; --link:#2563eb; --link-weak:#e9eefe;
  --new:#2563eb; --open:#dc2626; --pending:#d97706; --solved:#16a34a;
  --closed:#9a9289; --spam:#7c3aed;
  --pri-urgent:#dc2626; --pri-high:#d97706; --pri-normal:#857f76; --pri-low:#ada699;
  --radius:11px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(45,36,24,.05),0 2px 6px rgba(45,36,24,.06);
  --shadow-lg:0 10px 34px rgba(45,36,24,.11);
  --accent-grad:linear-gradient(135deg,#f6a723 0%,#e0457b 100%);
  --ring:0 0 0 3px rgba(37,99,235,.20);
}
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; background:var(--bg); color:var(--text);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; }
::selection { background:rgba(246,167,35,.25); }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:6px; }
button, input, select, textarea { font-family:inherit; }
button { transition:background .14s ease, box-shadow .14s ease, transform .04s ease; }
button:active { transform:translateY(.5px); }
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--link); box-shadow:var(--ring); }

/* top bar */
.topbar { display:flex; align-items:center; gap:14px; height:54px; padding:0 20px;
  background:rgba(255,255,255,.85); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border); box-shadow:var(--shadow);
  position:sticky; top:0; z-index:30; }
.topbar a.logo, .topbar .logo { font-size:15px; font-weight:700; letter-spacing:-.01em;
  display:flex; align-items:center; gap:9px; color:var(--text); }
.topbar a.logo:hover { text-decoration:none; opacity:.85; }
.topbar .logo .dot { width:24px;height:24px;border-radius:8px;background:var(--accent-grad);
  display:inline-block; box-shadow:0 2px 6px rgba(224,69,123,.30); }
.topbar .crumb { color:var(--muted); font-size:13px; }
.topbar .spacer { flex:1; }
.topbar .user { color:var(--muted); font-size:13px; }
.topbar form.logout { margin:0; }
.topbar form.search { margin:0; }
.topbar form.search input { width:220px; max-width:30vw; padding:5px 10px; font-size:13px;
  background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:6px; }
.topbar-compose { flex-shrink:0; text-decoration:none; }
/* Compose (proactive outbound) page */
.compose-wrap { max-width:760px; }
.compose-lookup { display:flex; gap:8px; margin:14px 0; }
.compose-lookup input { flex:1; max-width:420px; padding:9px 11px; font-size:14px; background:#fff;
  color:var(--text); border:1px solid var(--border); border-radius:7px; }
.compose-lbl { display:block; font-size:12px; color:var(--muted); margin:10px 0 5px; }
.compose-ai { margin:16px 0; padding:14px 16px; background:#faf9ff; border:1px solid #ddd6fe; border-radius:10px; }
.compose-ai #cmp-gen-status { margin-left:10px; font-size:12.5px; }
.compose-send { margin-top:6px; padding:16px; background:var(--panel); border:1px solid var(--border); border-radius:10px; }
.compose-send input[type=text] { width:100%; padding:9px 11px; font-size:14px; background:#fff; color:var(--text);
  border:1px solid var(--border); border-radius:7px; }
.compose-body { width:100%; padding:11px; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.6; color:#222; border:1px solid var(--border); border-radius:8px; background:#fff;
  resize:vertical; min-height:280px; }
.compose-send .btn-primary { margin-top:12px; }
.compose-err { margin:10px 0; padding:10px 12px; background:#fef2f2; border:1px solid #fecaca;
  border-radius:8px; color:#b91c1c; font-size:13px; }
.compose-hist { margin-top:18px; }
.compose-hist h3 { font-size:14px; margin:0 0 8px; }
.compose-shopify { font-size:13px; margin-bottom:10px; padding:8px 11px; background:#f0fdf4;
  border:1px solid #bbf7d0; border-radius:8px; color:#166534; }
.compose-history { width:100%; border-collapse:collapse; }
.compose-history td { padding:7px 10px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle; }
.compose-history td .subj { font-weight:500; }
.compose-history a { color:inherit; }
.search-page { display:flex; gap:8px; margin:12px 0; }
.search-page input { flex:1; max-width:480px; padding:7px 10px; font-size:14px;
  background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:6px; }
.btn-ghost { background:none; border:1px solid var(--border); color:var(--muted);
  padding:5px 12px; border-radius:6px; cursor:pointer; font-size:12px; }
.btn-ghost:hover { background:var(--panel2); }

/* layout shell */
.layout { display:flex; height:calc(100vh - 52px); }
nav.views { width:224px; flex-shrink:0; background:var(--panel); border-right:1px solid var(--border);
  padding:12px 10px; overflow:auto; }
nav.views a { display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:8px 12px; margin:1px 0; border-radius:var(--radius-sm); color:var(--text);
  font-size:13px; transition:background .14s ease, color .14s ease; }
nav.views a:hover { background:var(--panel2); text-decoration:none; }
nav.views a.active { background:var(--link-weak); color:var(--link); font-weight:600; }
nav.views a .count { color:var(--muted); font-size:12px; background:var(--panel2);
  padding:1px 8px; border-radius:999px; min-width:22px; text-align:center; font-weight:600; }
nav.views a:hover .count { background:#fff; }
nav.views a.active .count { background:#fff; color:var(--link); }
nav.views .nav-section { padding:16px 18px 4px; font-size:11px; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); }
nav.views .nav-save { padding:8px 16px; }
nav.views .nav-save summary { cursor:pointer; font-size:13px; color:var(--muted); list-style:none; }
nav.views .nav-save summary::-webkit-details-marker { display:none; }
nav.views .nav-save form { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
nav.views .nav-save input, nav.views .nav-save select, nav.views .nav-save button {
  width:100%; padding:6px 8px; font-size:12px; border:1px solid var(--border);
  border-radius:6px; background:#fff; color:var(--text); }
nav.views .nav-save button { background:var(--link); color:#fff; border:none; cursor:pointer; font-weight:600; }

main.content { flex:1; overflow:auto; }

/* tickets table */
table.tickets { width:100%; border-collapse:collapse; font-size:13px; background:var(--panel); }
table.tickets th { text-align:left; padding:11px 18px; color:var(--muted); font-weight:600;
  font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--border); position:sticky; top:0;
  background:var(--panel2); z-index:1; }
table.tickets td { padding:0; border-bottom:1px solid var(--border); }
table.tickets td a.cell { display:block; padding:13px 18px; color:var(--text); }
table.tickets td a.cell:hover { text-decoration:none; }
table.tickets tr { transition:background .12s ease; }
table.tickets tbody tr:hover td { background:var(--panel2); }
table.tickets tr.triage-row:hover td { background:var(--panel2); }
.subj { font-weight:600; color:var(--text); }
.muted { color:var(--muted); }
.tags span, .tag { display:inline-block; background:var(--panel2); color:var(--muted);
  padding:2px 8px; border-radius:999px; font-size:11px; font-weight:500; margin:2px 4px 0 0;
  border:1px solid var(--border); }
.empty { padding:72px; text-align:center; color:var(--muted); font-size:14px; }
/* list toolbar + sort control */
.list-toolbar { display:flex; align-items:center; gap:8px; padding:11px 18px;
  background:var(--panel); border-bottom:1px solid var(--border); font-size:12px;
  position:sticky; top:0; z-index:2; }
.sort-link { display:inline-block; padding:4px 11px; border-radius:999px; font-size:12px;
  font-weight:600; color:var(--muted); border:1px solid var(--border); background:var(--panel); }
.sort-link:hover { background:var(--panel2); text-decoration:none; color:var(--text); }
.sort-link.active { background:var(--link); border-color:transparent; color:#fff;
  box-shadow:0 1px 2px rgba(37,99,235,.35); }
.sort-link.active:hover { background:#1d4ed8; color:#fff; }
/* urgent (waiting > 2 business days) */
.urgent-row td { background:rgba(220,38,38,.045); box-shadow:inset 3px 0 0 var(--open); }
.urgent-row:hover td { background:rgba(220,38,38,.08); }
.urgent-pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:10.5px;
  font-weight:700; letter-spacing:.03em; color:#fff; background:var(--open);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.08); }
.wait-urgent { color:var(--open); font-weight:700; }
/* new customer reply (unanswered) — immediate, no 2-day wait */
.newreply-row td { background:rgba(20,86,240,.05); box-shadow:inset 3px 0 0 #1456f0; }
.newreply-row:hover td { background:rgba(20,86,240,.09); }
.newreply-pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:10.5px;
  font-weight:700; letter-spacing:.03em; color:#fff; background:#1456f0;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.08); }
.wait-new { color:#1456f0; font-weight:700; }

/* badges */
.badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px;
  font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:#fff;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.08); }
.st-new{background:var(--new)} .st-open{background:var(--open)} .st-pending{background:var(--pending)}
.st-solved{background:var(--solved)} .st-closed{background:var(--closed)} .st-spam{background:var(--spam)}
/* inline status selector in the list (change status without opening the ticket) */
.st-cell { padding:13px 14px; }
.st-form { margin:0; }
/* Solid status pill (scannable at a glance) + a white chevron so it reads as an
   editable dropdown. Base64 SVG = no inline-SVG parsing quirks across browsers. */
.st-select { max-width:100%; box-sizing:border-box; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.03em; padding:4px 25px 4px 12px; border-radius:999px;
  color:#fff; border:none; cursor:pointer; -webkit-appearance:none; appearance:none;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.14); transition:filter .12s, box-shadow .12s;
  background-repeat:no-repeat; background-position:right 9px center;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDEwIDEwIj48cGF0aCBkPSJNMiAzLjVsMyAzIDMtMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg=="); }
.st-select:hover { filter:brightness(1.08); box-shadow:inset 0 -1px 0 rgba(0,0,0,.14), 0 1px 4px rgba(0,0,0,.18); }
.stsel-new{background:var(--new)} .stsel-open{background:var(--open)} .stsel-pending{background:var(--pending)}
.stsel-solved{background:var(--solved)} .stsel-closed{background:var(--closed)} .stsel-spam{background:var(--spam)}
.st-select option { background:#fff; color:#222; font-weight:600; }
.pri { font-size:12px; font-weight:600; }
.pri-urgent{color:var(--pri-urgent)} .pri-high{color:var(--pri-high)}
.pri-normal{color:var(--pri-normal)} .pri-low{color:var(--pri-low)}

/* detail 3-panel */
.detail-layout { display:flex; height:calc(100vh - 54px); }
.detail-left { width:240px; flex-shrink:0; padding:18px 16px; background:var(--panel);
  border-right:1px solid var(--border); overflow:auto; }
.detail-center { flex:1; min-width:0; overflow:auto; display:flex; flex-direction:column; background:var(--bg); }
/* Right "AI assist" rail — flexible width so the draft gets more room on wide
   screens (grows with the viewport, capped so it never dominates). */
.detail-right { width:clamp(380px, 33vw, 580px); flex-shrink:0; padding:18px 18px; background:var(--panel);
  border-left:1px solid var(--border); overflow:auto; }
/* customer/Shopify card now lives in the center column, under the email thread */
.detail-center .cust-card { margin:4px 30px 14px; padding:14px 16px; max-width:760px; background:var(--panel);
  border:1px solid var(--border); border-radius:10px; }
.prop-block { margin-bottom:15px; }
.prop-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin-bottom:6px; font-weight:600; }
.detail-left select, .detail-left input[type=text] { width:100%; padding:8px 10px; font-size:13px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; color:var(--text); }
.detail-left form { margin:0 0 4px; }
.detail-left .btn-sm { margin-top:6px; }
.back-link { display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600;
  color:var(--muted); padding:5px 0; }
.back-link:hover { color:var(--text); text-decoration:none; }
.conv-header { padding:18px 30px; border-bottom:1px solid var(--border);
  background:var(--panel); position:sticky; top:0; z-index:5; box-shadow:var(--shadow); }
.conv-header .conv-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.conv-header h2 { margin:0; font-size:19px; letter-spacing:-.01em; line-height:1.3; }
.conv-header .conv-sub { margin-top:5px; font-size:13px; }
.conv-stream { padding:24px 30px; display:flex; flex-direction:column; gap:16px; flex:1;
  max-width:980px; width:100%; margin:0 auto; }
.bubble { border:1px solid var(--border); border-radius:14px; padding:13px 16px; max-width:82%;
  box-shadow:var(--shadow); }
.bubble-in { background:#fff; align-self:flex-start; border-bottom-left-radius:5px; }
.bubble-out { background:#eef4ff; align-self:flex-end; border-color:#cfe0fb; border-bottom-right-radius:5px; }
.bubble-note { background:#fffaeb; align-self:stretch; max-width:100%; border-color:#fbe7a6; }
.bubble-meta { font-size:12px; color:var(--muted); margin-bottom:7px; font-weight:500;
  display:flex; align-items:center; gap:6px; }
.bubble-meta b { color:var(--text); font-weight:600; }
.bubble-body { white-space:pre-wrap; word-break:break-word; }
.bubble-rich { max-width:100%; align-self:stretch; }
.bubble-rich .bubble-body { white-space:normal; }
.email-frame { width:100%; height:420px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:#fff; resize:vertical; display:block; }
.open-mail { display:inline-block; text-decoration:none; }
.open-mail:hover { text-decoration:none; }
.bubble-footer { margin-top:8px; font-size:12px; }
.bubble-attachments { margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; }
.attach-link { display:inline-block; padding:3px 10px; font-size:13px; text-decoration:none;
  border:1px solid var(--border); border-radius:6px; background:var(--bg, #f9fafb); color:inherit; }
.attach-link:hover { text-decoration:none; border-color:#9ca3af; }
.sys-line { text-align:center; color:var(--muted); font-size:12px; margin:2px 0; }
.cust-card .cust-name { font-weight:700; font-size:15px; letter-spacing:-.01em; }
.cust-card .cust-email { font-size:12px; margin-top:3px; word-break:break-all; }
.cust-card hr { border:none; border-top:1px solid var(--border); margin:14px 0; }
.cust-row { display:flex; justify-content:space-between; align-items:center; gap:8px;
  padding:5px 0; font-size:13px; }
a.cust-row { padding:7px 9px; margin:2px -9px; border-radius:var(--radius-sm); color:var(--text); }
a.cust-row:hover { background:var(--panel2); text-decoration:none; }
a.cust-row span:nth-child(2) { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cust-orders-label { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  font-weight:600; margin:16px 0 7px; }
.cust-order { border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:9px 11px; margin-bottom:8px; background:var(--panel2); }
.cust-order-top { display:flex; justify-content:space-between; font-size:13px; }
.cust-order-name { font-weight:600; }
.cust-order-items { font-size:12px; margin:3px 0; }
.cust-order-meta { font-size:12px; }

/* new-reply banner — customer wrote back and we haven't answered */
.newreply-banner { display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:16px 28px 0; padding:12px 16px; border:1px solid #bcd0ff;
  background:#eef3ff; border-radius:10px; color:#1d4ed8; }
.newreply-banner .newreply-text { display:flex; flex-direction:column; gap:2px; }
.newreply-banner .newreply-text strong { font-size:14px; }
.newreply-banner .newreply-text .muted { font-size:12px; }

/* spam banner + chips */
.spam-banner { margin:16px 28px 0; padding:12px 16px; border:1px solid #ddd6fe;
  background:#f5f3ff; border-radius:10px; color:#5b21b6; }
.spam-banner-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.spam-banner .spam-why { margin-top:6px; color:#7c5cbf; font-size:12px; }
.spam-banner .spam-reasons { margin:6px 0 0; padding-left:18px; font-size:12px; color:#7c5cbf; }
.spam-banner .spam-reasons li { margin:1px 0; }
.spam-chip { position:relative; display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px;
  font-size:11px; font-weight:600; background:var(--panel2); color:var(--muted); vertical-align:middle; cursor:help; }
.spam-chip-hot { background:#f3e8ff; color:#7c3aed; }
/* Reliable CSS hover tooltip (the native title= is flaky). */
.spam-chip[data-tip]:hover::after { content:attr(data-tip); position:absolute; left:0; top:130%;
  z-index:20; white-space:normal; width:max-content; max-width:340px; padding:7px 10px;
  background:#1f2733; color:#fff; font-weight:400; font-size:12px; line-height:1.4;
  border-radius:7px; box-shadow:0 4px 14px rgba(16,24,40,.18); pointer-events:none; }
.spam-mark { color:#7c3aed; border-color:#e9d5ff; }
.spam-mark:hover { background:#f5f3ff; }

/* AI (Hermes) draft panel — primary content of the right assist rail */
.ai-draft { border:1px solid #ddd6fe; background:#faf9ff; border-radius:12px; padding:14px 14px; margin-bottom:12px; }
.ai-draft-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px;
  color:#5b21b6; font-size:15px; }
.ai-draft-text { width:100%; padding:12px; font:inherit; font-size:14px; line-height:1.55; min-height:260px;
  border:1px solid var(--border); border-radius:8px; background:#fff; color:var(--text); resize:vertical; }
.ai-draft-actions { display:flex; align-items:center; gap:12px; margin-top:8px; }
/* Live AI activity feed (compose + ticket draft) */
.aifeed { margin:10px 0; padding:10px 12px; background:#0f1021; color:#cbd5e1; border-radius:10px;
  border:1px solid #2a2c44; font-size:12.5px; }
.aifeed-head { font-weight:600; color:#a5b4fc; margin-bottom:6px; }
.aifeed-timer { color:#818cf8; font-variant-numeric:tabular-nums; }
.aifeed-log { max-height:160px; overflow-y:auto; display:flex; flex-direction:column; gap:3px; }
.aifeed-line { line-height:1.45; white-space:pre-wrap; word-break:break-word; }
.aifeed-line.thought { color:#94a3b8; }
.aifeed-line.tool { color:#fcd34d; }
.aifeed-line.writing { color:#86efac; font-weight:600; }
.aifeed-line.err { color:#fca5a5; }
.aifeed-done { font-weight:600; color:#15803d; }
.aifeed-done.err { color:#b91c1c; }
/* image attach (reply + compose) */
.img-attach { margin:10px 0 2px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.img-attach-btn { cursor:pointer; margin:0; }
.img-attach .hint { font-size:11.5px; }
.img-chips { display:flex; gap:8px; flex-wrap:wrap; width:100%; }
.img-chip { position:relative; display:flex; align-items:center; gap:6px; padding:5px 8px;
  background:var(--panel2, #f3f4f6); border:1px solid var(--border); border-radius:8px; font-size:12px; max-width:220px; }
.img-chip-thumb { width:34px; height:34px; object-fit:cover; border-radius:5px; background:#e5e7eb; flex-shrink:0; }
.img-chip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:110px; }
.img-chip-status { color:var(--muted); font-size:11px; }
.img-chip-status.err { color:#b91c1c; }
.img-chip-x { border:none; background:none; color:var(--muted); cursor:pointer; font-size:13px; line-height:1; padding:2px 4px; }
.img-chip-x:hover { color:#b91c1c; }
.ai-used-instruct { margin-bottom:8px; padding:8px 10px; font-size:12.5px; line-height:1.5;
  background:#f3f0ff; border:1px solid #ddd6fe; border-radius:var(--radius-sm); color:#4a4458;
  white-space:pre-wrap; word-break:break-word; }
.ai-instruct { margin-top:12px; padding-top:12px; border-top:1px dashed #ddd6fe; }
.ai-instruct-label { font-size:12px; margin-bottom:6px; }
.ai-instruct-box { width:100%; padding:10px 12px; font-family:inherit; font-size:13px;
  line-height:1.55; min-height:96px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:#fff; color:var(--text); resize:vertical; margin-bottom:8px; }
.ai-instruct-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* composer */
.composer { border-top:1px solid var(--border); padding:14px 28px 22px; background:var(--panel); }
.composer-tabs { display:flex; gap:10px; margin-bottom:10px; }
.composer-tabs .tab { background:none; border:none; color:var(--muted); cursor:pointer;
  padding:5px 2px; font-size:13px; border-bottom:2px solid transparent; }
.composer-tabs .tab.active { color:var(--text); border-bottom-color:var(--link); font-weight:600; }
.rt-toolbar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.rt-btn { background:var(--panel); border:1px solid var(--border); border-radius:6px;
  padding:4px 9px; font-size:13px; cursor:pointer; color:var(--text); line-height:1; min-width:30px; }
.rt-btn:hover { background:var(--panel2); border-color:#d8d1c7; }
.rt-hint { font-size:11px; margin-left:4px; }
.composer-form textarea { width:100%; padding:11px; resize:vertical;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.6; color:#222;
  border:1px solid var(--border); border-radius:8px; background:#fff; }
#tg-reply-body { min-height:300px; }
.composer-form select { padding:5px 8px; border:1px solid var(--border); border-radius:6px; background:#fff; }
.fwd-to { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:8px; }
.fwd-to input { flex:1; max-width:360px; padding:8px 11px; font-size:14px; border:1px solid var(--border);
  border-radius:7px; background:#fff; color:var(--text); }
.composer-macro { margin-bottom:8px; }
.composer-actions { display:flex; align-items:center; gap:14px; margin-top:10px; }
.composer-actions label { font-size:13px; color:var(--muted); }
/* auto-signature preview under the reply box */
.sig-preview { margin-top:8px; }
.sig-preview > summary { cursor:pointer; font-size:12px; list-style:none; padding:4px 0; }
.sig-preview > summary::-webkit-details-marker { display:none; }
.sig-preview > summary:hover { color:var(--text); }
.sig-note { font-size:12px; margin:4px 0 8px; }
.sig-frame { width:100%; max-width:560px; height:240px; border:1px dashed var(--border);
  border-radius:var(--radius-sm); background:#fff; display:block; }
.sig-test-wrap { margin-top:10px; }
.sig-test { display:flex; gap:8px; align-items:center; max-width:560px; margin:0; }
.sig-test input { flex:1; padding:7px 10px; font-size:13px; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:#fff; color:var(--text); }

/* buttons */
.btn { background:var(--panel); color:var(--text); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:7px 14px; cursor:pointer; font-size:13px; font-weight:600;
  box-shadow:0 1px 1px rgba(45,36,24,.04); }
.btn:hover { background:var(--panel2); border-color:#d8d1c7; }
.btn-primary { background:var(--link); color:#fff; border-color:transparent;
  box-shadow:0 1px 2px rgba(37,99,235,.35); }
.btn-primary:hover { background:#1d4ed8; }
.btn-danger { background:var(--open); color:#fff; border-color:transparent;
  box-shadow:0 1px 2px rgba(220,38,38,.30); }
.btn-danger:hover { background:#b91c1c; }
.btn-sm { padding:4px 11px; font-size:12px; }
.composer-actions .btn-primary { margin-left:auto; }

/* send-preview page (under /view, relaxed CSP so the logo loads) */
.preview-bar { position:sticky; top:0; z-index:10; display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap; padding:12px 20px;
  background:var(--panel); border-bottom:1px solid var(--border); box-shadow:var(--shadow); }
.preview-meta { display:flex; flex-direction:column; gap:2px; font-size:13px; }
.preview-meta .muted { font-size:12px; }
.preview-actions { display:flex; align-items:center; gap:10px; }
.preview-stage { padding:24px; display:flex; justify-content:center; background:var(--bg);
  min-height:calc(100vh - 60px); }
.preview-frame { width:100%; max-width:680px; min-height:78vh; border:1px solid var(--border);
  border-radius:var(--radius); background:#fff; box-shadow:var(--shadow-lg); }

/* admin pages */
.admin-wrap { padding:24px 32px; max-width:920px; }
.admin-wrap h2 { margin:8px 0 6px; }
.form-stack { display:flex; flex-direction:column; gap:12px; max-width:620px; }
.form-stack label { font-size:13px; color:var(--text); }
.form-stack input[type=text], .form-stack textarea, .form-stack select {
  width:100%; padding:8px 10px; font-size:13px; border:1px solid var(--border);
  border-radius:6px; background:#fff; color:var(--text); margin-top:4px; }
.form-stack textarea { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.toolbar { margin-bottom:14px; }
.hidden { display:none; }
/* landing / root */
.landing { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(1200px 600px at 70% -10%,#fdeede 0%,transparent 60%),
    linear-gradient(135deg,#f7f5f1 0%,#efece6 100%); }
.landing-card { background:var(--panel); border:1px solid var(--border); border-radius:20px;
  box-shadow:var(--shadow-lg); padding:48px 56px; text-align:center; max-width:380px; }
.landing-logo { display:flex; justify-content:center; margin-bottom:20px; }
.landing-logo .dot { width:60px; height:60px; border-radius:18px;
  background:var(--accent-grad); display:inline-block; box-shadow:0 8px 22px rgba(224,69,123,.30); }
.landing-card h1 { margin:0 0 4px; font-size:24px; letter-spacing:-.02em; }
.landing-btn { display:inline-block; margin-top:28px; text-decoration:none;
  padding:11px 28px; font-size:15px; }
.landing-btn:hover { text-decoration:none; }
.cust-empty { font-size:12px; }
.hint { font-size:12px; }
.mt { margin-top:20px; }
.inline-form { margin:0; }
.mono-pad { padding-left:20px; }
/* one-click triage button bar (web parity with the Lark card) */
.triage-bar { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.triage-bar .inline-form { display:inline-flex; }
.triage-bar .tlabel { font-size:12px; color:var(--muted); margin-right:4px; font-weight:600; }
.triage-bar .tg-suggested { outline:2px solid #f59e0b; outline-offset:1px; box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.triage-detail { padding:10px 16px; border-bottom:1px solid var(--border); background:var(--panel2); }
.triage-row td { padding:6px 12px 10px !important; background:var(--panel2); }