/* PREVIEW — Cabarrus team chat (cabarrus.html only).
   Oct 22 2026 redesign: borrows the storybook language of Who we serve → Charlotte "History"
   (small-caps kicker, IM Fell heading, gold fleuron rule, ✦ chips, Garamond text, gold rail).
   Fields match the page's own fields (View by person select) in each theme. Purely visual. */

/* ---------- theme tokens ---------- */
.cab-chat-panel {
  --cc-ink: #f4f7fb; --cc-muted: #c4b5e0; --cc-gold: #E2B65C; --cc-accent: #e879f9;
  --cc-rail: rgba(226,182,92,.55);
  --cc-card: rgba(255,255,255,.045); --cc-card-line: rgba(255,255,255,.07);
  --cc-me: rgba(226,182,92,.11); --cc-me-line: rgba(226,182,92,.5);
  --cc-well: radial-gradient(120% 90% at 50% 0%, rgba(232,121,249,.07), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.05));
  --cc-field: rgba(0,0,0,.35); --cc-field-line: rgba(232,121,249,.18); --cc-field-hover: rgba(232,121,249,.34);
  --cc-ph: rgba(196,181,224,.78); --cc-radius: 12px;
  --cc-focus: 0 0 0 3px rgba(226,182,92,.22), 0 0 16px rgba(232,121,249,.22); --cc-focus-line: rgba(226,182,92,.75);
  --cc-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23E2B65C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cc-chip: rgba(226,182,92,.14);
  --cc-note-bg: linear-gradient(90deg, rgba(226,182,92,.13), rgba(226,182,92,.04));
  --cc-role-bg: rgba(226,182,92,.16); --cc-role-ink: #F1D9A8;
  --cc-head: "IM Fell English SC", "Playfair Display", Georgia, serif;
  --cc-body: "EB Garamond", Georgia, "Times New Roman", serif;
  --cc-sans: "Source Sans 3", system-ui, sans-serif;
}
html[data-theme="maroon"] .cab-chat-panel {
  --cc-ink: #1F1A1D; --cc-muted: #5E5459; --cc-gold: #B48A3C; --cc-accent: #8A1538;
  --cc-rail: rgba(180,138,60,.55);
  --cc-card: #fff; --cc-card-line: rgba(92,6,50,.09);
  --cc-me: #FBF5EA; --cc-me-line: #C9A45C;
  --cc-well: linear-gradient(180deg, rgba(92,6,50,.035), rgba(180,138,60,.04) 70%, transparent);
  --cc-field: #fff; --cc-field-line: #CFC3C8; --cc-field-hover: #B9A9B0;
  --cc-ph: #7A6B72; --cc-radius: 8px;
  --cc-focus: 0 0 0 3px rgba(180,138,60,.25); --cc-focus-line: #B48A3C;
  --cc-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A1538' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cc-chip: rgba(138,21,56,.08);
  --cc-note-bg: linear-gradient(90deg, #FBF5EA, rgba(251,245,234,.35));
  --cc-role-bg: rgba(138,21,56,.08); --cc-role-ink: #8A1538;
}
html[data-theme="enterprise"] .cab-chat-panel {
  --cc-ink: #14202E; --cc-muted: #405068; --cc-gold: #C8902E; --cc-accent: #1A6E8E;
  --cc-rail: rgba(200,144,46,.55);
  --cc-card: #fff; --cc-card-line: rgba(15,53,80,.09);
  --cc-me: #FBF3E4; --cc-me-line: #C8902E;
  --cc-well: linear-gradient(180deg, rgba(15,53,80,.035), rgba(200,144,46,.035) 70%, transparent);
  --cc-field: #fff; --cc-field-line: #C4CFDB; --cc-field-hover: #A9B7C6;
  --cc-ph: #5A6B80; --cc-radius: 6px;
  --cc-focus: 0 0 0 3px rgba(26,110,142,.22); --cc-focus-line: #1A6E8E;
  --cc-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231A6E8E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --cc-chip: rgba(26,110,142,.09);
  --cc-note-bg: linear-gradient(90deg, #FBF3E4, rgba(251,243,228,.35));
  --cc-role-bg: rgba(15,53,80,.08); --cc-role-ink: #0F3550;
}

/* ---------- head: kicker, storybook title, fleuron rule ---------- */
.cab-chat-panel { margin-top: 16px; }
.cab-chat-head { position: relative; text-align: center; padding: 4px 0 0; }
.cab-chat-panel .cab-chat-kicker {
  margin: 0 0 4px; font-family: var(--cc-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cc-gold);
}
html body .cab-chat-panel h2#cabChatTitle, html[data-theme] body .cab-chat-panel h2#cabChatTitle {
  margin: 0; font-family: var(--cc-head) !important; font-weight: 400 !important;
  font-size: clamp(24px, 4.6vw, 30px) !important; line-height: 1.15 !important; letter-spacing: .01em;
  color: var(--cc-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important;
}
.cab-chat-panel h2#cabChatTitle::after {
  content: "\2766"; display: block; margin: 8px auto 0; font-size: 16px; line-height: 1; color: var(--cc-gold);
  background: linear-gradient(90deg, transparent, var(--cc-gold) 30%, transparent 46%, transparent 54%, var(--cc-gold) 70%, transparent) center / min(240px, 70%) 1px no-repeat;
}
.cab-chat-live {
  position: absolute; top: 2px; right: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 999px; font-family: var(--cc-sans); font-size: 11px; font-weight: 600;
  color: var(--cc-muted); background: var(--cc-chip);
}
.cab-chat-dot { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; transition: background .3s, box-shadow .3s; }
.cab-chat-live.is-live .cab-chat-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); animation: cc-pulse 2.6s ease-in-out infinite; }
@keyframes cc-pulse { 50% { box-shadow: 0 0 0 5px rgba(34,197,94,.06); } }
html body .cab-chat-panel .hint.cab-chat-sub {
  margin: 10px auto 14px; max-width: 46ch; text-align: center; font-size: 13px; color: var(--cc-muted) !important;
}

/* ---------- the thread: a soft well (no hard inner box) with a gold timeline rail ---------- */
.cab-chat-list {
  position: relative; height: 300px; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 12px; padding: 16px 6px 16px 0;
  background: var(--cc-well); border: 0; border-radius: 14px;
  /* Oct 29 2026 (Jeremy): no fade mask. The old top/bottom fade made the first line look washed out and then
     cut off hard at the scroll edge. Text now stays fully crisp; a quiet hairline frames the scroll well so a
     message sliding under the edge reads as "scroll for more", not as a broken line. */
  border: 1px solid var(--cc-well-line, rgba(127,127,127,.18)); padding: 14px 6px 14px 0;
  scrollbar-width: thin; scrollbar-color: var(--cc-rail) transparent;
}
/* the gold rail is drawn per message (so it scrolls with the thread), joining chip to chip */
.cab-msg::after {
  content: ""; position: absolute; left: -19px; top: -12px; bottom: -12px; width: 1px; z-index: -1; pointer-events: none;
  background: var(--cc-rail);
}
.cab-chat-list > .cab-msg:first-of-type::after { top: 20px; background: linear-gradient(180deg, var(--cc-rail), var(--cc-rail)); }
.cab-chat-list > .cab-msg:last-child::after { bottom: auto; height: 32px; }
.cab-chat-list > .cab-msg:first-of-type:last-child::after { display: none; }
.cab-chat-list > .cab-msg:first-of-type { margin-top: auto; }   /* short threads sit at the bottom, near the composer */
.cab-chat-list:focus-visible { outline: 2px solid var(--cc-focus-line); outline-offset: 2px; }

.cab-chat-empty {
  margin: auto; padding: 0 20px; text-align: center; font-family: var(--cc-body); font-style: italic;
  font-size: 17px; line-height: 1.4; color: var(--cc-muted);
}
.cab-chat-empty::before { content: "\2766"; display: block; margin: 0 auto 6px; font-style: normal; font-size: 22px; color: var(--cc-gold); }

.cab-msg {
  position: relative; align-self: stretch; max-width: none; margin: 0 4px 0 36px; padding: 10px 14px 11px;
  border-radius: 12px; background: var(--cc-card); border: 1px solid var(--cc-card-line);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  animation: cc-in .28s ease-out both;
}
@keyframes cc-in { from { opacity: 0; transform: translateY(4px); } }
.cab-msg::before {   /* ✦ chip on the rail, like the History block icons */
  content: "\2726"; position: absolute; z-index: 1; left: -29px; top: 10px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; line-height: 1; color: var(--cc-gold);
  background: var(--cc-chip); box-shadow: 0 0 0 3px var(--cc-dot-ring, transparent);
}
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) .cab-msg::before { background: #241638; box-shadow: inset 0 0 0 1px rgba(226,182,92,.35); }
html[data-theme="maroon"] .cab-msg::before, html[data-theme="enterprise"] .cab-msg::before { background: #fff; box-shadow: inset 0 0 0 1px var(--cc-rail); }
.cab-msg.is-me { background: var(--cc-me); border-color: transparent; box-shadow: inset 3px 0 0 var(--cc-me-line), 0 1px 2px rgba(0,0,0,.04); }
.cab-msg.is-me::before { color: var(--cc-accent); }
.cab-msg-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin-bottom: 2px; font-family: var(--cc-sans); }
.cab-msg-name { font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--cc-ink); }
.cab-msg-role {
  display: inline-block; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.6; background: var(--cc-role-bg); color: var(--cc-role-ink);
}
.cab-msg-time { margin-left: auto; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--cc-muted); }
.cab-msg-text {
  font-family: var(--cc-body); font-size: 17px; line-height: 1.5; color: var(--cc-ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* long comments: 2-line preview + Show more / Show less (toggle added by JS only when cut off) */
.cab-msg-text.is-clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.cab-msg-more {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 -4px -8px; padding: 6px 8px; min-height: 32px;
  border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font-family: var(--cc-sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cc-gold); transition: background-color .18s, color .18s;
}
html[data-theme="maroon"] .cab-msg-more { color: #8A1538; }
html[data-theme="enterprise"] .cab-msg-more { color: #1A6E8E; }
.cab-msg-more:hover { background: var(--cc-chip); }
.cab-msg-more:active { transform: translateY(1px); }
.cab-msg-more:focus-visible { outline: 2px solid var(--cc-focus-line); outline-offset: 1px; }
.cab-msg-more-ico { width: 10px; height: 7px; transition: transform .2s ease; }
.cab-msg-more[aria-expanded="true"] .cab-msg-more-ico { transform: rotate(180deg); }
@media (max-width: 520px) { .cab-msg-more { min-height: 40px; padding: 8px 10px; margin-bottom: -8px; } }
@media (prefers-reduced-motion: reduce) { .cab-msg-more-ico { transition: none; } }

/* ---------- quick reactions (Oct 22 2026, PREVIEW) ---------- */
.cab-chat-panel {
  --cc-pill: rgba(255,255,255,.05); --cc-pill-line: rgba(255,255,255,.12); --cc-pill-ink: #f4f7fb;
  --cc-pill-mine: rgba(226,182,92,.18); --cc-pill-mine-line: rgba(226,182,92,.75);
  --cc-pop: #1d1030; --cc-pop-line: rgba(226,182,92,.35); --cc-tip: #0d0618; --cc-tip-ink: #fdf6e7;
}
html[data-theme="maroon"] .cab-chat-panel {
  --cc-pill: #FBF7F3; --cc-pill-line: rgba(92,6,50,.14); --cc-pill-ink: #3A2730;
  --cc-pill-mine: #F7EBD3; --cc-pill-mine-line: #B48A3C;
  --cc-pop: #fff; --cc-pop-line: rgba(180,138,60,.45); --cc-tip: #2A1A20; --cc-tip-ink: #fff;
}
html[data-theme="enterprise"] .cab-chat-panel {
  --cc-pill: #F5F8FB; --cc-pill-line: rgba(15,53,80,.14); --cc-pill-ink: #14202E;
  --cc-pill-mine: #FBF0DB; --cc-pill-mine-line: #C8902E;
  --cc-pop: #fff; --cc-pop-line: rgba(15,53,80,.18); --cc-tip: #14202E; --cc-tip-ink: #fff;
}
.cab-msg:hover, .cab-msg:focus-within { z-index: 4; }
.cab-msg:has(.cab-react-picker), .cab-msg:has(.show-tip) { z-index: 6; }
.cab-react-row {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 30px; margin: 8px 0 -2px;
}
.cab-react-pill, .cab-react-add {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  height: 30px; min-width: 30px; padding: 0 10px 0 8px; border-radius: 999px; cursor: pointer;
  font-family: var(--cc-sans); line-height: 1; -webkit-tap-highlight-color: transparent;
  border: 1px solid var(--cc-pill-line); background: var(--cc-pill); color: var(--cc-pill-ink);
  transition: transform .15s ease, background-color .15s, border-color .15s, box-shadow .15s, opacity .15s;
}
.cab-react-emoji { font-size: 15px; line-height: 1; }
.cab-react-count { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cab-react-pill.is-mine { background: var(--cc-pill-mine); border-color: var(--cc-pill-mine-line); box-shadow: inset 0 0 0 .5px var(--cc-pill-mine-line); }
.cab-react-pill:hover { transform: translateY(-1px); border-color: var(--cc-pill-mine-line); }
.cab-react-pill:active, .cab-react-add:active { transform: translateY(1px) scale(.97); }
.cab-react-add { padding: 0; width: 30px; color: var(--cc-muted); border-style: dashed; background: transparent; opacity: .7; }
.cab-react-add svg { width: 17px; height: 17px; }
.cab-msg:hover .cab-react-add, .cab-react-add:focus-visible, .cab-react-add[aria-expanded="true"] { opacity: 1; color: var(--cc-gold); border-color: var(--cc-pill-mine-line); }
.cab-react-pill:focus-visible, .cab-react-add:focus-visible, .cab-react-opt:focus-visible { outline: 2px solid var(--cc-focus-line); outline-offset: 2px; }

/* who reacted: hover / keyboard focus / long-press */
.cab-react-tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 3px); z-index: 3;
  width: max-content; max-width: 220px; padding: 6px 10px; border-radius: 8px; pointer-events: none;
  font-family: var(--cc-sans); font-size: 12px; font-weight: 600; line-height: 1.35; white-space: normal; text-align: center;
  background: var(--cc-tip); color: var(--cc-tip-ink); box-shadow: 0 6px 18px rgba(0,0,0,.22), inset 0 0 0 1px rgba(226,182,92,.35);
  opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
.cab-react-tip::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
  background: var(--cc-tip); transform: rotate(45deg); box-shadow: 1px 1px 0 rgba(226,182,92,.35);
}
.cab-react-pill:hover .cab-react-tip, .cab-react-pill:focus-visible .cab-react-tip, .cab-react-pill.show-tip .cab-react-tip {
  opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .15s, transform .15s, visibility 0s;
}
.cab-chat-list > .cab-msg:first-of-type .cab-react-tip { bottom: auto; top: calc(100% + 8px); }
.cab-chat-list > .cab-msg:first-of-type .cab-react-tip::after { top: auto; bottom: 100%; margin: 0 0 -4px -4px; }

/* picker */
.cab-react-picker {
  position: absolute; left: -4px; bottom: calc(100% + 8px); z-index: 5; display: flex; gap: 2px; padding: 5px;
  border-radius: 999px; background: var(--cc-pop); border: 1px solid var(--cc-pop-line);
  box-shadow: 0 10px 28px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.08);
  animation: cc-pop .16s ease-out both; transform-origin: 20px 100%;
}
.cab-react-picker.opens-down { bottom: auto; top: calc(100% + 8px); transform-origin: 20px 0; }
@keyframes cc-pop { from { opacity: 0; transform: translateY(4px) scale(.96); } }
.cab-react-opt {
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  font-size: 19px; line-height: 1; display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, background-color .14s;
}
.cab-react-opt:hover { transform: translateY(-2px) scale(1.12); background: var(--cc-chip); }
.cab-react-opt.is-mine { background: var(--cc-pill-mine); box-shadow: inset 0 0 0 1px var(--cc-pill-mine-line); }
@media (max-width: 520px), (hover: none) {
  .cab-react-row { min-height: 40px; gap: 8px; }
  .cab-react-pill, .cab-react-add { height: 40px; min-width: 40px; }
  .cab-react-pill { padding: 0 12px 0 10px; }
  .cab-react-add { width: 40px; opacity: .85; }
  .cab-react-emoji { font-size: 17px; }
  .cab-react-opt { width: 40px; height: 40px; font-size: 21px; }
  .cab-react-picker { gap: 0; padding: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .cab-react-picker { animation: none; }
  .cab-react-pill, .cab-react-add, .cab-react-opt, .cab-react-tip { transition: none; }
}

/* ---------- composer: fields match the page's own fields (View by person) ---------- */
.cab-chat-form { margin-top: 14px; }
.cab-chat-name { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
html body .cab-chat-panel .cab-chat-name label {
  margin: 0; flex: 0 0 auto; font-family: var(--cc-sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cc-muted) !important;
}
html body .cab-chat-panel select#cabChatName,
html body .cab-chat-panel input#cabChatInput {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; height: 46px; margin: 0;
  border-radius: var(--cc-radius) !important; border: 1px solid var(--cc-field-line) !important;
  background-color: var(--cc-field) !important; color: var(--cc-ink) !important;
  font-family: var(--cc-sans) !important; font-size: 16px !important;   /* 16px: no iOS zoom on focus */
  outline: none; box-shadow: none; transition: border-color .18s, box-shadow .18s, background-color .18s;
}
html body .cab-chat-panel select#cabChatName {
  flex: 0 1 280px; min-width: 0; padding: 0 38px 0 14px !important; cursor: pointer;
  background-image: var(--cc-chev) !important; background-repeat: no-repeat !important;
  background-position: right 14px center !important; background-size: 12px 8px !important;
  text-overflow: ellipsis;
}
html body .cab-chat-panel input#cabChatInput { flex: 1 1 auto; min-width: 0; width: auto; padding: 0 14px !important; }
html body .cab-chat-panel input#cabChatInput::placeholder { color: var(--cc-ph) !important; opacity: 1; font-style: normal; }
html body .cab-chat-panel select#cabChatName:hover,
html body .cab-chat-panel input#cabChatInput:hover { border-color: var(--cc-field-hover) !important; }
html body .cab-chat-panel select#cabChatName:focus,
html body .cab-chat-panel input#cabChatInput:focus { border-color: var(--cc-focus-line) !important; box-shadow: var(--cc-focus) !important; }
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) .cab-chat-panel select#cabChatName option,
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) .cab-chat-panel select#cabChatName optgroup { background: #1a0533; color: #f4f7fb; }

.cab-chat-row { display: flex; gap: 10px; align-items: stretch; }

/* Send: the site's primary button, with lift, glow and press */
html body .cab-chat-panel .btn.cab-chat-send {
  width: auto !important; flex: 0 0 auto; height: 46px; padding: 0 18px 0 20px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--cc-sans); font-size: 15px; font-weight: 700; letter-spacing: .02em;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.cab-chat-send-ico { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .18s ease; }
html body .cab-chat-panel .btn.cab-chat-send:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); }
html body .cab-chat-panel .btn.cab-chat-send:hover:not(:disabled) .cab-chat-send-ico { transform: translateX(2px); }
html body .cab-chat-panel .btn.cab-chat-send:active:not(:disabled) { transform: translateY(1px) scale(.98); filter: brightness(.96); }
html body .cab-chat-panel .btn.cab-chat-send:focus-visible { outline: 2px solid var(--cc-focus-line); outline-offset: 2px; }
html body .cab-chat-panel .btn.cab-chat-send:disabled { opacity: .6; cursor: progress; transform: none; }
/* Classic: deep plum-to-orchid with a gold hairline instead of the flat bright pink */
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) body .cab-chat-panel .btn.cab-chat-send {
  border: 1px solid rgba(240,171,252,.45) !important; border-radius: 12px !important; color: #fff !important;
  background: linear-gradient(180deg, #b43fc9 0%, #8e2aa6 55%, #6b1d83 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 2px 6px rgba(0,0,0,.35), 0 8px 22px rgba(192,38,211,.22) !important;
}
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) body .cab-chat-panel .btn.cab-chat-send:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 4px 10px rgba(0,0,0,.35), 0 10px 30px rgba(232,121,249,.38) !important;
}
html[data-theme="maroon"] body .cab-chat-panel .btn.cab-chat-send:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(241,217,168,.32), 0 4px 8px rgba(42,4,24,.2), 0 12px 26px rgba(92,6,50,.28) !important;
}
html[data-theme="enterprise"] body .cab-chat-panel .btn.cab-chat-send:hover:not(:disabled) {
  box-shadow: inset 0 1px 0 rgba(243,217,164,.32), 0 4px 8px rgba(11,42,64,.2), 0 12px 26px rgba(15,53,80,.26) !important;
}

/* privacy note: one quiet line with a gold rail, like the History "Circle prompt" card */
.cab-chat-note {
  display: flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 7px 12px 7px 10px;
  border-radius: 10px; background: var(--cc-note-bg); box-shadow: inset 3px 0 0 var(--cc-gold);
  font-family: var(--cc-sans); font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--cc-ink);
}
.cab-chat-note .ico {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  font-size: 9px; color: var(--cc-gold); background: var(--cc-chip);
}
.cab-chat-err { margin: 6px 0 0; font-size: 12.5px; font-weight: 600; color: #f9a8d4; }
html[data-theme="maroon"] .cab-chat-err { color: #A3123A; }
html[data-theme="enterprise"] .cab-chat-err { color: #B42318; }
.cab-chat-err:empty { display: none; }

/* ---------- phones ---------- */
@media (max-width: 520px) {
  .cab-chat-head { padding-top: 28px; }
  .cab-chat-live { top: 0; right: 50%; transform: translateX(50%); }
  .cab-chat-list { height: 340px; padding-right: 2px; }
  .cab-msg::after { left: -16px; }
  .cab-msg { margin-left: 30px; margin-right: 2px; padding: 9px 12px 10px; }
  .cab-msg::before { left: -26px; }
  .cab-msg-text { font-size: 16.5px; }
  .cab-chat-name { flex-direction: column; align-items: stretch; gap: 6px; }
  html body .cab-chat-panel select#cabChatName { flex: 1 1 auto; width: 100%; }
  html body .cab-chat-panel .btn.cab-chat-send { padding: 0 14px 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cab-msg, .cab-chat-live.is-live .cab-chat-dot { animation: none; }
  html body .cab-chat-panel .btn.cab-chat-send, .cab-chat-send-ico { transition: none; }
}

/* ---------- wide screens: Team chat sits in the right column, under Totals, beside New case /
   Interpreters today (Oct 22 2026). Phones/narrow (<=860px, the page's own breakpoint) keep the
   stacked order: New case → Totals → Team chat. ---------- */
@media (min-width: 861px) {
  /* Layout (Oct 22 2026, Jeremy): left = New case, then Team chat under it; right = Interpreters today,
     then Totals under it. Row 3 is the flexible one: Team chat and Totals both stretch to it, so the two
     columns always end on the same line (Team chat's message list takes the extra height). */
  html body .layout:has(> .cab-chat-panel) { grid-template-rows: auto auto 1fr; }
  html body .layout > .panel:first-child { grid-column: 1; grid-row: 1 / span 2; }
  html body .layout > .cab-avail-panel { grid-column: 2; grid-row: 1; }
  html body .layout > .panel:nth-child(2) { grid-column: 2; grid-row: 2 / span 2; align-self: stretch; }
  html body .layout > .cab-chat-panel {
    grid-column: 1; grid-row: 3; align-self: stretch; margin-top: 0;
    display: flex; flex-direction: column; min-height: 0;
  }
  html body .layout > .cab-chat-panel .cab-chat-list { flex: 1 1 0; height: auto; min-height: 300px; }
  html body .layout > .cab-chat-panel .cab-chat-form { margin-top: 14px; }
  /* Interpreters today as its own card: heading sits at the top like Totals / Team chat. */
  html body .cab-avail-panel > .lais-st { margin-top: 0; padding-top: 0; }
  html body .cab-avail-panel .lais-st-head { margin-top: 0; }
  html body .cab-avail-panel .lais-st-head h3 { font-size: 16px; }
  /* Enterprise / Maroon: same heading size as Totals and New case in those themes. */
  html[data-theme="enterprise"] body .cab-avail-panel .lais-st-head h3,
  html[data-theme="maroon"] body .cab-avail-panel .lais-st-head h3 { font-size: 24.48px !important; line-height: 1.2; letter-spacing: -.005em; }
  /* ?me= personal mode hides Interpreters today, so Totals takes the whole right column. */
  html.cab-me-mode body .layout > .panel:nth-child(2) { grid-row: 1 / span 3; }
}

/* Personal mode (?me=) */
.cab-me-back { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; white-space: nowrap; }
.cab-me-mode #cabAvail { display: none; }

/* Interpreters today card: only shown once it holds the list (monitors); phones keep the list in New case. */
.cab-avail-panel:not(:has(#cabAvail)), .cab-me-mode .cab-avail-panel { display: none !important; }

/* Delete (×) column always reachable (Oct 22 2026, Jeremy): the Recent cases tables (Today + Past days) are
   wider than the card on laptops / Edge zoom, so the × sat off-screen behind a sideways scroll. The × column
   now pins to the right edge of the table box, with a theme-matched background and a soft left shadow so
   rows slide under it. The View by person table has no × column and is not touched. */
.cases-panel table.cases { --x-bg: #120c28; --x-head: #0e091e; --x-hover: rgba(232,121,249,.05); --x-shadow: rgba(0,0,0,.55); }
html[data-theme="enterprise"] .cases-panel table.cases { --x-bg: #fff; --x-head: #f4f6fa; --x-shadow: rgba(15,53,80,.28); }
html[data-theme="maroon"] .cases-panel table.cases { --x-bg: #fdfbf8; --x-head: #faf7f2; --x-shadow: rgba(92,6,50,.26); }
html body .cases-panel table.cases th:last-child,
html body .cases-panel table.cases td:last-child {
  position: sticky; right: 0; z-index: 1;
  width: 48px; min-width: 48px; padding-left: 6px; padding-right: 6px; text-align: center;
  background-color: var(--x-bg); box-shadow: -12px 0 14px -10px var(--x-shadow);
}
html body .cases-panel table.cases th:last-child { background-color: var(--x-head); z-index: 2; }
html body .cases-panel table.cases tr:hover td:last-child { background-image: linear-gradient(var(--x-hover), var(--x-hover)); }

/* ---------- new-message chime toggle (Oct 29 2026, Cabarrus only: built by JS when data-chat-chime="on") ---------- */
.cab-chime-btn {
  position: absolute; top: 2px; left: 0; display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px; border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--cc-sans); font-size: 11px; font-weight: 600; line-height: 1.35;
  color: var(--cc-muted); background: var(--cc-chip); transition: background .2s, color .2s, opacity .2s;
}
.cab-chime-btn .cab-chime-ico { font-size: 12px; line-height: 1; }
.cab-chime-btn:hover { color: var(--cc-ink); }
.cab-chime-btn:focus-visible { outline: none; box-shadow: var(--cc-focus); }
.cab-chime-btn.is-off { opacity: .72; }
.cab-chime-btn.is-off .cab-chime-ico { filter: grayscale(1); }
html body .cab-chat-panel .cab-chime-hint {
  margin: 8px auto 0; text-align: center; font-family: var(--cc-sans); font-size: 11.5px; font-style: italic; color: var(--cc-muted);
}
.cab-chime-hint[hidden] { display: none !important; }
@media (max-width: 420px) { .cab-chime-btn .cab-chime-txt { display: none; } .cab-chime-btn { padding: 4px 8px; } }

/* ---------- Oct 29 2026: "Posting as" name chip at the bottom of Team chat (Cabarrus, data-name-chip="on") ---------- */
.cab-chat-name-legacy[hidden] { display: none !important; }
.cab-namechip { margin-top: 10px; }
html body .cab-chat-panel .cab-namechip-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; box-sizing: border-box;
  padding: 8px 14px; margin: 0; cursor: pointer; text-align: left;
  border-radius: var(--cc-radius); border: 1px solid var(--cc-field-line); background: var(--cc-field); color: var(--cc-ink);
  font-family: var(--cc-sans); transition: border-color .18s, box-shadow .18s, background-color .18s;
}
html body .cab-chat-panel .cab-namechip-btn:hover { border-color: var(--cc-field-hover); }
html body .cab-chat-panel .cab-namechip-btn:focus-visible { outline: none; border-color: var(--cc-focus-line); box-shadow: var(--cc-focus); }
.cab-namechip-lab { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cc-muted); }
.cab-namechip-who { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 700; color: var(--cc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cab-namechip-car { flex: 0 0 auto; font-size: 14px; color: var(--cc-gold); transition: transform .18s; }
.cab-namechip.is-open .cab-namechip-car { transform: rotate(180deg); }
.cab-namechip.is-unset .cab-namechip-btn { border-style: dashed; border-color: var(--cc-rail); }
.cab-namechip.is-unset .cab-namechip-who { color: var(--cc-gold); font-weight: 600; }
.cab-namepop {
  margin-top: 8px; padding: 12px; border-radius: var(--cc-radius); border: 1px solid var(--cc-pop-line, var(--cc-field-line));
  background: var(--cc-pop, var(--cc-field)); box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.cab-namepop[hidden] { display: none !important; }
.cab-namepop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-family: var(--cc-sans); }
.cab-namepop-head strong { font-size: 14px; color: var(--cc-ink); }
.cab-namepop-head span { font-size: 11.5px; color: var(--cc-muted); }
html body .cab-chat-panel input.cab-namepop-find {
  width: 100%; box-sizing: border-box; height: 40px; margin: 0 0 10px; padding: 0 12px !important;
  border-radius: 10px !important; border: 1px solid var(--cc-field-line) !important; background: var(--cc-field) !important;
  color: var(--cc-ink) !important; font-family: var(--cc-sans) !important; font-size: 16px !important; outline: none;
}
html body .cab-chat-panel input.cab-namepop-find:focus { border-color: var(--cc-focus-line) !important; box-shadow: var(--cc-focus) !important; }
.cab-namepop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; padding: 2px; }
.cab-namepop-group { grid-column: 1 / -1; margin: 6px 0 0; font-family: var(--cc-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-gold); }
.cab-namepop-group:first-child { margin-top: 0; }
html body .cab-chat-panel .cab-namepop-name {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px; margin: 0;
  padding: 6px 12px; cursor: pointer; text-align: left; border-radius: 10px; border: 1px solid var(--cc-field-line);
  background: var(--cc-chip); color: var(--cc-ink); font-family: var(--cc-sans); transition: border-color .15s, background-color .15s, transform .12s;
}
html body .cab-chat-panel .cab-namepop-name:hover { border-color: var(--cc-rail); }
html body .cab-chat-panel .cab-namepop-name:active { transform: scale(.98); }
html body .cab-chat-panel .cab-namepop-name:focus-visible { outline: none; box-shadow: var(--cc-focus); }
html body .cab-chat-panel .cab-namepop-name.is-sel { border-color: var(--cc-gold); box-shadow: inset 0 0 0 1px var(--cc-gold); }
.cab-namepop-n { font-size: 14.5px; font-weight: 600; line-height: 1.25; }
.cab-namepop-r { font-size: 11px; color: var(--cc-muted); }
.cab-namepop-none { grid-column: 1 / -1; margin: 4px 0; font-family: var(--cc-sans); font-size: 13px; color: var(--cc-muted); }
@media (max-width: 420px) { .cab-namepop-grid { grid-template-columns: 1fr 1fr; max-height: 300px; } }