/* WAScope — utilitarian SaaS inbox.
   Palette: ink #1e2b26 · ground #f5f7f6 (green-biased neutral) · panel #ffffff
   accent #0f7a54 · accent-soft #e4f2ec · warn #d97706 · danger #dc2626 · info #2f6fdb */

:root {
  --ink: #1e2b26;
  --ink-soft: #5b6b64;
  --tick-grey: #667781;   /* WhatsApp's own receipt grey */
  --tick-read: #0a7cc7;
  --ground: #f5f7f6;
  --panel: #ffffff;
  --line: #e2e8e5;
  --accent: #0f7a54;
  --accent-soft: #e4f2ec;
  --warn: #d97706;
  --danger: #dc2626;
  --info: #2f6fdb;
  --note: #fdf3d0;
  --radius: 8px;
  font-size: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--ground);
  overflow: hidden;
}
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
input, select, textarea { font: inherit; color: var(--ink); }

#app { display: flex; flex-direction: column; height: 100vh; }

/* ---------- top bar ---------- */
#topbar {
  height: 50px; flex: 0 0 50px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.brand-dot { color: var(--accent); margin: 0 6px; }
.brand-sub { font-weight: 400; color: var(--ink-soft); font-size: 13px; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.badge {
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent);
}
.plan-badge {
  padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--line); background: var(--ground); color: var(--ink-soft);
}
.plan-badge.free { background: var(--ground); color: var(--ink-soft); }
.plan-badge.starter { background: #e4effc; color: var(--info); border-color: #c8dcf7; }
.plan-badge.pro { background: var(--accent-soft); color: var(--accent); border-color: #c4e6d6; }
.plan-badge.trial { background: #fdf0e0; color: var(--warn); border-color: #f5ddb8; }
.plan-badge:hover { filter: brightness(0.97); }
.me-wrap { display: flex; align-items: center; gap: 8px; }
.me-name { font-size: 13px; font-weight: 600; }
.me-label { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.status-pill {
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
  background: var(--panel); font-size: 12px; font-weight: 600;
}
.status-pill.online { color: var(--accent); border-color: var(--accent); }
.status-pill.offline { color: var(--ink-soft); }
.icon-btn { background: none; border: none; font-size: 16px; position: relative; padding: 4px; }
.notif-wrap { position: relative; }
.notif-count {
  position: absolute; top: -2px; right: -4px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  border-radius: 999px; padding: 1px 5px;
}
.notif-panel {
  position: absolute; right: 0; top: 32px; width: 340px; max-height: 380px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(30, 43, 38, 0.12); z-index: 60; padding: 6px;
}
.notif-item { padding: 8px 10px; border-radius: 6px; font-size: 13px; line-height: 1.4; }
.notif-item:hover { background: var(--ground); }
.notif-item.unread { background: var(--accent-soft); }
.notif-item .when { color: var(--ink-soft); font-size: 11px; }
.hidden { display: none !important; }

/* ---------- layout ---------- */
#main { flex: 1; display: flex; min-height: 0; }
#rail {
  flex: 0 0 54px; display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding-top: 12px;
  background: var(--panel); border-right: 1px solid var(--line);
}
.rail-btn {
  width: 40px; height: 40px; border: none; background: none; border-radius: 10px;
  font-size: 18px; display: grid; place-items: center;
}
.rail-btn:hover { background: var(--ground); }
.rail-btn.active { background: var(--accent-soft); }
.rail-gear { margin-top: auto; margin-bottom: 12px; }
#view { flex: 1; display: flex; min-width: 0; min-height: 0; }

/* ---------- inbox: chat list ---------- */
#chatlist {
  flex: 0 0 320px; width: 320px; min-width: 320px; max-width: 320px;
  display: flex; flex-direction: column; min-height: 0; position: relative;
  background: var(--panel); border-right: 1px solid var(--line);
}
.chatlist-head { padding: 12px 12px 8px; display: flex; flex-direction: column; gap: 8px; }
.chatlist-top { display: flex; align-items: center; justify-content: space-between; }
.chatlist-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.new-chat-btn {
  border: 1px solid var(--line); background: var(--panel); border-radius: 8px;
  width: 32px; height: 32px; display: grid; place-items: center; font-size: 15px;
}
.new-chat-btn:hover { background: var(--accent-soft); border-color: var(--accent); }

/* New-chat contact picker: slides over the chat list (WhatsApp left-panel UX) */
.newchat-panel {
  position: absolute; inset: 0; z-index: 6; background: var(--panel);
  display: flex; flex-direction: column; min-height: 0;
}
.newchat-panel.hidden { display: none; }
.newchat-top {
  display: flex; align-items: center; gap: 14px; flex: 0 0 auto;
  padding: 16px 14px; background: var(--accent); color: #fff;
}
.nc-back { border: none; background: none; color: #fff; font-size: 20px; line-height: 1; padding: 2px 4px; }
.newchat-title { font-size: 16px; font-weight: 700; }
.nc-searchwrap { padding: 8px 12px; }
.newchat-actions { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; }
.nc-action {
  display: flex; align-items: center; gap: 12px; text-align: left; border: none; background: none;
  padding: 9px 6px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.nc-action:hover { background: var(--ground); }
.nc-ico {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); font-size: 15px;
}
.nc-body { flex: 1; min-height: 0; display: flex; border-top: 1px solid var(--line); }
.nc-list { flex: 1; min-width: 0; overflow-y: auto; scrollbar-gutter: stable; }
/* Invite-by-number box (checks WhatsApp registration) */
.nc-invite-box { padding: 6px 12px 10px; border-bottom: 1px solid var(--line); }
.nc-invite-box.hidden { display: none; }
.nc-invite-row { display: flex; gap: 6px; }
.nc-invite-row .search-input { flex: 1; }
.nc-invite-result { margin-top: 8px; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nc-ok { color: var(--accent); font-weight: 600; }
.nc-warn { color: var(--danger); font-weight: 600; }
.nc-group { padding-top: 2px; }
.nc-letter {
  position: sticky; top: 0; background: var(--panel); z-index: 1;
  font-size: 12px; font-weight: 700; color: var(--accent); padding: 6px 6px 2px;
}
.nc-row {
  display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: 8px; cursor: pointer;
  /* Skip painting off-screen rows so a long list loads and scrolls smoothly. */
  content-visibility: auto; contain-intrinsic-size: auto 48px;
}
.nc-row:hover { background: var(--ground); }
.nc-row-body { display: flex; flex-direction: column; min-width: 0; }
.nc-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-num { font-size: 12px; color: var(--ink-soft); }
.nc-fresh { font-style: italic; opacity: 0.8; }
.nc-row-self .avatar { color: #fff; }
/* "Contacts not on WhatsApp" section */
.nc-section-head {
  position: sticky; top: 0; z-index: 1; background: var(--ground);
  font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: 0.04em; padding: 8px 12px; border-top: 1px solid var(--line);
}
.nc-off .nc-letter { color: var(--ink-soft); }
.nc-row-off { cursor: default; }
.nc-row-off .nc-row-body { flex: 1; }
.nc-invite-one { flex: 0 0 auto; }
.search-input {
  width: 100%; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--ground);
}
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip {
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); font-size: 12px; color: var(--ink-soft);
}
.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.phone-filter { font-size: 12px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; max-width: 110px; }
.bulk-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bulk-count { font-size: 12px; font-weight: 700; color: var(--accent); margin-right: 2px; }
.chat-check { align-self: center; accent-color: var(--accent); width: 15px; height: 15px; flex: 0 0 15px; }
/* Always show the scrollbar track (not just when the list overflows) so the rows
   never shift as search filters the list — the lane is reserved at all times,
   exactly like WhatsApp. overflow:scroll is honored on every browser; the
   scrollbar-gutter line is a modern belt-and-suspenders. */
.chat-items { flex: 1; overflow-y: scroll; scrollbar-gutter: stable; }
/* Thin, subtle scrollbar so the always-on track isn't a heavy grey bar. */
.chat-items::-webkit-scrollbar { width: 8px; }
.chat-items::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.chat-items::-webkit-scrollbar-track { background: transparent; }
.chat-items { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.chat-item {
  display: flex; gap: 10px; padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid var(--ground);
}
.chat-item:hover { background: var(--ground); }
.chat-item.active { background: var(--accent-soft); }
.avatar {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 14px;
}
.avatar-xs {
  display: inline-grid; width: 22px; height: 22px; flex: 0 0 22px; font-size: 9px;
  vertical-align: middle; margin-right: 4px;
}
.chat-item-body { flex: 1; min-width: 0; }
.chat-item-top { display: flex; align-items: baseline; gap: 6px; }
.chat-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-time { margin-left: auto; font-size: 11px; color: var(--ink-soft); flex: 0 0 auto; }
.chat-preview {
  font-size: 12.5px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.chat-item-meta { display: flex; align-items: center; gap: 5px; margin-top: 4px; flex-wrap: wrap; }
.mini-label { font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 999px; color: #fff; }
/* Access-label chips wrap within a bounded box so a member with many labels
   never stretches the Team row (was overflowing on both desktop and mobile). */
.mini-labels { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.team-table td[data-label="Access labels"] { max-width: 320px; }
.phone-tag { font-size: 10px; color: var(--ink-soft); border: 1px solid var(--line); padding: 1px 6px; border-radius: 4px; }
.unread-dot {
  margin-left: auto; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 1px 7px;
}
.sla-tag { font-size: 10px; font-weight: 700; color: var(--danger); }

/* ---------- inbox: conversation ---------- */
#conv { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--ground); }
.conv-head {
  height: 54px; flex: 0 0 54px; display: flex; align-items: center; gap: 10px;
  padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--line);
}
.conv-title { font-weight: 700; }
.conv-sub { font-size: 12px; color: var(--ink-soft); }
.conv-head-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.conv-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.msgs { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; }
/* WhatsApp-style "jump to latest" — appears when the reader has scrolled up; the
   badge counts messages that arrived while they were away. */
.jump-latest {
  position: absolute; right: 18px; bottom: 16px; z-index: 5;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-width: 40px; height: 40px; padding: 0 12px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: 0 4px 14px rgba(20, 28, 25, 0.22);
  font-size: 18px; font-weight: 700; cursor: pointer;
}
.jump-latest:hover { border-color: var(--accent); color: var(--accent); }
.jump-count {
  background: var(--accent); color: #fff; border-radius: 999px; padding: 0 6px;
  min-width: 18px; text-align: center; font-size: 11px; font-weight: 700; line-height: 18px;
}
/* Each message sits in a full-width row so hovering anywhere in the row (not
   just the bubble) reveals the reaction trigger, like WhatsApp. */
.msg-row { display: flex; width: 100%; }
.msg-row.out { justify-content: flex-end; }
.msg { max-width: 62%; position: relative; }
.msg.out { align-self: flex-end; }

/* WhatsApp-style reaction trigger: appears on message hover, in the gutter. */
.react-trigger {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel);
  box-shadow: 0 1px 5px rgba(0,0,0,.14); cursor: pointer;
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.msg:not(.out) .react-trigger { right: -38px; }
.msg.out .react-trigger { left: -38px; }
.msg-row:hover .react-trigger { opacity: 1; pointer-events: auto; }
.react-trigger { color: var(--ink-soft); }
.react-trigger svg { display: block; }
.react-trigger:hover { background: var(--ground); color: var(--accent); }

/* WhatsApp-style dropdown chevron in the bubble's top-right corner (hover). */
.msg-menu-btn {
  position: absolute; top: 2px; right: 3px; padding: 0;
  width: 24px; height: 22px; border: none; border-radius: 6px;
  background: transparent; color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .12s ease, background .12s ease;
}
.msg-menu-btn svg { display: block; }
.msg-row:hover .msg-menu-btn { opacity: .75; }
.msg-menu-btn:hover { opacity: 1; background: rgba(0, 0, 0, .07); }

/* Reaction picker popover (quick emojis + searchable grid) */
.react-pop { position: fixed; z-index: 95; background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: 0 10px 30px rgba(30,43,38,.20); padding: 5px 6px; }
.react-pop.hidden { display: none; }
.react-pop.searching { border-radius: 14px; }
.rp-quick { display: flex; align-items: center; gap: 3px; }
.rp-emoji { border: none; background: none; font-size: 22px; line-height: 1; padding: 4px 6px;
  border-radius: 10px; cursor: pointer; transition: transform .08s ease, background .1s ease; }
.rp-emoji:hover { background: var(--ground); transform: scale(1.25); }
.rp-emoji.on { background: var(--accent-soft); }
.rp-more { border: none; background: var(--ground); color: var(--ink-soft); border-radius: 50%;
  width: 32px; height: 32px; font-size: 18px; cursor: pointer; margin-left: 3px; }
.rp-more:hover { background: var(--line); }
.rp-search { width: 300px; padding: 4px; }
.rp-search input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px;
  margin-bottom: 6px; font: inherit; background: var(--ground); }
.rp-search input:focus { outline: none; border-color: var(--accent); background: var(--panel); }
.rp-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; max-height: 210px; overflow-y: auto; overflow-x: hidden; }
.rp-grid .rp-emoji { width: 100%; }
.rp-empty { padding: 16px; text-align: center; color: var(--ink-soft); font-size: 13px; grid-column: 1 / -1; }
.bubble {
  position: relative; padding: 8px 12px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line);
  line-height: 1.45; word-wrap: break-word; white-space: pre-wrap;
}
.msg.out .bubble { background: #dcf3e8; border-color: #c4e6d6; }
/* Clickable links in message text — readable on both the white incoming bubble
   and the green outgoing one; break long URLs so they never overflow. */
.msg-link { color: #027eb5; text-decoration: underline; word-break: break-word; }
.msg-link:hover { text-decoration: none; }
.msg.out .msg-link { color: #036a4e; }
.msg .bubble.auto { background: #eef2ff; border-color: #dfe6fb; }
.msg .bubble.note { background: var(--note); border-color: #f0dfa0; }
.msg-author { font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
/* Clickable @mention inside a message bubble → opens that person's chat. */
.mention { color: var(--accent); font-weight: 600; cursor: pointer; border-radius: 4px; padding: 0 1px; }
.mention:hover { text-decoration: underline; background: var(--accent-soft); }
.msg-meta { display: flex; gap: 6px; font-size: 10.5px; color: var(--ink-soft); margin-top: 3px; padding: 0 4px; }
.msg.out .msg-meta { justify-content: flex-end; }
.msg-flag { color: var(--danger); font-weight: 700; }
/* Reactions overlap the bubble's bottom edge. The bubble is position:relative
   (a positioned element) so it paints above static siblings — the chips must be
   positioned too, with a z-index, to sit ON TOP of the bubble, not behind it. */
.msg-reactions {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: -10px 0 2px; padding: 0 8px;
  position: relative; z-index: 1;
}
.msg.out .msg-reactions { justify-content: flex-end; }
.reaction {
  display: inline-flex; align-items: center; font-size: 12px; line-height: 1.5;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 7px; box-shadow: 0 1px 2px rgba(0,0,0,.12); cursor: default;
}
/* Group chats collapse reactions to distinct emoji(s) + a total count; the chip
   is a button that opens the member breakdown. */
.reaction-group { gap: 3px; cursor: pointer; font: inherit; color: inherit; }
.reaction-group:hover { background: var(--ground); }
.reaction-count { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.react-detail {
  position: fixed; z-index: 60; min-width: 150px; max-height: 240px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 6px;
}
.react-detail.hidden { display: none; }
.rd-head { font-size: 11px; color: var(--ink-soft); padding: 2px 8px 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.rd-row { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; }
.rd-row:hover { background: var(--ground); }
.rd-emoji { font-size: 16px; line-height: 1; }
.rd-name { font-size: 13px; color: var(--ink); }
.day-divider { align-self: center; font-size: 11px; color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); padding: 2px 10px; border-radius: 999px; margin: 6px 0; }

/* Quoted message shown inside a reply bubble */
.quoted {
  display: flex; gap: 8px; align-items: stretch; cursor: pointer;
  border-left: 3px solid var(--accent); background: rgba(15,122,84,.06);
  border-radius: 5px; padding: 4px 8px; margin-bottom: 5px; font-size: 12.5px; line-height: 1.35;
}
.quoted:hover { background: rgba(15,122,84,.12); }
.quoted-body { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.quoted-author { display: block; font-weight: 700; color: var(--accent); font-size: 11.5px; }
.quoted-text { color: var(--ink-soft); white-space: pre-wrap;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Small image/video preview of the replied-to message (WhatsApp-style). The
   emoji fallback shows until hydrateQuotedThumbs() paints the real thumbnail. */
.quoted-thumb {
  flex: none; width: 38px; align-self: center; aspect-ratio: 1; border-radius: 5px; overflow: hidden;
  background-size: cover; background-position: center; background-color: var(--line);
  display: grid; place-items: center; font-size: 15px;
}
.quoted-thumb.loaded .quoted-thumb-ico { display: none; }

/* "Replying to" banner above the composer */
.reply-banner {
  display: flex; align-items: center; gap: 8px; background: var(--ground);
  border-left: 3px solid var(--accent); border-radius: 6px; padding: 6px 8px; margin-bottom: 8px;
}
.reply-banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.reply-banner-author { font-size: 12px; font-weight: 700; color: var(--accent); }
.reply-banner-text { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-banner-x { border: none; background: none; color: var(--ink-soft); font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 5px; }
.reply-banner-x:hover { background: var(--line); }

/* When you jump to a message (search hit or reply preview), highlight the WHOLE
   row: its background pulses to the accent tint, holds ~a second, then fades —
   so it clearly reads as "this is the one you selected". The bubble also gets a
   soft ring for extra emphasis. */
.msg-row.msg-flash { animation: rowFlash 1.6s ease; border-radius: 10px; }
@keyframes rowFlash {
  0%   { background: transparent; }
  12%  { background: var(--accent-soft); }
  65%  { background: var(--accent-soft); }
  100% { background: transparent; }
}
.msg-row.msg-flash .bubble { animation: bubbleFlash 1.6s ease; }
@keyframes bubbleFlash {
  0%, 55% { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.composer { flex: 0 0 auto; padding: 10px 16px 14px; background: var(--panel); border-top: 1px solid var(--line); }
.composer-row { display: flex; gap: 8px; align-items: flex-end; }
.composer-input-wrap { position: relative; flex: 1; display: flex; }
.composer textarea {
  flex: 1; width: 100%; resize: none; border: 1px solid var(--line); border-radius: 22px;
  padding: 11px 16px; min-height: 44px; max-height: 130px; background: var(--ground);
  font: inherit; line-height: 1.4; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.composer textarea:focus {
  outline: none; background: var(--panel); border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 122, 84, .14);
}
.composer textarea.note-mode { background: var(--note); }
.composer-side { display: flex; flex-direction: column; gap: 6px; }
.send-btn {
  background: var(--accent); color: #fff; border: none; border-radius: 22px;
  padding: 11px 22px; min-height: 44px; font-weight: 700; white-space: nowrap;
  transition: filter .15s ease, transform .05s ease;
}
.send-btn:hover { filter: brightness(1.08); }
.send-btn:active { transform: translateY(1px); }
.composer-tools { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--ink-soft); flex-wrap: wrap; }
.note-toggle { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.note-toggle.on { background: var(--note); border-color: #e5c95d; font-weight: 700; }
.from-select { font-size: 12px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; }
.ai-btn {
  border: 1px solid var(--accent); color: var(--accent); background: var(--panel);
  border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 600;
}
.ai-btn:hover { background: var(--accent-soft); }

/* composer autocomplete (quick replies / mentions) */
.ac-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; width: min(420px, 100%);
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(30, 43, 38, 0.15); z-index: 70; padding: 4px;
  max-height: 240px; overflow-y: auto;
}
.ac-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  width: 100%; text-align: left; background: none; border: none;
  padding: 7px 10px; border-radius: 6px; font-size: 13px;
}
.ac-item:hover, .ac-item.sel { background: var(--accent-soft); }
.ac-item b { color: var(--accent); }
.ac-sub { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---------- inbox: details panel ---------- */
#details {
  flex: 0 0 300px; overflow-y: auto;
  background: var(--panel); border-left: 1px solid var(--line); padding: 16px;
}
/* ---- in-chat message search (takes over the right details column) ---- */
#details:has(.chat-search) { padding: 0; }
.chat-search { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cs-head { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.cs-x { background: none; border: none; font-size: 16px; color: var(--ink-soft); cursor: pointer; padding: 2px 6px; border-radius: 6px; line-height: 1; }
.cs-x:hover { background: var(--line); color: var(--ink); }
.cs-title { font-weight: 700; font-size: 14px; }
.cs-cal { margin-left: auto; display: inline-flex; align-items: center; background: none; border: none;
  color: var(--ink-soft); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.cs-cal:hover { background: var(--line); color: var(--accent); }
/* Invisible native date input, parked under the calendar icon so showPicker()
   opens the calendar right there. */
.cs-date-hidden { position: absolute; right: 12px; top: 14px; width: 22px; height: 22px; opacity: 0; pointer-events: none; }
/* The outer pill carries the border; the input itself stays outline-free. On
   focus the PILL border turns accent (via :focus-within), so the highlight is on
   the whole bar, not a ring around the input. */
.cs-inputwrap { display: flex; align-items: center; gap: 8px; margin: 12px 14px 6px; padding: 8px 10px; background: var(--ground); border: 1px solid var(--line); border-radius: 9px; }
.cs-inputwrap:focus-within { border-color: var(--accent); }
.cs-ico { color: var(--ink-soft); flex: none; }
.cs-input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 13.5px; color: var(--ink); }
/* Beat the global :focus-visible outline rule so typing shows no focus ring. */
.cs-input:focus, .cs-input:focus-visible { outline: none; box-shadow: none; }
.cs-clear { background: none; border: none; color: var(--ink-soft); font-size: 13px; cursor: pointer; padding: 0 4px; border-radius: 5px; flex: none; }
.cs-clear:hover { background: var(--line); color: var(--ink); }
.cs-results { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 0 12px; }
.cs-hint { padding: 22px 18px; color: var(--ink-soft); font-size: 12.5px; text-align: center; line-height: 1.5; }
.cs-group-h { position: sticky; top: 0; z-index: 1; background: var(--panel); padding: 8px 16px 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.cs-item { display: block; width: 100%; text-align: left; background: none; border: none;
  border-bottom: 1px solid var(--line); padding: 9px 16px; cursor: pointer; }
.cs-item:hover { background: var(--accent-soft); }
.cs-item.active { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.cs-item-top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.cs-item-who { font-size: 12px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-item-time { font-size: 11px; color: var(--ink-soft); flex: none; }
.cs-item-body { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cs-item-body mark { background: #fce7a1; color: inherit; padding: 0 1px; border-radius: 2px; }

.details-section { margin-bottom: 18px; }
.details-section h4 {
  margin: 0 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-soft);
}
.detail-kv { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.detail-kv .k { color: var(--ink-soft); }
/* Group members list in the details panel: total count badge + scrollable roster. */
.members-count {
  display: inline-block; min-width: 18px; text-align: center; font-size: 11px; font-weight: 700;
  color: var(--panel); background: var(--ink-soft); border-radius: 999px; padding: 0 6px; margin-left: 4px;
}
.members-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.member-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 13px; padding: 5px 9px; border-bottom: 1px solid var(--line);
}
.member-row:last-child { border-bottom: 0; }
.member-name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-num { color: var(--ink-soft); font-size: 12px; flex-shrink: 0; }
.detail-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.label-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ============ Custom properties ============ */
/* Settings manager */
.cp-sections { display: flex; flex-direction: column; gap: 14px; margin: 14px 0; }
.cp-section { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; }
.cp-section-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--ground); }
.cp-sec-name { flex: 1; font-weight: 700; font-size: 14px; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; background: none; color: var(--ink); }
.cp-sec-name:focus { outline: none; border-color: var(--line); background: var(--panel); }
.cp-del { color: var(--ink-soft); }
.cp-del:hover { color: var(--danger); }
.cp-props { padding: 6px 12px 10px; }
.cp-prop { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ground); font-size: 13px; }
.cp-prop:last-child { border-bottom: none; }
.cp-prop-name { font-weight: 600; color: var(--ink); }
.cp-type { font-size: 12px; color: var(--ink-soft); }
.cp-req { font-size: 10.5px; font-weight: 700; color: var(--warn); background: #fdf0e0; padding: 1px 6px; border-radius: 4px; }
.cp-detail { font-size: 12px; color: var(--ink-soft); }
.cp-prop-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.cp-empty { font-size: 12.5px; color: var(--ink-soft); padding: 8px 0; }

/* Property editor modal */
.pm-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pm-opt { display: flex; gap: 6px; align-items: center; }
.pm-opt input { flex: 1; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); }
.pm-tree { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; max-height: 260px; overflow-y: auto; }
.pm-node-row { display: flex; gap: 5px; align-items: center; }
.pm-node-row input { flex: 1; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); font-size: 13px; }
.pm-node { margin-bottom: 3px; }

/* Chat details: property values */
.cp-val-section { margin-bottom: 12px; }
.cp-val-sec-name { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); font-weight: 700; margin-bottom: 6px; }
.cp-field { display: flex; flex-direction: column; gap: 3px; margin-bottom: 9px; }
.cp-field-lab { font-size: 12.5px; color: var(--ink-soft); }
.cp-req-dot { color: var(--warn); }
.cp-input { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); color: var(--ink); font-size: 13px; }
.cp-input:focus { outline: none; border-color: var(--accent); }
.cp-multi { display: flex; flex-wrap: wrap; gap: 5px; }
.cp-chip { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--ground); color: var(--ink-soft); cursor: pointer; }
.cp-chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.cp-none { font-size: 12.5px; color: var(--ink-soft); }
.cp-dep-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-dep { flex: 1 1 30%; min-width: 90px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--ground); font-size: 12.5px; }
.cp-file { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-file-link { color: var(--accent); text-decoration: none; font-size: 13px; word-break: break-all; }
.cp-file-link:hover { text-decoration: underline; }
.cp-file-btn { cursor: pointer; }

/* Details panel tabs (Info | Properties) */
.det-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: -4px 0 14px; position: sticky; top: 0; background: var(--panel); z-index: 2; }
.det-tab {
  flex: 1; padding: 10px 8px; border: none; background: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--ink-soft); border-bottom: 2px solid transparent;
}
.det-tab:hover { color: var(--ink); }
.det-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.det-empty-props { font-size: 13px; color: var(--ink-soft); line-height: 1.6; padding: 8px 0; }
.cp-panel .cp-val-section:first-child .cp-val-sec-name { margin-top: 0; }

/* Custom properties — small screens */
@media (max-width: 640px) {
  /* Settings manager: let the section header and each property row wrap instead
     of overflowing a narrow settings body. */
  .cp-section-head { flex-wrap: wrap; }
  .cp-sec-name { flex: 1 1 100%; }
  .cp-prop { flex-wrap: wrap; gap: 4px 8px; }
  .cp-prop-name { flex: 1 1 100%; }
  .cp-prop-actions { margin-left: auto; }
  /* Values: cascading dependent selects stack full-width so each is tappable. */
  .cp-dep { flex: 1 1 100%; min-width: 0; }
  .cp-field-ctl .cp-input, .cp-dep, .cp-multi { max-width: 100%; }
  /* Property modal: the tree editor never forces horizontal scroll. */
  .pm-node-row { gap: 4px; }
  .pm-node-row input { min-width: 0; }
  .pm-tree { max-height: 220px; }
  .det-tab { padding: 11px 6px; font-size: 13.5px; }
}
.label-chip {
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  color: #fff; border: none; opacity: 0.45;
}
.label-chip.on { opacity: 1; }
.assignee-select, .details select { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }
.ticket-mini {
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; margin-bottom: 6px; font-size: 12.5px;
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.ticket-mini:hover { border-color: var(--accent); background: var(--accent-soft); }
.ticket-mini .t-title { font-weight: 600; }
.ai-output {
  background: var(--ground); border: 1px solid var(--line); border-radius: 6px;
  padding: 10px; font-size: 12.5px; white-space: pre-wrap; line-height: 1.5; margin-top: 8px;
  max-height: 260px; overflow-y: auto;
}
.spin { display: inline-block; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- generic page views ---------- */
.page { flex: 1; overflow-y: auto; padding: 22px 26px; }
.page h2 { margin: 0 0 4px; font-size: 20px; }
.page .page-sub { color: var(--ink-soft); margin-bottom: 18px; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head h2 { margin: 0; }

/* tickets: search + filter bar */
.ticket-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 10px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.tf-search {
  flex: 1 1 220px; min-width: 160px; padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--line); border-radius: 7px; background: var(--ground); color: var(--ink);
}
.tf-search:focus { outline: none; border-color: var(--accent); }
.tf-select {
  padding: 7px 10px; font-size: 13px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--ground); color: var(--ink); cursor: pointer; max-width: 180px;
}
.tf-range {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 7px; padding: 3px 8px; background: var(--ground);
}
.tf-range-lab { font-weight: 600; }
.tf-range input[type="date"] { border: none; background: none; color: var(--ink); font-size: 12.5px; padding: 2px; }
.tf-range input[type="date"]:focus { outline: none; }
.tf-dash { color: var(--ink-soft); }
/* label multi-select popover (native <details>) */
.tf-labels { position: relative; }
.tf-labels-btn {
  list-style: none; cursor: pointer; user-select: none;
  padding: 7px 10px; font-size: 13px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--ground); color: var(--ink); white-space: nowrap;
}
.tf-labels-btn::-webkit-details-marker { display: none; }
.tf-labels[open] .tf-labels-btn { border-color: var(--accent); }
.tf-labels-pop {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 200px; max-height: 260px;
  overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(20, 28, 25, 0.16); padding: 6px;
}
.tf-check { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.tf-check:hover { background: var(--ground); }
.tf-check input { accent-color: var(--accent); }
.tf-check .color-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tf-empty { padding: 8px; font-size: 12.5px; color: var(--ink-soft); }
.tf-clear:disabled { opacity: 0.5; cursor: default; }
.kanban-empty { color: var(--ink-soft); font-size: 12.5px; padding: 6px; }

/* tickets kanban */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 14px; align-items: start; }
.kanban-col { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.kanban-col h3 { margin: 2px 6px 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); display: flex; justify-content: space-between; }
.tcard { border: 1px solid var(--line); border-radius: 6px; padding: 10px; margin-bottom: 8px; background: var(--ground); cursor: pointer; }
.tcard:hover { border-color: var(--accent); }
.tcard .t-num { font-size: 11px; color: var(--ink-soft); }
.tcard .t-title { font-weight: 600; margin: 2px 0 6px; }
.tcard-meta { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--ink-soft); flex-wrap: wrap; }
.prio { font-weight: 700; font-size: 10.5px; padding: 1px 7px; border-radius: 4px; }
.prio.low { background: #eef2f1; color: var(--ink-soft); }
.prio.medium { background: #e4effc; color: var(--info); }
.prio.high { background: #fdf0e0; color: var(--warn); }
.prio.urgent { background: #fdeaea; color: var(--danger); }
.due-over { color: var(--danger); font-weight: 700; }
.tcard.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(15,122,84,0.18); }
.tcard-label { color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }

/* ticket detail slide-over (Jira-style) */
.tp-backdrop { position: fixed; inset: 0; background: rgba(20,28,25,0.32); z-index: 60; animation: tpFade 0.12s ease; }
@keyframes tpFade { from { opacity: 0; } to { opacity: 1; } }
.ticket-panel {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(760px, 94vw);
  background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -16px 0 40px rgba(20,28,25,0.16); z-index: 61;
  display: flex; flex-direction: column; animation: tpSlide 0.18s ease;
}
@keyframes tpSlide { from { transform: translateX(24px); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } }
.tp-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.tp-head-id { font-weight: 700; font-size: 15px; color: var(--ink); }
.tp-close { border: none; background: none; font-size: 17px; cursor: pointer; color: var(--ink-soft); line-height: 1; padding: 4px 8px; border-radius: 6px; }
.tp-close:hover { background: var(--ground); color: var(--ink); }
.tp-loading, .tp-empty, .tp-readonly-note { color: var(--ink-soft); font-size: 13px; padding: 16px 18px; }
.tp-empty { padding: 14px 2px; }
.tp-body { flex: 1; display: grid; grid-template-columns: 1fr 260px; min-height: 0; }
.tp-main { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; min-width: 0; }
.tp-side { border-left: 1px solid var(--line); padding: 18px 16px; overflow-y: auto; background: var(--ground); }
.tp-title { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--ink); }
.tp-chat { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 14px; }
.tp-chat a { color: var(--accent); text-decoration: none; }
.tp-chat a:hover { text-decoration: underline; }
.tp-context { border: 1px solid var(--line); border-radius: 10px; background: var(--ground); padding: 10px 12px; margin-bottom: 16px; }
.tp-context-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tp-cust { font-weight: 700; font-size: 13px; color: var(--ink); }
.tp-cust-num { font-size: 12px; color: var(--ink-soft); }
.tp-context-label { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); }
.tp-thread { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.tp-msg { max-width: 82%; padding: 6px 9px; border-radius: 9px; font-size: 12.5px; border: 1px solid var(--line); background: var(--panel); }
.tp-msg.in { align-self: flex-start; border-bottom-left-radius: 2px; }
.tp-msg.out { align-self: flex-end; background: #e7f5ee; border-color: #cdeadd; border-bottom-right-radius: 2px; }
.tp-msg.note { align-self: center; max-width: 92%; background: #fff8e6; border-color: #f2e2b6; }
.tp-msg.src { box-shadow: 0 0 0 2px rgba(15,122,84,0.28); border-color: var(--accent); }
.tp-msg-who { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.tp-src-tag { font-weight: 700; font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; background: var(--accent); border-radius: 4px; padding: 1px 5px; }
.tp-msg-body { color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.tp-msg-media { display: inline-block; font-size: 11px; color: var(--ink-soft); margin-right: 5px; }
.tp-msg-time { font-size: 10px; color: var(--ink-soft); margin-top: 3px; text-align: right; }
.tp-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tp-tab { border: none; background: none; padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tp-tab span { background: var(--ground); border-radius: 10px; padding: 0 6px; font-size: 11px; margin-left: 2px; }
.tp-comments { display: flex; flex-direction: column; gap: 12px; }
.tp-comment { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel); }
.tp-comment-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 5px; }
.tp-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.tp-time { color: var(--ink-soft); font-size: 11px; }
.tp-comment-body { font-size: 13.5px; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.tp-compose { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.tp-compose textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font: inherit; resize: vertical; }
.tp-compose .btn { align-self: flex-end; }
.tp-history { display: flex; flex-direction: column; gap: 2px; }
.tp-event { display: flex; gap: 10px; padding: 8px 0; align-items: flex-start; }
.tp-event-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); margin-top: 5px; flex: none; box-shadow: 0 0 0 3px var(--ground); }
.tp-event-text { font-size: 13px; color: var(--ink); }
.tp-event-text b { font-weight: 700; }
.hist-label { display: inline-block; color: #fff; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 4px; vertical-align: baseline; }
.hist-field { color: var(--accent); font-weight: 700; }
.tp-field { margin-bottom: 14px; }
.tp-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 5px; }
.tp-select { width: 100%; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font: inherit; }
.tp-static { font-size: 13px; color: var(--ink); }
.tp-due-warn { display: inline-block; margin-top: 5px; font-size: 11.5px; font-weight: 700; color: var(--danger); }
.tp-reporter { display: flex; align-items: center; gap: 8px; }
.tp-avatar.bot { background: var(--ink-soft); }
.tp-via { color: var(--ink-soft); font-size: 11px; }
.tp-field-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-soft); font-size: 10px; }
.tp-label-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tp-label-checks { max-height: 130px; }
.tp-muted { color: var(--ink-soft); font-weight: 400; }
.form-hint { font-weight: 400; color: var(--ink-soft); font-size: 11px; }
@media (max-width: 640px) {
  .tp-body { grid-template-columns: 1fr; }
  .tp-side { border-left: none; border-top: 1px solid var(--line); }
}

/* rules */
.rule-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px; display: flex; gap: 14px; align-items: flex-start;
}
.rule-card .r-body { flex: 1; }
.rule-card .r-name { font-weight: 700; margin-bottom: 4px; }
.rule-kind {
  font-size: 10.5px; font-weight: 600; color: var(--info); background: #e4effc;
  border-radius: 4px; padding: 1px 7px; margin-left: 6px; text-transform: none;
}
.rule-flow { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; }
.rule-flow b { color: var(--ink); }
.rule-runs { font-size: 12px; color: var(--accent); font-weight: 600; margin-top: 6px; }
.switch { position: relative; width: 40px; height: 22px; flex: 0 0 40px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; inset: 0; background: #cfd8d3; border-radius: 999px; transition: 0.2s;
}
.slider:before {
  content: ""; position: absolute; height: 16px; width: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: 0.2s;
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider:before { transform: translateX(18px); }

/* cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.card h3 { margin: 0 0 10px; font-size: 15px; }

/* dashboard */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
}
.stat .s-val { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat .s-label { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.stat.alert .s-val { color: var(--danger); }
.dash-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
table.agents { width: 100%; border-collapse: collapse; font-size: 13px; }
table.agents th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.agents td { padding: 8px; border-bottom: 1px solid var(--ground); font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot.online { background: var(--accent); }
.dot.offline { background: #cfd8d3; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 10px; }
.bar { flex: 1; background: var(--accent-soft); border-radius: 3px 3px 0 0; position: relative; min-height: 2px; }
.bar.hot { background: var(--accent); }
.bar-x { font-size: 9px; color: var(--ink-soft); text-align: center; margin-top: 3px; }

/* ticket aging (dashboard) */
.aging { display: flex; flex-direction: column; gap: 8px; }
.aging-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.aging-k { flex: 0 0 46px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.aging-track { flex: 1; height: 10px; background: var(--ground); border-radius: 999px; overflow: hidden; }
.aging-fill { height: 100%; background: var(--accent); border-radius: 999px; min-width: 2px; }
.aging-fill.hot { background: var(--danger); }
.aging-v { flex: 0 0 26px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- settings ---------- */
.settings { flex: 1; display: flex; min-width: 0; }
.settings-nav {
  flex: 0 0 200px; background: var(--panel); border-right: 1px solid var(--line);
  padding: 18px 12px; display: flex; flex-direction: column; gap: 4px;
}
.settings-nav h3 { margin: 0 6px 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-soft); }
.settings-tab {
  text-align: left; border: none; background: none; border-radius: 8px;
  padding: 8px 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
}
.settings-tab:hover { background: var(--ground); }
.settings-tab.active { background: var(--accent-soft); color: var(--accent); }
.settings-plan { margin-top: auto; border-top: 1px solid var(--line); padding: 12px 6px 2px; display: flex; flex-direction: column; gap: 8px; }
.settings-plan-name { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.settings-body { flex: 1; overflow-y: auto; padding: 22px 26px; min-width: 0; }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.settings-head h2 { margin: 0; font-size: 20px; }

/* phones */
.phone-list { display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.phone-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px;
}
.phone-ico { font-size: 22px; }
.phone-info { flex: 1; min-width: 0; }
.phone-name { font-weight: 700; }
.phone-num { font-size: 12.5px; color: var(--ink-soft); }
.phone-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pstatus { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.pstatus.ok { background: var(--accent-soft); color: var(--accent); }
.pstatus.warn { background: #fdf0e0; color: var(--warn); }
.pstatus.off { background: var(--ground); color: var(--ink-soft); }
.pstatus.err { background: #fdeaea; color: var(--danger); }

/* QR panel */
.qr-box {
  display: grid; place-items: center; min-height: 260px; margin: 6px 0 10px;
  background: var(--ground); border: 1px dashed var(--line); border-radius: 10px;
}
.qr-box img { width: 240px; height: 240px; image-rendering: pixelated; border-radius: 6px; background: #fff; padding: 8px; }
.qr-wait { color: var(--ink-soft); font-size: 13px; }
.qr-done { font-size: 20px; font-weight: 800; color: var(--accent); }
.qr-status { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }

/* team */
.team-table { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.team-table td, .team-table th { padding: 9px 10px; }
.role-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--ground); color: var(--ink-soft); }
.role-tag.owner { background: var(--accent-soft); color: var(--accent); }
.role-tag.admin { background: #e4effc; color: var(--info); }
.role-tag.readonly { background: #fdf0e0; color: var(--warn); }
.label-checks { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; padding: 8px; }
.check-line { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 400 !important; color: var(--ink) !important; text-transform: none !important; }
.color-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; }
.color-dot.big { width: 16px; height: 16px; flex: 0 0 16px; }

/* labels + quick replies editors */
.inline-form {
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px; max-width: 720px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px;
}
.inline-form input[type="text"] { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; }
.inline-form input[type="color"] { width: 34px; height: 30px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.label-list, .qr-list { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.label-row, .qr-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px;
}
.label-row input[type="text"], .qr-row input[type="text"] { padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; }
.label-row input[type="color"] { width: 30px; height: 28px; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.label-name-input { flex: 1; }
.slash-prefix { font-weight: 800; color: var(--accent); }
.qr-cmd-input { width: 130px; }
.qr-body-input { flex: 1; min-width: 0; }

/* ---------- upgrade modal / plan picker ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.plan-card {
  border: 1px solid var(--line); border-radius: 10px; padding: 14px 12px;
  display: flex; flex-direction: column; gap: 6px; background: var(--ground);
}
.plan-card.featured { border-color: var(--accent); background: var(--accent-soft); }
.plan-card.current { outline: 2px solid var(--accent); outline-offset: -2px; }
.plan-name { font-weight: 800; font-size: 15px; }
.plan-phones { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.plan-feats { list-style: none; margin: 4px 0 8px; padding: 0; font-size: 11.5px; color: var(--ink-soft); line-height: 1.7; flex: 1; }
.plan-card .btn { width: 100%; }

/* context menu + modal */
.ctx-menu {
  position: fixed; z-index: 80; background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(30, 43, 38, 0.15); padding: 4px; min-width: 180px;
}
.ctx-menu button { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; background: none; border: none; padding: 8px 12px; border-radius: 5px; font-size: 13px; }
.ctx-menu button:hover { background: var(--ground); }
.ctx-reacts { display: flex; gap: 2px; padding: 4px 4px 6px; border-bottom: 1px solid var(--line, #eee); margin-bottom: 4px; }
.ctx-menu button.ctx-react { width: auto; justify-content: center; padding: 4px 6px; font-size: 18px; border-radius: 8px; }
.ctx-menu button.ctx-react.on { background: var(--ground); box-shadow: inset 0 0 0 1.5px var(--brand, #25d366); }
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20, 30, 26, 0.4); z-index: 90;
  display: grid; place-items: center;
}
.modal {
  background: var(--panel); border-radius: 12px; padding: 20px 22px; width: 480px; max-width: 94vw;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 50px rgba(20, 30, 26, 0.3);
}
.modal h3 { margin: 0 0 14px; }
.modal .form-row, .form-row { margin-bottom: 12px; }
.modal label, .form-row label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.modal input[type="text"], .modal input[type="email"], .modal input[type="password"], .modal select, .modal input[type="datetime-local"] {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.btn { padding: 8px 16px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); font-weight: 600; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn.xs { padding: 2px 8px; font-size: 11.5px; border-radius: 5px; }
.btn.danger { color: var(--danger); border-color: #f3c8c8; }
.btn.danger:hover { background: #fdeaea; }
.btn:hover { filter: brightness(0.98); }

/* Settings: Security / two-factor */
.sec-card {
  max-width: 560px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); padding: 18px; margin-top: 12px;
}
.sec-card-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.sec-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 12px; }
.twofa-state { font-size: 14px; margin-bottom: 12px; }
.twofa-state.on { color: var(--accent); }
.twofa-steps { font-size: 13.5px; color: var(--ink); margin: 0 0 12px; padding-left: 20px; line-height: 1.7; }
.twofa-qr { display: flex; justify-content: center; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 8px; width: 216px; }
.twofa-qr img { display: block; }
.twofa-key { font-size: 12.5px; color: var(--ink-soft); margin: 12px 0; line-height: 1.6; }
.twofa-key code {
  display: inline-block; margin-top: 4px; font-size: 13px; letter-spacing: 0.08em;
  background: var(--ground); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; user-select: all;
}
.twofa-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.twofa-row input {
  width: 150px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--ground); font-size: 15px; letter-spacing: 0.15em; text-align: center;
}

/* ---------- auth (login/signup) page ---------- */
.auth-body { overflow: auto; background: linear-gradient(160deg, var(--accent-soft) 0%, var(--ground) 45%); }
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; }
.auth-card {
  width: 400px; max-width: 94vw; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; padding: 26px 26px 22px;
  box-shadow: 0 16px 40px rgba(15, 122, 84, 0.10);
}
.auth-brand { font-weight: 800; font-size: 20px; margin-bottom: 18px; }
.auth-tabs { display: flex; gap: 6px; background: var(--ground); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.auth-tab { flex: 1; border: none; background: none; border-radius: 999px; padding: 7px 10px; font-weight: 700; font-size: 13px; color: var(--ink-soft); }
.auth-tab.active { background: var(--accent); color: #fff; }
.auth-form input { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--ground); }
.auth-form input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.auth-submit { width: 100%; padding: 10px; margin-top: 4px; }
.auth-hint { font-size: 12px; color: var(--ink-soft); text-align: center; margin-top: 10px; }
.auth-error {
  margin-top: 14px; background: #fdeaea; color: var(--danger); border: 1px solid #f3c8c8;
  border-radius: 7px; padding: 9px 12px; font-size: 13px;
}
/* Neutral info note (e.g. "if an account exists, a code is on its way"). */
.auth-note {
  margin-top: 14px; background: var(--accent-soft); color: var(--accent); border: 1px solid #c4e6d6;
  border-radius: 7px; padding: 9px 12px; font-size: 13px;
}
.auth-foot { font-size: 12.5px; color: var(--ink-soft); }

/* Mobile-only conversation controls — hidden on desktop, revealed in the
   phone media query below (WhatsApp-style back arrow + details toggle). */
.conv-back, .conv-info {
  display: none; border: none; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 4px 8px; border-radius: 8px; color: var(--ink);
}
.conv-back:hover, .conv-info:hover { background: var(--ground); }
.conv-head-title { min-width: 0; }
.details-mhead { display: none; }   /* mobile-only header for the details sheet */

/* responsive: keep the conversation usable on narrow viewports / high zoom */
#conv { min-width: 340px; }
/* Tablet / small desktop: no room for a permanent 3rd pane — the details panel
   becomes an on-demand right slide-over, toggled by the ℹ️ in the conv header. */
@media (max-width: 1220px) {
  #details { display: none; }
  /* release the base 320px hard-lock so the flex-basis below actually applies */
  #chatlist { flex: 0 0 300px; width: auto; min-width: 0; max-width: none; }
  .plan-grid { grid-template-columns: 1fr; }
  .conv-info { display: inline-flex; align-items: center; }
  body.m-details #details {
    display: flex; flex-direction: column; position: fixed;
    top: 50px; right: 0; bottom: 0; width: min(380px, 100vw); z-index: 60;
    background: var(--panel); overflow-y: auto;
    border-left: 1px solid var(--line); box-shadow: -14px 0 34px rgba(20, 28, 25, 0.16);
  }
  .details-mhead {
    display: flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 1;
    background: var(--panel); border-bottom: 1px solid var(--line); padding: 10px 12px; font-weight: 700;
  }
  .details-close { border: none; background: none; font-size: 20px; cursor: pointer; padding: 2px 6px; color: var(--ink); }
}
@media (max-width: 860px) {
  #chatlist { flex: 0 0 260px; }
  .msg { max-width: 85%; }
  .dash-grid { grid-template-columns: 1fr; }
  .settings-nav { flex: 0 0 150px; }
}
/* Tablet portrait (≤768): a touch more breathing room in the two panes. */
@media (max-width: 768px) and (min-width: 641px) {
  #chatlist { flex: 0 0 250px; }
  .msgs { padding: 16px 18px; }
}

/* ---------- mobile: WhatsApp-style single pane + bottom nav (≤640px) ---------- */
@media (max-width: 640px) {
  /* dvh (dynamic viewport) keeps the bottom nav above the mobile browser bar; a
     plain 100vh leaves it hidden behind the URL/toolbar on iOS/Android. */
  #app { height: 100dvh; }
  #conv { min-width: 0; }               /* the 340px floor breaks a phone layout */

  /* compact top bar */
  #topbar { height: 50px; flex-basis: 50px; padding: 0 12px; }
  .brand-sub, .me-name { display: none; }
  .topbar-right { gap: 6px; }

  /* left icon rail → bottom navigation bar */
  #main { flex-direction: column; }
  #view { order: 1; flex: 1 1 auto; min-height: 0; }
  #rail {
    order: 2; flex: 0 0 58px; height: 58px; width: 100%;
    flex-direction: row; justify-content: space-around; align-items: center;
    gap: 0; padding: 0 4px; border-right: none; border-top: 1px solid var(--line);
  }
  /* flex the buttons so more items (Inbox/Mail/Contacts/Tickets/Rules/Dashboard/
     Settings) share the width evenly and never overflow a narrow phone. */
  .rail-btn { flex: 1 1 0; width: auto; min-width: 0; max-width: 56px; height: 44px; font-size: 20px; border-radius: 12px; }
  .rail-gear { margin: 0; }

  /* inbox: one pane at a time — list, or (when a chat is open) the conversation */
  /* Unlock the base 320px hard-lock so the list fills the phone width (was
     capped at 320px, leaving a gap at 375/425 while 320 happened to fit). */
  #chatlist { flex: 1 1 auto; width: auto; min-width: 0; max-width: none; border-right: none; }
  #conv { display: none; }
  #details { display: none; }
  body.has-active-chat #chatlist { display: none; }
  body.has-active-chat #conv { display: flex; }
  /* Opening a chat hands the whole screen to the conversation — hide the app top
     bar (WAScope brand etc.) so the chat's own header sits at the very top, like
     WhatsApp. Covers the details sheet too (m-details only exists with a chat). */
  body.has-active-chat #topbar { display: none; }

  /* conversation header controls */
  .conv-back { display: inline-flex; align-items: center; }
  /* Drop the ℹ️ button on phones: the search icon takes its slot, and tapping the
     chat title already opens the details sheet. */
  .conv-info { display: none; }
  .conv-head { padding: 0 6px; gap: 8px; }
  .conv-head-title { flex: 1; cursor: pointer; }
  .conv-title, .conv-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .conv-head-right { gap: 4px; }
  .conv-head-right .ai-btn { font-size: 11px; padding: 5px 8px; }
  .conv-head-right .icon-btn { font-size: 17px; padding: 5px; }   /* the 🔍 search icon */

  /* on a phone the details sheet fills the screen (override the tablet
     slide-over) — full width, from the very top (the app bar is hidden while a
     chat is open) down to the bottom nav */
  body.m-details #details {
    position: fixed; z-index: 60;
    left: 0; right: 0; top: 0; bottom: 58px; width: auto;
    border-left: none; box-shadow: none;
    padding: 0;                 /* full-bleed so the header is flush at the top */
  }
  /* the base 16px padding moves onto the sections, so the sticky "Chat details"
     header sits at the very top — exactly like the chat header does. */
  body.m-details .details-section { padding-left: 16px; padding-right: 16px; }
  body.m-details .details-section:first-of-type { padding-top: 14px; }
  /* Properties tab isn't made of .details-sections, so pad the tab bar and the
     values panel to match on the full-bleed mobile sheet. */
  body.m-details .det-tabs { padding-left: 16px; padding-right: 16px; }
  body.m-details .cp-panel,
  body.m-details .det-empty-props { padding: 14px 16px 16px; }

  /* roomier thread */
  .msg { max-width: 88%; }
  .msgs { padding: 12px; }

  /* Drop the "Chats" heading (the search bar reads as the header), and float the
     new-chat button as a WhatsApp-style FAB above the bottom nav. It lives inside
     #chatlist, so it auto-hides on the conversation pane. */
  .chatlist-title { display: none; }
  .chatlist-top { display: contents; }
  .new-chat-btn {
    position: fixed; right: 16px; bottom: 74px; z-index: 55;
    width: 54px; height: 54px; border-radius: 50%; border: none;
    background: var(--accent); color: #fff; font-size: 22px;
    box-shadow: 0 6px 18px rgba(15, 122, 84, 0.42);
  }
  .new-chat-btn:hover { background: var(--accent); border: none; filter: brightness(1.06); }

  /* chat list: comfortable rows; filter chips scroll sideways, never wrap */
  .chatlist-head { padding: 10px 12px 8px; }
  .filter-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .filter-row::-webkit-scrollbar { display: none; }
  .chip, .phone-filter { flex: 0 0 auto; }
  .chat-item { padding: 11px 12px; }
  .composer { padding: 8px 10px 10px; }

  /* modals: nearly full-width so forms are usable */
  .modal { width: 94vw; max-width: 94vw; }

  /* non-inbox views scroll within the view area; stack the ticket board */
  body[data-view="inbox"] #view { overflow: hidden; }
  body:not([data-view="inbox"]) #view { overflow-y: auto; display: block; }
  .kanban { grid-template-columns: 1fr; }
  .ticket-panel { width: 100vw; }
  .page { padding: 14px; overflow-x: hidden; }   /* no sideways scroll on phones */
  body { overflow-x: hidden; }                    /* hard backstop: nothing scrolls the page sideways */

  /* Workspace dashboard: stat cards go 2-up and compact, the panels stack (via
     the 860px rule), and the wide 6-column team table scrolls sideways inside
     its card instead of stretching the page. */
  .page h2 { font-size: 18px; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
  .stat { padding: 11px 12px; }
  .stat .s-val { font-size: 21px; overflow-wrap: anywhere; }   /* big counts never overflow */
  .stat .s-label { font-size: 11px; line-height: 1.3; }
  /* Stack the whole dashboard in one real column. A CSS grid track keeps
     min-width:auto, so any wide child (a table label, a device stat) can push
     the single column past the phone width and get clipped by overflow-x:hidden
     — the "right half hidden" bug. Plain block stacking can't overflow, and the
     clamps below stop any inner content from forcing width. */
  .dash-grid { display: block; }
  .dash-grid > * { min-width: 0; max-width: 100%; margin-bottom: 12px; }
  .dash-grid > *:last-child { margin-bottom: 0; }
  .card, .stat-row, .dev-cards, .bars, table.agents { min-width: 0; max-width: 100%; }
  .tbl-scroll { min-width: 0; max-width: 100%; overflow-x: hidden; }
  .card { padding: 14px; }                 /* dashboard/settings cards, tighter on phones */
  .card h3 { font-size: 14px; }
  .sect-h { margin: 18px 0 10px; font-size: 14px; }
  .bars { height: 100px; }

  /* Team: turn the 6-column table into a stack of agent cards — each row a card,
     each cell a "Label ....... value" line — the proper phone pattern (no
     sideways scroll). The <th> header row is hidden; td::before carries labels. */
  /* The <table> and the browser-injected <tbody> must both go block, or the
     row-group keeps the block <tr>s shrink-to-fit (each card only ~135px wide,
     leaving empty space on the right). Rows then stretch to the full card. */
  table.agents, table.agents tbody { display: block; width: 100%; }
  table.agents tr:first-child { display: none; }            /* the header row */
  table.agents tr {
    display: block; width: 100%; box-sizing: border-box;
    background: var(--ground); border: 1px solid var(--line);
    border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
  }
  table.agents td { box-sizing: border-box; }
  table.agents td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 6px 0; border: none; font-size: 13px; font-weight: 700; color: var(--ink);
    overflow-wrap: anywhere;             /* long values wrap instead of scrolling the page */
  }
  /* label sits fixed on the left, the value (bold) on the right */
  table.agents td::before {
    content: attr(data-label); flex: none; white-space: nowrap;
    color: var(--ink-soft); font-weight: 500; font-size: 12.5px;
  }
  table.agents td.ag-name {
    font-size: 15px; font-weight: 800; padding: 0 0 8px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line); justify-content: flex-start; color: var(--ink);
  }
  table.agents td.ag-name::before { display: none; }        /* name is the card title */
  table.agents .unread-dot { margin-left: 6px; }

  /* Onboarding health — by device: one device card per row (the base 320px min
     overflows a phone), and 2-up stats inside each card so labels don't wrap.
     NOTE: the base .dev-* rules are defined LATER in the file than this media
     query, so a bare .dev-cards here loses on source order. Scoping under
     .dash-grid raises specificity (0,2,0 > 0,1,0) so these actually win. */
  .dash-grid .dev-cards { grid-template-columns: 1fr; }
  /* The card is a grid item (min-width:auto) — a long number or an unbreakable
     word (the phone number, "conversations") makes it wider than the phone and
     it spills off the right. Clamp the card and everything inside it. */
  .dash-grid .dev-card { padding: 12px 14px; min-width: 0; max-width: 100%; overflow: hidden; }
  .dash-grid .dev-head { flex-wrap: wrap; min-width: 0; } /* long name never crushes the status */
  .dash-grid .dev-name { overflow-wrap: anywhere; min-width: 0; }
  .dash-grid .dev-num { overflow-wrap: anywhere; }        /* the phone number wraps, never overflows */
  /* auto-fit adapts to phone size on its own: 2-up on s/m (320/375), 3-up on l
     (425+) — the min tracks the widest label ("in blob storage"). */
  .dash-grid .dev-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px 8px; min-width: 0; }
  .dash-grid .dev-grid > div { min-width: 0; }            /* nested grid items shrink too */
  .dash-grid .dev-grid b { font-size: 16px; overflow-wrap: anywhere; }
  .dash-grid .dev-grid span { overflow-wrap: anywhere; }
  .dash-grid .dev-media { min-width: 0; max-width: 100%; }

  /* Groups controls: search takes the full width, the selects/buttons flow below. */
  .grp-controls { gap: 6px; }
  .grp-search { flex: 1 1 100%; }
  .grp-controls select { flex: 1 1 auto; min-width: 0; }
  .grp-pager { justify-content: center; }

  /* Messages-by-hour: 24 slim bars, so shrink the gap so nothing gets clipped. */
  .bars { gap: 2px; }

  /* Settings: the side-nav becomes a horizontal scrolling pill-tab bar, with the
     body full-width below (mobile settings pattern). */
  .settings { flex-direction: column; }
  .settings-nav {
    flex: 0 0 auto; width: auto; flex-direction: row; align-items: center; gap: 6px;
    padding: 8px 12px; overflow-x: auto; scrollbar-width: none;
    border-right: none; border-bottom: 1px solid var(--line);
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav h3 { display: none; }
  .settings-tab {
    flex: 0 0 auto; white-space: nowrap; padding: 7px 14px;
    border-radius: 999px; background: var(--ground);
  }
  .settings-tab.active { background: var(--accent); color: #fff; }
  .settings-plan {
    margin: 0; border-top: none; padding: 0 2px; flex: 0 0 auto;
    flex-direction: row; align-items: center; gap: 8px;
  }
  .settings-plan-name { white-space: nowrap; font-size: 12px; }
  .settings-plan .btn { white-space: nowrap; }
  .settings-body { padding: 16px 14px; }
  .settings-head { flex-wrap: wrap; }
  .settings-head h2 { font-size: 18px; }

  /* Phones: name + status on line 1, sync badge and action buttons each on
     their own full-width row below — a clean stacked card. */
  .phone-list { max-width: none; }
  .phone-row { flex-wrap: wrap; align-items: center; row-gap: 8px; padding: 12px; }
  .phone-info { flex: 1 1 auto; min-width: 0; }
  .phone-name, .phone-num { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pstatus { flex: 0 0 auto; margin-left: auto; }
  .phone-row .sync-badge { flex: 1 1 100%; }
  .phone-actions { flex: 1 1 100%; }
  .phone-actions .btn { flex: 1 1 auto; }

  /* Quick replies + labels: fields stack instead of shrinking to nothing */
  .inline-form, .qr-row, .label-row { flex-wrap: wrap; max-width: none; }
  .qr-list, .label-list, .inline-form { max-width: none; }
  .qr-cmd-input { width: auto; flex: 1 1 120px; }
  .qr-body-input { flex: 1 1 100%; }
  .inline-form > .btn, .qr-row > .btn { flex: 1 1 100%; }

  /* Team: the wide 7-column table reflows into one card per member */
  .tbl-scroll { overflow-x: visible; }
  .team-table { border: none; overflow: visible; background: none; }
  .team-table, .team-table tbody { display: block; }
  .team-table tr {
    display: block; background: var(--panel); border: 1px solid var(--line);
    border-radius: 10px; margin-bottom: 10px; padding: 8px 12px;
  }
  .team-table tr:first-child { display: none; }         /* the header row */
  .team-table td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    border: none; padding: 6px 0; text-align: right;
  }
  .team-table td::before { content: attr(data-label); font-weight: 600; color: var(--ink-soft); text-align: left; white-space: nowrap; }
  .team-table td[data-label="Name"] {
    justify-content: flex-start; text-align: left; font-weight: 700; font-size: 14px;
    border-bottom: 1px solid var(--line); margin-bottom: 4px; padding-bottom: 8px;
  }
  .team-table td[data-label="Name"]::before, .team-table td[data-label=""]::before { display: none; }
  .team-table td[data-label=""] { justify-content: flex-end; padding-top: 6px; }
  /* Access labels: put the label on its own line and let the chips wrap full
     width, so a member with many labels never breaks the card. */
  .team-table td[data-label="Access labels"] {
    flex-direction: column; align-items: stretch; text-align: left; gap: 6px; max-width: none;
  }
}

/* ---------- very small phones (≤360px, covers 320) ---------- */
@media (max-width: 360px) {
  #topbar { padding: 0 8px; }
  .brand { font-size: 14px; }
  .plan-badge { display: none; }         /* reclaim header space (plan lives in Settings) */
  .topbar-right { gap: 4px; }
  .rail-btn { width: 46px; font-size: 19px; }
  .avatar { width: 34px; height: 34px; flex: 0 0 34px; font-size: 12px; }
  .chat-item { padding: 9px 10px; gap: 8px; }
  .chat-name { font-size: 13.5px; }
  .chat-preview { font-size: 12px; }
  .msg { max-width: 92%; }
  .msgs { padding: 10px; }
  .conv-head { gap: 6px; padding: 0 4px; }
  .conv-head-right .ai-btn { padding: 5px 6px; }
}

.empty { display: grid; place-items: center; height: 100%; color: var(--ink-soft); text-align: center; }
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 9px 18px; border-radius: 999px;
  font-size: 13px; z-index: 100; box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- sync progress feedback ---------- */
.sync-banner {
  padding: 8px 12px; font-size: 12.5px; color: var(--ink-soft);
  background: var(--accent-soft); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sync-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  white-space: nowrap;
}
.sync-badge.queued { background: #eef2f1; color: var(--ink-soft); }
.sync-badge.running { background: var(--accent-soft); color: var(--accent); }
.sync-badge.done { background: var(--accent-soft); color: var(--accent); }
.sync-badge.failed { background: #fdeaea; color: var(--danger); }
.sync-bar {
  display: inline-block; width: 46px; height: 4px; border-radius: 999px;
  background: rgba(15, 122, 84, 0.18); overflow: hidden;
}
.sync-bar.wide { width: 90px; }
.sync-bar > span {
  display: block; height: 100%; background: var(--accent);
  transition: width 0.3s ease;
}

/* ---------- delivery / read receipts ---------- */
.ack { margin-left: 4px; }

/* The marks are an SVG path, so weight comes from stroke-width rather than
   whatever hairline the system font happens to draw for U+2713. */
.tick { display: inline-flex; align-items: center; color: var(--tick-grey); }
.tick svg { display: block; }

/* Read stays in WhatsApp's blue family, but darker than their #53bdeb: their
   ticks sit inside a green bubble, ours sit on the page under it, and that
   sky blue drops to about 2:1 against a light ground — the exact complaint
   this change answers. This holds ~4.3:1 while still reading as "the blue
   one". */
.tick.read { color: var(--tick-read); }
.tick.pending { opacity: 0.55; font-size: 11px; }
/* Never reached WhatsApp. Deliberately not the receipt grey — this is not a
   quieter version of "sent", it is the opposite of it. */
.tick.failed { color: #c0392b; }

/* ---------- empty conversation state ---------- */
.chat-empty {
  margin: auto; max-width: 420px; text-align: center;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  color: var(--ink-soft); padding: 30px 20px;
}
.chat-empty-title { font-weight: 700; color: var(--ink); font-size: 15px; }
.chat-empty-body { font-size: 13px; line-height: 1.55; }

/* ---------- load older messages ---------- */
.load-older { display: flex; justify-content: center; padding: 4px 0 10px; }

/* ---------- media in the bubble ---------- */
/* The bubble is white-space: pre-wrap for text; media markup must not inherit
   that or the tag indentation shows up as blank lines. */
.bubble.has-media { padding: 5px 5px 7px; }
.bubble .media { white-space: normal; display: block; }
.bubble.has-media .bubble-text { display: block; padding: 5px 7px 0; }

.media-img, .media-video { display: block; max-width: min(300px, 60vw); }
.media-img { margin: 0; }
.media-img img {
  display: block; max-width: 100%; max-height: 340px;
  border-radius: 7px; cursor: zoom-in; background: var(--ground);
}
.media-img.sticker { max-width: 150px; }
.media-img.sticker img { max-height: 150px; background: none; }
.media-video video { display: block; max-width: 100%; max-height: 340px; border-radius: 7px; background: #000; }

.media-audio { display: flex; flex-direction: column; gap: 4px; min-width: min(260px, 62vw); }
.media-audio-label { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }
.media-audio audio { width: min(270px, 62vw); height: 34px; display: block; }

.media-doc {
  display: flex; align-items: center; gap: 10px; min-width: min(240px, 66vw);
  background: rgba(30, 43, 38, 0.04); border-radius: 8px; padding: 8px 10px;
}
.msg.out .media-doc { background: rgba(15, 122, 84, 0.08); }
.doc-ico { font-size: 22px; line-height: 1; flex: 0 0 auto; }
.doc-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.doc-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-sub { font-size: 11px; color: var(--ink-soft); }
.doc-dl { flex: 0 0 auto; }

.media-skel {
  display: grid; place-items: center; min-height: 120px; min-width: min(220px, 55vw);
  background: var(--ground); border: 1px solid var(--line); border-radius: 7px; font-size: 13px;
}
.media-skel.thin { min-height: 34px; }
.media-note {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-soft);
  background: var(--ground); border: 1px solid var(--line);
  border-radius: 7px; padding: 7px 9px; min-width: min(220px, 62vw);
}
.media-note.failed { background: #fdf6ec; border-color: #f0e0c4; }
.media-note-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.media-note .media-ico { font-size: 18px; }
.media-sub { font-size: 11px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-note.pending { background: var(--panel); }
.media-pulse { animation: media-pulse 1.4s ease-in-out infinite; }
@keyframes media-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.media-load-btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 7px; padding: 9px 12px; font-size: 12.5px; font-weight: 600;
}
.media-video > .media-load-btn, .media-audio > .media-load-btn { width: 100%; }
.media-load-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 120; background: rgba(12, 20, 17, 0.88);
  display: grid; place-items: center; padding: 40px 20px 74px;
}
.lightbox img { max-width: 92vw; max-height: 82vh; object-fit: contain; border-radius: 6px; }
.lightbox-close {
  position: absolute; top: 14px; right: 18px; width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 15px; line-height: 1;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox-bar {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; max-width: 92vw;
  background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 12.5px;
  padding: 8px 12px; border-radius: 999px;
}
.lightbox-bar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox-bar .btn { text-decoration: none; color: var(--ink); background: #fff; border-color: #fff; }

/* ---------- attachment menu (WhatsApp-Desktop style) ---------- */
.attach-wrap { position: relative; flex: 0 0 auto; align-self: flex-end; }
.attach-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--ground); color: var(--accent); font-size: 20px; font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}
.attach-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.attach-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0; width: 230px; z-index: 70;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(30, 43, 38, 0.18); padding: 6px;
}
.attach-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: none; padding: 10px 12px; border-radius: 8px; font-size: 13.5px;
}
.attach-menu button:hover { background: var(--ground); }
.am-ico { font-size: 17px; width: 22px; text-align: center; }

/* ---------- upload preview row ---------- */
.attach-preview {
  display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px;
  background: var(--ground); border: 1px solid var(--line); border-radius: 10px; padding: 10px;
}
.ap-thumb { width: 54px; height: 54px; flex: 0 0 54px; object-fit: cover; border-radius: 7px; }
.ap-ico { width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; font-size: 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; }
.ap-body { flex: 1; min-width: 0; }
.ap-name { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-sub { font-size: 11.5px; color: var(--ink-soft); }
.ap-caption { width: 100%; margin-top: 6px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.ap-progress { height: 5px; margin-top: 7px; border-radius: 999px; background: rgba(15, 122, 84, 0.18); overflow: hidden; }
.ap-progress > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.15s linear; }
.ap-actions { display: flex; flex-direction: column; gap: 6px; flex: 0 0 auto; }

/* ---------- drag & drop onto the conversation ---------- */
#conv { position: relative; }
#conv.drag-over::after {
  content: "Drop to attach"; position: absolute; inset: 8px; z-index: 10;
  border: 2px dashed var(--accent); border-radius: 12px; background: rgba(15, 122, 84, 0.08);
  display: grid; place-items: center; font-weight: 700; color: var(--accent);
  pointer-events: none;
}

@media (max-width: 860px) {
  .media-img, .media-video { max-width: 68vw; }
  .attach-preview { flex-wrap: wrap; }
  .ap-actions { flex-direction: row; width: 100%; justify-content: flex-end; }
  .attach-menu { width: 208px; }
}

/* ---------- onboarding health (per-device sync stats) ---------- */
.sect-h { margin: 26px 0 12px; font-size: 15px; }
.dev-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.dev-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.dev-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dev-name { font-weight: 700; }
.pstatus.ok { color: var(--accent); }
.pstatus.off { color: var(--ink-soft); }
.dev-num { font-size: 12px; color: var(--ink-soft); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.dev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 6px; margin-bottom: 10px; }
.dev-grid div { display: flex; flex-direction: column; }
.dev-grid b { font-size: 17px; font-variant-numeric: tabular-nums; }
.dev-grid span { font-size: 11px; color: var(--ink-soft); }
.dev-hist, .dev-flow { font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.dev-days { margin-left: 6px; color: var(--accent); font-weight: 600; }
.dev-media { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.dev-media.muted, .muted { color: var(--ink-soft); font-size: 12px; }
.mchip { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.mchip.warn { background: #fdf0e0; color: var(--warn); }
/* Expired media is a statement of fact, not something to act on — keep it quiet. */
.mchip.muted { background: var(--surface-2, #eceff3); color: var(--muted, #6b7280); }
.tbl-scroll { overflow-x: auto; }

/* ---------- group table controls ---------- */
.grp-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.grp-search { flex: 1 1 220px; min-width: 180px; }
.grp-controls select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font-size: 12.5px; }
.grp-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pager-btns { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager-now { font-size: 12px; color: var(--ink-soft); padding: 0 4px; font-variant-numeric: tabular-nums; }
.btn.sm[disabled] { opacity: 0.4; cursor: default; }

/* ---------- voice notes ---------- */
.composer-side { display: flex; align-items: center; gap: 8px; }
.voice-btn {
  width: 38px; height: 38px; flex: 0 0 38px;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--panel); font-size: 17px; line-height: 1;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease;
}
.voice-btn:hover { background: var(--ground); border-color: var(--accent); }
.voice-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.voice-bar {
  display: flex; align-items: center; gap: 10px;
  margin-top: 8px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
}
.voice-bar.hidden { display: none; }
.voice-label { font-size: 13px; color: var(--ink-soft); }
/* Tabular figures so the timer does not jitter as the digits change. */
.voice-time { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.voice-spacer { flex: 1; }
.voice-bar button {
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 12px;
  background: var(--panel); font: inherit; font-size: 13px; cursor: pointer;
}
.voice-send { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff; font-weight: 600; }
.voice-cancel { color: var(--ink-soft); }

.voice-dot {
  width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #c0392b;
  animation: voice-pulse 1.2s ease-in-out infinite;
}
@keyframes voice-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
/* A blinking dot is decoration, not information — the word "Recording" and the
   running timer already carry the state. */
@media (prefers-reduced-motion: reduce) { .voice-dot { animation: none; } }

/* ================= Mail module ================= */
.mail-list-pane { flex: 0 0 360px; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); background: var(--panel); }
.mail-view-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--ground); }
.mail-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; flex: none; }
.mail-head h2 { margin: 0; font-size: 18px; }
/* horizontal filter strip — stays one row no matter how many mailboxes */
.mail-filter { display: flex; flex-wrap: nowrap; gap: 6px; padding: 0 12px 8px; overflow-x: auto; flex: none; scrollbar-width: none; }
.mail-filter::-webkit-scrollbar { display: none; }
.mail-fchip { flex: none; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--ground); color: var(--ink-soft); cursor: pointer; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-fchip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.mail-search { padding: 0 12px 8px; flex: none; }
.mail-search .search-input { width: 100%; }
.mail-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mail-row { display: flex; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; }
.mail-row:hover { background: var(--ground); }
.mail-row.active { background: var(--accent-soft); }
.mail-row.unread::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.mail-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 14px; margin-top: 2px; }
.mail-row-body { flex: 1; min-width: 0; }
.mail-row-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.mail-from { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row.unread .mail-from, .mail-row.unread .mail-subject { font-weight: 800; }
.mail-time { font-size: 11.5px; color: var(--ink-soft); flex: none; }
.mail-subject { font-size: 13px; color: var(--ink); margin: 1px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-snippet { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-row-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
/* visible, subtle scrollbars so it's obvious the list / thread scroll */
.mail-items::-webkit-scrollbar, .mail-messages::-webkit-scrollbar { width: 10px; }
.mail-items::-webkit-scrollbar-thumb, .mail-messages::-webkit-scrollbar-thumb { background: #c4d2cc; border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; }
.mail-items:hover::-webkit-scrollbar-thumb, .mail-messages:hover::-webkit-scrollbar-thumb { background: #a9bcb3; background-clip: padding-box; }
.mail-items, .mail-messages { scrollbar-width: thin; }
.mail-chip { font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--ground); border: 1px solid var(--line); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.mail-chip-gmail { background: #fdeeee; border-color: #f5c9c9; color: #b3261e; }
.mail-chip-zoho { background: #fff4e5; border-color: #f3d9ac; color: #a15c00; }
.mail-lchip { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mail-empty, .mbx-empty { padding: 18px 16px; color: var(--ink-soft); font-size: 13px; }
.mail-connect-empty { padding: 40px 20px; text-align: center; color: var(--ink-soft); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mail-connect-emoji { font-size: 40px; }
.mail-connect-hint { font-size: 12px; }

/* thread view */
.mail-thread-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--panel); }
.mail-back { display: none; }
.mail-thread-subject { font-size: 16px; font-weight: 700; color: var(--ink); }
.mail-thread-sub { margin-top: 2px; }
.mail-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 28px; display: flex; flex-direction: column; gap: 14px; }
/* the thread list column must scroll on its own too */
.mail-list-pane { min-height: 0; }
.mail-items { flex: 1; min-height: 0; overflow-y: auto; }
.mail-msg { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mail-msg.out { background: #f0f8f4; border-color: #cbe7d9; }
.mail-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--ground); }
.mail-msg-from { font-weight: 700; font-size: 13.5px; color: var(--ink); }
.mail-msg-meta { font-size: 12px; color: var(--ink-soft); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-msg-time { font-size: 12px; color: var(--ink-soft); flex: none; }
.mail-body { width: 100%; border: none; display: block; background: #fff; min-height: 40px;
  opacity: 0; transition: opacity .18s ease, height .16s ease; }
.mail-body.ready { opacity: 1; }
.mail-msg:has(.mail-body:not(.ready)) { background: linear-gradient(100deg, var(--panel) 30%, var(--ground) 50%, var(--panel) 70%); }
.mail-quote-toggle { margin: 0 14px 8px; background: var(--ground); border: 1px solid var(--line); border-radius: 6px; font-size: 12px; color: var(--ink-soft); padding: 3px 10px; cursor: pointer; }
.mail-quote-toggle.hidden { display: none; }
.mail-attachments { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.mail-attach { font-size: 12px; padding: 3px 9px; border-radius: 6px; background: var(--ground); border: 1px solid var(--line); color: var(--ink); }
.mail-attach-size { color: var(--ink-soft); }

/* reply composer */
.mail-reply { border-top: 1px solid var(--line); background: var(--panel); flex: none; position: relative; z-index: 1; }
/* collapsed pill */
.mail-reply-trigger { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 12px 16px; background: none; border: none; cursor: pointer; }
.mail-reply-trigger:hover { background: var(--ground); }
.mrt-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent); font-size: 15px; flex: none; }
.mrt-text { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mrt-from { font-size: 12px; color: var(--ink-soft); margin-left: auto; max-width: 45%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* expanded composer */
.mail-reply-compose { display: none; padding: 12px 16px 14px; }
.mail-reply.open .mail-reply-trigger { display: none; }
.mail-reply.open .mail-reply-compose { display: block; }
.mail-reply-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--ink-soft); margin-bottom: 8px; }
.mail-reply-meta b { color: var(--ink); font-weight: 600; }
.mail-reply-compose textarea { width: 100%; resize: vertical; min-height: 96px; border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 13px; font: inherit; font-size: 14px; background: var(--ground); color: var(--ink); }
.mail-reply-compose textarea:focus { outline: none; border-color: var(--accent); background: var(--panel);
  box-shadow: 0 0 0 3px var(--accent-soft); }
.mail-reply-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mail-reply-actions .btn.primary { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 8px; }
.mrc-send-ico { font-size: 12px; transform: translateY(-1px); }
.btn.subtle { background: none; border-color: transparent; color: var(--ink-soft); }
.btn.subtle:hover { background: var(--ground); color: var(--ink); }
.mail-reply-hint { font-size: 11.5px; color: var(--ink-soft); margin-left: auto; }

/* Settings → Mailboxes */
.mbx-rows { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.mbx-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 12px 14px; }
.mbx-icon { font-size: 22px; }
.mbx-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.mbx-email { font-weight: 700; font-size: 14px; }
.mbx-sub { font-size: 12px; color: var(--ink-soft); }
.mbx-err { color: var(--danger); }
.mbx-connect { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
/* Zoho app-password connect form */
.mbx-pw-form { border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  padding: 14px 16px; margin: 0 0 14px; display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.mbx-pw-hint { font-size: 12px; color: var(--ink-soft); margin: 0; line-height: 1.5; }
.mbx-pw-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px;
  background: var(--ground); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.mbx-pw-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.mbx-pw-form input { font-size: 14px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--ground); color: var(--ink); }
.mbx-pw-form input:focus { outline: none; border-color: var(--accent); }
.mbx-pw-adv { font-size: 12px; }
.mbx-pw-adv summary { cursor: pointer; color: var(--ink-soft); user-select: none; }
.mbx-pw-adv[open] { display: flex; flex-direction: column; gap: 10px; }
.mbx-pw-adv[open] summary { margin-bottom: 6px; }
.mbx-pw-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mbx-pw-msg { font-size: 12px; color: var(--ink-soft); }
.mbx-pw-msg.mbx-pw-err { color: var(--danger); }

/* Connect-Zoho dialog */
.modal-sub { font-size: 13px; color: var(--ink-soft); margin: 2px 0 16px; line-height: 1.5; }
.zconnect-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.zconnect-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--ground);
  color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.zconnect-tab.active { border-color: var(--accent); color: var(--ink); background: var(--panel);
  box-shadow: 0 0 0 1px var(--accent) inset; }
.zconnect-badge { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--accent); border-radius: 999px; padding: 2px 7px; }
.zconnect-steps { margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; color: var(--ink); line-height: 1.55; }
.zconnect-steps li { padding-left: 3px; }
.zconnect-note { font-size: 12px; color: var(--ink-soft); background: var(--note);
  border-left: 3px solid var(--warn); border-radius: 8px; padding: 10px 12px; margin: 0 0 16px; line-height: 1.5; }
/* Reuse the mailbox password-form field styles, but flat inside the modal. */
#modal .mbx-pw-form { border: none; padding: 0; margin: 0; max-width: none; gap: 12px; }

/* Mobile: stack the connect tabs, keep mailbox rows from overflowing, and use
   16px inputs so iOS doesn't zoom on focus. */
@media (max-width: 640px) {
  .zconnect-tabs { flex-direction: column; gap: 8px; }
  .zconnect-tab { justify-content: flex-start; }
  .mbx-pw-form input { font-size: 16px; }
  .mbx-row { flex-wrap: wrap; }
  .mbx-row .btn.sm { flex: 1 1 auto; }
  .mbx-info { flex: 1 1 100%; }
  .mbx-connect .btn { flex: 1 1 auto; }
}

/* mobile: one pane at a time. Mail is an app-like two-pane view (like the inbox),
   so override the generic "non-inbox view scrolls as a block" rule — it needs a
   flex column that fills the screen, not a scrolling block. */
@media (max-width: 640px) {
  body[data-view="mail"] #view { display: flex; overflow: hidden; }
  .mail-list-pane, .mail-view-pane { flex: 1 1 auto; min-width: 0; min-height: 0; }
  .mail-list-pane { border-right: none; }
  body.mail-open .mail-list-pane { display: none; }
  body:not(.mail-open) .mail-view-pane { display: none; }
  .mail-back { display: inline-flex; }
  .mail-head { padding: 12px 14px 6px; }
  .mail-head h2 { font-size: 17px; }
  .mail-fchip { max-width: 140px; }
  .mail-messages { padding: 12px 12px 24px; gap: 12px; }
  .mail-msg-head { padding: 9px 11px; }
  .mail-msg-meta { flex: 1 1 100%; order: 3; }   /* to/cc wraps to its own line */
  .mail-reply-trigger { padding: 11px 12px; }
  .mail-reply-compose { padding: 10px 12px 12px; }
  .mail-thread-subject { font-size: 15px; }
  /* the app top bar is redundant while reading a thread — reclaim the height */
  body[data-view="mail"].mail-open #topbar { display: none; }
}

/* Mail thread → tickets strip */
.mail-tickets { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 18px; border-bottom: 1px solid var(--line); background: var(--panel); }
.mail-ticket-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--ground); color: var(--ink); cursor: pointer; }
.mail-ticket-chip:hover { border-color: var(--accent); color: var(--accent); }
.mail-thread-head #mail-make-ticket { flex: none; }

/* Mail thread → assign / label bar (team access) */
.mail-thread-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 18px; border-bottom: 1px solid var(--line); background: var(--panel); }
.mail-assignee { padding: 5px 9px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 7px; background: var(--ground); color: var(--ink); cursor: pointer; }
.mail-labels { display: flex; flex-wrap: wrap; gap: 5px; }
.mail-labels-hint { font-size: 12px; color: var(--ink-soft); }
.mail-lbtn { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); background: var(--ground); color: var(--ink-soft); cursor: pointer; }
.mail-lbtn.on { background: var(--lc); border-color: var(--lc); color: #fff; font-weight: 600; }

/* ================= Onboarding checklist widget ================= */
#onboarding-widget { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: none; }
#onboarding-widget.show { display: block; }
/* collapsed pill */
.ob-pill { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px 10px 11px; border: none;
  border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; font-size: 13.5px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(15, 122, 84, 0.35); }
.ob-pill:hover { filter: brightness(1.05); }
.ob-pill-ring { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22); font-size: 11.5px; font-weight: 700; }
/* expanded card */
.ob-card { width: 340px; max-width: calc(100vw - 40px); background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 16px 44px rgba(20, 30, 26, 0.22); overflow: hidden; }
.ob-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; }
.ob-head-title { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.ob-count { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; margin-left: 4px; }
.ob-head-actions { display: flex; gap: 4px; }
.ob-icon { border: none; background: none; color: var(--ink-soft); font-size: 15px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.ob-icon:hover { background: var(--ground); color: var(--ink); }
.ob-progress { height: 5px; background: var(--ground); margin: 0 15px 8px; border-radius: 999px; overflow: hidden; }
.ob-progress > span { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
.ob-items { max-height: 46vh; overflow-y: auto; padding: 4px 8px 10px; }
.ob-item { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 9px; }
.ob-item + .ob-item { border-top: 1px solid var(--ground); }
.ob-check { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line);
  display: grid; place-items: center; font-size: 12px; color: #fff; }
.ob-item.done .ob-check { background: var(--accent); border-color: var(--accent); }
.ob-item-body { flex: 1; min-width: 0; }
.ob-item-title { font-size: 13px; font-weight: 600; color: var(--ink); }
.ob-item.done .ob-item-title { color: var(--ink-soft); text-decoration: line-through; }
.ob-item-desc { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }
.ob-item.done .ob-item-desc { display: none; }
.ob-cta { flex: none; }
.ob-menu { padding: 6px 10px 10px; border-top: 1px solid var(--ground); }
.ob-menu button { border: none; background: none; color: var(--danger); font-size: 12.5px; cursor: pointer; padding: 4px; }
.ob-menu button:hover { text-decoration: underline; }
/* confetti */
.ob-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 200; overflow: hidden; }
.ob-confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: ob-fall 2.4s linear forwards; }
@keyframes ob-fall { to { transform: translateY(102vh) rotate(560deg); opacity: 0.2; } }

/* getting-started settings tab reuse */
.gs-progress { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.gs-progress .ob-progress { flex: 1; margin: 0; height: 7px; }
.gs-count { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.gs-items { max-height: none; border: 1px solid var(--line); border-radius: 12px; }

/* ================= Coach marks ================= */
#coach-layer { position: fixed; inset: 0; z-index: 120; background: rgba(20, 30, 26, 0.45); }
#coach-layer.hidden { display: none; }
.coach-spot { position: absolute; border-radius: 10px; box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgba(20,30,26,0.45);
  background: transparent; transition: all .2s ease; }
.coach-pop { position: absolute; width: 280px; max-width: calc(100vw - 24px); background: var(--panel); border-radius: 12px;
  box-shadow: 0 16px 44px rgba(20, 30, 26, 0.3); padding: 14px 16px; }
.coach-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.coach-body { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 12px; }
.coach-actions { display: flex; align-items: center; justify-content: space-between; }
.coach-skip { border: none; background: none; color: var(--ink-soft); font-size: 12.5px; cursor: pointer; }
.coach-skip:hover { color: var(--ink); text-decoration: underline; }

/* mobile: widget becomes a full-width bottom sheet-ish card */
@media (max-width: 640px) {
  #onboarding-widget { right: 10px; left: 10px; bottom: 66px; }  /* clear the bottom nav */
  #onboarding-widget.show { display: flex; justify-content: flex-end; }
  .ob-card { width: 100%; max-width: 100%; }
  .coach-pop { left: 12px !important; right: 12px; width: auto; }
}

/* onboarding item error + retry, and getting-started funnel */
.ob-item.has-err .ob-item-title { color: var(--danger); }
.ob-item-err { font-size: 11.5px; color: var(--danger); margin-top: 3px; line-height: 1.4; }
.gs-analytics { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.gs-ana-h { font-size: 13px; margin: 0 0 8px; color: var(--ink); }
.gs-evs { display: flex; flex-direction: column; gap: 4px; max-width: 460px; }
.gs-ev { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--ink-soft); }
.gs-ev b { color: var(--ink); }
.gs-ev-empty { font-size: 12.5px; color: var(--ink-soft); padding: 6px 0; }
/* ================= Contacts module ================= */
.contacts-list-pane { flex: 0 0 380px; display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); background: var(--panel); }
.contacts-detail-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--ground); }
.contacts-head { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 8px; flex: none; }
.contacts-head h2 { margin: 0; font-size: 18px; }
.contacts-count { font-size: 12px; color: var(--ink-soft); }
.contacts-search { padding: 0 12px 8px; flex: none; }
.contacts-search .search-input { width: 100%; }
/* segment chips */
.contacts-segments { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; flex: none; scrollbar-width: none; }
.contacts-segments::-webkit-scrollbar { display: none; }
.cseg { flex: none; font-size: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--ground); color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.cseg.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.cseg-n { font-weight: 700; opacity: .8; margin-left: 2px; }
/* filter row */
.contacts-filters { padding: 0 12px 8px; flex: none; display: flex; flex-direction: column; gap: 7px; }
.cfilter-row { display: flex; gap: 7px; }
.cfilter-sel, .cfilter-inp { flex: 1; min-width: 0; font-size: 12.5px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--ground); color: var(--ink); }
.cfilter-sel:focus, .cfilter-inp:focus { outline: none; border-color: var(--accent); }
/* single horizontal row that scrolls sideways — stays one line no matter how many
   labels, so the filter area never grows tall. */
.cfilter-labels { display: flex; flex-wrap: nowrap; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.cfilter-labels::-webkit-scrollbar { height: 6px; }
.cfilter-labels::-webkit-scrollbar-thumb { background: #c4d2cc; border-radius: 999px; }
.cflabel { flex: none; font-size: 11.5px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--ground); color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.cflabel.on { background: var(--lc); border-color: var(--lc); color: var(--tc, #fff); font-weight: 600; }
/* list */
.contacts-items { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.contacts-items::-webkit-scrollbar { width: 10px; }
.contacts-items::-webkit-scrollbar-thumb { background: #c4d2cc; border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; }
.contacts-empty, .contacts-muted { padding: 18px 16px; color: var(--ink-soft); font-size: 13px; }
.contacts-more { padding: 14px 16px; text-align: center; color: var(--ink-soft); font-size: 12px; }
.ctag { font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; vertical-align: middle;
  background: var(--ground); border: 1px solid var(--line); color: var(--ink-soft); border-radius: 4px; padding: 1px 5px; margin-left: 4px; }
.contacts-muted { padding: 6px 0; }
.contact-row { display: flex; gap: 11px; align-items: flex-start; padding: 11px 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.contact-row:hover { background: var(--ground); }
.contact-row.active { background: var(--accent-soft); }
.contact-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; }
.contact-avatar.lg { width: 52px; height: 52px; font-size: 20px; }
.contact-row-body { flex: 1; min-width: 0; }
.contact-row-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.contact-name { font-size: 14px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-when { font-size: 11.5px; color: var(--ink-soft); flex: none; }
.contact-handle { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 1px 0 4px; }
.contact-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.csrc { font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csrc-wa { background: #eafaf1; border-color: #bfe6d0; color: #0c7a48; }
.csrc-mail { background: #fdeeee; border-color: #f5c9c9; color: #b3261e; }
.clchip { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.contact-count { flex: none; align-self: center; font-size: 12px; font-weight: 700; color: var(--ink-soft); background: var(--ground); border-radius: 999px; padding: 2px 9px; min-width: 26px; text-align: center; }
/* detail */
.contact-detail-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: var(--panel); flex: none; }
.contact-back { display: none; }
.contact-detail-name { font-size: 17px; font-weight: 700; color: var(--ink); }
.contact-detail-handle { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.contact-detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 28px; }
.cstats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.cstat { flex: 1; min-width: 90px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.cstat-v { font-size: 16px; font-weight: 700; color: var(--ink); }
.cstat-l { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .03em; }
.csection { margin-bottom: 20px; }
.csection h4 { margin: 0 0 8px; font-size: 13px; color: var(--ink); }
.csection-hint { font-weight: 400; color: var(--ink-soft); font-size: 11.5px; }
.cident { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); margin-bottom: 6px; }
.cident-name { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.cident-src { font-size: 12px; color: var(--ink-soft); }
.cinherited { display: flex; flex-wrap: wrap; gap: 8px; }
.cichip { font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--lc); background: var(--lc); color: var(--tc, #fff); }
/* Properties in the contact detail reuse the chat's .cp-* widget styles verbatim. */
.crecents { display: flex; flex-direction: column; gap: 6px; }
.crecent { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: pointer; }
.crecent:hover { border-color: var(--accent); }
.crecent-ic { flex: none; }
.crecent-t { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crecent-w { flex: none; font-size: 11.5px; color: var(--ink-soft); }

/* mobile: single pane, like Mail */
@media (max-width: 640px) {
  body[data-view="contacts"] #view { display: flex; overflow: hidden; }
  .contacts-list-pane, .contacts-detail-pane { flex: 1 1 auto; min-width: 0; min-height: 0; }
  .contacts-list-pane { border-right: none; }
  body.contact-open .contacts-list-pane { display: none; }
  body:not(.contact-open) .contacts-detail-pane { display: none; }
  .contact-back { display: inline-flex; }
  .cfilter-sel, .cfilter-inp, .cp-input { font-size: 16px; }   /* no iOS zoom-on-focus */
  /* reading a contact takes the whole screen — reclaim the app top bar */
  body[data-view="contacts"].contact-open #topbar { display: none; }
  .contacts-head { padding: 12px 14px 6px; }
  .contacts-segments, .contacts-filters, .contacts-search { padding-left: 12px; padding-right: 12px; }
  .cstats { gap: 8px; }
  .cstat { min-width: 72px; padding: 9px 10px; }
}

/* ================= Disconnected-number banner ================= */
/* Sits directly under the topbar, above every view. Hidden until a real phone
   drops — a silent inbox is indistinguishable from a quiet one, and only this
   tells them apart. Clay, not the accent: this is a fault, not a promotion. */
#phone-banner { display: none; }
#phone-banner.show { display: block; }
.phone-banner-inner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px;
  background: #FDF1EE;
  border-bottom: 1px solid #F0CFC6;
  color: #7A3D33;
  font-size: 14px; line-height: 1.5;
}
.pb-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #8C4A3F; flex: none;
  animation: pb-pulse 2s ease-in-out infinite;
}
@keyframes pb-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .pb-dot { animation: none } }
.pb-text { flex: 1 1 320px; min-width: 0; }
.pb-text b { font-weight: 680; }
.pb-cta {
  flex: none; padding: 6px 14px; border-radius: 8px; cursor: pointer;
  background: #8C4A3F; color: #fff; border: 1px solid #8C4A3F;
  font: inherit; font-weight: 640; font-size: 13.5px;
}
.pb-cta:hover { background: #773F35; }
.pb-cta:focus-visible { outline: 2px solid #8C4A3F; outline-offset: 2px; }
.pb-hint { flex: none; font-size: 13px; opacity: .8; }
@media (max-width: 640px) { .phone-banner-inner { padding: 9px 12px; font-size: 13.5px; } }