/* Suppress entrance animations on cards that were already present in the DOM
 * at page load. Applied by application.js after first paint. */
.no-enter-anim { animation: none !important; }

/*
 * Global application styles — shared across all pages.
 * Chat-specific styles are in chat.css.
 *
 * COLOR CONVENTION:
 *   Tailwind's @theme (app/assets/tailwind/application.css) is the single
 *   source of truth for brand/gray/status palettes. Those variables are
 *   available everywhere as --color-brand-500, --color-pine-gray-*, etc.
 *
 *   This file defines aliases and layout-specific tokens that vanilla CSS
 *   uses. If you need a new color, add it to the Tailwind @theme first,
 *   then alias it here.
 *
 * STYLING CONVENTION:
 *   Auth & onboarding pages use Tailwind utility classes (rendered in
 *   layouts/auth.html.erb). Everything post-login — chat, settings,
 *   tasks, drive, escalations — uses vanilla CSS with prefix-namespaced
 *   classes (.chat-*, .settings-*, .task-*, .drive-*, .esc-*, .sm-*).
 *   Don't mix: pick the paradigm that matches the page's layout.
 */

/* ── Design tokens (aliases for Tailwind @theme vars) ── */
/* Default theme: Optimistic Pine */
:root {
  /* Colors — reference Tailwind @theme values where possible */
  --color-brand: var(--color-brand-500, #144629);
  --color-brand-hover: var(--color-brand-400, #1a5c36);
  --color-brand-subtle: rgba(20,70,41,0.06);
  --color-room: var(--color-room-500, #4B35C2);
  --color-room-hover: var(--color-room-700, #332389);
  --color-danger: var(--color-error-600, #dc2626);
  --color-success: var(--color-success-600, #079455);
  --color-success-text: var(--color-success-700);
  --color-warning: var(--color-warning-500, #f79009);
  --color-text-primary: var(--color-pine-gray-900, #1a1a1a);
  --color-text-secondary: var(--color-pine-gray-600, #666);
  --color-text-muted: var(--color-pine-gray-400, #999);
  --color-surface: #faf9f7;
  --color-surface-rgb: 250,249,247;
  --color-surface-alpha: rgba(250,249,247,0.98);
  --color-border: rgba(0,0,0,0.06);
  --color-card: #ffffff;
  --color-hover: rgba(0,0,0,0.04);
  --color-active: rgba(0,0,0,0.06);
  --color-input-bg: #ffffff;
  --color-brand-text: #ffffff;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;

  /* Shadows */
  --shadow-sidebar-edge: 2px 0 8px rgba(0,0,0,0.06);

  /* Z-index scale */
  --z-sidebar-toggle: 45;
  --z-sidebar-mobile: 50;
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-toast: 9000;
  --z-lightbox: 9999;
}

/* ── Theme: Clean Slate ── */
[data-theme="breezy_fir"] {
  --color-brand: #3b82f6;
  --color-brand-hover: #2563eb;
  --color-brand-subtle: rgba(59,130,246,0.06);
  --color-room: #059669;
  --color-room-hover: #047857;
  --color-surface: #ffffff;
  --color-surface-rgb: 255,255,255;
  --color-surface-alpha: rgba(255,255,255,0.98);
  --color-card: #ffffff;
  --color-border: rgba(0,0,0,0.08);
}

/* ── Theme: Midnight Pine ── */
[data-theme="wistful_juniper"] {
  --color-brand: #4ade80;
  --color-brand-hover: #22c55e;
  --color-brand-subtle: rgba(74,222,128,0.1);
  --color-room: #818cf8;
  --color-room-hover: #6366f1;
  --color-text-primary: #e5e5e5;
  --color-text-secondary: #a3a3a3;
  --color-text-muted: #737373;
  --color-surface: #222222;
  --color-surface-rgb: 34,34,34;
  --color-surface-alpha: rgba(34,34,34,0.98);
  --color-border: rgba(255,255,255,0.08);
  --color-card: #2a2a2a;
  --color-hover: rgba(255,255,255,0.05);
  --color-active: rgba(255,255,255,0.08);
  --color-input-bg: #2a2a2a;
  --color-brand-text: #1a1a1a;
  color-scheme: dark;
}

/* ── Theme: Deep Ocean ── */
[data-theme="deep_current"] {
  --color-brand: #38bdf8;
  --color-brand-hover: #0ea5e9;
  --color-brand-subtle: rgba(56,189,248,0.1);
  --color-room: #a78bfa;
  --color-room-hover: #8b5cf6;
  --color-text-primary: #e2e8f0;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;
  --color-surface: #1e293b;
  --color-surface-rgb: 30,41,59;
  --color-surface-alpha: rgba(30,41,59,0.98);
  --color-border: rgba(255,255,255,0.08);
  --color-card: #273548;
  --color-hover: rgba(255,255,255,0.05);
  --color-active: rgba(255,255,255,0.08);
  --color-input-bg: #273548;
  --color-brand-text: #0f172a;
  color-scheme: dark;
}

[data-theme="wistful_juniper"],
[data-theme="deep_current"] {
  --color-success-text: var(--color-success-500);
}

/* ── Root background — ensures body/html match theme everywhere
      (iOS keyboard backdrop, overscroll, safe-area gaps) ── */
html, body {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
}

/* ── Focus visibility for keyboard navigation ── */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
}

/* ── Screen reader only ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Unified sidebar ── */
#sidebar {
  width: 240px;
  background: var(--color-surface-alpha);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow: visible;
  /* Sit above the thread popover's scrim (z:49) so sidebar links stay clickable
     while a thread is open — otherwise the full-viewport scrim swallows the
     click and just closes the thread instead of navigating. (Mobile overrides
     position/z-index in its own media query.) */
  position: relative;
  z-index: 50;
  box-shadow: var(--shadow-sidebar-edge);
}
#sidebar:not(.open) {
  margin-left: -240px;
  opacity: 0;
  visibility: hidden;
}

#sidebar-workspace {
  position: relative;
  padding: 8px 8px 0;
}
.ws-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background 0.1s;
}
.ws-trigger:hover { background: var(--color-hover); }
.ws-badge {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--color-brand);
  color: var(--color-brand-text);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ws-badge-img {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
}
.ws-badge-lg { width: 28px; height: 28px; font-size: 13px; border-radius: 7px; }
.ws-badge-sm { width: 20px; height: 20px; font-size: 10px; border-radius: 5px; }
.ws-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-chevron {
  width: 12px;
  height: 12px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

#sidebar-nav {
  padding: 4px 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background 0.12s;
}
.nav-item svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; }
.nav-item:hover { background: var(--color-hover); color: var(--color-text-primary); }
.nav-item.active { color: var(--color-text-primary); font-weight: 600; }
.nav-item.active svg { opacity: 1; }
#sidebar-nav form { margin: 0; }

/* ── Sidebar accordion sections ── */
.nav-section-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  width: 100%;
  text-align: left;
  text-decoration: none;
  transition: background 0.12s;
}
.nav-section-header svg:first-child { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.7; }
.nav-section-header:hover { background: var(--color-hover); }
.nav-section-header.active,
.nav-section-header:has(+ .nav-section-tools .nav-item.active) { background: var(--color-active); }
.nav-section-header.active svg:first-child,
.nav-section-header:has(+ .nav-section-tools .nav-item.active) svg:first-child { opacity: 1; }

/* ── Duotone nav icons ───────────────────────────────────────────────
   Each glyph is two filled tones of the BRAND hue: a soft pale-sage body
   silhouette (.duo-bg) under a deep-pine accent (.duo-fg, or stroke
   .duo-line). Both derive from currentColor = var(--color-brand), so the
   pair stays monochromatic and theme-adaptive (blue / sky / green per theme).
   The light↔dark contrast between the two opacities is what makes it read as
   refined duotone rather than a flat blob — keep a deliberate GAP between the two opacities. */
/* "Green slate": a desaturated gray with a whisper of the brand mixed in —
   reads as neutral but quietly harmonizes with the brand (in a pine theme it's
   a green-tinted slate; tracks the brand hue in other themes). ONE knob: the
   gray↔brand ratio in --nav-ico-color — raise the brand % to make it more
   obviously green. Solid primary + duotone children share it; the solid-vs-
   duotone treatment carries the hierarchy. */
#sidebar-nav { --nav-ico-color: color-mix(in srgb, var(--color-text-secondary) 85%, var(--color-brand)); }
.nav-section-header svg.nav-ico:first-child { opacity: 1; color: var(--nav-ico-color); }
.nav-item svg.nav-ico { opacity: 1; color: var(--nav-ico-color); }
/* duo-bg = LIGHT tone (body), duo-fg/line = accent. The gap between their
   opacities IS the duotone: too wide reads "drastic", too tight muddies to one
   flat tone. ~0.30 spread (body .48 ↔ accent .78) is the dialed-in sweet spot.
   Hover/active hold this same ~0.30 gap, just deeper — see below. */
.nav-ico .duo-bg   { fill: currentColor; opacity: 0.48; transition: opacity 0.15s ease, color 0.15s ease; }
.nav-ico .duo-fg   { fill: currentColor; opacity: 0.78; transition: opacity 0.15s ease, color 0.15s ease; }
.nav-ico .duo-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.78; transition: opacity 0.15s ease, color 0.15s ease; }
/* Solid glyphs — primary nav (Home / Agents / Integrations): one full-opacity
   fill (no two-tone split) for a bolder read than the duotone children below. */
.nav-ico .solid { fill: currentColor; transition: color 0.15s ease; }

.nav-section-header:hover svg.nav-ico .duo-bg,
.nav-item:hover svg.nav-ico .duo-bg { opacity: 0.54; }
.nav-section-header:hover svg.nav-ico .duo-fg,
.nav-section-header:hover svg.nav-ico .duo-line,
.nav-item:hover svg.nav-ico .duo-fg,
.nav-item:hover svg.nav-ico .duo-line { opacity: 0.84; }

.nav-item.active svg.nav-ico,
.nav-section-header.active svg.nav-ico:first-child,
.nav-section-header:has(+ .nav-section-tools .nav-item.active) svg.nav-ico:first-child { color: var(--nav-ico-color); }
.nav-item.active svg.nav-ico .duo-bg,
.nav-section-header.active svg.nav-ico .duo-bg,
.nav-section-header:has(+ .nav-section-tools .nav-item.active) svg.nav-ico .duo-bg { opacity: 0.58; }
.nav-item.active svg.nav-ico .duo-fg,
.nav-item.active svg.nav-ico .duo-line,
.nav-section-header.active svg.nav-ico .duo-fg,
.nav-section-header.active svg.nav-ico .duo-line,
.nav-section-header:has(+ .nav-section-tools .nav-item.active) svg.nav-ico .duo-fg,
.nav-section-header:has(+ .nav-section-tools .nav-item.active) svg.nav-ico .duo-line { opacity: 0.88; }

/* Add Connection sits one step quieter than the real connections above it. */
.nav-item-add svg.nav-ico { opacity: 1; color: var(--color-text-muted); }
.nav-item-add svg.nav-ico .duo-bg { opacity: 0.22; }
.nav-item-add svg.nav-ico .duo-fg { opacity: 0.60; }

.nav-section-chevron {
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.nav-section-chevron.expanded { transform: rotate(90deg); }

.nav-section-tools {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 10px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.12s ease;
}
.nav-section-tools.collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}
.nav-section-tools.expanded,
.nav-section-tools:has(.nav-item.active) {
  grid-template-rows: 1fr;
  opacity: 1;
}
.nav-section-tools-inner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-section-gap { margin-top: 2px; }

.nav-item-add {
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 12px;
}
.nav-item-add svg { opacity: 0.4; }
.nav-item-add:hover { color: var(--color-text-secondary); }

.nav-item-disabled {
  color: var(--color-text-muted);
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

/* Turbo progress bar */
.turbo-progress-bar {
  background-color: var(--color-brand);
  height: 2px;
}

/* Turbo navigation transition */
.app-main {
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.app-main.turbo-loading {
  opacity: 0.25;
  transform: scale(0.985);
  pointer-events: none;
}
.turbo-nav-spinner {
  position: fixed;
  top: 50%;
  left: calc(50% + 80px);
  transform: translate(-50%, -50%);
  z-index: 100;
  pointer-events: none;
}
.turbo-nav-spinner svg {
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
  animation: turbo-spin 0.7s linear infinite;
}
@keyframes turbo-spin {
  to { transform: rotate(360deg); }
}
.turbo-nav-skeleton {
  padding: 48px 32px;
  pointer-events: none;
}
.turbo-nav-skeleton-inner {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.turbo-skel-line {
  height: 14px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.07) 50%, rgba(0,0,0,0.04) 75%);
  background-size: 200% 100%;
  animation: turbo-shimmer 1.5s ease-in-out infinite;
}
.turbo-skel-line-title { width: 40%; height: 22px; border-radius: 10px; }
.turbo-skel-line-short { width: 30%; }
.turbo-skel-line-med { width: 55%; }
.turbo-skel-line-long { width: 80%; }
.turbo-skel-line-full { width: 100%; }
.turbo-skel-spacer { height: 12px; }
.turbo-skel-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.turbo-skel-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.07) 50%, rgba(0,0,0,0.04) 75%);
  background-size: 200% 100%;
  animation: turbo-shimmer 1.5s ease-in-out infinite;
}
@keyframes turbo-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.nav-item-new-conv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 7px 12px;
  border-radius: 8px;
  border: none;
  background: rgba(139,115,85,0.08);
  color: #a08b6e;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  width: calc(100% - 20px);
  transition: background 0.15s, color 0.15s, transform 0.1s ease;
}
.nav-item-new-conv:hover { background: rgba(139,115,85,0.13); color: #8b7355; transform: scale(1.015); }
.nav-item-new-conv:active { transform: scale(0.97); }
.nav-item-new-conv svg { opacity: 0.6; flex-shrink: 0; }

/* ── Sidebar conversation list (global — shown on all pages) ── */
#sidebar-header {
  padding: 10px 8px 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
#sidebar-header h2 {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 0;
}
.sidebar-lists {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.sidebar-lists:hover {
  scrollbar-color: color-mix(in srgb, var(--color-text-muted) 34%, transparent) transparent;
}
.sidebar-lists::-webkit-scrollbar { width: 5px; }
.sidebar-lists::-webkit-scrollbar-track { background: transparent; }
.sidebar-lists::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
}
.sidebar-lists:hover::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--color-text-muted) 34%, transparent);
}
#conversation-list-wrap { flex: none; min-height: 0; }
#conversation-list-wrap .sidebar-section-body-inner { max-height: none; }
#conversation-list {
  overflow: visible;
  padding: 0 8px 8px;
  max-height: none;
}
.conv-item {
  display: flex;
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--color-text-primary);
  transition: background 0.12s;
  margin-bottom: 1px;
  text-decoration: none;
  line-height: 1.35;
  position: relative;
}
.conv-item:hover { background: var(--color-hover); }
.conv-item.active { background: var(--color-active); font-weight: 600; }
.conv-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-empty { padding: 16px; color: var(--color-text-muted); font-size: 13px; text-align: center; }
.conv-link { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; text-decoration: none; color: inherit; padding: 3px 8px; }
.conv-delete { opacity: 0; border: none; background: none; color: #999; cursor: pointer; font-size: 14px; padding: 0 2px; flex-shrink: 0; transition: opacity 0.12s; }
.conv-item:hover .conv-delete { opacity: 0.5; }
.conv-item:hover .conv-delete:hover { opacity: 1; color: #c53030; }

/* ── Sidebar: collapsible section toggle ── */
.sidebar-section-toggle {
  display: flex; align-items: center; gap: 4px; border: none; background: none;
  cursor: pointer; padding: 0; font-family: inherit; color: inherit;
}
.sidebar-section-toggle:hover h2 { color: var(--color-text-primary); }
.sidebar-section-chevron {
  width: 12px; height: 12px; flex-shrink: 0; color: var(--color-text-muted); opacity: 0.5;
  transition: transform 0.22s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.15s;
}
.sidebar-section-toggle:hover .sidebar-section-chevron { opacity: 0.8; }
.sidebar-section-chevron.rotated { transform: rotate(90deg); }
.sidebar-section-body {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 0.22s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.15s ease;
  opacity: 1;
}
.sidebar-section-body.collapsed { grid-template-rows: 0fr; opacity: 0; pointer-events: none; }
.sidebar-section-body-inner { overflow: hidden; }

/* ── Sidebar: room list items (shared across all pages) ── */
#sidebar-rooms-header { padding: 10px 8px 3px; display: flex; align-items: center; justify-content: space-between; }
#sidebar-rooms-header h2 { font-size: 10.5px; font-weight: 600; text-transform: uppercase; color: var(--color-text-muted); letter-spacing: 0.07em; margin: 0; }
.sidebar-header-actions { display: flex; align-items: center; gap: 1px; }
.sidebar-header-browse,
.sidebar-header-add { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; border: none; background: none; color: var(--color-text-muted); cursor: pointer; padding: 0; opacity: 0.5; transition: opacity 0.15s, background 0.15s; text-decoration: none; }
.sidebar-header-browse:hover,
.sidebar-header-add:hover { opacity: 1; background: var(--color-hover); }
#room-list { padding: 0 8px 4px; max-height: none; overflow: visible; }
.room-item { display: flex; align-items: center; border-radius: 6px; font-size: 12.5px; color: var(--color-text-secondary); cursor: pointer; transition: background 0.12s; }
.room-item:hover { background: var(--color-hover); }
/* Approval-waiting badge: a muted amber pill, distinct from the purple mention
   dot. Amber = "a decision is pending" (attention, not alarm). Styled here in
   application.css — not room.css — because the sidebar renders on /home too,
   where room.css isn't loaded. */
.room-approval-dot {
  flex-shrink: 0;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: #B7791F;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  margin-left: auto;
  line-height: 1;
}
/* When a mention dot is also present it already took margin-left:auto, so the
   approval dot sits beside it with a small gap rather than pushing to the edge. */
.room-mention-dot + .room-approval-dot { margin-left: 4px; }
.room-approval-dot.bump { animation: approvalBump 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes approvalBump { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }
.room-item.active { background: var(--color-active); font-weight: 600; }
.room-item .conv-link { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; text-decoration: none; color: inherit; padding: 3px 8px; }
.room-item-hash { flex-shrink: 0; width: 16px; text-align: center; color: var(--color-room, #4B35C2); opacity: 0.5; font-weight: 700; font-size: 14px; line-height: 1; }
.room-item.active .room-item-hash { opacity: 0.8; }
/* The room's library icon (room.metadata.icon, resolved to an SVG) sits in the
   same 16px leading slot — flex-centered to mirror .conv-status exactly, so a
   channel icon and a private chat-bubble line up. Brand-tinted like the old "#"
   (rooms stay purple; private conversations stay neutral grey). */
.room-item-ico { flex-shrink: 0; width: 16px; display: flex; align-items: center; justify-content: center; color: var(--color-room, #4B35C2); opacity: 0.55; }
.room-item.active .room-item-ico { opacity: 0.85; }
.room-item.has-mentions .room-item-ico { opacity: 1; }
.room-item-avatars { display: flex; align-items: center; flex-shrink: 0; margin-left: auto; padding-left: 6px; }
.room-item-av { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--color-surface); margin-left: -5px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.room-item-av:first-child { margin-left: 0; }
.room-item-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.room-item-av-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--color-room, #4B35C2); color: white; font-size: 9px; font-weight: 600; border-radius: 50%; }
.room-item-av-overflow { background: var(--color-surface); color: var(--color-text-muted, #78716c); font-size: 8px; font-weight: 600; }
.room-item:hover .room-item-av { border-color: var(--color-surface); }
.room-item.active .room-item-av { border-color: var(--color-surface); }

/* ── Sidebar: complete conversation browser ── */
.sidebar-browser-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 1000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 24, 21, 0.24);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}
.sidebar-browser-backdrop[hidden] { display: none; }
.sidebar-browser-backdrop.is-open { opacity: 1; pointer-events: auto; }
.sidebar-browser-dialog {
  display: flex;
  flex-direction: column;
  width: min(580px, calc(100vw - 32px));
  min-height: 360px;
  max-height: min(650px, calc(100dvh - 64px));
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: 0 24px 70px rgba(20, 24, 21, 0.18), 0 4px 14px rgba(20, 24, 21, 0.08);
  opacity: 0;
  transform: translateY(7px) scale(0.99);
  transition: opacity 140ms ease, transform 160ms cubic-bezier(0.16, 1, 0.3, 1);
}
.sidebar-browser-backdrop.is-open .sidebar-browser-dialog {
  opacity: 1;
  transform: none;
}
.sidebar-browser-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 20px 12px;
}
.sidebar-browser-header h2 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.sidebar-browser-header p { margin: 4px 0 0; color: var(--color-text-muted); font-size: 12.5px; }
.sidebar-browser-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -3px -3px 0 0;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.sidebar-browser-close:hover { background: var(--color-hover); color: var(--color-text-primary); }
.sidebar-browser-search {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 20px;
  padding: 0 11px;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--color-surface-alt) 65%, var(--color-surface));
  color: var(--color-text-muted);
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.sidebar-browser-search:focus-within {
  border-color: color-mix(in srgb, var(--color-brand) 42%, var(--color-border));
  background: var(--color-surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 10%, transparent);
}
.sidebar-browser-search input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 13.5px;
}
.sidebar-browser-search input::placeholder { color: var(--color-text-muted); }
.sidebar-browser-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.sidebar-browser-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}
.sidebar-browser-clear[hidden] { display: none; }
.sidebar-browser-clear:hover { background: var(--color-hover); color: var(--color-text-primary); }
.sidebar-browser-search kbd {
  padding: 2px 5px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 10px;
}
.sidebar-browser-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 20px 8px;
  border-bottom: 1px solid var(--color-border);
}
.sidebar-browser-tabs button {
  padding: 5px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 550;
}
.sidebar-browser-tabs button:hover { color: var(--color-text-primary); background: var(--color-hover); }
.sidebar-browser-tabs button.active { color: var(--color-text-primary); background: var(--color-active); }
.sidebar-browser-results {
  flex: 1 1 auto;
  min-height: 160px;
  max-height: 478px;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--color-text-muted) 28%, transparent) transparent;
}
.sidebar-browser-results::-webkit-scrollbar { width: 5px; }
.sidebar-browser-results::-webkit-scrollbar-track { background: transparent; }
.sidebar-browser-results::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text-muted) 28%, transparent);
}
.sidebar-browser-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 50px;
  padding: 7px 10px;
  border-radius: 9px;
  color: inherit;
  text-decoration: none;
  transition: background 100ms ease;
}
.sidebar-browser-item:hover { background: var(--color-hover); }
.sidebar-browser-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--color-text-muted) 7%, transparent);
  color: var(--color-text-muted);
}
.sidebar-browser-item-icon.is-room {
  background: color-mix(in srgb, var(--color-room, #4B35C2) 9%, transparent);
  color: var(--color-room, #4B35C2);
}
.sidebar-browser-item-body { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.sidebar-browser-item-title { overflow: hidden; color: var(--color-text-primary); font-size: 13.5px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-browser-item-meta { overflow: hidden; color: var(--color-text-muted); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-browser-item-arrow { flex: 0 0 auto; color: var(--color-text-muted); opacity: 0; transform: translateX(-2px); transition: opacity 100ms ease, transform 100ms ease; }
.sidebar-browser-item:hover .sidebar-browser-item-arrow { opacity: 0.65; transform: none; }
.sidebar-browser-state { padding: 64px 16px; color: var(--color-text-muted); font-size: 13px; text-align: center; }
.sidebar-browser-state-error { color: var(--color-text-secondary); }
.sidebar-browser-footer { padding: 8px 16px 14px; border-top: 1px solid var(--color-border); text-align: center; }
.sidebar-browser-more {
  padding: 6px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}
.sidebar-browser-more:hover { background: var(--color-hover); color: var(--color-text-primary); }
.sidebar-browser-more:disabled { cursor: default; opacity: 0.55; }

/* ── Sidebar: create/browse room modal (shared across all pages) ── */
.room-create-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: var(--z-modal, 1000);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* Pass clicks through while invisible: without is-open the backdrop is
     opacity:0 but still a full-screen fixed layer, so during the ~150ms close
     fade (is-open dropped before [hidden] re-applies) it would silently eat
     clicks over the page. Only the open backdrop captures clicks. */
  pointer-events: none;
  transition: opacity 150ms ease;
}
.room-create-modal-backdrop[hidden] { display: none; }
.room-create-modal-backdrop.is-open { opacity: 1; pointer-events: auto; }
.room-create-modal {
  background: white;
  border-radius: 18px;
  padding: 28px 30px 24px;
  width: 600px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  box-shadow: 0 24px 70px rgba(0,0,0,0.18), 0 4px 14px rgba(0,0,0,0.08);
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition:
    opacity 150ms ease,
    transform 170ms cubic-bezier(0.16, 1, 0.3, 1);
}
.room-create-modal-backdrop.is-open .room-create-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* The coming-soon placeholder reuses this backdrop class but is toggled only via
   [hidden] (no is-open / no JS controller), so the is-open-gated fade left it
   invisible. Show it the instant it's un-hidden — no fade needed for a static
   placeholder; pointer-events:none above keeps it click-through while hidden. */
#coming-soon-modal:not([hidden]) { opacity: 1; pointer-events: auto; }
#coming-soon-modal:not([hidden]) .room-create-modal { opacity: 1; transform: none; }
.room-create-modal h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
}
.room-modal-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid #e7e5e4;
}
.room-modal-tab {
  flex: 1;
  padding: 8px 0;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 500;
  color: #78716c;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.room-modal-tab:hover { color: #1c1917; }
.room-modal-tab.active {
  color: var(--color-room, #4B35C2);
  border-bottom-color: var(--color-room, #4B35C2);
}
.browse-rooms-list {
  min-height: 140px;
  max-height: 340px;
  overflow-y: auto;
  margin-top: 6px;
}
.browse-rooms-loading {
  padding: 44px 0;
  text-align: center;
  color: #a8a29e;
  font-size: 14px;
}
.browse-rooms-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 40px 0 36px;
  text-align: center;
}
.browse-rooms-empty svg { color: #d6d3d1; margin-bottom: 3px; }
.browse-rooms-empty-title { font-size: 14px; font-weight: 500; color: #78716c; }
.browse-rooms-empty-hint { font-size: 12.5px; color: #a8a29e; }
.browse-room-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 10px;
  transition: background 0.12s;
}
.browse-room-item:hover { background: rgba(0,0,0,0.035); }
.browse-room-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.browse-room-title { display: flex; align-items: baseline; gap: 1px; min-width: 0; }
.browse-room-hash {
  color: var(--color-room, #4B35C2);
  font-weight: 700;
  opacity: 0.55;
}
.browse-room-name {
  font-size: 14px;
  font-weight: 600;
  color: #1c1917;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browse-room-meta {
  font-size: 12px;
  color: #a8a29e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browse-room-join {
  flex-shrink: 0;
  padding: 6px 16px;
  border: 1px solid var(--color-room, #4B35C2);
  border-radius: 8px;
  background: none;
  color: var(--color-room, #4B35C2);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.browse-room-join:hover {
  background: var(--color-room, #4B35C2);
  color: white;
}
.sidebar-browse-rooms {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  border: 1px dashed #d6d3d1;
  border-radius: 8px;
  background: none;
  color: #78716c;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.sidebar-browse-rooms:hover {
  border-color: var(--color-room, #4B35C2);
  color: var(--color-room, #4B35C2);
}
/* Private toggle — iOS-style switch row */
.room-create-switch-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  background: #fafaf9;
  cursor: pointer;
}
.room-create-switch-icon { color: #78716c; flex-shrink: 0; }
.room-create-switch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.room-create-switch-title { font-size: 14px; font-weight: 500; color: #1c1917; }
.room-create-switch-hint { font-size: 12px; color: #a8a29e; }
.room-create-switch-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.room-create-switch {
  flex-shrink: 0;
  width: 42px;
  height: 25px;
  border-radius: 999px;
  background: #d6d3d1;
  position: relative;
  transition: background 0.18s ease;
}
.room-create-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.28);
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.room-create-switch-input:checked + .room-create-switch { background: var(--color-room, #4B35C2); }
.room-create-switch-input:checked + .room-create-switch::after { transform: translateX(17px); }
.room-create-switch-input:focus-visible + .room-create-switch { box-shadow: 0 0 0 3px rgba(75,53,194,0.28); }

/* ── Create room: name hero + derived slug ── */
.room-create-name-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.room-create-icon-chip {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 15px;
  background: rgba(75,53,194,0.09);
  color: var(--color-room, #4B35C2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.08s;
}
.room-create-icon-chip:hover { background: rgba(75,53,194,0.15); }
.room-create-icon-chip:active { transform: scale(0.95); }
.room-create-icon-chip-glyph { display: inline-flex; }
.room-create-name-field { flex: 1; min-width: 0; }
.room-create-name-input {
  width: 100%;
  border: none;
  outline: none;
  padding: 2px 0;
  font-size: 22px;
  font-weight: 600;
  font-family: inherit;
  color: #1c1917;
  background: transparent;
  letter-spacing: -0.01em;
}
.room-create-name-input::placeholder { color: #c4c0bc; font-weight: 600; }
.room-create-slug {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: #a8a29e;
}
.room-create-slug[hidden] { display: none; }
.room-create-slug-tag {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--color-room, #4B35C2);
  background: rgba(75,53,194,0.08);
  padding: 1px 6px;
  border-radius: 5px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* ── Create room: icon picker (quick row + expandable grid) ── */
.room-create-icons { margin-top: 18px; }
.room-create-icon-quick {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.room-create-icon-opt {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #57534e;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, box-shadow 0.12s;
}
.room-create-icon-opt:hover { background: rgba(0,0,0,0.05); color: #1c1917; }
.room-create-icon-opt.is-active {
  background: rgba(75,53,194,0.12);
  color: var(--color-room, #4B35C2);
  box-shadow: inset 0 0 0 1.5px rgba(75,53,194,0.45);
}
.room-create-icon-opt[hidden] { display: none; }
.room-create-icon-glyph { width: 18px; height: 18px; }
.room-create-icon-morebtn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 2px;
  height: 36px;
  padding: 0 11px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: #78716c;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.room-create-icon-morebtn:hover { background: rgba(0,0,0,0.05); color: #1c1917; }
.room-create-icon-chev { transition: transform 0.15s; }
.room-create-icon-morebtn[aria-expanded="true"] .room-create-icon-chev { transform: rotate(180deg); }
.room-create-icon-grid-wrap {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #e7e5e4;
  border-radius: 12px;
  background: #fafaf9;
  animation: roomSuggestionAppear 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.room-create-icon-grid-wrap[hidden] { display: none; }
.room-create-icon-search {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 10px;
  margin-bottom: 8px;
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  background: #fff;
  color: #78716c;
}
.room-create-icon-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: #1c1917;
  outline: none;
}
.room-create-icon-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-height: 168px;
  overflow-y: auto;
}
.room-create-icon-empty {
  padding: 14px 8px;
  text-align: center;
  font-size: 12px;
  color: #a8a29e;
}
.room-create-error {
  font-size: 12px;
  color: var(--color-danger, #dc2626);
  margin: 6px 0 0;
}
.room-create-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}
.room-create-cancel {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: rgba(0,0,0,0.04);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
.room-create-cancel:hover { background: rgba(0,0,0,0.08); }
.room-create-submit {
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: var(--color-room, #4B35C2);
  color: white;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
}
.room-create-submit:hover { background: var(--color-room-hover, #3d328a); }
.room-create-submit:disabled {
  opacity: 0.4;
  cursor: default;
}
/* ── Create room: form fields (description, sections) ── */
.room-create-field { margin-top: 18px; }
.room-create-flabel {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #57534e;
  margin-bottom: 8px;
}
.room-create-flabel-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 10px;
}
.room-create-flabel-row .room-create-flabel { margin-bottom: 0; }
.room-create-optional {
  font-size: 11px;
  font-weight: 500;
  color: #a8a29e;
  background: rgba(0,0,0,0.045);
  padding: 1px 6px;
  border-radius: 5px;
}
.room-create-collab-note { font-size: 12px; color: #a8a29e; }
.room-create-collab-note[hidden] { display: none; }
.room-create-field-hint {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: #a8a29e;
}
.room-create-desc {
  width: 100%;
  border: 1px solid #e7e5e4;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.45;
  resize: none;
  outline: none;
  box-sizing: border-box;
  color: #1c1917;
  transition: border-color 0.15s;
}
.room-create-desc::placeholder { color: #c4c0bc; }
.room-create-desc:focus { border-color: var(--color-room, #4B35C2); }
.room-create-select {
  width: 100%;
  border: 1px solid #e7e5e4;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.45;
  outline: none;
  box-sizing: border-box;
  color: #1c1917;
  background: #fff;
  transition: border-color 0.15s;
}
.room-create-select:focus { border-color: var(--color-room, #4B35C2); }

/* ── Create room: suggested-invite avatars ── */
.room-create-suggested {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}
.room-create-suggested[hidden] { display: none; }
.room-create-suggested-avatar {
  position: relative;
  width: 62px;
  padding: 7px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: none;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s;
}
.room-create-suggested-avatar:hover { background: rgba(0,0,0,0.04); }
.room-create-suggested-avatar-face,
.room-create-suggested-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow 0.12s;
}
.room-create-suggested-avatar-fallback {
  background: var(--color-room, #4B35C2);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.room-create-suggested-avatar-name {
  max-width: 58px;
  font-size: 11px;
  color: #57534e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-create-suggested-avatar-check {
  position: absolute;
  top: 5px;
  right: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-room, #4B35C2);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}
.room-create-suggested-avatar.is-selected { background: rgba(75,53,194,0.08); }
.room-create-suggested-avatar.is-selected .room-create-suggested-avatar-face,
.room-create-suggested-avatar.is-selected img {
  box-shadow: 0 0 0 2px var(--color-room, #4B35C2);
}
.room-create-suggested-avatar.is-selected .room-create-suggested-avatar-check { display: flex; }
.room-create-suggested-avatar.is-selected .room-create-suggested-avatar-name {
  color: var(--color-room, #4B35C2);
  font-weight: 500;
}
/* Hover/focus tooltip — left-anchored so it grows rightward into the modal and
   never clips against the modal's overflow-x (auto, inherited from overflow-y). */
.room-create-suggested-avatar-tip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 4px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 10px;
  border-radius: 9px;
  background: #1c1917;
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
  white-space: nowrap;
  text-align: left;
  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}
.room-create-suggested-avatar-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 22px;
  border: 5px solid transparent;
  border-top-color: #1c1917;
}
.room-create-suggested-avatar:hover .room-create-suggested-avatar-tip,
.room-create-suggested-avatar:focus-visible .room-create-suggested-avatar-tip {
  opacity: 1;
  transform: translateY(0);
}
.room-create-suggested-avatar-tip-name { font-size: 12px; font-weight: 600; color: #fff; }
.room-create-suggested-avatar-tip-email { font-size: 11px; color: rgba(255,255,255,0.72); }
.room-create-suggested-avatar-tip-shared { margin-top: 2px; font-size: 10px; font-weight: 500; color: rgba(255,255,255,0.55); }
.room-create-members {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  padding: 6px 8px;
  min-height: 36px;
  cursor: text;
  transition: border-color 0.15s;
  position: relative;
}
.room-create-members:has(.room-create-member-chip) { padding: 4px 6px; }
.room-create-members:focus-within { border-color: var(--color-room, #4B35C2); }
.room-create-members-selected { display: contents; }
.room-create-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 2px;
  background: rgba(75,53,194,0.08);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-room, #4B35C2);
  white-space: nowrap;
  animation: roomSuggestionAppear 0.15s ease-out;
}
.room-create-member-chip img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}
.room-create-member-chip-fallback {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-room, #4B35C2);
  color: white;
  font-size: 9px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.room-create-member-chip-remove {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  color: rgba(75,53,194,0.4);
  font-size: 14px;
  line-height: 1;
  transition: color 0.12s;
}
.room-create-member-chip-remove:hover { color: var(--color-room, #4B35C2); }
.room-create-member-search {
  flex: 1;
  min-width: 80px;
  border: none;
  outline: none;
  padding: 4px 0;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
}
.room-create-member-search::placeholder { color: #c4c0bc; }
.room-create-member-results {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.15s ease;
}
.room-create-member-results.open {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid #e7e5e4;
  border-radius: 8px;
  margin-top: 4px;
}
.room-create-member-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  transition: background 0.1s;
}
.room-create-member-item:hover { background: rgba(75,53,194,0.04); }
.room-create-member-item img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.room-create-member-item-fallback {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-room, #4B35C2);
  color: white;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.room-create-member-item-info {
  flex: 1;
  min-width: 0;
}
.room-create-member-item-name {
  font-size: 13px;
  font-weight: 500;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-create-member-item-email {
  font-size: 11px;
  color: #a8a29e;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-create-member-results-empty {
  padding: 10px;
  text-align: center;
  font-size: 12px;
  color: #a8a29e;
}
@keyframes roomCreateModalAppear {
  0% { opacity: 0; transform: scale(0.96) translateY(8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes roomSuggestionAppear {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Status indicators */
.conv-status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  overflow: visible;
  position: relative;
  transition: width 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.conv-status:not(:empty) { width: 16px; }
/* Idle leading glyph for a private conversation — the app's chat bubble (same as
   the Feed tab), muted grayscale so it reads as a quiet identity mark beside the
   channel "#", not a brand accent. Fills the same 16px slot the live status
   indicators use, so there's no shift between idle and active. */
.conv-icon { color: var(--color-text-muted); opacity: 0.75; }
.conv-item.active .conv-icon { opacity: 0.95; }
.status-swap { display: flex; align-items: center; justify-content: center; }
.status-enter { animation: statusEnter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes statusEnter {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.status-typing { display: flex; align-items: center; gap: 2px; }
.status-typing span {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--color-brand);
  animation: typingBounce 1.4s ease-in-out infinite;
}
.status-typing span:nth-child(2) { animation-delay: 0.2s; }
.status-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30% { transform: translateY(-3px); opacity: 1; }
}
.status-tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  animation: toolPulse 2s ease-in-out infinite;
}
.status-tool-icon svg { width: 12px; height: 12px; }
.status-tool-icon svg, .status-tool-icon svg * { stroke: var(--color-brand); fill: none; }
.status-tool-icon svg[fill="#555"],
.status-tool-icon .icon-github { fill: var(--color-brand); }
@keyframes toolPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.status-waiting {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fef3c7;
  animation: attentionPulse 2s ease-in-out infinite;
}
.status-waiting::after {
  content: "!";
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #b45309;
}
@keyframes attentionPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.15); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 3px transparent; }
}

/* Nav badge (attention count on sidebar links) */
.nav-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-muted, #999);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  margin-left: auto;
  flex-shrink: 0;
}
.nav-badge-clock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 24px;
  padding: 0 5px;
}
.nav-badge-clock svg {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
}
.status-running {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand);
  animation: pulse 1.5s infinite;
}

.schedule-badge {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(0,0,0,0.06);
  color: #666;
  padding: 0 6px;
  transition: all 0.3s ease;
}
.schedule-badge.bump {
  animation: badge-bump 0.8s ease-out;
  background: rgba(0,0,0,0.10);
}
@keyframes badge-bump {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

#sidebar-user {
  position: relative;
  padding: 4px 8px;
  margin-top: 10px;
}
.user-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background 0.1s;
}
.user-trigger:hover { background: var(--color-hover); }
.user-avatar, .user-avatar-fallback {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}
.user-avatar { object-fit: cover; }
.user-avatar-fallback {
  background: var(--color-brand);
  color: var(--color-brand-text);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-info { flex: 1; min-width: 0; }
.user-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-email { display: block; font-size: 11px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chevron {
  display: none;
}

/* ── Sidebar sound toggle ── */
.sidebar-sound-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: pointer;
  color: #999;
  padding: 0;
  transition: background 0.12s, color 0.12s;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.sidebar-sound-toggle:hover {
  background: rgba(0,0,0,0.06);
  color: #555;
}

/* Sound icon animated states */
.sound-wave, .sound-mute {
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}
.sound-icon-svg.sound-on .sound-wave {
  opacity: 1;
  transform: scaleX(1);
}
.sound-icon-svg.sound-on .sound-wave-1 { transition-delay: 0.05s; }
.sound-icon-svg.sound-on .sound-wave-2 { transition-delay: 0.15s; }
.sound-icon-svg.sound-on .sound-mute {
  opacity: 0;
  transform: scale(0.5);
}

.sound-icon-svg.sound-off .sound-wave {
  opacity: 0;
  transform: scaleX(0.5);
}
.sound-icon-svg.sound-off .sound-mute {
  opacity: 1;
  transform: scale(1);
}
.sound-icon-svg.sound-off .sound-mute-1 { transition-delay: 0.05s; }
.sound-icon-svg.sound-off .sound-mute-2 { transition-delay: 0.1s; }

/* ── Shared dropdown styles ── */
.sidebar-dropdown {
  position: absolute;
  left: 8px;
  width: calc(100% + 32px);
  background: var(--color-card);
  border-radius: 10px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 2px 4px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.1),
    0 24px 48px rgba(0,0,0,0.06);
  z-index: var(--z-dropdown);
  padding: 4px 0;
}
.sidebar-dropdown:not(.sidebar-dropdown-up) {
  top: 100%;
  margin-top: 6px;
}
.sidebar-dropdown-up {
  bottom: 100%;
  margin-bottom: 6px;
}
@keyframes dropdown-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dropdown-up-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 6px;
}
.dropdown-header-info { flex: 1; min-width: 0; }
.dropdown-header-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown-header-meta {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 1px;
}

.dropdown-section {
  padding: 2px 6px;
}
.dropdown-section-label {
  padding: 6px 10px 3px;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dropdown-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--color-text-secondary);
  border-radius: 6px;
  transition: background 0.1s, color 0.1s;
  text-decoration: none;
}
.dropdown-menu-item svg { width: 14px; height: 14px; opacity: 0.45; flex-shrink: 0; }
.dropdown-menu-item:hover { background: var(--color-hover); color: var(--color-text-primary); }
.dropdown-menu-item:hover svg { opacity: 0.7; }
.dropdown-menu-item-danger { color: var(--color-text-muted); }
.dropdown-menu-item-danger:hover { background: rgba(220,38,38,0.06); color: #dc2626; }
.dropdown-menu-item-danger:hover svg { opacity: 1; }
form.dropdown-menu-item-danger { padding: 0; }
form.dropdown-menu-item-danger > button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--color-text-muted);
  border-radius: 6px;
  transition: background 0.1s, color 0.1s;
}
form.dropdown-menu-item-danger > button svg { width: 14px; height: 14px; opacity: 0.45; flex-shrink: 0; }
form.dropdown-menu-item-danger > button:hover { background: rgba(220,38,38,0.06); color: #dc2626; }
form.dropdown-menu-item-danger > button:hover svg { opacity: 1; }

.dropdown-footer-email {
  padding: 4px 10px 2px;
  font-size: 11px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-legal {
  padding: 6px 10px 8px;
  font-size: 10px;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.dropdown-legal a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.dropdown-legal a:hover { text-decoration: underline; }
.dropdown-legal-logo {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 2px;
}
.dropdown-legal-sep { opacity: 0.5; }

.dropdown-divider {
  height: 1px;
  background: var(--color-border);
  margin: 4px 10px;
}

.dropdown-ws-list {
  padding: 2px 6px;
  max-height: 260px;
  overflow-y: auto;
}
.dropdown-ws-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-primary);
  border-radius: 6px;
  transition: background 0.1s;
  text-decoration: none;
}
.dropdown-ws-item:hover { background: var(--color-hover); }
.dropdown-ws-item.active { background: var(--color-hover); cursor: default; }
.dropdown-ws-info { flex: 1; min-width: 0; }
.dropdown-ws-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 13px; }
.dropdown-ws-plan { display: block; font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
.dropdown-check { width: 15px; height: 15px; color: var(--color-brand); flex-shrink: 0; }
.dropdown-ws-item-new { color: var(--color-text-muted); transition: color 0.2s ease; margin: 6px 2px; }
.dropdown-ws-item.dropdown-ws-item-new:hover { background: transparent; color: #3b82f6; }
.dropdown-ws-item-new:hover .ws-badge-add { border-color: #3b82f6; color: #3b82f6; }
.ws-badge-add {
  background: none;
  border: 1.5px dashed rgba(0,0,0,0.15);
  color: #999;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ws-badge-add svg { width: 12px; height: 12px; }

/* button_to generates <form class="..."><button>...</button></form> — style inner button */
form.dropdown-ws-item,
form.dropdown-item {
  padding: 0;
  border-radius: 6px;
}
form.dropdown-ws-item > button,
form.dropdown-item > button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: inherit;
  border-radius: 6px;
  transition: background 0.1s;
}
form.dropdown-ws-item > button:hover,
form.dropdown-item > button:hover { background: rgba(0,0,0,0.04); }

/* Legacy dropdown-item kept for non-refactored pages */
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-secondary);
  transition: background 0.1s;
  text-decoration: none;
}
.dropdown-item svg,
form.dropdown-item > button svg { width: 14px; height: 14px; opacity: 0.45; flex-shrink: 0; }
.dropdown-item:hover { background: var(--color-hover); color: var(--color-text-primary); }
.dropdown-item-new { color: var(--color-brand); font-weight: 500; }
.dropdown-item-new svg { opacity: 0.8; }
.dropdown-item-new:hover { background: var(--color-brand-subtle); }
.dropdown-item-danger:hover { background: rgba(220,38,38,0.06); color: #dc2626; }
.dropdown-item-danger:hover svg { opacity: 1; }
form.dropdown-item-danger > button:hover { background: rgba(220,38,38,0.06); color: #dc2626; }

/* App layout main content (next to sidebar) */
.app-main {
  flex: 1;
  overflow-y: auto;
  min-width: 0;
  position: relative;
  background: var(--color-surface);
  animation: mainFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes mainFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ── Flash toasts ── */
.app-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);
  animation: toast-in 0.3s cubic-bezier(0.34, 1.4, 0.64, 1) both,
             toast-out 0.3s ease-in 2.5s both;
  pointer-events: none;
  white-space: nowrap;
}
.app-toast-notice {
  background: var(--color-card);
  color: var(--color-text-primary);
}
.app-toast-alert {
  background: var(--color-card);
  color: var(--color-danger);
}
@keyframes toast-in {
  0% { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.95); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes toast-out {
  0% { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

/* ── App empty state (matches chat empty-state-container pattern) ── */
.app-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: -32px;
  min-height: 100vh;
  padding: 0 20px;
}
.app-empty-state::before {
  content: '';
  flex: 3;
}
.app-empty-state::after {
  content: '';
  flex: 5;
}

/* ── Shared connect prompt (unconnected integration empty state) ── */
.connect-prompt {
  max-width: 400px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
  flex-shrink: 0;
}
.connect-prompt-icon { margin-bottom: 16px; display: flex; justify-content: center; color: var(--color-brand, #144629); }
.connect-prompt-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 8px;
}
.connect-prompt-desc {
  font-size: 13px;
  color: #888;
  margin: 0 0 20px;
  line-height: 1.5;
}
.connect-prompt-caps {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px;
  margin-bottom: 20px;
  background: rgba(20,70,41,0.03);
  border: 1px solid rgba(20,70,41,0.06);
  border-radius: 10px;
}
.connect-prompt-caps-title {
  font-weight: 600;
  font-size: 13px;
  color: #374151;
  margin-bottom: 2px;
}
.connect-prompt-cap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #555;
  line-height: 1.45;
}
.connect-prompt-cap svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.connect-prompt-cap strong { font-weight: 600; color: #333; }
.connect-prompt-cap-caution { color: #f59e0b; font-size: 11px; width: 14px; text-align: center; }
.connect-prompt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: var(--color-brand);
  color: var(--color-brand-text);
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.12s, transform 0.1s;
}
.connect-prompt-btn:hover {
  background: var(--color-brand-hover);
  transform: translateY(-1px);
}

/* ── Mobile: full-screen sidebar overlay ── */
@media (max-width: 768px) {
  #sidebar.open, #sidebar:not(.open) {
    width: 100%;
    height: 100dvh;
    position: absolute; top: 0; left: 0;
    opacity: 0;
    border-right: none;
    box-shadow: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: var(--z-sidebar-mobile);
    pointer-events: none;
    background: var(--color-surface);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  #sidebar.mobile-open #conversation-list,
  #sidebar.mobile-open #room-list {
    max-height: none;
    overflow: visible;
  }
  #sidebar .sidebar-lists { flex: none; overflow: visible; }
  .sidebar-browser-backdrop { align-items: flex-end; padding: 0; }
  .sidebar-browser-dialog {
    width: 100%;
    height: min(82dvh, 680px);
    min-height: 420px;
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
  }
  #sidebar.mobile-open, #sidebar.open.mobile-open {
    opacity: 1;
    pointer-events: auto;
    padding-top: 56px;
  }
  #sidebar-toggle {
    position: absolute;
    left: 14px;
    top: calc(14px + env(safe-area-inset-top, 0px));
    transform: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    z-index: calc(var(--z-sidebar-mobile) + 1);
    transition: left 0.2s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.12s;
  }
  #sidebar-toggle svg {
    width: 18px; height: 18px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.15s ease;
    position: absolute;
  }
  #sidebar-toggle .sidebar-toggle-chevron { display: none; }
  #sidebar-toggle .sidebar-toggle-hamburger {
    display: block; opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  #sidebar-toggle .sidebar-toggle-close {
    display: block; opacity: 0;
    transform: scale(0.5) rotate(-90deg);
  }
  #sidebar.mobile-open ~ #sidebar-toggle {
    background: transparent;
  }
  #sidebar.mobile-open ~ #sidebar-toggle .sidebar-toggle-hamburger {
    opacity: 0; transform: scale(0.5) rotate(90deg);
  }
  #sidebar.mobile-open ~ #sidebar-toggle .sidebar-toggle-close {
    opacity: 1; transform: scale(1) rotate(0deg);
  }

  /* On mobile, keep the Integrations sub-nav (Mail/Calendar/Tasks/Drive) always
     expanded so users can jump directly into those pages without first tapping
     Integrations. The accordion collapse is a desktop affordance only. */
  .nav-section-tools,
  .nav-section-tools.collapsed {
    grid-template-rows: 1fr;
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── Dark theme: sidebar & nav overrides ── */
[data-theme="wistful_juniper"],
[data-theme="deep_current"] {
  .nav-item-new-conv {
    background: rgba(255,255,255,0.06);
    color: var(--color-text-secondary);
  }
  .nav-item-new-conv:hover {
    background: rgba(255,255,255,0.1);
    color: var(--color-text-primary);
  }
  .nav-item-new-room {
    background: rgba(255,255,255,0.06);
    color: var(--color-text-secondary);
  }
  .nav-item-new-room:hover {
    background: rgba(255,255,255,0.1);
    color: var(--color-text-primary);
  }
  .nav-new-more-plus {
    color: var(--color-text-secondary);
  }
  .room-item-av-overflow {
    background: var(--color-hover);
    color: var(--color-text-muted);
  }

  /* Active sidebar items — stronger highlight on dark backgrounds */
  .conv-item.active {
    background: rgba(255,255,255,0.1);
  }
  .room-item.active {
    background: rgba(255,255,255,0.1);
  }

  /* Shared create/browse room modal */
  .room-create-modal {
    background: var(--color-card);
    color: var(--color-text-primary);
    box-shadow: 0 24px 70px rgba(0,0,0,0.5);
  }
  .room-modal-tabs { border-color: var(--color-border); }
  .room-modal-tab { color: var(--color-text-muted); }
  .room-modal-tab:hover { color: var(--color-text-primary); }

  /* Name hero + slug */
  .room-create-name-input { color: var(--color-text-primary); }
  .room-create-name-input::placeholder { color: var(--color-text-muted); }
  .room-create-slug { color: var(--color-text-muted); }

  /* Icon picker */
  .room-create-icon-opt { color: var(--color-text-secondary); }
  .room-create-icon-opt:hover { background: rgba(255,255,255,0.07); color: var(--color-text-primary); }
  .room-create-icon-morebtn { color: var(--color-text-muted); }
  .room-create-icon-morebtn:hover { background: rgba(255,255,255,0.07); color: var(--color-text-primary); }
  .room-create-icon-grid-wrap { background: var(--color-input-bg); border-color: var(--color-border); }
  .room-create-icon-search { background: var(--color-card); border-color: var(--color-border); color: var(--color-text-muted); }
  .room-create-icon-search-input { color: var(--color-text-primary); }
  .room-create-icon-empty { color: var(--color-text-muted); }

  /* Private switch */
  .room-create-switch-row { background: var(--color-input-bg); border-color: var(--color-border); }
  .room-create-switch-icon { color: var(--color-text-muted); }
  .room-create-switch-title { color: var(--color-text-primary); }
  .room-create-switch-hint { color: var(--color-text-muted); }
  .room-create-switch { background: rgba(255,255,255,0.22); }

  /* Fields */
  .room-create-flabel { color: var(--color-text-secondary); }
  .room-create-optional { background: rgba(255,255,255,0.08); color: var(--color-text-muted); }
  .room-create-collab-note { color: var(--color-text-muted); }
  .room-create-field-hint { color: var(--color-text-muted); }
  .room-create-desc,
  .room-create-select,
  .room-create-members,
  .room-create-member-results.open { border-color: var(--color-border); }
  .room-create-desc,
  .room-create-select,
  .room-create-member-search { color: var(--color-text-primary); }
  .room-create-desc,
  .room-create-select { background: var(--color-input-bg); }
  .room-create-desc::placeholder,
  .room-create-member-search::placeholder { color: var(--color-text-muted); }

  /* Suggested-invite avatars */
  .room-create-suggested-avatar:hover { background: rgba(255,255,255,0.06); }
  .room-create-suggested-avatar-name { color: var(--color-text-secondary); }
  .room-create-suggested-avatar-check { box-shadow: 0 0 0 2px var(--color-card); }
  /* Lift the tooltip off the dark modal surface (a near-black pill would blend
     into the dark card), and recolor the caret to match. */
  .room-create-suggested-avatar-tip {
    background: var(--color-active);
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  }
  .room-create-suggested-avatar-tip::after { border-top-color: var(--color-active); }
  .room-create-suggested-avatar-tip-name { color: var(--color-text-primary); }
  .room-create-suggested-avatar-tip-email { color: var(--color-text-secondary); }
  .room-create-suggested-avatar-tip-shared { color: var(--color-text-muted); }

  .room-create-cancel {
    background: var(--color-hover);
    color: var(--color-text-secondary);
  }
  .room-create-cancel:hover { background: var(--color-active); }
  .room-create-member-item:hover { background: var(--color-hover); }
  .room-create-member-item-name { color: var(--color-text-primary); }
  .room-create-member-results.open { background: var(--color-card); }
  .browse-rooms-loading { color: var(--color-text-muted); }
  .browse-rooms-empty svg { color: var(--color-text-muted); opacity: 0.5; }
  .browse-rooms-empty-title { color: var(--color-text-secondary); }
  .browse-rooms-empty-hint { color: var(--color-text-muted); }
  .browse-room-item:hover { background: rgba(255,255,255,0.05); }
  .browse-room-name { color: var(--color-text-primary); }
  .browse-room-meta { color: var(--color-text-muted); }
  .sidebar-browse-rooms {
    border-color: var(--color-border);
    color: var(--color-text-muted);
  }
  .sidebar-browse-rooms:hover {
    border-color: var(--color-room);
    color: var(--color-room);
  }

  /* Connect prompt (empty integration state) */
  .connect-prompt-desc { color: var(--color-text-muted); }
  .connect-prompt-caps {
    background: var(--color-brand-subtle);
    border-color: var(--color-border);
  }
  .connect-prompt-caps-title { color: var(--color-text-primary); }
  .connect-prompt-cap { color: var(--color-text-secondary); }
  .connect-prompt-cap strong { color: var(--color-text-primary); }
  .connect-prompt-btn {
    background: var(--color-brand);
    color: var(--color-brand-text);
  }
  .connect-prompt-btn:hover { opacity: 0.9; }
}

/* ── Scheduled Runs page ── */

.sched-page {
  max-width: 900px;
  margin: 0 auto;
}
.sched-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.sched-page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.sched-page-subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.sched-new-btn {
  padding: 8px 16px;
  background: var(--color-brand);
  color: var(--color-brand-text);
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.15s;
}
.sched-new-btn:hover { opacity: 0.9; }

.sched-section { margin-bottom: 32px; }
.sched-section-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.sched-section-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Schedule card ── */

.sched-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
}
.sched-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.sched-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.sched-badge-paused {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  background: var(--color-hover);
  color: var(--color-text-muted);
}
.sched-card-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.sched-card-prompt {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sched-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  flex-shrink: 0;
}
.sched-btn {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.sched-btn:hover {
  background: var(--color-hover);
}
.sched-btn-resume {
  background: rgba(34,197,94,0.08);
  color: #22c55e;
  border-color: rgba(34,197,94,0.25);
}
.sched-btn-resume:hover {
  background: rgba(34,197,94,0.15);
}

/* Next run */
.sched-next-run {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-muted);
}
.sched-overdue { color: #f59e0b; }

/* Run history */
.sched-history {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.sched-history-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.sched-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sched-run {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.sched-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-muted);
  flex-shrink: 0;
}
.sched-dot-success { background: #4ade80; }
.sched-dot-fail { background: #f87171; }
.sched-dot-running { background: #fbbf24; animation: pulse 1.5s infinite; }
.sched-run-time {
  color: var(--color-text-muted);
  white-space: nowrap;
}
.sched-run-summary {
  color: var(--color-text-secondary);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sched-run-duration {
  color: var(--color-text-muted);
  white-space: nowrap;
}
.sched-run-link {
  color: var(--color-brand);
  white-space: nowrap;
  text-decoration: none;
}
.sched-run-link:hover { opacity: 0.8; }

/* Schedule form controls */
.sched-form input[type="text"],
.sched-form textarea,
.sched-form select {
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03);
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

/* ── Dark theme: schedule form overrides ── */
[data-theme="wistful_juniper"],
[data-theme="deep_current"] {
  /* Form page */
  .sched-form h1 { color: var(--color-text-primary); }
  .sched-form a.text-sm { color: var(--color-text-muted); }
  .sched-form a.text-sm:hover { color: var(--color-text-secondary); }
  .sched-form label { color: var(--color-text-secondary); }
  .sched-form .text-pine-gray-700 { color: var(--color-text-secondary); }
  .sched-form .text-pine-gray-900 { color: var(--color-text-primary); }
  .sched-form .text-pine-gray-600 { color: var(--color-text-secondary); }
  .sched-form .text-pine-gray-500 { color: var(--color-text-muted); }
  .sched-form .text-pine-gray-400 { color: var(--color-text-muted); }
  .sched-form input[type="text"],
  .sched-form textarea,
  .sched-form select {
    background: var(--color-input-bg);
    border-color: var(--color-border);
    color: var(--color-text-primary);
  }
  .sched-form .bg-white\/60,
  .sched-form .bg-white {
    background: var(--color-card);
  }
  .sched-form .border-pine-gray-200 { border-color: var(--color-border); }
  .sched-form .border-pine-gray-100 { border-color: var(--color-border); }
  .sched-form .divide-pine-gray-100 > * + * { border-color: var(--color-border); }
  .sched-form .bg-pine-gray-50 { background: var(--color-hover); }

  /* Day pills — unselected state */
  .sched-form .day-pill { color: var(--color-text-muted); }

  /* Preset buttons — unselected */
  .sched-form .preset-btn {
    background: var(--color-card);
    border-color: var(--color-border);
    color: var(--color-text-muted);
  }

  /* Mode toggle — unselected */
  .sched-form .mode-toggle-btn {
    color: var(--color-text-muted);
  }
  .sched-form .mode-toggle-btn.bg-white { background: var(--color-card); }

  /* Next runs preview dots */
  .sched-form .bg-pine-gray-300 { background: var(--color-text-muted); }

  /* Schedule badge in sidebar */
  .schedule-badge {
    background: rgba(255,255,255,0.08);
    color: var(--color-text-muted);
  }
}

.sched-form input[type="text"]:focus,
.sched-form input[type="text"]:focus-visible,
.sched-form textarea:focus,
.sched-form textarea:focus-visible,
.sched-form select:focus,
.sched-form select:focus-visible {
  outline: none;
  border-color: rgba(20, 70, 41, 0.34);
  box-shadow:
    0 0 0 3px rgba(20, 70, 41, 0.055),
    0 1px 2px rgba(17, 24, 39, 0.035);
}

/* ── Actions (mission control) ── */

.act-page {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.act-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -8px;
}
.act-header-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-primary);
}
.act-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-brand);
  color: var(--color-brand-text);
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
.act-new-btn:hover { opacity: 0.9; }

.act-lane {}
.act-lane-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.act-lane-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.act-lane-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-brand);
  background: rgba(20, 70, 41, 0.08);
  padding: 1px 7px;
  border-radius: 10px;
}
.act-manage-link {
  margin-left: auto;
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
}
.act-manage-link:hover { color: var(--color-text-secondary); }

.act-lane-quiet {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 4px 16px;
}
.act-lane-quiet-link {
  color: var(--color-brand);
  text-decoration: none;
}
.act-lane-quiet-link:hover { opacity: 0.8; }

.act-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-brand);
  animation: pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
.act-pulse-idle {
  background: var(--color-text-muted);
  opacity: 0.3;
  animation: none;
}

.act-lane-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.act-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  transition: background 0.12s;
  text-decoration: none;
  color: inherit;
  cursor: default;
}
a.act-item { cursor: pointer; }
a.act-item:hover { background: var(--color-hover); }

.act-item-live {
  background: rgba(20, 70, 41, 0.04);
}
a.act-item-live:hover {
  background: rgba(20, 70, 41, 0.07);
}
.act-item-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1;
  color: inherit;
  text-decoration: none;
}
a.act-item-main {
  cursor: pointer;
}
.act-item-stop-form {
  margin: 0;
  flex-shrink: 0;
}
.act-item-stop {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 8px;
  background: rgba(254, 242, 242, 0.75);
  color: #dc2626;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.act-item-stop:hover,
.act-item-stop:focus-visible {
  background: #fee2e2;
  outline: none;
}

.act-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.act-item-icon svg {
  width: 14px;
  height: 14px;
}
.act-icon-scheduled {
  background: rgba(20, 70, 41, 0.08);
  color: var(--color-brand);
}
.act-icon-chat {
  background: rgba(20, 70, 41, 0.08);
  color: var(--color-brand);
}
.act-icon-action {
  background: rgba(20, 70, 41, 0.08);
  color: var(--color-brand);
}
.act-icon-upcoming {
  background: var(--color-hover);
  color: var(--color-text-muted);
}

.act-item-body {
  flex: 1;
  min-width: 0;
}
.act-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.act-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.act-item-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.act-status {
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
.act-status-ok {
  color: var(--color-brand);
  background: rgba(20, 70, 41, 0.08);
}
.act-status-fail {
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}
.act-status-indeterminate {
  color: #b45309;
  background: rgba(180, 83, 9, 0.1);
}
.act-status-cancelled {
  color: var(--color-text-muted);
  background: rgba(107, 114, 128, 0.1);
}

.act-item-arrow {
  color: var(--color-text-muted);
  opacity: 0;
  align-self: center;
  flex-shrink: 0;
  transition: opacity 0.12s;
}
a.act-item:hover .act-item-arrow { opacity: 0.6; }

/* Dark theme overrides for actions */
[data-theme="wistful_juniper"] .act-item-live,
[data-theme="deep_current"] .act-item-live {
  background: rgba(255, 255, 255, 0.03);
}
[data-theme="wistful_juniper"] a.act-item-live:hover,
[data-theme="deep_current"] a.act-item-live:hover {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="wistful_juniper"] .act-icon-scheduled,
[data-theme="wistful_juniper"] .act-icon-chat,
[data-theme="wistful_juniper"] .act-icon-action,
[data-theme="deep_current"] .act-icon-scheduled,
[data-theme="deep_current"] .act-icon-chat,
[data-theme="deep_current"] .act-icon-action {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="wistful_juniper"] .act-lane-count,
[data-theme="deep_current"] .act-lane-count,
[data-theme="wistful_juniper"] .act-status-ok,
[data-theme="deep_current"] .act-status-ok {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme="wistful_juniper"] .act-status-fail,
[data-theme="deep_current"] .act-status-fail {
  color: #fca5a5;
  background: rgba(252, 165, 165, 0.1);
}
[data-theme="wistful_juniper"] .act-status-cancelled,
[data-theme="deep_current"] .act-status-cancelled {
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.06);
}

@media (prefers-reduced-motion: reduce) {
  .room-create-modal-backdrop,
  .room-create-modal {
    transition: none;
  }

  .room-create-modal {
    transform: none;
  }
}

/* ── Connection / provider icon guard (belt-and-suspenders) ──────────────────
   The settings modal injects the Integrations partial onto pages whose <head>
   loads only the global + settings bundles — NOT connections.css. Without that
   file, both `.conn-row-icon` (box) and `.conn-row-icon svg` (20px) are absent,
   so an inline <svg> with only a viewBox sizes to its container and the box
   sizes to the svg — a loop that resolves to "huge". This lives in the
   ALWAYS-loaded application.css so the constraint can never be missing again,
   and `overflow:hidden` is a hard clip so even an unstyled future context can't
   break the layout. Covers <img> too, in case a provider icon is ever raster. */
.conn-row-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border-radius: 8px;
}
.conn-row-icon svg,
.conn-row-icon img {
  width: 20px; height: 20px;
  flex-shrink: 0;
  max-width: 100%; max-height: 100%;
}
/* The provider icon isn't the only inline SVG in a connection row — the chevron
   is another viewBox-only SVG that balloons without connections.css. Bound it
   explicitly AND cap ANY svg/img in a .conn-row, so no row icon can blow up again
   even if a context is missing connections.css. (Exact sizes still come from the
   component rules; these are the ceiling + the chevron's known size.) */
.conn-row-chevron { width: 14px; height: 14px; flex-shrink: 0; }
.conn-row svg, .conn-row img { max-width: 24px; max-height: 24px; }
/* Final backstop for the WHOLE connections surface (.conn-page is the wrapper of
   the injected Integrations content): no inline icon anywhere in it can balloon,
   even one whose specific class I haven't enumerated. A generous 64px ceiling
   prevents the screen-filling blow-up while never clipping a real icon — exact
   sizes still come from connections.css (now loaded in the modal too). */
.conn-page svg, .conn-page img { max-width: 64px; max-height: 64px; }

/* ── SettingsRegistry rows + the ONE toggle (console-parity settings) ──────
   Lives in application.css deliberately: the same _setting_row partial renders
   in the room Settings tab (room.css loaded) AND the workspace settings modal
   (room.css NOT loaded) — global stylesheet or it breaks in the modal. */
.setting-group-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sketch-text-muted, #79716b); margin: 18px 0 6px; }
.setting-rows { display: flex; flex-direction: column; border: 1px solid var(--sketch-border, #e7e5e4); border-radius: 12px; background: var(--sketch-card, #fff); overflow: hidden; }
.setting-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 16px; }
.setting-row + .setting-row { border-top: 1px solid var(--sketch-border, #e7e5e4); }
.setting-row-info { flex: 1 1 auto; min-width: 0; }
.setting-row-label { font-size: 13.5px; font-weight: 600; color: var(--sketch-text, #1c1917); }
.setting-row-help { margin-top: 2px; font-size: 12px; color: var(--sketch-text-muted, #79716b); line-height: 1.45; max-width: 52ch; }
.setting-row-origin { margin-top: 5px; font-size: 11px; color: var(--sketch-text-muted, #79716b); display: flex; align-items: center; gap: 4px; }
.setting-row-inline-form { display: inline; }
.setting-row-reset { border: 0; background: none; padding: 0; font-size: 11px; color: var(--color-room, #4B35C2); cursor: pointer; text-decoration: underline; }
.setting-row-control { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding-top: 2px; }
.setting-row-control form { display: flex; align-items: center; gap: 8px; }
.setting-row-readonly { font-size: 13px; color: var(--sketch-text-sec, #57534e); }
/* Long text values (room instructions) break the two-column row: the control
   column is flex-basis:auto, so a 500-char value widens it until the info
   column crushes to one word per line. Text-type entries render STACKED —
   info on top, value/editor full-width below. */
.setting-row-stacked { display: block; }
.setting-row-stacked .setting-row-control { padding-top: 10px; }
.setting-row-stacked .setting-row-control,
.setting-row-stacked .setting-row-control form { display: block; }
.setting-row-stacked .setting-row-textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.setting-row-stacked .setting-row-save { margin-top: 8px; }
.setting-row-value-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--sketch-text-sec, #57534e);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--sketch-bg, #fafaf9);
  border: 1px solid var(--sketch-border, #e7e5e4);
  border-radius: 8px;
  padding: 10px 12px;
  max-height: 180px;
  overflow-y: auto;
}
.setting-row-select, .setting-row-input { font-size: 13px; font-family: inherit; color: var(--sketch-text, #1c1917); background: var(--sketch-bg, #fafaf9); border: 1px solid var(--sketch-border, #e7e5e4); border-radius: 8px; padding: 7px 10px; min-width: 180px; }
.setting-row-textarea { font-size: 13px; font-family: inherit; color: var(--sketch-text, #1c1917); background: var(--sketch-bg, #fafaf9); border: 1px solid var(--sketch-border, #e7e5e4); border-radius: 8px; padding: 8px 10px; min-width: 320px; resize: vertical; }
.setting-row-select:focus, .setting-row-input:focus, .setting-row-textarea:focus { outline: 2px solid var(--color-room, #4B35C2); outline-offset: 1px; }
.setting-row-save { font-size: 12.5px; font-weight: 600; color: #fff; background: var(--color-room, #4B35C2); border: 0; border-radius: 8px; padding: 7px 14px; cursor: pointer; }
.setting-row-save:hover { filter: brightness(0.95); }

.pine-toggle { display: inline-flex; align-items: center; cursor: pointer; }
.pine-toggle.is-disabled { cursor: not-allowed; opacity: 0.5; }
.pine-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.pine-toggle-track { width: 36px; height: 21px; border-radius: 11px; background: rgba(0,0,0,0.18); position: relative; transition: background 150ms ease; flex: 0 0 auto; }
.pine-toggle-knob { position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: transform 150ms ease; }
.pine-toggle-input:checked + .pine-toggle-track { background: var(--color-room, #4B35C2); }
.pine-toggle-input:checked + .pine-toggle-track .pine-toggle-knob { transform: translateX(15px); }
.pine-toggle-input:focus-visible + .pine-toggle-track { outline: 2px solid var(--color-room, #4B35C2); outline-offset: 2px; }

/* ── Approval-rules composer (rc-*) ─────────────────────────────────────────
   One partial, two homes: the workspace Approval-rules page AND the room
   Trust & approvals section — global stylesheet for the same reason as the
   setting rows above. The composer renders as ONE bordered card (the same
   language as .setting-rows) and owns ALL of its controls — identical on
   both surfaces, nothing parameterized per surface. */
.rc-card { border: 1px solid var(--sketch-border, #e7e5e4); border-radius: 12px; background: var(--sketch-card, #fff); overflow: hidden; }
/* Card header: one status line + the Active switch. The copy flips with the
   switch via :has — no JS state to drift — and the rule area dims when off. */
.rc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--sketch-border, #e7e5e4); background: color-mix(in srgb, var(--sketch-bg, #fafaf9) 60%, transparent); }
.rc-head-status { font-size: 12px; color: var(--sketch-text-muted, #79716b); }
.rc-firstrun { margin: 0 14px; padding: 12px 14px; border-radius: 9px; background: var(--sketch-bg, #fafaf9); border: 1px solid var(--sketch-border, #e7e5e4); font-size: 12.5px; line-height: 1.6; color: var(--sketch-text-sec, #57534e); }
.rc-firstrun strong { color: var(--sketch-text, #1c1917); font-weight: 620; }
.rc-firstrun em { font-style: normal; font-weight: 600; color: var(--sketch-text, #1c1917); }
.rc-firstrun-eg { font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; background: var(--sketch-card, #fff); border: 1px solid var(--sketch-border, #e7e5e4); border-radius: 5px; padding: 1px 6px; white-space: nowrap; }
.rc-head-off { display: none; }
.rc-card:not(:has(.rc-head .pine-toggle-input:checked)) .rc-head-on { display: none; }
.rc-card:not(:has(.rc-head .pine-toggle-input:checked)) .rc-head-off { display: inline; }
.rc-card:not(:has(.rc-head .pine-toggle-input:checked)) .rc-groups { opacity: 0.55; }
.rc-toggle { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.rc-toggle-label { font-size: 12px; font-weight: 600; color: var(--sketch-text-sec, #57534e); }
/* Rule groups: a fixed label gutter carries the grammar. The words are CSS
   content so add/remove keeps them true — the first group reads "When",
   every later one "Else when": exactly first-match-wins semantics. */
.rc-group { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 12px 16px; }
.rc-group + .rc-group { border-top: 1px solid var(--sketch-border, #e7e5e4); }
.rc-line { display: flex; align-items: flex-start; gap: 10px; }
.rc-line-when { padding-right: 30px; } /* room for the hover-revealed × */
.rc-word { flex: 0 0 64px; text-align: right; font-size: 12px; color: var(--sketch-text-muted, #79716b); padding-top: 7px; }
.rc-word-when::before { content: "Else when"; }
.rc-group:first-child .rc-word-when::before { content: "When"; }
.rc-line-content { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rc-empty-hint { display: none; font-size: 12px; font-style: italic; color: var(--sketch-text-muted, #a8a29e); }
.rc-group:not(.is-editing) .rc-line-content:not(:has(.rc-pill)) .rc-empty-hint { display: inline; }
/* all of / any of means nothing below two conditions — appears when it does. */
.rc-line-content:not(:has(.rc-pill + .rc-pill)) .rc-input-match { display: none; }
.rc-input { height: 30px; box-sizing: border-box; font-size: 13px; font-family: inherit; color: var(--sketch-text, #1c1917); background: var(--sketch-bg, #fafaf9); border: 1px solid var(--sketch-border, #e7e5e4); border-radius: 7px; padding: 0 10px; }
.rc-input:hover { border-color: rgba(0, 0, 0, 0.16); }
.rc-input:focus { outline: none; border-color: var(--color-room, #4B35C2); box-shadow: 0 0 0 2.5px color-mix(in srgb, var(--color-room, #4B35C2) 18%, transparent); background: var(--sketch-card, #fff); }
.rc-input::placeholder { color: var(--sketch-text-muted, #a8a29e); }
select.rc-input { padding-right: 26px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%2379716b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 9px center; }
.rc-input-field { flex: 1 1 120px; min-width: 100px; max-width: 160px; }
/* The field input is a COMBOBOX — the chevron advertises the suggestions
   menu (grounded in the room's recent events) that focus/typing opens. */
.rc-combo { position: relative; display: inline-flex; align-items: center; flex: 1 1 120px; min-width: 100px; max-width: 160px; }
.rc-combo .rc-input-field { flex: 1 1 auto; min-width: 0; max-width: none; width: 100%; padding-right: 26px; }
.rc-combo-chevron { position: absolute; right: 8px; color: var(--sketch-text-muted, #a8a29e); pointer-events: none; }
.rc-combo:focus-within .rc-combo-chevron { color: var(--color-room, #4B35C2); }
.rc-menu-empty { padding: 8px 10px; font-size: 12.5px; color: var(--sketch-text-muted, #a8a29e); }
.rc-input-op { flex: 0 0 auto; width: 88px; }
.rc-input-value { flex: 1 1 100px; min-width: 90px; max-width: 140px; }
.rc-input-match { max-width: 90px; }
.rc-input-require { flex: 0 0 auto; }
/* Rest-state selects read as prose, not form fields — pop-up-button style:
   quiet until hover, the chevron alone says "editable". The editor cluster
   keeps bordered inputs; only the sentence words go quiet. */
select.rc-input-match, select.rc-input-require { background-color: transparent; border-color: transparent; font-weight: 550; color: var(--sketch-text-sec, #57534e); padding-left: 8px; field-sizing: content; }
select.rc-input-match:hover, select.rc-input-require:hover { background-color: rgba(0, 0, 0, 0.05); border-color: transparent; }
.rc-input-require:has(option[value="auto"]:checked) { color: #1a7f37; font-weight: 600; }
/* Committed conditions are PILLS; the editor cluster is the only dropdown
   surface and exists only while open (docs/views/18 §10). Pills read as a
   sentence, not code: muted field + human op label, semibold value. */
.rc-pills { display: contents; } /* pills join the line's own flex flow */
.rc-pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--sketch-border-strong, #d6d3d1); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; line-height: 1.3; font-family: inherit; background: var(--sketch-bg, #fafaf9); cursor: pointer; }
.rc-pill:hover { border-color: var(--color-room, #4B35C2); }
.rc-pill-t, .rc-pill-op { color: var(--sketch-text-muted, #79716b); }
.rc-pill-v { color: var(--sketch-text, #1c1917); font-weight: 600; }
.rc-pill-x { color: var(--sketch-text-muted, #a8a29e); font-weight: 600; margin-left: 2px; }
/* "Add condition" is a ghost text button (the Notion "+ Add filter" idiom) —
   same family as "Add group", never a dashed box. */
.rc-add-cond { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; padding: 5px 8px; border-radius: 7px; font-size: 12.5px; font-weight: 550; font-family: inherit; color: var(--sketch-text-muted, #79716b); cursor: pointer; }
.rc-add-cond:hover { background: rgba(0, 0, 0, 0.04); color: var(--sketch-text, #1c1917); }
.rc-add-cond:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-room, #4B35C2) 45%, transparent); outline-offset: 1px; }
.rc-editor { display: none; }
.rc-group.is-editing .rc-editor { display: inline-flex; align-items: center; gap: 6px; }
.rc-group.is-editing .rc-add-cond { display: none; }
.rc-commit { height: 28px; padding: 0 11px; border: 1px solid color-mix(in srgb, var(--color-room, #4B35C2) 40%, transparent); border-radius: 7px; background: transparent; color: var(--color-room, #4B35C2); font-size: 12.5px; font-weight: 600; font-family: inherit; cursor: pointer; }
.rc-commit:hover { background: color-mix(in srgb, var(--color-room, #4B35C2) 8%, transparent); }
.rc-editor-cancel { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent; color: var(--sketch-text-muted, #a8a29e); cursor: pointer; }
.rc-editor-cancel:hover { background: rgba(0, 0, 0, 0.05); color: var(--sketch-text, #1c1917); }
/* Group remove — quiet until the group is hovered. */
.rc-remove { position: absolute; top: 9px; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: 6px; background: var(--sketch-card, #fff); color: var(--sketch-text-muted, #a8a29e); cursor: pointer; opacity: 0; transition: opacity 0.12s ease; }
.rc-group:hover .rc-remove, .rc-remove:focus-visible { opacity: 1; }
.rc-remove:hover { background: rgba(220, 38, 38, 0.08); color: #dc2626; }
/* Footer grammar: structure on the left, actions on the right — Preview is
   Save's quiet sibling, never a third pole in the middle. */
.rc-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--sketch-border, #e7e5e4); background: color-mix(in srgb, var(--sketch-bg, #fafaf9) 60%, transparent); }
.rc-footer-actions { display: flex; align-items: center; gap: 8px; }
.rc-add { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; padding: 6px 8px; margin-left: -8px; border-radius: 7px; font-size: 12.5px; font-weight: 550; color: var(--sketch-text-sec, #57534e); cursor: pointer; }
.rc-add:hover { background: rgba(0, 0, 0, 0.04); color: var(--sketch-text, #1c1917); }
.rc-save { border: 0; border-radius: 7px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; font-family: inherit; color: #fff; background: var(--color-room, #4B35C2); cursor: pointer; }
.rc-save:hover { filter: brightness(0.94); }
.rc-preview { border: 1px solid var(--sketch-border-strong, #d6d3d1); color: var(--sketch-text-sec, #57534e); background: var(--sketch-card, #fff); border-radius: 7px; padding: 6px 12px; font-size: 12.5px; font-weight: 550; font-family: inherit; cursor: pointer; }
.rc-preview:hover { border-color: rgba(0, 0, 0, 0.25); color: var(--sketch-text, #1c1917); }
.rc-preview-results { padding: 10px 14px; border-top: 1px dashed var(--sketch-border, #e7e5e4); font-size: 12px; font-family: var(--font-mono, ui-monospace, monospace); display: flex; flex-direction: column; gap: 4px; }
.rc-preview-line.rc-preview-auto { color: #1a7f37; }
.rc-preview-line.rc-preview-human { color: #9a6700; }
.rc-preview-line.rc-preview-no_match { color: var(--sketch-text-muted, #79716b); }
.rc-preview-heading { font-family: var(--font-sans, system-ui); font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--sketch-text-muted, #79716b); margin-bottom: 2px; }
/* Rule provenance — the one-line audit answer under the composer. */
.rc-provenance { margin-top: 7px; font-size: 11.5px; color: var(--sketch-text-muted, #79716b); }
.rc-provenance strong { font-weight: 600; color: var(--sketch-text-sec, #57534e); }
.rc-provenance a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rc-provenance a:hover { color: var(--sketch-text, #1c1917); }
/* Auto-approvals status card: neutral card, state carried by a small tinted
   badge next to the title (the ledger's verdict-chip idiom) — never a
   colored border or left rule. Pause is a quiet neutral action; Resume is
   primary because it restores the configured behavior. */
.rc-pause-card { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 12px 16px; border: 1px solid var(--sketch-border, #e7e5e4); border-radius: 12px; background: var(--sketch-card, #fff); }
.rc-pause-text { flex: 1; min-width: 0; }
.rc-pause-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--sketch-text, #1c1917); }
.rc-pause-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; border-radius: 4px; padding: 2px 7px; color: #1a7f37; background: #dcf2e3; }
.rc-pause-card.is-paused .rc-pause-badge { color: #9a6700; background: #fff3d1; }
.rc-pause-desc { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--sketch-text-muted, #79716b); }
.rc-pause-form { margin: 0; }
.rc-pause-btn { white-space: nowrap; height: 28px; padding: 0 12px; border: 1px solid var(--sketch-border-strong, #d6d3d1); border-radius: 7px; background: var(--sketch-card, #fff); color: var(--sketch-text-sec, #57534e); font-size: 12.5px; font-weight: 550; font-family: inherit; cursor: pointer; }
.rc-pause-btn:hover { border-color: rgba(0, 0, 0, 0.25); color: var(--sketch-text, #1c1917); }
.rc-pause-card.is-paused .rc-pause-btn { border: 0; background: var(--color-room, #4B35C2); color: #fff; font-weight: 600; }
.rc-pause-card.is-paused .rc-pause-btn:hover { filter: brightness(0.94); }
.rc-verdict { font-size: 10px; font-weight: 700; letter-spacing: .04em; border-radius: 3px; padding: 1.5px 6px; margin-right: 6px; background: var(--sketch-bg, #f5f5f4); color: var(--sketch-text-muted, #79716b); }
.rc-verdict-auto_approved { color: #1a7f37; background: #dcf2e3; }
.rc-verdict-held, .rc-verdict-forced_human, .rc-verdict-paused { color: #9a6700; background: #fff3d1; }
.rc-verdict-legacy_always_allow { color: #8250df; background: #f3ecff; }

/* The decisions ledger as a compact table (Trust & approvals). Toolbar =
   search + verdict chips; all filtering is server-side, the client only
   swaps rows. Wide content scrolls inside .apd-scroll, never the page. */
.apd { display: flex; flex-direction: column; gap: 8px; }
.apd-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apd-search { flex: 1 1 220px; min-width: 180px; padding: 6px 10px; font-size: 13px; font-family: inherit; color: var(--sketch-text, #1c1917); background: var(--sketch-card, #fff); border: 1px solid var(--sketch-border, #e7e5e4); border-radius: 8px; }
.apd-search:focus { outline: none; border-color: var(--sketch-text-muted, #79716b); }
.apd-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.apd-chip { border: 1px solid var(--sketch-border, #e7e5e4); background: transparent; color: var(--sketch-text-muted, #79716b); font-size: 11px; font-weight: 600; font-family: inherit; padding: 4px 10px; border-radius: 999px; cursor: pointer; }
.apd-chip:hover { background: rgba(0, 0, 0, 0.04); }
.apd-chip.is-active { background: var(--sketch-text, #1c1917); border-color: var(--sketch-text, #1c1917); color: var(--sketch-card, #fff); }
.apd-scroll { overflow-x: auto; border: 1px solid var(--sketch-border, #e7e5e4); border-radius: 10px; }
.apd-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.apd-table th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--sketch-text-muted, #79716b); padding: 7px 8px; border-bottom: 1px solid var(--sketch-border, #e7e5e4); background: var(--sketch-bg, #fafaf9); white-space: nowrap; }
.apd-td { padding: 6px 8px; border-bottom: 1px solid var(--sketch-border, #e7e5e4); color: var(--sketch-text, #1c1917); vertical-align: baseline; }
.apd-row:last-child .apd-td { border-bottom: none; }
.apd-td .rc-verdict { white-space: nowrap; }
.apd-td-tool { font-weight: 500; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apd-td-policy { color: var(--sketch-text-muted, #79716b); max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apd-td-actor { color: var(--sketch-text-muted, #79716b); max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apd-td-run, .apd-td-when { color: var(--sketch-text-muted, #79716b); white-space: nowrap; }
.apd-empty td { padding: 22px 12px; text-align: center; color: var(--sketch-text-muted, #79716b); font-size: 12.5px; }
.apd.is-loading { opacity: .55; transition: opacity .12s ease; pointer-events: none; }
.apd-foot { display: flex; align-items: center; gap: 10px; min-height: 20px; }
.apd-more { border: 1px solid var(--sketch-border, #e7e5e4); background: transparent; color: var(--sketch-text, #1c1917); font-size: 12px; font-family: inherit; padding: 5px 12px; border-radius: 8px; cursor: pointer; }
.apd-more:hover { background: rgba(0, 0, 0, 0.04); }
.apd-count { font-size: 11.5px; color: var(--sketch-text-muted, #79716b); }

/* The suggestions combobox — OUR menu, appended to <body> (the card clips
   overflow), positioned under the focused input by the controller. Never
   rendered empty. */
.rc-menu { position: fixed; z-index: 4000; display: flex; flex-direction: column; gap: 1px; padding: 4px; max-height: 240px; overflow-y: auto; background: var(--sketch-card, #fff); border: 1px solid var(--sketch-border, #e7e5e4); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); }
.rc-menu-item { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; width: 100%; border: 0; background: transparent; border-radius: 7px; padding: 6px 9px; font-size: 13px; font-family: inherit; color: var(--sketch-text, #1c1917); text-align: left; cursor: pointer; }
.rc-menu-item:hover, .rc-menu-item.is-active { background: rgba(0, 0, 0, 0.05); }
.rc-menu-item-value { white-space: nowrap; }
.rc-menu-item-hint { font-size: 11.5px; color: var(--sketch-text-muted, #a8a29e); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }

/* ── Audit rows (alog-*) ────────────────────────────────────────────────────
   One renderer (shared/_audit_rows) for the workspace Audit log AND the room
   Audit trail — global stylesheet so both contexts (settings shell, room tab,
   settings modal) render identically. Rows are native <details>: the metadata
   drawer needs no JS. */
.alog-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.alog-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sketch-text-sec, #57534e); background: var(--sketch-card, #fff); border: 1px solid var(--sketch-border, #e7e5e4); border-radius: 999px; padding: 5px 12px; text-decoration: none; }
.alog-chip:hover { background: rgba(0,0,0,0.03); }
.alog-chip.is-active { color: #fff; background: var(--color-room, #4B35C2); border-color: var(--color-room, #4B35C2); }
.alog-chip.is-active .alog-cat-dot { background: #fff !important; }
.alog-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.alog-filters { margin-bottom: 14px; }
.alog-filters-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.alog-search-wrap { position: relative; flex: 1 1 220px; min-width: 180px; }
.alog-search-wrap svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--sketch-text-muted, #79716b); }
.alog-search-input { width: 100%; padding-left: 30px; }
.alog-filter-select { max-width: 200px; }
.alog-date-input { max-width: 150px; }
.alog-list { display: flex; flex-direction: column; }
.alog-date { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sketch-text-muted, #79716b); margin: 16px 0 6px; }
.alog-date:first-child { margin-top: 0; }
.alog-row { border: 1px solid var(--sketch-border, #e7e5e4); border-radius: 10px; background: var(--sketch-card, #fff); margin-bottom: 6px; }
.alog-row[open] { box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.alog-summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; }
.alog-summary::-webkit-details-marker { display: none; }
.alog-avatar { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.alog-avatar-fallback { display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; background: var(--color-room, #4B35C2); }
.alog-avatar-system { background: var(--sketch-text-muted, #79716b); }
.alog-sentence { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--sketch-text, #1c1917); line-height: 1.45; }
.alog-sentence strong { font-weight: 650; }
.alog-target { color: var(--color-room, #4B35C2); text-decoration: none; font-weight: 550; margin-left: 4px; }
a.alog-target:hover { text-decoration: underline; }
.alog-target-deleted { text-decoration: line-through; color: var(--sketch-text-muted, #79716b); }
.alog-room-chip { font-size: 11px; font-weight: 600; color: var(--sketch-text-sec, #57534e); background: rgba(0,0,0,0.04); border-radius: 6px; padding: 1px 7px; margin-left: 6px; text-decoration: none; white-space: nowrap; }
.alog-room-chip:hover { background: rgba(0,0,0,0.08); }
.alog-verify { font-size: 11.5px; font-weight: 600; color: var(--color-room, #4B35C2); text-decoration: none; flex: 0 0 auto; }
.alog-verify:hover { text-decoration: underline; }
.alog-time { font-size: 11.5px; color: var(--sketch-text-muted, #79716b); flex: 0 0 auto; white-space: nowrap; }
.alog-detail { border-top: 1px dashed var(--sketch-border, #e7e5e4); padding: 10px 14px 12px 46px; display: flex; flex-direction: column; gap: 4px; }
.alog-detail-pair { display: flex; gap: 10px; font-size: 12px; line-height: 1.5; }
.alog-detail-key { flex: 0 0 140px; color: var(--sketch-text-muted, #79716b); }
.alog-detail-val { flex: 1 1 auto; color: var(--sketch-text, #1c1917); overflow-wrap: anywhere; }
.alog-detail-val code { font-size: 11px; background: rgba(0,0,0,0.05); padding: 1px 4px; border-radius: 4px; }
.alog-footer { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.alog-empty { padding: 36px 0; text-align: center; color: var(--sketch-text-muted, #79716b); font-size: 13px; }
.alog-export-btn { display: inline-flex; align-items: center; gap: 6px; }
.alog-cap-note { font-size: 10.5px; color: var(--sketch-text-muted, #79716b); font-weight: 400; }
.alog-workspace-link { font-size: 12px; color: var(--color-room, #4B35C2); text-decoration: none; margin-left: auto; }
.alog-workspace-link:hover { text-decoration: underline; }

/* ──────────────────────────────────────────────────────────────────
 * Revision diff (moved from library.css 2026-07-13)
 *
 * Rendered by ApplicationHelper#render_revision_diff via the shared
 * tool card partial — which appears in chat, room feed, and both
 * editors' chat panels, not just library pages. The rules live here
 * (global trio) so diffs are styled on every surface that renders them.
 * ────────────────────────────────────────────────────────────────── */
/* ──────────────────────────────────────────────────────────────────
 * Revision diff
 *
 * Used by library docs (prose) and connector skill files (code).
 * Typography is inherited from the container by default so library
 * diffs read like the documents they describe. Use --code modifier
 * for actual source files where monospace communicates intent.
 * ────────────────────────────────────────────────────────────────── */

.revision-diff {
  --diff-del-fg: #991b1b;
  /* Line tint must survive next to the word-level 0.22 marks — at 0.07 a
   * changed line with no word marks was indistinguishable from context. */
  --diff-del-bg: rgba(220, 38, 38, 0.12);
  --diff-del-bg-strong: rgba(220, 38, 38, 0.22);
  --diff-ins-fg: #166534;
  --diff-ins-bg: rgba(22, 163, 74, 0.12);
  --diff-ins-bg-strong: rgba(22, 163, 74, 0.22);
  --diff-fold-color: var(--color-text-muted, #6b7280);
  --diff-gutter-color: color-mix(in srgb, var(--color-text-muted, #6b7280) 60%, transparent);

  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-primary, #111);
  margin: 10px 0 4px;
}

.revision-diff--prose {
  font-family: inherit; /* Inter / system reading stack */
}

.revision-diff--code {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
}

.revision-diff--empty {
  padding: 10px 14px;
  color: var(--color-text-muted);
  background: var(--library-color-subtle-surface, rgba(0, 0, 0, 0.02));
  border-radius: 6px;
  font-size: 13px;
}

/* Hunk: a group of related lines. Bordered on the left to signal a
 * change region without wrapping the whole thing in a card. */
.revision-diff-hunk {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--color-border, rgba(0, 0, 0, 0.08));
  padding: 2px 0;
}

.revision-diff-hunk:has(.revision-diff-line--del),
.revision-diff-hunk:has(.revision-diff-line--ins) {
  border-left-color: color-mix(in srgb, var(--diff-ins-fg) 50%, transparent);
}

/* Line: gutter(old) · gutter(new) · mark · content */
.revision-diff-line {
  display: grid;
  grid-template-columns: 36px 36px 16px 1fr;
  column-gap: 0;
  padding: 1px 0 1px 10px;
}

.revision-diff-line--del {
  background: var(--diff-del-bg);
}

.revision-diff-line--ins {
  background: var(--diff-ins-bg);
}

.revision-diff-gutter {
  text-align: right;
  padding-right: 10px;
  color: var(--diff-gutter-color);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  line-height: 1.55;
  user-select: none;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

.revision-diff-mark {
  text-align: center;
  font-weight: 600;
  user-select: none;
  color: var(--diff-gutter-color);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
}

.revision-diff-line--del .revision-diff-mark { color: var(--diff-del-fg); }
.revision-diff-line--ins .revision-diff-mark { color: var(--diff-ins-fg); }

.revision-diff-content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 0;
}

.revision-diff-line--del .revision-diff-content { color: var(--diff-del-fg); }
.revision-diff-line--ins .revision-diff-content { color: var(--diff-ins-fg); }

/* Word-level intra-line highlights — stronger background inside line bg */
.revision-diff-word {
  background: transparent;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.revision-diff-word--del { background: var(--diff-del-bg-strong); }
.revision-diff-word--ins { background: var(--diff-ins-bg-strong); }

/* Fold pill between hunks — signals "nothing interesting here" */
.revision-diff-fold {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--diff-fold-color);
  padding: 4px 0 4px 12px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}

.revision-diff-fold::before {
  content: "···";
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Summary chrome: a plain disclosure affordance, not a code widget. */
.revision-changes {
  margin-top: 10px;
}

.revision-changes > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 500;
  padding: 4px 10px 4px 8px;
  border-radius: 6px;
  user-select: none;
  transition: background 120ms ease;
}

.revision-changes > summary::-webkit-details-marker { display: none; }

.revision-changes > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 160ms ease;
  opacity: 0.55;
}

.revision-changes[open] > summary::before {
  transform: rotate(90deg);
}

.revision-changes > summary:hover {
  background: var(--library-color-hover, rgba(0, 0, 0, 0.03));
}

.revision-changes-stat {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  font-weight: 500;
}

.revision-changes-stat--add { color: var(--diff-ins-fg); }
.revision-changes-stat--del { color: var(--diff-del-fg); }

/* Mobile: tighter gutter, word-wrap takes priority */
@media (max-width: 640px) {
  .revision-diff-line {
    grid-template-columns: 28px 28px 14px 1fr;
    padding-left: 6px;
  }
  .revision-diff-gutter { padding-right: 6px; font-size: 10.5px; }
  .revision-diff { font-size: 12.5px; }
}

/* Dark-mode token participation */
@media (prefers-color-scheme: dark) {
  .revision-diff {
    --diff-del-fg: #fca5a5;
    --diff-del-bg: rgba(220, 38, 38, 0.12);
    --diff-del-bg-strong: rgba(220, 38, 38, 0.32);
    --diff-ins-fg: #86efac;
    --diff-ins-bg: rgba(22, 163, 74, 0.12);
    --diff-ins-bg-strong: rgba(22, 163, 74, 0.32);
  }
}

/* Shared image preview used by Mail and room email row details. */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox, 9999);
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.image-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.image-lightbox-close {
  position: absolute;
  top: 16px;
  right: 24px;
  border: 0;
  background: none;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}