/* SENDi! — dark + amber visual theme.
   Pure styling only — no markup/behavior changes. Scoped entirely under
   body.dark-theme, which already exists in sendi.js (Settings → Theme →
   Dark/System) but had no CSS until now. Loaded after sendi.css,
   sendi-chrome.css and connect-shell.css so it wins the cascade; several
   rules repeat the !important / high-specificity prefixes the base rules
   already use, purely to out-rank them, not to add new behavior. */

body.dark-theme {
  --bg: #0b0d12;
  --card-bg: #12151d;
  --text: #e8ecf3;
  --dark: #e8ecf3;
  --gray: #8b96ab;
  --primary: #f5a623;
  --success: #4ade80;
  --warning: #f5a623;
  --danger: #f87171;
  --neutral: rgba(232, 236, 243, 0.55);
  --surface: #f5a623;
  --purple: #93a3ff;
  --green: #2563eb;
  --red: #f87171;
  --yellow: #f5a623;
  --blue: #2563eb;

  /* helper tokens used only inside this file */
  --dt-bg: #0b0d12;
  --dt-panel: #12151d;
  --dt-panel-2: #181c26;
  --dt-ink: #e8ecf3;
  --dt-ink-muted: #8b96ab;
  --dt-ink-faint: #576074;
  --dt-ring: #232936;
  --dt-ring-strong: #333c4d;
  --dt-accent: #f5a623;
  --dt-mine: #2563eb;
}

/* ---------- Root shell / body ---------- */
body.dark-theme,
body.dark-theme.ios-theme,
body.dark-theme.ios-theme:has(.space-setup) {
  background: var(--dt-bg) !important;
  color: var(--dt-ink);
}

/* ---------- Header / chrome bar ---------- */
body.dark-theme .space-header,
body.dark-theme.ios-theme.space-shell > header.grigsi-top-bar {
  background: var(--dt-panel) !important;
  border-bottom: 1px solid var(--dt-ring) !important;
  color: var(--dt-ink);
}

/* generic chrome FAB (code/dock/fav toggles) — base + duplicated blocks */
body.dark-theme .space-chrome-fab,
body.dark-theme #space-tabs.space-chrome-clusters .space-chrome-fab,
html body.dark-theme #space-tabs.space-chrome-clusters .space-chrome-fab {
  background: linear-gradient(165deg, var(--dt-panel-2) 0%, var(--dt-panel) 100%) !important;
  color: var(--dt-ink) !important;
  border: 1px solid var(--dt-ring-strong) !important;
  box-shadow: none !important;
}
body.dark-theme .space-chrome-fab--code,
html body.dark-theme .space-chrome-fab--code {
  background: linear-gradient(165deg, #3a2f12 0%, #2a2208 100%) !important;
  color: #ffd166 !important;
}
body.dark-theme .space-chrome-fab--fav,
html body.dark-theme .space-chrome-fab--fav {
  background: var(--dt-panel-2) !important;
  color: var(--dt-ink-muted) !important;
}
body.dark-theme .space-chrome-fab--fav.is-on,
html body.dark-theme .space-chrome-fab--fav.is-on {
  background: linear-gradient(165deg, #ffd166, var(--dt-accent)) !important;
  color: #2a1b06 !important;
}
/* voice/video-message record icons — purple family */
body.dark-theme .space-chrome-fab--purple,
html body.dark-theme .space-chrome-fab--purple {
  background: linear-gradient(165deg, #4c3a8f, #2a1f5e) !important;
  color: #e2d9ff !important;
  border-color: transparent !important;
}
/* attach-file icon — metal family, kept metallic (reads fine on dark too) */
body.dark-theme .space-chrome-fab--metal,
html body.dark-theme .space-chrome-fab--metal {
  background: linear-gradient(135deg, #aeb3bb, #6b7077 50%, #aeb3bb) !important;
  color: #1c1e22 !important;
  border-color: transparent !important;
}

/* ---------- Code-cluster panel ---------- */
/* matches the specificity of sendi.css's own html body #space-tabs
   input#space-code.space-code-display !important block so this wins */
html body.dark-theme #space-tabs #space-code.space-code-display,
html body.dark-theme #space-tabs textarea#space-code.space-code-display,
html body.dark-theme #space-tabs input#space-code.space-code-display,
body.dark-theme #space-tabs #space-code.space-code-display,
body.dark-theme #space-tabs textarea#space-code.space-code-display,
body.dark-theme #space-tabs input#space-code.space-code-display,
body.dark-theme #space-code.space-code-display {
  background: var(--dt-panel) !important;
  background-color: var(--dt-panel) !important;
  color: var(--dt-ink) !important;
  -webkit-text-fill-color: var(--dt-ink) !important;
  border-color: var(--dt-ring-strong) !important;
}
body.dark-theme #space-code-cluster-panel,
body.dark-theme #space-tabs .space-tabs-bar {
  background: var(--dt-panel) !important;
  border-color: var(--dt-ring) !important;
}
/* copy/rename/share/picker hover pastels -> dark-friendly tints */
body.dark-theme .space-code-copy-btn:hover,
body.dark-theme .space-code-copy-btn.is-copied {
  background: linear-gradient(165deg, rgba(74,222,128,.22), rgba(74,222,128,.12)) !important;
  color: #4ade80 !important;
}
body.dark-theme .space-code-share-btn:hover {
  background: linear-gradient(165deg, rgba(245,166,35,.24), rgba(245,166,35,.12)) !important;
  color: #ffd166 !important;
}
body.dark-theme #btn-space-local-rename:hover,
body.dark-theme .space-code-rename-btn:hover {
  background: linear-gradient(165deg, rgba(147,163,255,.24), rgba(147,163,255,.12)) !important;
  color: #c7cfff !important;
}

/* ---------- Tabs bar ---------- */
body.dark-theme .space-tabs-participants-chip,
body.dark-theme .space-tabs-participants-btn {
  background: rgba(245,166,35,.16) !important;
  color: var(--dt-accent) !important;
}

/* ---------- Chat message bubbles ---------- */
body.dark-theme .chat-message.sent .bubble,
body.dark-theme.ios-theme .chat-message.sent .bubble,
body.dark-theme.ios-theme:has(.space-share) .chat-message.sent .bubble {
  background: var(--dt-mine) !important;
  color: #fff !important;
}
/* Approved mockup: received = yellow (same amber already used for --dt-accent
   elsewhere), not the plain dark panel color — that made received bubbles
   blend straight into the page background with no color at all. */
body.dark-theme .chat-message.received .bubble,
body.dark-theme.ios-theme .chat-message.received .bubble,
body.dark-theme.ios-theme:has(.space-share) .chat-message.received .bubble {
  background: var(--dt-accent) !important;
  color: #1a1206 !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  box-shadow: none !important;
}
body.dark-theme .chat-message .sender {
  color: rgba(232,236,243,.75) !important;
  text-shadow: none !important;
}
body.dark-theme .chat-message .time {
  color: rgba(232,236,243,.55) !important;
}
/* The general light-gray time color above reads fine on the sent bubble's
   blue, but needs real dark text on the received bubble's amber (placed
   after the general rule, same specificity + !important, so it wins). */
body.dark-theme .chat-message.received .time,
body.dark-theme .chat-message.received .chat-message-actions .time {
  color: rgba(26, 18, 6, 0.62) !important;
}
body.dark-theme .chat-message.system .bubble {
  background: var(--dt-panel-2) !important;
  color: var(--dt-ink-muted) !important;
}

/* file / audio / video message cards */
body.dark-theme .bubble-file,
body.dark-theme .chat-message.chat-message-file .bubble {
  background: var(--dt-panel) !important;
  color: var(--dt-ink) !important;
}
body.dark-theme .chat-message.sent .bubble-file .file-action-btn {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.3) !important;
  color: #fff !important;
}
body.dark-theme .file-action-btn--delete {
  color: #f87171 !important;
  border-color: rgba(248,113,113,.5) !important;
}
/* Blend into the type-colored gradient bubble (see "Type-colored bubbles"
   below) instead of painting its own boxed-off panel — the approved mockup
   has the player/transcript sit directly on the bubble's own gradient.
   Needs the extra `.chat-message.sent`/`.chat-message.received` prefix to
   out-specificity sendi.css's own `.chat-message.sent .space-audio-chat-card`
   "liquid glass" background rule (also `!important`, 3 classes vs. this
   rule's previous 2) — otherwise that glass tint silently wins back. */
body.dark-theme .space-audio-chat-card,
body.dark-theme .chat-message.sent .space-audio-chat-card,
body.dark-theme .chat-message.received .space-audio-chat-card {
  background: transparent !important;
  color: var(--dt-ink) !important;
  border-color: transparent !important;
}

/* ---------- Task-bang markers (collective blue "!" / personal yellow "!") ---------- */
body.dark-theme .chat-msg-task-bang,
html body.dark-theme .chat-msg-task-bang {
  background: var(--dt-panel-2) !important;
}
body.dark-theme .chat-msg-task-bang--collective {
  color: #bfdbfe !important;
  background: rgba(37,99,235,.2) !important;
  border-color: rgba(96,165,250,.5) !important;
}
body.dark-theme .chat-msg-task-bang--collective.is-active,
body.dark-theme .chat-msg-task-bang--collective.active {
  background: linear-gradient(165deg,#3b82f6,#1d4ed8) !important;
  color: #fff !important;
  border-color: #1d4ed8 !important;
}
body.dark-theme .chat-msg-task-bang--personal,
html body.dark-theme .chat-msg-task-bang--personal {
  color: var(--dt-accent) !important;
  background: rgba(245,166,35,.16) !important;
  border-color: rgba(245,166,35,.5) !important;
}
body.dark-theme .chat-msg-task-bang--personal.is-active,
body.dark-theme .chat-msg-task-bang--personal.active {
  background: linear-gradient(165deg,#ffd166,#f5a623) !important;
  color: #2a1b06 !important;
  border-color: #f5a623 !important;
}

/* ---------- Edge-rail tool icons (TTS / STT) ---------- */
body.dark-theme .chat-msg-tool--tts {
  border-color: rgba(147,197,253,.5) !important;
  background: rgba(147,197,253,.16) !important;
  color: #93c5fd !important;
}
body.dark-theme .chat-msg-tool--tts .fa,
body.dark-theme .chat-msg-tool--tts i {
  color: #93c5fd !important;
}
body.dark-theme .chat-msg-tool--stt {
  border-color: rgba(245,166,35,.5) !important;
  background: rgba(245,166,35,.16) !important;
  color: var(--dt-accent) !important;
}
body.dark-theme .chat-msg-tool--stt.is-active {
  background: rgba(245,166,35,.3) !important;
  color: #ffd166 !important;
}
body.dark-theme .chat-composer .chat-tts-btn {
  background: var(--dt-panel-2) !important;
  color: #93c5fd !important;
  border-color: var(--dt-ring-strong) !important;
}

/* ---------- Composer / input bar ---------- */
body.dark-theme .chat-input-area {
  background: var(--dt-panel) !important;
  border-top: 1px solid var(--dt-ring) !important;
}
body.dark-theme .chat-input-wrap {
  background: var(--dt-panel-2) !important;
}
body.dark-theme .chat-input-wrap input,
body.dark-theme .chat-input-wrap textarea {
  color: var(--dt-ink) !important;
  -webkit-text-fill-color: var(--dt-ink) !important;
}
body.dark-theme .chat-input-wrap input::placeholder,
body.dark-theme .chat-input-wrap textarea::placeholder {
  color: var(--dt-ink-faint) !important;
}
body.dark-theme .attach-btn {
  color: var(--dt-ink-muted) !important;
}
body.dark-theme .attach-btn:hover {
  background: rgba(245,166,35,.12) !important;
  color: var(--dt-accent) !important;
}

/* ---------- Dropdowns / panels ---------- */
body.dark-theme .header-security-dropdown {
  background: var(--dt-panel) !important;
  border: 1px solid var(--dt-ring) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.5) !important;
}
body.dark-theme .header-security-desc {
  color: var(--dt-ink-muted) !important;
}
body.dark-theme .header-security-option {
  background: var(--dt-panel-2) !important;
  border: 1px solid var(--dt-ring) !important;
  color: var(--dt-ink) !important;
}
body.dark-theme .space-sidebar {
  background: var(--dt-panel) !important;
  border-left: 1px solid var(--dt-ring) !important;
}
body.dark-theme .sidebar-header {
  border-bottom: 1px solid var(--dt-ring) !important;
}
body.dark-theme .participant-item:hover {
  background: var(--dt-panel-2) !important;
}
body.dark-theme summary.btn-nav.nav-more-summary {
  background: var(--dt-panel) !important;
  border: 1px solid var(--dt-ring-strong) !important;
  color: var(--dt-ink) !important;
}

/* ---------- "More" dropdown panel (SENDi! options / Security / Leave) ---------- */
body.dark-theme .space-tabs-bar .space-more-panel,
body.dark-theme .space-more-panel.space-more-panel--portal {
  background: var(--dt-panel) !important;
  background-color: var(--dt-panel) !important;
  border-color: var(--dt-ring-strong) !important;
  box-shadow: 0 16px 42px rgba(0,0,0,.5) !important;
}
body.dark-theme .space-tabs-bar .space-more-panel,
body.dark-theme .space-more-panel.space-more-panel--portal,
body.dark-theme .space-tabs-bar .space-more-panel *,
body.dark-theme .space-more-panel.space-more-panel--portal * {
  color: var(--dt-ink) !important;
  -webkit-text-fill-color: var(--dt-ink) !important;
}
body.dark-theme .space-tabs-bar .space-more-panel .nav-more-heading,
body.dark-theme .space-more-panel.space-more-panel--portal .nav-more-heading {
  color: var(--dt-ink-muted) !important;
  -webkit-text-fill-color: var(--dt-ink-muted) !important;
}
body.dark-theme .space-tabs-bar .space-more-panel .space-more-action,
body.dark-theme .space-tabs-bar .space-more-panel a.space-more-action,
body.dark-theme .space-more-panel.space-more-panel--portal .space-more-action,
body.dark-theme .space-more-panel.space-more-panel--portal a.space-more-action,
body.dark-theme .space-tabs-bar .space-more-panel .header-security-option,
body.dark-theme .space-more-panel.space-more-panel--portal .header-security-option {
  border-bottom-color: var(--dt-ring) !important;
}
body.dark-theme .space-tabs-bar .space-more-panel .space-more-action:hover,
body.dark-theme .space-tabs-bar .space-more-panel a.space-more-action:hover,
body.dark-theme .space-more-panel.space-more-panel--portal .space-more-action:hover,
body.dark-theme .space-more-panel.space-more-panel--portal a.space-more-action:hover,
body.dark-theme .space-tabs-bar .space-more-panel .header-security-option:hover,
body.dark-theme .space-more-panel.space-more-panel--portal .header-security-option:hover {
  background: var(--dt-panel-2) !important;
  color: var(--dt-ink) !important;
  -webkit-text-fill-color: var(--dt-ink) !important;
}
body.dark-theme .space-tabs-bar .space-more-panel .space-more-action--leave,
body.dark-theme .space-more-panel.space-more-panel--portal .space-more-action--leave {
  color: #f87171 !important;
  -webkit-text-fill-color: #f87171 !important;
}
body.dark-theme .space-tabs-bar .space-more-panel .header-security-dropdown,
body.dark-theme .space-more-panel.space-more-panel--portal .header-security-dropdown {
  background: var(--dt-panel-2) !important;
}
body.dark-theme #security-proof-list {
  background: var(--dt-panel-2) !important;
  border-color: var(--dt-ring) !important;
  color: var(--dt-ink-muted) !important;
}

/* ---------- Generic modal cards ---------- */
body.dark-theme .modal-content {
  background: var(--dt-panel) !important;
  color: var(--dt-ink);
}
body.dark-theme .modal-content h2 {
  color: var(--dt-ink) !important;
}

/* ---------- Video/Files/Post sheet (composer sheet) ----------
   sendi.css has a body.ios-theme-scoped block (around line 17094) that
   hardcodes #ffffff on the sheet header and the sheet itself, pre-dating
   this theme. ios-theme is present even outside real iOS, so without this
   it wins over var(--card-bg) and the whole Video/Screen sheet stays white. */
body.dark-theme .space-composer-sheet-header {
  background: var(--dt-panel) !important;
  border-bottom-color: var(--dt-ring) !important;
}
body.dark-theme .space-composer-sheet-close:hover {
  background: rgba(245, 166, 35, 0.16) !important;
  color: var(--dt-accent) !important;
}
body.dark-theme .space-share.chat-first-shell #panel-files.space-sheet-open,
body.dark-theme .space-share.chat-first-shell #panel-video.space-sheet-open,
body.dark-theme .space-share.chat-first-shell #panel-post.space-sheet-open {
  background: var(--dt-panel) !important;
  border-color: var(--dt-ring-strong) !important;
}
body.dark-theme .video-two-people-link,
body.dark-theme .video-two-people-link i {
  color: var(--dt-accent) !important;
}

/* sendi.css also has a 'light surfaces must use dark ink' block (~line 13050)
   that force-darkens color AND -webkit-text-fill-color (which Chrome/Safari
   render over plain color) on this same sheet, assuming it's always white.
   Now that it's dark, that inherited dark ink is what made the title bar,
   "Fallback" button and media-controls labels unreadable. Both source rules
   use body.ios-theme(.space-shell or :has(.space-share)) + !important, so
   the override needs the same prefixes plus .dark-theme to out-specificity
   them (a plain body.dark-theme rule alone loses and has no visible effect). */
body.ios-theme.dark-theme:has(.space-share) .space-share.chat-first-shell #panel-video.space-sheet-open,
body.ios-theme.dark-theme:has(.space-share) .space-share.chat-first-shell #panel-video.space-sheet-open #video-panel-inner,
body.ios-theme.dark-theme:has(.space-share) .space-composer-sheet-header,
body.ios-theme.dark-theme:has(.space-share) .composer-action-menu,
body.dark-theme .space-share.chat-first-shell #panel-video.space-sheet-open,
body.dark-theme .space-share.chat-first-shell #panel-video.space-sheet-open #video-panel-inner,
body.dark-theme .space-composer-sheet-header,
body.dark-theme .composer-action-menu {
  color: var(--dt-ink) !important;
  -webkit-text-fill-color: var(--dt-ink) !important;
}
body.ios-theme.dark-theme:has(.space-share) .space-composer-sheet-title,
body.ios-theme.dark-theme:has(.space-share) .space-composer-sheet-back,
body.ios-theme.dark-theme:has(.space-share) .space-composer-sheet-close,
body.dark-theme .space-composer-sheet-title,
body.dark-theme .space-composer-sheet-back,
body.dark-theme .space-composer-sheet-close {
  color: var(--dt-ink) !important;
  -webkit-text-fill-color: var(--dt-ink) !important;
}
body.dark-theme .space-composer-sheet-back,
body.dark-theme .space-composer-sheet-close {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ---------- Chat bubble redesign (dark-v4): icon-in-bubble,
   type-colored bubbles, long-press reveal for forward/reactions ----------
   Structural moves (icon now a child of .bubble, rail hidden by default)
   happen in sendi.js; this is purely the matching visual layer. */

body.dark-theme .chat-message .bubble {
  position: relative !important;
}

/* "Listen" row for text messages (reads the text aloud) — a full-width
   row under the text, in the bubble, same visual family as the
   audio/video transcript below: no more separate TTS icon. */
body.dark-theme .chat-message .bubble > .chat-msg-tools {
  display: block !important;
  width: 100% !important;
  margin: 8px 0 0 !important;
  position: static !important;
}
body.dark-theme .chat-message .bubble > .chat-msg-tools .chat-msg-tool--tts {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  gap: 8px !important;
  padding: 6px 2px !important;
  cursor: pointer !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
}
body.dark-theme .chat-message.received .bubble > .chat-msg-tools .chat-msg-tool--tts {
  border-top-color: var(--dt-ring) !important;
}
body.dark-theme .chat-msg-tts-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}
body.dark-theme .chat-msg-tts-row__icon {
  position: relative !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.22) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: .7rem !important;
}
body.dark-theme .chat-msg-tts-row__icon-pause { display: none !important; }
body.dark-theme .chat-msg-tool--tts.is-active .chat-msg-tts-row__icon-play,
body.dark-theme .chat-msg-tool--tts.is-paused .chat-msg-tts-row__icon-pause { display: none !important; }
body.dark-theme .chat-msg-tool--tts.is-active .chat-msg-tts-row__icon-pause,
body.dark-theme .chat-msg-tool--tts.is-paused .chat-msg-tts-row__icon-play { display: inline-flex !important; }
body.dark-theme .chat-msg-tts-row__wave {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  height: 16px !important;
  opacity: .75 !important;
}
body.dark-theme .chat-msg-tts-row__wave span {
  width: 3px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,.55) !important;
}
body.dark-theme .chat-msg-tts-row__wave span:nth-child(1) { height: 35% !important; }
body.dark-theme .chat-msg-tts-row__wave span:nth-child(2) { height: 70% !important; }
body.dark-theme .chat-msg-tts-row__wave span:nth-child(3) { height: 50% !important; }
body.dark-theme .chat-msg-tts-row__wave span:nth-child(4) { height: 85% !important; }
body.dark-theme .chat-msg-tts-row__wave span:nth-child(5) { height: 40% !important; }
body.dark-theme .chat-msg-tool--tts.is-active .chat-msg-tts-row__wave {
  opacity: 1 !important;
}
body.dark-theme .chat-msg-tts-row__label {
  font-size: 11px !important;
  opacity: .78 !important;
  flex: 0 0 auto !important;
}
body.dark-theme .chat-msg-tts-row__label-active { display: none !important; }
body.dark-theme .chat-msg-tool--tts.is-active .chat-msg-tts-row__label-idle,
body.dark-theme .chat-msg-tool--tts.is-paused .chat-msg-tts-row__label-idle { display: none !important; }
body.dark-theme .chat-msg-tool--tts.is-active .chat-msg-tts-row__label-active,
body.dark-theme .chat-msg-tool--tts.is-paused .chat-msg-tts-row__label-active { display: inline !important; }

/* Audio/video transcript: shows itself automatically, clamped to a
   few lines with a "see full text" hint — tap opens the big overlay
   (see captionBtn in handleChatMessageRowActionClick). */
body.dark-theme .space-audio-chat-card__summary,
body.dark-theme .space-audio-chat-card__transcript {
  cursor: pointer !important;
}
body.dark-theme .space-audio-chat-card__transcript {
  max-height: calc(1.5em * 3 + 2px) !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}
body.dark-theme .space-audio-chat-card__summary::after,
body.dark-theme .space-audio-chat-card__transcript::after {
  content: "виж целия текст" !important;
  display: block !important;
  margin-top: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--dt-accent) !important;
  -webkit-text-fill-color: var(--dt-accent) !important;
}
/* The "FULL TEXT" / "SUMMARY ·" / "ORIGINAL RECORDING" caption labels are
   leftovers from the older card design — the approved mockup shows the
   transcript text directly, with only the "виж целия текст" hint above. */
body.dark-theme .space-audio-chat-card__summary::before,
body.dark-theme .space-audio-chat-card__transcript::before,
body.dark-theme .space-audio-chat-card__original-label {
  display: none !important;
}

/* Big-overlay transcript popup, dark to match the rest of the chat. */
body.dark-theme .chat-transcript-overlay__panel {
  background: var(--dt-panel) !important;
  color: var(--dt-ink) !important;
}
body.dark-theme .chat-transcript-overlay__text {
  color: var(--dt-ink) !important;
}
body.dark-theme .chat-transcript-overlay__close {
  background: rgba(255,255,255,.1) !important;
  color: var(--dt-ink) !important;
}
body.dark-theme .chat-transcript-overlay__close:hover,
body.dark-theme .chat-transcript-overlay__close:focus-visible {
  background: rgba(255,255,255,.16) !important;
}
body.dark-theme .chat-transcript-overlay__close-big {
  background: rgba(255,255,255,.1) !important;
  color: var(--dt-ink) !important;
}
body.dark-theme .chat-transcript-overlay__close-big:hover,
body.dark-theme .chat-transcript-overlay__close-big:focus-visible {
  background: rgba(255,255,255,.16) !important;
}

/* Forward + reactions: hidden on the bubble until long-pressed (or
   right-clicked), then float as a pill beside it. */
body.dark-theme .chat-message-bubble-host > .chat-msg-edge-rail {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(.92) !important;
  transition: opacity .15s ease, transform .15s ease !important;
}
body.dark-theme .chat-message-bubble-wrap.chat-msg-actions-revealed .chat-msg-edge-rail {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: scale(1) !important;
}

/* Type-colored bubbles: file = green, audio = amber, video = red — for
   sent and received alike.
   Needs the `#chat-panel-inner.has-chat-feed` prefix too (not just
   `body.dark-theme`) — sendi.css's own bubble reset rules
   (`#chat-panel-inner.has-chat-feed .chat-message.sent .bubble.bubble--owner`
   and `#chat-panel-inner.has-chat-feed .chat-message .bubble.bubble--object`,
   both `background: transparent !important`) carry an ID selector, which
   outranks any class-only rule regardless of order — without matching that
   ID here, those reset rules silently win and the bubble never gets a
   visible color at all. */
body.dark-theme .chat-message .bubble:has(.space-object-card--file),
body.dark-theme .chat-message .bubble:has(.space-object-card--folder),
body.dark-theme #chat-panel-inner.has-chat-feed .chat-message .bubble:has(.space-object-card--file),
body.dark-theme #chat-panel-inner.has-chat-feed .chat-message .bubble:has(.space-object-card--folder) {
  background: linear-gradient(165deg, rgba(74,222,128,.28), rgba(74,222,128,.15)) !important;
  border: 1px solid rgba(74,222,128,.42) !important;
}
body.dark-theme .chat-message .bubble:has(.space-object-card--audio),
body.dark-theme .chat-message .bubble:has(.space-audio-chat-card):not(:has(.space-audio-chat-card--video)),
body.dark-theme #chat-panel-inner.has-chat-feed .chat-message .bubble:has(.space-object-card--audio),
body.dark-theme #chat-panel-inner.has-chat-feed .chat-message .bubble:has(.space-audio-chat-card):not(:has(.space-audio-chat-card--video)) {
  background: linear-gradient(165deg, rgba(245,166,35,.28), rgba(245,166,35,.15)) !important;
  border: 1px solid rgba(245,166,35,.42) !important;
}
body.dark-theme .chat-message .bubble:has(.space-object-card--video),
body.dark-theme .chat-message .bubble:has(.space-audio-chat-card--video),
body.dark-theme #chat-panel-inner.has-chat-feed .chat-message .bubble:has(.space-object-card--video),
body.dark-theme #chat-panel-inner.has-chat-feed .chat-message .bubble:has(.space-audio-chat-card--video) {
  background: linear-gradient(165deg, rgba(248,113,113,.28), rgba(248,113,113,.15)) !important;
  border: 1px solid rgba(248,113,113,.42) !important;
}