:root {
  --bg:#0f172a; --card:#1e293b; --ink:#e2e8f0; --accent:#3b82f6; --link:#93c5fd;
  --err:#f87171; --ok:#4ade80; --muted:#94a3b8; --border:#334155; --sidebar:#0b1220;
}
* { box-sizing: border-box; }
body {
  font-family: system-ui, sans-serif; background: var(--bg); color: var(--ink);
  margin: 0; min-height: 100vh; display: flex;
}
/* Login / standalone screens: centered card, no sidebar. */
body.login { display: grid; place-items: center; }
/* Auth-card links (sign in / forgot / register) — otherwise they fall back to the
   browser's default dark blue, which is unreadable on the dark card. */
body.login a { color: var(--link); }
body.login a:hover { text-decoration: underline; }

/* ---- Left sidebar navigation ---- */
nav.top {
  background: var(--sidebar); width: 220px; flex-shrink: 0; min-height: 100vh;
  padding: 16px 12px; display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--border);
}
nav.top a {
  display: flex; align-items: center; gap: 10px;
  color: var(--muted); text-decoration: none; padding: 9px 12px; border-radius: 8px;
  font-size: 14px; line-height: 1.2;
}
.nav-ico { width: 18px; height: 18px; flex-shrink: 0; }
nav.top .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav.top a:hover { background: rgba(255,255,255,.06); color: var(--ink); }
nav.top a.active { background: rgba(96,165,250,.14); color: #fff; }
nav.top a.nav-right { margin-top: auto; color: var(--muted); } /* pin sign-out to bottom */
nav.top a.nav-right:hover { color: var(--err); }

/* Super-admin impersonation banner (staff/_nav.php) — shown only while viewing as another tenant. */
.impersonation-banner { background:#b45309; color:#fff; padding:8px 14px; display:flex; align-items:center; gap:12px; font-size:14px; }
.impersonation-banner .linkbtn { color:#fff; text-decoration:underline; }

/* Collapsible tool groups (native <details>, no JS). */
nav.top details.navgrp { display: flex; flex-direction: column; gap: 2px; }
nav.top summary {
  list-style: none; cursor: pointer; color: var(--ink); font-size: 14px; font-weight: 550;
  padding: 9px 12px; border-radius: 8px; display: flex; align-items: center; gap: 10px;
}
nav.top summary::-webkit-details-marker { display: none; }
nav.top summary::after { content: "\25B8"; font-size: 11px; color: var(--muted); transition: transform .15s; }
nav.top details[open] > summary::after { transform: rotate(90deg); }
nav.top summary:hover { background: rgba(255,255,255,.06); }
nav.top details.navgrp a { padding-left: 26px; font-size: 13px; } /* indent children */

/* ---- Main content ---- */
.wrap { flex: 1; max-width: 960px; margin: 28px auto; padding: 0 24px; min-width: 0; }
/* Content links readable on the dark background (was browser-default navy). */
.wrap a:not(.tile):not(.btn) { color: var(--link); }
.wrap a:not(.tile):not(.btn):hover { text-decoration: underline; }
h1 { font-weight: 650; }
h1 small { color: var(--muted); font-weight: 400; }

/* ---- Cards & forms ---- */
.card {
  background: var(--card); padding: 24px; border-radius: 12px;
  border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.4);
  margin-bottom: 16px;
}
body.login .card { width: min(420px, 92vw); }
.card label { display: block; margin: 12px 0; font-size: 14px; }
.card input, .card textarea, .card select {
  width: 100%; padding: 9px 10px; margin-top: 4px;
  background: #0f172a; color: var(--ink);
  border: 1px solid var(--border); border-radius: 7px; font: inherit;
}
.card input:focus, .card textarea:focus, .card select:focus {
  outline: none; border-color: var(--accent);
}
.card input[readonly] { color: var(--muted); }
.card input[type=checkbox] { width: auto; margin: 0; }
.card h2 { font-size: 18px; margin-top: 0; }
.check { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.zipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 2px 16px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 14px; }
.zipgrid .check { margin: 4px 0; font-size: 13px; }
.check input { margin-top: 0; }
form.inline { display: inline; }
button, .card button {
  background: var(--accent); color: #fff; border: 0; padding: 10px 16px;
  border-radius: 7px; cursor: pointer; font: inherit; font-weight: 550;
}
button:hover { filter: brightness(1.08); }

/* Card action row: primary button right, de-emphasized link beside it. */
.card-actions { display: flex; justify-content: flex-end; align-items: center; gap: 18px; margin-top: 16px; }
a.btn, .card-actions a.btn { display: inline-block; background: var(--accent); color: #fff; padding: 9px 18px; border-radius: 7px; text-decoration: none; font-weight: 550; font-size: 14px; }
a.btn:hover, .card-actions a.btn:hover { filter: brightness(1.08); color: #fff; }
.linkbtn, .card .linkbtn { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
.linkbtn:hover, .card .linkbtn:hover { color: var(--err); text-decoration: underline; filter: none; }
.col-action { text-align: right; white-space: nowrap; }
.col-action a.btn { padding: 5px 12px; font-size: 13px; }
.sorth { color: var(--muted); text-decoration: none; }
.sorth.active { color: var(--ink); }
.ideas-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.modal { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.6); overflow-y: auto; }
.modal.open { display: block; }
.modal-box { width: min(560px, 92vw); margin: 48px auto; position: relative; }
.modal-close { position: absolute; top: 10px; right: 16px; color: var(--muted); text-decoration: none; font-size: 24px; line-height: 1; }
.modal-close:hover { color: var(--ink); }
.idea-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.idea { display: flex; align-items: flex-start; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.idea.dragging { opacity: .45; }
.idea-grip { color: var(--muted); font-size: 18px; line-height: 1.4; cursor: grab; user-select: none; touch-action: none; padding: 2px 4px; margin: -2px -2px 0 -4px; }
.idea.dragging .idea-grip { cursor: grabbing; }
.idea-body { flex: 1; min-width: 0; }
.idea-title { font-weight: 600; font-size: 15px; }
.idea-meta { margin-left: 8px; font-weight: 400; font-size: 12px; color: var(--muted); }
.idea-status { margin-left: 8px; font-size: 12px; }
.idea-desc { margin-top: 5px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.idea-actions { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.idea-actions a.btn { padding: 5px 12px; font-size: 13px; }

/* ---- Tables (conversations / leads) ---- */
table.card { width: 100%; border-collapse: collapse; padding: 0; overflow: hidden; }
table.card th, table.card td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 14px;
}
table.card th { background: rgba(255,255,255,.03); color: var(--muted); font-weight: 600; }
table.card tr:last-child td { border-bottom: 0; }
table.card a { color: var(--link); text-decoration: none; }

/* ---- Code / snippet blocks ---- */
pre.card { overflow-x: auto; }
/* Question/reply text must wrap inside its card, not overflow the box. */
.card pre:not(.card) { white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0; }
pre.card code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: var(--ink); }

/* ---- Dashboard tiles ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.tile {
  display: flex; flex-direction: column; gap: 6px; background: var(--card);
  padding: 18px; border-radius: 12px; border: 1px solid var(--border);
  text-decoration: none; color: var(--ink);
}
.tile:hover { border-color: var(--accent); }
.tile-name { font-weight: 600; }
.tile-desc { font-size: 14px; color: var(--muted); }

/* ---- Status / helper text ---- */
.switch { display: block; margin: 10px 0; }
.switch span { display: block; font-size: 14px; }
.err { color: var(--err); }
.muted { color: var(--muted); }
.toggle-on { color: var(--ok); font-weight: 600; }
.toggle-off { color: var(--muted); }
.toggle-bad { color: var(--err); font-weight: 600; }
.notice { color: var(--ok); }

/* ---- Section tabs (Knowledge page) ---- */
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 14px 0 22px; border-bottom: 1px solid var(--border); }
.tab {
  padding: 9px 16px; font-size: 14px; color: var(--muted); text-decoration: none;
  border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab.active { color: var(--ink); font-weight: 600; background: var(--sidebar); border-color: var(--border); }

/* ---- Test (email simulator: tight labeled transcript, not bubbles) ---- */
.sim-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.api-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.apitog { width: 44px; height: 24px; border-radius: 12px; border: none; cursor: pointer; padding: 0; position: relative; }
.apitog.off { background: var(--border); }
.apitog.on  { background: var(--ok); }
.apitog .knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.apitog.on .knob { left: 22px; }
.switch-state { font-size: 13px; color: var(--muted); }

.composer { display: flex; align-items: flex-end; gap: 8px; background: #0f172a; border: 1px solid var(--border); border-radius: 10px; padding: 6px 6px 6px 12px; }
.composer textarea { flex: 1; background: transparent; border: none; resize: vertical; color: var(--ink); font: inherit; padding: 6px 0; line-height: 1.45; }
.composer textarea:focus { outline: none; }
.composer-new { margin: 14px 0 22px; }
.send { flex: none; width: 30px; height: 30px; border-radius: 8px; border: none; background: var(--accent); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; }
.send:hover { filter: brightness(1.12); }

.thread { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 6px 18px 16px; }
.thread-del { position: absolute; top: 8px; right: 10px; }
.thread-del button { background: none; border: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; }
.thread-del button:hover { color: var(--err); }

.turn { padding: 11px 0; border-top: 1px solid var(--border); }
.turn:first-child { border-top: none; }
.turn-who { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 4px; }
.turn-biz > .turn-who, .turn-who.turn-biz { color: var(--ok); }
.turn-body { font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.turn-body.muted { color: var(--muted); font-style: italic; }
.reply-block { margin-top: 14px; }
.reply-block .turn-who { margin-bottom: 5px; }

.olders { margin-top: 28px; }
.olders h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; }
.orow { border: 1px solid var(--border); border-radius: 8px; background: var(--card); margin-bottom: 6px; }
.orow > summary { display: flex; align-items: center; gap: 12px; padding: 9px 12px; cursor: pointer; list-style: none; }
.orow > summary::-webkit-details-marker { display: none; }
.orow-snip { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.orow-date { color: var(--muted); font-size: 12px; }
.orow-open { font-size: 12px; color: var(--link); }
.orow .transcript { padding: 0 14px; }
.orow-delform { padding: 6px 14px 12px; }
.orow-delform button { font-size: 12px; }

.busy-overlay { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(15,23,42,.62); align-items: center; justify-content: center; }
body.busy .busy-overlay { display: flex; }
.busy-box { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--ink); font-size: 14px; }
.spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Test/Preview: mode toggle + pending manual answers ---- */
.mode-row { border: 1px solid var(--border); border-radius: 8px; margin: 12px 0; padding: 8px 12px; }
.mode-row legend { font-size: 13px; color: var(--muted); padding: 0 4px; }
.mode-opt { display: block; margin: 6px 0; font-size: 14px; }
.mode-opt input[type=radio] { width: auto; margin: 0 8px 0 0; }
.pending .pending-meta { font-size: 13px; color: var(--muted); margin: 0 0 8px; }

/* ---- Conversation history: compact rows that expand (<details>) ---- */
.conv-list { padding: 0; }
.conv { border-bottom: 1px solid var(--border); }
.conv:last-child { border-bottom: 0; }
.conv-row {
  cursor: pointer; list-style: none;
  display: grid; grid-template-columns: 120px 56px minmax(0,1fr) minmax(0,1.4fr) auto;
  gap: 12px; align-items: center; padding: 10px 14px; font-size: 14px;
}
.conv-row::-webkit-details-marker { display: none; }
.conv[open] > .conv-row { background: var(--sidebar); }
.conv-date { color: var(--muted); font-size: 13px; }
.conv-badge {
  font-size: 11px; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border); border-radius: 4px; padding: 1px 0; text-align: center;
}
.conv-from, .conv-subj { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-status { font-size: 12px; white-space: nowrap; }
.conv-pending { color: #fbbf24; font-weight: 600; }
.conv-delete { margin-top: 16px; }

/* ---- Inbox reader (responder Log): threaded, email-client style ---- */
.inbox { padding: 0; }
.inbox-views { display: flex; gap: 18px; margin: 0 0 16px; }
.inbox-views a { color: var(--muted); text-decoration: none; font-size: 14px; }
.inbox-views a.active { color: var(--ink); font-weight: 600; }
.inbox-spam-head { margin-top: 30px; }
.mail-archive { padding: 8px 16px 0; text-align: right; }
.mail { border-bottom: 1px solid var(--border); }
.mail:last-child { border-bottom: 0; }
.mail-row {
  cursor: pointer; list-style: none;
  display: grid; grid-template-columns: 190px minmax(0,1fr) 130px auto;
  gap: 12px; align-items: center; padding: 11px 14px; font-size: 14px;
}
.mail-row::-webkit-details-marker { display: none; }
.mail[open] > .mail-row { background: var(--sidebar); }
.mail-from { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-subj { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-date { color: var(--muted); font-size: 13px; }
.mail-status { font-size: 12px; white-space: nowrap; }
.mail-thread { padding: 4px 14px 16px; }
.msg { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.msg-bot { background: var(--sidebar); }
.msg-meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font: inherit; }
.msg-subj { margin: 0 0 6px; }
.mail-err { color: var(--err); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .mail-row { grid-template-columns: 1fr auto; }
  .mail-subj, .mail-date { display: none; }
}
.conv-body { padding: 2px 14px 16px; }
.conv-body h4 { margin: 14px 0 4px; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .conv-row { grid-template-columns: 1fr 52px auto; }
  .conv-subj { display: none; }
}

/* Responsive: collapse sidebar to a top strip on narrow screens. */
@media (max-width: 640px) {
  body { display: block; }
  nav.top {
    width: auto; min-height: 0; flex-direction: row; flex-wrap: wrap;
    border-right: 0; border-bottom: 1px solid var(--border);
  }
  nav.top a.nav-right { margin-top: 0; margin-left: auto; }
  .wrap { margin: 20px auto; }
}

/* ---- Unified inbox pages (inbox/*, contacts/*) ---- */
/* All classes are prefixed .ib- to avoid collisions with the responder log. */
.ib-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.ib-filter input[type="search"] { flex: 1; min-width: 160px; }
.ib-contact-panel label { display: block; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.ib-contact-panel label select, .ib-contact-panel label textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; }
.ib-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.ib-tab { padding: 8px 14px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.ib-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.ib-views { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ib-viewpill { padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); text-decoration: none; font-size: 13px; }
.ib-viewpill.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.ib-viewpill-n { display: inline-block; min-width: 16px; padding: 0 5px; margin-left: 5px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; vertical-align: middle; }
.ib-viewpill.active .ib-viewpill-n { background: #fff; color: var(--accent); }
.ib-conv-list { list-style: none; padding: 0; margin: 0; }
.ib-conv-row a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--ink); }
.ib-conv-row.unread a { background: rgba(96,165,250,.06); }
.ib-conv-who { font-weight: 600; min-width: 130px; }
.ib-conv-chan { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.ib-conv-sum { color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-conv-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ib-pri { font-size: 11px; padding: 1px 7px; border-radius: 999px; text-transform: uppercase; }
.ib-pri-hot { background: #7f1d1d; color: #fecaca; }
.ib-pri-normal { background: #334155; color: #cbd5e1; }
.ib-pri-low { background: #1e293b; color: #94a3b8; }
.ib-conv-main { display: flex; gap: 18px; align-items: flex-start; }
.ib-conv-thread { flex: 1; min-width: 0; }
.ib-contact-panel { width: 240px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px; flex-shrink: 0; }
.ib-msg { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.ib-msg-contact { background: var(--card); }
.ib-msg-staff, .ib-msg-bot { background: rgba(96,165,250,.06); }
.ib-msg-sum { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; }
.ib-msg-sum::-webkit-details-marker { display: none; }
.ib-msg-sum::before { content: "\25B8"; color: var(--muted); font-size: 10px; flex-shrink: 0; transition: transform .12s; }
.ib-msg[open] > .ib-msg-sum::before { transform: rotate(90deg); }
.ib-msg[open] > .ib-msg-sum { border-bottom: 1px solid var(--border); }
.ib-msg-who { font-weight: 600; font-size: 13px; flex-shrink: 0; }
.ib-msg-time { color: var(--muted); font-size: 11px; flex-shrink: 0; }
.ib-msg-snip { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.ib-msg[open] > .ib-msg-sum .ib-msg-snip { display: none; }
.ib-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; padding: 10px 12px; }

/* Inbox header: search + planned channel tabs */
.ib-search { flex: 1; max-width: 420px; }
.ib-search input[type="search"] { width: 100%; background: #0f172a; color: var(--ink); border: 1px solid var(--border); border-radius: 8px; font: inherit; padding: 8px 12px; }
.ib-search input[type="search"]:focus { outline: none; border-color: var(--accent); }
.ib-refresh { align-self: center; margin-left: auto; flex: 0 0 auto; background: var(--card); color: var(--ink); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; padding: 5px 10px; }
.ib-refresh:hover { border-color: var(--accent); }
.ib-refresh:active { transform: rotate(180deg); transition: transform .3s; }
/* New-reply indicators in the reader's "earlier conversations" */
.ib-new-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.ib-new-tag { flex: 0 0 auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--accent); border-radius: 6px; padding: 1px 6px; }
.ib-pastconv.unread { border-color: var(--accent); }
.ib-earlier-toggle.has-new { color: var(--accent); font-weight: 600; }
.ib-tab.ib-tab-soon { color: var(--muted); opacity: .45; cursor: default; border-bottom-color: transparent; }
.ib-tab.ib-tab-soon::after { content: " · soon"; font-size: 10px; }

/* "N earlier messages" history fold */
.ib-earlier { margin-bottom: 8px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.02); }
.ib-earlier > summary { list-style: none; cursor: pointer; padding: 9px 12px; color: var(--link); font-size: 13px; }
.ib-earlier > summary::-webkit-details-marker { display: none; }
.ib-earlier > summary::before { content: "\25B8 "; color: var(--muted); }
.ib-earlier[open] > summary::before { content: "\25BE "; }
.ib-earlier > .ib-msg { margin: 0 8px 8px; }
.ib-earlier > summary + .ib-msg { margin-top: 8px; }

/* Quoted reply chain, hidden behind a "…" pill */
.ib-quote { margin-top: 8px; }
.ib-quote > summary { list-style: none; cursor: pointer; color: var(--muted); display: inline-block; padding: 0 9px 2px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; line-height: 1; }
.ib-quote > summary::-webkit-details-marker { display: none; }
.ib-quote-body { color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; margin-top: 8px; border-left: 2px solid var(--border); padding-left: 10px; }

/* Reader links — the full-width inbox isn't covered by the .wrap link color */
.ib-read-back, .ib-read-contact { color: var(--link); text-decoration: none; }
.ib-read-back:hover, .ib-read-contact:hover { text-decoration: underline; }

/* Sticky Reply / Forward action bar (pinned at the bottom of the reader) */
.ib-actions { flex-shrink: 0; margin-top: auto; position: sticky; bottom: 0; z-index: 2; background: var(--bg); display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 0 8px; border-top: 1px solid var(--border); }
.ib-earlier-toggle { margin-right: auto; background: none; border: none; color: var(--link); cursor: pointer; font: inherit; font-size: 13px; padding: 6px 4px; }
.ib-earlier-toggle::before { content: "\25B8 "; color: var(--muted); }
.ib-earlier-toggle.open::before { content: "\25BE "; }
/* PWA "Add to Home Screen" hint (iOS) */
.pwa-hint { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--ink); font-size: 14px; line-height: 1.4; box-shadow: 0 6px 22px rgba(0,0,0,.45); }
.pwa-hint button { margin-left: auto; flex: 0 0 auto; background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 2px; }

.ib-earlier-block { margin-top: 8px; }
.ib-earlier-head { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; margin: 2px 0 10px; }
/* Thread count on a contact row in the list */
.ib-conv-count { font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 9px; padding: 0 7px; line-height: 16px; }
/* Primary (latest) conversation block in the reader */
.ib-read-conv { margin-top: 4px; }
.ib-read-subject { font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
/* A past conversation, collapsed by default, inside the "earlier conversations" block */
.ib-pastconv { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; background: var(--card); }
.ib-pastconv-sum { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; }
.ib-pastconv-sum::-webkit-details-marker { display: none; }
.ib-pastconv-sum::before { content: "\25B8"; color: var(--muted); }
.ib-pastconv[open] > .ib-pastconv-sum::before { content: "\25BE"; }
.ib-pastconv-subj { flex: 1 1 auto; color: var(--ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ib-pastconv-time { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.ib-pastconv-body { padding: 0 12px 10px; }
.ib-compose { flex: 0 0 auto; }
.ib-compose[open] { flex: 1 1 100%; }
.ib-compose-btn { list-style: none; cursor: pointer; display: inline-block; padding: 8px 18px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; }
.ib-compose-btn::-webkit-details-marker { display: none; }
.ib-compose-2 .ib-compose-btn { background: var(--card); color: var(--ink); border: 1px solid var(--border); }
.ib-compose-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ib-compose-form textarea, .ib-compose-form input[type="email"] { width: 100%; background: #0f172a; color: var(--ink); border: 1px solid var(--border); border-radius: 8px; font: inherit; padding: 9px 10px; }
.ib-compose-form textarea:focus, .ib-compose-form input[type="email"]:focus { outline: none; border-color: var(--accent); }
.ib-compose-form button { align-self: flex-start; }
.ib-reply-form textarea { width: 100%; box-sizing: border-box; }
.ib-reply-form textarea,
.ib-contact-panel textarea,
.ib-contact-panel select,
.ib-filter input,
.ib-filter select {
  background: #0f172a; color: var(--ink);
  border: 1px solid var(--border); border-radius: 7px;
  font: inherit; padding: 9px 10px;
}
.ib-reply-form textarea:focus,
.ib-contact-panel textarea:focus,
.ib-contact-panel select:focus,
.ib-filter input:focus,
.ib-filter select:focus {
  outline: none; border-color: var(--accent);
}
@media (max-width: 640px) {
  .ib-conv-main { flex-direction: column; }
  .ib-contact-panel { width: 100%; }
  .ib-conv-sum { display: none; }
}

/* ---- Sidebar collapse (global) ---- */
.nav-toggle {
  position: fixed; top: 8px; left: 8px; z-index: 60;
  width: 36px; height: 36px; padding: 0;
  background: var(--card); color: var(--ink); border: 1px solid var(--border);
  border-radius: 8px; font-size: 17px; line-height: 1; cursor: pointer;
}
.nav-toggle:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
nav.top { padding-top: 52px; }            /* room for the fixed toggle */
/* Collapsed = a narrow icon rail (still usable), not hidden. */
body.nav-collapsed nav.top { width: 56px; padding-left: 8px; padding-right: 8px; }
body.nav-collapsed nav.top .nav-label { display: none; }
body.nav-collapsed nav.top summary::after { display: none; }
body.nav-collapsed nav.top a,
body.nav-collapsed nav.top summary { justify-content: center; gap: 0; padding-left: 6px; padding-right: 6px; }
body.nav-collapsed nav.top details.navgrp a { padding-left: 6px; }

/* ---- Full-bleed app container (Inbox two-pane reader) ---- */
.wrap-wide { flex: 1; min-width: 0; height: 100vh; display: flex; flex-direction: column; padding: 12px 16px; overflow: hidden; }
.ib-head { flex-shrink: 0; }
.ib-head h1 { margin: 0 0 8px; }
.ib-head-row { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }

.ib-split { flex: 1; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 14px; min-height: 0; margin-top: 10px; }
.ib-list-pane { min-height: 0; overflow-y: auto; overflow-x: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.ib-read-pane { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-left: 4px; }
.ib-list-empty { padding: 16px; }
.ib-read-back { display: none; }

/* List rows stacked inside the narrow pane (scoped so the contacts profile list is untouched) */
.ib-list-pane .ib-conv-list { list-style: none; margin: 0; padding: 0; }
.ib-list-pane .ib-conv-row a { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 11px 13px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--ink); min-width: 0; }
.ib-list-pane .ib-conv-row.active a { background: rgba(96,165,250,.14); }
.ib-list-pane .ib-conv-row.unread .ib-conv-who { font-weight: 700; }
.ib-conv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; }
.ib-conv-top .ib-conv-who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ib-conv-top .ib-conv-time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.ib-conv-meta { display: flex; gap: 6px; align-items: center; }
.ib-list-pane .ib-conv-sum { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* Read pane */
.ib-read-empty { margin: auto; text-align: center; padding: 40px; }
.ib-read-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.ib-read-who strong { font-size: 16px; }
.ib-read-who .muted { display: block; font-size: 13px; margin-top: 2px; }
.ib-read-side { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.ib-read-summary { margin: 8px 0 0; font-size: 13px; }
.ib-thread { flex: 1; padding: 12px 0; }
.ib-reply-form { flex-shrink: 0; }

@media (max-width: 880px) {
  .ib-split { grid-template-columns: 1fr; }
  .ib-split.has-open .ib-list-pane { display: none; }
  .ib-split.has-open .ib-read-back { display: inline-block; margin-bottom: 8px; }
  .ib-split:not(.has-open) .ib-read-pane { display: none; }
}