/* Bundled at: 2026-04-08 17:28:11 (UTC) */

/* Begin: 0_app.css */
/* ensure body fills viewport and our flex layout applies */
html,
body {
  height: 100%;
  margin: 0;
  font-family: "Poppins", "Inter", Arial, sans-serif;
}

 :root{
    --native-app-top-margin: 0px;
    --native-app-bottom-margin: 0px;    
  }

/* Hide scrollbar but keep scrollable */
.hide-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}

/* Ensure strikethrough formatting works for <del> tags */
del {
  text-decoration: line-through;
}

/* "shadow-t" is Tailwind’s drop-shadow on top edge */
.shadow-t {
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
}

.transparent-header #app-bar {
  background: transparent;
  border: 0px;
  box-shadow: none;
  
}
#app-bar {
  padding-top: calc(12px + var(--native-app-top-margin));
}

#org-flyer-aside{
  padding-top: calc(0px + var(--native-app-top-margin));
  padding-bottom: calc(0px + var(--native-app-bottom-margin));
}

.footer-bottom-sticky{
  padding-bottom: var(--native-app-bottom-margin) !important;
}

.p-3.footer-bottom-sticky{
  padding-bottom: calc(12px + var(--native-app-bottom-margin)) !important;  
}

.transparent-header #app-bar #app-chats, .transparent-header #app-bar #app-notifications {
  background: none;
  border: none;
  box-shadow: none;
  color: #fff;
}

.transparent-header #app-bar .page-title,
.transparent-header #app-bar .page-title-extra {
  color: #fff;
}

.transparent-header #app-bar #app-chats iconify-icon, .transparent-header #app-bar #app-notifications iconify-icon {
  color: #fff;
}

.chat-typing-animate {
  animation: chatBounce 1.1s cubic-bezier(0.36, 1.56, 0.64, 1) infinite;
  box-shadow: 0 0 0 4px #3b82f6aa, 0 2px 8px #3b82f633;
}
/* Smooth fade-in fade-out chat typing animation */
@keyframes chatFade {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}
.chat-typing-blink {
  animation: chatFade 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
/* Shake animation for new message */
@keyframes chatShake {
  0% {
    transform: rotate(0deg);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: rotate(-3deg);
  }
  20%,
  40%,
  60%,
  80% {
    transform: rotate(3deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.chat-shake {
  animation: chatShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform-origin: bottom center;
}

html,
body {
  overscroll-behavior-y: contain;
  touch-action: pan-x pan-y; /* prevents unwanted gesture triggers */
}

body.no-header > header {
  display: none !important;
}
body.no-header main#app {
  padding-top: 0;
}

/* .no-footer class is added by JS */
body.no-footer #bottom-nav {
  display: none;
}

.nav-link {
  --c-inactive: #6b7280; /* gray-500 */
  /* primary */
  color: var(--c-inactive);
  font-size: 13px; /* was 11px */
  line-height: 1.1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px; /* was gap:2px */
  transition: color 0.25s;
  position: relative;
  flex: 1;
  min-width: 0;
}
.nav-link iconify-icon {
  font-size: 28px;
  transition: transform 0.25s;
}

.nav-link.active {
  color: var(--primary);
}
.nav-link.active:not(.dontgrow) iconify-icon {
  transform: translateY(-2px) scale(1.1);
}
.nav-link.active::before {
  background: var(--c-active);
}
/* ───────── Floating Action Button ──────────────────── */
.fab {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: background 0.25s;
}
.fab:hover {
  background: var(--primary);
} /* indigo-700 */

/* active state injected by JS */
@keyframes spin-grow {
  /* for modern browsers */
  0% {
    transform: translateX(-50%) rotate(0) scale(1);
  }
  50% {
    transform: translateX(-50%) rotate(15deg) scale(1.25);
  }
  100% {
    transform: translateX(-50%) rotate(180deg) scale(1.1);
  }
}
@-webkit-keyframes spin-grow {
  /* Safari iOS */
  0% {
    -webkit-transform: translateX(-50%) rotate(0) scale(1);
  }
  50% {
    -webkit-transform: translateX(-50%) rotate(15deg) scale(1.25);
  }
  100% {
    -webkit-transform: translateX(-50%) rotate(180deg) scale(1.1);
  }
}
@keyframes spin-shrink {
  0% {
    transform: translateX(-50%) rotate(180deg) scale(1.1);
  }
  50% {
    transform: translateX(-50%) rotate(90deg) scale(1.25);
  }
  100% {
    transform: translateX(-50%) rotate(0) scale(1);
  }
}
@-webkit-keyframes spin-shrink {
  0% {
    -webkit-transform: translateX(-50%) rotate(180deg) scale(1.1);
  }
  50% {
    -webkit-transform: translateX(-50%) rotate(90deg) scale(1.25);
  }
  100% {
    -webkit-transform: translateX(-50%) rotate(0) scale(1);
  }
}
.fab.active {
  animation: spin-grow 0.45s forwards;
  -webkit-animation: spin-grow 0.45s forwards; /* Safari */
  color: #fff !important; /* override any other color */
  background-color: var(
    --secondary
  ) !important; /* override any other background */
}
.fab:not(.active) {
  animation: spin-shrink 0.45s forwards;
  -webkit-animation: spin-shrink 0.45s forwards;
  color: #fff !important;
  background-color: var(--primary) !important;
}

.fab:NOT(.active) .zunou-view {
  display: none;
}

.fab.active .zaiko-view {
  display: none;
}

/* Ensure FAB images are visible and properly sized */
.fab img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ensure zaiko-view is visible when FAB is not active */
.fab:NOT(.active) .zaiko-view {
  display: block;
}

/* Ensure zunou-view is visible when FAB is active */
.fab.active .zunou-view {
  display: block;
}
.choice-card {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  background: #fff;
  font-size: 0.82rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  position: relative;
  transition: 0.2s;
  padding-left: 20px;
}

.choice-card:hover {
  background: #f9fafb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.slot-card {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: 0.2s;
}
.slot-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* --- a) choice-card letter badge positioning --- */
.choice-card {
  position: relative;
}
.choice-card::before {
  content: attr(data-letter) ")";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  color: #6b7280;
}

/* --- b) auto-growing input -------------------------------------- */
.input-bar textarea {
  resize: none;
  overflow: hidden;
  min-height: 42px;
  max-height: 140px;
  flex: 1;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  padding: 0.55rem 1rem;
  font-size: 0.85rem;
  line-height: 1.3;
}

/* --- c) modal overlay for email draft ---------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
}
.email-card-modal {
  width: 90%;
  max-width: 420px;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  padding: 1.25rem;
  border-left: 4px solid #4f46e5;
}

.email-card-modal {
  width: 90%;
  max-width: 480px;
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
}
.email-card-modal textarea {
  flex: 1; /* fill height then scroll */
  resize: vertical;
  min-height: 340px;
}

.my-list.drag-over {
  outline: 2px dashed #4f46e5;
}
.dragging {
  opacity: 0.85;
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}

.done-row {
  opacity: 0.45;
  text-decoration: line-through;
}

.delete-hover {
  background: #b91c1c !important;
}

/* skeleton shown ABOVE the list we’re hovering */
.drop-before {
  position: relative;
}

.drop-before::before {
  content: "Drop above";
  position: absolute;
  left: 50%;
  top: -10px;
  height: 20px;
  width: 200px;
  margin-left: -100px;
  z-index: 50;
  background: #eef2ff;
  border: 2px dashed #4f46e5;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4f46e5;
  font-weight: 500;
  font-size: 0.875rem;
  pointer-events: none;
  transition: 0.1s;
}

/* subtle inset highlight while hovering */
.drag-over {
  box-shadow: 0 0 0 2px #c7d2fe inset;
}

/* top-right icon */

/* inline pills */
.pill {
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  border-radius: 0.5rem;
}
.pill-urgent {
  background: #fee2e2 !important;
  color: #b91c1b !important;
  border: none !important;
}
.pill-high {
  background: #fecaca;
  color: #991b1b;
}
.pill-med {
  background: #fde68a;
  color: #92400e;
}
.pill-low {
  background: #bbf7d0;
  color: #166534;
}

/* card must already be a flex-column box */
.review-card {
  display: flex;
  flex-direction: column;
  touch-action: manipulation; /* Allow basic touch but prevent unwanted gestures */
}

/* Ensure the review wrap container can still receive touch events for scrolling */
.review-wrap {
  touch-action: pan-y; /* Allow vertical scrolling */
}

:root {
  --primary: #4a00e0; /* legacy typo, kept for compatibility */
  --secondary: #fe6c5f;

  /* night‑sky indigos */
  --i1: #3a0066; /* deeper indigo */
  --i2: #4a00e0; /* indigo-violet */
  --i3: #ff4f8b; /* aurora pink */
  /* accent blobs */
  --p1: rgba(74, 0, 224, 0.45); /* primary indigo blob */
  --p2: rgba(255, 79, 139, 0.28); /* pink blob */
  --p3: rgba(255, 0, 80, 0.18); /* deep red-pink blob */
  /* ribbon tint (soft aurora green) */
  --rb: rgba(0, 255, 128, 0.14); /* aurora green ribbon */

  --oldi1: #1e1b4b; /* indigo‑950 */
  --oldi2: #312e81; /* indigo‑900 */
  --oldi3: #3730a3; /* indigo‑800 */
  /* accent blobs */
  --oldp1: rgba(124, 58, 237, 0.55); /* violet‑600 */
  --oldp2: rgba(190, 24, 93, 0.45); /* pink‑700  */
  /* ribbon tint (soft indigo‑violet) */
  --oldrb: rgba(99, 102, 241, 0.27); /* indigo‑500 @27% */
}

/* === Primary color helpers === */
.text-primary {
  color: var(--i2) !important;
}
.bg-primary {
  background-color: var(--i2) !important;
}
.border-primary {
  border-color: var(--i2) !important;
}

.text-secondary {
  color: var(--secondary) !important;
}
.bg-secondary {
  background-color: var(--secondary) !important;
}
.border-secondary {
  border-color: var(--secondary) !important;
}

.toggle-bg-off {
  background-color: #d1d5db;
}

:root {
  --ai-main: #fe6c5f;
  --ai-light: #f7e5ed;
  --ai-xlight: #fbe8ed;
}

/* === AI color helpers === */
.text-ai {
  color: var(--ai-main) !important;
}
.bg-ai {
  background-color: var(--ai-main) !important;
}
.border-ai {
  border-color: var(--ai-main) !important;
}

.text-ai-light {
  color: var(--ai-light) !important;
}
.bg-ai-light {
  background-color: var(--ai-light) !important;
}
.border-ai-light {
  border-color: var(--ai-light) !important;
}

.text-ai-xlight {
  color: var(--ai-xlight) !important;
}
.bg-ai-xlight {
  background-color: var(--ai-xlight) !important;
}
.border-ai-xlight {
  border-color: var(--ai-xlight) !important;
}

:root {
  --bg-soft: #f6f2fd;
}

.bg-soft {
  background-color: var(--bg-soft) !important;
}
.text-soft {
  color: var(--bg-soft) !important;
}
.border-soft {
  border-color: var(--bg-soft) !important;
}

:root {
  --primary-light: #c6b3f6;
  --primary-xlight: #f1e8fa;
  --text-secondary-grey: #6b7280; /* gray-500 */
}

/* === Primary light color helpers === */
.bg-primary-light {
  background-color: var(--primary-light) !important;
}
.text-primary-light {
  color: var(--primary-light) !important;
}
.border-primary-light {
  border-color: var(--primary-light) !important;
}

.bg-primary-xlight {
  background-color: var(--primary-xlight) !important;
}
.text-primary-xlight {
  color: var(--primary-xlight) !important;
}
.border-primary-xlight {
  border-color: var(--primary-xlight) !important;
}

:root {
  --primary-ultra: #e5dafa;
}
.bg-primary-ultra {
  background-color: var(--primary-ultra) !important;
}
.text-primary-ultra {
  color: var(--primary-ultra) !important;
}
.border-primary-ultra {
  border-color: var(--primary-ultra) !important;
}

.pill-toggle {
  max-width: 340px;
  min-width: 260px;
  width: 80%;
}
.pill-toggle-indicator {
  position: absolute;
  top: 6px;
  left: 6px;
  bottom: 6px;
  width: calc(50% - 6px);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
}

.tip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  flex-shrink: 0;
}

/* ===== Keyframes ==================================================== */

/* Initial fade-in for aurora layers */
@keyframes auraFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Smooth flowing aurora animation - GPU optimized with transform */
@keyframes auraFlow {
  0%, 100% {
    transform: scale(1) translateY(0);
    opacity: 0.9;
  }
  25% {
    transform: scale(1.02) translateY(-2%);
    opacity: 1;
  }
  50% {
    transform: scale(1) translateY(0);
    opacity: 0.95;
  }
  75% {
    transform: scale(0.98) translateY(1%);
    opacity: 1;
  }
}

/* Gentle glow pulse for the accent blob */
@keyframes auraGlow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

/* Shimmer effect - very subtle */
@keyframes auraShimmer {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Legacy animation (kept for other pages) */
@keyframes auraShift {
  0% {
    background-position: 0% 50%, 100% 50%, 0% 0%, 0% 50%;
  }
  33% {
    background-position: 45% 0%, 55% 100%, 50% 50%, 30% 30%;
  }
  66% {
    background-position: 100% 50%, 0% 50%, 100% 100%, 70% 70%;
  }
  100% {
    background-position: 0% 50%, 100% 50%, 0% 0%, 0% 50%;
  }
}

/* Subtle pulse for static mode */
@keyframes auraPulse {
  0%, 100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}

/* ===== Global Org Hue Variable (set by JS on :root) ================== */
:root {
  --org-hue: 0deg;
}

/* ===== Page Wrapper - Redesigned Aura System ========================= */
.page {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  /* Create stacking context so pseudo-elements stay within */
  isolation: isolate;
  /* Transparent - gradient is in ::before */
  background: transparent;
}

/* Background gradient layer - filtered separately from content */
.page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  /* Base gradient - deeper violet with slight teal undertone (Mermaidcore influence) */
  background: linear-gradient(
    135deg,
    #1a1a2e 0%,       /* Deep midnight blue-violet */
    #2d1f4e 25%,      /* Rich purple */
    #3a2a6b 50%,      /* Vibrant violet */
    #2e3a5f 75%,      /* Teal-touched purple */
    #1f2937 100%      /* Dark slate with depth */
  );
  /* Apply hue rotation ONLY to this pseudo-element */
  filter: hue-rotate(var(--org-hue));
}

/* Aurora glow layer - animated effects */
.page::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  /* Start invisible for fade-in */
  opacity: 0;
  /* Mermaidcore-inspired aurora: teal + purple + pink iridescence */
  background: 
    /* Primary: Soft teal/cyan glow (Mermaidcore signature) */
    radial-gradient(
      ellipse 90% 70% at 15% 25%,
      rgba(45, 212, 191, 0.32) 0%,    /* Teal */
      rgba(34, 211, 238, 0.18) 40%,   /* Cyan shimmer */
      transparent 70%
    ),
    /* Secondary: Pearlescent purple (iridescent feel) */
    radial-gradient(
      ellipse 80% 60% at 80% 35%,
      rgba(167, 139, 250, 0.38) 0%,   /* Soft violet */
      rgba(139, 92, 246, 0.20) 50%,   /* Deeper purple glow */
      transparent 70%
    ),
    /* Accent: Pink/magenta shimmer */
    radial-gradient(
      ellipse 70% 80% at 70% 75%,
      rgba(244, 114, 182, 0.28) 0%,   /* Pink */
      rgba(236, 72, 153, 0.12) 50%,   /* Magenta fade */
      transparent 65%
    ),
    /* Subtle center highlight for depth */
    radial-gradient(
      ellipse 40% 35% at 45% 55%,
      rgba(129, 140, 248, 0.20) 0%,   /* Indigo glow */
      transparent 50%
    );
  /* Apply same hue rotation */
  filter: hue-rotate(var(--org-hue));
  will-change: transform, opacity;
  /* Fade in first, then flow animation */
  animation: auraFadeIn 0.8s ease-out forwards, auraFlow 16s ease-in-out 0.8s infinite;
}

/* Ensure content stays above aurora layers */
.page > * {
  position: relative;
  z-index: 2;
}

/* Mobile-optimized: Reduce animation complexity */
@media (max-width: 768px), (hover: none) {
  .page::after {
    /* Simpler pulse animation on mobile */
    animation: auraFadeIn 0.8s ease-out forwards, auraPulse 10s ease-in-out 0.8s infinite;
    transform: none !important;
  }
}

/* Electron/desktop static mode - no animation */
body.electron-app .page::before,
body.electron-app .page::after {
  animation: none;
}

/* Static mode - minimal animation for performance */
body.bg-static .page::after {
  animation: auraPulse 12s ease-in-out infinite;
  transform: none;
}

/* Match .page gradient for body when .page-gradient-bg is set */
body.page-gradient-bg {
  background: linear-gradient(
    135deg,
    #1a1a2e 0%,
    #2d1f4e 25%,
    #3a2a6b 50%,
    #2e3a5f 75%,
    #1f2937 100%
  );
  /* Note: Don't use filter here - it would affect all body content */
}

/* ===== centred rail ==================================================== */
.page-rail {
  max-width: 1300px;
  margin: auto;
  width: 100%;
}
@media (max-width: 900px) {
  .page-rail {
    max-width: 100%;
    margin-left: 5px;
    margin-right: 5px;
    width: auto;
  }
}

/* ===== hero ============================================================ */
.hero-block {
  padding: 50px 0 44px;
  text-align: center;
  color: #fff;
}
.hero-block h1 {
  line-height: 1.05;
  margin: 0 0 8px;
  font-weight: 600;
}
.hero-block p {
  margin: 0 0 0px;
  font-size: 19px;
  opacity: 0.9;
  height: 32px;
}
.typewriter {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid transparent;
}
.typewriter.start {
  border-right: 2px solid #fff;
  animation: blink-caret 0.8s step-end infinite;
}
.typewriter.done {
  border-right: 2px solid transparent;
  animation: none;
}
@keyframes blink-caret {
  0%,
  100% {
    border-color: transparent;
  }
  50% {
    border-color: #fff;
  }
}

.typewriter-hello {
  display: block;
  font-size: 24px;
  height: 24px;
  font-weight: 400;
  opacity: 0.9;
  margin-bottom: 1px; /* Space between Hello and Name */
  line-height: 1;
}

.typewriter-line {
  display: block !important;
  white-space: nowrap;
  overflow: hidden;
}

.typewriter-name {
  display: block !important;
  white-space: nowrap;
  overflow: hidden;
  height: 55px;
  line-height: 55px;
  max-width: 100%;
  font-size: 55px; /* Default, adjusted via JS */
  font-weight: 600;
  margin-top: 0;
}
@media (max-width: 600px) {
 .typewriter-hello {
    font-size: 20px;
    height: 20px;
    margin-bottom: 1px;
  }
  
  .hero-block h1 {
    margin: 0 0 1px;
  }
}

/* ===== Celestial Elements (Hero Section) =============================== */
/* Time-aware celestial line art - sun, moon, stars, clouds, horizon */

/* Celestial wrapper for proper sizing */
.hero-celestial-wrapper {
  position: absolute;
  /* Account for native app top margin (notch/camera area) */
  top: var(--native-app-top-margin, 0px);
  left: 0;
  width: 100%;
  height: 400px;
  z-index: 1; /* Above ::before gradient, below content */
  pointer-events: none;
  overflow: visible;
  opacity: 0.4;
}

/* Celestial SVG */
.hero-celestial {
  display: block;
  width: 100%;
  height: 400px; /* Explicit height */
  overflow: visible;
  /* Inherit org hue for color harmony */
  filter: hue-rotate(var(--org-hue));
}

/* Base styling for all celestial SVG elements */
.hero-celestial .celestial-element {
  overflow: visible;
}

/* SVG stroke styling - white with varying opacity */
.hero-celestial use {
  fill: none;
  stroke: white;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Element-specific opacities - BOLD for debugging, reduce later */
/* Note: symbols use currentColor, so we set color + stroke on both g and use */
.celestial-star { color: white; stroke: rgba(255, 255, 255, 0.5); stroke-width: 2; }
.celestial-star circle { fill: rgba(255, 255, 255, 0.5); stroke: none; }
.celestial-star use { color: rgba(255, 255, 255, 0.5); stroke: rgba(255, 255, 255, 0.5); }

.celestial-moon { color: white; stroke: rgba(255, 255, 255, 0.5); stroke-width: 2.5; }
.celestial-moon use { color: rgba(255, 255, 255, 0.5); stroke: rgba(255, 255, 255, 0.5); stroke-width: 2.5; }

.celestial-sun { color: white; stroke: rgba(255, 255, 255, 0.5); stroke-width: 2; }
.celestial-sun circle { stroke: rgba(255, 255, 255, 0.5); }
.celestial-sun use { color: rgba(255, 255, 255, 0.5); stroke: rgba(255, 255, 255, 0.5); stroke-width: 2; }

.celestial-cloud { color: white; stroke: rgba(255, 255, 255, 0.4); stroke-width: 2; }
.celestial-horizon { stroke: rgba(255, 255, 255, 0.3); stroke-width: 2; }
.celestial-ray { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1.5; }
.celestial-constellation { color: white; stroke: rgba(255, 255, 255, 0.4); stroke-width: 1.5; }
.celestial-constellation circle { fill: rgba(255, 255, 255, 0.5); stroke: none; }
.celestial-cloud { stroke: rgba(255, 255, 255, 0.15); stroke-width: 1.5; }
.celestial-horizon { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; }
.celestial-ray { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.celestial-constellation { stroke: rgba(255, 255, 255, 0.25); stroke-width: 1; }
.celestial-constellation circle { fill: rgba(255, 255, 255, 0.30); stroke: none; }

/* Star twinkle animation - opacity pulse with subtle scale */
@keyframes twinkle {
  0%, 100% { 
    opacity: 0.25; 
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.3));
  }
  50% { 
    opacity: 0.55; 
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
  }
}

.celestial-star--twinkle {
  animation: twinkle var(--twinkle-duration, 4s) ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
}

/* Cloud drift animation - very slow horizontal movement */
@keyframes cloudDrift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3%); }
}

.celestial-cloud--drift {
  animation: cloudDrift var(--drift-duration, 60s) ease-in-out infinite;
  animation-delay: var(--drift-delay, 0s);
}

/* Sun/Moon glow pulse - gentle breathing */
@keyframes celestialGlow {
  0%, 100% { opacity: 0.20; }
  50% { opacity: 0.35; }
}

/* Moon soft luminance - ethereal glow */
@keyframes moonshine {
  0%, 100% { 
    filter: drop-shadow(0 0 6px rgba(200, 220, 255, 0.25));
  }
  50% { 
    filter: drop-shadow(0 0 15px rgba(200, 220, 255, 0.45));
  }
}

.celestial-sun--glow,
.celestial-moon--glow {
  animation: celestialGlow 8s ease-in-out infinite;
}

.celestial-moon--luminance {
  animation: moonshine 6s ease-in-out infinite;
}

/* Sun warm radiance - golden halo pulse */
@keyframes sunRadiance {
  0%, 100% { 
    opacity: 0.25;
    filter: drop-shadow(0 0 8px rgba(255, 220, 150, 0.3));
  }
  50% { 
    opacity: 0.35;
    filter: drop-shadow(0 0 20px rgba(255, 200, 100, 0.5));
  }
}

.celestial-sun--radiance {
  animation: sunRadiance 10s ease-in-out infinite;
}

/* Cloud shimmer - light playing on clouds using brightness filter */
@keyframes cloudShimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.4); }
}

.celestial-cloud--shimmer {
  animation: cloudShimmer var(--shimmer-duration, 8s) ease-in-out infinite;
  animation-delay: var(--shimmer-delay, 0s);
}

/* Horizon glow for dawn/dusk */
@keyframes horizonGlow {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.25; }
}

.celestial-horizon--glow {
  animation: horizonGlow 6s ease-in-out infinite;
}

/* Reduced motion - commented out for now, celestial animations are subtle enough
@media (prefers-reduced-motion: reduce) {
  .hero-celestial {
    animation: none;
    opacity: 1;
  }
  .celestial-star--twinkle,
  .celestial-cloud--drift,
  .celestial-cloud--shimmer,
  .celestial-sun--glow,
  .celestial-sun--radiance,
  .celestial-moon--glow,
  .celestial-horizon--glow {
    animation: none;
  }
}
*/

/* Mobile optimization - reduce element count handled in JS */
/* Simpler animations on mobile */
@media (max-width: 768px) {
  .celestial-cloud--drift {
    animation: none; /* Disable drift on mobile */
  }
}

/* Hide celestial elements when page is not home (via body class) */
body:not(.page-home) .hero-celestial {
  display: none;
}

/* ===== white sheet ===================================================== */
.content-sheet {
  background: var(--bg-soft);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 32px 20px 40px;
  margin-top: -48px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.04);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ===== sections ======================================================== */
.section-head {
  margin: 40px 0 16px;
  font: 600 22px/1;
  color: #111827;
  font-weight: 600;
}

.section-title {
  margin: 20px 0 7px;
  font-size: 20px;
  color: #111827;
  font-weight: 500;
}
@media (max-width: 600px) {
  .section-head {
    font-size: 30px;
  }
}
.section-subtitle {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-secondary-grey);
  display: flex;
  align-items: center;
}

.section-subtitle {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--text-secondary-grey, #6b7280);
  display: flex;
  align-items: center;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  text-transform: uppercase; /* <-- force CAPS */
  gap: 0;
  background: none;
  box-shadow: none;
  width: 100%;
  position: relative; /* ensure child absolute works */
}

/* Add this for right-side line variant */
.section-subtitle.section-subtitle-line {
  display: flex;
  align-items: center;
  position: relative;
}
.section-subtitle.section-subtitle-line::after {
  content: "";
  flex: 1 1 0%;
  height: 1px;
  background: #e5dafa;
  margin-left: 16px;
  width: auto;
}
@media (max-width: 600px) {
  .section-subtitle.section-subtitle-line::after {
    margin-left: 10px;
  }
}

/* Counter on the right, matches title font size/weight, right-aligned */
.section-counter-wrap {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  min-width: 2.5em;
  justify-content: flex-end;
}
.section-counter {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary-grey, #6b7280);
  margin-left: 0.5rem;
  flex-shrink: 0;
  min-width: 2.5em;
  text-align: right;
  justify-content: flex-end;
}

/* Remove border from .section-subtitle if not wanted, but keep divider */
.section-subtitle > .flex-1 {
  min-width: 24px;
  height: 1px;
  background: #e5dafa;
  border: none;
}

.section-subtitle > .flex-1.with-counter {
  margin-right: 30px;
}

/* ===== week (simple) =================================================== */
.day-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  color: #374151;
  text-decoration: none;
  font: 14px/1 "Inter", sans-serif;
}
@media (max-width: 600px) {
  .day-row {
    font-size: 17px;
    gap: 16px;
  }
}
.day-row span:first-child {
  width: 48px;
  text-align: right;
  font-weight: 600;
  font-size: 12px;
  color: #9ca3af;
}
@media (max-width: 600px) {
  .day-row span:first-child {
    font-size: 15px;
    width: 56px;
  }
}
.day-row:hover {
  opacity: 0.75;
}

/* ===== utility ========================================================= */
main {
  padding-top: 0px !important;
}
.fader {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in .fader {
  opacity: 1 !important;
  transform: none !important;
}

/* ===== ai-card animations ============================================== */
.fade-in-diagonal {
  animation: fadeInDiagonal 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-out-diagonal {
  display: none;
  animation: fadeOutDiagonal 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Diagonal fade-in animation */
.fade-in-diagonal {
  animation: fadeInDiagonal 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-out-diagonal {
  display: none;
  animation: fadeOutDiagonal 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fadeInDiagonal {
  from {
    opacity: 0;
    transform: translate(-24px, -24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes fadeOutDiagonal {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(24px, 24px) scale(0.98);
  }
}

@keyframes dotBlink {
  0%,
  80%,
  100% {
    opacity: 0.5;
  }
  40% {
    opacity: 1;
  }
}

.typewriter {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid transparent;
}

.typewriter.start {
  border-right: 2px solid #fff;
  animation: blink-caret 0.8s step-end infinite;
}

.typewriter.done {
  border-right: 2px solid transparent;
  animation: none;
}
@keyframes blink-caret {
  0%,
  100% {
    border-color: transparent;
  }
  50% {
    border-color: #fff;
  }
}

/* Page slide-in animation */
.page-transition {
  position: relative;
}
.page-slide-in {
  animation: pageSlideIn 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes pageSlideIn {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* NEW: Slide up animation for home */
.page-slide-up {
  animation: pageSlideUp 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes pageSlideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#app-bar {
  transform: translateY(calc(-1 * var(--headerOffset, 0px))) !important;
  transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.app-bar--hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

.alt-header{
  position: fixed !important;
  padding-top: calc(16px + var(--native-app-top-margin)) !important;
}

.event-header{
  padding-top: calc(16px + var(--native-app-top-margin)) !important;
}

.under-header{
  padding-top: calc(64px + var(--native-app-top-margin)) !important;
}

.onpage-signup #app-frame #page-transition-wrapper, .onpage-new #app-frame #page-transition-wrapper, .onpage-event #app-frame #page-transition-wrapper{
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.onpage-chats.no-header #app-frame #page-transition-wrapper{
  padding-top: 0px !important;
}

.onpage-new #bottom-nav{
  top: 100% !important;
}

.onpage-new .nav-link.fab{
  margin-top: calc(-80px - var(--native-app-bottom-margin)) !important;
  margin-left: calc(50% - 50px);
  transition: margin-left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}


body:NOT(.onpage-new) .nav-link.fab{
  margin-left: 0px;
  transition: margin-left 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.onpage-account #app-frame #page-transition-wrapper {
  padding-top: 0px !important;
  
}

.onpage-home #app-frame #page-transition-wrapper {
  padding-top: 0px !important;
}

.onpage-home #app-frame #page-transition-wrapper .page{
  padding-top: calc(64px + var(--native-app-top-margin)) !important;
}

.onpage-new #app-frame #page-transition-wrapper .page{
  padding-top: calc(64px + var(--native-app-top-margin)) !important;
}

.app-bar--visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Pill-toggle: support for 3 items */
.pill-toggle-3 .pill-toggle-indicator {
  width: calc(33.333% - 6px);
  left: 6px;
  transition: transform 0.2s;
}
.pill-toggle-3 button {
  width: 33.333%;
}

/* Default (2 items) fallback for .pill-toggle */
.pill-toggle:not(.pill-toggle-3) .pill-toggle-indicator {
  width: calc(50% - 6px);
  left: 6px;
  transition: transform 0.2s;
}
.pill-toggle:not(.pill-toggle-3) button {
  width: 50%;
}

/* Light mode for pill-toggle */
.pill-toggle-light {
  box-shadow: none !important;
  background: #fff !important;
}
.pill-toggle-light .pill-toggle-indicator {
  background: var(--primary) !important;
  box-shadow: none !important;
}
.pill-toggle-light button {
  color: #fff;
}
.pill-toggle-light button:not(.active) {
  color: #bdbdbd;
}

.pill-toggle-3 {
  width: 100% !important;
}

@keyframes org-flyer-slide-in-left {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.org-flyer-animate-slide-in-left {
  animation: org-flyer-slide-in-left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes org-flyer-slide-out-left {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

#org-flyer-menu .org-flyer-closing {
  animation: org-flyer-slide-out-left 0.35s cubic-bezier(0.4, 0, 0.2, 1)
    forwards;
}

#org-flyer-menu .org-flyer-current-org {
  background-color: #18224a;
  border-radius: 0.75rem;
  color: white;
}

#org-flyer-menu .org-flyer-org-block img {
  border-color: #0c173b;
}

#org-flyer-menu .org-flyer-current-org img {
  border: 2px solid white;
}

/* Org menu unread badge styles */
#org-flyer-menu .org-flyer-org-block .unread-badge {
  animation: orgBadgeAppear 0.2s cubic-bezier(0.4, 0.2, 0.2, 1);
}

@keyframes orgBadgeAppear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.smart-pill-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 9999px;
  padding: 1.25rem 1.1rem 1.25rem 1.1rem;
  min-height: 76px;
  box-shadow: 0 2px 10px 0 rgba(80, 0, 120, 0.06);
  border: none;
  width: 100%;
  transition: background 0.18s, box-shadow 0.18s;
  cursor: pointer;
}
.smart-pill-btn:hover {
  background: rgba(255, 255, 255, 0.32);
  box-shadow: 0 4px 18px 0 rgba(80, 0, 120, 0.1);
}
.smart-pill-icon {
  background: #fff;
  border-radius: 50%;
  width: 52px; /* was 44px */
  height: 52px; /* was 44px */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px 0 rgba(80, 0, 120, 0.07);
  font-size: 1.65rem; /* was 1.4rem */
}
.smart-pill-label {
  color: #fff;
  font-size: 1.2rem; /* was 1.08rem */
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 52px;
}
@media (max-width: 700px) {
  .smart-pill-label {
    font-size: 1.07rem;
  }
  .smart-pill-icon {
    width: 40px;
    height: 40px;
    font-size: 1.18rem;
  }
  .smart-pill-btn {
    min-height: 54px;
    padding: 0.85rem 0.7rem 0.85rem 0.7rem;
  }
}

/* ===== Timeline pop-in animation ===================================== */
@keyframes timelinePopIn {
  from {
    opacity: 0;
    transform: translateY(-32px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.timeline-pop-in {
  opacity: 0;
  transform: translateY(-32px) scale(0.98);
  animation: timelinePopIn 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.timeline-pop-in.delay-0 {
  animation-delay: 0s;
}
.timeline-pop-in.delay-1 {
  animation-delay: 0.08s;
}
.timeline-pop-in.delay-2 {
  animation-delay: 0.16s;
}
.timeline-pop-in.delay-3 {
  animation-delay: 0.24s;
}
.timeline-pop-in.delay-4 {
  animation-delay: 0.32s;
}
.timeline-pop-in.delay-5 {
  animation-delay: 0.4s;
}
.timeline-pop-in.delay-6 {
  animation-delay: 0.48s;
}
.timeline-pop-in.delay-7 {
  animation-delay: 0.56s;
}
.timeline-pop-in.delay-8 {
  animation-delay: 0.64s;
}
.timeline-pop-in.delay-9 {
  animation-delay: 0.72s;
}
.timeline-pop-in.delay-10 {
  animation-delay: 0.8s;
}

.ai-pulse-top {
  animation: aiPulseAnim 0.35s cubic-bezier(0.4, 2, 0.3, 1) 1;
}
@keyframes aiPulseAnim {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  40% {
    transform: scale(1.04);
    opacity: 0.92;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Simple, clean context indicator */
.timeline-context-enhanced {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 16px;
  color: #374151;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 16px 0 24px 0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  font-weight: 500;
}

.timeline-context-enhanced .context-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
}

.timeline-context-enhanced .context-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Clean day pill design */
.timeline-day-pill {
  background: var(--primary);
  color: white;
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  text-transform: capitalize;
}

/* Icon styling */
.timeline-context-enhanced iconify-icon {
  color: #6b7280;
  font-size: 18px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .timeline-context-enhanced {
    font-size: 15px;
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .timeline-context-enhanced .context-left {
    gap: 8px;
  }

  .timeline-context-enhanced .context-right {
    align-self: flex-end;
  }

  .timeline-day-pill {
    font-size: 13px;
    padding: 5px 12px;
  }
}
header {
  user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  -moz-user-select: none !important;
}

/* ───────── Floating Create Event Button ──────────────────── */
.fab-create-event {
  position: fixed;
  bottom: 96px; /* 80px for bottom nav + 16px spacing */
  right: 20px;
  z-index: 50;
  margin-bottom: var(--native-app-bottom-margin);

  /* Size and shape */
  width: 56px;
  height: 56px;
  border-radius: 16px; /* Rounded square like task list button */

  /* Colors - matches existing button pattern */
  background: var(--primary);
  color: white;
  border: none;

  /* Shadow and elevation */
  box-shadow: 0 4px 12px rgba(74, 0, 224, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);

  /* Layout */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Interactions */
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0); /* Hardware acceleration */
}

.fab-create-event:hover {
  background: var(--primary);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(74, 0, 224, 0.5), 0 4px 8px rgba(0, 0, 0, 0.15);
}

.fab-create-event:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(74, 0, 224, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
}

.fab-create-event:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .fab-create-event {
    bottom: 90px; /* Slightly closer on mobile */
    right: 16px;
    width: 52px;
    height: 52px;
  }
}

/* Reset Safari/iOS quirks */
input[type="date"],
input[type="time"] {
  -webkit-appearance: none; /* strip native styling */
  appearance: none; /* strip native styling */
}

.google-cal-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 420px) {
  .google-cal-footer {
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
  }
}

.time-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 400px) {
  .time-row {
    flex-direction: row;
  }

  .start-time {
    margin-right: 8px;
  }

  .end-time {
    margin-left: 8px;
  }
}

/* Slow network badge styles */
#slow-badge {
  position: fixed;
  top: 0;
  right: 0;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  background: #facc15;
  color: #1c1917;
  border-radius: 0 0 0 0.25rem;
  font-family: sans-serif;
  letter-spacing: 0.03em;
  display: none;
  z-index: 9999;
}

/* Horizontal scrolling action cards */
.action-cards-container {
  margin-left: -20px;
  margin-right: -20px;
  padding: 0 20px;
  overflow: hidden;
}

.action-cards-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px; /* Space for scrollbar */
}

/* Hide scrollbar but keep functionality */
.action-cards-scroll::-webkit-scrollbar {
  height: 4px;
}

.action-cards-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.action-cards-scroll::-webkit-scrollbar-thumb {
  background: #e5e7eb;
  border-radius: 2px;
}

.action-cards-scroll::-webkit-scrollbar-thumb:hover {
  background: #d1d5db;
}

/* Firefox */
.action-cards-scroll {
  scrollbar-width: thin;
  scrollbar-color: #e5e7eb transparent;
}

.action-card-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.action-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 140px;
  width: 140px;
  height: 100%;
  padding: 16px 12px;
  background: white;
  border: 1px solid #e0e7ff;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: all 0.2s;
  text-decoration: none;
}

.action-card:hover {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Responsive adjustments */
@media (min-width: 640px) {
  .action-card {
    min-width: 160px;
    width: 160px;
    padding: 20px 16px;
  }
}

/* Visual indicator for scrollable content */
.action-cards-container::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(to right, transparent, var(--bg-soft));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.action-cards-container.can-scroll::after {
  opacity: 1;
}

/* Small sound bars for embedded notifications */
.sound-bars-small {
  height: 16px;
}

.sound-bar-small {
  width: 3px;
  background: currentColor;
  animation: soundWave 1.2s ease-in-out infinite;
  border-radius: 2px;
}

.sound-bar-small:nth-child(1) { height: 8px; animation-delay: 0s; }
.sound-bar-small:nth-child(2) { height: 12px; animation-delay: 0.2s; }
.sound-bar-small:nth-child(3) { height: 6px; animation-delay: 0.4s; }
/* End: 0_app.css */

/* Begin: 0_form.css */
/* ───────────────────────────────────────────────────────────
   Generic form system
   --------------------------------------------------------------------------
   Usage:
   <div class="form-modal">
     <div class="form-group">
       <label class="form-label">Title</label>
       <input class="input">
     </div>
     …
   </div>
  ────────────────────────────────────────────────────────── */

:root{
  --form-bg:#F6F2FD;
  --form-field-bg:#fff;
  --form-border:#e5e7eb;
  --form-radius:.75rem;
  --form-padding:1.5rem;
  --form-label:#374151;
  --form-placeholder:#9ca3af;
}

/* container (works as modal OR full-page sheet) */
.form-modal{
  width:clamp(280px,92vw,480px);
  max-height:90vh;
  overflow-y:auto;
  background:var(--form-bg);
  border-radius:var(--form-radius);
  padding:var(--form-padding);
}
@media (max-width:768px){
  .form-modal{width:100vw;height:100vh;border-radius:0;max-height:none;}
}

/* spacing */
.form-group + .form-group{margin-top:0.65rem;} /* was 1.25rem, now less */

/* labels */
.form-label{
  display:block;
  font-size:1rem;
  font-weight:600;
  margin-bottom:.35rem;
  color:var(--form-label);
}

/* inputs + text-areas */
.input,
.textarea,
.tag-field{
  width:100%;
  border:1.5px solid var(--form-border);
  border-radius:.625rem;
  padding:1rem 1rem;
  font-size:.9375rem;
  background:var(--form-field-bg);
  color:#1f2937;
  /* Add right padding for select arrow */
  padding-right: 2.5rem;
}

/* Remove extra right padding for textareas and inputs that are not select */
.textarea { padding-right: 1rem; }
input[type="text"].input,
input[type="email"].input,
input[type="password"].input {
  padding-right: 1rem;
}

/* Fix select arrow overlap for profile-form-sheet */
.profile-form-sheet select.input {
  padding-right: 2.5rem !important;
  background-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='%239ca3af' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.2em;
  appearance: none;
}

/* rich-text wrapper so Quill fits the system */
.rte-wrapper{position:relative;}
.rte-wrapper .ql-toolbar{
  border:none;
  padding:0 .25rem;
  border-bottom:1px solid var(--form-border);
  background:transparent;
}
.rte-wrapper .ql-container{
  border:none;
  height:220px;                 /* keeps scroll area sane */
  padding:.75rem 1rem;
}

/* tag chips – generic */
.tag-field{display:flex;flex-wrap:wrap;gap:.25rem;cursor:text;min-height:42px;}
.tag-chip{
  display:flex;align-items:center;gap:.25rem;
  background:#eef2ff;color:#4f46e5;
  border-radius:9999px;font-size:.75rem;
  padding:.35rem .6rem;
}
.tag-chip button{font-size:1rem;line-height:1;margin-left:2px;}

/* action row */
.form-actions{
  display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:600;border-radius:.625rem;
  padding:.65rem 1.4rem;font-size:1rem;
  transition:background .15s;
}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:#7a63ff;}
.btn-text{color:#6b7280;}
.btn-text:hover{color:#111;}


.form-actions{
  display:flex;
  justify-content:space-between;   /* left & right blocks */
  align-items:center;
  gap:.75rem;
  margin-top:1.75rem;
  padding-top:1.25rem;
  border-top:1px solid var(--form-border);   /* ⬅ line above */
  font-size:1rem;                             /* bigger text */
}

/* buttons / links */
.btn          {font-weight:600; border-radius:9999px; padding:.65rem 1.4rem;}
.btn-text     {color:#6b7280;}
.btn-text:hover{color:#111;}
.btn-danger   {color:#ef4444;}                /* red text link  */
.btn-danger:hover{color:#b91c1c;}
.btn-primary  {background:var(--primary); color:#fff;}
.btn-primary:hover{background:#7a63ff;}

.rte-wrapper{
    border-radius: 10px;
    background:var(--form-field-bg);
     border-color: var(--form-border) !important;
}

.rte-wrapper .ql-toolbar{
    border-radius: 10px 10px 0 0;
    border-color: var(--form-border) !important;
}

.rte-wrapper .ql-container{
    border-radius: 0 0 10px 10px;
     border-color: var(--form-border) !important;
}

.modal-header {
  justify-content: center !important;
  text-align: center !important;
  background: #fff;
  margin: -1.5rem -1.5rem 1.5rem -1.5rem;
  padding: 1.25rem 1.5rem 1rem 1.5rem;
  border-radius: .75rem .75rem 0 0;
  border-bottom: 1px solid var(--form-border);
  position: relative; /* Ensure absolute children are relative to header */
}

.modal-header h3 {
  text-align: center !important;
  width: 100%;
}

/* Fix back button alignment in modal header */
.modal-header .absolute.left-0 {
  left: 1.5rem; /* Match modal header's horizontal padding */
  margin-left: 0; /* Remove negative margin */
}

.profile-form-sheet {
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 4px 24px rgba(80,0,120,0.07);
  /* Remove margin, use only padding for spacing */
  margin: 0 auto;
  padding: 20px !important; 
  max-width: 480px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-sizing: border-box; /* Ensure padding is included in width */
}

@media (max-width: 600px) {
  .profile-form-sheet {
    margin: 0 auto;
    padding: 20px !important; 
    border-radius: 1rem;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Toggle Switch Styles */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 28px;
  vertical-align: middle;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #e5e7eb;
  border-radius: 9999px;
  transition: background 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
  background: #6366F1;
}
.toggle-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(28px);
}

/* Reusable toggle button styles for forms */
.btn-toggle-option {
  flex: 1 1 0%;
  display: block;
  width: 100%;
  padding: 1.1rem 1.5rem;
  border-radius: .75rem;
  border: 2px solid var(--form-border, #e5e7eb);
  background: #f3f4f6;
  color: #9ca3af;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  transition: all .18s;
  cursor: pointer;
}
.btn-toggle-option--active {
  border: 2px solid var(--primary, #6366F1);
  background: #ede9fe;
  color: var(--primary, #6366F1);
  z-index: 1;
}

/* Attendee chip styles */
.attendee-chip {
  background: #f3f4f6;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.7rem 0.25rem 0.3rem;
  font-size: 1rem;
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
  min-height: 2.25rem;
}
.attendee-chip img,
.attendee-chip .inline-flex {
  margin-right: 0.15rem;
}
.attendee-chip .text-base {
  margin-left: 0.1rem;
}
.attendee-chip-remove {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.15rem;
  border-radius: 9999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.12s;
}
.attendee-chip-remove:hover {
  background: #fee2e2;
}

.attendee-clear-btn {
  top: 50%;
  transform: translateY(-9px);
}

.attendee-search-input {
  background: #fff;
  border-radius: 0.75rem;
  min-height: 2.75rem;
  font-size: 1.08rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  /* padding-left and padding-right are set inline for icon/clear */
}

.attendee-dropdown {
  box-shadow: 0 8px 32px rgba(80,0,120,0.10);
  border-radius: 1rem;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  font-size: 1rem;
  margin-top: 0;
  z-index: 30;
  border-top: 1.5px solid #e5e7eb;
  /* visually connect to input */
}

.attendee-dropdown ul > li + li {
  border-top: 1px solid #f3f4f6;
}

.attendee-dropdown button {
  min-height: 48px;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 0.5rem;
}
.attendee-dropdown button .w-8 {
  margin-right: 0.1rem;
  flex-shrink: 0;
}
.attendee-dropdown button .attendee-name {
  margin-left: 0;
  text-align: left;
  flex: 1 1 auto;
  display: block;
  font-weight: 500;
  font-size: 1rem;
  color: #111827;
  line-height: 1.2;
}

/* ───────────────────────────────────────────────────────────
   Voice Agent Range Sliders
   ────────────────────────────────────────────────────────── */
.voice-agent-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(to right, #c7d2fe 0%, #e0e7ff 50%, #c7d2fe 100%);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.voice-agent-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #6366f1;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.voice-agent-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.5);
}

.voice-agent-slider::-webkit-slider-thumb:active {
  transform: scale(0.95);
}

.voice-agent-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #6366f1;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
}

.voice-agent-slider::-moz-range-track {
  height: 6px;
  background: linear-gradient(to right, #c7d2fe 0%, #e0e7ff 50%, #c7d2fe 100%);
  border-radius: 3px;
}
/* End: 0_form.css */

/* Begin: 1_aicard.css */
/* ============ NEW AI CARD DESIGN ============ */
.ai-card-v2 {
  position: relative;
  min-height: 140px;
  border-radius: 24px;
  background: white;
  overflow: visible;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 2px solid transparent;
  transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.5s,
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.5s,
              padding 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.5s,
              min-height 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
}

/* --- LOADING STATE --- */
.ai-card-v2.loading {
  padding: 40px;
  min-height: 140px;
}

/* --- LOADED STATE --- */
.ai-card-v2.loaded {
  padding: 24px 24px 24px 36px;
  border: 2px solid var(--ai-light);
  box-shadow: 
    0 4px 12px rgba(254, 108, 95, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.05);
  min-height: auto;
}

/* --- AI ICON --- */
.ai-icon-v2 {
  position: absolute;
  width: 60px;
  height: 60px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

/* Loading position - centered */
.ai-card-v2.loading .ai-icon-v2 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
}

/* Loaded position - top left corner */
.ai-card-v2.loaded .ai-icon-v2 {
  top: -2px;
  left: -2px;
  width: 30px;
  height: 30px;
  transform: translate(0, 0);
}

/* Icon background circle */
.ai-icon-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ai-main);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rotating halo for loading */
.ai-icon-v2::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--ai-light);
  border-right-color: var(--ai-main);
  transition: opacity 0.3s ease;
}

.ai-card-v2.loading .ai-icon-v2::after {
  opacity: 1;
  animation: haloSpin 1.1s linear infinite;
}

.ai-card-v2.loaded .ai-icon-v2::after {
  opacity: 0;
}

/* Icon symbol */
.ai-icon-v2 .icon-symbol {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 35px;
  transition: font-size 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-card-v2.loaded .ai-icon-v2 .icon-symbol {
  font-size: 18px;
}

.ai-card-v2.loading .ai-icon-v2 .icon-symbol {
  animation: iconPulse 1.1s ease-in-out infinite;
}

/* --- CONTENT AREA --- */
.ai-content-v2 {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.ai-card-v2.loaded .ai-content-v2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s; /* Delayed to happen AFTER icon moves */
}

.ai-content-v2 p {
  margin: 0;
  color: #111827;
  font-size: 17px;
  line-height: 1.5;
}

/* Rich HTML content in digest (from Text Agent) */
.ai-content-v2 strong {
  font-weight: 600;
}

.ai-content-v2 .text-sm { font-size: 13px; }
.ai-content-v2 .text-xs { font-size: 11px; }

/* Subtle context text */
.ai-content-v2 .text-gray-600 { color: #4b5563; }
.ai-content-v2 .text-gray-500 { color: #6b7280; }

/* Priority text colors */
.ai-content-v2 .text-red-600 { color: #dc2626; }
.ai-content-v2 .text-yellow-600 { color: #d97706; }
.ai-content-v2 .text-green-600 { color: #16a34a; }
.ai-content-v2 .text-blue-600 { color: #2563eb; }

/* Highlight pills/badges */
.ai-content-v2 .bg-blue-100 {
  background: #dbeafe;
  color: #1e40af;
}
.ai-content-v2 .bg-yellow-100 {
  background: #fef3c7;
  color: #92400e;
}
.ai-content-v2 .bg-purple-100 {
  background: #f3e8ff;
  color: #6b21a8;
}
.ai-content-v2 .bg-green-100 {
  background: #dcfce7;
  color: #166534;
}
.ai-content-v2 .bg-red-100 {
  background: #fee2e2;
  color: #991b1b;
}
.ai-content-v2 .bg-orange-100 {
  background: #ffedd5;
  color: #9a3412;
}

/* Common padding/rounding for highlight spans */
.ai-content-v2 .px-2 { padding-left: 8px; padding-right: 8px; }
.ai-content-v2 .py-1 { padding-top: 4px; padding-bottom: 4px; }
.ai-content-v2 .rounded { border-radius: 6px; }
.ai-content-v2 .mt-1 { margin-top: 4px; }
.ai-content-v2 .mt-2 { margin-top: 8px; }

/* Keep existing animations */
@keyframes haloSpin {
  to { transform: rotate(360deg); }
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* Border glow animation */
@keyframes borderGlow {
  0% {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  50% {
    box-shadow: 
      0 0 0 8px rgba(254, 108, 95, 0.1),
      0 4px 12px rgba(254, 108, 95, 0.15),
      0 2px 4px rgba(0, 0, 0, 0.05);
  }
  100% {
    box-shadow: 
      0 0 0 0 rgba(254, 108, 95, 0),
      0 4px 12px rgba(254, 108, 95, 0.15),
      0 2px 4px rgba(0, 0, 0, 0.05);
  }
}

.ai-card-v2.loaded {
  animation: borderGlow 0.5s ease-out;
  animation-delay: 0.5s;
  animation-fill-mode: backwards;
}

/* Update the pulse animation for tab switching */
.ai-pulse-top {
  animation: aiPulseAnim 0.35s cubic-bezier(.4,2,.3,1) 1;
}


.ai-connector-arrow {
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.8s;
}

.ai-card-v2.loaded .ai-connector-arrow {
  opacity: 1;
}

.ai-connector-line {
  width: 2px;
  height: 20px;
  background: linear-gradient(
    to bottom,
    var(--ai-main),
    var(--ai-main)
  );
  margin-bottom: -2px;
}

.ai-connector-arrow iconify-icon {
  color: var(--ai-main);
  font-size: 16px;
  animation: arrowPulse 2s ease-in-out infinite;
  animation-delay: 1s;
}

/* --- PROCESSING STATE --- */
.ai-card-v2.processing {
  padding: 24px 24px 24px 36px;
  border: 2px solid var(--ai-light);
  box-shadow: 
    0 4px 12px rgba(254, 108, 95, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.05);
  min-height: auto;
}

/* Processing position - same as loaded but with animation */
.ai-card-v2.processing .ai-icon-v2 {
  top: -2px;
  left: -2px;
  width: 30px;
  height: 30px;
  transform: translate(0, 0);
}

/* Keep a subtle spinning halo in processing state */
.ai-card-v2.processing .ai-icon-v2::after {
  opacity: 0.5;
  animation: haloSpin 2s linear infinite;
  inset: -3px;
  border-width: 2px;
}

/* Gentle pulse on the icon during processing */
.ai-card-v2.processing .ai-icon-v2::before {
  animation: processingPulse 2s ease-in-out infinite;
}

@keyframes processingPulse {
  0%, 100% { 
    opacity: 1;
    transform: scale(1);
  }
  50% { 
    opacity: 0.85;
    transform: scale(0.95);
  }
}

/* Content visible but with processing indicator */
.ai-card-v2.processing .ai-content-v2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

/* Processing indicator dot animation */
.ai-processing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  vertical-align: middle;
}

.ai-processing-indicator span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ai-main);
  animation: processingDot 1.4s ease-in-out infinite;
}

.ai-processing-indicator span:nth-child(2) {
  animation-delay: 0.2s;
}

.ai-processing-indicator span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes processingDot {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  30% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Optional: Animated border during processing */
.ai-card-v2.processing {
  background-image: linear-gradient(90deg, var(--ai-light) 50%, transparent 50%),
                    linear-gradient(90deg, var(--ai-light) 50%, transparent 50%),
                    linear-gradient(0deg, var(--ai-light) 50%, transparent 50%),
                    linear-gradient(0deg, var(--ai-light) 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 8px 2px, 8px 2px, 2px 8px, 2px 8px;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  animation: processingBorder 1s linear infinite;
  color: var(--ai-light);
}

@keyframes processingBorder {
  0% {
    background-position: 0 0, 8px 100%, 0 8px, 100% 0;
  }
  100% {
    background-position: 8px 0, 0 100%, 0 0, 100% 8px;
  }
}

/* ============ INTERACTIVE AI CARD WITH TEXT AGENT ============ */
.ai-card-v2--interactive {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

.ai-card-v2--interactive.loaded {
  padding: 0 !important;
}

/* Main clickable area */
.ai-card-v2__main {
  position: relative;
  padding: 24px 24px 16px 36px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-radius: 22px 22px 0 0;
}

.ai-card-v2__main:hover {
  background-color: rgba(254, 108, 95, 0.03);
}

.ai-card-v2__main:active {
  background-color: rgba(254, 108, 95, 0.06);
}

/* Loading state main area */
.ai-card-v2.loading .ai-card-v2__main {
  min-height: 100px;
  padding: 40px;
}

/* Voice button (alternative to typing) */
.ai-card-v2__voice-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: none;
  background: #7c3aed;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.ai-card-v2__voice-btn:hover {
  background: #6d28d9;
  transform: scale(1.05);
}

.ai-card-v2__voice-btn:active {
  transform: scale(0.95);
}

/* Input row at bottom */
.ai-card-v2__input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 12px;
  border-top: 1px solid rgba(254, 108, 95, 0.15);
  background: rgba(254, 108, 95, 0.02);
  border-radius: 0 0 22px 22px;
  min-width: 0; /* Prevent flex overflow */
  overflow: hidden;
}

.ai-card-v2__input {
  flex: 1;
  min-width: 0; /* Allow shrinking below content size */
  border: none;
  background: transparent;
  font-size: 15px;
  padding: 8px 10px;
  border-radius: 12px;
  color: #1f2937;
  outline: none;
  transition: background-color 0.15s ease;
}

.ai-card-v2__input:focus {
  background: rgba(254, 108, 95, 0.05);
}

.ai-card-v2__input::placeholder {
  color: #9ca3af;
}

.ai-card-v2__send-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: none;
  background: var(--ai-main);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.ai-card-v2__send-btn:hover:not(:disabled) {
  background: var(--ai-dark, #e85a4d);
  transform: scale(1.05);
}

.ai-card-v2__send-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.ai-card-v2__send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Hide input row during loading */
.ai-card-v2.loading .ai-card-v2__input-row {
  display: none;
}

/* Processing state - show input but dimmed */
.ai-card-v2.processing .ai-card-v2__input-row {
  opacity: 0.6;
  pointer-events: none;
}

/* ============ SCHEDULE DAY AI CARD ACTIONS ============ */
/* Voice/Text buttons for schedule timeline cards */

.ai-card-v2__day-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(254, 108, 95, 0.12);
}

.ai-card-v2__day-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 16px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.ai-card-v2__day-btn span {
  white-space: nowrap;
}

/* Text/Chat button - coral/primary style */
.ai-card-v2__day-btn--text {
  background: rgba(254, 108, 95, 0.1);
  color: var(--ai-main);
}

.ai-card-v2__day-btn--text:hover {
  background: rgba(254, 108, 95, 0.2);
  transform: translateY(-1px);
}

.ai-card-v2__day-btn--text:active {
  transform: translateY(0);
}

/* Voice button - purple style */
.ai-card-v2__day-btn--voice {
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
}

.ai-card-v2__day-btn--voice:hover {
  background: rgba(124, 58, 237, 0.2);
  transform: translateY(-1px);
}

.ai-card-v2__day-btn--voice:active {
  transform: translateY(0);
}
/* End: 1_aicard.css */

/* Begin: 1_tasks.css */
/* REVIEW DECK UPGRADE ──────────────── */
.review-wrap {
  position: relative;
  width: 100%;
  min-width: 300px;
  max-width: 600px;
  aspect-ratio: 384 / 430;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-top: clamp(20px, calc(50vh - 450px), 200px);
  padding-top: 0;
}
@supports not (aspect-ratio: 1) {
  .review-wrap {
    width: 100%;
    min-width: 300px;
    max-width: 600px;
    height: calc(clamp(300px, 100vw, 600px) * 430 / 384);
  }
}

.review-wrap > .review-card.stack-layer:first-child {
  margin-top: 0;
}
.review-wrap > .review-card.stack-layer {
  top: 0 !important;
}

.review-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 300px;
  max-width: 600px;
  aspect-ratio: 384 / 430;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1.2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 1.2rem 1.4rem 1.3rem;
  transition: transform 0.35s ease, opacity 0.35s ease;
  will-change: transform, opacity;
}
@supports not (aspect-ratio: 1) {
  .review-card {
    width: 100%;
    min-width: 300px;
    max-width: 600px;
    height: 100%;
  }
}

.review-card.stack-layer[data-pos="0"] {
  /* Center the top card with 1:2 offset */
  top: 33.33%;
  z-index: 3;
  /* ...existing code... */
}
.review-card.stack-layer[data-pos="1"] {
  top: calc(33.33% + 8px);
  background: #f9fafb;
  transform: rotate(3deg);
  z-index: 2;
}
.review-card.stack-layer[data-pos="2"] {
  top: calc(33.33% + 16px);
  background: #f3f4f6;
  transform: rotate(-3deg);
  z-index: 1;
}
.review-card.stack-layer[data-pos="3"] {
  top: calc(33.33% + 24px);
  background: #e5e7eb;
  transform: rotate(3deg);
  z-index: 0;
}

.review-card {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease;
}
/* 
.review-card.leaving-right { transform:translateX(110%) rotate(8deg);  opacity:0; }
.review-card.leaving-left  { transform:translateX(-110%) rotate(-8deg); opacity:0; }
.review-card.leaving-down {
 transform: translateY(120%) rotate(4deg);
 opacity: 0;
} */

.review-card {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Move background color overrides from inline classes to here */
.leaving-right {
  transition: 0.25s;
  transform: translateX(110%) rotate(6deg);
  opacity: 0 !important;
  visibility: visible !important;
  background-color: #a3a3a3; /* stronger grey */
}
.leaving-left {
  transition: 0.25s;
  transform: translateX(-110%) rotate(-6deg);
  opacity: 0 !important;
  visibility: visible !important;
  background-color: #60a5fa; /* stronger blue */
}
.leaving-down {
  transition: 0.25s;
  transform: translateY(110%) rotate(6deg);
  opacity: 0 !important;
  visibility: visible !important;
  background-color: #34d399; /* stronger green */
}
.leaving-up {
  transition: 0.25s;
  transform: translateY(-110%) rotate(-6deg);
  opacity: 0 !important;
  visibility: visible !important;
}

.card-title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
}
.card-meta p {
  font-size: 0.72rem;
  color: #6b7280;
}

/* ---------- footer button-block ---------- */
.card-actions {
  margin-top: auto; /* pins the whole block to card bottom   */
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* top row = two equal buttons */
.row-top {
  display: flex;
  gap: 0.55rem;
}
.row-top button {
  flex: 1 1 0;
}

/* bottom button = full width */
.btn-done {
  width: 100%;
}

.card-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 0.7rem 0;
  border-radius: 0.65rem;
  transition: transform 0.15s;
}
.btn-assign {
  background: var(--primary);
  color: #fff;
}
.btn-skip {
  background: #f3f4f6;
  color: var(--primary);
}
.btn-done {
  background: #f3f4f6;
  color: var(--primary);
}

.card-actions button:active {
  transform: scale(0.96);
}

/* ──────────────────────────────────────────────────────────────
  1️⃣  Small phones  –  ≤ 479 px
  ──────────────────────────────────────────────────────────── */
@media (max-width: 529px) {
  /* shrink the deck so it never pokes past the viewport edges */
  .review-wrap,
  .review-card {
    max-width: 92vw; /* ±4 vw margin either side          */
    aspect-ratio: 320/430; /* keeps a tidy portrait ratio       */
  }
  .review-card {
    padding: 1rem 1.25rem; /* tighter padding on small screens  */
  }

  /* responsive title size: ~28 px on 430 px wide, scales down */
  .review-card h3 {
    font-size: clamp(1.4rem, 6.2vw, 2rem);
  }

  /* meta row → 2-col grid (assignee | priority) ; due-date drops below */
  .review-card .grid {
    grid-template-columns: 1fr 1fr;
  }
  .review-card .grid > div:nth-child(3) {
    /* due-date cell */
    grid-column: 1 / -1; /* spans full width */
  }

  .card-actions button {
    font-size: 0.9rem;
    font-weight: 500;
  }
}

/* ─── generic chips ─────────────────────────────────────────── */
.chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 42px;
  padding: 6px 1.15rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 9999px;
  white-space: nowrap;
}
.chip-outline {
  border: 1.5px solid #e5e7eb;
  color: #4b4b4b;
  background: #fff;
  transition: background 0.15s, border 0.15s;
}
.chip-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.chip-outline.bg-blue-50 {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}
.chip-outline .ml-1 {
  margin-left: 0.25rem;
}
.chip-outline button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

/* Skeleton styles for loading state */
.review-card-skeleton {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb;
  box-shadow: none;
  min-height: 220px;
  opacity: 1 !important;
  animation: skeletonPulse 1.2s infinite ease-in-out;
}
.skeleton-title {
  width: 70%;
  height: 2.2rem;
  background: #e5e7eb;
  border-radius: 0.5rem;
  margin: 2.5rem auto 1.2rem auto;
}
.skeleton-meta {
  width: 60%;
  height: 1.1rem;
  background: #e5e7eb;
  border-radius: 0.5rem;
  margin: 0 auto 2.5rem auto;
}
.skeleton-actions {
  width: 90%;
  height: 2.5rem;
  background: #e5e7eb;
  border-radius: 0.7rem;
  margin: 2rem auto 0 auto;
}
.skeleton-list-title {
  width: 40%;
  height: 1.5rem;
  background: #e5e7eb;
  border-radius: 0.5rem;
}
.skeleton-task-title {
  width: 70%;
  height: 1.1rem;
  background: #e5e7eb;
  border-radius: 0.5rem;
  margin: 0.5rem 0;
}
@keyframes skeletonPulse {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.7;
  }
}

/* keep drag affordance identical in both modes */
.task-row.dragging,
.task-card.dragging {
  opacity: 0.5;
}

/* ─── Task List Container ─────────────────────────────── */
.my-list {
  border-radius: 1rem;
  padding: 0.8rem 0.6rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  border-bottom: 1.5px solid #ede7fc;
}

/* ─── Task Row Block Style ─────────────────────────────── */
.task-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
  background: #ffffff;
  border-radius: 0.85rem;
  border: none;
  transition: background 0.2s;
  margin-left: 0; /* Remove the left margin that was pushing content right */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative; /* Ensure proper positioning context for absolute checkbox */
  width: 100%; /* Ensure full width */
  box-sizing: border-box;
}

.task-row:hover {
  background: #f9fafb;
}

/* Checkbox */
.task-row input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  position: absolute;
  margin-left: -50px;
  margin-top: 20px;
}

/* Title + Meta Container */
.task-title-block {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.35rem;
  width: 100%; /* Ensure full width */
  min-width: 0; /* Allow shrinking */
  margin-left: 0; /* Reset any left margin */
  padding-left: 0; /* Reset any left padding */
}

.task-row input[type="text"] {
  font-size: 1rem;
  font-weight: 600;
  border: none;
  background: transparent;
  padding: 0;
  line-height: 1.35;
  resize: none;
  min-height: 1.3em;
  overflow: hidden;
}

/* Meta Row */
.task-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #4b5563;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.task-meta-row .assignee {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.task-meta-row .meta-end {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  align-items: center;
}

.task-meta-row .assignee img,
.task-meta-row .assignee iconify-icon {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
}

/* Priority Pill */
.task-meta-row .pill.priority {
  font-size: 0.9rem;
  width: 2.3rem;
  height: 2.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  border-radius: 0.4rem;
  text-align: center;
  background-color: transparent;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}

.pill-urgent {
  background-color: #fee2e2 !important;
  color: #b91c1c !important;
  border: none !important;
}

.pill-high {
  background-color: #fee2e2 !important;
  color: #991b1b !important;
  border: none !important;
}

.pill-med {
  background-color: #fef3c7 !important;
  color: #92400e !important;
  border: none !important;
}

.pill-low {
  background-color: #d1fae5 !important;
  color: #065f46 !important;
  border: none !important;
}

/* Due date urgency pills - subtle colors */
.due-today {
  background-color: #fef3c7 !important; /* soft yellow */
  color: #92400e !important;
  border: none !important;
}
.due-soon {
  background-color: #fde68a !important; /* lighter orange/yellow */
  color: #b45309 !important;
  border: none !important;
}
.due-this-week {
  background-color: #dbeafe !important; /* soft blue */
  color: #2563eb !important;
  border: none !important;
}
.overdue {
  background-color: #fee2e2 !important; /* soft red */
  color: #b91c1c !important;
  border: none !important;
}
.due-later {
  background-color: #f3f4f6 !important; /* soft gray */
  color: #6b7280 !important;
  border: none !important;
}

/* Due Date Pill (same class reuse) */
.task-meta-row .pill.date {
  background-color: transparent;
  color: #4b5563;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.9rem;
  min-width: 4.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.3em;
}

/* Add Task Field */
.add-task-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  background: #f3f4f6;
  padding: 0.65rem 0.8rem;
  border-radius: 0.75rem;
}

.add-task-field input[type="text"] {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 0.95rem;
  outline: none;
}

.add-task-field iconify-icon {
  color: #6366f1;
  cursor: pointer;
}

/* Spinner for add-task input */
.add-task-field,
.grid-add-task-row {
  position: relative;
}

.add-task-field .animate-spin,
.grid-add-task-row .animate-spin {
  position: absolute;
  right: 60px;
  top: 10px;
  z-index: 2;
  pointer-events: none;
}

/* Ensure consistent row height */
.task-row > * {
  flex-shrink: 0;
}

.task-row input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  font-size: 1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.task-row.done {
  opacity: 0.45;
}
.task-row.done .task-title,
.task-row.done input[type="text"] {
  text-decoration: line-through;
}

.data-mic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 1.2rem;
  padding: 0;
  vertical-align: middle;
}
.data-mic-btn iconify-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 1.5rem;
  height: 1.5rem;
}
.data-mic-btn:hover {
  background: var(--primary-hover, #6366f1);
}
.data-mic-btn iconify-icon {
  color: #fff;
  width: 1.5rem;
  height: 1.5rem;
}

/* Large mic button modifier */
.mic-btn-large {
  width: 3.4rem !important;
  height: 3.4rem !important;
  font-size: 1.6rem !important;
}
.mic-btn-large iconify-icon {
  width: 1.8rem !important;
  height: 1.8rem !important;
}

/* ─── New-list wizard styles ─────────────────────────────── */
.new-list-wizard {
  background: #f5f3ff; /* light lavender panel */
  border: 1.5px dashed #d8d4ff;
  border-radius: 1rem;
  padding: 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.new-list-wizard input[type="text"] {
  width: 100%;
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 0.8rem;
  padding: 0.9rem 0.9rem;
  font-size: 1rem;
  outline: none;
}

.new-list-wizard .row {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.new-list-wizard .row button[data-mic] {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.new-list-wizard .actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.4rem;
}

.new-list-wizard .actions button {
  font-weight: 500;
  font-size: 1.1rem;
  border: none;
  background: none;
  cursor: pointer;
}

.new-list-wizard .actions .save {
  color: #fff;
  padding: 0.7rem 1.4rem;
  border-radius: 2rem;
}

.new-list-wizard .actions .save:disabled {
  opacity: 0.5;
  cursor: default;
}

.chip-filled {
  background: var(--primary);
  color: #fff;
  border: none;
  transition: background 0.2s, color 0.2s;
}
.chip-filled:hover {
  background: var(--primary-hover, #4f46e5);
}

/* ─── GRID VIEW SPECIFIC STYLING ───────────────────────────── */
.task-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Changed from flex-start to space-between */
  height: 100%;
  padding: 1rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: box-shadow 0.2s ease;
  min-height: 180px; /* Ensure minimum height */
  position: relative;
  gap: 0.6rem;
  overflow: hidden;
}

.task-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.task-card .task-title {
  border: none;
  background: transparent;
  font-weight: 400;
  font-size: 1.08rem;
  line-height: 1.4;
  padding: 0;
  resize: none;
  overflow: auto;
  pointer-events: auto;
  flex-grow: 1; /* Allow title to grow and fill space */
  min-height: 2em; /* Minimum height for short text */
  margin-top: 20px;
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  display: block;
  box-sizing: border-box;
}

.task-card .task-meta-row {
  position: relative; /* Changed from absolute */
  bottom: auto;
  left: auto;
  right: auto;
  width: auto;
  font-size: 0.8rem;
  color: #4b5563;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  height: auto; /* Changed from fixed height */
  margin-top: auto; /* Push to bottom */
  flex-shrink: 0; /* Don't shrink */
}

.task-card .assignee {
  position: relative; /* Changed from absolute */
  left: auto;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  flex-shrink: 0;
}

.task-card .pill.priority {
  position: relative; /* Changed from absolute */
  right: auto;
}

.task-card .pill.date {
  position: relative; /* Changed from absolute */
  right: auto;
  min-width: 4.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.3em;
  font-size: 0.95em;
}

/* Grid view checkboxes - positioned relatively for proper flexbox alignment */
.task-card input[type="checkbox"] {
  position: relative;
  top: auto;
  left: auto;
  width: 1rem;
  height: 1rem;
  z-index: 2;
}

/* List view checkboxes - keep absolute positioning for overlay effect */
.task-row input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  position: absolute;
  left: 1rem; /* Position from left edge of container */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Perfect vertical centering */
  z-index: 2;
}

.task-card.done {
  opacity: 0.45;
}

.task-card.done .task-title {
  text-decoration: line-through;
}

.task-card.done input[type="text"] {
  text-decoration: line-through;
}

/* Hide assignee name inside grid cards */
.task-card .assignee span {
  display: none;
}

/* Hide people count text in grid view - but NOT the +N number */
.task-card .assignee-stack > span {
  display: none !important;
}

/* Review Card Pop-in Animation (slide from above/left, scale up) */
.review-card-hidden {
  opacity: 0 !important;
  pointer-events: none;
  visibility: hidden;
}
@keyframes reviewCardPopIn {
  from {
    opacity: 0.5;
    transform: translate(-400px, -400px) scale(0.85) rotate(-8deg);
  }
  60% {
    opacity: 1;
    transform: translate(80px, 80px) scale(1.04) rotate(2deg);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}
.review-card-pop-in {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  animation: reviewCardPopIn 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.review-card-loaded {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  animation: none !important;
}

/* Notes skeleton styles */
.skeleton-note {
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb;
  box-shadow: none;
  min-height: 120px;
  opacity: 1 !important;
  animation: skeletonPulse 1.2s infinite ease-in-out;
  border-radius: 1rem;
  padding: 1.2rem 1.4rem 1.3rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.skeleton-note-title {
  width: 60%;
  height: 1.3rem;
  background: #e5e7eb;
  border-radius: 0.5rem;
  margin-bottom: 0.7rem;
}
.skeleton-note-body {
  width: 90%;
  height: 2.1rem;
  background: #e5e7eb;
  border-radius: 0.5rem;
  margin-bottom: 0.7rem;
}
.skeleton-note-tags {
  width: 40%;
  height: 1.1rem;
  background: #e5e7eb;
  border-radius: 0.5rem;
  margin-bottom: 0.2rem;
}

.inbox-header {
  color: #2563eb !important;
}

/* Empty State Card Styles */
.empty-state-card {
  max-width: 380px;
  margin: 2rem auto;
  background: #fff;
  border-radius: 1.1rem;
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.07),
    0 1.5px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid #e5e7eb;
  padding: 2.5rem 1.5rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.empty-state-card iconify-icon {
  margin-bottom: 0.5rem;
}
.empty-state-card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 0.2rem;
}
.empty-state-card p {
  font-size: 0.98rem;
  color: #64748b;
  margin-bottom: 0.2rem;
}

.task-condensed.done {
  opacity: 0.45;
}
.task-condensed.done .task-title,
.task-condensed.done input[type="text"] {
  text-decoration: line-through;
}

/* Filter Chips and Popover Menu */
.filter-popover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 1.2rem;
  min-width: 260px;
  z-index: 50;
}

/* Active Filter Chip Styles */
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s, border-color 0.15s;
}

.filter-chip:hover {
  background-color: #dbeafe;
}

.filter-chip button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.8;
}

.filter-chip button:hover {
  opacity: 1;
}

/* Filter button highlight when filters are active */
.filter-button-active {
  background-color: #eff6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
}

.filter-button-active:hover {
  background-color: #dbeafe !important;
}

/* Overlapping Avatars Styles */
.assignee-stack {
  display: flex;
  align-items: center;
  position: relative;
}

.assignee-stack img {
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
  border-radius: 50% !important;
  object-fit: cover;
  flex-shrink: 0; /* Prevent squashing */
}

/* Only apply overlapping when there are actually multiple items */
.assignee-stack > img + img,
.assignee-stack > img + .assignee-overflow,
.assignee-stack > iconify-icon + img,
.assignee-stack > iconify-icon + .assignee-overflow {
  margin-left: -8px;
  z-index: 0;
}

.assignee-stack > img:nth-child(2),
.assignee-stack > iconify-icon:nth-child(2) {
  z-index: 2;
}
.assignee-stack > img:nth-child(3),
.assignee-stack > iconify-icon:nth-child(3) {
  z-index: 1;
}

.assignee-overflow {
  background: #6366f1;
  color: white;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 600;
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -8px;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 0;
  flex-shrink: 0;
}

/* Review Card Avatars - Larger */
.review-card .assignee-stack img,
.review-card .assignee-stack iconify-icon {
  width: 32px;
  height: 32px;
  font-size: 32px;
}

.review-card .assignee-stack > img + img,
.review-card .assignee-stack > img + .assignee-overflow,
.review-card .assignee-stack > iconify-icon + img,
.review-card .assignee-stack > iconify-icon + .assignee-overflow {
  margin-left: -10px;
}

.review-card .assignee-overflow {
  min-width: 32px;
  height: 32px;
  font-size: 0.8rem;
  margin-left: -10px;
}

/* Task Row and Task Card Avatars - Medium */
.task-row .assignee-stack img,
.task-row .assignee-stack iconify-icon,
.task-card .assignee-stack img,
.task-card .assignee-stack iconify-icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
}

/* Condensed View Avatars - Small */
.task-condensed .assignee-stack img {
  width: 20px;
  height: 20px;
}

.task-condensed .assignee-stack iconify-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
}

.task-condensed .assignee-stack > img + img,
.task-condensed .assignee-stack > img + .assignee-overflow,
.task-condensed .assignee-stack > iconify-icon + img,
.task-condensed .assignee-stack > iconify-icon + .assignee-overflow {
  margin-left: -6px;
}

.task-condensed .assignee-overflow {
  min-width: 20px;
  height: 20px;
  font-size: 0.65rem;
  margin-left: -6px;
}

/* Hide assignee names when multiple assignees (except review cards) */
.task-row .assignee.multiple-assignees span,
.task-card .assignee.multiple-assignees span,
.task-condensed .assignee.multiple-assignees span {
  display: none;
}

.task-card .task-title,
.task-row input[type="text"] {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-wrap: break-word;
  word-break: break-word;
}

.task-card {
  min-height: 180px; /* Increase to accommodate longer titles */
}

.task-card .task-title {
  max-height: none !important; /* Remove height restriction */
  height: auto !important;
}

/* Condensed view improvements */
.task-condensed input[type="text"] {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  height: auto !important;
  min-height: 2.5em;
  line-height: 1.4;
}

/* Modal styles */
.task-detail-modal {
  backdrop-filter: blur(8px);
}

.task-detail-modal textarea {
  font-family: inherit;
}

.task-detail-modal .priority-button {
  min-width: 120px;
}

/* Remove inline editing cursor */
.task-title,
.task-row input[type="text"],
.task-card input[type="text"],
.task-card textarea {
  cursor: pointer !important;
  pointer-events: none !important; /* Disable editing */
}

/* Re-enable pointer events for checkboxes and other interactive elements */
.task-row input[type="checkbox"],
.task-card input[type="checkbox"],
.pill,
.assignee-stack {
  pointer-events: auto !important;
}

/* Visual feedback for long press areas */
.task-row:hover,
.task-card:hover {
  transform: scale(1.01);
  transition: transform 0.15s ease;
}

.task-condensed:hover {
  background-color: #f8fafc;
}

/* Remove inline editing capabilities and improve title display */
.task-title,
.task-row .task-title,
.task-card .task-title {
  cursor: pointer !important;
  pointer-events: auto !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  word-wrap: break-word;
  word-break: break-word;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Remove input styling for read-only titles */
.task-title input,
.task-row input[type="text"],
.task-card input[type="text"],
.task-card textarea {
  display: none !important; /* Hide input elements completely */
}

/* Grid view title improvements */
.task-card .task-title {
  min-height: auto !important;
  max-height: none !important;
  height: auto !important;
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.4;
  margin-top: 10px;
  padding: 8px 4px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.task-card .task-title:hover {
  background-color: rgba(99, 102, 241, 0.05);
}

/* Condensed view improvements */
.task-condensed .task-title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

.task-condensed .task-title:hover {
  background-color: rgba(99, 102, 241, 0.05);
}

/* List view improvements */
.task-row .task-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  padding: 4px 8px;
  border-radius: 4px;
  flex: 1;
  min-width: 0;
  transition: background-color 0.15s ease;
}

.task-row .task-title:hover {
  background-color: rgba(99, 102, 241, 0.05);
}

/* Review card title improvements */
.review-card h3 {
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
  transition: color 0.15s ease;
}

.review-card h3:hover {
  color: #6366f1;
}

/* Visual feedback for long press areas */
.task-row:active,
.task-card:active,
.review-card h3:active {
  transform: scale(0.98);
  transition: transform 0.1s ease;
}

/* Ensure proper spacing in condensed view */
.task-condensed {
  min-height: 3.5em;
  align-items: flex-start;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Grid view height adjustments */
.task-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.task-header {
  flex-shrink: 0;
}

.task-body {
  margin-top: auto;
  flex-shrink: 0;
}

.task-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  flex-shrink: 0;
}

.task-card .task-meta-row {
  margin-top: auto; /* Push meta to bottom */
  position: relative;
  bottom: auto;
  left: auto;
  right: auto;
}

/* Long press indicator animation */
@keyframes longPressIndicator {
  0% {
    transform: scale(1);
    background-color: transparent;
  }
  100% {
    transform: scale(1.02);
    background-color: rgba(99, 102, 241, 0.1);
  }
}

.task-title.long-press-active,
.review-card h3.long-press-active {
  animation: longPressIndicator 0.8s ease-in-out infinite alternate;
}

/* Task Detail Modal Styles */
.task-detail-modal {
  backdrop-filter: blur(8px);
  z-index: 9999;
}

.task-detail-modal textarea {
  font-family: inherit;
  resize: vertical;
}

.task-detail-modal .priority-button {
  min-width: 120px;
  text-align: left;
}

/* Toggle switch styles for modal */
.task-detail-modal input[type="checkbox"]:checked + div {
  background-color: #3b82f6;
}

.task-detail-modal input[type="checkbox"]:checked + div:after {
  transform: translateX(100%);
  border-color: #3b82f6;
}

/* ─── PULSE SWITCHER STYLES ─────────────────────────────── */
/* Pulse switcher badge - minimal styling to match chip-outline */
.chip.chip-outline {
  position: relative;
}

/* Pulse switcher dropdown smooth scroll */
.pulse-switcher-dropdown {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.pulse-switcher-dropdown::-webkit-scrollbar {
  width: 6px;
}

.pulse-switcher-dropdown::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 0 0 0.5rem 0;
}

.pulse-switcher-dropdown::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.pulse-switcher-dropdown::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Mobile responsive adjustments for pulse switcher */
@media (max-width: 640px) {
  /* Make dropdown full width on mobile */
  .pulse-switcher-dropdown {
    left: 0 !important;
    right: 0 !important;
    width: calc(100vw - 2rem) !important;
    max-width: none !important;
  }
}

/* Pulse dropdown item styling - simple and clean */
.pulse-switcher-dropdown button {
  transition: background-color 0.15s ease;
}


/* Assignee chips in modal */
.task-detail-modal .assignee-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e40af;
}

.task-detail-modal .assignee-chip img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
}

.task-detail-modal .assignee-chip button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
  transition: color 0.15s ease;
  padding: 0;
  margin: 0;
  height: 1rem;
  width: 1rem;
  min-height: 1rem;
  min-width: 1rem;
}

.task-detail-modal .assignee-chip button:hover {
  color: #1d4ed8;
}

.task-detail-modal .assignee-chip button iconify-icon {
  line-height: 1;
  display: block;
}

/* Modal button styles */
.task-detail-modal .btn-primary {
  background-color: var(--primary, #6366f1);
  color: white;
  border: none;
  padding: 0.625rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: background-color 0.15s ease;
}

.task-detail-modal .btn-primary:hover:not(:disabled) {
  background-color: var(--primary-hover, #4f46e5);
}

.task-detail-modal .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.task-detail-modal .btn-secondary {
  background-color: #e5e7eb;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 0.625rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: background-color 0.15s ease;
}

.task-detail-modal .btn-secondary:hover {
  background-color: #d1d5db;
}

.task-detail-modal .btn-danger {
  background-color: white;
  color: #dc2626;
  border: 1px solid #fca5a5;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.15s ease;
}

.task-detail-modal .btn-danger:hover {
  background-color: #fef2f2;
  border-color: #f87171;
}

/* Loading spinner */
.task-detail-modal .loading-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Responsive adjustments for modal */
@media (max-width: 640px) {
  .task-detail-modal .modal-content {
    margin: 1rem;
    max-width: calc(100vw - 1rem);
  }

  .task-detail-modal .grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

.task-detail-modal button[aria-label="Close"],
.task-detail-modal .close-button,
.task-detail-modal button:has(iconify-icon[icon="heroicons:x-mark"]) {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* Enhanced drag and drop visual feedback */

/* Task being dragged */
.task-row.dragging,
.task-card.dragging,
.task-condensed.dragging {
  opacity: 0.3 !important;
  transform: rotate(1deg) scale(0.98) !important;
  z-index: 1000 !important;
  pointer-events: none !important;
  transition: none !important;
}

/* Task ready to be dragged (after long press) */
.task-row.drag-ready,
.task-card.drag-ready,
.task-condensed.drag-ready {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* List container when being dragged over */
.my-list.drag-over {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border: 2px dashed #3b82f6 !important;
  transform: scale(1.01) !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}

/* Enhanced drop zone indicator */
.my-list.drag-over::before {
  content: "Drop task here";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 500;
  font-size: 0.875rem;
  border: 1px solid #3b82f6;
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 10;
}

/* List header drag over effect */
.my-list.drag-over header {
  background: rgba(59, 130, 246, 0.1);
  border-radius: 0.5rem;
}

/* Delete zone enhancements */
.delete-hover {
  background: #dc2626 !important;
  transform: scale(1.1) !important;
  animation: deleteZonePulse 0.5s ease-in-out infinite alternate;
}

@keyframes deleteZonePulse {
  from {
    background: #dc2626 !important;
  }
  to {
    background: #b91c1c !important;
  }
}

/* Drag ghost image styling */
.task-row::-webkit-drag-ghost,
.task-card::-webkit-drag-ghost,
.task-condensed::-webkit-drag-ghost {
  opacity: 0.8;
  transform: rotate(2deg);
}

/* Cursor changes during drag */
.task-row.dragging *,
.task-card.dragging *,
.task-condensed.dragging * {
  cursor: grabbing !important;
}

/* Prevent selection during drag */
.task-row.dragging,
.task-card.dragging,
.task-condensed.dragging {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Visual feedback for drag ready state */
@keyframes dragReady {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    transform: scale(1.01);
  }
}

.drag-ready {
  animation: dragReady 0.3s ease-in-out;
}

/* Improve visual hierarchy during drag */
body.dragging-active {
  cursor: grabbing;
}

body.dragging-active .my-list:not(.drag-over) {
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

body.dragging-active .my-list.drag-over {
  opacity: 1;
  z-index: 10;
}

/* Task drop zones within lists */
.my-list ul {
  position: relative;
  min-height: 3rem; /* Ensure there's always a drop zone */
}

.my-list.drag-over ul::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2rem;
  background: linear-gradient(to bottom, transparent, rgba(59, 130, 246, 0.1));
  border: 2px dashed transparent;
  border-bottom-color: #3b82f6;
  border-radius: 0 0 0.5rem 0.5rem;
  pointer-events: none;
}

/* Empty list drop zone */
.my-list ul:empty.drag-over::before {
  content: "Drop your task here";
  display: block;
  padding: 2rem;
  text-align: center;
  color: #3b82f6;
  font-weight: 500;
  border: 2px dashed #3b82f6;
  border-radius: 0.5rem;
  background: rgba(59, 130, 246, 0.05);
  margin: 0.5rem;
}

/* Dragging state for body */
body.task-dragging {
  cursor: grabbing;
}

/* Ensure proper touch handling for scroll containers */
main[style*="overflow-y-auto"] {
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch;
}

/* Ensure task elements don't interfere with parent scrolling */
.task-row,
.task-card,
.review-card {
  touch-action: manipulation;
}

/* Ensure assignee elements don't interfere with scrolling */
.assignee-stack,
.assignee-stack * {
  touch-action: manipulation;
}

/* Ensure pills and buttons don't interfere with scrolling */
.pill,
button {
  touch-action: manipulation;
}

/* Allow touch scrolling on task lists */
.my-list {
  touch-action: pan-y;
}

/* Ensure task rows don't interfere with parent scrolling */
.task-row,
.task-card {
  touch-action: manipulation;
}

body.task-dragging .my-list:not(.drag-over) {
  opacity: 0.6;
}

/* Remove button hover enhancement */
.delete-zone-visible {
  animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
  from {
    transform: translate(-50%, -100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

[draggable="true"] {
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Dragging state improvements */
.task-row.dragging,
.task-card.dragging,
.task-condensed.dragging {
  opacity: 0.4 !important;
  transform: scale(0.98);
  pointer-events: none;
  transition: none !important;
}

/* Drag hint state (400ms into long press) */
.drag-hint {
  cursor: grab !important;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2) !important;
  transform: scale(1.01) !important;
  z-index: 998 !important;
  transition: all 0.2s ease;
}

/* Drag ready state (after long press) */
.drag-ready {
  cursor: grabbing !important;
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3) !important;
  transform: scale(1.02) !important;
  z-index: 999 !important;
  animation: dragReadyPulse 0.6s ease-in-out infinite alternate;
}

@keyframes dragReadyPulse {
  0% {
    transform: scale(1.02);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
  }
  100% {
    transform: scale(1.04);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.4);
  }
}

/* List drag over state */
.my-list.drag-over {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  border: 2px dashed #3b82f6 !important;
  position: relative;
  transition: all 0.2s ease;
}

.my-list.drag-over::after {
  content: "Drop task here";
  position: absolute;
  top: 15px;
  right: 15px;
  background: #3b82f6;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  pointer-events: none;
  z-index: 100;
  animation: dropHintFade 1.5s ease-in-out infinite;
}

@keyframes dropHintPulse {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

/* Delete zone improvements */
.delete-zone-visible {
  transition: all 0.2s ease;
  cursor: move;
}

.delete-zone-visible.delete-hover {
  background: #dc2626 !important;
  transform: scale(1.15) translate(-50%, 0) !important;
  box-shadow: 0 8px 32px rgba(220, 38, 38, 0.4) !important;
}

/* Prevent accidental selections during drag */
body.task-dragging {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grabbing !important;
}

body.task-dragging * {
  cursor: grabbing !important;
}

body.task-dragging::before,
body.task-dragging::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  height: 50px;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.2s ease;
}

body.task-dragging::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(59, 130, 246, 0.1), transparent);
}

body.task-dragging::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(59, 130, 246, 0.1), transparent);
}

/* Show scroll indicators when near edges */
body.task-dragging.scroll-top::before,
body.task-dragging.scroll-bottom::after {
  opacity: 1;
}

/* Ensure task items are properly positioned for drag */
.task-row,
.task-card,
.task-condensed {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Improve drop zones visibility */
.my-list ul {
  min-height: 60px;
  position: relative;
  transition: background-color 0.2s ease;
}

.my-list.drag-over ul {
  background-color: rgba(59, 130, 246, 0.05);
  border-radius: 0.5rem;
}

/* Empty list drop indicator */
.my-list ul:empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 0.875rem;
}

.my-list.drag-over ul:empty::before {
  content: "Drop your task here";
  padding: 1.5rem;
  border: 2px dashed #3b82f6;
  border-radius: 0.5rem;
  background: rgba(59, 130, 246, 0.1);
  color: #3b82f6;
  font-weight: 500;
  width: 100%;
  text-align: center;
}

/* Disable pointer events on children during drag to prevent interference */
.dragging * {
  pointer-events: none !important;
}

/* Fix z-index stacking during drag */
.task-row.drag-ready,
.task-card.drag-ready,
.task-condensed.drag-ready {
  z-index: 999 !important;
}

.delete-zone-visible {
  z-index: 9999 !important;
}

[data-task-id] {
  -webkit-user-drag: element;
  touch-action: pan-y;
  cursor: grab;
}

[data-task-id]:active {
  cursor: grabbing;
}

.task-row,
.task-card,
.task-condensed,
.review-card {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.assignee-stack img,
.assignee-stack iconify-icon,
.review-card img {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Allow text selection only in input fields */
input,
textarea,
[contenteditable] {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

.task-row,
.task-card,
.task-condensed {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Visual feedback for valid drop targets within list */
.my-list ul li[data-task-id]:hover {
  background-color: rgba(59, 130, 246, 0.05) !important;
}

.my-list.drag-over ul li[data-task-id] {
  border: 1px dashed transparent;
  transition: border-color 0.2s ease;
}

.my-list.drag-over ul li[data-task-id]:hover {
  border-color: #3b82f6 !important;
  background-color: rgba(59, 130, 246, 0.1) !important;
}

/* 12. FIX: Ensure proper layering during drag */
.dragging {
  z-index: 1000 !important;
}

.drag-ready {
  z-index: 999 !important;
}

.delete-zone-visible {
  z-index: 9999 !important;
}

.my-list.drag-over {
  z-index: 10 !important;
}

/* 10. PERFORMANCE: GPU acceleration for smoother animations */
.task-row,
.task-card,
.task-condensed,
.drag-ready,
.dragging,
.my-list.drag-over,
.delete-zone-visible {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Cleanup after animations */
.task-row:not(.dragging):not(.drag-ready),
.task-card:not(.dragging):not(.drag-ready),
.task-condensed:not(.dragging):not(.drag-ready) {
  will-change: auto;
}

/* 8. MOBILE-SPECIFIC: Enhanced touch handling */
@media (max-width: 768px) {
  /* Increase touch targets */
  .assignee-stack {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Better drag ready feedback on mobile */
  .drag-ready {
    animation: mobileDragReady 0.4s ease-in-out infinite alternate !important;
  }

  @keyframes mobileDragReady {
    0% {
      transform: scale(1.02);
      filter: brightness(1.1);
    }
    100% {
      transform: scale(1.05);
      filter: brightness(1.2);
    }
  }
}

.task-row,
.task-card,
.task-condensed {
  touch-action: auto !important; /* Changed from pan-y */
}

/* Disable webkit drag on touch devices */
@media (pointer: coarse) {
  [data-task-id] {
    -webkit-user-drag: none !important;
  }

  .task-row,
  .task-card,
  .task-condensed {
    -webkit-user-drag: none !important;
  }
}

/* Ensure proper touch handling on mobile */
@media (max-width: 768px) {
  .task-row,
  .task-card,
  .task-condensed {
    touch-action: auto !important;
    -webkit-user-drag: none !important;
  }
}

/* Drop position indicators */
.drop-above::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: #3b82f6;
  z-index: 100;
  border-radius: 2px;
}

.drop-below::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: #3b82f6;
  z-index: 100;
  border-radius: 2px;
}

[data-task-id] {
  position: relative;
}

/* Fix task detail modal layout */
.task-detail-modal .max-h-\[90vh\] {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

/* Ensure scrollable content doesn't hide buttons */
.task-detail-modal .overflow-y-auto {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* Make footer sticky at bottom */
.task-detail-modal > div > div:last-child {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  z-index: 10;
}

/* Ensure proper padding and visibility */
.task-detail-modal .px-6.py-4.border-t {
  padding: 1rem 1.5rem;
  background: #f9fafb;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .task-detail-modal .max-h-\[90vh\] {
    max-height: calc(100vh - 1rem);
    margin: 0rem;
  }

  .task-detail-modal .overflow-y-auto {
    max-height: calc(100vh - 180px); /* Account for header and footer */
  }
}

.my-list header {
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.95);
}

.my-list header:hover {
  background: linear-gradient(135deg, #f3f4f6 0%, #ffffff 100%);
}

/* Ensure all header items are vertically centered */
.my-list header > * {
  display: flex;
  align-items: center;
}

/* Badge styling for task count */
.my-list header span[x-text*="items.filter"] {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #1e40af;
  border: 1px solid #bfdbfe;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Special styling for inbox header */
.my-list header:has(.inbox-header) {
  background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

/* Ensure consistent icon sizing and alignment */
.my-list header iconify-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Improved modal footer button layouts */
.task-detail-modal .px-6.py-4.border-t,
.list-edit-modal-footer {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
}

.task-detail-modal .px-6.py-4.border-t button[onclick*="delete"],
.list-edit-modal-footer button[onclick*="delete"],
.task-detail-modal
  .px-6.py-4.border-t
  button:has(iconify-icon[icon="heroicons:trash"]),
.list-edit-modal-footer button:has(iconify-icon[icon="heroicons:trash"]) {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  /* Ensure icon and text are centered vertically */
  line-height: 1.2;
  min-height: 2.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.task-detail-modal .px-6.py-4.border-t button[onclick*="delete"] iconify-icon,
.list-edit-modal-footer button[onclick*="delete"] iconify-icon,
.task-detail-modal
  .px-6.py-4.border-t
  button:has(iconify-icon[icon="heroicons:trash"])
  iconify-icon,
.list-edit-modal-footer
  button:has(iconify-icon[icon="heroicons:trash"])
  iconify-icon {
  vertical-align: middle;
  margin-right: 0.25rem;
  margin-bottom: -2px; /* Nudge icon down for alignment */
  display: inline-flex;
  align-items: center;
}

/* Responsive: Delete button at base on small screens */
@media (max-width: 520px) {
  .task-detail-modal .px-6.py-4.border-t,
  .list-edit-modal-footer {
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }
  .task-detail-modal .px-6.py-4.border-t > button:first-child,
  .list-edit-modal-footer > button:first-child {
    width: 100%;
    margin-bottom: 0;
    order: 2; /* Move delete button to base */
  }

  .task-detail-modal .px-6.py-4.border-t > div:last-child,
  .list-edit-modal-footer > div:last-child {
    width: 100%;
    display: flex;
    gap: 0.75rem;
  }

  .task-detail-modal .px-6.py-4.border-t > div:last-child button,
  .list-edit-modal-footer > div:last-child button {
    flex: 1;
  }
}

/* Center the delete button text/icon when full width at base on small screens */
@media (max-width: 520px) {
  .task-detail-modal .px-6.py-4.border-t > button:first-child,
  .list-edit-modal-footer > button:first-child {
    justify-content: center !important;
    text-align: center !important;
  }
}

/* Very small screens */
@media (max-width: 380px) {
  .task-detail-modal .px-6.py-4.border-t,
  .list-edit-modal-footer {
    padding: 1rem;
  }

  .task-detail-modal .px-6.py-4.border-t button,
  .list-edit-modal-footer button {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
  }
}

/* Improved grid/card view meta layout */
.task-card .task-meta-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding-top: 0.75rem;
  border-top: 1px solid #f3f4f6;
  margin-top: auto;
}

/* Assignee row */
.task-card .task-meta-row .assignee-stack {
  order: 1;
}

/* Pills container - flex row for due and priority */
.task-card .task-meta-row > div:last-child {
  order: 2;
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Due date pill - takes available space */
.task-card .pill.date {
  flex: 1;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.85rem;
  min-height: 32px;
}

/* Priority pill - fixed width */
.task-card .pill.priority {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Card container adjustments for better layout */
.task-card {
  display: flex;
  flex-direction: column;
  min-height: 180px;
  gap: 0.5rem;
  padding: 1rem;
}

/* Title should grow but not too much */
.task-card .task-title {
  flex: 1 1 auto;
  max-height: 120px;
  overflow-y: auto;
  margin-bottom: 0.5rem;
}

/* For wider cards on larger screens */
@media (min-width: 640px) {
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}

/* For narrow cards (mobile or when many columns) */
@media (max-width: 640px), (max-width: 1024px) and (min-width: 641px) {
  .task-card {
    min-height: 160px;
  }

  .task-card .task-meta-row {
    gap: 0.5rem;
  }

  /* Make pills more compact on small cards */
  .task-card .pill.date {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    min-height: 28px;
  }

  .task-card .pill.priority {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
}

.bg-gradient-to-r {
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ─── STATUS CIRCLE STYLES ─────────────────────────────── */
.status-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
  position: relative;
  border: 2px solid transparent;
}

.status-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.status-circle:active {
  transform: scale(0.95);
}

/* TODO Status - Gray circle */
.status-todo {
  background-color: #f3f4f6;
  border-color: #d1d5db;
  color: #6b7280;
}

.status-todo:hover {
  background-color: #e5e7eb;
  border-color: #9ca3af;
}

/* IN_PROGRESS Status - Yellow half-filled circle */
.status-in-progress {
  background: conic-gradient(from 0deg, #fbbf24 0deg 180deg, #f3f4f6 180deg 360deg);
  border-color: #f59e0b;
  color: #92400e;
}

.status-in-progress:hover {
  background: conic-gradient(from 0deg, #f59e0b 0deg 180deg, #e5e7eb 180deg 360deg);
  border-color: #d97706;
}

/* COMPLETED Status - Green filled circle */
.status-completed {
  background-color: #10b981;
  border-color: #059669;
  color: #ffffff;
}

.status-completed:hover {
  background-color: #059669;
  border-color: #047857;
}


/* Grid view status circle positioning */
.task-card .status-circle {
  margin-top: 2px;
}

/* List view status circle positioning */
.task-row .status-circle {
  margin-top: 2px;
}

/* Ensure status circles don't interfere with drag operations */
.status-circle {
  pointer-events: auto;
  z-index: 2;
}

/* Animation for status changes */
@keyframes statusChange {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.status-circle.status-changing {
  animation: statusChange 0.3s ease-in-out;
}

/* Mobile touch improvements */
@media (max-width: 768px) {
  .status-circle {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
  }
  
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .status-todo {
    background-color: #ffffff;
    border-color: #000000;
    color: #000000;
  }
  
  .status-in-progress {
    background: conic-gradient(from 0deg, #ffa500 0deg 180deg, #ffffff 180deg 360deg);
    border-color: #000000;
    color: #000000;
  }
  
  .status-completed {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
  }
}

 .task-card {
   height: auto !important;  
 }
/* End: 1_tasks.css */

/* Begin: 2_insight.css */
/* Insight Page Styles */
.onpage-insight {
  background: linear-gradient(135deg, #f0f4ff 0%, #f8fafc 50%, #faf5ff 100%);
}

/* Native app header adjustments for insight page */
.onpage-insight .under-header {
  padding-top: calc(112px + var(--native-app-top-margin)) !important;
  margin-top: calc(0px - var(--native-app-top-margin)) !important;
}

/* Safe area for mobile */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ============================================================================
   AI CHAT SECTION - ENHANCED
   ============================================================================ */

/* Chat container with gradient fade at top/bottom */
.ai-chat-messages {
  position: relative;
  max-height: 28rem; /* Increased from 20rem (320px) to 28rem (448px) */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

/* Gradient fade overlays for better scroll indication */
.ai-chat-messages::before,
.ai-chat-messages::after {
  content: '';
  position: sticky;
  left: 0;
  right: 0;
  height: 24px;
  pointer-events: none;
  z-index: 1;
}

.ai-chat-messages::before {
  top: 0;
  background: linear-gradient(to bottom, white, transparent);
}

.ai-chat-messages::after {
  bottom: 0;
  background: linear-gradient(to top, white, transparent);
}

/* Custom scrollbar styling */
.ai-chat-messages::-webkit-scrollbar {
  width: 6px;
}

.ai-chat-messages::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
  transition: background 0.2s;
}

.ai-chat-messages::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Message bubbles - User messages */
.ai-chat-messages [class*="justify-end"] > div {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
  border-bottom-right-radius: 0.375rem; /* Slight corner cut */
}

/* Message bubbles - AI messages */
.ai-chat-messages [class*="justify-start"] > div {
  background: #f1f5f9;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  border-bottom-left-radius: 0.375rem; /* Slight corner cut */
}

/* Chat input area - Enhanced focus */
.ai-chat-input-wrapper {
  position: relative;
  border-top: 1px solid #e2e8f0;
  background: white;
  padding: 1rem;
  transition: box-shadow 0.2s;
}

.ai-chat-input-wrapper:focus-within {
  box-shadow: 0 -4px 12px rgba(99, 102, 241, 0.08);
}

.ai-chat-input-wrapper input {
  transition: all 0.2s;
}

.ai-chat-input-wrapper input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Send button enhanced states */
.ai-chat-send-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-chat-send-btn:hover:not(:disabled) {
  background-color: #4f46e5;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.ai-chat-send-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.3);
}

/* Typing indicator animation */
@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-bounce {
  animation: bounce 1.4s infinite ease-in-out both;
}

.animate-bounce:nth-child(2) {
  animation-delay: 0.15s;
}

.animate-bounce:nth-child(3) {
  animation-delay: 0.3s;
}

/* ============================================================================
   SCOUT RECOMMENDATIONS SECTION
   ============================================================================ */

/* Recommendation action buttons - Enhanced hover */
.scout-action-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.scout-action-btn:hover {
  border-color: #c4b5fd;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
  transform: translateY(-2px);
}

.scout-action-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.15);
}

/* Icon container in recommendation buttons */
.scout-action-btn .w-10 {
  transition: transform 0.2s;
}

.scout-action-btn:hover .w-10 {
  transform: scale(1.1);
}

/* Mobile optimizations for recommendations */
@media (max-width: 640px) {
  .scout-recommendations .grid {
    gap: 0.75rem;
  }
  
  .scout-action-btn {
    padding: 0.75rem;
  }
  
  .scout-action-btn h4 {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  
  .scout-action-btn p {
    font-size: 0.75rem;
    line-height: 1rem;
  }
  
  .scout-action-btn .w-10 {
    width: 2rem;
    height: 2rem;
  }
}

/* ============================================================================
   CONTENT CARDS - TIGHTENED SPACING
   ============================================================================ */

/* Reduce vertical spacing between cards */
.onpage-insight .space-y-6 > * + * {
  margin-top: 1rem;
}

/* Card entrance animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.onpage-insight .space-y-6 > * {
  animation: fadeInUp 0.3s ease-out backwards;
}

.onpage-insight .space-y-6 > *:nth-child(1) { animation-delay: 0.05s; }
.onpage-insight .space-y-6 > *:nth-child(2) { animation-delay: 0.1s; }
.onpage-insight .space-y-6 > *:nth-child(3) { animation-delay: 0.15s; }
.onpage-insight .space-y-6 > *:nth-child(4) { animation-delay: 0.2s; }
.onpage-insight .space-y-6 > *:nth-child(5) { animation-delay: 0.25s; }

/* Mobile card padding optimization */
@media (max-width: 640px) {
  .onpage-insight [class*="rounded-2xl"].p-6 {
    padding: 1rem;
  }
  
  .onpage-insight [class*="rounded-3xl"].p-8 {
    padding: 1.5rem;
  }
}

/* ============================================================================
   HERO SECTION - MOBILE OPTIMIZATION
   ============================================================================ */

@media (max-width: 640px) {
  .onpage-insight .px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .onpage-insight h1 {
    font-size: 1.75rem; /* Slightly smaller than text-3xl */
    line-height: 2rem;
  }
  
  /* Hero pattern circles - slightly smaller on mobile */
  .onpage-insight [class*="rounded-3xl"] .absolute.w-32 {
    width: 6rem;
    height: 6rem;
  }
  
  .onpage-insight [class*="rounded-3xl"] .absolute.w-24 {
    width: 4.5rem;
    height: 4.5rem;
  }
  
  .onpage-insight [class*="rounded-3xl"] .absolute.w-40 {
    width: 8rem;
    height: 8rem;
  }
}

/* ============================================================================
   ACTION BUTTONS & INTERACTIVE ELEMENTS
   ============================================================================ */

/* Bookmark button states */
.insight-bookmark-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.insight-bookmark-btn:hover {
  transform: scale(1.15);
  background-color: #fef3c7;
}

.insight-bookmark-btn.bookmarked {
  color: #d97706 !important;
}

/* Feedback buttons hover states */
.insight-feedback-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.insight-feedback-btn:hover {
  transform: scale(1.1);
}

/* Primary action button (Mark Complete) */
.insight-complete-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.insight-complete-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.insight-complete-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   SOURCE LINKS & NAVIGATION
   ============================================================================ */

.insight-source-link {
  background-color: var(--primary-ultra);
  color: var(--primary);
  border: 1px solid var(--primary-light);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.insight-source-link:hover {
  background-color: var(--primary-xlight);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 0, 224, 0.15);
}

/* ============================================================================
   LOADING & ERROR STATES
   ============================================================================ */

.insight-loading-spinner {
  border-color: var(--primary-xlight);
  border-top-color: var(--primary);
}

.insight-error-state {
  background-color: var(--bg-soft);
}

/* Loading skeleton animation */
@keyframes shimmer {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

.insight-loading-skeleton {
  animation: shimmer 1.5s infinite linear;
  background: linear-gradient(
    to right,
    #f1f5f9 0%,
    #e2e8f0 20%,
    #f1f5f9 40%,
    #f1f5f9 100%
  );
  background-size: 800px 104px;
}

/* ============================================================================
   ACCESSIBILITY & FOCUS STATES
   ============================================================================ */

/* Enhanced focus indicators */
.onpage-insight button:focus-visible,
.onpage-insight a:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .onpage-insight * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
  .onpage-insight .space-y-6 > * + * {
    margin-top: 1.25rem;
  }
  
  .ai-chat-messages {
    max-height: 24rem;
  }
}

/* Large screens - slightly more breathing room */
@media (min-width: 1280px) {
  .onpage-insight .space-y-6 > * + * {
    margin-top: 1.5rem;
  }
  
  .ai-chat-messages {
    max-height: 32rem;
  }
}

/* ============================================================================
   HERO SECTION - CLEAN & WORKING
   ============================================================================ */

.insight-hero {
  position: relative;
  background-size: 200% 200%;
  animation: gradientMove 8s ease infinite;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
  margin-left: 5px;
  margin-right: 5px;
}

@keyframes gradientMove {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Animated background with moving shapes */
.hero-bg-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.4;
  mix-blend-mode: overlay;
}

.hero-bg-layer::before,
.hero-bg-layer::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent 90%);
    box-shadow: 0 8px 32px 0 rgba(74, 0, 224, 0.36), 0 1.5px 8px 0 rgba(0,0,0,0.30);
  animation: float 30s ease-in-out infinite;
}

.hero-bg-layer::before {
  width: 300px;
  height: 300px;
  top: -150px;
  left: -150px;
  animation-delay: 0s;
}

.hero-bg-layer::after {
  width: 400px;
  height: 400px;
  bottom: -200px;
  right: -200px;
  animation-delay: 7s;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(100px, -100px) scale(1.2); }
  66% { transform: translate(-80px, 80px) scale(0.9); }
}

/* Content layer */
.hero-content {
  position: relative;
  z-index: 10;
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Icon */
.hero-icon {
  width: 3.5rem;
  height: 3.5rem;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 3s ease-in-out infinite;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
  50% { transform: scale(1.05); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }
}

/* Badges */
.hero-type-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.4); /* Increased from 0.3 */
  backdrop-filter: blur(10px);
  border-radius: 9999px;
  font-size: 0.875rem; /* Increased from 0.75rem */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1.5px solid rgba(255, 255, 255, 0.5); /* Stronger border */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Added shadow for contrast */
}

.hero-status-badge {
  display: inline-block;
  padding: 0.5rem 0.875rem; /* Slightly bigger padding */
  background: rgba(255, 255, 255, 0.35); /* Increased from 0.25 */
  backdrop-filter: blur(10px);
  border-radius: 9999px;
  font-size: 0.875rem; /* Increased from 0.75rem */
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.4); /* Stronger border */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); /* Added shadow */
}

/* Title */
.hero-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

/* Stats */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.9375rem; /* Increased from 0.875rem */
}

.hero-stat {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 1); /* Full white instead of 0.95 */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* Stronger shadow */
  font-weight: 600; /* Increased from 500 */
}

.hero-link {
  background: rgba(255, 255, 255, 0.25); /* Increased from 0.15 */
  padding: 0.5rem 0.875rem; /* Bigger padding */
  border-radius: 9999px;
  backdrop-filter: blur(10px);
  transition: all 0.2s;
  font-weight: 600; /* Added weight */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* Added shadow */
}

.hero-link:hover {
  background: rgba(255, 255, 255, 0.35); /* Increased from 0.25 */
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Added hover shadow */
}

/* Mobile */
@media (max-width: 640px) {
  .insight-hero {
    padding: 3rem 2rem !important;
    min-height: 280px !important;
  }
  
  .hero-icon {
    width: 3rem;
    height: 3rem;
  }
  
  .hero-icon iconify-icon {
    font-size: 1.5rem;
  }
  
  .hero-title {
    font-size: 1.75rem;
  }
  
  .hero-type-badge {
    font-size: 0.8125rem; /* Slightly bigger on mobile */
  }
  
  .hero-status-badge {
    font-size: 0.8125rem; /* Slightly bigger on mobile */
  }
  
  .hero-stats {
    font-size: 0.9375rem; /* Keep good size on mobile */
  }
}

/* Desktop */
@media (min-width: 640px) {
  .hero-title {
    font-size: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .hero-title {
    font-size: 3rem;
  }
}


/* End: 2_insight.css */

/* Begin: 2_meeting_notifications.css */
.meeting-center-popup {
  box-shadow: 0 4px 32px 0 rgba(0,0,0,0.10);
  border-radius: 1.1rem;
}

.meeting-center-row {
  transition: background 0.15s;
  border-radius: 0.75rem;
  margin-bottom: 2px;
}

  .sound-bars {
      height: 18px;
      display: flex;
      align-items: center;
    }
    
    .sound-bar {
      width: 3px;
      height: 100%;
      background: rgba(255, 255, 255, 0.9);
      animation: soundBar 1.2s ease-in-out infinite;
      margin: 0 1px;
    }
    
    .sound-bar:nth-child(1) {
      animation-delay: 0s;
    }
    
    .sound-bar:nth-child(2) {
      animation-delay: 0.2s;
      height: 14px;
    }
    
    .sound-bar:nth-child(3) {
      animation-delay: 0.4s;
      height: 10px;
    }
    
    @keyframes soundBar {
      0%, 100% {
        transform: scaleY(0.3);
      }
      50% {
        transform: scaleY(1);
      }
    }

@media (max-width: 640px) {
  .meeting-center-popup {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: calc(100vw - 2rem) !important;
    max-width: 24rem !important;
  }
  .meeting-center-row {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* End: 2_meeting_notifications.css */

/* Begin: 2_more.css */
.more-page .item {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .85rem 1.2rem;
  background: #fff;
  transition: background 0.15s;
}

.more-page .item:hover { background: #f9fafb; }
.more-page .item span { flex: 1; text-align: left; }

/* Modular button font size */
.more-page .more-btn {
  font-size: 1.05rem;
}

/* Notes icon background */
.more-page .more-icon-notes {
  background-color: #25B4D1;
}

/* Linked accounts icon background */
.more-page .more-icon-link {
  background-color: #25B4D1;
}


/* End: 2_more.css */

/* Begin: 3_notes.css */
/* Notes toolbar (matches tasks lists toolbar) */
.notes-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fff;
  border-radius: 9999px;
  box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.08);
  padding: 0.7rem 1.2rem;
  margin-bottom: 1.2rem;
  min-height: 56px;
  position: relative;
}

.notes-toolbar .chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: 38px;
  padding: 0 1.1rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: 9999px;
  white-space: nowrap;
  transition: background 0.15s, border 0.15s, color 0.15s;
  cursor: pointer;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: #4b4b4b;
}

.notes-toolbar .chip-outline {
  background: #fff;
  color: #4a00e0;
  border: 1.5px solid #e5e7eb;
}
.notes-toolbar .chip-outline:hover {
  border-color: #4a00e0;
  color: #4a00e0;
}

.notes-toolbar .chip-filled {
  background: #4a00e0;
  color: #fff;
  border: none;
}
.notes-toolbar .chip-filled:hover {
  background: #6366f1;
}

.notes-toolbar input[type="text"] {
  background: transparent;
  border: none;
  outline: none;
  font-size: 1rem;
  padding: 0;
  min-width: 120px;
}

.notes-toolbar-block {
  width: 100%;
  margin-bottom: 1.2rem;
}
.notes-toolbar-block .notes-toolbar-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0;
  margin-bottom: 0;
  min-height: 44px;
  width: 100%;
}

/* --- Search bar (matches tasks) --- */
.notes-toolbar-block input[type="text"] {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 0.8rem;
  padding: 0.9rem 0.9rem 0.9rem 2.5rem;
  font-size: 1rem;
  outline: none;
  width: 100%;
  transition: border 0.15s, box-shadow 0.15s;
}
.notes-toolbar-block input[type="text"]:focus {
  border-color: var(--primary, #4a00e0);
  box-shadow: 0 0 0 2px var(--primary-xlight, #f1e8fa);
}

/* Section subtitle for notes (matches app.css but allows counter on right) */

/* --- Responsive --- */
@media (max-width: 600px) {
  .notes-toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    min-height: 44px;
  }
  .notes-toolbar .chip,
  .notes-toolbar .chip-outline,
  .notes-toolbar .chip-filled {
    height: 34px;
    font-size: 0.95rem;
    padding: 0 0.8rem;
  }
  .notes-toolbar input[type="text"] {
    min-width: 60px;
    font-size: 0.95rem;
  }
  .notes-toolbar-block .notes-toolbar-row {
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 38px;
  }
  .chip,
  .chip-outline,
  .chip-filled {
    height: 34px;
    font-size: 0.95rem;
    padding: 0 0.8rem;
  }
  .notes-toolbar-block input[type="text"] {
    font-size: 0.95rem;
    padding-left: 2.2rem;
  }
}

/* masonry-like grid */
.grid-notes {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns by default */
  gap: 0.875rem;
  align-content: start;
}

/* On larger screens, allow more columns */
@media (min-width: 640px) {
  .grid-notes {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

.note-card {
  position: relative;
  padding: 1rem 1.125rem;
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  cursor: move;
  transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  align-self: start; /* Allow cards to be only as tall as their content */
  min-height: 120px;
  max-height: 220px; /* Increased to accommodate all content */
  overflow: hidden;
  min-width: 0; /* Allow flex children to shrink below content size */
}
.note-card:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.note-foot {
  font-size: 0.7rem;
  color: #6b7280;
  margin-top: auto; /* Push footer to bottom */
  padding-top: 0.5rem;
  flex-shrink: 0;
  min-height: fit-content;
}

/* Tags/Labels styling - improved design */
.note-tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
  padding: 0;
  list-style: none;
  max-height: 3em; /* Allow 2 rows of tags */
  overflow: hidden;
}

.note-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  color: #374151;
  max-width: 120px;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.note-tag:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
}

.note-tag-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #6B7280;
}

.note-tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

/* Grid view specific tag adjustments */
.note-card:not(.list) .note-tags-list {
  gap: 0.3125rem;
  margin-bottom: 0.375rem;
}

.note-card:not(.list) .note-tag {
  padding: 0.1875rem 0.5rem;
  font-size: 0.625rem;
  max-width: 100px;
  border-radius: 0.375rem;
}

.note-card:not(.list) .note-tag-dot {
  width: 5px;
  height: 5px;
}

/* Ensure empty content doesn't create unnecessary height */
.note-card .text-sm:empty {
  display: none;
}
.pin-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  color: #6b7280;
  z-index: 10;
}
.pin-btn:hover {
  color: #4f46e5;
}
.abs-fill {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.note-card.dragging {
  opacity: 0.6;
  transform: scale(0.97) rotate(2deg);
  z-index: 99 !important;
  cursor: grabbing;
}

/* placeholder gap */
.note-placeholder {
  border: 2px dashed #c7d2fe;
  border-radius: 0.75rem;
  background: #eef2ff;
  transition: all 0.2s ease;
}

.note-placeholder.hidden {
  display: none !important;
  height: 0px;
  width: 0px;
}

/* Smooth transitions */
[x-ref="deleteZone"] {
  transition: transform 0.25s ease;
}
.grid-notes.addingto {
  position: relative;
}

.grid-notes:not(.addingto) > .note-placeholder {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

.sameposition.note-placeholder {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

.grid-notes.addingto::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 2px dashed #c7d2fe;
  border-radius: 0.75rem;
  z-index: 1;
  box-sizing: border-box;
}

.grid-notes.list {
  display: flex !important;
  flex-direction: column;
  gap: 1.25rem;
}

/* Make note-card look like review cards in list mode */
.note-card.list {
  border-radius: 1rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1), 0 1.5px 4px rgba(0, 0, 0, 0.08);
  padding: 1.25rem 1.5rem 1rem 1.5rem;
  font-size: 1rem;
  background: #fff;
  min-width: 0;
  width: 100%;
  max-width: 600px;
  max-height: none; /* Override grid max-height for list view */
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: box-shadow 0.2s;
}
.note-card.list:hover {
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1), 0 2px 8px rgba(0, 0, 0, 0.1);
}
.note-card.list .note-title {
  font-size: 1.125rem;
  font-weight: 600;
  white-space: normal; /* Allow wrapping in list view */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  word-break: break-word;
}
.note-card.list .note-body {
  font-size: 0.9375rem;
  line-height: 1.6;
  -webkit-line-clamp: 10; /* Show more lines in list view */
  max-height: 16em;
}
.note-card.list .note-foot {
  font-size: 0.875rem;
  margin-top: 0.5rem;
}
.note-card.list .note-tags-list {
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.note-card.list .note-tag {
  padding: 0.3125rem 0.75rem;
  font-size: 0.75rem;
  max-width: 150px;
}
.note-card.list .pin-btn {
  top: 1rem;
  right: 1rem;
  font-size: 1.2em;
}
.note-card.list .abs-fill {
  border-radius: 1rem;
}

/* Responsive for mobile */
@media (max-width: 600px) {
  .note-card.list {
    padding: 1.2rem 0.8rem 1rem 0.8rem;
    max-width: 100%;
  }
}

.min-w-\[6rem\] {
  min-width: 6rem;
}

/* .grid-notes.grid {
  column-count: 2;
  column-gap: .75rem;
  display: block;
}
.note-card.grid {
  display: block;
  break-inside: avoid;
  margin-bottom: .75rem;
  width: 100%;
} */

.note-title {
  display: block;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1f2937;
  word-break: break-word;
  hyphens: auto;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

/* Note body content - truncated with ellipsis */
.note-card .note-body {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #4b5563;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Show max 3 lines */
  -webkit-box-orient: vertical;
  word-break: break-word;
  text-overflow: ellipsis;
  position: relative;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(1.5em * 3); /* 3 lines max */
}

/* Ensure proper spacing and prevent content from being cut */
.note-card .note-body::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 1.5em;
  background: linear-gradient(to right, transparent, #fff);
  pointer-events: none;
  display: none; /* Only show if needed - can be enabled for visual fade */
}

/* Ensure proper truncation for all content types */
.note-card .note-body * {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Strip complex HTML formatting in grid cards */
.note-card:not(.list) .note-body h1,
.note-card:not(.list) .note-body h2,
.note-card:not(.list) .note-body h3 {
  font-size: inherit;
  font-weight: 600;
  margin: 0;
}

.note-card:not(.list) .note-body p {
  margin: 0;
}

.note-card:not(.list) .note-body ul,
.note-card:not(.list) .note-body ol {
  margin: 0;
  padding-left: 1em;
}

.note-card:not(.list) .note-body li {
  margin: 0;
}

/* Larger note-foot for grid view only */
.grid-notes.grid .note-card .note-foot {
  font-size: 1rem;
}

/* Notes Modal Improvements */
.rte-wrapper {
  border: 2px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
  background: #ffffff;
  transition: all 0.2s ease;
}

.rte-wrapper:focus-within {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.rte-wrapper .ql-editor {
  padding: 1.25rem !important; /* Better padding for content */
  min-height: 280px;
  border: none;
  font-size: 1rem;
  line-height: 1.7;
  color: #374151;
  font-family: "Poppins", "Inter", Arial, sans-serif;
}

.rte-wrapper .ql-editor:focus {
  outline: none;
}

.rte-wrapper .ql-toolbar {
  border: none;
  border-bottom: 1px solid #e5e7eb;
  padding: 0.875rem 1rem;
  background: #f9fafb;
  border-radius: 0.75rem 0.75rem 0 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f9fafb;
  -webkit-overflow-scrolling: touch;
}

.rte-wrapper .ql-toolbar::-webkit-scrollbar {
  height: 6px;
}

.rte-wrapper .ql-toolbar::-webkit-scrollbar-track {
  background: #f9fafb;
}

.rte-wrapper .ql-toolbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.rte-wrapper .ql-toolbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.rte-wrapper .ql-toolbar .ql-formats {
  margin-right: 0.75rem;
  display: inline-flex;
  vertical-align: middle;
  position: relative;
}

/* Fix z-index for Quill dropdown menus - must be above modal (1050) */
.rte-wrapper .ql-toolbar .ql-picker {
  position: relative;
  z-index: 10;
}

.rte-wrapper .ql-toolbar .ql-picker-options {
  z-index: 1051 !important;
  position: absolute !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
}

.rte-wrapper .ql-toolbar .ql-picker.ql-expanded .ql-picker-options {
  z-index: 1051 !important;
}

.rte-wrapper .ql-toolbar button,
.rte-wrapper .ql-toolbar .ql-picker-label {
  border-radius: 0.375rem;
  transition: all 0.15s ease;
}

.rte-wrapper .ql-toolbar button:hover,
.rte-wrapper .ql-toolbar .ql-picker-label:hover {
  background: #e5e7eb;
}

.rte-wrapper .ql-toolbar button.ql-active,
.rte-wrapper .ql-toolbar .ql-picker-label.ql-active {
  background: #e0e7ff;
  color: #6366F1;
}

/* Ensure Quill dropdowns appear above editor content */
.rte-wrapper .ql-toolbar .ql-picker-options {
  z-index: 1051 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 0.5rem !important;
}

.rte-wrapper .ql-toolbar .ql-picker.ql-expanded .ql-picker-options {
  display: block !important;
  z-index: 1051 !important;
}

.rte-editor-container {
  background: #ffffff;
  position: relative;
  z-index: 1;
}

/* Make rte-editor-container fill space in fullscreen */
.notes-modal-fullscreen .rte-editor-container {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Modal content scrolling */
.notes-modal-content {
  max-height: calc(90vh - 200px);
  overflow-y: auto;
}

/* Note date style (footer) */
.note-foot .note-date {
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  margin-top: 0;
  margin-bottom: 0;
  color: #6b7280;
  font-weight: 600;
  display: block;
  line-height: 1.2;
}

/* Note card padding adjustments - removed redundant rule */

/* List mode note card padding - using the main .note-card.list rule above */

/* Label chip size and padding (more generous for mobile/touch) */

/* Notes modal fullscreen mode */

/* Fullscreen overlay - the outermost container (already has fixed inset-0 from Tailwind) */
.notes-fullscreen-overlay {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Wrapper in fullscreen - needs to fill the fixed container */
.notes-modal-wrapper-fullscreen {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  display: block !important;
  position: relative !important;
}

/* The modal panel in fullscreen - use fixed positioning to escape any constraints */
.notes-modal-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  max-width: none !important;
  max-height: none !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: 1051 !important;
}

/* Hide backdrop in fullscreen for cleaner look */
.notes-modal-fullscreen ~ * {
  /* Backdrop is handled by Alpine.js x-show, so we don't need to hide it here */
}

/* Hide modal header in fullscreen */
.notes-modal-fullscreen .notes-modal-header {
  display: none !important;
}

/* Hide modal footer in fullscreen */
.notes-modal-fullscreen .notes-modal-footer {
  display: none !important;
}

/* Make modal content fill the space */
.notes-modal-fullscreen .notes-modal-content {
  flex: 1 !important;
  max-height: none !important;
  height: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* Hide everything except the editor in fullscreen mode */
.notes-modal-fullscreen .notes-modal-inner {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Hide Title section in fullscreen */
.notes-modal-fullscreen .notes-section-title {
  display: none !important;
}

/* Hide Content label + fullscreen button row in fullscreen */
.notes-modal-fullscreen .notes-body-header {
  display: none !important;
}

/* Hide Labels section in fullscreen */
.notes-modal-fullscreen .notes-section-labels {
  display: none !important;
}

/* Hide Attachments section in fullscreen */
.notes-modal-fullscreen .notes-section-attachments {
  display: none !important;
}

/* Make the editor wrapper section fill the space */
.notes-modal-fullscreen .notes-section-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* Make the rte-wrapper fill the space */
.notes-modal-fullscreen .rte-wrapper {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  border: none !important;
  border-radius: 0 !important;
  height: 100% !important;
  width: 100% !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* Smooth transition for fullscreen mode */
.rte-wrapper {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notes-modal-fullscreen {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.notes-modal-fullscreen .rte-wrapper .ql-container {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.notes-modal-fullscreen .rte-wrapper .ql-editor {
  flex: 1 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  width: 100% !important;
  overflow-y: auto !important;
  /* Safe area padding for bottom bar */
  padding: 1.5rem !important;
  padding-bottom: calc(1.5rem + var(--native-app-bottom-margin, 0px) + env(safe-area-inset-bottom, 0px)) !important;
  padding-left: calc(1.5rem + env(safe-area-inset-left, 0px)) !important;
  padding-right: calc(1.5rem + env(safe-area-inset-right, 0px)) !important;
}

/* Fullscreen header wrapper (shown only in fullscreen mode) */
.rte-fullscreen-header-wrapper {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  z-index: 10;
  position: relative;
}

/* Top bar: Title and close button */
.rte-fullscreen-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 1rem;
  gap: 1rem;
  /* Safe area padding for notches/camera holes */
  padding-top: calc(0.5rem + var(--native-app-top-margin, 0px) + env(safe-area-inset-top, 0px));
  padding-bottom: 0.5rem;
  padding-left: calc(1rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1rem + env(safe-area-inset-right, 0px));
  border-bottom: 1px solid #e5e7eb;
  background: #fafafa;
}

/* Toolbar row: Separate row for formatting tools */
.rte-fullscreen-toolbar-row {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

/* Legacy rte-wrapper fullscreen - no longer used but kept for safety */
.rte-wrapper.fullscreen {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: none !important;
  border-radius: 0 !important;
}

.rte-toolbar-container {
  flex: 1;
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 1rem;
  /* Safe area padding */
  padding-left: calc(1rem + env(safe-area-inset-left, 0px));
  padding-right: calc(1rem + env(safe-area-inset-right, 0px));
}

/* Style toolbar when in fullscreen toolbar row */
.rte-fullscreen-toolbar-row .ql-toolbar {
  border: none !important;
  border-radius: 0 !important;
  padding: 0.75rem 0 !important;
  background: transparent !important;
  margin: 0 !important;
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.rte-fullscreen-toolbar-row .ql-toolbar .ql-formats {
  margin-right: 0.75rem;
  display: inline-flex;
  align-items: center;
}

/* Better spacing for toolbar buttons in fullscreen */
.rte-fullscreen-toolbar-row .ql-toolbar button,
.rte-fullscreen-toolbar-row .ql-toolbar .ql-picker {
  padding: 0.375rem 0.5rem;
  margin: 0 0.125rem;
  border-radius: 0.375rem;
  transition: all 0.15s ease;
}

.rte-fullscreen-toolbar-row .ql-toolbar button:hover,
.rte-fullscreen-toolbar-row .ql-toolbar .ql-picker-label:hover {
  background: #f3f4f6;
}

/* Text Editor label in header */
.rte-header-label {
  flex: 1;
  min-width: 0;
  color: #111827;
  font-weight: 600;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  overflow: hidden;
}

.rte-header-label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fullscreen exit button in header */
.rte-fullscreen-exit-header {
  flex-shrink: 0;
  width: 40px;
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  cursor: pointer;
}

.rte-fullscreen-exit-header:hover {
  background: #f3f4f6;
  color: #374151;
}

.rte-fullscreen-exit-header:active {
  background: #e5e7eb;
}

/* Quill toolbar styling - duplicate removed, see above */

.rte-wrapper .ql-toolbar .ql-stroke {
  stroke: #6b7280;
}

.rte-wrapper .ql-toolbar .ql-fill {
  fill: #6b7280;
}

.rte-wrapper .ql-toolbar button:hover .ql-stroke,
.rte-wrapper .ql-toolbar .ql-picker-label:hover .ql-stroke {
  stroke: #374151;
}

.rte-wrapper .ql-toolbar button:hover .ql-fill,
.rte-wrapper .ql-toolbar .ql-picker-label:hover .ql-fill {
  fill: #374151;
}

.rte-wrapper .ql-toolbar button.ql-active .ql-stroke {
  stroke: #6366F1;
}

.rte-wrapper .ql-toolbar button.ql-active .ql-fill {
  fill: #6366F1;
}

/* Toolbar scrollbar styling in fullscreen */
.rte-fullscreen-toolbar-row .ql-toolbar::-webkit-scrollbar {
  height: 6px;
}

.rte-fullscreen-toolbar-row .ql-toolbar::-webkit-scrollbar-track {
  background: #f9fafb;
}

.rte-fullscreen-toolbar-row .ql-toolbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.rte-fullscreen-toolbar-row .ql-toolbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.rte-fullscreen-toolbar-row .ql-toolbar {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f9fafb;
  -webkit-overflow-scrolling: touch;
}

.rte-fullscreen-exit-header:hover {
  color: #374151;
  background: #f9fafb;
}

.rte-wrapper.fullscreen .ql-editor {
  min-height: 60vh !important;
  height: 100% !important;
  max-height: none !important;
  font-size: 1.1rem;
  border: none !important;
  padding: 1.5rem !important;
  line-height: 1.8;
}

/* Better focus state in fullscreen */
.rte-wrapper.fullscreen .ql-editor:focus {
  outline: none;
}

/* Improve readability in fullscreen */
.notes-modal-fullscreen .rte-wrapper .ql-editor {
  font-size: 1.0625rem;
  line-height: 1.75;
}

/* Better scrollbar styling for fullscreen editor */
.notes-modal-fullscreen .rte-wrapper .ql-editor::-webkit-scrollbar {
  width: 8px;
}

.notes-modal-fullscreen .rte-wrapper .ql-editor::-webkit-scrollbar-track {
  background: #f9fafb;
}

.notes-modal-fullscreen .rte-wrapper .ql-editor::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 4px;
}

.notes-modal-fullscreen .rte-wrapper .ql-editor::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.rte-wrapper.fullscreen [x-ref="rte"] {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

/* Quill editor placeholder styling */
.rte-wrapper .ql-editor.ql-blank::before {
  padding-left: 0 !important;
  text-indent: 0 !important;
  color: #9ca3af;
  font-style: normal;
  left: 1.25rem;
  right: 1.25rem;
}

/* End: 3_notes.css */

/* Begin: 4_chats.css */
/* ————————————————————————————————————————————————
   ➊  Message formatting styles
   ———————————————————————————————————————————————— */
/* Ensure strikethrough formatting works for <del> and <s> tags in chat messages */
.chats-bubble del,
.chats-bubble s {
  text-decoration: line-through !important;
  color: #6b7280; /* Optional: slightly grayed out */
}

/* Also ensure strikethrough works in any message content */
del,
s {
  text-decoration: line-through !important;
  color: #6b7280;
}

/* Ensure strikethrough works in chat message bubbles specifically */
.chats-bubble del,
.chats-bubble del *,
.chats-bubble s,
.chats-bubble s * {
  text-decoration: line-through !important;
}

/* Force strikethrough for all del and s tags in chat messages */
.chats-bubble del,
.chats-bubble s {
  text-decoration: line-through !important;
  text-decoration-color: #6b7280 !important;
  text-decoration-thickness: 1px !important;
}

/* Also ensure strikethrough works in any message content with higher specificity */
div.chats-bubble del,
span.chats-bubble del,
.chats-bubble span del,
div.chats-bubble s,
span.chats-bubble s,
.chats-bubble span s {
  text-decoration: line-through !important;
  color: #6b7280 !important;
}

/* Force strikethrough with maximum specificity */
.chats-bubble.bg-white.rounded-2xl.shadow.text-\[16px\].max-w-md.border.border-primary-xlight del,
.chats-bubble.bg-white.rounded-2xl.shadow.text-\[16px\].max-w-md.border.border-primary-xlight s {
  text-decoration: line-through !important;
  color: #6b7280 !important;
  text-decoration-color: #6b7280 !important;
  text-decoration-thickness: 1px !important;
}

/* Also ensure strikethrough works in any message content */
.chats-bubble del,
.chats-bubble del *,
.chats-bubble span del,
.chats-bubble p del,
.chats-bubble s,
.chats-bubble s *,
.chats-bubble span s,
.chats-bubble p s {
  text-decoration: line-through !important;
  color: #6b7280 !important;
}

/* ————————————————————————————————————————————————
   ➊  Link formatting styles for chat messages
   ———————————————————————————————————————————————— */
/* Style links in chat message bubbles */
.chats-bubble a {
  color: #4f46e5 !important; /* Primary color */
  text-decoration: underline !important;
  text-decoration-color: #4f46e5 !important;
  text-underline-offset: 2px !important;
  transition: all 0.2s ease !important;
}

.chats-bubble a:hover {
  color: #3730a3 !important; /* Darker primary on hover */
  text-decoration-color: #3730a3 !important;
  text-decoration-thickness: 2px !important;
}

.chats-bubble a:visited {
  color: #7c3aed !important; /* Purple for visited links */
  text-decoration-color: #7c3aed !important;
}

.chats-bubble a:focus {
  outline: 2px solid #4f46e5 !important;
  outline-offset: 2px !important;
  border-radius: 2px !important;
}

/* Ensure links work in all chat message contexts */
.chats-bubble a,
.chats-bubble p a,
.chats-bubble span a,
.chats-bubble div a {
  color: #4f46e5 !important;
  text-decoration: underline !important;
  text-decoration-color: #4f46e5 !important;
  text-underline-offset: 2px !important;
}

/* Ensure links are properly styled in AI messages */
.chats-bubble.bg-ai-light a {
  color: #4f46e5 !important;
  text-decoration: underline !important;
  text-decoration-color: #4f46e5 !important;
}

/* Ensure links are properly styled in team messages */
.chats-bubble.bg-primary-xlight a {
  color: #4f46e5 !important;
  text-decoration: underline !important;
  text-decoration-color: #4f46e5 !important;
}

/* Ensure links are properly styled in user messages */
.chats-bubble.bg-white a {
  color: #4f46e5 !important;
  text-decoration: underline !important;
  text-decoration-color: #4f46e5 !important;
}

/* ————————————————————————————————————————————————
   ➊  Message text readability improvements
   ———————————————————————————————————————————————— */
/* Improve overall text readability in chat bubbles */
.chats-bubble {
  line-height: 1.5 !important; /* More comfortable line height */
  letter-spacing: 0.01em !important; /* Slight letter spacing for clarity */
}

/* Paragraph spacing in messages */
.chats-bubble p {
  margin-bottom: 0.5em !important;
  line-height: 1.5 !important;
}

.chats-bubble p:last-child {
  margin-bottom: 0 !important;
}

/* List spacing */
.chats-bubble ul,
.chats-bubble ol {
  margin: 0.5em 0 !important;
  padding-left: 1.5em !important;
}

.chats-bubble li {
  margin-bottom: 0.25em !important;
  line-height: 1.5 !important;
}

.chats-bubble li:last-child {
  margin-bottom: 0 !important;
}

/* ————————————————————————————————————————————————
   ➊  Mention pill styles for chat messages
   ———————————————————————————————————————————————— */
/* Style mention pills in chat message bubbles */
.chats-bubble .chat-mention {
  display: inline-block;
  background: rgba(79, 70, 229, 0.1) !important; /* Light primary background */
  color: #4f46e5 !important; /* Primary text color */
  padding: 0.125rem 0.5rem !important; /* Small pill padding */
  border-radius: 9999px !important; /* Fully rounded */
  font-weight: 500 !important; /* Medium font weight */
  font-size: inherit !important; /* Inherit parent font size */
  line-height: 1.2 !important; /* Tight line height */
  margin: 0 0.125rem !important; /* Small horizontal spacing */
  vertical-align: baseline !important; /* Align with text baseline */
  transition: all 0.2s ease !important; /* Smooth transitions */
}

/* @alert mention - eye-catching urgent style */
.chats-bubble .chat-mention--alert {
  background: #ef4444 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 0.2rem 0.6rem !important;
  border: none !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.25) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  font-size: 0.85em !important;
}

.chats-bubble .chat-mention--alert:hover {
  background: #dc2626 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 6px rgba(220, 38, 38, 0.3) !important;
}

/* Alert message bubble - entire bubble styled for urgency */
.chats-bubble.chats-bubble--alert {
  background: #fef2f2 !important;
  border: 1.5px solid #fca5a5 !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.12) !important;
  position: relative !important;
}

.chats-bubble.chats-bubble--alert::before {
  content: '⚠';
  position: absolute;
  top: -8px;
  left: -8px;
  width: 20px;
  height: 20px;
  background: #ef4444;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: white;
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.25);
  z-index: 10;
}

.chats-bubble .chat-mention:hover {
  background: rgba(79, 70, 229, 0.15) !important; /* Slightly darker on hover */
  transform: translateY(-0.5px) !important; /* Subtle lift effect */
}

/* Ensure mentions work in all chat message contexts */
.chats-bubble .chat-mention,
.chats-bubble p .chat-mention,
.chats-bubble span .chat-mention,
.chats-bubble div .chat-mention {
  background: rgba(79, 70, 229, 0.1) !important;
  color: #4f46e5 !important;
  padding: 0.125rem 0.5rem !important;
  border-radius: 9999px !important;
  font-weight: 500 !important;
}

/* Ensure mentions are properly styled in AI messages */
.chats-bubble.bg-ai-light .chat-mention {
  background: rgba(79, 70, 229, 0.1) !important;
  color: #4f46e5 !important;
}

/* Ensure mentions are properly styled in team messages */
.chats-bubble.bg-primary-xlight .chat-mention {
  background: rgba(79, 70, 229, 0.1) !important;
  color: #4f46e5 !important;
}

/* Ensure mentions are properly styled in user messages */
.chats-bubble.bg-white .chat-mention {
  background: rgba(79, 70, 229, 0.1) !important;
  color: #4f46e5 !important;
}

/* ————————————————————————————————————————————————
   ➋  Show channel-list on larger screens (two-pane desktop view)
   ———————————————————————————————————————————————— */
@media (min-width: 999768px) {
  [x-show="view==='list'"] {
    display: block !important; /* force-show left pane */
  }
}

/* ————————————————————————————————————————————————
   ➋  Channel-row base style
   ———————————————————————————————————————————————— */
.chats-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.55rem 0.5rem;
  border-radius: 0.5rem;
  transition: background 0.15s;
}
.chats-row:hover {
  background: #f3f4f6; /* Tailwind `gray-100` */
}

/* ————————————————————————————————————————————————
   ➌  Active (selected) row
   ———————————————————————————————————————————————— */
.chats-row-active {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.55rem 0.5rem;
  border-radius: 0.5rem;
  transition: background 0.15s;

  background: #eef2ff; /* Tailwind `indigo-50` */
  color: #4f46e5; /* Tailwind `indigo-600` */
  font-weight: 500; /* ≈ font-medium        */
}

/* Hide .chats-row-active highlight on mobile (below 768px) (dont use for now) */
@media (max-width: 999767px) {
  .chats-row-active {
    background: #fff !important;
    color: inherit !important;
    font-weight: normal !important;
  }
}

/* ————————————————————————————————————————————————
   ➍  Unread red dot
   ———————————————————————————————————————————————— */
.chats-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  min-height: 7px;
  max-width: 7px;
  max-height: 7px;
  border-radius: 50%;
  background: #ef4444; /* Tailwind `red-500`   */
  display: inline-block;
  padding: 0;
  line-height: 1;
  font-size: 1px;
  vertical-align: middle;
}

/* ————————————————————————————————————————————————
   ➎  Drag and drop styles for DM reordering
   ———————————————————————————————————————————————— */
[data-dm-id].drag-over {
  border-top: 2px solid #6366f1 !important;
  background-color: #f3f4f6 !important;
}

[data-dm-id] [draggable="true"] {
  cursor: move;
}

[data-dm-id] [draggable="true"]:hover {
  background-color: #f9fafb;
}

/* Smooth transitions for DM list items - FLIP animation support */
.dm-list-item {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease, 
              background-color 0.2s ease;
  will-change: transform;
  position: relative;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Ensure smooth position changes */
[data-dm-id] {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease, 
              background-color 0.2s ease;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Override transition when explicitly set to none (for FLIP invert phase) */
[data-dm-id][style*="transition: none"] {
  transition: none !important;
}

/* Animation for reordered item */
[data-dm-id].dm-reordered {
  animation: dmReorderSuccess 0.6s ease;
  z-index: 10;
}

@keyframes dmReorderSuccess {
  0% {
    background-color: #eef2ff;
    transform: scale(1);
  }
  50% {
    background-color: #c7d2fe;
    transform: scale(1.02);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}

/* Smooth list reordering animation */
[data-dm-id] > button {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease,
              background-color 0.2s ease;
}

/* Drag ghost styling */
.dm-drag-ghost {
  pointer-events: none !important;
  opacity: 0.8 !important;
  transform: rotate(2deg) scale(1.05) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  z-index: 10000 !important;
}

/* Dragging state for mobile */
[data-dm-id][style*="position: fixed"] {
  transition: none !important;
  overflow: visible !important;
}

/* Drop placeholder - shows where item will land */
.dm-drop-placeholder {
  height: 60px !important;
  margin: 4px 0 !important;
  border: 2px dashed #6366f1 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
  opacity: 0.6 !important;
  animation: placeholderPulse 1.5s ease-in-out infinite !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  display: block !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 9999 !important;
}

@keyframes placeholderPulse {
  0%, 100% {
    opacity: 0.4;
    border-color: #6366f1;
  }
  50% {
    opacity: 0.7;
    border-color: #818cf8;
  }
}

/* Ensure placeholder is visible */
.dm-drop-placeholder {
  z-index: 9999;
  position: relative;
}


/* Ensure dragged elements are not clipped by parent containers */
[data-dm-id][style*="position: fixed"] {
  position: fixed !important;
  z-index: 99999 !important;
  will-change: transform, top, left !important;
}

/* Prevent parent containers from clipping dragged items */
.overflow-hidden,
.overflow-x-hidden,
.overflow-y-auto {
  position: relative;
}

/* Ensure dragged items can escape overflow containers */
body.dragging-dm [data-dm-id][style*="position: fixed"] {
  position: fixed !important;
  z-index: 99999 !important;
}

/* Force GPU acceleration for smooth animations */
.dm-list-item,
[data-dm-id] {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Mobile drag feedback */
@media (max-width: 768px) {
  [data-dm-id] [draggable="true"]:active {
    transform: scale(1.02);
    transition: transform 0.1s ease;
  }
  
  [data-dm-id].drag-over {
    border-top: 3px solid #6366f1 !important;
    background-color: #f3f4f6 !important;
  }
  
  [data-dm-id] [draggable="true"] {
    touch-action: pan-y;
    -webkit-user-drag: none;
  }
}

/* ========================================================================== */
/*  TEAMS DRAG-AND-DROP REORDERING STYLES                                     */
/* ========================================================================== */

/* Smooth transitions for Team list items - FLIP animation support */
.team-list-item {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease, 
              background-color 0.2s ease;
  will-change: transform;
  position: relative;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Ensure smooth position changes */
[data-team-id] {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease, 
              background-color 0.2s ease;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Override transition when explicitly set to none (for FLIP invert phase) */
[data-team-id][style*="transition: none"] {
  transition: none !important;
}

/* Animation for reordered item */
[data-team-id].team-reordered {
  animation: teamReorderSuccess 0.6s ease;
  z-index: 10;
}

@keyframes teamReorderSuccess {
  0% {
    background-color: #eef2ff;
    transform: scale(1);
  }
  50% {
    background-color: #c7d2fe;
    transform: scale(1.02);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}

/* Smooth list reordering animation */
[data-team-id] > button {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease,
              background-color 0.2s ease;
}

/* Drag ghost styling */
.team-drag-ghost {
  pointer-events: none !important;
  opacity: 0.8 !important;
  transform: rotate(2deg) scale(1.05) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
  z-index: 10000 !important;
}

/* Dragging state for mobile */
[data-team-id][style*="position: fixed"] {
  transition: none !important;
  overflow: visible !important;
}

/* Drop placeholder - shows where item will land */
.team-drop-placeholder {
  height: 60px !important;
  margin: 4px 0 !important;
  border: 2px dashed #6366f1 !important;
  border-radius: 8px !important;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
  opacity: 0.6 !important;
  animation: teamPlaceholderPulse 1.5s ease-in-out infinite !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  display: block !important;
  visibility: visible !important;
  position: relative !important;
  z-index: 9999 !important;
}

@keyframes teamPlaceholderPulse {
  0%, 100% {
    opacity: 0.4;
    border-color: #6366f1;
  }
  50% {
    opacity: 0.7;
    border-color: #818cf8;
  }
}

/* Ensure dragged elements are not clipped by parent containers */
[data-team-id][style*="position: fixed"] {
  position: fixed !important;
  z-index: 99999 !important;
  will-change: transform, top, left !important;
}

/* Ensure dragged items can escape overflow containers */
body.dragging-team [data-team-id][style*="position: fixed"] {
  position: fixed !important;
  z-index: 99999 !important;
}

/* Force GPU acceleration for smooth animations */
.team-list-item,
[data-team-id] {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Mobile drag feedback for Teams */
@media (max-width: 768px) {
  [data-team-id] [draggable="true"]:active {
    transform: scale(1.02);
    transition: transform 0.1s ease;
  }
  
  [data-team-id].drag-over {
    border-top: 3px solid #6366f1 !important;
    background-color: #f3f4f6 !important;
  }
  
  [data-team-id] [draggable="true"] {
    touch-action: pan-y;
    -webkit-user-drag: none;
  }
}

/* ————————————————————————————————————————————————
   ➏  Text alignment + tighter vertical rhythm
   ———————————————————————————————————————————————— */
.chats-row span,
.chats-row-active span {
  text-align: left;
}

/* slightly tighter padding for both states */
.chats-row,
.chats-row-active {
  padding: 0.55rem 0.25rem;
}

/* Ensure proper alignment for chat list items */
.chats-row .flex.items-center,
.chats-row-active .flex.items-center {
  align-items: center !important;
}

/* Ensure consistent icon container sizing and alignment */
.chats-row .flex.items-center.justify-center.w-9.h-9,
.chats-row-active .flex.items-center.justify-center.w-9.h-9 {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
}

/* Force circular shape for team channel icons specifically */
.chats-row .bg-primary-xlight,
.chats-row-active .bg-primary-xlight {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  border-radius: 50% !important;
}

/* Ensure text containers are properly aligned */
.chats-row .flex.flex-col.justify-center,
.chats-row-active .flex.flex-col.justify-center {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 36px !important;
  min-width: 0 !important;
}

/* Remove border/background from grouped chat buttons */
.chats-item.bg-white,
.chats-item.border,
.chats-item.rounded-xl,
.chats-item.more-btn {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Chat message bubble: slightly larger, more rounded, more padding */
.chats-bubble.bg-white.rounded-lg {
  border-radius: 12px !important;
  font-size: 0.94rem !important;
  padding: 0.85rem 1rem !important;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.05);
}

/* Avatar: a bit larger and fully round */
.chats-avatar.w-10.h-10.rounded-full {
  min-width: 40px;
  min-height: 40px;
  border-radius: 50% !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* Input bar: more padding, fully rounded */
.chats-input.rounded-full {
  border-radius: 0.75rem !important;
  font-size: 1rem !important;
  padding: 0.85rem 1rem !important;
}

/* Contenteditable editor placeholder */
.chat-input-editor[contenteditable="true"]:empty:before {
  content: attr(data-placeholder);
  color: #9ca3af; /* gray-400 */
}

/* Chat input editor: handle long text with proper wrapping and overflow */
.chat-input-editor {
  white-space: pre-wrap !important; /* Override no-wrap, allow wrapping */
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  max-height: 200px !important; /* Maximum height before scrolling */
  overflow-y: auto !important; /* Enable vertical scrolling when max-height reached */
  overflow-x: hidden !important; /* Prevent horizontal overflow */
  min-height: 44px !important; /* Maintain minimum height */
  resize: none !important; /* Prevent manual resizing */
}

/* Mentions dropdown */
.mentions-menu {
  position: absolute;
  background: #ffffff;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 0.25rem;
  z-index: 9999; /* ensure above chat UI */
  max-height: 220px;
  overflow-y: auto;
}

/* Mention pill appearance inside the chat input */
.chat-input-editor .chat-mention {
  display: inline-block !important;
  background: rgba(79, 70, 229, 0.1) !important; /* Light primary */
  color: #4f46e5 !important; /* Primary */
  padding: 0.125rem 0.5rem !important;
  border-radius: 9999px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  margin: 0 0.125rem !important;
}
.chat-input-editor .chat-mention:hover {
  background: rgba(79, 70, 229, 0.15) !important;
}
.mentions-menu__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
}
.mentions-menu__item:hover,
.mentions-menu__item--active {
  background: #eef2ff; /* indigo-50 */
}
.mentions-menu__avatar {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  object-fit: cover;
}
.mentions-menu__avatar--special {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  flex-shrink: 0;
}
.mentions-menu__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mentions-menu__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827; /* gray-900 */
}
.mentions-menu__email {
  font-size: 0.75rem;
  color: #6b7280; /* gray-500 */
}

/* Send button: slightly bigger */
.chats-send-btn.rounded-full.p-2\.5 {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chat Search Section */
.chats-search-section--with-header {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.chats-search-section__input-wrap {
  position: relative;
  width: 100%;
}

.chats-search-section__input {
  width: 100%;
  box-sizing: border-box;
  padding-left: 2.5rem !important;  
  padding-right: 2.5rem !important; 
  position: relative;
  z-index: 1;
}

.chats-search-section__icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  color: #9ca3af;
  font-size: 1.125rem;
  height: 1.25rem;
  width: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.chats-search-section__clear-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Input container: flex layout with gap */
.chats-footer-gap {
  display: flex;
  align-items: stretch;
}

.chats-footer-gap .chats-input {
  flex: 1 1 0%;
  min-width: 0;
  height: 100%;
}

.chats-footer-gap .data-mic-btn {
  width: 44px;
  height: 100%;
  min-width: 44px;
  max-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.5rem;
  border-radius: 9999px;
}

/* Chat intro ring for teams/dms - bigger gap, thinner ring, darker right section */
.chat-intro-ring {
  border-radius: 50%;
  border: 0px solid var(--primary-light); /* thinner ring */
  width: 30vw;
  height: 30vw;
  max-width: 116px;
  max-height: 116px;
  box-sizing: border-box;
  background: conic-gradient(
    var(--primary) 0deg 55deg,
    var(--primary-light) 55deg 198deg,
    var(--primary-light) 198deg 360deg
  );
  z-index: 1;
}
.chat-intro-ring-ai {
  border-radius: 50%;
  border: 0px solid var(--ai-light); /* thinner ring */
  width: 30vw;
  height: 30vw;
  max-width: 116px;
  max-height: 116px;
  box-sizing: border-box;
  background: conic-gradient(
    var(--ai-main) 0deg 55deg,
    var(--ai-light) 55deg 198deg,
    var(--ai-light) 198deg 360deg
  );
  z-index: 1;
}
.chat-intro-ring-green {
  border-radius: 50%;
  border: 0px solid #6ee7b7; /* Tailwind green-300 */
  width: 116px;
  height: 116px;
  box-sizing: border-box;
  background: conic-gradient(
    #22c55e 0deg 55deg,
    /* green-500 */ #6ee7b7 55deg 198deg,
    /* green-300 */ #6ee7b7 198deg 360deg /* green-300 */
  );
  z-index: 1;
}

/* Small ring for notetaker mode selector (58x58px) */
.chat-intro-ring-ai[style*="width:58px"],
.chat-intro-ring-green[style*="width:58px"] {
  width: 58px !important;
  height: 58px !important;
  background-size: 58px 58px !important;
}

/* Small ring for notetaker mode selector (86x86px) */
.chat-intro-ring-ai[style*="width:86px"],
.chat-intro-ring-green[style*="width:86px"] {
  width: 86px !important;
  height: 86px !important;
  background-size: 86px 86px !important;
}

/* Small ring for notetaker mode selector (96x96px) */
.chat-intro-ring-ai[style*="width:96px"],
.chat-intro-ring-green[style*="width:96px"] {
  width: 96px !important;
  height: 96px !important;
  background-size: 96px 96px !important;
}

/* Skeleton styles for channel list and chat messages */
.skeleton {
  background: #e5e7eb;
  border-radius: 0.5rem;
  display: inline-block;
  opacity: 0.7;
  animation: skeletonPulse 1.2s infinite ease-in-out;
}
.skeleton-avatar {
  border-radius: 9999px !important;
  background: #e5e7eb;
}
.skeleton-text {
  background: #e5e7eb;
}
.skeleton-bubble {
  background: #e5e7eb;
  border-radius: 1.2rem;
}
@keyframes skeletonPulse {
  0% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 0.7;
  }
}

/* Sticky channel list for wide screens */
@media (min-width: 999767px) {
  aside[x-ref="channelList"] {
    position: sticky !important;
    top: 4rem !important;
    height: calc(100vh - 4rem) !important;
    max-height: calc(100vh - 4rem) !important;
    overflow-y: auto !important;
    z-index: 10;
    background: #f6f2fd;
  }
  .flex-1.flex.flex-col.bg-soft {
    min-width: 0;
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* ————————————————————————————————————————————————
   ➏  Typing indicator pulse animation
   ———————————————————————————————————————————————— */
@keyframes chatTypingPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
.chat-typing-pulse {
  animation: chatTypingPulse 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transition: opacity 0.2s;
}

/* Typing dots animation in footer */
.typing-dots span {
  animation: typingBounce 1.4s ease-in-out infinite;
}
.typing-dots span:nth-child(1) { animation-delay: 0ms; }
.typing-dots span:nth-child(2) { animation-delay: 150ms; }
.typing-dots span:nth-child(3) { animation-delay: 300ms; }

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ————————————————————————————————————————————————
   Pulse Delayed Loader - Circle Spinner & Typing Indicator
   ———————————————————————————————————————————————— */
.pulse-delayed-loader {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pulse-delayed-loader__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: pulseLoaderSpin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes pulseLoaderSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.pulse-delayed-loader__typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 4px;
}

.pulse-delayed-loader__typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #9ca3af;
  animation: pulseLoaderTypingDot 1.4s ease-in-out infinite;
}

.pulse-delayed-loader__typing-dots span:nth-child(1) {
  animation-delay: 0ms;
}

.pulse-delayed-loader__typing-dots span:nth-child(2) {
  animation-delay: 200ms;
}

.pulse-delayed-loader__typing-dots span:nth-child(3) {
  animation-delay: 400ms;
}

@keyframes pulseLoaderTypingDot {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

.pulse-delayed-loader__message {
  color: #6b7280;
  font-style: italic;
  font-size: 14px;
}

/* ————————————————————————————————————————————————
   ➐  Section unread counter badge
   ———————————————————————————————————————————————— */
.section-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  margin-left: 8px;
  background: #ef4444; /* red-500 */
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 9px;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(239, 68, 68, 0.3);
  animation: sectionBadgeAppear 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth appearance animation for unread badges */
@keyframes sectionBadgeAppear {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Adjust section counter spacing when badge is present */
.section-counter-wrap {
  display: flex;
  align-items: center;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  min-width: 2.5em;
  justify-content: flex-end;
  gap: 0; /* Remove gap, use margin-left on badge instead */
  background: #f6f2fd; /* Match the sidebar background to cover the border line */
  padding: 0 0.5rem; /* Add padding to ensure proper coverage */
  border-radius: 0.25rem; /* Slight rounding for better appearance */
}

/* ————————————————————————————————————————————————
   ➐  Unread channel prominence styles
   ———————————————————————————————————————————————— */
.chats-row-unread {
  background: rgba(79, 70, 229, 0.04) !important; /* Very subtle primary tint */
  border-left: 3px solid var(--primary) !important; /* Add accent line */
  font-weight: 600 !important; /* Bolder text */
  position: relative;
}

/* NEW: Triggered shake animation class */
.chats-row-shake {
  animation: chatRowShake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1 !important;
}

/* Shake animation for new unread messages (left/right movement) */
@keyframes chatRowShake {
  0% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(2px);
  }
  100% {
    transform: translateX(0);
  }
}

.chats-row-unread:hover {
  background: rgba(79, 70, 229, 0.08) !important; /* Slightly darker on hover */
}

/* Active unread row styling */
.chats-row-active.chats-row-unread {
  background: #eef2ff !important; /* Keep existing active color */
  border-left: 3px solid var(--primary) !important; /* Maintain accent line */
  font-weight: 600 !important;
}

/* Enhanced unread indicator with slight pulse animation */
.chats-dot-enhanced {
  width: 8px;
  height: 8px;
  min-width: 8px;
  min-height: 8px;
  max-width: 8px;
  max-height: 8px;
  border-radius: 50%;
  background: #ef4444;
  display: none;
  animation: unreadPulse 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
}

/* Show chip when parent row has unread status */
.chats-row-unread .chats-dot-enhanced {
  display: inline-block;
}

/* Subtle pulse animation for unread indicators */
@keyframes unreadPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
}

/* Unread channel name styling */
.chats-row-unread .font-medium {
  color: #1f2937 !important; /* Darker text for better contrast */
}

/* ————————————————————————————————————————————————
   ➑  Text truncation and overflow handling for long pulse names
   ———————————————————————————————————————————————— */

/* Ensure proper truncation for all text elements */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Channel list item text truncation */
.chats-row .font-medium,
.chats-row-active .font-medium {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Chat header title truncation */
.font-semibold.text-lg.leading-tight.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Chat intro block title truncation */
.text-\[1\.5rem\].font-medium.leading-tight .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  display: block;
}

/* Ensure flex containers don't overflow */
.min-w-0 {
  min-width: 0;
}

/* Responsive text sizing for very long names */
@media (max-width: 640px) {
  .chats-row .font-medium,
  .chats-row-active .font-medium {
    font-size: 0.875rem; /* Slightly smaller on mobile */
  }

  .font-semibold.text-lg.leading-tight.truncate {
    font-size: 1rem; /* Smaller header text on mobile */
  }

  .text-\[1\.5rem\].font-medium.leading-tight .truncate {
    font-size: 1.25rem; /* Smaller intro title on mobile */
  }
}

/* Ensure proper spacing when text is truncated */
.chats-row .flex.flex-col,
.chats-row-active .flex.flex-col {
  min-width: 0;
  flex: 1;
}

/* Tooltip styling for truncated text */
[title] {
  cursor: help;
}

/* Ensure unread indicators don't get pushed off screen */
.chats-dot,
.chats-dot-enhanced {
  flex-shrink: 0;
}

/* Ensure unread dots are properly aligned */
.chats-row .ml-2.mt-1\.5.self-start,
.chats-row-active .ml-2.mt-1\.5.self-start {
  align-self: flex-start !important;
  margin-top: 6px !important;
  margin-left: 8px !important;
}

/* Section counter positioning with long names */
.section-counter-wrap {
  flex-shrink: 0;
  z-index: 1;
}

/* Section counter text styling */
.section-counter {
  color: #6b7280; /* gray-500 */
  font-size: 0.875rem; /* text-sm */
  font-weight: 500; /* font-medium */
  line-height: 1;
}

/* Ensure proper spacing in chat header */
header .flex.items-center.gap-4 {
  min-width: 0;
}

header .flex.flex-col.min-w-0 {
  min-width: 0;
  flex: 1;
}

/* --- Center chat list row icon and label vertically --- */
.chats-row .flex.items-center,
.chats-row-active .flex.items-center {
  align-items: center !important;
  min-height: 44px;
}
.chats-row .flex.flex-col.justify-center,
.chats-row-active .flex.flex-col.justify-center {
  justify-content: center !important;
  min-height: 36px !important;
  height: 44px;
  display: flex !important;
}

/* --- Center chat header icon and label vertically --- */
header .flex.items-center.gap-1.w-full.min-w-0.overflow-hidden,
header .flex.items-center.gap-3.min-w-0.flex-1 {
  align-items: center !important;
}
header .flex.flex-col.min-w-0.flex-1 {
  justify-content: center !important;
  min-height: 40px;
  height: 44px;
  display: flex !important;
}

/* Remove extra margin from chat header label */
header .font-medium.text-lg.leading-tight.truncate,
header .font-semibold.text-lg.leading-tight.truncate {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
  display: flex;
  align-items: center;
  height: 100%;
}

/* ————————————————————————————————————————————————
   ➒  Chat view overflow prevention for long pulse names
   ———————————————————————————————————————————————— */

/* Prevent horizontal scrolling in chat view */
.flex-1.flex.flex-col.bg-soft.overflow-hidden {
  overflow-x: hidden !important;
  max-width: 100vw;
}

/* Ensure chat header doesn't overflow */
header.overflow-hidden {
  overflow-x: hidden !important;
  max-width: 100%;
}

/* Ensure chat intro block doesn't overflow */
.w-full.flex.flex-col.items-center.justify-center.pt-\[12vh\].pb-\[12vh\].bg-soft.overflow-hidden {
  overflow-x: hidden !important;
  max-width: 100%;
}

/* Ensure messages container doesn't overflow */
.flex-1.overflow-y-auto.overflow-x-hidden {
  overflow-x: hidden !important;
  max-width: 100%;
}

/* Ensure chat bubbles don't cause horizontal overflow */
.chats-bubble {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Ensure input container doesn't overflow */
footer.fixed.bottom-0.left-0.w-full {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Ensure all flex containers in chat view respect width constraints */
.flex-1.flex.flex-col.bg-soft.overflow-hidden * {
  max-width: 100%;
}

/* Specific fix for chat header content */
header .flex.items-center.gap-3.pl-12.w-full.min-w-0.overflow-hidden {
  max-width: calc(100vw - 2rem); /* Account for padding */
}

/* Ensure proper text wrapping in chat messages */
.chats-bubble span {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Ensure bullet lists display properly in chat messages */
.chats-bubble ul {
  list-style-type: disc !important;
  margin: 0.5rem 0 !important;
  padding-left: 1.5rem !important;
}

.chats-bubble li {
  display: list-item !important;
  margin: 0.25rem 0 !important;
  line-height: 1.5 !important;
}

.chats-bubble ol {
  list-style-type: decimal !important;
  margin: 0.5rem 0 !important;
  padding-left: 1.5rem !important;
}

.chats-bubble ol li {
  display: list-item !important;
  margin: 0.25rem 0 !important;
  line-height: 1.5 !important;
}

  header.overflow-hidden {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

/* Mobile-specific overflow prevention */
@media (max-width: 999768px) {
  .flex-1.flex.flex-col.bg-soft.overflow-hidden {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden !important;
  }



  .w-full.flex.flex-col.items-center.justify-center.pt-\[12vh\].pb-\[12vh\].bg-soft.overflow-hidden {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }
}

/* ————————————————————————————————————————————————
   ➋  Emoji Picker Customization
   ———————————————————————————————————————————————— */
emoji-picker {
  --epr-emoji-size: 2rem;
  --epr-emoji-font-size: 1.5rem;
  --epr-category-label-font-size: 0.75rem;
  --epr-category-label-font-weight: 600;
  --epr-category-label-height: 2rem;
  --epr-search-input-font-size: 0.875rem;
  --epr-search-input-border-radius: 0.75rem;
  --epr-search-input-padding: 0.5rem 0.75rem;
  --epr-emoji-padding: 0.5rem;
  --epr-preview-height: 3.5rem;
  --epr-header-padding: 0.75rem 1rem;
  --epr-header-height: 3rem;
  --epr-footer-height: 3rem;
  --epr-footer-padding: 0.75rem 1rem;
  --epr-skin-tone-picker-height: 2.5rem;
  --epr-width: 100%;
  --epr-height: 20rem;
  --epr-max-height: 20rem;
  --epr-bg-color: #ffffff;
  --epr-text-color: #1f2937;
  --epr-border-color: #e5e7eb;
  --epr-category-label-bg-color: #f9fafb;
  --epr-category-label-text-color: #4f46e5;
  --epr-search-input-bg-color: #f3f4f6;
  --epr-search-input-text-color: #1f2937;
  --epr-search-input-border-color: #e5e7eb;
  --epr-search-input-focus-border-color: #4f46e5;
  --epr-emoji-hover-bg-color: #eef2ff;
  --epr-emoji-selected-bg-color: #e0e7ff;
  --epr-preview-bg-color: #f9fafb;
  --epr-preview-text-color: #1f2937;
  --epr-preview-border-color: #e5e7eb;
  --epr-skin-tone-picker-bg-color: #ffffff;
  --epr-skin-tone-picker-border-color: #e5e7eb;
  --epr-footer-bg-color: #f9fafb;
  --epr-footer-text-color: #6b7280;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  background: #ffffff;
}

/* Target emoji picker shadow DOM elements */
emoji-picker::part(search) {
  border-radius: 0.75rem;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
}

emoji-picker::part(search):focus-within {
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

emoji-picker::part(category-button) {
  border-radius: 0.5rem;
  transition: all 0.2s;
}

emoji-picker::part(category-button):hover {
  background-color: #eef2ff;
}

emoji-picker::part(category-button-active) {
  background-color: #e0e7ff;
  color: #4f46e5;
}

emoji-picker::part(emoji) {
  border-radius: 0.5rem;
  transition: all 0.15s;
}

emoji-picker::part(emoji):hover {
  background-color: #eef2ff;
  transform: scale(1.1);
}

emoji-picker::part(preview) {
  border-top: 1px solid #e5e7eb;
  background-color: #f9fafb;
}

emoji-picker::part(footer) {
  border-top: 1px solid #e5e7eb;
  background-color: #f9fafb;
}

/* Additional styling for emoji picker internal elements */
emoji-picker input[type="search"],
emoji-picker input[type="text"] {
  border-radius: 0.75rem;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  color: #1f2937;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
}

emoji-picker input[type="search"]:focus,
emoji-picker input[type="text"]:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

emoji-picker button {
  border-radius: 0.5rem;
  transition: all 0.2s;
}

emoji-picker button:hover {
  background-color: #eef2ff;
}

emoji-picker button[aria-pressed="true"] {
  background-color: #e0e7ff;
  color: #4f46e5;
}

/* Style emoji grid items */
emoji-picker .emoji-grid button,
emoji-picker button[data-emoji] {
  border-radius: 0.5rem;
  transition: all 0.15s;
}

emoji-picker .emoji-grid button:hover,
emoji-picker button[data-emoji]:hover {
  background-color: #eef2ff;
  transform: scale(1.1);
}

/* Category labels */
emoji-picker .category-label {
  color: #4f46e5;
  font-weight: 600;
  font-size: 0.75rem;
  background-color: #f9fafb;
}

/* Additional wrapper styling for emoji picker */
.emoji-picker-custom {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

/* Deep selectors for emoji picker shadow DOM (if needed) */
emoji-picker * {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Style the emoji picker container to match theme */
emoji-picker {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Ensure emoji picker matches drawer background */
emoji-picker {
  background: linear-gradient(to bottom, #ffffff, #faf5ff) !important;
}

/* Avatar column with vertical stem (connects avatar to reply card) */
.avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px; /* matches w-10 avatar */
  min-width: 40px;
}
.avatar-col .avatar-stem {
  width: 2px;
  background: #e5e7eb; /* gray-200 */
  border-radius: 9999px;
  margin-top: 6px;
  flex: 1 1 auto; /* fill remaining height of the row */
  position: relative;
  pointer-events: none;
}

/* Stronger word breaking to prevent overflow in bubbles */
.chats-bubble,
.chats-bubble * {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* ————————————————————————————————————————————————
   ➓  Reply Thread Card Styles
   ———————————————————————————————————————————————— */

/* Wrapper for reply thread message content */
.reply-thread-message-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Connector line from message bubble to card */
.reply-thread-wrapper {
  position: relative;
  margin-top: 12px;
  margin-left: 0;
  padding-left: 0;
}

.reply-thread-connector {
  position: absolute;
  left: 0;
  top: -12px;
  width: 2px;
  height: 12px;
  background: #e5e7eb; /* gray-200 */
  z-index: 1;
}

/* Reply thread card */
.reply-thread-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f3f4f6; /* brand-tinted: gray-100 */
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 12px;
  padding: 12px 16px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.reply-thread-card:hover {
  background: #f9fafb; /* gray-50 */
  border-color: #d1d5db; /* gray-300 */
}

.reply-thread-card:focus {
  outline: 2px solid #4f46e5; /* primary */
  outline-offset: 2px;
  border-radius: 12px;
}

/* Pending state */
.reply-thread-card--pending {
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}

.reply-thread-card--pending:hover {
  background: #f3f4f6;
  border-color: #e5e7eb;
}

/* Icon container */
.reply-thread-card__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border-radius: 50%;
  padding: 2px;
}

.reply-thread-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

/* Content area (title and subtitle) */
.reply-thread-card__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Title */
.reply-thread-card__title {
  font-weight: 600;
  font-size: 14px;
  color: #111827; /* gray-900 */
  line-height: 1.4;
  /* Truncate after 2 lines with ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* Subtitle (time or "Generating...") */
.reply-thread-card__subtitle {
  font-size: 12px;
  color: #6b7280; /* gray-500 */
  line-height: 1.4;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

/* Chevron */
.reply-thread-card__chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af; /* gray-400 */
  width: 20px;
  height: 20px;
}

/* Ensure proper spacing in message bubble */
.chats-bubble .reply-thread-wrapper {
  margin-top: 12px;
}

/* Message highlight animation for jumping to pinned messages */
.message-highlight {
  background-color: rgba(79, 70, 229, 0.2) !important;
  border-radius: 8px !important;
  animation: messageHighlightFade 3s ease-out;
  padding: 4px !important;
  margin: -2px !important;
  position: relative;
  z-index: 10;
}

@keyframes messageHighlightFade {
  0% {
    background-color: rgba(79, 70, 229, 0.35);
  }
  20% {
    background-color: rgba(79, 70, 229, 0.28);
  }
  40% {
    background-color: rgba(79, 70, 229, 0.22);
  }
  60% {
    background-color: rgba(79, 70, 229, 0.16);
  }
  80% {
    background-color: rgba(79, 70, 229, 0.1);
  }
  100% {
    background-color: transparent;
  }
}


/* ————————————————————————————————————————————————
   Recent Topics Horizontal Scroll
   ———————————————————————————————————————————————— */
/* Hide scrollbars for recent topics scroll container */
.recent-topics-scroll::-webkit-scrollbar {
  display: none;
}

/* Ensure smooth horizontal scrolling on mobile */
.recent-topics-scroll {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ————————————————————————————————————————————————
   Day Dividers
   ———————————————————————————————————————————————— */
/* Day divider line with centered date label */
.chats-day-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 16px 0 20px 0;
  position: relative;
}

.chats-day-divider::before,
.chats-day-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb; /* gray-200 */
}

.chats-day-divider::before {
  margin-right: 12px;
}

.chats-day-divider::after {
  margin-left: 12px;
}

.chats-day-divider span {
  font-size: 12px;
  font-weight: 500;
  color: #6b7280; /* gray-500 */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  background: transparent;
  padding: 0 4px;
}

/* ————————————————————————————————————————————————
   Message Meta (Name + Time)
   ———————————————————————————————————————————————— */
.chats-message-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.2;
}

.chats-message-name {
  font-weight: 600;
  color: #111827; /* gray-900 */
}

.chats-message-time {
  font-size: 12px;
  font-weight: 400;
  color: #9ca3af; /* gray-400 */
}

/* ————————————————————————————————————————————————
   Topic Creation Card
   Rich UI for "new topic" messages showing topic info
   ———————————————————————————————————————————————— */
.topic-creation-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 420px;
  width: 100%;
}

.topic-creation-card__header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
}

.topic-creation-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.topic-creation-card__hash {
  font-size: 20px;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.topic-creation-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 0;
  min-width: 0;
  flex: 1;
}

.topic-creation-card__name-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.topic-creation-card__author {
  font-weight: 600;
  font-size: 14px;
  color: #111827; /* gray-900 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.topic-creation-card__time {
  font-size: 12px;
  color: #9ca3af; /* gray-400 */
  white-space: nowrap;
}

.topic-creation-card__action-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
}

.topic-creation-card__action {
  font-size: 14px;
  color: #6b7280; /* gray-500 */
  flex-shrink: 0;
}

.topic-creation-card__topic-name {
  font-weight: 600;
  font-size: 14px;
  color: #6366f1; /* indigo-500 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.topic-creation-card__connector {
  margin-left: 0px;
  margin-top: -1px;
  margin-bottom: -7px;
  height: 20px;
  display: flex;
  align-items: flex-start;
}

.topic-creation-card__connector svg {
  display: block;
}

.topic-creation-card__connector svg path {
  stroke: #d1d5db; /* gray-300 */
}

.topic-creation-card__preview {
  margin-left: 40px;
  background: white;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.15s ease;
  max-width: 380px;
}

.topic-creation-card__preview:hover {
  border-color: #c7d2fe; /* indigo-200 */
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.1);
}

.topic-creation-card__preview-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f3f4f6; /* gray-100 */
}

.topic-creation-card__preview-hash {
  font-size: 16px;
  font-weight: 700;
  color: #6366f1; /* indigo-500 */
  flex-shrink: 0;
}

.topic-creation-card__preview-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827; /* gray-900 */
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-creation-card__preview-count {
  font-size: 11px;
  color: #9ca3af; /* gray-400 */
  padding: 2px 6px;
  background: #f3f4f6; /* gray-100 */
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.topic-creation-card__preview-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.topic-creation-card__preview-message {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
}

.topic-creation-card__preview-avatar {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  flex-shrink: 0;
  object-fit: cover;
}

.topic-creation-card__preview-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}

.topic-creation-card__preview-author {
  font-size: 12px;
  font-weight: 600;
  color: #374151; /* gray-700 */
}

.topic-creation-card__preview-text {
  font-size: 13px;
  color: #6b7280; /* gray-500 */
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* End: 4_chats.css */

/* Begin: 5_contacts.css */
/**
 * Contacts Page Styles
 * 
 * Uses teal as the primary accent color to differentiate from other pages.
 * Follows mobile-first design with responsive breakpoints.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE CONTAINER
   ═══════════════════════════════════════════════════════════════════════════ */

.contacts-page {
  min-height: 100%;
  background: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.contacts-search-bar {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
}

.contacts-search-input {
  transition: border-color 0.15s, box-shadow 0.15s;
}

.contacts-search-input:focus {
  background: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILTER CHIPS
   ═══════════════════════════════════════════════════════════════════════════ */

.contacts-filters {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.contacts-filters::-webkit-scrollbar {
  display: none;
}

.contacts-filter-chip {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 9999px;
  border: 1px solid transparent;
  transition: all 0.15s;
  display: flex;
  align-items: center;
}

.contacts-filter-chip:hover {
  background: #e5e7eb;
  color: #374151;
}

.contacts-filter-chip--active {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #0d9488;
  background: #ccfbf1;
  border-radius: 9999px;
  border: 1px solid #5eead4;
  display: flex;
  align-items: center;
}

.contacts-sort-btn {
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT LIST
   ═══════════════════════════════════════════════════════════════════════════ */

.contacts-list {
  padding-bottom: 100px; /* Space for FAB and bottom nav */
}

.contacts-section-header {
  letter-spacing: 0.05em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT CARD
   ═══════════════════════════════════════════════════════════════════════════ */

.contacts-card {
  transition: all 0.15s;
}

.contacts-card:active {
  transform: scale(0.98);
}

.contacts-avatar {
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.2);
}

.contacts-avatar img {
  border-radius: 9999px;
}

/* Handle image load failure - show initials */
.contacts-avatar img[style*="display: none"] + span {
  display: flex !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKELETON LOADING
   ═══════════════════════════════════════════════════════════════════════════ */

.contacts-skeleton {
  /* Already styled inline with Tailwind */
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.contacts-empty {
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
  animation-delay: 0.1s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAB (FLOATING ACTION BUTTON)
   ═══════════════════════════════════════════════════════════════════════════ */

.contacts-fab {
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}

.contacts-fab:active {
  transform: scale(0.95);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════════════ */

.contacts-modal-overlay {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.contacts-modal {
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
}

@media (min-width: 640px) {
  .contacts-modal {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  }
}

.contacts-modal-header {
  /* Styled inline */
  display: flex;
}

.contacts-modal-body {
  /* Styled inline */
  flex: 1;
}

.contacts-modal-footer {
  /* Styled inline */
  display: flex;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM INPUTS
   ═══════════════════════════════════════════════════════════════════════════ */

.contacts-input {
  transition: border-color 0.15s, box-shadow 0.15s;
}

.contacts-input:focus {
  background: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DETAIL MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.contacts-detail-modal {
  /* Same as contacts-modal */
  display: flex;
}

.contacts-avatar-large {
  box-shadow: 0 4px 15px rgba(13, 148, 136, 0.25);
}

.contacts-avatar-large img {
  border-radius: 9999px;
}

/* Handle image load failure - show initials */
.contacts-avatar-large img[style*="display: none"] + span {
  display: flex !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONFIRM MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.contacts-confirm-modal {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTEXT MENU
   ═══════════════════════════════════════════════════════════════════════════ */

.contacts-context-menu {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  animation: menuSlideIn 0.15s ease;
}

@keyframes menuSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {
  .contacts-list {
    padding-bottom: 80px;
  }
  
  .contacts-fab {
    bottom: 5rem;
    right: 2rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE SUPPORT (Future)
   ═══════════════════════════════════════════════════════════════════════════ */

/*
@media (prefers-color-scheme: dark) {
  .contacts-page {
    background: #1f2937;
  }
  
  .contacts-card {
    background: #374151;
    border-color: #4b5563;
  }
  
  ... etc
}
*/

/* ═══════════════════════════════════════════════════════════════════════════
   VOICE AGENT CONTACT MODALS
   ═══════════════════════════════════════════════════════════════════════════ */

.voice-agent-contact-view-overlay,
.voice-agent-contacts-list-overlay {
  /* Reuse existing voice agent modal patterns from 7_voice_agent.css */
  z-index: 10001;
}

.voice-agent-contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.voice-agent-contact-card:hover {
  background: #f3f4f6;
}

.voice-agent-contact-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
}

.voice-agent-contact-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.voice-agent-contact-card__info {
  flex: 1;
  min-width: 0;
}

.voice-agent-contact-card__name {
  font-weight: 600;
  color: #1f2937;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-agent-contact-card__email {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-agent-contact-card__company {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}

.voice-agent-contact-card__favorite {
  color: #fbbf24;
  flex-shrink: 0;
}

/* End: 5_contacts.css */

/* Begin: 5_new.css */
:root{
  --stack-step: 10px;   /* how much each card peeks out in the deck         */
  --fan-step:  78px;   /* card-height (±72 px)  +  desired gap (±12 px)     */
}

.action-card{
  width:100%;
  border-radius:1rem;
  display:flex;align-items:center;gap:.75rem;
  padding:1.25rem;
  transition:all .15s ease;
}
.action-card:active{transform:scale(.95);}
.icon-wrap{
  width:2.5rem;height:2.5rem;
  border-radius:9999px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.125rem;
  flex-shrink:0;
}
.title{font-size:.875rem;font-weight:600;line-height:1.25rem;}
.desc {font-size:.75rem;line-height:1rem;opacity:.8;}
.smart-hr {
  border: none;
  height: 2px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  margin-top: 0;
  margin-bottom: 0;
}
.tip-icon{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
}

.suggestion-stack{
  position:absolute; left:0; right:0; width:100%;
  top:      calc(var(--i) * var(--stack-step));
  transform:scale(calc(1 - var(--i)*.03));
  filter:brightness(calc(1 - var(--i)*.04));
  transition:top .6s ease, transform .6s ease, filter .6s ease;
  pointer-events:none;
}

/* container */
.suggestion-list-stacked,
.suggestion-list-fanned{
  min-height:220px;        /* keep layout from collapsing */
  position:relative;
}

/* every card */
.suggestion-card{
  width:100%;
  left:0; right:0;
  position:absolute;       /* overridden later when fanned */
  transition:
    top      .7s cubic-bezier(.22,1,.36,1),
    transform .7s cubic-bezier(.22,1,.36,1),
    filter    .7s cubic-bezier(.22,1,.36,1);
}

.suggestion-fan{
  position:absolute; left:0; right:0; width:100%;
  top:      calc(var(--i) * var(--fan-step));    /*  ← bigger number  */
  transform:scale(1);
  filter:brightness(1);
  transition:top .6s ease, transform .6s ease, filter .6s ease;
  pointer-events:auto;
}

/* fanned-out list */
.suggestion-fan-in{
  position:static !important;
  pointer-events:auto;
  transform:scale(1) translateY(0) !important;
  filter:brightness(1);
  top:auto !important;     /* cancels the inline top set during stack */
  left:auto !important;
  right:auto !important;
  margin-top:.75rem !important;
}
.suggestion-list-fanned>.suggestion-fan-in:first-child{
  margin-top:0 !important; /* remove first gap */
}

/* ========================================
   NEW PAGE SPECIFIC STYLES
   ======================================== */
.insights-main-section {
  margin-top: 1.5rem;
}

/* New page specific empty state */
.insight-empty-state {
  text-align: center;
  padding: 5rem 2rem;
  animation: fadeIn 0.6s ease-out;
}

.insight-empty-icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.insight-empty-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.insight-empty-text {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 380px;
  margin: 0 auto;
  line-height: 1.7;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Custom scrollbar for new page insights section */
.insights-main-section::-webkit-scrollbar {
  width: 8px;
}

.insights-main-section::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

.insights-main-section::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.insights-main-section::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* ========================================
   BRAIN DUMP HERO BUTTON
   ======================================== */
.brain-dump-hero {
  display: flex;
  justify-content: center;
  animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.brain-dump-btn {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 0;
  border: none;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
  box-shadow: 
    0 4px 20px rgba(99, 102, 241, 0.3),
    0 8px 40px rgba(139, 92, 246, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.brain-dump-btn:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 
    0 8px 30px rgba(99, 102, 241, 0.4),
    0 16px 60px rgba(139, 92, 246, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.brain-dump-btn:active {
  transform: translateY(0) scale(0.98);
}

.brain-dump-btn-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 60%
  );
  animation: brainDumpGlow 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes brainDumpGlow {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.5;
  }
  50% {
    transform: translate(10%, 10%) rotate(5deg);
    opacity: 0.8;
  }
}

.brain-dump-btn-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  z-index: 1;
}

.brain-dump-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  color: white;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, transform 0.3s ease;
}

.brain-dump-btn:hover .brain-dump-icon {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.brain-dump-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.brain-dump-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.brain-dump-subtitle {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  margin-top: 2px;
}

/* Brain Dump Modal Styling */
.brain-dump-modal {
  animation: brainDumpModalEnter 0.3s ease-out;
}

@keyframes brainDumpModalEnter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.brain-dump-join-btn {
  position: relative;
  overflow: hidden;
}

.brain-dump-join-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.brain-dump-join-btn:hover::before {
  left: 100%;
}

/* ========================================
   COLLABORATION HERO BUTTON (ORANGE THEME)
   ======================================== */
.collab-hero {
  display: flex;
  justify-content: center;
  animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.collab-btn {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 0;
  border: none;
  background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #ea580c 100%);
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
  box-shadow: 
    0 4px 20px rgba(249, 115, 22, 0.3),
    0 8px 40px rgba(234, 88, 12, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.collab-btn:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 
    0 8px 30px rgba(249, 115, 22, 0.4),
    0 16px 60px rgba(234, 88, 12, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.collab-btn:active {
  transform: translateY(0) scale(0.98);
}

.collab-btn-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 60%
  );
  animation: collabGlow 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes collabGlow {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.5;
  }
  50% {
    transform: translate(10%, 10%) rotate(5deg);
    opacity: 0.8;
  }
}

.collab-btn-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  z-index: 1;
}

.collab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  color: white;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, transform 0.3s ease;
}

.collab-btn:hover .collab-icon {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.collab-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.collab-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.collab-subtitle {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  margin-top: 2px;
}

/* ========================================
   BRAIN DUMP ON-DEVICE RECORDING
   ======================================== */

/* Fullscreen overlay */
.brain-dump-fullscreen {
  padding: 0 !important;
}

/* Modal fullscreen mode */
.brain-dump-modal--fullscreen {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

/* Mode selection cards */
.brain-dump-mode-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #f9fafb;
  border: 2px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 100%;
  text-align: left;
}

.brain-dump-mode-card:hover {
  background: #f3f4f6;
  border-color: #e5e7eb;
  transform: translateY(-1px);
}

.brain-dump-mode-card:active {
  transform: scale(0.98);
}

.brain-dump-mode-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Recording UI container */
.brain-dump-recording-ui {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  padding: 0;
}

/* Recording header */
.brain-dump-recording-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0;
}

.brain-dump-close-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #f3f4f6;
  color: #6b7280;
  transition: all 0.2s;
}

.brain-dump-close-btn:hover {
  background: #e5e7eb;
  color: #374151;
}

/* Recording visual section */
.brain-dump-recording-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px 24px;
  flex-shrink: 0;
}

/* Brain icon with animation */
.brain-dump-brain-icon {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 16px;
}

.brain-dump-brain-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid #a855f7;
  opacity: 0.3;
}

.brain-dump-brain-icon.recording .brain-dump-brain-ring {
  animation: brainRingSpin 3s linear infinite;
  border: 3px dashed #a855f7;
  opacity: 0.6;
}

.brain-dump-brain-icon.paused .brain-dump-brain-ring {
  border-color: #f59e0b;
  opacity: 0.4;
}

@keyframes brainRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.brain-dump-brain-core {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4);
}

.brain-dump-brain-icon.recording .brain-dump-brain-core {
  animation: brainPulse 1.5s ease-in-out infinite;
}

.brain-dump-brain-icon.paused .brain-dump-brain-core {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.4);
}

@keyframes brainPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Timer */
.brain-dump-timer {
  font-size: 3rem;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: #1f2937;
  line-height: 1;
  margin-bottom: 8px;
}

/* Status */
.brain-dump-status {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brain-dump-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.brain-dump-status-dot.recording {
  background: #22c55e;
  animation: statusPulse 1s ease-in-out infinite;
}

.brain-dump-status-dot.paused {
  background: #f59e0b;
  animation: statusBlink 1s ease-in-out infinite;
}

.brain-dump-status-dot.connecting {
  background: #9ca3af;
  animation: statusPulse 0.8s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}

@keyframes statusBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Transcript area */
.brain-dump-transcript-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0 16px;
  background: #f9fafb;
  border-radius: 16px;
  overflow: hidden;
}

.brain-dump-transcript-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.brain-dump-transcript-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

.brain-dump-transcript-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100px;
}

.brain-dump-transcript-line {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  color: #374151;
  font-size: 15px;
  line-height: 1.6;
}

/* Controls */
.brain-dump-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 20px 24px;
  flex-shrink: 0;
}

.brain-dump-control-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.brain-dump-control-btn.pause {
  background: #fef3c7;
  color: #d97706;
}

.brain-dump-control-btn.pause:hover {
  background: #fde68a;
}

.brain-dump-control-btn.resume {
  background: #dcfce7;
  color: #16a34a;
}

.brain-dump-control-btn.resume:hover {
  background: #bbf7d0;
}

.brain-dump-control-btn.cancel {
  background: #f3f4f6;
  color: #ef4444;
}

.brain-dump-control-btn.cancel:hover {
  background: #fee2e2;
}

.brain-dump-finish-btn {
  padding: 16px 48px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  color: white;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
  transition: all 0.2s;
}

.brain-dump-finish-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(139, 92, 246, 0.5);
}

.brain-dump-finish-btn:active {
  transform: scale(0.98);
}

.brain-dump-finish-btn.disabled {
  background: #d1d5db;
  color: #9ca3af;
  box-shadow: none;
  cursor: not-allowed;
}

.brain-dump-finish-btn.disabled:hover {
  transform: none;
}

/* Hint */
.brain-dump-hint {
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
  padding: 0 24px 24px;
  flex-shrink: 0;
}

/* Processing UI */
.brain-dump-processing-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 48px 24px;
  text-align: center;
}

.brain-dump-processing-visual {
  margin-bottom: 24px;
}

.brain-dump-progress-bar {
  width: 100%;
  max-width: 280px;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}

.brain-dump-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #8b5cf6, #a855f7);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Stopped state fullscreen */
.brain-dump-stopped-fullscreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 48px 24px;
}

/* ========================================
   INSTANT MEETING STYLES
   ======================================== */

/* Hero Button */
.instant-meeting-hero {
  display: flex;
  justify-content: center;
  animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: 0.1s;
  opacity: 0;
}

.instant-meeting-btn {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 0;
  border: none;
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ea580c 100%);
  border-radius: 24px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
  box-shadow: 
    0 4px 20px rgba(245, 158, 11, 0.3),
    0 8px 40px rgba(249, 115, 22, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.instant-meeting-btn:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 
    0 8px 30px rgba(245, 158, 11, 0.4),
    0 16px 60px rgba(249, 115, 22, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.instant-meeting-btn:active {
  transform: translateY(0) scale(0.98);
}

.instant-meeting-btn-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 60%
  );
  animation: brainDumpGlow 4s ease-in-out infinite;
  pointer-events: none;
}

.instant-meeting-btn-content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  z-index: 1;
}

.instant-meeting-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  color: white;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
  transition: background 0.3s ease, transform 0.3s ease;
}

.instant-meeting-btn:hover .instant-meeting-icon {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.instant-meeting-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
}

.instant-meeting-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.instant-meeting-subtitle {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.4;
  margin-top: 2px;
}

/* Instant Meeting Modal */
.instant-meeting-modal {
  animation: brainDumpModalEnter 0.3s ease-out;
}

.instant-meeting-fullscreen {
  background: rgba(0, 0, 0, 0.9) !important;
}

.instant-meeting-modal--fullscreen {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}

/* Attendee Chip */
.im-attendee-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #f3f4f6;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
}

/* Current user chip (You) - special styling */
.im-attendee-chip--you {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-color: #f59e0b;
}

/* Mode Selection Buttons */
.im-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  transition: all 0.2s;
}

.im-mode-btn:hover:not(:disabled) {
  border-color: #f97316;
  background: #fff7ed;
}

.im-mode-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Recording UI */
.im-recording-ui {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fff7ed 100%);
}

.im-recording-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: white;
  border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0;
  padding-top: calc(16px + var(--native-app-top-margin, 0px));
}

.im-close-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: all 0.2s;
}

.im-close-btn:hover {
  background: #e5e7eb;
  color: #374151;
}

/* Recording Visual */
.im-recording-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 32px;
  flex-shrink: 0;
}

.im-lightning-icon {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.im-lightning-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid rgba(249, 115, 22, 0.3);
  animation: imLightningPulse 2s ease-in-out infinite;
}

@keyframes imLightningPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6;
  }
  50% {
    transform: scale(1.15);
    opacity: 0.3;
  }
}

.im-lightning-icon.recording .im-lightning-ring {
  border-color: rgba(34, 197, 94, 0.5);
  animation: imLightningRecording 1.5s ease-in-out infinite;
}

@keyframes imLightningRecording {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 0 30px 10px rgba(34, 197, 94, 0.2);
  }
}

.im-lightning-icon.paused .im-lightning-ring {
  border-color: rgba(234, 179, 8, 0.5);
  animation: none;
}

.im-lightning-core {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316, #ea580c);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(249, 115, 22, 0.4);
  z-index: 1;
}

.im-lightning-icon.recording .im-lightning-core {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 8px 32px rgba(34, 197, 94, 0.4);
}

.im-lightning-icon.paused .im-lightning-core {
  background: linear-gradient(135deg, #eab308, #ca8a04);
  box-shadow: 0 8px 32px rgba(234, 179, 8, 0.4);
}

.im-timer {
  font-size: 48px;
  font-weight: 700;
  color: #1f2937;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

.im-attendees-display {
  font-size: 16px;
  color: #6b7280;
  margin-bottom: 8px;
}

.im-status {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.im-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.im-status-dot.recording {
  background: #22c55e;
  animation: statusDotPulse 1s ease-in-out infinite;
}

.im-status-dot.paused {
  background: #eab308;
}

.im-status-dot.connecting {
  background: #9ca3af;
  animation: statusDotPulse 1s ease-in-out infinite;
}

@keyframes statusDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Transcript Area */
.im-transcript-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  margin: 0 16px;
  border-radius: 16px;
  overflow: hidden;
  min-height: 150px;
  max-height: 250px;
}

.im-transcript-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #f3f4f6;
  background: #fafafa;
}

.im-transcript-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.im-transcript-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 80px;
}

.im-transcript-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
}

/* Controls */
.im-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  flex-shrink: 0;
}

.im-control-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.im-control-btn.pause {
  background: #fef3c7;
  color: #d97706;
}

.im-control-btn.pause:hover {
  background: #fde68a;
}

.im-control-btn.resume {
  background: #dcfce7;
  color: #16a34a;
}

.im-control-btn.resume:hover {
  background: #bbf7d0;
}

.im-control-btn.cancel {
  background: #f3f4f6;
  color: #ef4444;
}

.im-control-btn.cancel:hover {
  background: #fee2e2;
}

.im-finish-btn {
  padding: 16px 48px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: white;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.4);
  transition: all 0.2s;
}

.im-finish-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(249, 115, 22, 0.5);
}

.im-finish-btn:active {
  transform: scale(0.98);
}

.im-finish-btn.disabled {
  background: #d1d5db;
  color: #9ca3af;
  box-shadow: none;
  cursor: not-allowed;
}

.im-finish-btn.disabled:hover {
  transform: none;
}

/* Hint */
.im-hint {
  text-align: center;
  font-size: 13px;
  color: #9ca3af;
  padding: 0 24px 24px;
  flex-shrink: 0;
}

/* Confirm UI (Review before saving) */
.im-confirm-ui {
  display: flex;
  flex-direction: column;
  padding: 32px 24px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fff7ed 100%);
  min-height: 100%;
}

.im-transcript-preview {
  max-height: 150px;
  overflow-y: auto;
  padding: 12px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Processing UI */
.im-processing-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 48px 24px;
  text-align: center;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fff7ed 100%);
}

.im-processing-visual {
  margin-bottom: 24px;
}

.im-progress-bar {
  width: 100%;
  max-width: 280px;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}

.im-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #f97316, #ea580c);
  border-radius: 4px;
  transition: width 0.3s ease;
}

/* Complete state fullscreen */
.im-complete-fullscreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 48px 24px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fff7ed 100%);
}
/* End: 5_new.css */

/* Begin: 6_calendar_connect.css */
/* Calendar connect (pre-home gate) */
.calendar-connect-bg {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 55%, #ffffff 100%);
  /* Prevent tiny viewport overflows (mobile address bar / 100vh quirks). */
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.calendar-connect-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 10px;
  flex-shrink: 0;
}

.calendar-connect-wordmark {
  height: auto;
}

.calendar-connect-cancel {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  padding: 8px 10px;
}

.calendar-connect-main {
  flex: 1;
  padding: 6px 18px 0;
  min-height: 0;
  overflow: auto;
}

.calendar-connect-title {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #111827;
  margin: 10px 0 8px;
}

.calendar-connect-subtitle {
  font-size: 0.98rem;
  color: #6b7280;
  line-height: 1.35;
  margin: 0 0 18px;
}

.calendar-connect-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calendar-connect-provider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  cursor: pointer;
  text-align: left;
}

.calendar-connect-provider-selected {
  border-color: rgba(74, 0, 224, 0.35);
  box-shadow: 0 0 0 3px rgba(74, 0, 224, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
}

.calendar-connect-provider:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  background: #fff;
}

.calendar-connect-provider-text {
  flex: 1;
  min-width: 0;
}

.calendar-connect-provider-title {
  font-size: 0.96rem;
  font-weight: 600;
  color: #111827;
}

.calendar-connect-provider-subtitle {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-connect-provider-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 18px;
}

.calendar-connect-check {
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: #16a34a;
  position: relative;
}

.calendar-connect-check::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 4px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.calendar-connect-footer {
  padding: 18px 18px 22px;
  flex-shrink: 0;
}

.calendar-connect-options {
  margin-top: 14px;
}

.calendar-connect-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.calendar-connect-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.calendar-connect-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.calendar-connect-toggle-track {
  width: 40px;
  height: 22px;
  border-radius: 9999px;
  background: #d1d5db;
  position: relative;
  transition: background 0.15s ease;
}

.calendar-connect-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.15);
  transition: transform 0.15s ease;
}

.calendar-connect-toggle input:checked + .calendar-connect-toggle-track {
  background: #4a00e0;
}

.calendar-connect-toggle input:checked + .calendar-connect-toggle-track::after {
  transform: translateX(18px);
}

.calendar-connect-toggle-text {
  flex: 1;
  min-width: 0;
}

.calendar-connect-toggle-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #111827;
}

.calendar-connect-toggle-subtitle {
  margin-top: 2px;
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.35;
}

.calendar-connect-field {
  margin-top: 10px;
}

.calendar-connect-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #9ca3af;
  margin: 10px 2px 6px;
}

.calendar-connect-select {
  width: 100%;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  color: #111827;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.calendar-connect-select:focus {
  outline: none;
  border-color: rgba(74, 0, 224, 0.35);
  box-shadow: 0 0 0 3px rgba(74, 0, 224, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
}

.calendar-connect-continue {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 14px 14px;
  font-size: 1rem;
  font-weight: 700;
}

.calendar-connect-continue-disabled {
  background: #d1d5db;
  color: #ffffff;
  cursor: not-allowed;
}

.calendar-connect-continue-enabled {
  background: #4a00e0;
  color: #ffffff;
  cursor: pointer;
}

.calendar-connect-skip {
  width: 100%;
  margin-top: 12px;
  border: 0;
  background: transparent;
  color: #111827;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 380px) {
  .calendar-connect-title {
    font-size: 1.45rem;
  }
}


/* End: 6_calendar_connect.css */

/* Begin: 6_interest.css */
/* ═══════════════════════════════════════════════════════════════════════
   INTEREST REGISTRATION PAGE
   Modern, clean styling for the interest registration form
   ═══════════════════════════════════════════════════════════════════════ */

/* Background */
.interest-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

.interest-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(138, 43, 226, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(75, 0, 130, 0.2) 0%, transparent 50%);
  animation: backgroundShift 20s ease-in-out infinite;
}

@keyframes backgroundShift {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-20px);
  }
}

/* Card Container */
.interest-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 48px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
  animation: slideUpFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive padding */
@media (max-width: 640px) {
  .interest-card {
    padding: 32px 24px;
    border-radius: 20px;
  }
}

/* Logo */
.interest-logo {
  filter: drop-shadow(0 4px 12px rgba(102, 126, 234, 0.3));
  animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Typography */
.interest-title {
  font-size: 32px;
  font-weight: 700;
  color: #1a202c;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.interest-desc {
  font-size: 16px;
  color: #4a5568;
  line-height: 1.6;
}

/* Form */
.interest-form {
  margin-top: 0;
}

/* Label */
.interest-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}

/* Input Fields */
.interest-input {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  color: #2d3748;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  outline: none;
  transition: all 0.2s ease;
  font-family: inherit;
}

.interest-input:focus {
  border-color: #667eea;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.interest-input:hover:not(:focus) {
  border-color: #cbd5e0;
}

.interest-input::placeholder {
  color: #a0aec0;
}

/* Select styling */
select.interest-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 20px;
  padding-right: 40px;
  cursor: pointer;
}

select.interest-input:focus {
  cursor: pointer;
}

/* Textarea */
textarea.interest-input {
  font-family: inherit;
  line-height: 1.6;
}

/* Error State */
.interest-input.border-red-500 {
  border-color: #f56565;
}

.interest-input.border-red-500:focus {
  border-color: #f56565;
  box-shadow: 0 0 0 4px rgba(245, 101, 101, 0.1);
}

/* Error Message */
.interest-error {
  margin-top: 6px;
  font-size: 13px;
  color: #e53e3e;
  display: flex;
  align-items-center;
}

/* Primary Button */
.interest-btn {
  width: 100%;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.interest-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.interest-btn:active:not(:disabled) {
  transform: translateY(0);
}

.interest-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary Button */
.interest-btn-secondary {
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #667eea;
  background: white;
  border: 2px solid #667eea;
  border-radius: 12px;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
}

.interest-btn-secondary:hover {
  background: #667eea;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.interest-btn-secondary:active {
  transform: translateY(0);
}

/* Success Screen Animations */
.interest-card [x-show="showSuccess"] {
  animation: successFadeIn 0.5s ease-out;
}

@keyframes successFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .interest-title {
    font-size: 26px;
  }
  
  .interest-desc {
    font-size: 14px;
  }
  
  .interest-label {
    font-size: 13px;
  }
  
  .interest-input {
    padding: 12px 14px;
    font-size: 14px;
  }
  
  .interest-btn,
  .interest-btn-secondary {
    padding: 12px 20px;
    font-size: 15px;
  }
}

/* Loading spinner icon animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Focus visible for accessibility */
.interest-btn:focus-visible,
.interest-btn-secondary:focus-visible,
.interest-input:focus-visible {
  outline: 2px solid #667eea;
  outline-offset: 2px;
}


/* End: 6_interest.css */

/* Begin: 6_onboarding.css */
/* Onboarding Modal Overlay */
.onboarding-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Modal Container */
.onboarding-modal {
  background: white;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Modal Header */
.onboarding-header {
  padding: 2rem 2rem 1rem;
  text-align: center;
  border-bottom: 1px solid #f3f4f6;
}

.onboarding-progress {
  width: 100%;
  height: 6px;
  background: #f3f4f6;
  border-radius: 3px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.onboarding-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4f46e5, #7c3aed);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.onboarding-step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.875rem;
  color: #6b7280;
}

/* Modal Content */
.onboarding-content {
  padding: 2rem;
  flex: 1;
  overflow-y: auto;
}

.onboarding-step {
  text-align: center;
}

.onboarding-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: white;
  box-shadow: 0 10px 25px rgba(79, 70, 229, 0.3);
}

.onboarding-step-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
}

.onboarding-step-description {
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* Feature List */
.onboarding-features {
  text-align: left;
  margin: 1.5rem 0;
  background: #f9fafb;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

.onboarding-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  cursor: default;
}

.onboarding-feature-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  flex-shrink: 0;
}

.onboarding-feature-text {
  color: #374151;
  font-size: 0.875rem;
}

/* Modal Actions */
.onboarding-actions {
  padding: 1.5rem 2rem 2rem;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-top: 1px solid #f3f4f6;
}

.onboarding-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  transition: all 0.2s;
  cursor: pointer;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.onboarding-btn:focus {
  ring: 2px solid #4f46e5;
  ring-offset: 2px;
}

.onboarding-btn-primary {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: white;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
  flex: 1;
  justify-content: center;
}

.onboarding-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4);
}

.onboarding-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.onboarding-btn-secondary {
  background: white;
  color: #6b7280;
  border: 1px solid #d1d5db;
}

.onboarding-btn-secondary:hover {
  background: #f9fafb;
  color: #374151;
}

.onboarding-btn-ghost {
  background: transparent;
  color: #6b7280;
  padding: 0.5rem;
}

.onboarding-btn-ghost:hover {
  color: #374151;
}

/* Calendar Sync Specific */
.calendar-sync-preview {
  background: #f9fafb;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}

.calendar-sync-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  cursor: default;
}

.calendar-sync-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-sync-status {
  background: #f0f9ff;
  border: 1px solid #0ea5e9;
  border-radius: 12px;
  padding: 1rem;
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.calendar-sync-status.syncing {
  background: #fef3c7;
  border-color: #f59e0b;
}

.calendar-sync-status.success {
  background: #f0fdf4;
  border-color: #22c55e;
}

.calendar-sync-status.error {
  background: #fef2f2;
  border-color: #ef4444;
}

.sync-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e5e7eb;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .onboarding-modal {
    margin: 1rem;
    max-height: 85vh;
    overflow-y: auto;
  }
  
  .onboarding-header,
  .onboarding-content {
    padding: 1.5rem;
  }
  
  .onboarding-actions {
    padding: 1rem 1.5rem 1.5rem;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  /* Step 3 mobile layout */
  .onboarding-actions .w-full {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  /* First row: Settings and Primary action */
  .onboarding-actions .w-full > :nth-child(1),
  .onboarding-actions .w-full > :nth-child(3) {
    flex: 1;
  }
  
  /* Second row wrapper for finish button */
  .onboarding-actions .w-full > :nth-child(2) {
    order: 3;
    width: 100%;
  }
  
  /* Make first two buttons sit side by side */
  .onboarding-actions .w-full::before {
    content: '';
    display: flex;
    width: 100%;
    gap: 0.75rem;
    order: 1;
  }
  
  .onboarding-btn-primary {
    width: auto;
  }
  
  .onboarding-icon {
    width: 64px;
    height: 64px;
    font-size: 2rem;
  }
}

/* Specific mobile layout for step 3 actions */
@media (max-width: 640px) {
  .onboarding-actions {
    padding: 1rem 1.5rem 1.5rem;
  }
  
  /* Step 3 specific mobile layout */
  [x-show="$store.onboarding.currentStep === 3"] .onboarding-actions .w-full {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  /* Top row with two buttons */
  [x-show="$store.onboarding.currentStep === 3"] .onboarding-actions .onboarding-btn:nth-child(1),
  [x-show="$store.onboarding.currentStep === 3"] .onboarding-actions .onboarding-btn:nth-child(3) {
    flex: 1;
  }
  
  /* Full-width finish button */
  [x-show="$store.onboarding.currentStep === 3"] .onboarding-actions .onboarding-btn:nth-child(2) {
    width: 100%;
    order: 3;
  }
}
/* End: 6_onboarding.css */

/* Begin: 6_org_onboarding.css */
/* Org onboarding (pre-home gate – shown after auth if user has no organization) */

.org-onboarding-bg {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 55%, #ffffff 100%);
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
.org-onboarding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 10px;
  flex-shrink: 0;
}

.org-onboarding-wordmark {
  height: auto;
}

.org-onboarding-cancel {
  appearance: none;
  background: transparent;
  border: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  padding: 8px 10px;
}

/* ── Main content ── */
.org-onboarding-main {
  flex: 1;
  padding: 6px 18px 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.org-onboarding-title {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #111827;
  margin: 10px 0 8px;
}

.org-onboarding-subtitle {
  font-size: 0.98rem;
  color: #6b7280;
  line-height: 1.35;
  margin: 0 0 20px;
}

/* ── Step 1: Option cards ── */
.org-onboarding-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.org-onboarding-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.org-onboarding-card:not(:disabled):hover {
  border-color: rgba(74, 0, 224, 0.25);
  box-shadow: 0 0 0 2px rgba(74, 0, 224, 0.07), 0 1px 2px rgba(16, 24, 40, 0.06);
}

.org-onboarding-card:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.org-onboarding-card-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.org-onboarding-card-text {
  flex: 1;
  min-width: 0;
}

.org-onboarding-card-title {
  font-size: 0.97rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}

.org-onboarding-card-desc {
  font-size: 0.84rem;
  color: #6b7280;
  line-height: 1.4;
}

.org-onboarding-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

.org-onboarding-card-action {
  font-size: 0.85rem;
  font-weight: 600;
  color: #4a00e0;
  display: inline-block;
}

.org-onboarding-card:disabled .org-onboarding-card-action {
  color: #9ca3af;
}

/* ── Step 2: Org setup form ── */
.org-onboarding-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.org-onboarding-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.org-onboarding-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 3px;
}

.org-onboarding-label-optional {
  font-weight: 400;
  color: #9ca3af;
  font-size: 0.78rem;
}

.org-onboarding-label-required {
  color: #ef4444;
  font-size: 0.85rem;
}

.org-onboarding-input,
.org-onboarding-select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 0.92rem;
  color: #111827;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.org-onboarding-input::placeholder {
  color: #9ca3af;
}

.org-onboarding-input:focus,
.org-onboarding-select:focus {
  border-color: rgba(74, 0, 224, 0.4);
  box-shadow: 0 0 0 3px rgba(74, 0, 224, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
}

.org-onboarding-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.org-onboarding-select option[value=""] {
  color: #9ca3af;
}

.org-onboarding-error {
  font-size: 0.82rem;
  color: #ef4444;
  margin-top: 2px;
}

/* ── Step 3: Invite emails ── */
.org-onboarding-invite-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.org-onboarding-email-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.org-onboarding-email-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.org-onboarding-email-input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 0.92rem;
  color: #111827;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  box-sizing: border-box;
  min-width: 0;
}

.org-onboarding-email-input::placeholder {
  color: #9ca3af;
}

.org-onboarding-email-input:focus {
  border-color: rgba(74, 0, 224, 0.4);
  box-shadow: 0 0 0 3px rgba(74, 0, 224, 0.10), 0 1px 2px rgba(16, 24, 40, 0.06);
}

.org-onboarding-email-remove {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 6px;
  transition: color 0.1s ease;
}

.org-onboarding-email-remove:hover {
  color: #6b7280;
}

.org-onboarding-add-email {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: #4a00e0;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

/* ── Footer ── */
.org-onboarding-footer {
  padding: 16px 18px 22px;
  flex-shrink: 0;
}

.org-onboarding-btn-primary {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 14px 14px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, opacity 0.12s ease;
}

.org-onboarding-btn-primary-enabled {
  background: #4a00e0;
  color: #ffffff;
}

.org-onboarding-btn-primary-enabled:hover {
  background: #3d00be;
}

.org-onboarding-btn-primary-disabled {
  background: #d1d5db;
  color: #ffffff;
  cursor: not-allowed;
}

.org-onboarding-footer-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.org-onboarding-footer-row .org-onboarding-btn-primary {
  flex: 1;
}

.org-onboarding-btn-skip {
  flex-shrink: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  color: #374151;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  padding: 14px 20px;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.org-onboarding-btn-skip:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.org-onboarding-btn-skip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 380px) {
  .org-onboarding-title {
    font-size: 1.45rem;
  }
}

/* End: 6_org_onboarding.css */

/* Begin: 6_signup.css */
/* Signup (redesign to match auth mock) */
.signup-bg {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 44px 18px 32px;
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 55%, #ffffff 100%);
}

.signup-container {
  width: 100%;
  max-width: 360px;
}

.signup-state {
  width: 100%;
}

.signup-hero {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 20px;
  max-width: 360px;
}

.signup-title {
  font-size: 1.65rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 8px 0;
  text-align: left;
}

.signup-subtitle {
  font-size: 0.98rem;
  font-weight: 500;
  color: #6b7280;
  line-height: 1.4;
  margin: 0 0 14px 0;
  text-align: left;
}

.signup-subtitle-muted {
  font-weight: 500;
  color: #4b5563;
}

.signup-emphasis {
  font-weight: 700;
  color: #4a00e0;
}

.signup-actions {
  margin-top: 14px;
}

.signup-provider-btn,
.signup-primary-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.signup-provider-btn {
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.signup-provider-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
}

.signup-provider-btn:active {
  background: #f3f4f6;
}

.signup-provider-btn-spaced {
  margin-top: 10px;
}

.signup-primary-btn {
  margin-top: 14px;
  background: #4a00e0;
  color: #ffffff;
  border: 1px solid #4a00e0;
  box-shadow: 0 2px 10px rgba(74, 0, 224, 0.18);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.signup-primary-btn:hover {
  background: #3c00b7;
  box-shadow: 0 4px 14px rgba(74, 0, 224, 0.22);
}

.signup-primary-btn:active {
  transform: translateY(1px);
}

.signup-other-options {
  display: block;
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: #111827;
  opacity: 0.9;
  cursor: pointer;
  text-decoration: none;
}

.signup-other-options:hover {
  opacity: 1;
  text-decoration: underline;
}

.signup-footer {
  margin: 12px 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: #9ca3af;
  line-height: 1.35;
}

.signup-link {
  color: #4a00e0;
  text-decoration: none;
  font-weight: 600;
}

.signup-link:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .signup-bg {
    padding: 36px 16px 28px;
  }
  .signup-title {
    font-size: 1.55rem;
  }
  .signup-subtitle {
    font-size: 0.95rem;
  }
}

/* End: 6_signup.css */

/* Begin: 7_smart_collab.css */
/* ...move any collab-specific styles here from inline or global CSS... */

/* End: 7_smart_collab.css */

/* Begin: 7_smart_dictate.css */
/* ...move any smart-dictate-specific styles here from inline or global CSS... */

.smart-dictate-card {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  height: 100%;
  max-height: calc(100vh - 96px);
  background: #fff;
  border-radius: 1.2rem;
  box-shadow: 0 2px 16px rgba(99,102,241,0.08), 0 1.5px 6px rgba(99,102,241,0.04);
  overflow: hidden;
  position: relative;
  transition: box-shadow .18s;
}

.smart-dictate-mic-btn {
  font-size: 2rem;
  box-shadow: 0 2px 8px rgba(99,102,241,0.08);
  transition: background .18s, transform .12s;
  position: relative;
  z-index: 1;
}
.pulse-mic {
  animation: pulseMic 1.1s infinite cubic-bezier(.4,0,.6,1);
}
@keyframes pulseMic {
  0% { box-shadow: 0 0 0 0 rgba(220,38,38,0.5);}
  70% { box-shadow: 0 0 0 12px rgba(220,38,38,0);}
  100% { box-shadow: 0 0 0 0 rgba(220,38,38,0);}
}
.mic-wave {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(rgba(220,38,38,0.15), transparent 70%);
  animation: micWave 1.2s infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes micWave {
  0% { opacity: 0.7; transform: translate(-50%,-50%) scale(1);}
  70% { opacity: 0.2; transform: translate(-50%,-50%) scale(1.25);}
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.4);}
}

.smart-dictate-transcript {
  width: 100%;
  min-height: 10rem;
  max-height: 100%;
  font-size: 1.1rem;
  color: #22223b;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  padding: 0;
  line-height: 1.6;
  overflow-y: auto;
}
.smart-dictate-clear-btn:disabled,
.smart-dictate-create-btn:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.smart-dictate-edit-form {
  background: #fff;
  border-radius: 1.2rem;
  box-shadow: 0 2px 16px rgba(99,102,241,0.08), 0 1.5px 6px rgba(99,102,241,0.04);
  padding: 2rem 2rem 1.5rem 2rem;
}
.apex-beat {
  animation: apexBeat 1.4s ease-in-out infinite;
}
@keyframes apexBeat {
  0%,100% { transform:scale(1);   opacity:1; }
  50%     { transform:scale(1.08);opacity:.7; }
}

/* AI Loader Animation */
.ai-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ai-spinner {
  width: 48px; height: 48px;
  border: 5px solid #e0e7ff;
  border-top: 5px solid #6366f1;
  border-radius: 50%;
  animation: aiSpin 1s linear infinite;
  margin-bottom: 12px;
}
@keyframes aiSpin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}
.ai-dots {
  display: flex;
  gap: 6px;
  margin-top: 0;
}
.ai-dots span {
  display: block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #6366f1;
  opacity: 0.5;
  animation: aiDotPulse 1.2s infinite;
}
.ai-dots span:nth-child(2) { animation-delay: .2s;}
.ai-dots span:nth-child(3) { animation-delay: .4s;}
@keyframes aiDotPulse {
  0%, 100% { opacity: 0.5; transform: scale(1);}
  50% { opacity: 1; transform: scale(1.3);}
}

.dictate-timer {
  font-size: 2.1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #3730a3;
  min-width: 90px;
  text-align: right;
  user-select: none;
  line-height: 1;
  font-family: 'JetBrains Mono', 'Fira Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
}

/* End: 7_smart_dictate.css */

/* Begin: 7_smart_schedule.css */
/* Schedule page specific styles */

/* Schedule rail container */
#schedule-rail {
  margin-left: 5px;
  margin-right: 5px;
}

/* Attendee chips styles */
.attendee-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}

.attendee-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  font-size: 0.875rem;
  color: #374151;
  transition: all 0.2s ease;
}

.attendee-chip:hover {
  background-color: #e5e7eb;
}

.attendee-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #d1d5db;
  color: #6b7280;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.attendee-chip-remove:hover {
  background-color: #9ca3af;
  color: #ffffff;
}

.attendee-search-input {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.attendee-search-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.attendee-dropdown {
  max-height: 200px;
  overflow-y: auto;
}

.attendee-name {
  font-weight: 500;
  color: #374151;
}

/* Time row layout for start/end time inputs */
.time-row {
  display: flex;
  align-items: flex-start;
}

/* Google Calendar footer styles */
.google-cal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Meeting duration badge */
.meeting-duration-badge {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background-color: #f3f4f6;
  color: #6b7280;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 9999px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  pointer-events: none;
  z-index: 2;
}

/* Smart Schedule specific styles */
.opt-btn {
  padding: 0.4rem 0.9rem;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  font-size: 0.8rem;
  background: #fff;
  cursor: pointer;
  transition: 0.2s;
}

.opt-btn:hover {
  background: #f3f4f6;
}

.slot-card {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.confirm-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 1rem;
}

.confirm-card h3 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.email-card {
  border: 1px solid #e5e7eb;
  border-left: 4px solid #4f46e5;
  border-radius: 0.5rem;
  background: #fff;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.email-card h3 {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.email-card textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  padding: 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.85rem;
}

.primary-btn {
  background: #4f46e5;
  color: #fff;
  padding: 0.55rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
}

.primary-btn:hover {
  background: #4338ca;
}

.input-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
}

.input-bar input {
  flex: 1;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  cursor: pointer;
}

.flex.items-center.justify-center.w-10.h-10.rounded-full.bg-ai-light.mt-1.overflow-hidden {
  border-radius: 50% !important;
  overflow: hidden !important;
  aspect-ratio: 1/1;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  backdrop-filter: blur(2px);
}

.confirm-modal-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18),
    0 1.5px 6px rgba(99, 102, 241, 0.08);
  padding: 2.2rem 2rem 1.5rem 2rem;
  max-width: 370px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn.btn-primary {
  background: #4f46e5;
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 0.6rem;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  transition: background 0.18s;
  cursor: pointer;
}

.btn.btn-primary:hover {
  background: #4338ca;
}

.btn.btn-text {
  background: transparent;
  color: #4f46e5;
  border: none;
  font-weight: 500;
  font-size: 1rem;
  padding: 0.7rem 1.2rem;
  border-radius: 0.6rem;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.btn.btn-text:hover {
  background: #f3f4f6;
  color: #3730a3;
}

.email-modal-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18),
    0 1.5px 6px rgba(99, 102, 241, 0.08);
  padding: 2.2rem 2rem 1.5rem 2rem;
  max-width: 410px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: fadeIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.email-modal-textarea {
  min-height: 120px;
  font-size: 1rem;
  border-radius: 0.7rem;
  border: 1.5px solid #e5e7eb;
  background: #f8fafc;
  color: #22223b;
  transition: border 0.18s;
}

.email-modal-textarea:focus {
  border-color: #4f46e5;
  outline: none;
  background: #fff;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* End: 7_smart_schedule.css */

/* Begin: 7_smart_tasks.css */
/* ...move any smart-tasks-specific styles here from inline or global CSS... */

.smart-dictate-card {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  height: 100%;
  max-height: calc(100vh - 96px);
  background: #fff;
  border-radius: 1.2rem;
  box-shadow: 0 2px 16px rgba(99,102,241,0.08), 0 1.5px 6px rgba(99,102,241,0.04);
  overflow: hidden;
  position: relative;
  transition: box-shadow .18s;
}

.dictate-timer {
  font-size: 2.1rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #3730a3;
  min-width: 90px;
  text-align: right;
  user-select: none;
  line-height: 1;
  font-family: 'JetBrains Mono', 'Fira Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
}

/* ...reuse mic, wave, ai-loader, etc. styles from 7_smart_dictate.css as needed... */

/* End: 7_smart_tasks.css */

/* Begin: 7_voice_agent.css */
/* ────────────────────────────────────────────────────────────────
   Voice Agent Modal Styles
   ──────────────────────────────────────────────────────────────── */

/* 
 * Mobile Modal Height Fix
 * On Android WebView and iOS Safari, vh units don't account for system UI.
 * We use dvh (dynamic viewport height) where supported, with safe area insets.
 * The --va-modal-max-height custom property is used by all dialog modals.
 * 
 * Native App Support:
 * The native Android/iOS wrapper sets --native-app-top-margin and --native-app-bottom-margin
 * CSS variables to account for camera holes, notches, and gesture navigation areas.
 * We combine these with env(safe-area-inset-*) for comprehensive safe area support.
 */
:root {
  /* Default modal max height - accounts for padding (40px) and safe areas */
  /* Uses native app margins (set by Android/iOS wrapper) + web safe area insets as fallback */
  --va-modal-max-height: calc(100vh - 40px - var(--native-app-top-margin, 0px) - var(--native-app-bottom-margin, 0px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  --va-modal-padding: 16px;
  /* Convenience variables for modal headers/footers */
  --va-safe-top: calc(var(--native-app-top-margin, 0px) + env(safe-area-inset-top, 0px));
  --va-safe-bottom: calc(var(--native-app-bottom-margin, 0px) + env(safe-area-inset-bottom, 0px));
}

/* Use dynamic viewport height where supported (modern browsers) */
@supports (height: 100dvh) {
  :root {
    --va-modal-max-height: calc(100dvh - 40px - var(--native-app-top-margin, 0px) - var(--native-app-bottom-margin, 0px) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  }
}

/*
 * Portrait Mode Modal Positioning Fix
 * NOTE: This was originally added to fix modals appearing too low on tall portrait screens.
 * However, since all view modals are now position:fixed with proper max-height calculations
 * using --va-modal-max-height, they should center correctly without this override.
 * 
 * Keeping this media query DISABLED for now. If issues resurface with specific modals,
 * add only those specific classes back.
 */
/*
@media (max-width: 600px) and (orientation: portrait) {
  .voice-agent-task-view-overlay,
  .voice-agent-tasks-list-overlay,
  .voice-agent-note-view-overlay,
  .voice-agent-notes-list-overlay,
  .voice-agent-event-view-overlay,
  .voice-agent-events-list-overlay,
  .voice-agent-content-view-overlay,
  .voice-agent-list-view-overlay,
  .voice-agent-messages-overlay,
  .voice-agent-pulse-view-overlay,
  .voice-agent-topics-overlay,
  .voice-agent-insight-view-overlay,
  .voice-agent-insights-list-overlay,
  .voice-agent-rec-review-overlay,
  .voice-agent-availability-overlay,
  .voice-agent-contact-view-overlay,
  .voice-agent-contacts-list-overlay {
    align-items: flex-start !important;
    padding-top: calc(24px + env(safe-area-inset-top, 0px)) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
*/

/*
 * Safe Area Padding for All Voice Agent Modal Overlays
 * Ensures modals don't overlap with camera holes, notches, or gesture areas
 * on native Android/iOS apps. Uses --va-safe-top and --va-safe-bottom.
 */
.voice-agent-task-view-overlay,
.voice-agent-tasks-list-overlay,
.voice-agent-note-view-overlay,
.voice-agent-notes-list-overlay,
.voice-agent-event-view-overlay,
.voice-agent-events-list-overlay,
.voice-agent-past-event-overlay,
.voice-agent-content-view-overlay,
.voice-agent-list-view-overlay,
.voice-agent-draft-overlay,
.voice-agent-messages-overlay,
.voice-agent-pulse-view-overlay,
.voice-agent-pulses-list-overlay,
.voice-agent-topics-overlay,
.voice-agent-insight-view-overlay,
.voice-agent-insights-list-overlay,
.voice-agent-rec-review-overlay,
.voice-agent-availability-overlay,
.voice-agent-contact-view-overlay,
.voice-agent-contacts-list-overlay,
.voice-agent-confirm-overlay,
.voice-agent-action-confirm-overlay {
  /* Apply native app safe area + web safe area as padding */
  padding-top: calc(16px + var(--va-safe-top, 0px));
  padding-bottom: calc(16px + var(--va-safe-bottom, 0px));
  padding-left: 16px;
  padding-right: 16px;
}

/* Modal Backdrop */
.voice-agent-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9998;
}

/* Bottom Sheet Modal */
.voice-agent-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
  border-radius: 24px 24px 0 0;
  z-index: 9999;
  max-height: var(--va-modal-max-height, 85vh);
  display: flex;
  flex-direction: column;
  /* Use combined safe area for bottom padding (native app + web safe area) */
  padding-bottom: var(--va-safe-bottom, env(safe-area-inset-bottom, 0));
}

/* Modal Header */
.voice-agent-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.voice-agent-modal__title {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.voice-agent-modal__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-agent-modal__close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.voice-agent-modal__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Main Content Area */
.voice-agent-modal__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 12px;
  overflow: hidden;
  min-height: 0;
}

/* Mic Area Container - holds mic indicator and mute button */
.voice-agent-mic-area {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  margin-bottom: 12px;
  padding: 0 16px;
}

/* Pulsing Mic Indicator */
.voice-agent-mic {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.voice-agent-mic__icon {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* Listening state - pulsing blue */
.voice-agent-mic--listening .voice-agent-mic__icon {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.5);
}

/* Audio-reactive pulse - subtle green ring that scales with voice */
.voice-agent-mic__pulse-reactive {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(34, 197, 94, 0.6);
  /* Scale from 1x to 1.5x based on mic level */
  transform: translate(-50%, -50%) scale(calc(1 + var(--mic-level, 0) * 0.5));
  opacity: calc(0.4 + var(--mic-level, 0) * 0.5);
  transition: transform 0.1s ease-out, opacity 0.1s ease-out, box-shadow 0.1s ease-out;
  /* Subtle green glow */
  box-shadow: 
    0 0 6px rgba(34, 197, 94, 0.3),
    0 0 calc(6px + var(--mic-level, 0) * 12px) rgba(34, 197, 94, calc(0.2 + var(--mic-level, 0) * 0.3));
}

/* Old static pulse animation (keeping for reference, no longer used) */
.voice-agent-mic--listening .voice-agent-mic__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.3);
  animation: voice-pulse 2s ease-out infinite;
}

.voice-agent-mic--listening .voice-agent-mic__pulse:nth-child(2) {
  animation-delay: 0.5s;
}

.voice-agent-mic--listening .voice-agent-mic__pulse:nth-child(3) {
  animation-delay: 1s;
}

/* Speaking state - purple/violet for AI */
.voice-agent-mic--speaking .voice-agent-mic__icon {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%);
  background-size: 200% 200%;
  animation: voice-gradient 2s ease infinite;
  color: #fff;
  box-shadow: 0 0 32px rgba(168, 85, 247, 0.6);
}

.voice-agent-mic--speaking .voice-agent-mic__wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(168, 85, 247, 0.5);
  animation: voice-wave 1.5s ease-out infinite;
}

.voice-agent-mic--speaking .voice-agent-mic__wave:nth-child(2) {
  animation-delay: 0.3s;
}

.voice-agent-mic--speaking .voice-agent-mic__wave:nth-child(3) {
  animation-delay: 0.6s;
}

/* Connecting state */
.voice-agent-mic--connecting .voice-agent-mic__icon {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

.voice-agent-mic--connecting .voice-agent-mic__icon iconify-icon {
  animation: voice-spin 1s linear infinite;
}

/* Thinking state - subtle breathing animation */
.voice-agent-mic--thinking .voice-agent-mic__icon {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  animation: voice-breathe 1.5s ease-in-out infinite;
}

@keyframes voice-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/* Error state */
.voice-agent-mic--error .voice-agent-mic__icon {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: #fff;
}

/* Muted state - dimmed appearance */
.voice-agent-mic--muted .voice-agent-mic__icon {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  box-shadow: none;
}

/* Using Tool state - steady purple glow to show Zunou is working */
.voice-agent-mic--using-tool .voice-agent-mic__icon {
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 50%, #6d28d9 100%);
  color: #fff;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.6);
  animation: voice-agent-tool-glow 1.5s ease-in-out infinite;
}

@keyframes voice-agent-tool-glow {
  0%, 100% {
    box-shadow: 0 0 24px rgba(168, 85, 247, 0.5);
  }
  50% {
    box-shadow: 0 0 32px rgba(168, 85, 247, 0.8);
  }
}

/* Mic Container - wraps mic + badge for positioning */
.voice-agent-mic-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Speaker Toggle Button - to the right of mic (mutes AI audio) */
.voice-agent-speaker-toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.voice-agent-speaker-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: scale(1.05);
}

.voice-agent-speaker-toggle--muted {
  background: rgba(251, 146, 60, 0.25);
  color: #fb923c;
}

.voice-agent-speaker-toggle--muted:hover {
  background: rgba(251, 146, 60, 0.35);
  color: #fdba74;
}

/* Keyboard Toggle Button - to the left of mic */
.voice-agent-keyboard-toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.voice-agent-keyboard-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: scale(1.05);
}

.voice-agent-keyboard-toggle--active {
  background: rgba(34, 197, 94, 0.25);
  color: #4ade80;
}

.voice-agent-keyboard-toggle--active:hover {
  background: rgba(34, 197, 94, 0.35);
  color: #86efac;
}

/* Text Input Bar */
.voice-agent-text-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.voice-agent-text-input__prompt {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(168, 139, 250, 0.9);
  font-size: 13px;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: rgba(168, 139, 250, 0.1);
  border-radius: 8px;
}

.voice-agent-text-input__prompt iconify-icon {
  flex-shrink: 0;
}

.voice-agent-text-input__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-agent-text-input__field {
  flex: 1;
  min-height: 44px;
  max-height: 100px;
  padding: 11px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  resize: none;
  overflow-y: auto;
  line-height: 1.4;
  font-family: inherit;
  /* Hide scrollbar but keep scroll functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.voice-agent-text-input__field::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.voice-agent-text-input__field::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.voice-agent-text-input__field:focus {
  border-color: rgba(168, 139, 250, 0.5);
  background: rgba(255, 255, 255, 0.12);
}

.voice-agent-text-input__cancel {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.voice-agent-text-input__cancel:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
  transform: scale(1.05);
}

.voice-agent-text-input__send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.voice-agent-text-input__send:hover:not(:disabled) {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.voice-agent-text-input__send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mode Switch Link - Switch to Full Text Chat */
.voice-agent-mode-switch {
  display: flex;
  justify-content: center;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.voice-agent-mode-switch__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.voice-agent-mode-switch__link:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
}

.voice-agent-mode-switch__link iconify-icon {
  opacity: 0.7;
}

.voice-agent-mode-switch__link:hover iconify-icon {
  opacity: 1;
  color: #14b8a6;
}

@keyframes voice-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}

@keyframes voice-wave {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}

@keyframes voice-gradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes voice-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Status Text */
.voice-agent-status {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

/* Status text when using tools - stronger purple to stand out */
.voice-agent-status--using-tool {
  color: #a78bfa;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(167, 139, 250, 0.4);
}

/* Status text when reconnecting - amber warning color */
.voice-agent-status--reconnecting {
  color: #fbbf24;
  font-weight: 600;
  animation: va-status-pulse 1.5s ease-in-out infinite;
}

/* Status text when connection failed - red error color */
.voice-agent-status--failed {
  color: #f87171;
  font-weight: 600;
}

@keyframes va-status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Tool Usage Indicator - now shown in status text instead of separate element */
/* Keep these for backwards compatibility but they're no longer used */
.voice-agent-tool-indicator {
  display: none;
}

.voice-agent-tool-indicator__spinner {
  display: none;
}

.voice-agent-tool-indicator__text {
  display: none;
}

@keyframes voice-agent-tool-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Error Message */
.voice-agent-error {
  color: #f87171;
  font-size: 12px;
  text-align: center;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 8px;
  flex-shrink: 0;
}

/* ───────────────────────────────────────────────────────────
   Fallback Choice UI - Shown when connection permanently fails
   ─────────────────────────────────────────────────────────── */
.voice-agent-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  gap: 20px;
  flex: 1;
}

.voice-agent-fallback__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(251, 191, 36, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fbbf24;
}

.voice-agent-fallback__icon svg {
  width: 32px;
  height: 32px;
}

.voice-agent-fallback__title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.voice-agent-fallback__message {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0;
  max-width: 280px;
}

.voice-agent-fallback__buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 280px;
  margin-top: 8px;
}

.voice-agent-fallback__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.voice-agent-fallback__btn--primary {
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  color: #fff;
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.voice-agent-fallback__btn--primary:hover {
  background: linear-gradient(135deg, #0d9488, #0f766e);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(20, 184, 166, 0.4);
}

.voice-agent-fallback__btn--secondary {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.voice-agent-fallback__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.voice-agent-fallback__btn svg {
  width: 20px;
  height: 20px;
}

.voice-agent-fallback__btn--close {
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  padding: 10px;
}

.voice-agent-fallback__btn--close:hover {
  color: rgba(255, 255, 255, 0.8);
  background: transparent;
}

/* Active session wrapper - ensures full width from the start */
.voice-agent-active-session {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
  min-height: 0;
}

/* Session content wrapper (for x-if template) */
.voice-agent-session-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 1;
  min-height: 0;
}

/* Wrapper to stabilize transcript area - ChatGPT style layout */
.voice-agent-transcript-wrapper {
  flex: 1;
  min-height: 200px;
  max-height: 280px;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}

/* Transcript container - scrollable, content anchored to bottom */
.voice-agent-transcript {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 12px;
  padding-bottom: 200px; /* Large bottom padding so bubbles can scroll to top of view */
  overflow-y: auto;
  flex: 1;
  /* Content starts at top, scrolls down naturally */
}

/* Prevent layout shift from appearing/disappearing elements */
.voice-agent-transcript > template {
  display: contents;
}

/* Hide scrollbar completely - use scroll but no visible scrollbar */
.voice-agent-transcript {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.voice-agent-transcript::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

/* Chat bubble item - base styles */
.voice-agent-transcript__item {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  animation: bubbleSlideIn 0.25s ease-out;
}

/* No animation - for seamless phase 2→3 transition (typing → completed) */
.voice-agent-transcript__item--no-animation {
  animation: none;
}

@keyframes bubbleSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* User messages - right aligned */
.voice-agent-transcript__item--user {
  align-self: flex-end;
}

/* Assistant messages - left aligned */
.voice-agent-transcript__item--assistant {
  align-self: flex-start;
}

/* Chat bubble base */
.voice-agent-transcript__bubble {
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.45;
}

/* User bubble - blue, right aligned corners */
.voice-agent-transcript__bubble--user {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
}

/* Assistant bubble - purple tinted, left aligned corners */
.voice-agent-transcript__bubble--assistant {
  background: rgba(139, 92, 246, 0.15);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 16px 16px 16px 4px;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Listening bubble - user side with equalizer */
.voice-agent-transcript__bubble--listening {
  padding: 12px 18px;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* User listening equalizer animation */
.voice-agent-listening-equalizer {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  transition: opacity 0.15s ease;
}

/* Hidden state - equalizer invisible but bubble remains */
.voice-agent-listening-equalizer--hidden {
  opacity: 0;
}

.voice-agent-listening-equalizer span {
  width: 3px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  animation: equalizerBounce 0.8s ease-in-out infinite;
}

.voice-agent-listening-equalizer span:nth-child(1) {
  height: 8px;
  animation-delay: 0s;
}

.voice-agent-listening-equalizer span:nth-child(2) {
  height: 16px;
  animation-delay: 0.15s;
}

.voice-agent-listening-equalizer span:nth-child(3) {
  height: 12px;
  animation-delay: 0.3s;
}

.voice-agent-listening-equalizer span:nth-child(4) {
  height: 6px;
  animation-delay: 0.45s;
}

@keyframes equalizerBounce {
  0%, 100% {
    transform: scaleY(0.4);
    opacity: 0.6;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* Inline equalizer - shows at end of text in active user bubble */
/* Always takes up space but uses opacity for show/hide to prevent layout jumps */
.voice-agent-listening-equalizer--inline {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 16px;
  margin-left: 8px;
  vertical-align: middle;
  /* Fixed width so space is always reserved */
  width: 18px;
  flex-shrink: 0;
  /* Hidden by default */
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Show equalizer bars when actively speaking */
.voice-agent-listening-equalizer--inline.voice-agent-listening-equalizer--active {
  opacity: 1;
}

/* When not active, hide the bars but keep space */
.voice-agent-listening-equalizer--inline:not(.voice-agent-listening-equalizer--active) span {
  animation: none;
  transform: scaleY(0.3);
  opacity: 0;
}

.voice-agent-listening-equalizer--inline span {
  width: 2px;
}

.voice-agent-listening-equalizer--inline span:nth-child(1) {
  height: 6px;
}

.voice-agent-listening-equalizer--inline span:nth-child(2) {
  height: 12px;
}

.voice-agent-listening-equalizer--inline span:nth-child(3) {
  height: 9px;
}

.voice-agent-listening-equalizer--inline span:nth-child(4) {
  height: 5px;
}

/* User bubble needs relative positioning */
.voice-agent-transcript__bubble--user {
  position: relative;
}

/* Thinking bubble - assistant side */
.voice-agent-transcript__bubble--thinking {
  padding: 12px 16px;
  min-width: 60px;
}

/* Thinking dots animation */
.voice-agent-transcript__thinking-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Hide thinking dots when text starts appearing */
.voice-agent-transcript__thinking-dots--hidden {
  opacity: 0;
  transform: scale(0.8);
  position: absolute;
  pointer-events: none;
}

.voice-agent-transcript__thinking-dots span {
  width: 8px;
  height: 8px;
  background: #a78bfa;
  border-radius: 50%;
  opacity: 0.4;
  animation: thinkingDot 1.4s ease-in-out infinite;
}

.voice-agent-transcript__thinking-dots span:nth-child(1) {
  animation-delay: 0s;
}

.voice-agent-transcript__thinking-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.voice-agent-transcript__thinking-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

/* Paused state - dots visible but not animating */
.voice-agent-transcript__thinking-dots--paused span {
  animation-play-state: paused;
  opacity: 0.25;
}

@keyframes thinkingDot {
  0%, 60%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  30% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Active AI bubble - unified container for thinking → typing transition */
.voice-agent-transcript__bubble--ai-active {
  position: relative;
  min-height: 44px;
  transition: background 0.3s ease, border 0.3s ease;
}

/* Typing text - hidden by default, fades in */
.voice-agent-transcript__text--typing {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.25s ease, max-height 0.3s ease;
}

/* Typing text visible state */
.voice-agent-transcript__text--visible {
  opacity: 1;
  max-height: 500px; /* Large enough for any response */
}

/* Typing bubble - assistant is speaking, shows interim text */
/* Styled nearly identical to final bubble for seamless transition */
.voice-agent-transcript__bubble--typing {
  background: rgba(139, 92, 246, 0.12);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 16px 16px 16px 4px;
  border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Empty transcript state - no longer needed with proper flex layout */

/* Footer / Actions */
.voice-agent-modal__footer {
  padding: 12px 20px 20px;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.voice-agent-modal__footer-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}

.voice-agent-end-btn {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #f87171;
  padding: 10px 28px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.voice-agent-end-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.4);
}

/* Switch to Text Chat Button */
.voice-agent-switch-text-btn {
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.25);
  color: #5eead4;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.voice-agent-switch-text-btn:hover {
  background: rgba(20, 184, 166, 0.2);
  border-color: rgba(20, 184, 166, 0.4);
}

.voice-agent-switch-text-btn span {
  font-size: 13px;
}

/* Mute Button - Icon only, circular */
.voice-agent-mute-btn {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(255, 255, 255, 0.7);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-agent-mute-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.voice-agent-mute-btn--muted {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.voice-agent-mute-btn--muted:hover {
  background: rgba(239, 68, 68, 0.3);
}

/* Footer button group */
.voice-agent-modal__footer-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Saving State (transition) */
.voice-agent-saving {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  text-align: center;
  animation: voice-agent-saving-fadein 0.3s ease-out;
}

@keyframes voice-agent-saving-fadein {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.voice-agent-saving__spinner {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(99, 102, 241, 0.9);
  animation: voice-agent-spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes voice-agent-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.voice-agent-saving__text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  font-weight: 500;
}

/* Session Complete State */
.voice-agent-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  text-align: center;
  animation: voice-agent-complete-fadein 0.4s ease-out;
}

@keyframes voice-agent-complete-fadein {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.voice-agent-complete__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 16px;
  animation: voice-agent-checkmark-pop 0.5s ease-out 0.2s both;
}

@keyframes voice-agent-checkmark-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.voice-agent-complete__title {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  animation: voice-agent-text-fadein 0.4s ease-out 0.3s both;
}

@keyframes voice-agent-text-fadein {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.voice-agent-complete__message {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin-bottom: 20px;
}

.voice-agent-complete__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #a5b4fc;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}

.voice-agent-complete__link:hover {
  background: rgba(99, 102, 241, 0.3);
  border-color: rgba(99, 102, 241, 0.5);
}

.voice-agent-complete__close {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px 16px;
}

.voice-agent-complete__close:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Completion Actions in Footer */
.voice-agent-complete__actions {
  display: flex;
  gap: 12px;
  width: 100%;
  justify-content: center;
}

.voice-agent-view-note-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.voice-agent-view-note-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
}

.voice-agent-done-btn {
  padding: 12px 24px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.voice-agent-done-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Completion subtitle */
.voice-agent-complete__subtitle {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  margin-bottom: 12px;
  animation: voice-agent-text-fadein 0.4s ease-out 0.4s both;
}

/* Try Button in More page */
.voice-agent-try-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.voice-agent-try-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
}

.voice-agent-try-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ─────────────────────────────────────────────────────────────────
   Confirm Close Dialog
   ───────────────────────────────────────────────────────────────── */
.voice-agent-confirm-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  padding-top: 40px;
  z-index: 10;
  border-radius: 20px 20px 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.voice-agent-confirm-dialog {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  max-width: 320px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.voice-agent-confirm-dialog__icon {
  color: #f59e0b;
  margin-bottom: 12px;
}

.voice-agent-confirm-dialog__title {
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
}

.voice-agent-confirm-dialog__message {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 20px;
}

.voice-agent-confirm-dialog__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.voice-agent-confirm-dialog__btn {
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.voice-agent-confirm-dialog__btn--cancel {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: #fff;
}

.voice-agent-confirm-dialog__btn--cancel:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.voice-agent-confirm-dialog__btn--confirm {
  background: #fee2e2;
  color: #dc2626;
}

.voice-agent-confirm-dialog__btn--confirm:hover {
  background: #fecaca;
}

/* Save button - green theme */
.voice-agent-confirm-dialog__btn--save {
  background: #dcfce7;
  color: #16a34a;
}

.voice-agent-confirm-dialog__btn--save:hover {
  background: #bbf7d0;
}

/* Save icon color */
.voice-agent-confirm-dialog__icon--save {
  color: #22c55e;
}

/* End session icon - neutral color */
.voice-agent-confirm-dialog__icon--end {
  color: #6366f1;
}

/* Wide dialog for stacked buttons */
.voice-agent-confirm-dialog--wide {
  max-width: 340px;
}

/* Stacked buttons layout */
.voice-agent-confirm-dialog__buttons--stacked {
  flex-direction: column;
  gap: 8px;
}

/* Save button with icon */
.voice-agent-confirm-dialog__btn--save {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #fff;
}

.voice-agent-confirm-dialog__btn--save:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* No save button - subtle warning style */
.voice-agent-confirm-dialog__btn--nosave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #f3f4f6;
  color: #6b7280;
}

.voice-agent-confirm-dialog__btn--nosave:hover {
  background: #e5e7eb;
  color: #4b5563;
}

/* Cancel button - outlined style for stacked layout */
.voice-agent-confirm-dialog__buttons--stacked .voice-agent-confirm-dialog__btn--cancel {
  background: transparent;
  color: #6366f1;
  border: 1px solid #e5e7eb;
}

.voice-agent-confirm-dialog__buttons--stacked .voice-agent-confirm-dialog__btn--cancel:hover {
  background: #f5f3ff;
  border-color: #c4b5fd;
  transform: none;
  box-shadow: none;
}

/* ────────────────────────────────────────────────────────────────
   Countdown Button with Circular Timer Ring
   ──────────────────────────────────────────────────────────────── */

.voice-agent-countdown-btn {
  position: relative;
}

.voice-agent-countdown-btn__label {
  flex: 1;
  text-align: center;
}

/* When countdown is active, add glow effect */
.voice-agent-countdown-btn--active {
  animation: voice-agent-countdown-pulse 1s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
}

@keyframes voice-agent-countdown-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(34, 197, 94, 0.3); }
  50% { box-shadow: 0 0 24px rgba(34, 197, 94, 0.5); }
}

/* Countdown wrapper - positions ring and number together */
.voice-agent-countdown-wrapper {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* Countdown ring SVG container */
.voice-agent-countdown-ring {
  width: 28px;
  height: 28px;
  transform: rotate(-90deg);
}

/* Background circle */
.voice-agent-countdown-ring__bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 3;
}

/* Progress circle - animates from full to empty */
.voice-agent-countdown-ring__progress {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  /* Circumference = 2 * PI * 16 = 100.53 */
  stroke-dasharray: 100.53;
  transition: stroke-dashoffset 1s linear;
}

/* Countdown number centered on the ring */
.voice-agent-countdown-number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ────────────────────────────────────────────────────────────────
   Completion Transcript (Summary after session ends)
   ──────────────────────────────────────────────────────────────── */

.voice-agent-complete__transcript {
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.voice-agent-complete__transcript::-webkit-scrollbar {
  width: 4px;
}

.voice-agent-complete__transcript::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
}

.voice-agent-complete__transcript-item {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.voice-agent-complete__transcript-item:last-child {
  border-bottom: none;
}

.voice-agent-complete__transcript-role {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.voice-agent-complete__transcript-role--user {
  color: #60a5fa;
}

.voice-agent-complete__transcript-role--assistant {
  color: #a78bfa;
}

.voice-agent-complete__transcript-text {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

/* ────────────────────────────────────────────────────────────────
   Action Confirmation Dialog (for high-risk function calls)
   ──────────────────────────────────────────────────────────────── */

/* Fixed overlay - covers entire screen like other view modals */
.voice-agent-action-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding handled by shared safe area rule */
}

.voice-agent-action-confirm-dialog {
  background: white;
  border-radius: 16px;
  padding: 0;
  width: 90%;
  max-width: 360px;
  max-height: var(--va-modal-max-height, 85vh);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Required for nested flex scrolling on mobile */
  min-height: 0;
}

.voice-agent-action-confirm__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-bottom: 1px solid #e2e8f0;
  /* Prevent header from shrinking */
  flex-shrink: 0;
}

.voice-agent-action-confirm__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: #6366f1;
}

.voice-agent-action-confirm__icon--update_task {
  background: #fef3c7;
  color: #d97706;
}

.voice-agent-action-confirm__icon--delete_task,
.voice-agent-action-confirm__icon--delete_note,
.voice-agent-action-confirm__icon--delete_event {
  background: #fee2e2;
  color: #dc2626;
}

.voice-agent-action-confirm__icon--create_event {
  background: #dbeafe;
  color: #2563eb;
}

.voice-agent-action-confirm__icon--update_event {
  background: #e0e7ff;
  color: #4f46e5;
}

.voice-agent-action-confirm__icon--send_message {
  background: #dbeafe;
  color: #0284c7;
}

.voice-agent-action-confirm__title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  flex: 1;
}

.voice-agent-action-confirm__content {
  padding: 16px 20px;
  /* Allow content to scroll if too long */
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.voice-agent-action-confirm__preview {
  background: #f8fafc;
  border-radius: 10px;
  padding: 14px;
}

.voice-agent-action-confirm__preview--danger {
  background: #fef2f2;
  border: 1px solid #fecaca;
}

.voice-agent-action-confirm__warning {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
}

.voice-agent-action-confirm__warning--extra {
  margin-top: 12px;
  margin-bottom: 0;
  color: #b45309;
  background: #fef3c7;
  padding: 8px 12px;
  border-radius: 8px;
}

.voice-agent-action-confirm__message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #6b7280;
  font-size: 13px;
  margin-top: 12px;
  padding: 10px 12px;
  background: #f1f5f9;
  border-radius: 8px;
}

.voice-agent-action-confirm__message iconify-icon {
  flex-shrink: 0;
  color: #64748b;
}

/* Message Preview for Send Message Confirmation */
.voice-agent-action-confirm__message-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}

.voice-agent-action-confirm__message-preview .voice-agent-action-confirm__label {
  margin-bottom: 4px;
}

.voice-agent-action-confirm__message-content {
  background: #e0f2fe;
  border-radius: 12px;
  border-bottom-left-radius: 4px;
  padding: 12px 14px;
  font-size: 14px;
  color: #0c4a6e;
  line-height: 1.5;
  max-height: 120px;
  overflow-y: auto;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* Google Calendar Toggle for Delete Event */
.voice-agent-action-confirm__google-toggle {
  margin-top: 16px;
  padding: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
}

.voice-agent-action-confirm__toggle-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}

.voice-agent-action-confirm__toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.voice-agent-action-confirm__toggle-slider {
  position: relative;
  width: 44px;
  height: 24px;
  background: #cbd5e1;
  border-radius: 24px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.voice-agent-action-confirm__toggle-slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.voice-agent-action-confirm__toggle-input:checked + .voice-agent-action-confirm__toggle-slider {
  background: #ef4444;
}

.voice-agent-action-confirm__toggle-input:checked + .voice-agent-action-confirm__toggle-slider::before {
  transform: translateX(20px);
}

.voice-agent-action-confirm__toggle-text {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.voice-agent-action-confirm__toggle-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  margin-left: 56px;
  font-size: 12px;
  color: #dc2626;
}

/* Conflict Warning Section */
.voice-agent-action-confirm__conflicts {
  margin-top: 12px;
  padding: 12px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 10px;
}

.voice-agent-action-confirm__conflict-header {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b45309;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}

.voice-agent-action-confirm__conflict-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 6px;
  margin-top: 4px;
  font-size: 12px;
}

.voice-agent-action-confirm__conflict-name {
  color: #78350f;
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-agent-action-confirm__conflict-time {
  color: #92400e;
  font-size: 11px;
  margin-left: 8px;
  white-space: nowrap;
}

.voice-agent-action-confirm__field {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.voice-agent-action-confirm__field:last-child {
  border-bottom: none;
}

.voice-agent-action-confirm__label {
  font-size: 13px;
  color: #64748b;
  min-width: 80px;
  text-transform: capitalize;
}

.voice-agent-action-confirm__value {
  font-size: 14px;
  color: #1e293b;
  font-weight: 500;
  flex: 1;
}

.voice-agent-action-confirm__changes {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

.voice-agent-action-confirm__changes-header {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

.voice-agent-action-confirm__changes-header .voice-agent-action-confirm__label {
  font-weight: 600;
  color: #475569;
}

.voice-agent-action-confirm__value--muted {
  color: #94a3b8 !important;
  font-style: italic;
  font-weight: 400 !important;
}

.voice-agent-action-confirm__value--strikethrough {
  text-decoration: line-through;
  color: #94a3b8;
  font-weight: 400;
}

.voice-agent-action-confirm__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 12px;
}

.voice-agent-action-confirm__hint iconify-icon {
  color: #8b5cf6;
}

.voice-agent-action-confirm__hint strong {
  color: #6366f1;
  font-weight: 600;
}

.voice-agent-action-confirm__buttons {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  /* Prevent buttons from shrinking - keeps them visible on mobile */
  flex-shrink: 0;
}

.voice-agent-action-confirm__btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}

.voice-agent-action-confirm__btn--cancel {
  background: white;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.voice-agent-action-confirm__btn--cancel:hover {
  background: #f1f5f9;
  color: #475569;
}

.voice-agent-action-confirm__btn--confirm {
  background: #6366f1;
  color: white;
}

.voice-agent-action-confirm__btn--confirm:hover {
  background: #4f46e5;
}

.voice-agent-action-confirm__btn--danger {
  background: #dc2626;
}

.voice-agent-action-confirm__btn--danger:hover {
  background: #b91c1c;
}

/* ────────────────────────────────────────────────────────────────
   Hero Daily Debrief Buttons (Home Page Hero Section)
   Button group with Voice (primary) and Text (secondary) options
   ──────────────────────────────────────────────────────────────── */

.hero-debrief-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: hero-debrief-fade-in 0.6s ease-out 1s both;
}

@keyframes hero-debrief-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-debrief-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.2s ease;
}

.hero-debrief-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-1px);
}

.hero-debrief-btn:active {
  transform: translateY(0);
  background: rgba(255, 255, 255, 0.35);
}

.hero-debrief-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Voice button (primary) - pill shape with icon + text */
.hero-debrief-btn--voice {
  padding: 10px 18px 10px 14px;
  border-radius: 999px;
}

/* Text button (secondary) - circular icon-only */
.hero-debrief-btn--text {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
}

.hero-debrief-btn--text iconify-icon {
  color: #fff;
}

/* Discover Zunou link - subtle one-line link with voice option */
.hero-discover-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.hero-discover-link__text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 16px;
}

.hero-discover-link__text:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}

.hero-discover-link__text iconify-icon {
  color: rgba(168, 85, 247, 0.7);
  transition: color 0.2s ease;
}

.hero-discover-link__text:hover iconify-icon {
  color: #a855f7;
}

.hero-discover-link__voice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 50%;
}

.hero-discover-link__voice:hover {
  color: #a78bfa;
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.4);
}

.hero-debrief-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  flex-shrink: 0;
}

.hero-debrief-btn__icon iconify-icon {
  color: #fff;
}

.hero-debrief-btn__text {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}

/* Legacy - kept for backwards compatibility */
.hero-debrief-btn__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────
   Task View Modal (displayed during voice session)
   ──────────────────────────────────────────────────────────────── */

.voice-agent-task-view-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding handled by shared safe area rule */
}

.voice-agent-task-view-dialog {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: var(--va-modal-max-height, 85vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  animation: taskViewSlideUp 0.25s ease-out;
  /* Required for nested flex scrolling on mobile */
  min-height: 0;
}

@keyframes taskViewSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.voice-agent-task-view__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  /* Prevent header from shrinking */
  flex-shrink: 0;
}

.voice-agent-task-view__icon {
  width: 40px;
  height: 40px;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
}

.voice-agent-task-view__title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.voice-agent-task-view__close {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.voice-agent-task-view__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-task-view__content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Required for proper scrolling in nested flex */
  min-height: 0;
}

.voice-agent-task-view__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.voice-agent-task-view__field--half {
  flex: 1;
}

.voice-agent-task-view__row {
  display: flex;
  gap: 16px;
}

.voice-agent-task-view__label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.voice-agent-task-view__value {
  font-size: 15px;
  color: #111827;
  padding: 10px 14px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.voice-agent-task-view__value--title {
  font-size: 17px;
  font-weight: 600;
}

.voice-agent-task-view__value--desc {
  min-height: 60px;
  white-space: pre-wrap;
  color: #374151;
}

.voice-agent-task-view__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  width: fit-content;
}

.voice-agent-task-view__badge--todo {
  background: #dbeafe;
  color: #1d4ed8;
}

.voice-agent-task-view__badge--inprogress {
  background: #fef3c7;
  color: #b45309;
}

.voice-agent-task-view__badge--completed {
  background: #d1fae5;
  color: #047857;
}

.voice-agent-task-view__badge--overdue {
  background: #fee2e2;
  color: #b91c1c;
}

.voice-agent-task-view__badge--low {
  background: #e5e7eb;
  color: #4b5563;
}

.voice-agent-task-view__badge--medium {
  background: #dbeafe;
  color: #1d4ed8;
}

.voice-agent-task-view__badge--high {
  background: #fee2e2;
  color: #b91c1c;
}

.voice-agent-task-view__assignees {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.voice-agent-task-view__assignee {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  color: #1e40af;
}

.voice-agent-task-view__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.voice-agent-task-view__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Prevent footer from shrinking - keeps buttons visible on mobile */
  flex-shrink: 0;
}

.voice-agent-task-view__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
}

.voice-agent-task-view__hint strong {
  color: #374151;
}

.voice-agent-task-view__buttons {
  display: flex;
  gap: 12px;
}

.voice-agent-task-view__btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s;
}

.voice-agent-task-view__btn--secondary {
  background: #e5e7eb;
  color: #374151;
}

.voice-agent-task-view__btn--secondary:hover {
  background: #d1d5db;
}

.voice-agent-task-view__btn--primary {
  background: #6366f1;
  color: #fff;
}

.voice-agent-task-view__btn--primary:hover {
  background: #4f46e5;
}

.voice-agent-task-view__btn--danger {
  background: #ef4444;
  color: #fff;
}

.voice-agent-task-view__btn--danger:hover {
  background: #dc2626;
}

.voice-agent-task-view__footer--confirm {
  background: #fffbeb;
  border-top-color: #fcd34d;
}

.voice-agent-task-view__confirm-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #92400e;
  text-align: center;
  padding: 4px 0;
}

.voice-agent-task-view__confirm-message strong {
  color: #78350f;
}

/* ────────────────────────────────────────────────────────────────
   Tasks List Modal (multiple tasks during voice session)
   ──────────────────────────────────────────────────────────────── */

.voice-agent-tasks-list-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding handled by shared safe area rule */
}

.voice-agent-tasks-list-dialog {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: var(--va-modal-max-height, 80vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  animation: taskViewSlideUp 0.25s ease-out;
  /* Required for nested flex scrolling on mobile */
  min-height: 0;
}

.voice-agent-tasks-list__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  /* Prevent header from shrinking */
  flex-shrink: 0;
}

.voice-agent-tasks-list__back {
  width: 36px;
  height: 36px;
  border: none;
  background: #e5e7eb;
  border-radius: 8px;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.voice-agent-tasks-list__back:hover {
  background: #d1d5db;
}

.voice-agent-tasks-list__icon {
  width: 40px;
  height: 40px;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
}

.voice-agent-tasks-list__title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.voice-agent-tasks-list__count {
  background: #6366f1;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
}

.voice-agent-tasks-list__close {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.voice-agent-tasks-list__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-tasks-list__content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  /* Required for proper scrolling in nested flex */
  min-height: 0;
}

.voice-agent-tasks-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid #f3f4f6;
}

.voice-agent-tasks-list__item:hover {
  background: #f9fafb;
}

.voice-agent-tasks-list__item:last-child {
  border-bottom: none;
}

.voice-agent-tasks-list__item-status {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.voice-agent-tasks-list__item-status--todo {
  background: #3b82f6;
}

.voice-agent-tasks-list__item-status--inprogress {
  background: #f59e0b;
}

.voice-agent-tasks-list__item-status--completed {
  background: #10b981;
}

.voice-agent-tasks-list__item-status--overdue {
  background: #ef4444;
}

.voice-agent-tasks-list__item-content {
  flex: 1;
  min-width: 0;
}

.voice-agent-tasks-list__item-title {
  font-size: 15px;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-agent-tasks-list__item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.voice-agent-tasks-list__item-priority {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
}

.voice-agent-tasks-list__item-priority--low {
  background: #e5e7eb;
  color: #4b5563;
}

.voice-agent-tasks-list__item-priority--medium {
  background: #dbeafe;
  color: #1d4ed8;
}

.voice-agent-tasks-list__item-priority--high {
  background: #fee2e2;
  color: #b91c1c;
}

.voice-agent-tasks-list__item-due {
  font-size: 12px;
  color: #6b7280;
}

.voice-agent-tasks-list__item-list {
  font-size: 12px;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.voice-agent-tasks-list__item-assignees {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}

.voice-agent-tasks-list__item-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  object-fit: cover;
  margin-left: -6px;
}

.voice-agent-tasks-list__item-avatar:first-child {
  margin-left: 0;
}

.voice-agent-tasks-list__item-more {
  font-size: 11px;
  color: #6b7280;
  margin-left: 4px;
}

.voice-agent-tasks-list__detail {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.voice-agent-tasks-list__goto-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: auto;
}

.voice-agent-tasks-list__goto-btn:hover {
  background: #4f46e5;
}

.voice-agent-tasks-list__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Prevent footer from shrinking - keeps buttons visible on mobile */
  flex-shrink: 0;
}

/* ========================================
   VOICE AGENT NOTE VIEW MODAL
   ======================================== */

.voice-agent-note-view,
.voice-agent-note-view-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Base padding + safe areas for native app */
  padding: calc(20px + var(--va-safe-top, 0px)) 20px calc(20px + var(--va-safe-bottom, 0px)) 20px;
}

.voice-agent-note-view__backdrop,
.voice-agent-note-view-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.voice-agent-note-view__modal,
.voice-agent-note-view-dialog {
  position: relative;
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: var(--va-modal-max-height, 85vh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  /* Required for nested flex scrolling on mobile */
  min-height: 0;
}

.voice-agent-note-view__header {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* Prevent header from shrinking */
  flex-shrink: 0;
}

.voice-agent-note-view__icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.voice-agent-note-view__icon svg {
  width: 20px;
  height: 20px;
  color: #d97706;
}

.voice-agent-note-view__title-section {
  flex: 1;
  min-width: 0;
}

.voice-agent-note-view__title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

.voice-agent-note-view__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.voice-agent-note-view__pinned-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fef3c7;
  color: #d97706;
  font-size: 11px;
  font-weight: 500;
  border-radius: 9999px;
}

.voice-agent-note-view__pinned-badge svg {
  width: 12px;
  height: 12px;
}

.voice-agent-note-view__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  flex-shrink: 0;
}

.voice-agent-note-view__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-note-view__content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Required for proper scrolling in nested flex */
  min-height: 0;
}

.voice-agent-note-view__body {
  font-size: 14px;
  line-height: 1.7;
  color: #374151;
  word-break: break-word;
}

.voice-agent-note-view__body--detail {
  flex: 1;
  overflow-y: auto;
}

.voice-agent-note-view__text {
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
  white-space: pre-wrap;
  word-break: break-word;
}

.voice-agent-note-view__labels {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.voice-agent-note-view__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 12px;
  border-radius: 9999px;
}

.voice-agent-note-view__label svg {
  width: 12px;
  height: 12px;
}

.voice-agent-note-view__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Prevent footer from shrinking - keeps buttons visible on mobile */
  flex-shrink: 0;
}

.voice-agent-note-view__goto-btn {
  width: 100%;
  padding: 12px 20px;
  background: #6366f1;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease;
}

.voice-agent-note-view__goto-btn:hover {
  background: #4f46e5;
}

.voice-agent-note-view__goto-btn svg {
  width: 16px;
  height: 16px;
}

/* ========================================
   VOICE AGENT NOTES LIST MODAL
   ======================================== */

.voice-agent-notes-list,
.voice-agent-notes-list-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Base padding + safe areas for native app */
  padding: calc(20px + var(--va-safe-top, 0px)) 20px calc(20px + var(--va-safe-bottom, 0px)) 20px;
}

.voice-agent-notes-list__backdrop,
.voice-agent-notes-list-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.voice-agent-notes-list__modal,
.voice-agent-notes-list-dialog {
  position: relative;
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: var(--va-modal-max-height, 85vh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  /* Required for nested flex scrolling on mobile */
  min-height: 0;
}

.voice-agent-notes-list__header {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Prevent header from shrinking */
  flex-shrink: 0;
}

.voice-agent-notes-list__back-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

.voice-agent-notes-list__back-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-notes-list__icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-agent-notes-list__icon svg {
  width: 20px;
  height: 20px;
  color: #d97706;
}

.voice-agent-notes-list__title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.voice-agent-notes-list__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
}

.voice-agent-notes-list__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-notes-list__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  /* Required for proper scrolling in nested flex */
  min-height: 0;
}

.voice-agent-notes-list__empty {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
}

.voice-agent-notes-list__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.voice-agent-notes-list__item {
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.voice-agent-notes-list__item:hover {
  background: #f3f4f6;
}

.voice-agent-notes-list__item--selected {
  background: #ede9fe;
  border-color: #c4b5fd;
}

.voice-agent-notes-list__item-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-agent-notes-list__item-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-agent-notes-list__item-pinned {
  color: #d97706;
  flex-shrink: 0;
}

.voice-agent-notes-list__item-pinned svg {
  width: 14px;
  height: 14px;
}

.voice-agent-notes-list__item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: #9ca3af;
}

.voice-agent-notes-list__item-date {
  white-space: nowrap;
}

.voice-agent-notes-list__item-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  overflow: hidden;
}

.voice-agent-notes-list__item-label {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}

.voice-agent-notes-list__item-preview {
  font-size: 13px;
  color: #6b7280;
  margin-top: 6px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Notes List Detail View */
.voice-agent-notes-list__detail {
  padding: 20px;
}

.voice-agent-notes-list__detail-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px 0;
}

.voice-agent-notes-list__detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.voice-agent-notes-list__detail-content {
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

.voice-agent-notes-list__detail-labels {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.voice-agent-notes-list__detail-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 12px;
  border-radius: 9999px;
}

.voice-agent-notes-list__detail-label svg {
  width: 12px;
  height: 12px;
}

.voice-agent-notes-list__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Prevent footer from shrinking - keeps buttons visible on mobile */
  flex-shrink: 0;
}

.voice-agent-notes-list__goto-btn {
  width: 100%;
  padding: 12px 20px;
  background: #6366f1;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease;
}

.voice-agent-notes-list__goto-btn:hover {
  background: #4f46e5;
}

.voice-agent-notes-list__goto-btn svg {
  width: 16px;
  height: 16px;
}

/* ────────────────────────────────────────────────────────────────
   Event View Modal (displayed during voice session)
   ──────────────────────────────────────────────────────────────── */

.voice-agent-event-view-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding handled by shared safe area rule */
}

.voice-agent-event-view-dialog {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: var(--va-modal-max-height, 85vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  animation: eventViewSlideUp 0.25s ease-out;
  /* Required for nested flex scrolling on mobile */
  min-height: 0;
}

@keyframes eventViewSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.voice-agent-event-view__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  /* Prevent header from shrinking */
  flex-shrink: 0;
}

.voice-agent-event-view__icon {
  width: 40px;
  height: 40px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
}

.voice-agent-event-view__title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.voice-agent-event-view__close {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.voice-agent-event-view__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-event-view__content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Required for proper scrolling in nested flex */
  min-height: 0;
}

.voice-agent-event-view__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.voice-agent-event-view__field--half {
  flex: 1;
}

.voice-agent-event-view__row {
  display: flex;
  gap: 16px;
}

.voice-agent-event-view__label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.voice-agent-event-view__value {
  font-size: 15px;
  color: #111827;
  padding: 10px 14px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.voice-agent-event-view__value--title {
  font-size: 17px;
  font-weight: 600;
}

.voice-agent-event-view__value--link,
.voice-agent-event-view__value--location {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Clickable meeting link */
.voice-agent-event-view__meeting-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.voice-agent-event-view__meeting-link:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

.voice-agent-event-view__meeting-link:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.voice-agent-event-view__value--description {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Importance badges */
.voice-agent-event-view__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  width: fit-content;
}

.voice-agent-event-view__badge--low {
  background: #e5e7eb;
  color: #4b5563;
}

.voice-agent-event-view__badge--medium {
  background: #dbeafe;
  color: #1d4ed8;
}

.voice-agent-event-view__badge--high {
  background: #fef3c7;
  color: #d97706;
}

.voice-agent-event-view__badge--urgent {
  background: #fee2e2;
  color: #b91c1c;
}

.voice-agent-event-view__badge--enabled {
  background: #d1fae5;
  color: #047857;
}

.voice-agent-event-view__badge--disabled {
  background: #f3f4f6;
  color: #6b7280;
}

/* Attendees */
.voice-agent-event-view__attendees {
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.voice-agent-event-view__attendee-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.voice-agent-event-view__attendee {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #374151;
}

.voice-agent-event-view__attendee--guest {
  color: #6b7280;
}

.voice-agent-event-view__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.voice-agent-event-view__guest-badge {
  font-size: 11px;
  padding: 2px 8px;
  background: #e5e7eb;
  color: #6b7280;
  border-radius: 10px;
  margin-left: auto;
}

/* Agenda list */
.voice-agent-event-view__agenda-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.voice-agent-event-view__agenda-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #374151;
}

.voice-agent-event-view__agenda-num {
  width: 22px;
  height: 22px;
  background: #3b82f6;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.voice-agent-event-view__agenda-more {
  font-size: 13px;
  color: #6b7280;
  padding-left: 32px;
  font-style: italic;
}

/* Talking Points/Checklist */
.voice-agent-event-view__checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.voice-agent-event-view__checklist-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #374151;
}

.voice-agent-event-view__checklist-item--done {
  color: #6b7280;
}

/* Footer */
.voice-agent-event-view__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Prevent footer from shrinking - keeps buttons visible on mobile */
  flex-shrink: 0;
}

.voice-agent-event-view__footer--confirm {
  background: #fffbeb;
  border-top-color: #fde68a;
}

/* ────────────────────────────────────────────────────────────────
   Events List Modal (displayed during voice session)
   ──────────────────────────────────────────────────────────────── */

.voice-agent-events-list-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding handled by shared safe area rule */
}

.voice-agent-events-list-dialog {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: var(--va-modal-max-height, 85vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  animation: eventsListSlideUp 0.25s ease-out;
  /* Required for nested flex scrolling on mobile */
  min-height: 0;
}

@keyframes eventsListSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.voice-agent-events-list__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
}

.voice-agent-events-list__back {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  margin-right: -8px;
}

.voice-agent-events-list__back:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-events-list__icon {
  width: 40px;
  height: 40px;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
}

.voice-agent-events-list__title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.voice-agent-events-list__count {
  background: #3b82f6;
  color: white;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  min-width: 28px;
  text-align: center;
  display: flex;
  align-items: center;
  gap: 4px;
}

.voice-agent-events-list__count-total {
  font-weight: 400;
  opacity: 0.85;
}

/* Pagination Bar */
.voice-agent-events-list__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border-bottom: 1px solid #e5e7eb;
  font-size: 13px;
  color: #374151;
}

.voice-agent-events-list__pagination-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: white;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.voice-agent-events-list__pagination-btn:hover:not(:disabled) {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-events-list__pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.voice-agent-events-list__pagination-info {
  font-weight: 500;
}

.voice-agent-events-list__close {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.voice-agent-events-list__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-events-list__content {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  /* Required for proper scrolling in nested flex */
  min-height: 0;
}

/* Event List Item */
.voice-agent-events-list__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}

.voice-agent-events-list__item:hover {
  background: #f3f4f6;
}

.voice-agent-events-list__item:active {
  background: #e5e7eb;
}

.voice-agent-events-list__item-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 56px;
  padding: 8px 4px;
  background: #eff6ff;
  border-radius: 10px;
  flex-shrink: 0;
}

.voice-agent-events-list__item-time-start {
  font-size: 14px;
  font-weight: 600;
  color: #1d4ed8;
}

.voice-agent-events-list__item-time-date {
  font-size: 11px;
  color: #6b7280;
}

.voice-agent-events-list__item-content {
  flex: 1;
  min-width: 0;
}

.voice-agent-events-list__item-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.voice-agent-events-list__item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.voice-agent-events-list__item-importance {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.voice-agent-events-list__item-importance--low {
  background: #e5e7eb;
  color: #4b5563;
}

.voice-agent-events-list__item-importance--medium {
  background: #dbeafe;
  color: #1d4ed8;
}

.voice-agent-events-list__item-importance--high {
  background: #fef3c7;
  color: #d97706;
}

.voice-agent-events-list__item-importance--urgent {
  background: #fee2e2;
  color: #b91c1c;
}

.voice-agent-events-list__item-video,
.voice-agent-events-list__item-notetaker {
  display: flex;
  align-items: center;
  color: #10b981;
}

.voice-agent-events-list__item-attendees {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #6b7280;
}

.voice-agent-events-list__item-arrow {
  color: #9ca3af;
  flex-shrink: 0;
}

/* Event Detail View in List */
.voice-agent-events-list__detail {
  padding: 20px;
  overflow-y: auto;
}

.voice-agent-events-list__goto-btn {
  width: 100%;
  padding: 12px 20px;
  margin-top: 16px;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s ease;
}

.voice-agent-events-list__goto-btn:hover {
  background: #2563eb;
}

.voice-agent-events-list__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Prevent footer from shrinking - keeps buttons visible on mobile */
  flex-shrink: 0;
}

/* =============================================================================
   PAST EVENT VIEW MODAL ADDITIONS
   Additional styles for past event view (extends voice-agent-event-view-*)
   ============================================================================= */

/* Past event specific icon color */
.voice-agent-past-event__icon {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
}

/* Header info section */
.voice-agent-past-event__header-info {
  padding: 12px 20px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
}

.voice-agent-past-event__title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}

.voice-agent-past-event__date {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}

.voice-agent-past-event__duration {
  opacity: 0.8;
}

/* Tab navigation */
.voice-agent-past-event__tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  background: white;
  overflow-x: auto;
  flex-shrink: 0;
  gap: 4px;
  padding: 0 12px;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.voice-agent-past-event__tabs::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}

.voice-agent-past-event__tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all 0.15s ease;
}

.voice-agent-past-event__tab:hover {
  color: #374151;
}

.voice-agent-past-event__tab--active {
  color: #6366f1;
  border-bottom-color: #6366f1;
}

.voice-agent-past-event__tab-count {
  padding: 2px 6px;
  background: #e5e7eb;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
}

.voice-agent-past-event__tab--active .voice-agent-past-event__tab-count {
  background: #eef2ff;
  color: #6366f1;
}

/* Content area */
.voice-agent-past-event__content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}

.voice-agent-past-event__tab-content {
  padding: 16px 20px;
}

/* Section styling */
.voice-agent-past-event__section {
  margin-bottom: 16px;
}

.voice-agent-past-event__section:last-child {
  margin-bottom: 0;
}

.voice-agent-past-event__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 8px;
}

/* TL;DR */
.voice-agent-past-event__tldr {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #78350f;
}

/* Overview */
.voice-agent-past-event__overview {
  background: #f9fafb;
  border-radius: 12px;
  padding: 14px 16px;
}

.voice-agent-past-event__para {
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 10px;
}

.voice-agent-past-event__para:last-child {
  margin-bottom: 0;
}

/* Keywords */
.voice-agent-past-event__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.voice-agent-past-event__keyword {
  padding: 4px 10px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  font-size: 12px;
  color: #374151;
}

/* Attendees list with avatars */
.voice-agent-past-event__attendees-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.voice-agent-past-event__attendee {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f3f4f6;
  border-radius: 20px;
  padding: 4px 12px 4px 4px;
}

.voice-agent-past-event__attendee-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.voice-agent-past-event__attendee-avatar--placeholder {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

.voice-agent-past-event__attendee-name {
  font-size: 13px;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

/* Takeaways list */
.voice-agent-past-event__takeaways-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.voice-agent-past-event__takeaway {
  background: #f0fdf4;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.voice-agent-past-event__takeaway-num {
  width: 24px;
  height: 24px;
  background: #22c55e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  font-size: 12px;
  font-weight: 600;
}

.voice-agent-past-event__takeaway-text {
  font-size: 14px;
  line-height: 1.5;
  color: #166534;
}

/* Analytics - Sentiment */
.voice-agent-past-event__sentiment {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voice-agent-past-event__sentiment-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.voice-agent-past-event__sentiment--positive {
  background: #dcfce7;
  color: #166534;
}

.voice-agent-past-event__sentiment--neutral {
  background: #f3f4f6;
  color: #6b7280;
}

.voice-agent-past-event__sentiment--negative {
  background: #fee2e2;
  color: #991b1b;
}

.voice-agent-past-event__sentiment-desc {
  font-size: 13px;
  color: #6b7280;
}

/* Analytics - Talk Times */
.voice-agent-past-event__talk-times {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.voice-agent-past-event__talk-time {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voice-agent-past-event__speaker {
  width: 100px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.voice-agent-past-event__talk-bar {
  flex: 1;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.voice-agent-past-event__talk-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.voice-agent-past-event__talk-pct {
  width: 40px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  text-align: right;
}

/* Actionables list */
.voice-agent-past-event__actionables-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.voice-agent-past-event__actionable {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 10px;
}

.voice-agent-past-event__actionable--done {
  opacity: 0.7;
}

.voice-agent-past-event__actionable--has-task {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.voice-agent-past-event__actionable--done .voice-agent-past-event__actionable-text {
  text-decoration: line-through;
  color: #9ca3af;
}

.voice-agent-past-event__actionable-content {
  flex: 1;
}

.voice-agent-past-event__actionable-text {
  font-size: 14px;
  color: #374151;
  line-height: 1.4;
}

.voice-agent-past-event__actionable-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  color: #6b7280;
}

/* Task status badges */
.voice-agent-past-event__task-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}

.voice-agent-past-event__task-badge--done {
  background: #dcfce7;
  color: #15803d;
}

.voice-agent-past-event__task-badge--progress {
  background: #fef3c7;
  color: #b45309;
}

.voice-agent-past-event__task-badge--todo {
  background: #e0e7ff;
  color: #4338ca;
}

/* Transcript Tab - Compact chat bubble style */
.voice-agent-past-event__tab-content--transcript {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 4px;
}

.voice-agent-past-event__transcript-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.voice-agent-past-event__transcript-bubble {
  background: #f3f4f6;
  border-radius: 12px;
  padding: 8px 12px;
  max-width: 100%;
}

.voice-agent-past-event__transcript-bubble-header {
  margin-bottom: 2px;
}

.voice-agent-past-event__transcript-speaker {
  font-size: 11px;
  font-weight: 600;
  color: #6366f1;
  text-transform: capitalize;
}

.voice-agent-past-event__transcript-bubble-text {
  font-size: 13px;
  line-height: 1.4;
  color: #374151;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Past event dialog specific overrides */
.voice-agent-past-event-dialog {
  max-height: var(--va-modal-max-height, 80vh);
}

/* =============================================================================
   PAST EVENTS LIST MODAL
   Modal for viewing list of past events from voice agent
   ============================================================================= */

.voice-agent-past-events-list {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-agent-past-events-list__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.voice-agent-past-events-list__container {
  position: relative;
  width: 90%;
  max-width: 500px;
  max-height: var(--va-modal-max-height, 85vh);
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.voice-agent-past-events-list__header {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.voice-agent-past-events-list__title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.voice-agent-past-events-list__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #f3f4f6;
  border: none;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-agent-past-events-list__close:hover {
  background: #e5e7eb;
  color: #374151;
}

.voice-agent-past-events-list__content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.voice-agent-past-events-list__events {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Past event card in list */
.voice-agent-past-event-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.voice-agent-past-event-card:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.voice-agent-past-event-card--selected {
  background: #eef2ff;
  border-color: #6366f1;
}

.voice-agent-past-event-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.voice-agent-past-event-card__title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
}

.voice-agent-past-event-card__badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  flex-shrink: 0;
}

.voice-agent-past-event-card__badge--recorded {
  background: #dcfce7;
  color: #166534;
}

.voice-agent-past-event-card__badge--no-recording {
  background: #f3f4f6;
  color: #6b7280;
}

.voice-agent-past-event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: #6b7280;
}

.voice-agent-past-event-card__meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.voice-agent-past-event-card__tldr {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
  font-size: 13px;
  line-height: 1.5;
  color: #4b5563;
}

.voice-agent-past-events-list__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
}

.voice-agent-past-events-list__close-btn {
  width: 100%;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  background: white;
  color: #374151;
  border: 1px solid #d1d5db;
  cursor: pointer;
  transition: all 0.15s ease;
}

.voice-agent-past-events-list__close-btn:hover {
  background: #f3f4f6;
}

/* =============================================================================
   PAST EVENTS LIST - ADDITIONAL STYLES
   Used by the voiceAgentPastEventsList modal
   ============================================================================= */

.voice-agent-past-events__item {
  /* Uses base voice-agent-events-list__item styles */
}

.voice-agent-past-events__recorded-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #dcfce7;
  color: #166534;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

.voice-agent-past-events__no-recording {
  color: #9ca3af;
  font-size: 12px;
}

.voice-agent-past-events__empty {
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
}

.voice-agent-past-events__empty p {
  margin-top: 12px;
  font-size: 14px;
}

/* =============================================================================
   CONTENT VIEW MODAL - Fallback/Generic content display
   ============================================================================= */

.voice-agent-content-view-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Base padding + safe areas for native app */
  padding: calc(20px + var(--va-safe-top, 0px)) 20px calc(20px + var(--va-safe-bottom, 0px)) 20px;
}

.voice-agent-content-view-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.voice-agent-content-view-dialog {
  position: relative;
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: var(--va-modal-max-height, 85vh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  min-height: 0;
}

.voice-agent-content-view__header {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.voice-agent-content-view__title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

.voice-agent-content-view__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  flex-shrink: 0;
}

.voice-agent-content-view__close:hover {
  background: #f3f4f6;
  color: #111827;
}

.voice-agent-content-view__content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-height: 0;
}

.voice-agent-content-view__body {
  color: #374151;
  font-size: 15px;
  line-height: 1.7;
}

/* Markdown prose styles */
.voice-agent-content-view__body h1 {
  font-size: 1.5em;
  font-weight: 700;
  color: #111827;
  margin: 1em 0 0.5em 0;
}

.voice-agent-content-view__body h2 {
  font-size: 1.25em;
  font-weight: 600;
  color: #111827;
  margin: 1em 0 0.5em 0;
}

.voice-agent-content-view__body h3 {
  font-size: 1.1em;
  font-weight: 600;
  color: #374151;
  margin: 1em 0 0.5em 0;
}

.voice-agent-content-view__body p {
  margin: 0.75em 0;
}

.voice-agent-content-view__body strong {
  font-weight: 600;
  color: #111827;
}

.voice-agent-content-view__body em {
  font-style: italic;
}

.voice-agent-content-view__body ul,
.voice-agent-content-view__body ol {
  margin: 0.75em 0;
  padding-left: 1.5em;
}

.voice-agent-content-view__body li {
  margin: 0.25em 0;
}

.voice-agent-content-view__body code {
  background: #f3f4f6;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
  color: #dc2626;
}

.voice-agent-content-view__body pre {
  background: #1f2937;
  color: #e5e7eb;
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1em 0;
}

.voice-agent-content-view__body pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: 0.875em;
}

.voice-agent-content-view__body blockquote {
  border-left: 4px solid #6366f1;
  margin: 1em 0;
  padding: 0.5em 0 0.5em 1em;
  color: #6b7280;
  background: #f9fafb;
  border-radius: 0 8px 8px 0;
}

.voice-agent-content-view__body a {
  color: #6366f1;
  text-decoration: underline;
}

.voice-agent-content-view__body a:hover {
  color: #4f46e5;
}

.voice-agent-content-view__body hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 1.5em 0;
}

.voice-agent-content-view__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

/* =============================================================================
   ENHANCED MARKDOWN STYLES - Colors, Callouts, Badges, Progress
   ============================================================================= */

/* Badges/Pills */
.va-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  background-color: #e5e7eb;
  color: #374151;
  white-space: nowrap;
}

/* Callout Blocks */
.va-callout {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 12px 0;
  font-size: 14px;
  line-height: 1.5;
}

.va-callout iconify-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.va-callout > div {
  flex: 1;
}

.va-callout--info {
  background: #eff6ff;
  border-left: 4px solid #3b82f6;
  color: #1e40af;
}

.va-callout--info iconify-icon {
  color: #3b82f6;
}

.va-callout--success {
  background: #f0fdf4;
  border-left: 4px solid #22c55e;
  color: #166534;
}

.va-callout--success iconify-icon {
  color: #22c55e;
}

.va-callout--warning {
  background: #fefce8;
  border-left: 4px solid #eab308;
  color: #854d0e;
}

.va-callout--warning iconify-icon {
  color: #eab308;
}

.va-callout--error {
  background: #fef2f2;
  border-left: 4px solid #ef4444;
  color: #991b1b;
}

.va-callout--error iconify-icon {
  color: #ef4444;
}

.va-callout--tip {
  background: #faf5ff;
  border-left: 4px solid #a855f7;
  color: #6b21a8;
}

.va-callout--tip iconify-icon {
  color: #a855f7;
}

/* Colored Blockquotes */
.voice-agent-content-view__body blockquote.va-quote--info {
  border-left-color: #3b82f6;
  background: #eff6ff;
  color: #1e40af;
}

.voice-agent-content-view__body blockquote.va-quote--success {
  border-left-color: #22c55e;
  background: #f0fdf4;
  color: #166534;
}

.voice-agent-content-view__body blockquote.va-quote--warning {
  border-left-color: #eab308;
  background: #fefce8;
  color: #854d0e;
}

.voice-agent-content-view__body blockquote.va-quote--error {
  border-left-color: #ef4444;
  background: #fef2f2;
  color: #991b1b;
}

/* Progress Bar */
.va-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 0;
}

.va-progress__bar {
  flex: 1;
  height: 8px;
  background: #6366f1;
  border-radius: 4px;
  position: relative;
}

.va-progress__bar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #e5e7eb;
  border-radius: 4px;
  z-index: -1;
}

.va-progress__label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  min-width: 36px;
  text-align: right;
}

/* Checkbox List Items */
.va-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  list-style: none;
  margin-left: -1.5em;
}

.va-checkbox iconify-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: #9ca3af;
}

.va-checkbox--checked {
  color: #6b7280;
}

.va-checkbox--checked iconify-icon {
  color: #16a34a;
}

/* Tables (GFM-style from renderMarkdown) */
.va-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 13px;
}

.va-table th,
.va-table td {
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-align: left;
}

.va-table th {
  background: rgba(255, 255, 255, 0.08);
  font-weight: 600;
  color: #fff;
}

.va-table tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}

/* Strikethrough */
.voice-agent-content-view__body del {
  text-decoration: line-through;
  color: #9ca3af;
}

/* =============================================================================
   LIST VIEW MODAL - Fallback/Generic list display
   ============================================================================= */

.voice-agent-list-view-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Base padding + safe areas for native app */
  padding: calc(20px + var(--va-safe-top, 0px)) 20px calc(20px + var(--va-safe-bottom, 0px)) 20px;
}

.voice-agent-list-view-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.voice-agent-list-view-dialog {
  position: relative;
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 520px;
  max-height: var(--va-modal-max-height, 85vh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  min-height: 0;
}

.voice-agent-list-view__header {
  padding: 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.voice-agent-list-view__title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

.voice-agent-list-view__count {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.voice-agent-list-view__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  flex-shrink: 0;
}

.voice-agent-list-view__close:hover {
  background: #f3f4f6;
  color: #111827;
}

.voice-agent-list-view__content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  min-height: 0;
}

/* Section Headers */
.voice-agent-list-view__section {
  margin-bottom: 20px;
}

.voice-agent-list-view__section:last-child {
  margin-bottom: 0;
}

.voice-agent-list-view__section-header {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

/* Items Container */
.voice-agent-list-view__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Cards Style (default) */
.voice-agent-list-view__items--cards .voice-agent-list-view__item {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.15s ease;
}

.voice-agent-list-view__items--cards .voice-agent-list-view__item:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

/* Status indicator bar on left edge */
.voice-agent-list-view__status-indicator {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 12px 0 0 12px;
}

/* Bullets Style */
.voice-agent-list-view__items--bullets .voice-agent-list-view__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
}

.voice-agent-list-view__bullet {
  color: #6366f1;
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
}

/* Numbered Style */
.voice-agent-list-view__items--numbered .voice-agent-list-view__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f3f4f6;
}

.voice-agent-list-view__items--numbered .voice-agent-list-view__item:last-child {
  border-bottom: none;
}

.voice-agent-list-view__number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Checklist Style */
.voice-agent-list-view__items--checklist .voice-agent-list-view__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.voice-agent-list-view__items--checklist .voice-agent-list-view__item:hover {
  background: #f9fafb;
}

.voice-agent-list-view__items--checklist .voice-agent-list-view__item--checked {
  background: #f0fdf4;
}

.voice-agent-list-view__items--checklist .voice-agent-list-view__item--checked .voice-agent-list-view__item-text {
  color: #6b7280;
  text-decoration: line-through;
}

.voice-agent-list-view__checkbox {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Minimal Style */
.voice-agent-list-view__items--minimal .voice-agent-list-view__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
}

.voice-agent-list-view__items--minimal .voice-agent-list-view__item::before {
  content: '—';
  color: #9ca3af;
  flex-shrink: 0;
}

/* Icon */
.voice-agent-list-view__icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: white;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #6366f1;
}

/* Item Content */
.voice-agent-list-view__item-content {
  flex: 1;
  min-width: 0;
}

.voice-agent-list-view__item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.voice-agent-list-view__item-text {
  font-size: 15px;
  font-weight: 500;
  color: #111827;
  line-height: 1.4;
}

.voice-agent-list-view__item-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
  line-height: 1.4;
}

/* Badge */
.voice-agent-list-view__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 9999px;
  flex-shrink: 0;
}

/* Progress Bar */
.voice-agent-list-view__item-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.voice-agent-list-view__progress-bar {
  flex: 1;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.voice-agent-list-view__progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.voice-agent-list-view__progress-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  min-width: 36px;
  text-align: right;
}

/* Footer Content (markdown) */
.voice-agent-list-view__footer-content {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  font-size: 14px;
  color: #6b7280;
}

.voice-agent-list-view__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

/* ========================================
   VOICE AGENT DRAFT MODAL
   Delegated writing tasks from Voice Agent
   ======================================== */

.voice-agent-draft-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px + var(--va-safe-top, 0px)) 20px calc(20px + var(--va-safe-bottom, 0px)) 20px;
}

.voice-agent-draft-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.voice-agent-draft-dialog {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: var(--va-modal-max-height, calc(100vh - 80px));
  background: white;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUpFadeIn 0.25s ease-out;
}

/* Header */
.voice-agent-draft__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.voice-agent-draft__title {
  font-size: 17px;
  font-weight: 600;
  color: #111827;
  flex: 1;
}

.voice-agent-draft__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 9999px;
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
  color: white;
}

.voice-agent-draft__minimize {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f3f4f6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: all 0.15s ease;
  margin-left: auto;
}

.voice-agent-draft__minimize:hover {
  background: #e5e7eb;
  color: #374151;
}

.voice-agent-draft__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #f3f4f6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: all 0.15s ease;
}

.voice-agent-draft__close:hover {
  background: #e5e7eb;
  color: #374151;
}

/* Meta Section (for emails) */
.voice-agent-draft__meta {
  padding: 12px 20px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.voice-agent-draft__meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.voice-agent-draft__meta-label {
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  width: 60px;
}

.voice-agent-draft__meta-value {
  font-size: 14px;
  color: #111827;
}

/* Content Area */
.voice-agent-draft__content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 20px;
  min-height: 200px;
}

/* Loading State */
.voice-agent-draft__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
}

.voice-agent-draft__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #8b5cf6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Error State */
.voice-agent-draft__error {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 12px;
  color: #ef4444;
  font-size: 14px;
}

/* Text Area */
.voice-agent-draft__text-area {
  min-height: 150px;
}

.voice-agent-draft__text {
  font-size: 15px;
  line-height: 1.7;
  color: #111827;
}

.voice-agent-draft__text--display {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.voice-agent-draft__text--edit {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  border: 2px solid #8b5cf6;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  color: #111827;
  resize: vertical;
  background: white;
}

.voice-agent-draft__text--edit:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Streaming Cursor */
.voice-agent-draft__cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  background: #8b5cf6;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 0.8s ease-in-out infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Close Confirmation Overlay */
.voice-agent-draft__confirm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 16px;
}

.voice-agent-draft__confirm-dialog {
  background: white;
  border-radius: 16px;
  padding: 24px;
  max-width: 300px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: confirmSlideIn 0.2s ease-out;
}

@keyframes confirmSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.voice-agent-draft__confirm-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-top: 12px;
  margin-bottom: 8px;
}

.voice-agent-draft__confirm-text {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 20px;
}

.voice-agent-draft__confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.voice-agent-draft__btn--danger {
  background: #ef4444 !important;
  color: white !important;
  border: none !important;
}

.voice-agent-draft__btn--danger:hover {
  background: #dc2626 !important;
}

/* Footer */
.voice-agent-draft__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.voice-agent-draft__actions {
  display: flex;
  gap: 10px;
}

.voice-agent-draft__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.voice-agent-draft__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.voice-agent-draft__btn--primary {
  flex: 1;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
}

.voice-agent-draft__btn--primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.voice-agent-draft__btn--secondary {
  flex: 1;
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-draft__btn--secondary:hover:not(:disabled) {
  background: #e5e7eb;
}

/* Footer button row for Save/Discard */
.voice-agent-draft__footer-buttons {
  display: flex;
  gap: 10px;
}

.voice-agent-draft__footer-buttons .voice-agent-draft__btn--secondary {
  flex: 0 0 auto;
  padding: 10px 20px;
}

.voice-agent-draft__footer-buttons .voice-agent-draft__btn--primary {
  flex: 1;
}

/* ========================================
   VOICE AGENT CAMERA MODAL
   ======================================== */

.voice-agent-camera-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px + var(--va-safe-top, 0px)) 20px calc(20px + var(--va-safe-bottom, 0px)) 20px;
}

.voice-agent-camera-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.voice-agent-camera-dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: var(--va-modal-max-height);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.voice-agent-camera__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.voice-agent-camera__title {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  color: #111827;
}

.voice-agent-camera__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: #f3f4f6;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.voice-agent-camera__close:hover {
  background: #e5e7eb;
  color: #374151;
}

.voice-agent-camera__reason {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: rgba(168, 139, 250, 0.1);
  color: #6d28d9;
  font-size: 14px;
}

.voice-agent-camera__content {
  flex: 1;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  overflow-y: auto;
}

.voice-agent-camera__capture-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.voice-agent-camera__icon-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: rgba(168, 139, 250, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-agent-camera__instruction {
  font-size: 15px;
  color: #6b7280;
  margin: 0;
}

.voice-agent-camera__capture-btn,
.voice-agent-camera__gallery-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 200px;
}

.voice-agent-camera__capture-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
  color: #fff;
  border: none;
}

.voice-agent-camera__capture-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.voice-agent-camera__gallery-btn {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.voice-agent-camera__gallery-btn:hover {
  background: #e5e7eb;
}

.voice-agent-camera__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.voice-agent-camera__preview-area {
  width: 100%;
  max-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  border-radius: 12px;
  overflow: hidden;
}

.voice-agent-camera__preview-image {
  max-width: 100%;
  max-height: 320px;
  object-fit: contain;
  border-radius: 8px;
}

.voice-agent-camera__processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.voice-agent-camera__spinner {
  width: 48px;
  height: 48px;
  border: 3px solid #e5e7eb;
  border-top-color: #8b5cf6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.voice-agent-camera__processing-text {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.voice-agent-camera__processing-subtext {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.voice-agent-camera__error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 8px;
  color: #dc2626;
  font-size: 14px;
  margin-top: 12px;
}

.voice-agent-camera__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.voice-agent-camera__actions {
  display: flex;
  gap: 12px;
}

.voice-agent-camera__btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.voice-agent-camera__btn--primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
  color: #fff;
}

.voice-agent-camera__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.voice-agent-camera__btn--secondary {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-camera__btn--secondary:hover {
  background: #e5e7eb;
}

/* Live Camera View */
.voice-agent-camera__live-area {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}

.voice-agent-camera__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.voice-agent-camera__shutter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 4px solid #fff;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  padding: 0;
}

.voice-agent-camera__shutter:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateX(-50%) scale(1.05);
}

.voice-agent-camera__shutter:active {
  transform: translateX(-50%) scale(0.95);
}

.voice-agent-camera__switch-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.voice-agent-camera__switch-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* ========================================
   VOICE AGENT IMAGE VIEWER MODAL
   ======================================== */

.voice-agent-image-viewer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10003;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.voice-agent-image-viewer-dialog {
  position: relative;
  width: 100%;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  cursor: default;
}

.voice-agent-image-viewer__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 12px 12px 0 0;
  color: #fff;
}

.voice-agent-image-viewer__title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
}

.voice-agent-image-viewer__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.voice-agent-image-viewer__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.voice-agent-image-viewer__content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0 0 12px 12px;
}

.voice-agent-image-viewer__image {
  max-width: 100%;
  max-height: calc(90vh - 60px);
  object-fit: contain;
  border-radius: 0 0 8px 8px;
}

/* ========================================
   TRANSCRIPT IMAGE STYLES
   ======================================== */

.voice-agent-transcript__image-container {
  position: relative;
  width: 100%;
  max-width: 200px;
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.voice-agent-transcript__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.voice-agent-transcript__image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: all 0.2s ease;
}

.voice-agent-transcript__image-container:hover .voice-agent-transcript__image-overlay {
  background: rgba(0, 0, 0, 0.4);
  opacity: 1;
}

/* ========================================
   VOICE AGENT MESSAGES VIEW MODAL (Chat bubbles)
   ======================================== */

.voice-agent-messages-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Base padding + safe areas for native app */
  padding: calc(20px + var(--va-safe-top, 0px)) 20px calc(20px + var(--va-safe-bottom, 0px)) 20px;
}

.voice-agent-messages-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.voice-agent-messages-dialog {
  position: relative;
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: var(--va-modal-max-height, 85vh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  min-height: 0;
}

.voice-agent-messages__header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.voice-agent-messages__header-text {
  flex: 1;
  min-width: 0;
}

.voice-agent-messages__title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-agent-messages__subtitle {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.voice-agent-messages__count {
  background: #f3f4f6;
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
}

.voice-agent-messages__close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  flex-shrink: 0;
}

.voice-agent-messages__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-messages__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: #f9fafb;
  min-height: 200px;
}

.voice-agent-messages__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: #9ca3af;
  font-size: 14px;
}

.voice-agent-messages__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Chat bubble wrap */
.voice-agent-messages__bubble-wrap {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.voice-agent-messages__bubble-wrap--own {
  flex-direction: row-reverse;
}

/* Avatar */
.voice-agent-messages__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

/* Chat bubble */
.voice-agent-messages__bubble {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 16px;
  background: white;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border-bottom-left-radius: 4px;
}

.voice-agent-messages__bubble--own {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 4px;
}

.voice-agent-messages__sender {
  font-size: 11px;
  font-weight: 600;
  color: #8b5cf6;
  margin-bottom: 4px;
}

.voice-agent-messages__content {
  font-size: 14px;
  line-height: 1.4;
  word-break: break-word;
}

/* Content formatting for Slate.js and UI messages */
.voice-agent-messages__content p {
  margin: 0 0 8px 0;
}

.voice-agent-messages__content p:last-child {
  margin-bottom: 0;
}

.voice-agent-messages__content ul,
.voice-agent-messages__content ol {
  margin: 8px 0;
  padding-left: 20px;
}

.voice-agent-messages__content li {
  margin-bottom: 4px;
}

.voice-agent-messages__content a {
  color: #8b5cf6;
  text-decoration: underline;
}

.voice-agent-messages__bubble--own .voice-agent-messages__content a {
  color: #ddd6fe;
}

.voice-agent-messages__content code {
  background: rgba(0, 0, 0, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
}

.voice-agent-messages__bubble--own .voice-agent-messages__content code {
  background: rgba(255, 255, 255, 0.2);
}

.voice-agent-messages__content .mention {
  color: #8b5cf6;
  font-weight: 600;
}

.voice-agent-messages__bubble--own .voice-agent-messages__content .mention {
  color: #ddd6fe;
}

/* UI message: Topic created */
.voice-agent-msg-topic {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%);
  border-radius: 8px;
  color: #7c3aed;
  font-size: 13px;
}

.voice-agent-messages__bubble--own .voice-agent-msg-topic {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}

/* UI message: References (task/note) */
.voice-agent-msg-ref {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  background: #f3f4f6;
  border-radius: 999px;
  font-size: 13px;
  color: #374151;
}

.voice-agent-messages__bubble--own .voice-agent-msg-ref {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* UI message: Options */
.voice-agent-msg-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.voice-agent-msg-option {
  padding: 10px 14px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
  color: #374151;
}

.voice-agent-messages__bubble--own .voice-agent-msg-option {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
}

.voice-agent-messages__meta {
  font-size: 10px;
  color: #9ca3af;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.voice-agent-messages__bubble--own .voice-agent-messages__meta {
  color: rgba(255, 255, 255, 0.7);
}

/* Reactions display */
.voice-agent-messages__reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.voice-agent-messages__reaction {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  font-size: 12px;
  cursor: default;
}

.voice-agent-messages__bubble--own .voice-agent-messages__reaction {
  background: rgba(255, 255, 255, 0.2);
}

.voice-agent-messages__reaction-count {
  font-size: 10px;
  color: #6b7280;
  font-weight: 500;
}

.voice-agent-messages__bubble--own .voice-agent-messages__reaction-count {
  color: rgba(255, 255, 255, 0.8);
}

.voice-agent-messages__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.voice-agent-messages__goto-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.voice-agent-messages__goto-btn:hover {
  opacity: 0.9;
}

/* ========================================
   VOICE AGENT PULSES LIST MODAL
   ======================================== */

.voice-agent-pulses-overlay,
.voice-agent-pulse-view-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Base padding + safe areas for native app */
  padding: calc(20px + var(--va-safe-top, 0px)) 20px calc(20px + var(--va-safe-bottom, 0px)) 20px;
}

.voice-agent-pulses-overlay::before,
.voice-agent-pulse-view-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.voice-agent-pulses-dialog,
.voice-agent-pulse-view-dialog {
  position: relative;
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: var(--va-modal-max-height, 85vh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  min-height: 0;
}

.voice-agent-pulses__header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.voice-agent-pulses__title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-agent-pulses__count {
  background: #f3f4f6;
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
}

.voice-agent-pulses__close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  flex-shrink: 0;
}

.voice-agent-pulses__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-pulses__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 0;
}

.voice-agent-pulses__section {
  margin-bottom: 20px;
}

.voice-agent-pulses__section:last-child {
  margin-bottom: 0;
}

.voice-agent-pulses__section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  padding: 0 4px;
}

.voice-agent-pulses__section-count {
  background: #e5e7eb;
  color: #6b7280;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
}

.voice-agent-pulses__items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.voice-agent-pulses__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.voice-agent-pulses__item:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.voice-agent-pulses__item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.voice-agent-pulses__item-icon--dm {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.voice-agent-pulses__item-info {
  flex: 1;
  min-width: 0;
}

.voice-agent-pulses__item-name {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-agent-pulses__item-meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

/* Pulse Detail View */
.voice-agent-pulses__detail {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.voice-agent-pulses__detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.voice-agent-pulses__detail-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.voice-agent-pulses__detail-info {
  flex: 1;
  min-width: 0;
}

.voice-agent-pulses__detail-name {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  display: block;
}

.voice-agent-pulses__detail-category {
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}

.voice-agent-pulses__detail-desc {
  margin-top: 16px;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.5;
}

.voice-agent-pulses__detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  color: #6b7280;
}

.voice-agent-pulses__goto-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 20px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.voice-agent-pulses__goto-btn:hover {
  opacity: 0.9;
}

.voice-agent-pulses__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}

/* Pulse View Sections */
.voice-agent-pulse-view__section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.voice-agent-pulse-view__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 12px;
}

.voice-agent-pulse-view__members {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.voice-agent-pulse-view__member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.voice-agent-pulse-view__member-name {
  font-size: 14px;
  color: #111827;
}

.voice-agent-pulse-view__member-role {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #e5e7eb;
  padding: 2px 8px;
  border-radius: 4px;
}

.voice-agent-pulse-view__member-more {
  font-size: 13px;
  color: #8b5cf6;
  padding: 8px 12px;
}

.voice-agent-pulse-view__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.voice-agent-pulse-view__topic {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f3f4f6;
  border-radius: 16px;
  font-size: 13px;
  color: #4b5563;
}

/* ========================================
   VOICE AGENT TOPICS LIST MODAL
   ======================================== */

.voice-agent-topics-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Base padding + safe areas for native app */
  padding: calc(20px + var(--va-safe-top, 0px)) 20px calc(20px + var(--va-safe-bottom, 0px)) 20px;
}

.voice-agent-topics-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.voice-agent-topics-dialog {
  position: relative;
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  max-height: var(--va-modal-max-height, 85vh);
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  min-height: 0;
}

.voice-agent-topics__header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.voice-agent-topics__header-text {
  flex: 1;
  min-width: 0;
}

.voice-agent-topics__title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.voice-agent-topics__subtitle {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.voice-agent-topics__count {
  background: #f3f4f6;
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
}

.voice-agent-topics__close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  flex-shrink: 0;
}

.voice-agent-topics__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-topics__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  min-height: 200px;
}

.voice-agent-topics__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.voice-agent-topics__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.voice-agent-topics__item:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.voice-agent-topics__item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.voice-agent-topics__item-info {
  flex: 1;
  min-width: 0;
}

.voice-agent-topics__item-name {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-agent-topics__item-meta {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.voice-agent-topics__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INSIGHT VIEW MODAL
   ═══════════════════════════════════════════════════════════════════════════════ */

.voice-agent-insight-view-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding handled by shared safe area rule */
}

.voice-agent-insight-view-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.voice-agent-insight-view-dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: var(--va-modal-max-height, 85vh);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: taskViewSlideUp 0.25s ease-out;
  min-height: 0;
}

.voice-agent-insight-view__header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.voice-agent-insight-view__header-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.voice-agent-insight-view__type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}

/* Type badge color variants - aligned with main insights */
.voice-agent-insight-view__type-badge.bg-amber-100 {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e !important;
  border-color: #fde047;
  box-shadow: 0 2px 4px rgba(251, 191, 36, 0.15);
}

.voice-agent-insight-view__type-badge.bg-blue-100 {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af !important;
  border-color: #93c5fd;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.15);
}

.voice-agent-insight-view__type-badge.bg-red-100 {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #991b1b !important;
  border-color: #fca5a5;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.15);
}

.voice-agent-insight-view__type-badge.bg-green-100 {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534 !important;
  border-color: #86efac;
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.15);
}

/* Gray/Info type */
.voice-agent-insight-view__type-badge.bg-gray-100 {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  color: #374151 !important;
  border-color: #d1d5db;
  box-shadow: 0 2px 4px rgba(107, 114, 128, 0.1);
}

/* Status badge variants */
.voice-agent-insight-view__status-badge.bg-gray-100 {
  background: #f3f4f6;
  color: #4b5563 !important;
}

.voice-agent-insight-view__status-badge.bg-blue-100 {
  background: #dbeafe;
  color: #1d4ed8 !important;
}

.voice-agent-insight-view__status-badge.bg-amber-100 {
  background: #fef3c7;
  color: #b45309 !important;
}

.voice-agent-insight-view__status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

.voice-agent-insight-view__back {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
  margin-right: 4px;
}

.voice-agent-insight-view__back:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-insight-view__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.voice-agent-insight-view__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-insight-view__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.voice-agent-insight-view__topic {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  margin: 0;
  letter-spacing: -0.01em;
}

.voice-agent-insight-view__description {
  font-size: 15px;
  color: #6b7280;
  line-height: 1.6;
}

.voice-agent-insight-view__description p {
  margin: 0;
}

.voice-agent-insight-view__explanation {
  background: #f9fafb;
  border-radius: 12px;
  padding: 14px 16px;
  border-left: 4px solid #e5e7eb;
}

.voice-agent-insight-view__explanation p {
  margin: 0;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
}

.voice-agent-insight-view__section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.voice-agent-insight-view__section {
  margin-bottom: 4px;
}

.voice-agent-insight-view__recommendations {
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
  margin-top: 4px;
}

.voice-agent-insight-view__rec-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.voice-agent-insight-view__rec-item {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  transition: all 0.15s;
}

.voice-agent-insight-view__rec-item:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.voice-agent-insight-view__rec-item--executed {
  background: #f0fdf4;
  border-color: #86efac;
}

.voice-agent-insight-view__rec-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #dbeafe;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.voice-agent-insight-view__rec-item--executed .voice-agent-insight-view__rec-icon {
  background: #dcfce7;
  color: #16a34a;
}

.voice-agent-insight-view__rec-content {
  flex: 1;
  min-width: 0;
}

.voice-agent-insight-view__rec-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 2px;
}

.voice-agent-insight-view__rec-summary {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

.voice-agent-insight-view__rec-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #16a34a;
}

.voice-agent-insight-view__rec-execute {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: #2563eb;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.voice-agent-insight-view__rec-execute:hover:not(:disabled) {
  background: #1d4ed8;
  transform: scale(1.05);
}

.voice-agent-insight-view__rec-execute:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.voice-agent-insight-view__rec-review {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: #8b5cf6;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.voice-agent-insight-view__rec-review:hover:not(:disabled) {
  background: #7c3aed;
  transform: scale(1.05);
}

.voice-agent-insight-view__rec-review:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.voice-agent-insight-view__rec-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 10px 12px;
  background: #f3f4f6;
  border-radius: 8px;
  font-size: 12px;
  color: #6b7280;
}

.voice-agent-insight-view__no-recs,
.voice-agent-insight-view__loading-recs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: #9ca3af;
  font-size: 14px;
}

.voice-agent-insight-view__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
  margin-top: auto;
}

.voice-agent-insight-view__meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #9ca3af;
}

.voice-agent-insight-view__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.voice-agent-insight-view__footer--confirm {
  background: #fffbeb;
  border-top-color: #fcd34d;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INSIGHTS LIST MODAL
   ═══════════════════════════════════════════════════════════════════════════════ */

.voice-agent-insights-list-overlay {
  position: fixed;
  inset: 0;
  z-index: 10010;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding handled by shared safe area rule */
}

.voice-agent-insights-list-dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: var(--va-modal-max-height, 80vh);
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: taskViewSlideUp 0.25s ease-out;
  min-height: 0;
}

.voice-agent-insights-list__header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.voice-agent-insights-list__title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
  flex: 1;
}

.voice-agent-insights-list__count {
  background: #e5e7eb;
  color: #374151;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
}

.voice-agent-insights-list__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.voice-agent-insights-list__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-insights-list__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  background: #f9fafb;
}

.voice-agent-insights-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  color: #9ca3af;
  font-size: 14px;
}

.voice-agent-insights-list__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.voice-agent-insight-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: white;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: all 0.2s;
}

.voice-agent-insight-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.voice-agent-insight-item__type-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid transparent;
}

/* Type icon variants - aligned with main insights badges */
.voice-agent-insight-item__type-icon.bg-amber-100 {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e !important;
  border-color: #fde047;
}

.voice-agent-insight-item__type-icon.bg-blue-100 {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af !important;
  border-color: #93c5fd;
}

.voice-agent-insight-item__type-icon.bg-red-100 {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #991b1b !important;
  border-color: #fca5a5;
}

.voice-agent-insight-item__type-icon.bg-green-100 {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  color: #166534 !important;
  border-color: #86efac;
}

/* Gray/Info type icon */
.voice-agent-insight-item__type-icon.bg-gray-100 {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  color: #374151 !important;
  border-color: #d1d5db;
}

.voice-agent-insight-item__content {
  flex: 1;
  min-width: 0;
}

.voice-agent-insight-item__topic {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
  line-height: 1.35;
}

.voice-agent-insight-item__description {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

.voice-agent-insight-item__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #9ca3af;
}

.voice-agent-insight-item__ref {
  background: #e5e7eb;
  color: #4b5563;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: 500;
}

.voice-agent-insight-item__arrow {
  color: #9ca3af;
  margin-top: 2px;
  flex-shrink: 0;
}

.voice-agent-insights-list__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RECOMMENDATION REVIEW MODAL
   Human-in-the-loop: Review/edit the item before creating it
   ═══════════════════════════════════════════════════════════════════════════════ */

.voice-agent-rec-review-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020; /* Above other modals */
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding handled by shared safe area rule */
}

.voice-agent-rec-review-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

.voice-agent-rec-review-dialog {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: var(--va-modal-max-height, 85vh);
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.voice-agent-rec-review__header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.voice-agent-rec-review__header-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.voice-agent-rec-review__type-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.voice-agent-rec-review__title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.voice-agent-rec-review__subtitle {
  font-size: 13px;
  color: #6b7280;
  margin: 2px 0 0 0;
}

.voice-agent-rec-review__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.voice-agent-rec-review__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-rec-review__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.voice-agent-rec-review__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.voice-agent-rec-review__label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.voice-agent-rec-review__input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 15px;
  color: #111827;
  background: white;
  transition: all 0.15s;
}

.voice-agent-rec-review__input:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.voice-agent-rec-review__textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 14px;
  color: #111827;
  background: white;
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
  line-height: 1.5;
  transition: all 0.15s;
}

.voice-agent-rec-review__textarea:focus {
  outline: none;
  border-color: #8b5cf6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.voice-agent-rec-review__textarea::placeholder,
.voice-agent-rec-review__input::placeholder {
  color: #9ca3af;
}

.voice-agent-rec-review__priority-group {
  display: flex;
  gap: 8px;
}

.voice-agent-rec-review__priority-btn {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: white;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
}

.voice-agent-rec-review__priority-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.voice-agent-rec-review__priority-btn--active {
  background: #8b5cf6;
  border-color: #8b5cf6;
  color: white;
}

.voice-agent-rec-review__priority-btn--active:hover {
  background: #7c3aed;
  border-color: #7c3aed;
}

.voice-agent-rec-review__edited {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #fef3c7;
  border-radius: 8px;
  font-size: 12px;
  color: #92400e;
}

.voice-agent-rec-review__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.voice-agent-rec-review__footer button {
  flex: 1;
}

/* ========================================
   Availability Modal Styles
   ======================================== */

.voice-agent-availability-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding handled by shared safe area rule */
  animation: voice-agent-fade-in 0.2s ease-out;
}

.voice-agent-availability-dialog {
  background: white;
  border-radius: 20px;
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: voice-agent-slide-up 0.25s ease-out;
  overflow: hidden;
  position: relative;
}

.voice-agent-availability__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 14px;
  border-bottom: 1px solid #f3f4f6;
  flex-shrink: 0;
  background: #fafafa;
}

.voice-agent-availability__date-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.voice-agent-availability__nav-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.15s;
  background: white;
  border: 1px solid #e5e7eb;
}

.voice-agent-availability__nav-btn:hover {
  background: #f3f4f6;
  color: #374151;
  border-color: #d1d5db;
}

.voice-agent-availability__nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.voice-agent-availability__date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  min-width: 160px;
  justify-content: center;
  padding: 0 8px;
}

.voice-agent-availability__title {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
}

/* Body wrapper - contains content and loading overlay */
.voice-agent-availability__body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  position: relative;
  max-height: calc(100vh - 220px); /* Leave room for header/footer */
  min-height: 300px;
}

/* Loading Overlay - Semi-transparent on top of content */
.voice-agent-availability__loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  z-index: 20;
}

.voice-agent-availability__loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.voice-agent-availability__loading-content span {
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
}

.voice-agent-availability__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid #e5e7eb;
  border-top-color: #8b5cf6;
  border-radius: 50%;
  animation: voice-agent-spin 0.7s linear infinite;
}

/* Timeline Container */
.voice-agent-availability__timeline {
  display: flex;
  min-height: 900px;
  height: 900px;
  position: relative;
  padding: 8px 0;
}

/* Hour Labels Column */
.voice-agent-availability__hour-labels {
  width: 52px;
  flex-shrink: 0;
  border-right: 1px solid #f3f4f6;
  background: #fafafa;
  position: relative;
  height: 100%;
  min-height: 900px;
}

.voice-agent-availability__hour {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-right: 8px;
  font-size: 10px;
  font-weight: 600;
  color: #9ca3af;
  transform: translateY(-50%);
  letter-spacing: -0.02em;
}

/* Timeline Body */
.voice-agent-availability__timeline-body {
  flex: 1;
  position: relative;
  height: 100%;
  min-height: 900px;
  padding: 0 4px;
}

/* Hour Grid Lines */
.voice-agent-availability__grid-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #f3f4f6;
}

/* Event Block (busy time) */
.voice-agent-availability__event {
  position: absolute;
  left: 6px;
  right: 6px;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-left: 3px solid #ef4444;
  border-radius: 6px;
  padding: 6px 8px;
  overflow: hidden;
  cursor: default;
  transition: transform 0.15s, box-shadow 0.15s;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  min-height: 24px;
}

/* Compact mode for short events - single line layout */
.voice-agent-availability__event--compact {
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
}

.voice-agent-availability__event--compact .voice-agent-availability__event-time {
  flex-shrink: 0;
}

.voice-agent-availability__event--compact .voice-agent-availability__event-name {
  flex: 1;
  min-width: 0;
}

/* Stacked/overlapping events - slightly more compact styling */
.voice-agent-availability__event--stacked {
  border-radius: 5px;
  padding: 5px 6px;
  border-left-width: 2px;
}

.voice-agent-availability__event--stacked.voice-agent-availability__event--compact {
  padding: 2px 5px;
}

.voice-agent-availability__event:hover {
  transform: translateX(2px);
  box-shadow: 0 3px 10px rgba(239, 68, 68, 0.15);
}

.voice-agent-availability__event-name {
  font-size: 12px;
  font-weight: 600;
  color: #991b1b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

/* Slightly smaller name for stacked events */
.voice-agent-availability__event--stacked .voice-agent-availability__event-name {
  font-size: 11px;
}

.voice-agent-availability__event-time {
  font-size: 10px;
  color: #b91c1c;
  font-weight: 500;
  display: block;
  line-height: 1.2;
}

/* Slightly smaller time in stacked events */
.voice-agent-availability__event--stacked .voice-agent-availability__event-time {
  font-size: 9px;
}

/* Free Slot Block */
.voice-agent-availability__slot {
  position: absolute;
  left: 6px;
  right: 6px;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-left: 3px solid #22c55e;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.15s;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border: 1px solid rgba(34, 197, 94, 0.15);
  border-left-width: 3px;
  min-height: 24px;
}

/* Compact mode for short slots - single line layout */
.voice-agent-availability__slot--compact {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
}

.voice-agent-availability__slot--compact .voice-agent-availability__slot-header {
  flex-shrink: 0;
}

.voice-agent-availability__slot--compact .voice-agent-availability__slot-time {
  flex: 1;
  min-width: 0;
}

.voice-agent-availability__slot:hover {
  transform: translateX(2px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-color: rgba(34, 197, 94, 0.3);
}

.voice-agent-availability__slot-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.voice-agent-availability__slot-icon {
  color: #16a34a;
  flex-shrink: 0;
}

.voice-agent-availability__slot-duration {
  font-size: 12px;
  font-weight: 600;
  color: #166534;
}

.voice-agent-availability__slot-time {
  font-size: 10px;
  color: #15803d;
}

/* Tight Slot (buffer time warning) */
.voice-agent-availability__slot--tight {
  background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
  border-left-color: #eab308;
}

.voice-agent-availability__slot--tight:hover {
  background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.25);
}

.voice-agent-availability__slot--tight .voice-agent-availability__slot-icon {
  color: #ca8a04;
}

.voice-agent-availability__slot--tight .voice-agent-availability__slot-duration {
  color: #854d0e;
}

.voice-agent-availability__slot--tight .voice-agent-availability__slot-time {
  color: #a16207;
}

.voice-agent-availability__slot-warning {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #92400e;
  margin-top: 4px;
}

/* Buffer Slot (padding time) */
.voice-agent-availability__slot--buffer {
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border-left-color: #9ca3af;
  opacity: 0.7;
}

.voice-agent-availability__slot--buffer .voice-agent-availability__slot-icon {
  color: #6b7280;
}

.voice-agent-availability__slot--buffer .voice-agent-availability__slot-duration {
  color: #4b5563;
}

.voice-agent-availability__slot--buffer .voice-agent-availability__slot-time {
  color: #6b7280;
}

/* Empty State */
.voice-agent-availability__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

.voice-agent-availability__empty-icon {
  width: 48px;
  height: 48px;
  color: #d1d5db;
  margin-bottom: 12px;
}

.voice-agent-availability__empty-text {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 4px;
}

.voice-agent-availability__empty-hint {
  font-size: 12px;
  color: #9ca3af;
}

/* Footer */
.voice-agent-availability__footer {
  padding: 12px 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f9fafb;
  flex-shrink: 0;
}

.voice-agent-availability__hint {
  font-size: 12px;
  color: #9ca3af;
  display: flex;
  align-items: center;
  gap: 6px;
}

.voice-agent-availability__hint i {
  color: #8b5cf6;
}

.voice-agent-availability__close-btn {
  padding: 8px 16px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
}

.voice-agent-availability__close-btn:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

/* Summary section at bottom of timeline */
.voice-agent-availability__summary {
  padding: 12px 16px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 16px;
}

.voice-agent-availability__summary-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}

.voice-agent-availability__summary-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.voice-agent-availability__summary-dot--free {
  background: #22c55e;
}

.voice-agent-availability__summary-dot--busy {
  background: #ef4444;
}

.voice-agent-availability__summary-dot--tight {
  background: #eab308;
}

/* Close button in header */
.voice-agent-availability__close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.15s;
  background: transparent;
  border: none;
  margin-left: auto;
}

.voice-agent-availability__close:hover {
  background: #f3f4f6;
  color: #374151;
}

/* Header date with icon */
.voice-agent-availability__date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

/* Suggested slots section */
.voice-agent-availability__suggested {
  padding: 12px 16px;
  background: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
  border-bottom: 1px solid #fde68a;
}

.voice-agent-availability__suggested-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #92400e;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.voice-agent-availability__suggested-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.voice-agent-availability__suggested-slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: white;
  border: 1px solid #fde68a;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  text-align: left;
}

.voice-agent-availability__suggested-slot:hover {
  background: #fffbeb;
  border-color: #f59e0b;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.voice-agent-availability__slot-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-agent-availability__slot-reason {
  font-size: 11px;
  color: #d97706;
  background: #fef3c7;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Legend in footer */
.voice-agent-availability__legend {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voice-agent-availability__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}

.voice-agent-availability__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}

.voice-agent-availability__legend-dot--busy {
  background: linear-gradient(135deg, #fecaca 0%, #ef4444 100%);
}

.voice-agent-availability__legend-dot--free {
  background: linear-gradient(135deg, #bbf7d0 0%, #22c55e 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT VIEW MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.voice-agent-contact-view-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding handled by shared safe area rule */
}

.voice-agent-contact-view-dialog {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: var(--va-modal-max-height, 80vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  animation: taskViewSlideUp 0.25s ease-out;
  min-height: 0;
}

.voice-agent-contact-view__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
}

.voice-agent-contact-view__back {
  width: 36px;
  height: 36px;
  border: none;
  background: #e5e7eb;
  border-radius: 8px;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.voice-agent-contact-view__back:hover {
  background: #d1d5db;
}

.voice-agent-contact-view__icon {
  width: 40px;
  height: 40px;
  background: rgba(13, 148, 136, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d9488;
}

.voice-agent-contact-view__title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.voice-agent-contact-view__close {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.voice-agent-contact-view__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-contact-view__body {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 20px;
}

.voice-agent-contact-view__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px;
  border-bottom: 1px solid #f3f4f6;
}

.voice-agent-contact-view__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(13, 148, 136, 0.3);
  position: relative;
}

.voice-agent-contact-view__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.voice-agent-contact-view__avatar-initials {
  display: none;
  color: white;
  font-size: 32px;
  font-weight: 600;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}

.voice-agent-contact-view__name {
  font-size: 22px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
}

.voice-agent-contact-view__company {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 8px;
}

.voice-agent-contact-view__favorite {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #f59e0b;
  background: #fef3c7;
  padding: 4px 10px;
  border-radius: 12px;
}

.voice-agent-contact-view__info {
  padding: 16px 20px;
}

.voice-agent-contact-view__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f9fafb;
}

.voice-agent-contact-view__row:last-child {
  border-bottom: none;
}

.voice-agent-contact-view__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f0fdfa;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d9488;
  flex-shrink: 0;
}

.voice-agent-contact-view__content {
  flex: 1;
  min-width: 0;
}

.voice-agent-contact-view__label {
  display: block;
  font-size: 11px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.voice-agent-contact-view__value {
  display: block;
  font-size: 14px;
  color: #1f2937;
  word-break: break-word;
}

.voice-agent-contact-view__value-alt {
  display: block;
  font-size: 13px;
  color: #6b7280;
  margin-top: 4px;
}

.voice-agent-contact-view__notes {
  white-space: pre-wrap;
  line-height: 1.5;
}

.voice-agent-contact-view__copy {
  background: none;
  border: none;
  padding: 8px;
  border-radius: 8px;
  color: #0d9488;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.voice-agent-contact-view__copy:hover {
  background: #f0fdfa;
}

.voice-agent-contact-view__footer {
  padding: 16px 20px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACTS LIST MODAL
   ═══════════════════════════════════════════════════════════════════════════ */

.voice-agent-contacts-list-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding handled by shared safe area rule */
}

.voice-agent-contacts-list-dialog {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: var(--va-modal-max-height, 80vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  animation: taskViewSlideUp 0.25s ease-out;
  min-height: 0;
}

.voice-agent-contacts-list__header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  gap: 12px;
  flex-shrink: 0;
}

.voice-agent-contacts-list__icon {
  width: 40px;
  height: 40px;
  background: rgba(13, 148, 136, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d9488;
}

.voice-agent-contacts-list__title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.voice-agent-contacts-list__count {
  background: #0d9488;
  color: white;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.voice-agent-contacts-list__close {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  padding: 8px;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.voice-agent-contacts-list__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-contacts-list__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
  min-height: 0;
}

.voice-agent-contacts-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #9ca3af;
}

.voice-agent-contacts-list__empty p {
  margin-top: 12px;
  font-size: 14px;
}

.voice-agent-contacts-list__footer {
  padding: 16px 20px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Contact Card (in list) */
.voice-agent-contact-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.voice-agent-contact-card:hover {
  border-color: #0d9488;
  background: #f0fdfa;
  box-shadow: 0 2px 8px rgba(13, 148, 136, 0.1);
}

.voice-agent-contact-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.voice-agent-contact-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.voice-agent-contact-card__avatar span,
.voice-agent-contact-card__initials {
  display: none;
  color: white;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}

.voice-agent-contact-card__info {
  flex: 1;
  min-width: 0;
}

.voice-agent-contact-card__name {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 2px;
}

.voice-agent-contact-card__email {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-agent-contact-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}

.voice-agent-contact-card__meta > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.voice-agent-contact-card__company-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
}

.voice-agent-contact-card__initials {
  display: none;
  color: white;
  font-size: 16px;
  font-weight: 600;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.voice-agent-contact-card__company {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 2px;
}

.voice-agent-contact-card__favorite {
  color: #f59e0b;
  flex-shrink: 0;
}

/* ────────────────────────────────────────────────────────────────
   Voice Agent Audio Quality Modal
   ──────────────────────────────────────────────────────────────── */

.voice-agent-quality-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  padding: 20px;
}

.voice-agent-quality-dialog {
  background: linear-gradient(180deg, #1e1b2e 0%, #151320 100%);
  border-radius: 20px;
  padding: 24px;
  max-width: 380px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.voice-agent-quality__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.voice-agent-quality__title {
  font-size: 18px;
  font-weight: 600;
  color: #fbbf24;
}

.voice-agent-quality__description {
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.voice-agent-quality__description p {
  margin-bottom: 12px;
}

.voice-agent-quality__reasons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.voice-agent-quality__reasons li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
  font-size: 13px;
}

.voice-agent-quality__reasons iconify-icon {
  color: #64748b;
}

.voice-agent-quality__settings {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.voice-agent-quality__slider-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.voice-agent-quality__slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.voice-agent-quality__slider-label {
  font-size: 12px;
  font-weight: 500;
  color: #94a3b8;
}

.voice-agent-quality__slider-value {
  font-size: 11px;
  color: #a78bfa;
  font-weight: 500;
}

.voice-agent-quality__slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #64748b;
  margin-top: 2px;
}

/* Modal-specific slider styling (dark theme) */
.voice-agent-slider--modal {
  background: linear-gradient(to right, rgba(139, 92, 246, 0.3) 0%, rgba(99, 102, 241, 0.2) 50%, rgba(139, 92, 246, 0.3) 100%);
}

.voice-agent-slider--modal::-webkit-slider-thumb {
  background: #a78bfa;
  box-shadow: 0 2px 8px rgba(167, 139, 250, 0.5);
}

.voice-agent-slider--modal::-moz-range-thumb {
  background: #a78bfa;
  box-shadow: 0 2px 8px rgba(167, 139, 250, 0.5);
}

.voice-agent-quality__buttons {
  display: flex;
  gap: 12px;
}

.voice-agent-quality-btn {
  flex: 1;
  padding: 14px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  border: 1px solid transparent;
}

.voice-agent-quality-btn--text {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.3);
}

.voice-agent-quality-btn--text:hover {
  background: rgba(34, 197, 94, 0.25);
  border-color: rgba(34, 197, 94, 0.5);
}

.voice-agent-quality-btn--resume {
  background: rgba(168, 85, 247, 0.15);
  color: #c4b5fd;
  border-color: rgba(168, 85, 247, 0.3);
}

.voice-agent-quality-btn--resume:hover {
  background: rgba(168, 85, 247, 0.25);
  border-color: rgba(168, 85, 247, 0.5);
}

.voice-agent-quality__hint {
  text-align: center;
  font-size: 11px;
  color: #64748b;
  margin-top: 12px;
  margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   MINIMIZED MODALS - EDGE TABS
   Stacked tabs on the right edge for minimized modals
   ═══════════════════════════════════════════════════════════════════════════════ */

.minimized-modals-container {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10001; /* Above voice/text agent modals (9999) so tabs are accessible */
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.minimized-modal-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 12px;
  background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-right: none;
  border-radius: 12px 0 0 12px;
  box-shadow: 
    -4px 2px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
  color: #c4b5fd;
  font-size: 13px;
  font-weight: 500;
  min-width: 48px;
  /* Stagger tabs slightly based on index */
  transform: translateX(calc(var(--tab-index, 0) * 4px));
}

.minimized-modal-tab:hover {
  background: linear-gradient(135deg, #312e81 0%, #4c1d95 100%);
  border-color: rgba(167, 139, 250, 0.6);
  transform: translateX(-8px);
  box-shadow: 
    -6px 4px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.minimized-modal-tab:active {
  transform: translateX(-4px);
}

.minimized-modal-tab__label {
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide label on small screens, show only icon */
@media (max-width: 400px) {
  .minimized-modal-tab__label {
    display: none;
  }
  
  .minimized-modal-tab {
    padding: 10px 12px;
  }
}

/* Update indicator pulse */
.minimized-modal-tab__pulse {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 12px;
  height: 12px;
  background: #22c55e;
  border-radius: 50%;
  animation: minimized-tab-pulse 1.5s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

@keyframes minimized-tab-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }
}

/* Has update state - glow effect */
.minimized-modal-tab.has-update {
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 
    -4px 2px 12px rgba(0, 0, 0, 0.25),
    0 0 20px rgba(34, 197, 94, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.minimized-modal-tab.has-update:hover {
  box-shadow:
    -6px 4px 16px rgba(0, 0, 0, 0.3),
    0 0 24px rgba(34, 197, 94, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ===============================================
   HELP BUTTONS (Voice & Text Agent Headers)
   =============================================== */

.voice-agent-modal__help,
.text-agent-modal__help {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.2s;
  margin-right: 8px;
}

.voice-agent-modal__help:hover,
.text-agent-modal__help:hover {
  background: rgba(139, 92, 246, 0.3);
  color: #fff;
}

/* ===============================================
   AGENT HELP MODAL
   =============================================== */

.agent-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.agent-help-dialog {
  background: linear-gradient(145deg, #1e1e2e 0%, #1a1a2e 50%, #16213e 100%);
  border-radius: 20px;
  width: 100%;
  max-width: 440px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(139, 92, 246, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Header */
.agent-help__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: none;
  background: rgba(0, 0, 0, 0.2);
}

.agent-help__title {
  flex: 1;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
}

.agent-help__badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.agent-help__badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.agent-help__badge--session {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
}

.agent-help__badge--voice {
  background: rgba(139, 92, 246, 0.25);
  color: #c4b5fd;
}

.agent-help__badge--text {
  background: rgba(45, 212, 191, 0.25);
  color: #5eead4;
}

.agent-help__badge--relay {
  background: rgba(251, 146, 60, 0.25);
  color: #fdba74;
}

/* Version line - subtle */
.agent-help__version {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  padding: 0 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Intro block */
.agent-help__intro {
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(45, 212, 191, 0.08) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.agent-help__intro-text {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 10px 0;
}

.agent-help__intro-examples {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.agent-help__intro-label {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.agent-help__intro-examples em {
  font-style: italic;
  color: rgba(196, 181, 253, 0.9);
}

.agent-help__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.agent-help__close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Content */
.agent-help__content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

/* Loading State */
.agent-help__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
}

/* Error State */
.agent-help__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
}

.agent-help__retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: #a78bfa;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.agent-help__retry-btn:hover {
  background: rgba(139, 92, 246, 0.3);
  border-color: rgba(139, 92, 246, 0.5);
}

/* Category */
.agent-help__category {
  margin-bottom: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: all 0.2s ease;
}

.agent-help__category:last-child {
  margin-bottom: 0;
}

.agent-help__category:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(139, 92, 246, 0.2);
}

/* Category Header (Accordion button) */
.agent-help__category-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.agent-help__category-header:hover {
  background: rgba(255, 255, 255, 0.04);
}

.agent-help__category-icon {
  color: #a78bfa;
  flex-shrink: 0;
}

.agent-help__category-title {
  flex: 1;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.agent-help__category-count {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
}

.agent-help__category-toggle {
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s;
}

/* Category Items (Expanded content) */
.agent-help__items {
  padding: 0 14px 12px 14px;
  overflow: hidden;
}

.agent-help__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.agent-help__item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.agent-help__item-text {
  flex: 1;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.4;
}

.agent-help__item-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
  flex-shrink: 0;
}

.agent-help__item-badge--voice {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
}

.agent-help__item-badge--text {
  background: rgba(45, 212, 191, 0.2);
  color: #5eead4;
}

.agent-help__item-note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-style: italic;
}

/* Advanced Toggle */
.agent-help__advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 12px 16px;
  margin-top: 8px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px dashed rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  color: rgba(139, 92, 246, 0.8);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.agent-help__advanced-toggle:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.5);
  color: rgba(139, 92, 246, 1);
}

.agent-help__advanced-toggle iconify-icon {
  opacity: 0.8;
}

/* Advanced Content Section */
.agent-help__advanced {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  overflow: hidden;
}

.agent-help__advanced-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.agent-help__advanced-item:last-child {
  border-bottom: none;
}

.agent-help__advanced-item iconify-icon {
  flex-shrink: 0;
}

/* Relay Badge Style */
.agent-help__badge--relay {
  background: linear-gradient(135deg, rgba(251, 146, 60, 0.3) 0%, rgba(234, 88, 12, 0.3) 100%);
  border: 1px solid rgba(251, 146, 60, 0.5);
  color: rgb(251, 146, 60);
}

/* Footer */
.agent-help__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.15);
}

.agent-help__footer iconify-icon {
  color: rgba(255, 255, 255, 0.4);
}

.agent-help__footer span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* ────────────────────────────────────────────────────────────────
   Event Agent FAB (Floating Action Button)
   ──────────────────────────────────────────────────────────────── */

.event-agent-fab {
  position: fixed;
  bottom: calc(24px + var(--native-app-bottom-margin, 0px));
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  z-index: 100;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Chat Agent FAB - needs more bottom space for chat input footer */
.chat-agent-fab {
  /* Keep the FAB above the (variable-height) chat footer on mobile.
     `--chat-footer-height` is set dynamically by the chats page JS. */
  bottom: calc(24px + var(--native-app-bottom-margin, 0px) + var(--chat-footer-height, 0px));
}

.event-agent-fab--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
}

/* Main FAB button */
.event-agent-fab__main {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: none;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4), 0 2px 8px rgba(0, 0, 0, 0.1);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.event-agent-fab__main:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 24px rgba(99, 102, 241, 0.5), 0 2px 8px rgba(0, 0, 0, 0.15);
}

.event-agent-fab__main:active {
  transform: scale(0.95);
}

.event-agent-fab__main--active {
  background: linear-gradient(135deg, #64748b 0%, #475569 100%);
  box-shadow: 0 4px 16px rgba(71, 85, 105, 0.4);
}

.event-agent-fab__main iconify-icon {
  font-size: 24px;
  transition: transform 0.2s ease;
}

.event-agent-fab__main--active iconify-icon {
  transform: rotate(90deg);
}

/* Options container */
.event-agent-fab__options {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.event-agent-fab__options--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Individual option buttons */
.event-agent-fab__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 12px;
  border-radius: 24px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.event-agent-fab__option:hover {
  transform: translateX(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.event-agent-fab__option:active {
  transform: scale(0.95);
}

.event-agent-fab__option iconify-icon {
  font-size: 20px;
}

.event-agent-fab__option span {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.event-agent-fab__option--text iconify-icon {
  color: #6366f1;
}

.event-agent-fab__option--voice iconify-icon {
  color: #8b5cf6;
}

.event-agent-fab__option--text:hover {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
}

.event-agent-fab__option--voice:hover {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
}

/* Legacy styles - keep for backwards compatibility */
.event-agent-fab__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.event-agent-fab__btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.event-agent-fab__btn:active {
  transform: scale(0.95);
}

/* Text agent button - teal accent */
.event-agent-fab__btn--text {
  color: #0d9488;
}

.event-agent-fab__btn--text:hover {
  background: rgba(13, 148, 136, 0.1);
}

/* Voice agent button - purple accent */
.event-agent-fab__btn--voice {
  color: #7c3aed;
}

.event-agent-fab__btn--voice:hover {
  background: rgba(124, 58, 237, 0.1);
}

.event-agent-fab__btn iconify-icon {
  font-size: 22px;
}

/* Tooltip styling for FAB buttons */
.event-agent-fab__btn[title] {
  position: relative;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .event-agent-fab__btn {
    background: rgba(30, 30, 30, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  
  .event-agent-fab__btn--text:hover {
    background: rgba(13, 148, 136, 0.2);
  }
  
  .event-agent-fab__btn--voice:hover {
    background: rgba(124, 58, 237, 0.2);
  }
}

/* =========================================
   RELAY VIEW MODAL
   ========================================= */

.voice-agent-relay-view-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10013;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-agent-relay-view-dialog {
  position: relative;
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: var(--va-modal-max-height, 85vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  animation: taskViewSlideUp 0.25s ease-out;
  min-height: 0;
}

.voice-agent-relay-view__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
}

.voice-agent-relay-view__header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voice-agent-relay-view__back {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.voice-agent-relay-view__back:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-relay-view__title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.voice-agent-relay-view__close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  margin-left: auto;
}

.voice-agent-relay-view__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-relay-view__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.voice-agent-relay-view__status-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.voice-agent-relay-view__section {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
}

.voice-agent-relay-view__section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.voice-agent-relay-view__section-header iconify-icon {
  font-size: 18px;
}

.voice-agent-relay-view__objective {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  line-height: 1.5;
}

.voice-agent-relay-view__context {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  margin-top: 8px;
}

.voice-agent-relay-view__section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  margin-bottom: 6px;
}

.voice-agent-relay-view__section-value {
  font-size: 14px;
  color: #111827;
  line-height: 1.5;
}

.voice-agent-relay-view__parties {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voice-agent-relay-view__party {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.voice-agent-relay-view__party-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.voice-agent-relay-view__party-info {
  flex: 1;
  min-width: 0;
}

.voice-agent-relay-view__party-name {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice-agent-relay-view__party-role {
  font-size: 11px;
  color: #9ca3af;
}

.voice-agent-relay-view__arrow {
  color: #d1d5db;
  font-size: 18px;
  flex-shrink: 0;
}

.voice-agent-relay-view__journey {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.voice-agent-relay-view__hop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.voice-agent-relay-view__hop-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.voice-agent-relay-view__hop-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.1);
  color: #7c3aed;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.voice-agent-relay-view__hop-info {
  flex: 1;
  min-width: 0;
}

.voice-agent-relay-view__hop-names {
  font-size: 13px;
  color: #111827;
  font-weight: 500;
}

.voice-agent-relay-view__hop-status {
  font-size: 11px;
  color: #9ca3af;
}

.voice-agent-relay-view__hop-name {
  font-size: 13px;
  color: #111827;
  font-weight: 500;
}

.voice-agent-relay-view__hop-reason {
  font-size: 11px;
  color: #6b7280;
  margin-top: 2px;
}

.voice-agent-relay-view__hop-count {
  margin-left: auto;
  font-size: 11px;
  color: #6b7280;
  background: #f3f4f6;
  padding: 2px 8px;
  border-radius: 10px;
}

.voice-agent-relay-view__report {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.voice-agent-relay-view__summary {
  font-size: 14px;
  color: #374151;
  line-height: 1.6;
}

.voice-agent-relay-view__recommendations {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
}

.voice-agent-relay-view__recommendations strong {
  color: #374151;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.voice-agent-relay-view__status-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 20px;
  margin-left: auto;
}

.voice-agent-relay-view__status-badge.status-active {
  background: #dbeafe;
  color: #1d4ed8;
}

.voice-agent-relay-view__status-badge.status-pending {
  background: #fef3c7;
  color: #b45309;
}

.voice-agent-relay-view__status-badge.status-complete {
  background: #d1fae5;
  color: #047857;
}

.voice-agent-relay-view__status-badge.status-cancelled {
  background: #fee2e2;
  color: #b91c1c;
}

.voice-agent-relay-view__status-badge.status-declined {
  background: #fee2e2;
  color: #b91c1c;
}

.voice-agent-relay-view__header-icon {
  width: 40px;
  height: 40px;
  background: rgba(124, 58, 237, 0.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c3aed;
}

.voice-agent-relay-view__header-title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.voice-agent-relay-view__party-label {
  font-size: 11px;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 2px;
}

.voice-agent-relay-view__confirm-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.voice-agent-relay-view__confirm-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.voice-agent-relay-view__confirm-content p {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

.voice-agent-relay-view__confirm-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.voice-agent-relay-view__confirm-actions button {
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
}

.voice-agent-relay-view__confirm-actions button:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.voice-agent-relay-view__confirm-actions button.primary {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

.voice-agent-relay-view__confirm-actions button.primary:hover {
  background: #6d28d9;
  border-color: #6d28d9;
}

.voice-agent-relay-view__action {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #374151;
}

.voice-agent-relay-view__action:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.voice-agent-relay-view__action--primary {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

.voice-agent-relay-view__action--primary:hover {
  background: #6d28d9;
  border-color: #6d28d9;
}

.voice-agent-relay-view__deliverable {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.voice-agent-relay-view__deliverable .voice-agent-relay-view__section-label {
  color: #047857;
}

/* Confirmation overlay within relay view */
.voice-agent-relay-view__confirm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  border-radius: 20px;
  z-index: 5;
}

.voice-agent-relay-view__confirm-icon {
  font-size: 48px;
  color: #f59e0b;
  margin-bottom: 16px;
}

.voice-agent-relay-view__confirm-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
}

.voice-agent-relay-view__confirm-text {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 24px;
  line-height: 1.5;
}

.voice-agent-relay-view__confirm-actions {
  display: flex;
  gap: 12px;
}

.voice-agent-relay-view__confirm-btn {
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid #e5e7eb;
}

.voice-agent-relay-view__confirm-btn--cancel {
  background: #fff;
  color: #374151;
}

.voice-agent-relay-view__confirm-btn--cancel:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.voice-agent-relay-view__confirm-btn--confirm {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

.voice-agent-relay-view__confirm-btn--confirm:hover {
  background: #6d28d9;
  border-color: #6d28d9;
}

.voice-agent-relay-view__footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.voice-agent-relay-view__btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #e5e7eb;
}

.voice-agent-relay-view__btn--primary {
  background: #7c3aed;
  border-color: #7c3aed;
  color: #fff;
}

.voice-agent-relay-view__btn--primary:hover {
  background: #6d28d9;
  border-color: #6d28d9;
}

.voice-agent-relay-view__btn--secondary {
  background: #fff;
  color: #374151;
}

.voice-agent-relay-view__btn--secondary:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.voice-agent-relay-view__btn--danger {
  background: #fff;
  border-color: #fecaca;
  color: #dc2626;
}

.voice-agent-relay-view__btn--danger:hover {
  background: #fef2f2;
  border-color: #fca5a5;
}

/* =========================================
   RELAYS LIST MODAL
   ========================================= */

.voice-agent-relays-list-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10012;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-agent-relays-list-dialog {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 480px;
  max-height: var(--va-modal-max-height, 80vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  animation: taskViewSlideUp 0.25s ease-out;
  min-height: 0;
}

.voice-agent-relays-list__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
}

.voice-agent-relays-list__title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.voice-agent-relays-list__count {
  background: #7c3aed;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}

.voice-agent-relays-list__close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.voice-agent-relays-list__close:hover {
  background: #f3f4f6;
  color: #374151;
}

.voice-agent-relays-list__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
  min-height: 0;
}

.voice-agent-relays-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: #9ca3af;
}

.voice-agent-relays-list__empty iconify-icon {
  margin-bottom: 12px;
  color: #d1d5db;
}

.voice-agent-relays-list__empty p {
  margin: 0;
  font-size: 14px;
}

/* Relay Card */
.voice-agent-relay-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.voice-agent-relay-card:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.voice-agent-relay-card:last-child {
  margin-bottom: 0;
}

.voice-agent-relay-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.voice-agent-relay-card__type {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #7c3aed;
}

.voice-agent-relay-card__type iconify-icon {
  font-size: 14px;
}

.voice-agent-relay-card__objective {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.voice-agent-relay-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.voice-agent-relay-card__parties {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b7280;
}

.voice-agent-relay-card__parties iconify-icon {
  font-size: 14px;
  color: #9ca3af;
}

.voice-agent-relay-card__hop {
  font-size: 11px;
  padding: 2px 8px;
  background: #ede9fe;
  color: #7c3aed;
  border-radius: 10px;
}

/* =========================================
   RELAYS LIST - Missing CSS Classes
   ========================================= */

.voice-agent-relays-list__icon {
  width: 40px;
  height: 40px;
  background: rgba(124, 58, 237, 0.15);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a78bfa;
  flex-shrink: 0;
}

.voice-agent-relays-list__footer {
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.voice-agent-relays-list__footer .voice-agent-task-view__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}

.voice-agent-relays-list__footer .voice-agent-task-view__btn--secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
}

.voice-agent-relays-list__footer .voice-agent-task-view__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* =========================================
   RELAY CARD - Missing CSS Classes
   ========================================= */

.voice-agent-relay-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(124, 58, 237, 0.15);
  color: #a78bfa;
}

.voice-agent-relay-card__icon.type-sent {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.voice-agent-relay-card__icon.type-received {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.voice-agent-relay-card__content {
  flex: 1;
  min-width: 0;
}

.voice-agent-relay-card__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.voice-agent-relay-card__status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 4px;
}

.voice-agent-relay-card__status.status-active {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.voice-agent-relay-card__status.status-pending {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.voice-agent-relay-card__status.status-complete {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.voice-agent-relay-card__status.status-cancelled {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

.voice-agent-relay-card__status.status-declined {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}

/* =========================================
   RELAY VIEW - Additional Missing Classes
   ========================================= */

.voice-agent-relay-view__action--close {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.7);
}

.voice-agent-relay-view__action--close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Fix layout for relay card to use proper flex structure */
.voice-agent-relay-card {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voice-agent-relay-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 4px;
}

.voice-agent-relay-card__meta span {
  white-space: nowrap;
}

.voice-agent-relay-card__type {
  color: #a78bfa;
  font-weight: 500;
}
/* End: 7_voice_agent.css */

/* Begin: 8_events.css */
/* Shared event page styles */
.event_page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

.cards {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
}

.card {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
  min-width: 100vw;
  box-sizing: border-box;
  padding: 0.5rem 0.2rem 0;
  height: 100%;
}

.card-panel {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden; /* Prevent horizontal overflow */
  word-wrap: break-word;
  overflow-wrap: break-word;
   width: 100%;
  max-width: 40rem;
  margin: 0 auto;
}

.card-panel * {
  max-width: 100%;
  box-sizing: border-box;
}

.card.notetaker-no-pad {
  padding: 0 !important;
}

.tabs             { overflow-x:auto; white-space:nowrap; }
.tabs::-webkit-scrollbar{ display:none; }

/* Remove shadow from selected tab if present */
.tabs button:focus, .tabs button:active {
  box-shadow: none !important;
}

/* Utility classes for fade/translate effect */
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.translate-y-2 { transform: translateY(0.5rem); }
.translate-y-0 { transform: translateY(0); }
.scale-90 { transform: scale(0.90); }
.scale-100 { transform: scale(1); }
.-translate-y-4 { transform: translateY(-1rem); }

.tab-icon {
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 9999px;
  background: #f3f4f6; /* light gray */
  color: #888;
  transition: background 0.2s, color 0.2s;
  display: flex;
  align-items: flex-start; /* changed from center */
  justify-content: center;
  line-height: 1;
  padding: 0;
  margin: 0;
  padding-top: 0.18rem; /* add a little top padding for visual centering */
}
.tab-icon > svg,
.tab-icon > iconify-icon {
  width: 1.5rem !important;
  height: 1.5rem !important;
  display: block;
  margin: 0 auto;
  line-height: 1;
}
.tab-icon.tab-active {
  background: var(--primary, #2563eb); /* fallback to blue-600 */
  color: #fff;
}
.tab-icon.tab-active svg,
.tab-icon.tab-active iconify-icon {
  color: #fff !important;
  fill: #fff !important;
}
@keyframes tab-pop-jiggle {
  0%   { transform: scale(0.9) rotate(0deg);}
  40%  { transform: scale(1.15) rotate(-8deg);}
  60%  { transform: scale(1.08) rotate(8deg);}
  80%  { transform: scale(1.03) rotate(-4deg);}
  100% { transform: scale(1) rotate(0deg);}
}
.animate-tab-pop {
  animation: tab-pop-jiggle 0.45s cubic-bezier(.7,-0.3,.5,1.7);
}

/* Animation styles for active card */
@keyframes card-fade-up {
  0% {
    opacity: 0.1;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.active-card-animate {
  animation: card-fade-up 0.5s cubic-bezier(.4,0,.2,1);
  z-index: 1;
}

.highlights-attendees-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Utility classes if not present */
.h-full { height: 100% !important; }
.flex-1 { flex: 1 1 0% !important; }
.min-h-0 { min-height: 0 !important; }

/* Seamless inline edit input for event details */
.event-edit-input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 1.5rem !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 2.5rem !important;
  line-height: 2.5rem !important;
  width: 100% !important;
  display: block;
  box-sizing: border-box;
  transition: background 0.15s;
}

/* Light grey background when editing (focused or not) */
.event-edit-input:focus,
.event-edit-input:not([readonly]):not(:disabled) {
  background: #f3f4f6 !important;
}

/* For time/date inputs, same background on focus/edit */
.event-edit-input[type="date"]:focus,
.event-edit-input[type="date"]:not([readonly]):not(:disabled),
.event-edit-input[type="time"]:focus,
.event-edit-input[type="time"]:not([readonly]):not(:disabled) {
  background: #f3f4f6 !important;
}

.event-edit-input[type="date"] {
  font-size: 1.2rem !important;
  min-height: 2.1rem !important;
  line-height: 2.1rem !important;
  width: 10.5rem !important;
}

.event-edit-input[type="time"]{
  font-size: 1.08rem !important;
  min-height: 2.4rem !important;
  line-height: 2.4rem !important;
  width: 10.5rem !important;
  font-weight: 500 !important;
}


.event-edit-input:focus {
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  outline: none !important;
}


/* Modal backdrop and modal card styles */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1040; /* default, can be overridden inline */
}

/* Modal card shell for confirmation dialogs */
.confirm-modal-card {
  background: #fff;
  border-radius: 1.25rem;
  box-shadow: 0 8px 32px rgba(80,0,120,0.13), 0 1.5px 6px rgba(80,0,120,0.07);
  padding: 2.5rem 2rem 2rem 2rem;
  border: 1.5px solid #e5e7eb;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
  margin-inline: 20px; /* <-- always a bit of margin left/right */
  /* Remove width: 100% to prevent stretching */
  position: relative;
  z-index: 10;
}

@media (max-width: 600px) {
  .confirm-modal-card {
    max-width: 98vw;
    padding: 1.2rem 0.8rem 1rem 0.8rem;
    border-radius: 1rem;
    margin-inline: 8px; /* tighter margin on mobile */
  }
}

/* Ensure modal content never stretches edge-to-edge */
.confirm-modal-card > * {
  max-width: 100%;
  box-sizing: border-box;
}


/* Summary section specific styles */
#summary-section {
  background-color: var(--form-field-bg, #f9fafb);
  border-color: var(--form-border, #e5e7eb);
}

#summary-section h3 {
  font-size: 1rem;
  color: var(--form-label, #374151);
}

#summary-section p {
  color: #4b5563;
  line-height: 1.5;
}

#summary-section textarea {
  background-color: #fff;
  resize: vertical;
  min-height: 100px;
}

#summary-section .btn {
  font-weight: 600;
  transition: all 0.2s ease;
}

/* Ensure buttons in summary section match form styles */
#summary-section .btn.btn-primary {
  background-color: var(--primary, #4a00e0);
  border: none;
}

#summary-section .btn.btn-primary:hover {
  background-color: #3d00b3;
}

#summary-section .btn.btn-text {
  background: transparent;
  color: #4b5563;
}

#summary-section .btn.btn-text:hover {
  background: #f3f4f6;
}

/* Attachments section styles */
#attachments-section .flex-shrink-0 {
  flex-shrink: 0;
}

#attachments-section .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

#attachments-section ul li {
  transition: all 0.2s ease;
}

#attachments-section ul li:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* File drag-and-drop area */
#attachments-section .border-dashed {
  transition: all 0.2s ease;
}

#attachments-section .border-dashed:hover {
  background-color: var(--primary-xlight, #F1E8FA);
  border-color: var(--primary-light, #C6B3F6);
}

/* Consistent section styling across the page - removed context-section from here */
#summary-section h3,
#attachments-section h3 {
  font-size: 1rem;
  color: var(--form-label, #374151);
  margin-bottom: 0.5rem;
}

/* Ensure section content is consistently styled - removed context-section from here */
#summary-section,
#attachments-section {
  background-color: var(--form-field-bg, #f9fafb);
  border-color: var(--form-border, #e5e7eb);
}

/* Chat input styles matching smart_schedule */
.chats-input {
  border: 1.5px solid var(--form-border, #e5e7eb);
  background-color: #fff;
  transition: all 0.2s ease;
}

.chats-input:focus {
  border-color: var(--primary-light, #C6B3F6);
  box-shadow: 0 0 0 3px rgba(74, 0, 224, 0.1);
}

.chats-send-btn {
  background-color: var(--primary, #4a00e0);
  transition: background-color 0.2s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chats-send-btn:hover {
  background-color: var(--primary-dark, #3d00b3);
}

/* Agenda number badge (smaller, outside left) */
.agenda-num-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: -1.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.45rem;
  height: 1.45rem;
  min-width: 1.45rem;
  border-radius: 9999px;
  background: #e0e7ff;
  color: #4338ca;
  font-weight: 600;
  font-size: 0.92rem;
  z-index: 1;
}

/* Remove drag handle styles (not needed) */

/* Remove icon button (tweak alignment) */
.agenda-remove-btn {
  margin-left: 0.75rem;
  color: #9ca3af;
  background: none;
  border: none;
  border-radius: 9999px;
  padding: 0.2rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  position: relative;
  top: 2px;
}
.agenda-remove-btn:hover {
  color: #ef4444;
  background: #fee2e2;
}

/* Smart AI button for agenda (matches smart tasks) */
.agenda-ai-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(255,255,255,0.18);
  border-radius: 9999px;
  padding: 0.7rem 1.1rem 0.7rem 1.1rem;
  min-height: 44px;
  box-shadow: 0 2px 10px 0 rgba(80,0,120,0.06);
  border: none;
  transition: background 0.18s, box-shadow 0.18s;
  cursor: pointer;
}
.agenda-ai-btn:hover {
  background: rgba(255,255,255,0.32);
  box-shadow: 0 4px 18px 0 rgba(80,0,120,0.10);
}
.agenda-ai-btn .smart-pill-icon {
  background: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px 0 rgba(80,0,120,0.07);
  font-size: 1.15rem;
}
.agenda-ai-btn .smart-pill-label {
  color: #6366f1;
  font-size: 1.08rem;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: 0.01em;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 32px;
}

/* Ensure chip-outline is always visible for agenda-ai-btn */
.chip-outline.agenda-ai-btn {
  border: 1.5px solid #e5e7eb !important;
  background: #fff !important;
  color: #4b4b4b !important;
  transition: background .15s, border .15s;
}
.chip-outline.agenda-ai-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Agenda draggable row feedback (match tasks) */
.agenda-draggable.dragging {
  opacity: 0.5;
  background: #ede9fe !important;
  box-shadow: 0 2px 8px rgba(80,0,120,0.10);
  z-index: 2;
}

/* Notetaker active card overlay and card - new aura system */
.notetaker-active-bg {
  position: absolute;
  top: 0; bottom: 0;
  left: -0.5rem;  /* match .card's horizontal padding (0.5rem) */
  right: -0.5rem;
  z-index: 10;
  display: flex;
  align-items: stretch;
  justify-content: center;
  /* Base gradient - matches new aura system */
  background: linear-gradient(
    135deg,
    hsl(270, 85%, 12%) 0%,
    hsl(265, 80%, 22%) 35%,
    hsl(280, 75%, 28%) 65%,
    hsl(260, 85%, 18%) 100%
  );
  /* Animation for fade/slide up (matches .active-card-animate) */
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s cubic-bezier(.4,0,.2,1), transform 0.5s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}

/* Aurora glow layer for notetaker */
.notetaker-active-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: 
    radial-gradient(
      ellipse 80% 60% at 20% 30%,
      hsla(265, 100%, 50%, 0.35) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 70% 80% at 75% 70%,
      hsla(330, 90%, 55%, 0.25) 0%,
      transparent 60%
    );
  animation: auraFlow 16s ease-in-out infinite;
}

body.electron-app .notetaker-active-bg::before {
  animation: none;
}

.notetaker-bg-in {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity 0.5s cubic-bezier(.4,0,.2,1), transform 0.5s cubic-bezier(.4,0,.2,1);
}
.notetaker-bg-out {
  opacity: 0 !important;
  transform: translateY(30px) !important;
  transition: opacity 0.5s cubic-bezier(.4,0,.2,1), transform 0.5s cubic-bezier(.4,0,.2,1);
}

.notetaker-active-card {
  background: #fff;
  border-radius: 1.25rem 1.25rem 0 0;
  box-shadow: none;
  margin: 0;
  width: 100%;
  max-width: 100%;
  height: 100% !important; 
  min-height: 0;
  position: relative;
  overflow: hidden; /* prevent scrollbars on card, only on transcript */
  padding: 0.5rem 0.5rem 0.5rem 0.5rem; /* minimal padding, adjust as needed */
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  height: 100%;
  min-height: 0;
}

/* AI icon spinning and pulsing for notetaker */
.ai-spin {
  animation: ai-spin 1.1s linear infinite;
}
@keyframes ai-spin {
  100% { transform: rotate(360deg);}
}
.ai-pulse {
  animation: ai-pulse 1.1s ease-in-out infinite;
}
@keyframes ai-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(254,108,95,0.25);}
  50%     { box-shadow: 0 0 0 8px rgba(254,108,95,0.12);}
}

/* Off-the-record button (pill style) */
.offrecord-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.6rem 1.2rem;
  border: 1.5px solid #e5e7eb;
  background: #f3f4f6;
  color: #b91c1c;
  transition: background 0.18s, color 0.18s, border 0.18s;
}
.offrecord-btn.active {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}
.offrecord-btn.inactive {
  background: #f3f4f6;
  color: #374151;
  border-color: #e5e7eb;
}

/* Upgraded transcript area */
.notetaker-transcript {
  background: #f6f2fd;
  border-radius: 1.25rem;
  
  border: 1.5px solid #e5e7eb;
 padding: 0.8rem 1.2rem;
  /* Remove min-height and max-height, let flexbox control height */
  /* min-height: 14rem; */
  /* max-height: 100%; */
  overflow-y: auto;
  font-size: 1.08rem;
  color: #232136;
  box-shadow: none;
  margin-bottom: 0;
  margin-top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 0%;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  /* Remove max-height and any min-height */
  /* max-height: 100%; */
  /* min-height: 14rem; */
}


/* Meeting URL row and copy button */
.meeting-url-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}
.meeting-url-row a,
.meeting-url-link {
  color: #4f46e5;
  font-weight: 500;
  font-size: 0.97rem;
  word-break: break-all;
  max-width: 180px;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.meeting-url-row .copy-btn {
  margin-left: 0.5rem;
  padding: 0.25rem 0.7rem;
  border-radius: 9999px;
  background: #f3f4f6;
  color: #6366f1;
  border: 1.5px solid #e5e7eb;
  font-size: 0.97rem;
  font-weight: 600;
  transition: background 0.18s, color 0.18s, border 0.18s;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.meeting-url-row .copy-btn:hover {
  background: #eef2ff;
  color: #3730a3;
  border-color: #c7d2fe;
}

/* Transcript line styles */
.transcript-line {
  padding: 0.18rem 0;
  border-radius: 0.5rem;
  background: transparent;
  font-size: 1.04rem;
  line-height: 1.5;
}
.transcript-line .transcript-meta {
  color: #a1a1aa;
  font-size: 0.93em;
  margin-right: 0.5em;
  font-family: monospace;
}
.transcript-line .transcript-speaker {
  font-weight: 600;
  margin-right: 0.4em;
  color: #6366f1;
}
.transcript-line .transcript-text {
  color: #232136;
  word-break: break-word;
}
.transcript-line.bot {
  background: #fef2f2;
}
.transcript-line.bot .transcript-speaker {
  color: #ef4444;
}
.transcript-line.bot .transcript-text {
  font-style: italic;
}

/* Insight block styles */
.insight-block {
  background: var(--primary-xlight, #F1E8FA);
  border-left: 4px solid var(--primary, #4a00e0);
  padding: 1rem 1.2rem 1rem 1.1rem;
  border-radius: 0.9rem;
  box-shadow: 0 2px 10px 0 rgba(80,0,120,0.07);
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  
}

.fade-in-diagonal{
  animation: fadeInDiagonal 0.6s cubic-bezier(.4,0,.2,1);
}
.insight-block .text-primary {
  color: var(--primary, #4a00e0) !important;
}
.insight-block .text-gray-700 {
  color: #374151 !important;
}
.insight-block .text-gray-400 {
  color: #9ca3af !important;
}

/* Keyframes for insight animations */
@keyframes fadeInDiagonal {
  0% {
    opacity: 0;
    transform: translateY(10px) translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0);
  }
}

/* Shimmer effect for loading state */
.insight-loading .shimmer-bar {
  background: linear-gradient(90deg, #ede9fe 25%, #f3e8ff 50%, #ede9fe 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear;
  opacity: 0.7;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.mic-wave-loader {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
  margin-top: 8px;
}
.mic-wave-loader .mic-bar {
  width: 5px;
  height: 12px;
  background: var(--primary, #4a00e0);
  border-radius: 3px;
  animation: micWave 1.1s infinite ease-in-out;
  opacity: 0.7;
}
.mic-wave-loader .mic-bar:nth-child(1) { animation-delay: 0s; }
.mic-wave-loader .mic-bar:nth-child(2) { animation-delay: 0.15s; }
.mic-wave-loader .mic-bar:nth-child(3) { animation-delay: 0.3s; }
.mic-wave-loader .mic-bar:nth-child(4) { animation-delay: 0.45s; }
.mic-wave-loader .mic-bar:nth-child(5) { animation-delay: 0.6s; }
@keyframes micWave {
  0%, 100% { height: 12px; }
  50% { height: 24px; }
}
/* Attendee chip styles - Safari compatible */
.attendee-chip {
  display: inline-flex;        /* inline-flex plays nicer with wrapping */
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  max-width: 100%;
  min-width: 0;                /* ✅ Safari requires this to allow wrapping */
  flex: 0 0 auto;              /* ✅ CHANGED: Don't allow shrinking for Safari */
  transition: all 0.2s ease;
  word-break: break-word;      /* ✅ NEW: Help with text wrapping */
}

.attendee-chip:hover {
  background-color: #e5e7eb;
}

.attendee-chip img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid #fff;
}

.attendee-chip .attendee-chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 0.25rem;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.attendee-chip .attendee-chip-remove:hover {
  background-color: #fee2e2;
  color: #dc2626;
}

.attendee-chip .attendee-chip-remove iconify-icon {
  width: 0.875rem;
  height: 0.875rem;
  color: #9ca3af;
  transition: color 0.2s ease;
}

.attendee-chip .attendee-chip-remove:hover iconify-icon {
  color: #dc2626;
}

/* Attendee name text */
.attendee-chip span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  min-width: 0;   
  flex: 0 1 auto;            
  line-height: 1.2;
}

/* Container wrapper - Safari specific fixes */
.attendee-chips-container {
  display: flex;               
  flex-wrap: wrap;             
  gap: 0.5rem;             
  margin-bottom: 0.25rem;
  min-width: 0;             
  width: 100%;
}

/* Single column attendee list (for collaboration and event details) */
.attendee-list-single-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 12rem; /* max-h-48 */
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.5rem;
  background-color: #f9fafb;
  width: 100%;
}

.attendee-chip-alt {
  display: inline-block; 
  vertical-align: top;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Animations */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

/* Companion dots */
.dot-companion-recording {
  height: 0.5rem;            /* h-2 */
  width: 0.5rem;             /* w-2 */
  border-radius: 9999px;     /* rounded-full */
  background-color: #22c55e; /* bg-green-500 */
}

.dot-companion-connecting {
  height: 0.5rem;             /* h-2 */
  width: 0.5rem;              /* w-2 */
  border-radius: 9999px;      /* rounded-full */
  background-color: #facc15;  /* bg-yellow-400 */
  animation: ping 1s cubic-bezier(0,0,0.2,1) infinite; /* animate-ping */
}

.dot-companion-error {
  height: 0.5rem;            /* h-2 */
  width: 0.5rem;             /* w-2 */
  border-radius: 9999px;     /* rounded-full */
  background-color: #ef4444; /* bg-red-500 */
  animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; /* animate-pulse */
}

.dot-companion {
  height: 0.5rem;            /* h-2 */
  width: 0.5rem;             /* w-2 */
  border-radius: 9999px;     /* rounded-full */
  background-color: #9ca3af; /* bg-gray-400 */
}

/* Animations */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Companion status badge */
.companion-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;               /* gap-2 */
  border-radius: 9999px;      /* rounded-full */
  font-weight: 600;           /* font-semibold */
  font-size: 1rem;            /* text-base */
  line-height: 1.5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* shadow */
  transition: all 0.2s;       /* transition */
  min-width: 0;
  padding: 8px 16px;
  border: 1px solid transparent; /* default border fallback */
}

/* Status variants */
.companion-disconnected {
  background-color: #e5e7eb;  /* bg-gray-200 */
  color: #9ca3af;             /* text-gray-400 */
  border-color: #e5e7eb;      /* border-gray-200 */
}

.companion-paused {
  background-color: #e5e7eb;  /* bg-gray-200 */
  color: #374151;             /* text-gray-700 */
  border-color: #d1d5db;      /* border-gray-300 */
}

.companion-recording {
  background-color: #dc2626;  /* bg-red-600 */
  color: #ffffff;             /* text-white */
  border-color: #dc2626;      /* border-red-600 */
  animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; /* animate-pulse */
}

/* Prevent text overflow in event fields */
.event-field-text {
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Multi-line ellipsis utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ensure meeting URLs don't overflow */
.meeting-url-link {
  word-break: break-all;
  overflow-wrap: break-word;
  max-width: 100%;
}
/* End: 8_events.css */

/* Begin: 8_text_agent.css */
/**
 * Text Agent Styles
 * Chat interface for Zunou text conversations
 * 
 * Design aligned with Voice Agent modal styling
 * Uses purple/dark gradient theme matching voice agent
 * 
 * @file 8_text_agent.css
 */

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL BACKDROP & CONTAINER
   ═══════════════════════════════════════════════════════════════════════════ */

/* Body scroll lock when modal is open */
body.text-agent-modal-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* Modal Backdrop - same as voice agent */
.text-agent-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 9998;
}

/* Bottom Sheet Modal - matching voice agent's purple/dark gradient */
.text-agent-modal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, #1a1a2e 0%, #0f0f1a 100%);
  border-radius: 24px 24px 0 0;
  z-index: 9999;
  max-height: var(--va-modal-max-height, 85vh);
  display: flex;
  flex-direction: column;
  /* Use combined safe area for bottom padding (native app + web safe area) */
  padding-bottom: var(--va-safe-bottom, env(safe-area-inset-bottom, 0));
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER - matching voice agent exactly
   ═══════════════════════════════════════════════════════════════════════════ */

.text-agent-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.text-agent-modal__title {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.text-agent-modal__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.text-agent-modal__switch-voice {
  background: rgba(139, 92, 246, 0.2);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(167, 139, 250);
  cursor: pointer;
  transition: all 0.2s;
}

.text-agent-modal__switch-voice:hover {
  background: rgba(139, 92, 246, 0.4);
  color: #fff;
  transform: scale(1.05);
}

.text-agent-modal__switch-voice:active {
  transform: scale(0.95);
}

.text-agent-modal__close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.text-agent-modal__close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MESSAGES CONTAINER
   ═══════════════════════════════════════════════════════════════════════════ */

.text-agent-modal__messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-behavior: smooth;
  min-height: 0;
}

/* Scrollbar styling */
.text-agent-modal__messages::-webkit-scrollbar {
  width: 6px;
}

.text-agent-modal__messages::-webkit-scrollbar-track {
  background: transparent;
}

.text-agent-modal__messages::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.text-agent-modal__messages::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Meta bar (above input, always visible) */
.text-agent-meta-bar {
  display: flex;
  align-items: center;
  padding: 4px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 24px;
}

.text-agent-meta-bar__content {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.text-agent-meta-bar__content iconify-icon {
  opacity: 0.7;
}

.text-agent-meta-bar__content--active {
  color: #c4b5fd;
}

.text-agent-meta-bar__content--active iconify-icon {
  color: #a855f7;
  opacity: 1;
}

.text-agent-meta-bar__content--idle {
  color: rgba(255, 255, 255, 0.3);
}

/* Connection error state */
.text-agent-meta-bar__content--error {
  color: #f87171;
}

.text-agent-meta-bar__content--error iconify-icon {
  color: #ef4444;
  opacity: 1;
}

/* Retrying state */
.text-agent-meta-bar__content--retrying {
  color: #fbbf24;
}

.text-agent-meta-bar__content--retrying iconify-icon {
  color: #f59e0b;
  opacity: 1;
  animation: text-agent-retry-spin 1s linear infinite;
}

@keyframes text-agent-retry-spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.text-agent-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 40px 20px;
  text-align: center;
}

.text-agent-empty__icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a855f7;
  margin-bottom: 20px;
  position: relative;
}

.text-agent-empty__icon::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), transparent);
  z-index: -1;
  opacity: 0.5;
}

.text-agent-empty__text {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.text-agent-empty__hint {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  max-width: 280px;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING STATE - Centered orb similar to voice agent mic area
   ═══════════════════════════════════════════════════════════════════════════ */

.text-agent-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 40px 20px;
  gap: 24px;
}

.text-agent-loading__orb {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Pulsing ring around orb */
.text-agent-loading__orb::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid rgba(168, 85, 247, 0.3);
  animation: textAgentOrbRing 1.5s ease-out infinite;
}

.text-agent-loading__orb::after {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 2px solid rgba(168, 85, 247, 0.15);
  animation: textAgentOrbRing 1.5s ease-out infinite 0.3s;
}

.text-agent-loading__orb iconify-icon {
  color: #a855f7;
  animation: textAgentOrbSpin 1.5s linear infinite;
}

@keyframes textAgentOrbRing {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

@keyframes textAgentOrbSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.text-agent-loading__text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  font-weight: 500;
}

/* Fallback dots (for inline use) */
.text-agent-loading__dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.text-agent-loading__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a855f7;
  animation: textAgentLoadingDot 1.4s infinite ease-in-out both;
}

.text-agent-loading__dots span:nth-child(1) { animation-delay: -0.32s; }
.text-agent-loading__dots span:nth-child(2) { animation-delay: -0.16s; }
.text-agent-loading__dots span:nth-child(3) { animation-delay: 0s; }

@keyframes textAgentLoadingDot {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MESSAGE BUBBLES
   ═══════════════════════════════════════════════════════════════════════════ */

.text-agent-message {
  display: flex;
  gap: 12px;
  max-width: 88%;
  animation: textAgentMessageSlideIn 0.3s ease;
}

@keyframes textAgentMessageSlideIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── User Messages ─── */
.text-agent-message--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.text-agent-message--user .text-agent-message__content {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
  color: #fff;
  border-radius: 20px 20px 6px 20px;
  padding: 12px 16px;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

/* ─── Assistant (Zunou) Messages ─── */
.text-agent-message--assistant {
  align-self: flex-start;
}

.text-agent-message__avatar {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25) 0%, rgba(139, 92, 246, 0.15) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a855f7;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.15);
}

.text-agent-message--assistant .text-agent-message__content {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
  border-radius: 20px 20px 20px 6px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ─── System Messages ─── */
.text-agent-message--system {
  align-self: center;
  max-width: 90%;
}

.text-agent-message--system .text-agent-message__content {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 13px;
  text-align: center;
}

/* Handoff notice (transferred from voice) */
.text-agent-message--handoff-notice .text-agent-message__content {
  background: rgba(20, 184, 166, 0.1);
  color: rgba(94, 234, 212, 0.8);
  border: 1px solid rgba(20, 184, 166, 0.15);
}

/* ─── Tool Indicator Message ─── */
.text-agent-message--tool {
  align-self: flex-start;
  max-width: 70%;
}

.text-agent-message__tool-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(168, 85, 247, 0.15);
  border-radius: 12px;
  font-size: 13px;
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

.text-agent-message__tool-indicator iconify-icon {
  font-size: 14px;
}

/* ─── Message Text Content ─── */
.text-agent-message__text {
  font-size: 15px;
  line-height: 1.55;
  word-break: break-word;
}

.text-agent-message__text p {
  margin: 0;
}

.text-agent-message__text p + p {
  margin-top: 10px;
}

.text-agent-message__text strong {
  font-weight: 600;
}

.text-agent-message__text em {
  font-style: italic;
}

.text-agent-message__text code {
  background: rgba(0, 0, 0, 0.15);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', 'Consolas', monospace;
  font-size: 13px;
}

.text-agent-message--user .text-agent-message__text code {
  background: rgba(255, 255, 255, 0.15);
}

/* ─── Lists in messages ─── */
.text-agent-message__text ul,
.text-agent-message__text ol {
  margin: 8px 0;
  padding-left: 20px;
}

.text-agent-message__text li {
  margin: 4px 0;
}

/* ─── Markdown-rendered assistant messages ─── */
/* Inherits va-* styles from 7_voice_agent.css; these overrides ensure */
/* proper spacing and dark-mode contrast inside the text agent bubbles. */
.text-agent-message__markdown h1,
.text-agent-message__markdown h2,
.text-agent-message__markdown h3 {
  color: #fff;
  margin: 12px 0 6px;
}
.text-agent-message__markdown h1 { font-size: 18px; }
.text-agent-message__markdown h2 { font-size: 16px; }
.text-agent-message__markdown h3 { font-size: 15px; }

.text-agent-message__markdown pre {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  margin: 8px 0;
}

.text-agent-message__markdown blockquote {
  border-left: 3px solid rgba(255, 255, 255, 0.25);
  padding-left: 12px;
  margin: 8px 0;
  color: rgba(255, 255, 255, 0.75);
}

.text-agent-message__markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 13px;
}

.text-agent-message__markdown table th,
.text-agent-message__markdown table td {
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-align: left;
}

.text-agent-message__markdown table th {
  background: rgba(255, 255, 255, 0.08);
  font-weight: 600;
  color: #fff;
}

.text-agent-message__markdown table tr:hover td {
  background: rgba(255, 255, 255, 0.04);
}

.text-agent-message__markdown hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 12px 0;
}

.text-agent-message__markdown a {
  color: #67e8f9;
  text-decoration: underline;
}

/* ─── Rich HTML Messages (from display_html_message tool) ─── */
/* Dark mode optimized for text agent modal */
.text-agent-message__html {
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.015em;
  word-break: break-word;
  color: rgba(255, 255, 255, 0.92);
}

.text-agent-message__html p {
  margin: 0;
}

.text-agent-message__html p + p {
  margin-top: 12px;
}

.text-agent-message__html strong {
  font-weight: 600;
  color: #fff;
}

/* Spacing utilities */
.text-agent-message__html .mt-1 { margin-top: 8px; }
.text-agent-message__html .mt-2 { margin-top: 12px; }
.text-agent-message__html .mt-3 { margin-top: 16px; }
.text-agent-message__html .mb-1 { margin-bottom: 8px; }
.text-agent-message__html .mb-2 { margin-bottom: 12px; }

/* Text size utilities */
.text-agent-message__html .text-sm { font-size: 13px; line-height: 1.6; }
.text-agent-message__html .text-xs { font-size: 11px; line-height: 1.5; }

/* Subtle context text - HIGH contrast for dark modal */
.text-agent-message__html .text-gray-600 { color: rgba(255, 255, 255, 0.7); }
.text-agent-message__html .text-gray-500 { color: rgba(255, 255, 255, 0.6); }
.text-agent-message__html .text-gray-400 { color: rgba(255, 255, 255, 0.5); }

/* Priority text colors - VIVID for dark backgrounds */
.text-agent-message__html .text-red-600,
.text-agent-message__html .text-red-500 { color: #ff6b6b; }
.text-agent-message__html .text-yellow-600,
.text-agent-message__html .text-yellow-500 { color: #ffd43b; }
.text-agent-message__html .text-green-600,
.text-agent-message__html .text-green-500 { color: #69db7c; }
.text-agent-message__html .text-blue-600,
.text-agent-message__html .text-blue-500 { color: #74c0fc; }
.text-agent-message__html .text-purple-600,
.text-agent-message__html .text-purple-500 { color: #da77f2; }
.text-agent-message__html .text-orange-600,
.text-agent-message__html .text-orange-500 { color: #ffa94d; }

/* Highlight pills/badges - solid colors for dark mode (no backdrop-filter to avoid blur) */
.text-agent-message__html .bg-blue-100 {
  background: rgba(59, 130, 246, 0.35);
  color: #a5d8ff;
  display: inline-block;
}
.text-agent-message__html .bg-yellow-100 {
  background: rgba(251, 191, 36, 0.35);
  color: #ffec99;
  display: inline-block;
}
.text-agent-message__html .bg-purple-100 {
  background: rgba(168, 85, 247, 0.35);
  color: #e5d4ff;
  display: inline-block;
}
.text-agent-message__html .bg-green-100 {
  background: rgba(34, 197, 94, 0.35);
  color: #b2f2bb;
  display: inline-block;
}
.text-agent-message__html .bg-red-100 {
  background: rgba(239, 68, 68, 0.35);
  color: #ffc9c9;
  display: inline-block;
}
.text-agent-message__html .bg-orange-100 {
  background: rgba(249, 115, 22, 0.35);
  color: #ffd8a8;
  display: inline-block;
}
.text-agent-message__html .bg-gray-100 {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
  display: inline-block;
}

/* Common padding/rounding for highlight spans */
.text-agent-message__html .px-2 { padding-left: 10px; padding-right: 10px; }
.text-agent-message__html .px-1 { padding-left: 6px; padding-right: 6px; }
.text-agent-message__html .py-1 { padding-top: 4px; padding-bottom: 4px; }
.text-agent-message__html .py-0\.5 { padding-top: 2px; padding-bottom: 2px; }
.text-agent-message__html .rounded { border-radius: 6px; }
.text-agent-message__html .rounded-full { border-radius: 100px; }

/* Badge elements - allow wrapping on mobile */
.text-agent-message__html span[class*="bg-"] {
  white-space: normal;
  word-break: break-word;
  margin: 3px 0;
  font-weight: 500;
  display: inline;
}

/* Dividers */
.text-agent-message__html hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 14px 0;
}

/* Lists inside HTML messages */
.text-agent-message__html ul,
.text-agent-message__html ol {
  margin: 10px 0;
  padding-left: 20px;
}
.text-agent-message__html li {
  margin: 6px 0;
}
.text-agent-message__html li::marker {
  color: rgba(255, 255, 255, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STREAMING INDICATOR
   ═══════════════════════════════════════════════════════════════════════════ */

.text-agent-message--streaming .text-agent-message__content {
  min-height: 48px;
  display: flex;
  align-items: center;
}

.text-agent-streaming-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
}

.text-agent-streaming-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a855f7;
  animation: textAgentStreamingDot 1.4s infinite ease-in-out both;
}

.text-agent-streaming-dots span:nth-child(1) { animation-delay: -0.32s; }
.text-agent-streaming-dots span:nth-child(2) { animation-delay: -0.16s; }
.text-agent-streaming-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes textAgentStreamingDot {
  0%, 80%, 100% {
    transform: scale(0.7);
    opacity: 0.3;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ─── Tool Indicator (inline with messages) ─── */
.text-agent-message--tool-indicator {
  animation: textAgentToolFadeIn 0.2s ease-out;
}

@keyframes textAgentToolFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.text-agent-message__avatar--tool {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.25) 0%, rgba(139, 92, 246, 0.2) 100%) !important;
  color: #c084fc !important;
}

.text-agent-tool-inline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.12) 0%, rgba(139, 92, 246, 0.08) 100%);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 500;
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.15);
  animation: textAgentToolPulse 2s ease-in-out infinite;
}

.text-agent-tool-inline__name {
  white-space: nowrap;
}

@keyframes textAgentToolPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Legacy tool status (kept for backward compatibility) */
.text-agent-tool-status {
  display: none; /* Hidden - using inline indicator instead */
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INPUT AREA
   ═══════════════════════════════════════════════════════════════════════════ */

.text-agent-modal__input {
  padding: 12px 16px 16px;
  padding-bottom: calc(16px + var(--native-app-bottom-margin, 0px));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.2);
}

.text-agent-input-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 4px 4px 4px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s;
  min-height: 50px;
}

.text-agent-input-wrapper:focus-within {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(168, 85, 247, 0.3);
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.text-agent-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  line-height: 1.5;
  color: #fff;
  resize: none;
  max-height: 120px;
  min-height: 22px;
  padding: 0;
  margin: 0;
  outline: none;
  font-family: inherit;
  vertical-align: middle;
  display: flex;
  align-items: center;
}

.text-agent-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.text-agent-send-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
  border: none;
  color: white;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.3);
}

.text-agent-send-btn:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
}

.text-agent-send-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.text-agent-send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

/* Stop Button (shown while streaming) */
.text-agent-stop-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.2);
  border: 2px solid rgba(239, 68, 68, 0.5);
  color: #f87171;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.text-agent-stop-btn:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.7);
  color: #fca5a5;
  transform: scale(1.05);
}

.text-agent-stop-btn:active {
  transform: scale(0.95);
}

/* ═══════════════════════════════════════════════════════════════════════════
   IMAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.text-agent-message__image-container {
  position: relative;
  width: 100%;
  max-width: 200px;
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}

.text-agent-message__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

.text-agent-message__image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transition: all 0.2s ease;
}

.text-agent-message__image-container:hover .text-agent-message__image-overlay {
  background: rgba(0, 0, 0, 0.4);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ERROR STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.text-agent-error {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(239, 68, 68, 0.15);
  border-radius: 12px;
  color: #fca5a5;
  font-size: 13px;
  margin: 8px 16px;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.text-agent-error iconify-icon {
  flex-shrink: 0;
  color: #ef4444;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
  .text-agent-modal__messages {
    padding: 16px 12px;
  }
  
  .text-agent-message {
    max-width: 92%;
  }
  
  .text-agent-modal__input {
    padding: 10px 12px 14px;
  }
}

/* End: 8_text_agent.css */

/* Begin: 9_insights.css */
/* ========================================
   LIVE INSIGHTS SECTION
   ======================================== */
.live-insights-section {
  position: relative;
  margin-bottom: 2rem;
}

.insights-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding: 0 0.5rem;
}

.insights-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.insights-count {
  background: #ef4444;
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  min-width: 1.25rem;
  text-align: center;
}

/* Simple scroll snap container */
.insights-container {
  position: relative;
}

.insights-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 0.5rem;
}

.insights-scroll::-webkit-scrollbar {
  display: none;
}

.insight-card-large {
  flex: 0 0 calc(100vw - 4rem);
  max-width: 400px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: white;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 180px;
}

.insight-type-large {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  width: fit-content;
}

.insight-type-action-large {
  background-color: #fef3c7;
  color: #92400e;
}

.insight-type-decision-large {
  background-color: #dbeafe;
  color: #1e40af;
}

.insight-topic-large {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.375;
  color: #111827;
  margin: 0;
}

.insight-description-large {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #6b7280;
  margin: 0;
  flex-grow: 1;
}

.insight-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: auto;
}

.insight-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.insight-btn-secondary {
  background-color: #f3f4f6;
  color: #374151;
}

.insight-btn-secondary:hover {
  background-color: #e5e7eb;
}

.insight-btn-primary {
  background-color: #4f46e5;
  color: white;
}

.insight-btn-primary:hover {
  background-color: #4338ca;
}

.insights-indicators {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
  position: relative;
  z-index: 10;
}

.insight-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #d1d5db;
  cursor: pointer;
  transition: background-color 0.2s;
  pointer-events: auto;
  position: relative;
  z-index: 11;
}

.insight-dot.active {
  background-color: #4f46e5;
}

.insight-dot:hover {
  background-color: #9ca3af;
}

.insight-dot.active:hover {
  background-color: #4338ca;
}

.insight-fade-in {
  opacity: 0;
  transform: translateY(1rem);
  animation: insightSlideIn 0.6s ease forwards;
}

@keyframes insightSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Styles */
.insight-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: modalFadeIn 0.2s ease forwards;
}

.insight-modal {
  background: white;
  border-radius: 1.5rem;
  max-width: 28rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 100000;
  animation: modalSlideIn 0.3s ease forwards;
}

.insight-modal-header {
  padding: 2rem 2rem 1rem;
  border-bottom: 1px solid #f3f4f6;
  position: sticky;
  top: 0;
  background: white;
  border-radius: 1.5rem 1.5rem 0 0;
  z-index: 10;
}

.insight-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #f3f4f6;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.insight-modal-close:hover {
  background: #e5e7eb;
}

.insight-modal-type {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.insight-modal-type.action {
  background: #fef3c7;
  color: #92400e;
}

.insight-modal-type.decision {
  background: #dbeafe;
  color: #1e40af;
}

.insight-modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.3;
  margin: 0;
}

.insight-modal-content {
  padding: 0 2rem 2rem;
}

.insight-modal-section {
  margin-bottom: 1.5rem;
}

.insight-modal-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.insight-modal-description {
  color: #6b7280;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.insight-modal-explanation {
  color: #4b5563;
  font-size: 0.875rem;
  line-height: 1.6;
  background: #f9fafb;
  padding: 1rem;
  border-radius: 0.75rem;
  border-left: 4px solid #e5e7eb;
}

.insight-modal-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: #9ca3af;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
}

.insight-modal-actions {
  padding: 1.5rem 2rem;
  border-top: 1px solid #f3f4f6;
  display: flex;
  gap: 0.75rem;
  position: sticky;
  bottom: 0;
  background: white;
  border-radius: 0 0 1.5rem 1.5rem;
}

.insight-modal-btn {
  flex: 1;
  padding: 0.875rem 1rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.875rem;
  text-align: center;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.insight-modal-btn-primary {
  background: #4f46e5;
  color: white;
}

.insight-modal-btn-primary:hover {
  background: #4338ca;
}

.insight-modal-btn-secondary {
  background: #f3f4f6;
  color: #374151;
}

.insight-modal-btn-secondary:hover {
  background: #e5e7eb;
}

/* ========================================
   PULSE-INSPIRED INSIGHT CARD (SHARED)
   ======================================== */
.insight-pulse-card {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.insight-pulse-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 1;
}

.insight-pulse-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.15);
}

.insight-pulse-card:hover::before {
  opacity: 1;
}

.insight-pulse-card:active {
  transform: translateY(-3px) scale(1.005);
}

/* ========================================
   VISUAL HEADER (SHARED)
   ======================================== */
.insight-visual {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.insight-visual-content {
  position: relative;
  z-index: 2;
  animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

/* Decorative elements */
.insight-visual-decoration {
  position: absolute;
  top: -30%;
  right: -15%;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
  border-radius: 50%;
  animation: decorationPulse 4s ease-in-out infinite;
}

.insight-visual-decoration-2 {
  position: absolute;
  bottom: -20%;
  left: -10%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  border-radius: 50%;
  animation: decorationPulse 4s ease-in-out infinite 2s;
}

@keyframes decorationPulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* Loading skeleton for visual */
.insight-visual-skeleton {
  height: 140px;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
}

@keyframes skeletonLoading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ========================================
   CONTENT AREA (SHARED)
   ======================================== */
.insight-content {
  padding: 1.5rem;
  position: relative;
  z-index: 2;
}

/* Type Badge */
.insight-type-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  margin-bottom: 0.875rem;
  transition: all 0.2s;
}

.badge-action {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #92400e;
  border: 1px solid #fde047;
  box-shadow: 0 2px 4px rgba(251, 191, 36, 0.2);
}

.badge-decision {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
  border: 1px solid #93c5fd;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}

.badge-risk {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  color: #991b1b;
  border: 1px solid #fca5a5;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2);
}

.insight-pulse-card:hover .insight-type-badge {
  transform: scale(1.05);
}

/* Title */
.insight-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.4;
  margin-bottom: 0.625rem;
  letter-spacing: -0.01em;
}

/* Description */
.insight-description {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* Meta Info */
.insight-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #9ca3af;
  flex-wrap: wrap;
}

.insight-read-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: #f3f4f6;
  color: #6b7280;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  margin-left: auto;
}

/* ========================================
   ACTION FOOTER (SHARED)
   ======================================== */
.insight-actions {
  padding: 1rem 1.5rem;
  background: linear-gradient(to bottom, #fafafa 0%, #ffffff 100%);
  border-top: 1px solid #f3f4f6;
  position: relative;
  z-index: 2;
}

.insight-cta {
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
  color: white;
  border: none;
  border-radius: 16px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
  position: relative;
  overflow: hidden;
}

.insight-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.insight-cta:hover {
  background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.35);
  transform: translateY(-1px);
}

.insight-cta:hover::before {
  left: 100%;
}

.insight-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

/* ========================================
   FEEDBACK BUTTONS (SHARED)
   ======================================== */
.insight-feedback-buttons {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f3f4f6;
  justify-content: center;
}

.insight-feedback-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s;
}

.insight-feedback-btn:hover {
  background: #f3f4f6;
  color: #6b7280;
  border-color: #d1d5db;
  transform: scale(1.05);
}

.insight-feedback-btn.feedback-active {
  background: #4f46e5;
  color: white;
  border-color: #4f46e5;
}

.insight-feedback-btn:active {
  transform: scale(0.95);
}

/* ========================================
   ANIMATIONS (SHARED)
   ======================================== */
@keyframes insightAppear {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.insight-card-appear {
  animation: insightAppear 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

.animate-bounce {
  animation: bounce 1s infinite;
}

/* Mobile optimizations */
@media (max-width: 640px) {
  .insight-card-large {
    flex: 0 0 calc(100vw - 5.5rem);
    max-width: none;
  }
  
  .insight-visual {
    height: 120px;
  }
  
  .insight-title {
    font-size: 1rem;
  }
  
  .insight-content {
    padding: 1.25rem;
  }
  
  .insight-actions {
    padding: 1rem 1.25rem;
  }
  
  .insight-cta {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
  }
}

/* Modal animations */
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalSlideIn {
  from { 
    opacity: 0;
    transform: translateY(1rem) scale(0.95);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ========================================
   UNIFIED INSIGHT CARD (v2)
   New design with left accent bar
   ======================================== */

.insight-card-v2 {
  display: flex;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.insight-card-v2:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.insight-card-v2:active {
  transform: translateY(-1px);
}

/* Left Accent Bar */
.insight-card-v2__accent {
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.insight-card-v2__accent-icon {
  color: #ffffff;
  font-size: 20px;
}

/* Accent bar gradients by type */
.insight-card-v2--action .insight-card-v2__accent {
  background: linear-gradient(180deg, #FCD34D 0%, #F59E0B 100%);
}

.insight-card-v2--decision .insight-card-v2__accent {
  background: linear-gradient(180deg, #93C5FD 0%, #3B82F6 100%);
}

.insight-card-v2--risk .insight-card-v2__accent {
  background: linear-gradient(180deg, #FCA5A5 0%, #EF4444 100%);
}

/* Card Content Area */
.insight-card-v2__content {
  flex: 1;
  padding: 16px 16px 12px 16px;
  min-width: 0; /* Prevent flex overflow */
}

/* Badges Row */
.insight-card-v2__badges {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

/* Type Badge (Outline Style) */
.insight-badge-v2--type {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: transparent;
  border-width: 1.5px;
  border-style: solid;
}

.insight-badge-v2--type-action {
  border-color: #F59E0B;
  color: #D97706;
}

.insight-badge-v2--type-decision {
  border-color: #3B82F6;
  color: #2563EB;
}

.insight-badge-v2--type-risk {
  border-color: #EF4444;
  color: #DC2626;
}

/* Status Badge (Filled Style) */
.insight-badge-v2--status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
}

.insight-badge-v2--status-new {
  background: #DBEAFE;
  color: #3B82F6;
}

.insight-badge-v2--status-seen {
  background: #D1FAE5;
  color: #059669;
}

.insight-badge-v2--status-done {
  background: #F3F4F6;
  color: #6B7280;
}

/* Title */
.insight-card-v2__title {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1F2937;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Description */
.insight-card-v2__description {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #6B7280;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer Row */
.insight-card-v2__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Meta Info (Source + Date) */
.insight-card-v2__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #9CA3AF;
  min-width: 0;
  flex: 1;
}

.insight-card-v2__meta-icon {
  flex-shrink: 0;
  font-size: 14px;
}

.insight-card-v2__meta-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action Buttons Container */
.insight-card-v2__actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Feedback & Done Buttons */
.insight-btn-v2 {
  width: 32px;
  height: 32px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  background: #FFFFFF;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.insight-btn-v2:hover {
  background: #F9FAFB;
  border-color: #D1D5DB;
}

.insight-btn-v2:active {
  transform: scale(0.95);
}

.insight-btn-v2 iconify-icon {
  font-size: 16px;
  color: #9CA3AF;
}

/* Feedback Button Active State */
.insight-btn-v2--feedback.active {
  background: #4F46E5;
  border-color: #4F46E5;
}

.insight-btn-v2--feedback.active iconify-icon {
  color: #FFFFFF;
}

/* Done Button Hover */
.insight-btn-v2--done:hover {
  background: #D1FAE5;
  border-color: #10B981;
}

.insight-btn-v2--done:hover iconify-icon {
  color: #059669;
}

/* ========================================
   UNIFIED CARD ANIMATIONS
   ======================================== */

@keyframes insightCardV2Appear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.insight-card-v2-appear {
  animation: insightCardV2Appear 0.4s ease forwards;
}

@keyframes insightCardV2Dismiss {
  from {
    opacity: 1;
    transform: translateX(0);
    max-height: 200px;
    margin-bottom: 12px;
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
    max-height: 0;
    margin-bottom: 0;
  }
}

.insight-card-v2-dismiss {
  animation: insightCardV2Dismiss 0.3s ease forwards;
  overflow: hidden;
}

/* ========================================
   UNIFIED CARD - SKELETON LOADING
   ======================================== */

.insight-card-v2-skeleton {
  display: flex;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  pointer-events: none;
}

.insight-card-v2-skeleton__accent {
  width: 48px;
  flex-shrink: 0;
  background: linear-gradient(90deg, #E5E7EB 25%, #D1D5DB 50%, #E5E7EB 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
}

.insight-card-v2-skeleton__content {
  flex: 1;
  padding: 16px 16px 12px 16px;
}

.insight-card-v2-skeleton__badges {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.insight-card-v2-skeleton__badge {
  height: 22px;
  width: 60px;
  background: #E5E7EB;
  border-radius: 20px;
}

.insight-card-v2-skeleton__badge--small {
  width: 40px;
}

.insight-card-v2-skeleton__title {
  height: 20px;
  width: 75%;
  background: #E5E7EB;
  border-radius: 4px;
  margin-bottom: 8px;
}

.insight-card-v2-skeleton__description > div {
  height: 16px;
  background: #F3F4F6;
  border-radius: 4px;
  margin-bottom: 4px;
}

.insight-card-v2-skeleton__description > div:first-child {
  width: 100%;
}

.insight-card-v2-skeleton__description > div:last-child {
  width: 60%;
}

.insight-card-v2-skeleton__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

.insight-card-v2-skeleton__meta {
  height: 14px;
  width: 100px;
  background: #F3F4F6;
  border-radius: 4px;
}

.insight-card-v2-skeleton__actions {
  display: flex;
  gap: 4px;
}

.insight-card-v2-skeleton__actions > div {
  width: 32px;
  height: 32px;
  background: #F3F4F6;
  border-radius: 6px;
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ========================================
   UNIFIED CARD - CAROUSEL (HOME PAGE)
   ======================================== */

.insight-carousel-v2 {
  position: relative;
  margin-right: -16px;
  overflow: hidden; /* Prevent any vertical overflow */
}

.insight-carousel-v2__scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden; /* Explicitly disable vertical scroll */
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 16px 8px 0;
  /* Allow vertical scroll passthrough to parent */
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y; /* Allow both directions but container only scrolls horizontally */
}

.insight-carousel-v2__scroll::-webkit-scrollbar {
  display: none;
}

.insight-carousel-v2__card {
  flex: 0 0 calc(100% - 40px);
  max-width: 340px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.insight-carousel-v2__indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.insight-carousel-v2__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #D1D5DB;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  border: none;
  padding: 0;
}

.insight-carousel-v2__dot:hover {
  background-color: #9CA3AF;
}

.insight-carousel-v2__dot.active {
  background-color: #4F46E5;
  transform: scale(1.2);
}

/* ========================================
   UNIFIED CARD - STACK (NEW/INSIGHTS PAGE)
   ======================================== */

.insight-stack-v2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ========================================
   DONE CONFIRMATION MODAL (v2)
   ======================================== */

.insight-done-modal-v2 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 10003;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.insight-done-modal-v2__dialog {
  background: white;
  border-radius: 16px;
  max-width: 320px;
  width: 100%;
  padding: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  text-align: center;
}

.insight-done-modal-v2__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: #D1FAE5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.insight-done-modal-v2__icon iconify-icon {
  font-size: 28px;
  color: #059669;
}

.insight-done-modal-v2__title {
  font-size: 18px;
  font-weight: 600;
  color: #1F2937;
  margin: 0 0 8px 0;
}

.insight-done-modal-v2__text {
  font-size: 14px;
  color: #6B7280;
  margin: 0 0 20px 0;
  line-height: 1.5;
}

.insight-done-modal-v2__actions {
  display: flex;
  gap: 12px;
}

.insight-done-modal-v2__btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}

.insight-done-modal-v2__btn--cancel {
  background: #F3F4F6;
  color: #374151;
}

.insight-done-modal-v2__btn--cancel:hover {
  background: #E5E7EB;
}

.insight-done-modal-v2__btn--confirm {
  background: #059669;
  color: white;
}

.insight-done-modal-v2__btn--confirm:hover {
  background: #047857;
}

/* ========================================
   MOBILE OPTIMIZATIONS (v2)
   ======================================== */

@media (max-width: 640px) {
  .insight-carousel-v2__card {
    flex: 0 0 calc(100vw - 72px);
    max-width: none;
  }
  
  .insight-card-v2__content {
    padding: 14px 14px 10px 14px;
  }
  
  .insight-card-v2__title {
    font-size: 15px;
  }
  
  .insight-card-v2__description {
    font-size: 13px;
    margin-bottom: 10px;
  }
  
  .insight-card-v2__meta {
    font-size: 12px;
  }
  
  .insight-btn-v2 {
    width: 36px;
    height: 36px;
  }
}

/* End: 9_insights.css */

/* Begin: 9_relays.css */
/* ═══════════════════════════════════════════════════════════════════════════════
   AGENT RELAYS STYLES
   Autonomous AI agents that gather info from coworkers
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────────
   PAGE LAYOUT
   ───────────────────────────────────────────────────────────────────────────────── */

/* Remove fixed layout - let page scroll naturally like insights */

/* ─────────────────────────────────────────────────────────────────────────────────
   TABS
   ───────────────────────────────────────────────────────────────────────────────── */

/* Hide horizontal scrollbar on filter buttons */
.relays-filter-buttons::-webkit-scrollbar {
  display: none;
}
.relays-filter-buttons {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.relays-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 0;
  margin-bottom: 16px;
  background: transparent;
}

.relays-tabs__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #71717a;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.relays-tabs__tab:hover {
  background: #f4f4f5;
  color: #3f3f46;
}

.relays-tabs__tab--active {
  background: var(--primary);
  color: white;
}

.relays-tabs__tab--active:hover {
  background: var(--primary);
  filter: brightness(0.9);
  color: white;
}

.relays-tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  background: #f43f5e;
  color: white;
}

.relays-tabs__tab--active .relays-tabs__badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.relays-tabs__badge--muted {
  background: #e4e4e7;
  color: #71717a;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   LOADING & EMPTY STATES
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
}

.relays-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.relays-empty__icon {
  font-size: 64px;
  color: #d4d4d8;
  margin-bottom: 16px;
}

.relays-empty__title {
  font-size: 18px;
  font-weight: 600;
  color: #3f3f46;
  margin-bottom: 8px;
}

.relays-empty__subtitle {
  font-size: 14px;
  color: #71717a;
  max-width: 280px;
  line-height: 1.5;
}

.relays-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: white;
  background: var(--primary);
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.relays-empty__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 0, 224, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   SKELETON LOADER
   ───────────────────────────────────────────────────────────────────────────────── */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.relay-skeleton {
  background: white;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e4e4e7;
}

.relay-skeleton__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.relay-skeleton__avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f4f4f5 0%, #e4e4e7 50%, #f4f4f5 100%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.relay-skeleton__meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.relay-skeleton__line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f4f4f5 0%, #e4e4e7 50%, #f4f4f5 100%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.relay-skeleton__line--short {
  width: 60%;
}

.relay-skeleton__line--medium {
  width: 80%;
}

.relay-skeleton__line--wide {
  width: 100%;
  margin-bottom: 8px;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   RELAY LIST
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 100px; /* Space for FAB button */
}

/* ─────────────────────────────────────────────────────────────────────────────────
   RELAY CARD
   ───────────────────────────────────────────────────────────────────────────────── */

.relay-card {
  background: white;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e4e4e7;
}

.relay-card--incoming {
  border-left: 4px solid var(--primary);
}

.relay-card--outgoing {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.relay-card--outgoing:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.relay-card__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.relay-card__avatar-stack {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.relay-card__avatar-stack.has-journey {
  /* Slight extra padding on right to accommodate hop badge */
  padding-right: 2px;
}

.relay-card__avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid white;
  box-sizing: border-box;
}

.relay-card__avatar--stacked {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  opacity: 0.85;
}

.relay-card__avatar--stacked:nth-child(3) {
  opacity: 0.65;
}

.relay-card__hop-badge {
  display: flex;
  align-items: center;
  gap: 1px;
  background: #f4f4f5;
  color: #71717a;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 4px;
  border-radius: 8px;
  margin-left: 4px;
  border: 1px solid #e4e4e7;
}

/* ─────────────────────────────────────────────────────────────────────────────
   THREAD PROGRESS (Phase 4.2 - Multi-recipient Relays)
   ───────────────────────────────────────────────────────────────────────────── */

.relay-card__thread-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  color: white;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(74, 0, 224, 0.2);
}

.relay-card__thread-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: linear-gradient(to right, #f9fafb, #ffffff);
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.relay-card__thread-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.relay-card__thread-pill {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.relay-card__thread-pill:hover {
  transform: scale(1.4);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Thread pill colors by status */
.relay-card__thread-pill.bg-yellow-400 { background: #fbbf24; }
.relay-card__thread-pill.bg-blue-500 { background: #3b82f6; }
.relay-card__thread-pill.bg-green-500 { background: #10b981; }
.relay-card__thread-pill.bg-red-500 { background: #ef4444; }
.relay-card__thread-pill.bg-purple-500 { background: #8b5cf6; }
.relay-card__thread-pill.bg-gray-400 { background: #9ca3af; }
.relay-card__thread-pill.bg-orange-500 { background: #f97316; }

.relay-card__progress-text {
  font-size: 13px;
  color: #4b5563;
  font-weight: 600;
  white-space: nowrap;
}

/* Progress bar for thread completion */
.relay-card__progress-bar {
  flex: 1;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.relay-card__progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #8b5cf6);
  border-radius: 3px;
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(74, 0, 224, 0.3);
}

/* ─────────────────────────────────────────────────────────────────────────────
   THREAD RECIPIENTS (View Modal)
   ───────────────────────────────────────────────────────────────────────────── */

/* Modal progress bar */
.relays-modal-progress-bar {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}

.relays-modal-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #8b5cf6);
  border-radius: 4px;
  transition: width 0.4s ease;
  box-shadow: 0 0 12px rgba(74, 0, 224, 0.4);
}

.relays-thread-recipients {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.relays-thread-recipient {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  background: #f9fafb;
  border-radius: 14px;
  border: 2px solid #e5e7eb;
  transition: all 0.2s ease;
}

.relays-thread-recipient:hover {
  border-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.relays-thread-recipient--complete {
  background: linear-gradient(to right, #f0fdf4, #ffffff);
  border-color: #86efac;
}

.relays-thread-recipient--declined {
  background: linear-gradient(to right, #fef2f2, #ffffff);
  border-color: #fca5a5;
}

.relays-thread-recipient--active {
  background: linear-gradient(to right, #eff6ff, #ffffff);
  border-color: #93c5fd;
}

.relays-thread-recipient--partial {
  background: linear-gradient(to right, #fff7ed, #ffffff);
  border-color: #fdba74;
}

.relays-thread-recipient--pending {
  background: linear-gradient(to right, #fef9c3, #ffffff);
  border-color: #fde047;
}

.relays-thread-recipient__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(74, 0, 224, 0.2);
}

.relays-thread-recipient__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.relays-thread-recipient__avatar-initials {
  color: white;
  font-weight: 700;
  font-size: 16px;
}

.relays-thread-recipient__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.relays-thread-recipient__name {
  font-weight: 600;
  color: #18181b;
  font-size: 15px;
}

.relays-thread-recipient__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.relays-thread-recipient__insights {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.relays-thread-recipient__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────────────────────────
   THREAD RECIPIENTS (View Modal)
   ───────────────────────────────────────────────────────────────────────────── */

.relays-thread-recipients {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.relays-thread-recipient {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.relays-thread-recipient--complete {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.relays-thread-recipient--declined {
  background: #fef2f2;
  border-color: #fecaca;
}

.relays-thread-recipient--active {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.relays-thread-recipient__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.relays-thread-recipient__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.relays-thread-recipient__avatar-initials {
  color: white;
  font-weight: 600;
  font-size: 14px;
}

.relays-thread-recipient__info {
  flex: 1;
  min-width: 0;
}

.relays-thread-recipient__name {
  font-weight: 600;
  color: #18181b;
  font-size: 14px;
}

.relays-thread-recipient__status {
  margin-top: 2px;
}

.relays-thread-recipient__icon {
  font-size: 20px;
  flex-shrink: 0;
}

.relay-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.relay-card__avatar-initials {
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.relay-card__meta {
  flex: 1;
  min-width: 0;
}

.relay-card__owner {
  font-size: 14px;
  color: #3f3f46;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.relay-card__time {
  font-size: 12px;
  color: #a1a1aa;
  margin-top: 2px;
}

.relay-card__status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

.relay-card__mission {
  margin-bottom: 12px;
}

.relay-card__objective {
  font-size: 15px;
  color: #18181b;
  line-height: 1.5;
}

.relay-card__context {
  font-size: 13px;
  color: #71717a;
  margin-top: 6px;
  line-height: 1.4;
}

.relay-card__journey {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: #faf5ff;
  border-radius: 8px;
  font-size: 12px;
  color: var(--primary);
  margin-bottom: 12px;
}

.relay-card__actions {
  display: flex;
  gap: 8px;
}

.relay-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.relay-card__btn--primary {
  background: var(--primary);
  color: white;
}

.relay-card__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 0, 224, 0.3);
}

.relay-card__btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Success button variant for completed relays */
.relay-card__btn--success {
  background: #10b981;
  color: white;
}

.relay-card__btn--success:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Completed relay card styling */
.relay-card--completed {
  border-color: #10b981;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.relay-card--completed .relay-card__status {
  background: #10b981 !important;
  color: white !important;
}

.relay-card__btn--ghost {
  background: transparent;
  color: #71717a;
  border: 1px solid #e4e4e7;
}

.relay-card__btn--ghost:hover {
  background: #f4f4f5;
  color: #3f3f46;
}

/* Cancel button - icon only, positioned right */
.relay-card__btn--cancel {
  padding: 8px;
  border-radius: 8px;
  color: #a1a1aa;
  margin-left: auto;
}

.relay-card__btn--cancel:hover {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fecaca;
}

/* Delete button - icon only, subtle styling */
.relay-card__btn--delete {
  padding: 8px;
  border-radius: 8px;
  color: #a1a1aa;
}

.relay-card__btn--delete:hover {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fecaca;
}

/* Danger button variant for delete confirmation modal */
.relays-btn--danger {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

.relays-btn--danger:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}

/* Warning icon color for delete modal */
.relays-confirm__icon--warning {
  background: rgba(234, 179, 8, 0.15);
  color: #ca8a04;
}

/* Journey status badge (shown when relay has been redirected) */
.relay-card__status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.relay-card__status-badge--journey {
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

/* Redirected notice (shown when user has already redirected this relay) */
.relay-card__redirected-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid rgba(22, 163, 74, 0.2);
}

.relay-card__redirected-notice iconify-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.relay-card__redirected-notice strong {
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   FAB
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-fab {
  position: fixed;
  bottom: 96px; /* 80px for bottom nav + 16px spacing */
  right: 20px;
  z-index: 50;
  margin-bottom: var(--native-app-bottom-margin);
  
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--primary);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(74, 0, 224, 0.4), 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateZ(0);
}

.relays-fab:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 16px rgba(74, 0, 224, 0.5), 0 4px 8px rgba(0, 0, 0, 0.15);
}

@media (max-width: 600px) {
  .relays-fab {
    bottom: 90px;
    right: 16px;
    width: 52px;
    height: 52px;
  }
}

.relays-fab:active {
  transform: scale(0.95);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   MODAL
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}

/* Higher z-index for nested modals (context update, confirmation, etc.) */
.relays-modal-overlay--top {
  z-index: 1100;
}

.relays-modal {
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  background: white;
  border-radius: 24px 24px 16px 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.relays-modal--large {
  max-height: 90vh;
}

.relays-modal--small {
  max-width: 420px;
  max-height: 75vh;
}

.relays-modal--confirm {
  max-width: 380px;
  max-height: 60vh;
}

.relays-modal--medium {
  max-width: 500px;
  max-height: 80vh;
}

.relays-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #e4e4e7;
}

.relays-modal__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 600;
  color: #18181b;
}

.relays-modal__close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #f4f4f5;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #71717a;
  transition: all 0.15s ease;
}

.relays-modal__close:hover {
  background: #e4e4e7;
  color: #3f3f46;
}

.relays-modal__body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

/* Confirmation modal message */
.relays-confirm-message {
  font-size: 15px;
  line-height: 1.6;
  color: #3f3f46;
  margin: 0;
}

.relays-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #e4e4e7;
  background: #fafafa;
}

.relays-modal__footer--between {
  justify-content: space-between;
}

/* Footer with agent input mode */
.relays-modal__footer--agent {
  padding: 12px 16px;
}

/* Agent Input Row (like home page daily brief) */
.relays-agent-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: white;
  border: 1px solid #e4e4e7;
  border-radius: 24px;
  padding: 4px 4px 4px 16px;
}

.relays-agent-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #18181b;
  background: transparent;
  min-width: 0;
}

.relays-agent-input::placeholder {
  color: #a1a1aa;
}

.relays-agent-send-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
  color: white;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.relays-agent-send-btn:hover {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
  transform: scale(1.05);
}

.relays-agent-voice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
  color: white;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.relays-agent-voice-btn:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
  transform: scale(1.05);
}

/* Manage Relay Row (for in-progress relays) */
.relays-modal__footer--manage {
  justify-content: space-between;
  padding: 12px 16px;
}

.relays-manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Respond row for recipients (same as manage row) */
.relays-respond-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.relays-btn--voice {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
  color: white;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.relays-btn--voice:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
  transform: scale(1.02);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   FORM ELEMENTS
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-form-group {
  margin-bottom: 20px;
}

.relays-form-group:last-child {
  margin-bottom: 0;
}

.relays-form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #3f3f46;
  margin-bottom: 8px;
}

.relays-form-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  font-size: 14px;
  color: #18181b;
  resize: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.relays-form-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74, 0, 224, 0.1);
}

.relays-form-textarea::placeholder {
  color: #a1a1aa;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   RECIPIENT PICKER
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-recipient-selected {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  border-radius: 12px;
}

.relays-recipient-selected__avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  overflow: hidden;
}

.relays-recipient-selected__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.relays-recipient-selected__info {
  flex: 1;
}

.relays-recipient-selected__clear {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #71717a;
  transition: all 0.15s ease;
}

.relays-recipient-selected__clear:hover {
  background: #f3e8ff;
  color: var(--primary);
}

/* Multi-recipient chips */
.relays-recipients-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.relays-recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 6px;
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  border-radius: 20px;
  font-size: 13px;
  color: #18181b;
}

.relays-recipient-chip__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.relays-recipient-chip__avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: white;
  font-size: 10px;
  font-weight: 600;
}

.relays-recipient-chip__name {
  font-weight: 500;
  max-width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.relays-recipient-chip__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #a1a1aa;
  transition: all 0.15s ease;
  margin-left: 2px;
}

.relays-recipient-chip__remove:hover {
  background: #f3e8ff;
  color: var(--primary);
}

/* Already selected in search results */
.relays-search-result--selected {
  background: #faf5ff;
  border-left: 3px solid var(--primary);
}

.relays-search {
  position: relative;
}

.relays-search__icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #a1a1aa;
}

.relays-search__input {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  font-size: 14px;
  color: #18181b;
}

.relays-search__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74, 0, 224, 0.1);
}

.relays-search__spinner {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
}

.relays-search-results {
  margin-top: 8px;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  overflow: hidden;
  max-height: 200px;
  overflow-y: auto;
}

.relays-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  background: white;
  border: none;
  border-bottom: 1px solid #f4f4f5;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

.relays-search-result:last-child {
  border-bottom: none;
}

.relays-search-result:hover {
  background: #faf5ff;
}

.relays-search-result__avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #e4e4e7;
  flex-shrink: 0;
}

.relays-search-result__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

.relays-search-result__info {
  flex: 1;
  min-width: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.relays-btn--primary {
  background: var(--primary);
  color: white;
}

.relays-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 0, 224, 0.3);
}

.relays-btn--primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.relays-btn--ghost {
  background: transparent;
  color: #71717a;
}

.relays-btn--ghost:hover {
  background: #f4f4f5;
  color: #3f3f46;
}

.relays-btn--secondary {
  background: #71717a;
  color: white;
}

.relays-btn--secondary:hover {
  background: #52525b;
}

.relays-btn--secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   REPORT VIEW
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-report-section {
  margin-bottom: 24px;
}

.relays-report-section:last-child {
  margin-bottom: 0;
}

.relays-report-section__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #71717a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  flex-wrap: nowrap;
}

.relays-report-section__title iconify-icon {
  flex-shrink: 0;
}

.relays-report-section__title span {
  white-space: nowrap;
}

.relays-report-content {
  background: #fafafa;
  border-radius: 12px;
  padding: 16px;
}

.relays-journey-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.relays-journey-hop {
  display: flex;
  align-items: center;
  gap: 12px;
}

.relays-journey-hop__number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.relays-journey-hop__content {
  flex: 1;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   REPORT STATS HEADER
   ───────────────────────────────────────────────────────────────────────────────── */

/* Quick Summary Bar - compact status line at top of report */
.relays-quick-summary {
  background: #f0fdf4;
  border: 1px solid #d1fae5;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.relays-quick-summary--pending {
  background: #fefce8;
  border-color: #fef08a;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   COLLAPSIBLE DETAILS SECTIONS
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-details-section {
  margin-bottom: 16px;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  overflow: hidden;
}

.relays-details-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #fafafa;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #52525b;
  user-select: none;
  list-style: none;
}

.relays-details-summary::-webkit-details-marker {
  display: none;
}

.relays-details-summary:hover {
  background: #f4f4f5;
}

.relays-details-chevron {
  margin-left: auto;
  transition: transform 0.2s ease;
  color: #a1a1aa;
}

.relays-details-section[open] .relays-details-chevron {
  transform: rotate(180deg);
}

.relays-details-content {
  padding: 14px;
  background: white;
  border-top: 1px solid #e4e4e7;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   CONTEXT UPDATES SECTION
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-context-updates-section {
  margin-bottom: 16px;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  overflow: hidden;
  background: white;
}

.relays-context-updates-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #fafafa;
  border-bottom: 1px solid #e4e4e7;
}

.relays-context-updates-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #52525b;
  margin: 0;
}

.relays-context-updates-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  background: var(--primary);
  color: white;
}

.relays-add-context-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(74, 0, 224, 0.08);
  border: 1px solid rgba(74, 0, 224, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.relays-add-context-btn:hover {
  background: rgba(74, 0, 224, 0.15);
  border-color: rgba(74, 0, 224, 0.3);
}

.relays-context-updates-list {
  padding: 12px 14px;
}

.relays-context-updates-list--recipient {
  padding: 0;
}

.relays-context-update-item {
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 10px;
}

.relays-context-update-item:last-child {
  margin-bottom: 0;
}

.relays-context-update-item--recipient {
  background: #fffbeb;
  border-color: #fde68a;
}

.relays-context-update-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #71717a;
  margin-bottom: 6px;
}

/* Push delete button to the right */
.relays-context-update-item--editable .relays-context-update-meta {
  justify-content: flex-start;
}

.relays-context-update-item--editable .relays-context-update-delete {
  margin-left: auto;
}

.relays-context-update-notified {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  color: #f59e0b;
}

.relays-context-update-text {
  font-size: 13px;
  line-height: 1.5;
  color: #3f3f46;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Delete button for context updates (owner view) */
.relays-context-update-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: #a1a1aa;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.relays-context-update-item:hover .relays-context-update-delete {
  opacity: 1;
}

.relays-context-update-delete:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.relays-context-update-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   NUDGES/REMINDERS LIST (Recipient View)
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-nudges-list {
  padding: 0;
}

.relays-nudge-item {
  padding: 10px 12px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  margin-bottom: 10px;
}

.relays-nudge-item:last-child {
  margin-bottom: 0;
}

.relays-nudge-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #92400e;
  margin-bottom: 6px;
}

.relays-nudge-text {
  font-size: 13px;
  line-height: 1.5;
  color: #78350f;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Info text in forms */
.relays-form-info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: #0f766e;
  margin-bottom: 16px;
}

.relays-form-info iconify-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.relays-context-updates-empty {
  padding: 16px 14px;
  font-size: 13px;
  color: #71717a;
  text-align: center;
  font-style: italic;
  margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   RESPONSE/REPORT SUMMARY (Priority content)
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-report-section--primary {
  background: linear-gradient(135deg, #fafafa 0%, #f9fafb 100%);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 20px;
}

.relays-response-summary {
  font-size: 15px;
  line-height: 1.65;
  color: #1f2937;
}

.relays-response-summary p {
  margin: 0;
}

/* Regenerate Report Button */
.relays-regenerate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #0d9488;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.relays-regenerate-btn:hover:not(:disabled) {
  background: #ccfbf1;
  border-color: #5eead4;
}

.relays-regenerate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Aggregated Insights - THE ANSWER at a glance */
.relays-aggregated-insights {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.relays-insight-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #fffbeb;
  border-radius: 8px;
  border-left: 3px solid #f59e0b;
}

.relays-insight-row span:first-of-type {
  flex: 1;
  line-height: 1.4;
}

/* Thread Response Card - shows individual thread answers */
.relays-thread-response-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px;
}

.relays-thread-response-card + .relays-thread-response-card {
  margin-top: 12px;
}

.relays-report-stats {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 50%, #f0fdfa 100%);
  border: 1px solid #d1fae5;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 24px;
}

.relays-report-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 640px) {
  .relays-report-stats__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.relays-report-stat {
  text-align: center;
}

.relays-report-stat__value {
  font-size: 24px;
  font-weight: 700;
  color: #065f46;
  line-height: 1.2;
}

.relays-report-stat__label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.relays-report-stat__detail {
  font-size: 10px;
  color: #9ca3af;
  margin-top: 2px;
}

.relays-report-stat__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   INDIVIDUAL RESPONSES (improved)
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-individual-response {
  background: #fafafa;
  border-radius: 12px;
  padding: 14px;
  border: 1px solid #f4f4f5;
}

.relays-individual-response__header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.relays-individual-response__avatar img,
.relays-individual-response__avatar span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.relays-individual-response__name {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.relays-insight-pill {
  display: inline-block;
  padding: 4px 10px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 11px;
  font-weight: 500;
  border-radius: 12px;
  line-height: 1.3;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   OPEN QUESTIONS
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-open-question {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-radius: 8px;
  font-size: 13px;
  color: #92400e;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   REPORT METADATA FOOTER
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-report-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 16px;
  margin-top: 24px;
  border-top: 1px solid #e4e4e7;
}

.relays-report-metadata__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #a1a1aa;
}

.relays-report-metadata__item iconify-icon {
  color: #d4d4d8;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   CONFIRMATION DIALOG OVERLAY
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  padding: 16px;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   CONFIRMATION DIALOG
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-confirm-dialog {
  background: white;
  border-radius: 20px;
  padding: 24px;
  width: 100%;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.relays-confirm__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #fef2f2;
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
}

.relays-confirm__icon--neutral {
  background: #f4f4f5;
  color: #71717a;
}

.relays-confirm__title {
  font-size: 18px;
  font-weight: 600;
  color: #18181b;
  margin-bottom: 8px;
}

.relays-confirm__message {
  font-size: 14px;
  color: #71717a;
  margin-bottom: 24px;
  line-height: 1.5;
}

.relays-confirm__actions {
  display: flex;
  gap: 12px;
}

.relays-confirm__actions .relays-btn {
  flex: 1;
}

.relays-btn--danger {
  background: #ef4444;
  color: white;
}

.relays-btn--danger:hover {
  background: #dc2626;
}

.relays-btn--danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.relays-suggested-action {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #faf5ff;
  border-radius: 10px;
  font-size: 14px;
  color: #18181b;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   MODE SELECTION DIALOG (Voice vs Text)
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-mode-dialog {
  max-width: 340px;
}

.relays-confirm__icon--primary {
  background: #f0fdf4;
  color: #10b981;
}

.relays-mode-buttons {
  display: flex;
  gap: 12px;
  width: 100%;
}

.relays-mode-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px;
  border-radius: 16px;
  background: #f4f4f5;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.relays-mode-btn:hover {
  background: #e4e4e7;
  border-color: var(--primary);
}

.relays-mode-btn:active {
  transform: scale(0.98);
}

.relays-mode-btn__icon {
  font-size: 32px;
}

.relays-mode-btn__label {
  font-size: 16px;
  font-weight: 600;
  color: #18181b;
}

.relays-mode-btn__hint {
  font-size: 12px;
  color: #71717a;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   JOURNEY TIMELINE (Multi-hop Relays)
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-journey-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.relays-journey-hop {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  position: relative;
}

.relays-journey-hop__badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
}

.relays-journey-hop--current .relays-journey-hop__badge {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.3);
}

.relays-journey-hop__connector {
  position: absolute;
  left: 15px;
  top: 32px;
  width: 2px;
  height: calc(100% + 16px);
  background: linear-gradient(to bottom, #e4e4e7 0%, #e4e4e7 100%);
  z-index: 1;
}

.relays-journey-hop__content {
  padding-bottom: 24px;
}

.relays-journey-hop__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.relays-journey-hop__reason {
  font-size: 14px;
  color: #52525b;
  margin-bottom: 8px;
  font-style: italic;
}

.relays-journey-hop__summary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 8px;
  font-size: 13px;
  color: #3f3f46;
  margin-bottom: 8px;
}

.relays-journey-hop__stats {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.relays-journey-hop__stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #71717a;
}

.relays-journey-hop__stat iconify-icon {
  font-size: 16px;
}

.relays-journey-hop__current-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #d1fae5;
  color: #065f46;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
}

.relays-journey-hop__current-badge iconify-icon {
  font-size: 16px;
}

/* Journey indicator in card list */
.relay-card__journey {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #0369a1;
  margin-top: 12px;
}

.relay-card__journey iconify-icon {
  font-size: 18px;
  color: var(--primary);
}

/* Dark mode */
.dark .relays-journey-hop__connector {
  background: linear-gradient(to bottom, #3f3f46 0%, #3f3f46 100%);
}

.dark .relays-journey-hop__reason {
  color: #a1a1aa;
}

.dark .relays-journey-hop__summary {
  background: #27272a;
  color: #e4e4e7;
}

.dark .relays-journey-hop__current-badge {
  background: #064e3b;
  color: #6ee7b7;
}

.dark .relay-card__journey {
  background: linear-gradient(135deg, #082f49 0%, #0c4a6e 100%);
  color: #7dd3fc;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SYNTHESIS REPORT STYLES (Phase 4.2)
   ───────────────────────────────────────────────────────────────────────────── */

.relays-synthesis-section {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f3f4f6;
}

.relays-synthesis-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.relays-synthesis-heading {
  font-size: 15px;
  font-weight: 600;
  color: #18181b;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.relays-synthesis-text {
  font-size: 14px;
  color: #3f3f46;
  line-height: 1.6;
}

.relays-synthesis-list {
  list-style: disc;
  list-style-position: inside;
  space-y: 8px;
}

.relays-synthesis-list li {
  font-size: 14px;
  color: #3f3f46;
  line-height: 1.6;
  margin-bottom: 6px;
}

.relays-consensus-item {
  padding: 12px;
  background: linear-gradient(to right, #f0fdf4, #ffffff);
  border-left: 3px solid #10b981;
  border-radius: 8px;
}

.relays-divergent-item {
  padding: 12px;
  background: linear-gradient(to right, #faf5ff, #ffffff);
  border-left: 3px solid #8b5cf6;
  border-radius: 8px;
}

.relays-thread-summary {
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.relays-thread-summary:hover {
  border-color: #d1d5db;
  background: #ffffff;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   REPORT CARD LIST (Improved Design)
   ───────────────────────────────────────────────────────────────────────────────── */

.report-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: white;
  border-radius: 14px;
  border: 1px solid #e4e4e7;
  cursor: pointer;
  transition: all 0.15s ease;
}

.report-card:hover {
  border-color: #d4d4d8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Avatar section */
.report-card__avatars {
  flex-shrink: 0;
}

.report-card__avatar-stack {
  display: flex;
  align-items: center;
}

.report-card__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.report-card__avatar--single {
  width: 42px;
  height: 42px;
}

.report-card__avatar--more {
  background: #f4f4f5;
  color: #71717a;
  font-size: 11px;
  font-weight: 600;
}

.report-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.report-card__avatar-initials {
  color: white;
  font-weight: 600;
  font-size: 12px;
}

.report-card__avatar--single .report-card__avatar-initials {
  font-size: 14px;
}

/* Content section */
.report-card__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.report-card__mission {
  font-size: 14px;
  font-weight: 500;
  color: #18181b;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.report-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: #71717a;
}

.report-card__recipients {
  display: flex;
  align-items: center;
  gap: 4px;
}

.report-card__recipients iconify-icon {
  color: #a1a1aa;
}

.report-card__time {
  display: flex;
  align-items: center;
  gap: 4px;
}

.report-card__time iconify-icon {
  color: #a1a1aa;
}

/* Stats pills */
.report-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.report-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.report-card__stat--insights {
  background: #fef9c3;
  color: #a16207;
}

.report-card__stat--findings {
  background: #f3e8ff;
  color: #7c3aed;
}

.report-card__stat--time {
  background: #e0f2fe;
  color: #0369a1;
}

/* Actions section */
.report-card__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.report-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.report-card__btn--view {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;
}

.report-card__btn--view:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.report-card__btn--delete {
  padding: 8px;
  background: transparent;
  color: #a1a1aa;
  border: 1px solid #e4e4e7;
}

.report-card__btn--delete:hover {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fecaca;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .report-card {
    flex-wrap: wrap;
    padding: 12px;
    gap: 10px;
  }

  .report-card__avatars {
    order: 1;
  }

  .report-card__content {
    order: 2;
    flex: 1 1 calc(100% - 60px);
  }

  .report-card__actions {
    order: 3;
    width: 100%;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid #f4f4f5;
    margin-top: 4px;
  }
}

/* Single-recipient stats grid variant */
.relays-report-stats__grid--single {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {
  .relays-report-stats__grid--single {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   INBOX CARD (Incoming Relays)
   ───────────────────────────────────────────────────────────────────────────────── */

.inbox-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e4e4e7;
  transition: all 0.15s ease;
  cursor: pointer;
}

.inbox-card:hover {
  border-color: #d4d4d8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Card top row: avatar + content */
.inbox-card__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* State borders */
.inbox-card--pending {
  border-left: 3px solid var(--primary);
}

.inbox-card--active {
  border-left: 3px solid #3b82f6;
}

.inbox-card--complete {
  border-left: 3px solid #10b981;
}

.inbox-card--redirected {
  border-left: 3px solid #9ca3af;
  opacity: 0.75;
}

/* Avatar */
.inbox-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.inbox-card__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inbox-card__avatar-initials {
  color: white;
  font-weight: 600;
  font-size: 15px;
}

/* Content */
.inbox-card__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Header: sender + time */
.inbox-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.inbox-card__sender {
  font-size: 14px;
  font-weight: 600;
  color: #18181b;
}

.inbox-card__time {
  font-size: 12px;
  color: #a1a1aa;
  margin-left: auto;
}

/* Mission */
.inbox-card__mission {
  font-size: 14px;
  color: #3f3f46;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* Status row */
.inbox-card__status-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.inbox-card__status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.inbox-card__status--pending {
  background: #fef9c3;
  color: #a16207;
}

.inbox-card__status--active {
  background: #dbeafe;
  color: #1d4ed8;
}

.inbox-card__status--partial {
  background: #ffedd5;
  color: #c2410c;
}

.inbox-card__status--complete {
  background: #d1fae5;
  color: #047857;
}

.inbox-card__status--declined {
  background: #fee2e2;
  color: #b91c1c;
}

.inbox-card__status--redirected {
  background: #f3f4f6;
  color: #6b7280;
}

/* Compact badges row (nudges, updates, journey counts) */
.inbox-card__badges {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.inbox-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  min-height: 24px;
}

.inbox-card__badge--nudge {
  background: #fef3c7;
  color: #b45309;
}

.inbox-card__badge--update {
  background: #dbeafe;
  color: #1e40af;
}

.inbox-card__badge--journey {
  background: #f3e8ff;
  color: #7c3aed;
}

/* Preview row (nudge or update, shows one at a time) */
.inbox-card__preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  margin-top: -4px;
}

.inbox-card__preview--nudge {
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border-left: 2px solid #f59e0b;
  color: #78350f;
}

.inbox-card__preview--update {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-left: 2px solid #3b82f6;
  color: #1e3a8a;
}

.inbox-card__preview iconify-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.inbox-card__preview-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbox-card__preview-time {
  flex-shrink: 0;
  font-size: 11px;
  opacity: 0.7;
  margin-left: auto;
}

/* Redirected target pill (inline in status row) */
.inbox-card__redirected-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #d1fae5;
  color: #047857;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
}

/* Nudged card highlight state */
.inbox-card--nudged {
  border-left: 4px solid #f59e0b !important;
  animation: nudge-pulse 2s ease-in-out;
}

@keyframes nudge-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
  50% { box-shadow: 0 2px 12px rgba(245, 158, 11, 0.25); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   RELAY DETAIL MODAL (RECIPIENT VIEW)
   ═══════════════════════════════════════════════════════════════════════════════ */

.relays-context-modal__mission {
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 10px;
  margin-bottom: 16px;
}

.relays-context-modal__updates {
  /* Container for all updates */
}

/* Actions section */
.inbox-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #f4f4f5;
  margin-top: -4px;
}

.inbox-card__btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.inbox-card__btn--decline {
  margin-left: auto;
}

.inbox-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.inbox-card__btn--primary {
  background: var(--primary);
  color: white;
}

.inbox-card__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(74, 0, 224, 0.3);
}

.inbox-card__btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.inbox-card__btn--continue {
  background: #3b82f6;
  color: white;
}

.inbox-card__btn--continue:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.inbox-card__btn--view {
  background: #10b981;
  color: white;
}

.inbox-card__btn--view:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.inbox-card__btn--ghost {
  background: transparent;
  color: #71717a;
  border: 1px solid #e4e4e7;
  padding: 10px;
}

.inbox-card__btn--ghost:hover {
  background: #f4f4f5;
  color: #3f3f46;
}

.inbox-card__btn--decline:hover {
  background: #fef2f2;
  color: #ef4444;
  border-color: #fecaca;
}

/* Done badge for redirected relays */
.inbox-card__done-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #d1fae5;
  color: #047857;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .inbox-card {
    padding: 12px 14px;
    gap: 10px;
  }

  .inbox-card__top {
    gap: 10px;
  }

  .inbox-card__avatar {
    width: 40px;
    height: 40px;
  }
  
  .inbox-card__avatar-initials {
    font-size: 14px;
  }

  .inbox-card__sender {
    font-size: 13px;
  }

  .inbox-card__mission {
    font-size: 13px;
  }

  .inbox-card__status {
    font-size: 10px;
    padding: 3px 8px;
  }

  .inbox-card__badge {
    font-size: 10px;
    padding: 3px 6px;
    min-height: 22px;
  }

  .inbox-card__preview {
    padding: 8px 10px;
    font-size: 12px;
  }

  .inbox-card__btn {
    padding: 10px 14px;
    font-size: 13px;
  }

  .inbox-card__btn-group {
    flex: 1;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────────
   HOME RELAYS WIDGET
   ───────────────────────────────────────────────────────────────────────────────── */

.home-relays-widget {
  background: white;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  margin-top: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.home-relays-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.home-relays-widget__title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
}

.home-relays-widget__title h3 {
  font-size: 16px;
  font-weight: 600;
  color: #18181b;
  margin: 0;
}

.home-relays-widget__link {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.home-relays-widget__link:hover {
  color: #6d28d9;
}

/* Loading skeleton */
.home-relays-widget__loading {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.home-relays-widget__skeleton {
  height: 56px;
  background: linear-gradient(90deg, #f4f4f5 0%, #e4e4e7 50%, #f4f4f5 100%);
  background-size: 200% 100%;
  border-radius: 12px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

/* Stats row */
.home-relays-widget__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.home-relays-stat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.home-relays-stat:hover {
  transform: translateY(-1px);
}

.home-relays-stat__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.home-relays-stat__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.home-relays-stat__label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
}

.home-relays-stat__value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

/* Stat variants */
.home-relays-stat--inbox {
  background: linear-gradient(135deg, #fef9c3, #fef3c7);
  border: 1px solid #fde047;
}

.home-relays-stat--inbox .home-relays-stat__icon {
  background: linear-gradient(135deg, #eab308, #ca8a04);
}

.home-relays-stat--inbox .home-relays-stat__label {
  color: #a16207;
}

.home-relays-stat--inbox .home-relays-stat__value {
  color: #854d0e;
}

.home-relays-stat--sent {
  background: linear-gradient(135deg, #dbeafe, #e0e7ff);
  border: 1px solid #93c5fd;
}

.home-relays-stat--sent .home-relays-stat__icon {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.home-relays-stat--sent .home-relays-stat__label {
  color: #1d4ed8;
}

.home-relays-stat--sent .home-relays-stat__value {
  color: #1e40af;
}

.home-relays-stat--reports {
  background: linear-gradient(135deg, #d1fae5, #dcfce7);
  border: 1px solid #86efac;
}

.home-relays-stat--reports .home-relays-stat__icon {
  background: linear-gradient(135deg, #10b981, #059669);
}

.home-relays-stat--reports .home-relays-stat__label {
  color: #047857;
}

.home-relays-stat--reports .home-relays-stat__value {
  color: #065f46;
}

/* Sections */
.home-relays-section {
  margin-top: 16px;
}

.home-relays-section--completed {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #f4f4f5;
}

.home-relays-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.home-relays-section__title {
  font-size: 11px;
  font-weight: 600;
  color: #71717a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.home-relays-section__link {
  font-size: 12px;
  font-weight: 500;
  color: var(--primary);
  text-decoration: none;
}

.home-relays-section__link:hover {
  text-decoration: underline;
}

.home-relays-section__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Relay items */
.home-relay-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.home-relay-item:hover {
  background: white;
  border-color: #d4d4d8;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.home-relay-item--incoming {
  border-left: 3px solid var(--primary);
}

.home-relay-item--completed {
  opacity: 0.85;
}

.home-relay-item--completed:hover {
  opacity: 1;
}

/* Avatar */
.home-relay-item__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.home-relay-item__avatar--completed {
  background: linear-gradient(135deg, #10b981, #059669);
}

.home-relay-item__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-relay-item__avatar-initials {
  color: white;
  font-size: 12px;
  font-weight: 600;
}

.home-relay-item__avatar--completed iconify-icon {
  color: white;
}

/* Content */
.home-relay-item__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.home-relay-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.home-relay-item__sender {
  font-size: 13px;
  font-weight: 600;
  color: #18181b;
}

.home-relay-item__time {
  font-size: 11px;
  color: #a1a1aa;
  flex-shrink: 0;
}

.home-relay-item__mission {
  font-size: 13px;
  color: #52525b;
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-relay-item__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.home-relay-item__status {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
}

.home-relay-item__status--pending {
  background: #fef9c3;
  color: #a16207;
}

.home-relay-item__status--active {
  background: #dbeafe;
  color: #1d4ed8;
}

.home-relay-item__status--partial {
  background: #ffedd5;
  color: #c2410c;
}

.home-relay-item__threads {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  background: #f3e8ff;
  color: #7c3aed;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
}

.home-relay-item__threads--completed {
  background: #d1fae5;
  color: #047857;
}

.home-relay-item__context {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  background: #fef3c7;
  color: #b45309;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
}

.home-relay-item__arrow {
  color: #d4d4d8;
  flex-shrink: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}

.home-relay-item:hover .home-relay-item__arrow {
  color: #a1a1aa;
  transform: translateX(2px);
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .home-relays-widget {
    padding: 16px;
    border-radius: 14px;
  }

  .home-relays-widget__stats {
    gap: 6px;
  }

  .home-relays-stat {
    padding: 8px 10px;
    gap: 8px;
  }

  .home-relays-stat__icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
  }

  .home-relays-stat__icon iconify-icon {
    width: 14px;
    height: 14px;
  }

  .home-relays-stat__label {
    font-size: 10px;
  }

  .home-relays-stat__value {
    font-size: 15px;
  }

  .home-relay-item {
    padding: 10px;
    gap: 10px;
  }

  .home-relay-item__avatar {
    width: 32px;
    height: 32px;
  }

  .home-relay-item__avatar-initials {
    font-size: 11px;
  }

  .home-relay-item__sender {
    font-size: 12px;
  }

  .home-relay-item__mission {
    font-size: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PHASE 4.3: THREAD EXPIRY BADGES
   ═══════════════════════════════════════════════════════════════════════════════ */

.expiry-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.expiry-badge--normal {
  background: #e0e7ff;
  color: #4f46e5;
}

.expiry-badge--warning {
  background: #ffedd5;
  color: #c2410c;
}

.expiry-badge--urgent {
  background: #fee2e2;
  color: #b91c1c;
  animation: expiry-pulse 2s ease-in-out infinite;
}

.expiry-badge--expired {
  background: #f3f4f6;
  color: #6b7280;
  text-decoration: line-through;
}

@keyframes expiry-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Expiry actions for owner in thread list */
.thread-expiry-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.thread-expiry-actions button {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.thread-expiry-actions__extend {
  background: #dbeafe;
  color: #1d4ed8;
}

.thread-expiry-actions__extend:hover {
  background: #bfdbfe;
}

.thread-expiry-actions__remove {
  background: #f4f4f5;
  color: #71717a;
}

.thread-expiry-actions__remove:hover {
  background: #e4e4e7;
}

/* Form select styling for create modal */
.relays-form-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  font-size: 14px;
  color: #18181b;
  background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.relays-form-select:focus {
  outline: none;
  border-color: #a1a1aa;
  box-shadow: 0 0 0 3px rgba(161, 161, 170, 0.1);
}

.relays-form-select:hover {
  border-color: #a1a1aa;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PHASE 4.4: THREAD VISIBILITY
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────────
   VISIBILITY HINT (Relay Card Progress Section)
   ───────────────────────────────────────────────────────────────────────────────── */

.relay-card__visibility-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f4f4f5;
  color: #a1a1aa;
  margin-left: 6px;
  flex-shrink: 0;
  cursor: help;
  transition: all 0.15s ease;
}

.relay-card__visibility-hint--visible {
  background: rgba(74, 0, 224, 0.08);
  color: var(--primary);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   VISIBILITY TOGGLE (Create Modal)
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-visibility-toggle {
  display: flex;
  gap: 12px;
}

.relays-visibility-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 12px;
  border: 2px solid #e4e4e7;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

.relays-visibility-option:hover {
  border-color: #d4d4d8;
  background: #fafafa;
}

.relays-visibility-option.active {
  border-color: var(--primary);
  background: rgba(74, 0, 224, 0.03);
}

.relays-visibility-option iconify-icon {
  color: #71717a;
}

.relays-visibility-option.active iconify-icon {
  color: var(--primary);
}

.relays-visibility-option span:not(.relays-visibility-desc) {
  font-weight: 500;
  font-size: 14px;
  color: #3f3f46;
}

.relays-visibility-desc {
  font-size: 11px;
  color: #a1a1aa;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   VISIBILITY BADGE (Manager Modal Header)
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-visibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.relays-visibility-badge--private {
  background: #f4f4f5;
  color: #71717a;
}

.relays-visibility-badge--private:hover {
  background: #e4e4e7;
}

.relays-visibility-badge--visible {
  background: rgba(74, 0, 224, 0.1);
  color: var(--primary);
}

.relays-visibility-badge--visible:hover {
  background: rgba(74, 0, 224, 0.15);
}

/* ─────────────────────────────────────────────────────────────────────────────────
   MINI REPORT (Recipient View - Visible Mode)
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-mini-report {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 12px;
  padding: 14px;
  margin-top: 16px;
}

/* Override the section title style for mini report */
.relays-mini-report .relays-report-section__title {
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  color: #4f46e5;
  margin-bottom: 10px;
}

.relays-mini-report__threads {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.relays-mini-report__thread {
  background: white;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  border: 1px solid #f4f4f5;
}

.relays-mini-report__recipient {
  display: flex;
  align-items: center;
  gap: 10px;
}

.relays-mini-report__info {
  flex: 1;
  min-width: 0;
}

.relays-mini-report__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.relays-mini-report__name {
  font-weight: 500;
  font-size: 13px;
  color: #27272a;
  line-height: 1.3;
  margin-bottom: 2px;
}

.relays-mini-report__thread .relays-thread-status {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 500;
}

.relays-mini-report__insights {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.relays-mini-report__insight {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12px;
  color: #52525b;
  line-height: 1.4;
}

.relays-mini-report__insight iconify-icon {
  margin-top: 2px;
  flex-shrink: 0;
}

.relays-mini-report__summary {
  font-size: 11px;
  color: #71717a;
  margin-top: 6px;
  padding: 6px 8px;
  background: #fafafa;
  border-radius: 6px;
  font-style: italic;
  line-height: 1.4;
}

.relays-mini-report__summary p {
  margin: 0;
}

.relays-mini-report__progress {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(74, 0, 224, 0.1);
  font-size: 12px;
  color: #71717a;
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────────────────────────
   HOP HISTORY (Redirected Threads)
   ───────────────────────────────────────────────────────────────────────────────── */

.relays-hop-history {
  background: linear-gradient(135deg, rgba(147, 51, 234, 0.03), rgba(168, 85, 247, 0.05));
  border: 1px solid rgba(147, 51, 234, 0.15);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 16px;
}

.relays-hop-history__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #3f3f46;
  margin-bottom: 12px;
}

.relays-hop-history__card {
  background: white;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.relays-hop-history__from {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.relays-hop-history__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.relays-hop-history__reason {
  background: #fafafa;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.relays-hop-history__summary {
  margin-bottom: 10px;
}

.relays-hop-history__insights {
  background: rgba(251, 191, 36, 0.05);
  border-radius: 8px;
  padding: 10px 12px;
}

/* End: 9_relays.css */