/*
 * 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-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;

  /* 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;
}

/* ── 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;
}
#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: 5px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  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; }
.nav-item-new-conv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 15px 10px -5px;
  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: 14px 14px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
#sidebar-header h2 {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}
#conversation-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px 8px;
}
.conv-item {
  display: flex;
  align-items: center;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  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-brand-subtle); font-weight: 500; }
.conv-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-time { font-size: 10px; color: var(--color-text-muted); flex-shrink: 0; }
.conv-item[data-conv-status]:not([data-conv-status=""]):not([data-conv-status="idle"]) .conv-time { display: none; }
.conv-empty { padding: 16px; color: var(--color-text-muted); font-size: 13px; text-align: center; }
.conv-link { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; text-decoration: none; color: inherit; padding: 6px 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: room list items (shared across all pages) ── */
#sidebar-rooms-header { padding: 12px 16px 4px; }
#sidebar-rooms-header h2 { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--color-text-muted); letter-spacing: 0.06em; margin: 0; }
#room-list { padding: 0 8px 4px; max-height: calc(4.5 * 31px); overflow-y: auto; }
.room-item { display: flex; align-items: center; border-radius: 6px; font-size: 13px; color: var(--color-text-secondary); cursor: pointer; transition: background 0.12s; }
.room-item:hover { background: var(--color-hover); }
.room-item.active { background: var(--color-active); font-weight: 500; }
.room-item .conv-link { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; text-decoration: none; color: inherit; padding: 5px 8px; }
.room-item-hash { flex-shrink: 0; 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; }
.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); }

/* Status indicators */
.conv-status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  overflow: visible;
  position: relative;
  transition: width 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.conv-status:not(:empty) { width: 20px; }
.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: var(--color-brand-subtle);
  animation: attentionPulse 2s ease-in-out infinite;
}
.status-waiting::after {
  content: "!";
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-brand);
}
@keyframes attentionPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--color-brand-subtle); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 3px transparent; }
}
.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-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: translateY(0); }
}

/* ── 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: 100%;
    position: absolute; top: 0; left: 0;
    opacity: 0;
    border-right: none;
    overflow: hidden;
    z-index: var(--z-sidebar-mobile);
    pointer-events: none;
    background: var(--color-surface);
  }
  #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);
  }
}

/* ── 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);
  }

  /* 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: 768px;
  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; }

/* ── 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);
  }
}