@import "tailwindcss";

/* ─────────────────────────────────────────────
   Dark mode: use our data-theme attribute
   ───────────────────────────────────────────── */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

/* ─────────────────────────────────────────────
   Theme: fonts
   ───────────────────────────────────────────── */
@theme {
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ─────────────────────────────────────────────
   Base body styles
   ───────────────────────────────────────────── */
@layer base {
  body {
    @apply bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 font-sans;
  }

  a {
    @apply text-blue-600 dark:text-blue-400 hover:underline;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply text-gray-900 dark:text-white;
  }

  button, [role="button"], input[type="submit"], input[type="button"] {
    @apply cursor-pointer;
  }

  /* HugeIcons — icon font baseline alignment */
  i[data-icon-candidates] {
    line-height: 1;
    vertical-align: -0.125em;
  }
}

/* ─────────────────────────────────────────────
   Sidebar layout
   ───────────────────────────────────────────── */
@layer components {
  .atlas-app {
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;
  }

  .atlas-sidebar {
    width: 310px;
    min-height: 100vh;
    @apply bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    transition: transform 0.2s ease;
    overflow-y: auto;
  }

  .atlas-sidebar-shell {
    display: grid;
    grid-template-columns: 76px 1fr;
    min-height: 100vh;
  }

  .atlas-sidebar-rail {
    @apply bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700;
    @apply flex flex-col items-center py-3 gap-3;
  }

  .atlas-rail-brand {
    @apply w-12 h-12 rounded-xl flex items-center justify-center;
    @apply bg-gray-100 dark:bg-gray-900 border border-gray-200 dark:border-gray-700;
  }

  .atlas-rail-brand:hover {
    @apply no-underline bg-gray-50 dark:bg-gray-700;
  }

  .atlas-rail-nav {
    @apply flex flex-col gap-2;
  }

  .atlas-rail-btn {
    @apply relative w-12 h-12 rounded-xl border border-transparent;
    @apply flex items-center justify-center text-gray-500 dark:text-gray-400;
    @apply bg-gray-100 dark:bg-gray-900 transition-colors;
  }

  .atlas-rail-btn:hover {
    @apply no-underline bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100;
  }

  .atlas-rail-btn.active {
    @apply border-blue-500 text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20;
  }

  .atlas-rail-badge {
    @apply absolute -top-1 -right-1;
  }

  .atlas-rail-separator {
    @apply w-10 border-t border-gray-300 dark:border-gray-700 my-1;
  }

  .atlas-rail-body {
    @apply flex flex-col flex-1 min-h-0 w-full items-center;
  }

  .atlas-rail-servers {
    @apply flex flex-col gap-2 items-center w-full overflow-y-auto px-2 pt-1 pb-2 flex-1;
    scroll-padding-top: 0.25rem;
  }

  .atlas-server-btn {
    @apply w-12 h-12 rounded-xl border border-transparent;
    @apply flex items-center justify-center overflow-hidden;
    @apply bg-white dark:bg-gray-800 transition-colors;
    position: relative;
  }

  .atlas-server-btn:hover {
    @apply no-underline bg-gray-50 dark:bg-gray-700;
  }

  .atlas-server-btn.active {
    @apply border-blue-500;
    box-shadow: inset 0 0 0 2px rgb(96 165 250 / 0.7);
  }

  .atlas-server-avatar {
    @apply w-full h-full object-cover;
  }

  .atlas-server-fallback {
    @apply text-xs font-semibold text-gray-700 dark:text-gray-200;
  }

  .atlas-rail-bottom {
    @apply w-full flex flex-col items-center gap-2 pt-2 pb-3;
  }

  .atlas-rail-subbtn {
    @apply inline-flex items-center justify-center p-1;
    @apply text-gray-700 dark:text-gray-300 transition-colors;
  }

  .atlas-rail-subbtn:hover {
    @apply text-gray-900 dark:text-gray-100 no-underline;
  }

  .atlas-rail-subform {
    @apply m-0 p-0;
  }

  .atlas-rail-subform .atlas-rail-subbtn {
    @apply border-0 bg-transparent;
  }

  .atlas-sidebar-panel {
    @apply flex flex-col min-h-screen;
  }

  .atlas-panel-header {
    @apply px-4 py-4 border-b border-gray-200 dark:border-gray-700;
  }

  .atlas-panel-title {
    @apply text-sm font-semibold text-gray-900 dark:text-white truncate;
  }

  .atlas-panel-subtitle {
    @apply text-xs text-gray-500 dark:text-gray-400;
  }

  .atlas-panel-nav {
    @apply py-2;
  }

  .atlas-content {
    flex: 1;
    margin-left: 310px;
    min-height: 100vh;
    overflow-x: hidden;
    max-width: 100%;
  }

  .atlas-content.content-expanded {
    margin-left: 310px;
  }

  .sidebar-link {
    @apply flex items-center gap-3 py-2 px-4 text-gray-600 dark:text-gray-300 no-underline whitespace-nowrap;
    @apply border-none bg-transparent w-full text-left text-sm cursor-pointer;
    @apply transition-colors duration-150;
  }

  .sidebar-link:hover {
    @apply text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-700 no-underline;
  }

  .sidebar-link.active {
    @apply text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/20 font-medium;
  }

  .sidebar-link i {
    @apply text-lg min-w-5 text-center;
  }

  .sidebar-divider {
    @apply border-t border-gray-200 dark:border-gray-700 my-2;
  }

  .notification-badge-sm {
    @apply inline-flex items-center justify-center min-w-[1rem] h-4 px-1 text-[0.6rem] font-bold rounded-full;
    @apply bg-red-500 text-white;
  }

  .sidebar-footer {
    @apply border-t border-gray-200 dark:border-gray-700 py-2;
  }

  .sidebar-user {
    @apply cursor-default text-[0.8rem];
  }

  .notification-badge {
    @apply inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5 text-[0.65rem] font-bold rounded-full;
    @apply bg-red-500 text-white;
    @apply hover:bg-red-600 transition-colors;
  }

  .tag-toggle {
    @apply inline-flex items-center px-3 py-1.5 text-sm rounded-full cursor-pointer select-none;
    @apply border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400;
    @apply hover:border-blue-400 hover:text-blue-600 dark:hover:border-blue-500 dark:hover:text-blue-400;
    @apply transition-all duration-150;
  }

  .tag-toggle--selected {
    @apply bg-blue-600 border-blue-600 text-white;
    @apply hover:bg-blue-700 hover:border-blue-700 hover:text-white;
    @apply dark:bg-blue-600 dark:border-blue-600 dark:text-white;
    @apply dark:hover:bg-blue-500 dark:hover:border-blue-500;
  }

  .toggle-switch {
    @apply relative appearance-none w-11 h-6 rounded-full cursor-pointer shrink-0;
    @apply bg-gray-300 dark:bg-gray-600;
    @apply transition-colors duration-200 ease-in-out;
  }

  .toggle-switch::after {
    content: '';
    @apply absolute top-0.5 left-0.5 w-5 h-5 rounded-full bg-white shadow-sm;
    @apply transition-transform duration-200 ease-in-out;
  }

  .toggle-switch:checked,
  .toggle-switch.checked {
    @apply bg-blue-600;
  }

  .toggle-switch:checked::after,
  .toggle-switch.checked::after {
    @apply translate-x-5;
  }

  .toggle-switch:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-800;
  }

  .toast-item {
    @apply pointer-events-auto;
  }

  .atlas-mobile-header {
    @apply fixed top-0 left-0 right-0 h-12 bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700;
    @apply flex items-center gap-2 px-4 z-30 text-gray-900 dark:text-white font-semibold;
  }

  .atlas-mobile-header .sidebar-link {
    @apply w-auto p-1;
  }

  .atlas-sidebar-overlay {
    @apply hidden fixed inset-0 bg-black/40 z-[1035];
  }

  .atlas-sidebar-overlay.active {
    @apply block;
  }

  @media (max-width: 991.98px) {
    .atlas-sidebar {
      transform: translateX(-100%);
    }

    .atlas-sidebar.sidebar-mobile-open {
      transform: translateX(0);
      width: 310px;
    }

    .atlas-content {
      margin-left: 0;
      padding-top: 48px;
    }

    .atlas-content.content-expanded {
      margin-left: 0;
    }
  }

  .atlas-sidebar::-webkit-scrollbar {
    width: 4px;
  }

  .atlas-sidebar::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600 rounded;
  }
}

/* ─────────────────────────────────────────────
   Modal (<dialog> with animated open/close)
   ───────────────────────────────────────────── */
@layer components {
  .atlas-modal {
    @apply p-0 border-0 bg-transparent m-auto;
    @apply opacity-0 scale-95;
    width: 24rem;
    max-width: calc(100vw - 2rem);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
  }

  .atlas-modal::backdrop {
    background: rgba(0, 0, 0, 0);
    transition: background 200ms ease-out;
  }

  .atlas-modal.is-open {
    @apply opacity-100 scale-100;
  }

  .atlas-modal.is-open::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  .atlas-modal-panel {
    @apply rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-xl;
    @apply p-5;
  }
}

/* ─────────────────────────────────────────────
   Offcanvas (replaces Bootstrap Offcanvas)
   ───────────────────────────────────────────── */
@layer components {
  .offcanvas {
    @apply fixed top-0 right-0 h-full z-50;
    @apply bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700;
    @apply translate-x-full transition-transform duration-300;
    @apply flex flex-col;
    width: 100%;
    max-width: 400px;
  }

  @media (max-width: 480px) {
    .offcanvas {
      max-width: 100%;
      border-left: none;
    }
  }

  .offcanvas.show {
    @apply translate-x-0;
  }

  .offcanvas-backdrop {
    @apply fixed inset-0 bg-black/50 z-40;
    @apply opacity-0 pointer-events-none transition-opacity duration-300;
  }

  .offcanvas-backdrop.show {
    @apply opacity-100 pointer-events-auto;
  }

  .offcanvas-header {
    @apply flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700;
  }

  .offcanvas-title {
    @apply text-lg font-semibold text-gray-900 dark:text-white;
  }

  .offcanvas-body {
    @apply flex-1 overflow-y-auto;
  }

  /* Activity Drawer - unified sidebar with peek tab */
  .activity-drawer-peek {
    @apply fixed right-0 top-1/2 -translate-y-1/2 z-40;
    @apply w-6 h-16 flex items-center justify-center;
    @apply bg-gray-700 hover:bg-gray-600 text-white;
    @apply rounded-l-lg shadow-lg cursor-pointer;
    @apply transition-all duration-200;
  }

  .activity-drawer-peek:hover {
    @apply w-8;
  }

  .activity-drawer-peek.drawer-open {
    @apply opacity-0 pointer-events-none;
  }

  .activity-drawer-backdrop {
    @apply fixed inset-0 bg-black/40 z-40;
    @apply opacity-0 pointer-events-none transition-opacity duration-300;
  }

  .activity-drawer-backdrop.show {
    @apply opacity-100 pointer-events-auto;
  }

  .activity-drawer {
    @apply fixed top-0 right-0 h-full z-50;
    @apply bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700;
    @apply translate-x-full transition-transform duration-300;
    @apply flex flex-col shadow-2xl;
    width: 100%;
    max-width: 420px;
  }

  @media (max-width: 480px) {
    .activity-drawer {
      max-width: 100%;
      border-left: none;
    }
  }

  .activity-drawer.show {
    @apply translate-x-0;
  }

  .activity-drawer-header {
    @apply flex items-center justify-between px-4 py-3;
    @apply border-b border-gray-200 dark:border-gray-700;
  }

  .activity-drawer-body {
    @apply flex-1 flex flex-col overflow-hidden;
  }

  .activity-drawer-tabs {
    @apply flex border-b border-gray-200 dark:border-gray-700;
  }

  .activity-drawer-tab {
    @apply flex-1 px-4 py-2.5 text-sm font-medium;
    @apply text-gray-500 dark:text-gray-400;
    @apply hover:text-gray-700 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700/50;
    @apply border-b-2 border-transparent transition-colors;
    @apply flex items-center justify-center gap-2;
  }

  .activity-drawer-tab.active {
    @apply text-blue-600 dark:text-blue-400 border-blue-600 dark:border-blue-400;
  }

  .activity-drawer-content {
    @apply flex-1 flex flex-col overflow-y-auto;
  }

  .activity-drawer-section {
    @apply border-b border-gray-200 dark:border-gray-700;
  }

  .activity-drawer-section-grow {
    @apply flex-1 flex flex-col border-b-0;
  }

  .activity-drawer-section-title {
    @apply px-4 py-2 text-xs font-semibold uppercase tracking-wider;
    @apply text-gray-500 dark:text-gray-400 bg-gray-50 dark:bg-gray-900/50;
    @apply flex items-center gap-2 mb-0;
  }

  .activity-drawer-section-body {
    @apply px-4 py-3;
  }

  .activity-drawer-log {
    @apply flex-1 m-0 px-4 py-3 overflow-auto;
    @apply bg-gray-900 text-gray-100 font-mono text-xs;
    white-space: pre-wrap;
    word-break: break-all;
  }

  .offcanvas-pipeline {
    width: 100%;
    max-width: 420px;
  }
}

/* ─────────────────────────────────────────────
   Tabs Component

   Usage:
     .tabs-nav.tabs-nav--underline (default, subtle underline)
     .tabs-nav.tabs-nav--pills (button-like tabs)
   ───────────────────────────────────────────── */
@layer components {
  /* Accordion chevron behavior (closed: up, open: down) */
  [data-controller~="accordion"] > button [data-accordion-target="icon"] {
    @apply inline-flex items-center justify-center transition-transform duration-200;
    rotate: 180deg;
  }

  [data-controller~="accordion"][data-accordion-open-value="true"] > button [data-accordion-target="icon"] {
    rotate: 0deg;
  }

  /* Base tabs nav - horizontal scroll on mobile */
  .tabs-nav {
    @apply flex gap-0 mb-4 list-none p-0 m-0;
    @apply overflow-x-auto flex-nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .tabs-nav::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }

  .tabs-nav__link {
    @apply block py-2.5 px-4 text-gray-500 dark:text-gray-400 no-underline cursor-pointer;
    @apply transition-colors duration-150 whitespace-nowrap text-center;
  }

  /* Full-width tabs on desktop */
  @media (min-width: 768px) {
    .tabs-nav li {
      flex: 1;
    }
  }

  /* Underline style (default) */
  .tabs-nav--underline .tabs-nav__link {
    @apply border-b-2 border-gray-200 dark:border-gray-700;
  }

  .tabs-nav--underline .tabs-nav__link:hover {
    @apply text-gray-700 dark:text-gray-200 border-gray-400 dark:border-gray-500 no-underline;
  }

  .tabs-nav--underline .tabs-nav__link.active {
    @apply text-blue-600 dark:text-blue-400 border-blue-600 dark:border-blue-400 font-medium;
  }

  /* Pills style */
  .tabs-nav--pills .tabs-nav__link {
    @apply rounded-md mr-1;
  }

  .tabs-nav--pills .tabs-nav__link:hover {
    @apply bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 no-underline;
  }

  .tabs-nav--pills .tabs-nav__link.active {
    @apply bg-blue-600 text-white font-medium;
  }

  /* Tab content panels */
  .tab-content > .tab-pane {
    @apply hidden;
  }

  .tab-content > .tab-pane.active {
    @apply block;
  }

  /* Legacy support - map old classes to new system */
  .nav-tabs {
    @apply flex gap-0 mb-4 list-none p-0 m-0;
    @apply overflow-x-auto flex-nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .nav-tabs .nav-link {
    @apply block py-2.5 px-4 text-gray-500 dark:text-gray-400 no-underline cursor-pointer whitespace-nowrap text-center;
    @apply border-b-2 border-gray-200 dark:border-gray-700 transition-colors duration-150;
  }

  @media (min-width: 768px) {
    .nav-tabs .nav-item {
      flex: 1;
    }
  }

  .nav-tabs .nav-link:hover {
    @apply text-gray-700 dark:text-gray-200 border-gray-400 dark:border-gray-500 no-underline;
  }

  .nav-tabs .nav-link.active {
    @apply text-blue-600 dark:text-blue-400 border-blue-600 dark:border-blue-400 font-medium;
  }

  .nav-underline {
    @apply flex gap-0 mb-4 list-none p-0 m-0;
  }

  .nav-underline .nav-link {
    @apply block py-2.5 px-4 text-gray-500 dark:text-gray-400 no-underline cursor-pointer;
    @apply border-b-2 border-gray-200 dark:border-gray-700 transition-colors duration-150;
  }

  .nav-underline .nav-link:hover {
    @apply text-gray-700 dark:text-gray-200 border-gray-400 dark:border-gray-500 no-underline;
  }

  .nav-underline .nav-link.active {
    @apply text-blue-600 dark:text-blue-400 border-blue-600 dark:border-blue-400 font-medium;
  }
}

/* ─────────────────────────────────────────────
   Custom utility components
   ───────────────────────────────────────────── */
@layer components {
  /* Stat card value — monospace numbers */
  .stat-value {
    @apply font-mono font-medium tracking-tight leading-tight;
  }

  /* Clickable card with hover effect */
  .card-link {
    @apply cursor-pointer no-underline transition-all duration-150;
    color: inherit;
  }

  .card-link:hover {
    @apply -translate-y-0.5 shadow-lg no-underline;
    color: inherit;
  }

  /* Progress bar thin variant */
  .progress-thin {
    @apply h-1.5 rounded-sm;
  }

  /* Action section card */
  .atlas-action-section {
    @apply rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800;
  }

  .atlas-action-section--danger {
    @apply border-red-300 dark:border-red-700/50;
  }

  .atlas-action-section--danger > .atlas-action-header {
    @apply bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-700/30 text-red-800 dark:text-red-300;
  }

  /* Spinner sizes */
  .spinner-xs {
    @apply w-2 h-2;
  }

  .spinner-xs--idle {
    animation: none !important;
  }
}

/* ─────────────────────────────────────────────
   Chat view styles
   ───────────────────────────────────────────── */
@layer components {
  .atlas-content:has(.chat-container) {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }

  .chat-input-textarea {
    min-height: 48px;
    max-height: 200px;
  }

  .chat-history-overlay {
    @apply fixed inset-0 bg-black/40 z-30;
  }

  @media (max-width: 1023.98px) {
    .chat-history-panel {
      @apply fixed inset-y-0 left-0 z-40;
      transform: translateX(-100%);
      transition: transform 0.2s ease;
    }

    .chat-history-panel.chat-history-panel-open {
      transform: translateX(0);
    }
  }

  .chat-typing-dot-delay-0 {
    animation-delay: 0ms;
  }

  .chat-typing-dot-delay-150 {
    animation-delay: 150ms;
  }

  .chat-typing-dot-delay-300 {
    animation-delay: 300ms;
  }

  .message-assistant .prose {
    font-size: 0.9375rem;
    line-height: 1.7;
  }

  .message-assistant .prose p {
    margin-bottom: 1em;
  }

  .message-assistant .prose p:last-child {
    margin-bottom: 0;
  }

  .message-assistant .prose h1,
  .message-assistant .prose h2,
  .message-assistant .prose h3,
  .message-assistant .prose h4 {
    font-weight: 600;
    margin-top: 1.25em;
    margin-bottom: 0.5em;
  }

  .message-assistant .prose h1:first-child,
  .message-assistant .prose h2:first-child,
  .message-assistant .prose h3:first-child,
  .message-assistant .prose h4:first-child {
    margin-top: 0;
  }

  .message-assistant .prose h1 {
    font-size: 1.25em;
  }

  .message-assistant .prose h2 {
    font-size: 1.125em;
  }

  .message-assistant .prose h3 {
    font-size: 1em;
  }

  .message-assistant .prose ul,
  .message-assistant .prose ol {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    padding-left: 1.5em;
  }

  .message-assistant .prose ul {
    list-style-type: disc;
  }

  .message-assistant .prose ol {
    list-style-type: decimal;
  }

  .message-assistant .prose li {
    margin-top: 0.375em;
    margin-bottom: 0.375em;
    padding-left: 0.25em;
  }

  .message-assistant .prose li::marker {
    color: currentColor;
    opacity: 0.6;
  }

  .message-assistant .prose ul ul,
  .message-assistant .prose ol ol,
  .message-assistant .prose ul ol,
  .message-assistant .prose ol ul {
    margin-top: 0.25em;
    margin-bottom: 0.25em;
  }

  .message-assistant .prose strong {
    font-weight: 600;
  }

  .message-assistant .prose blockquote {
    border-left: 3px solid rgba(107, 114, 128, 0.4);
    padding-left: 1em;
    margin: 1em 0;
    font-style: italic;
    opacity: 0.9;
  }

  .message-assistant .prose pre {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
    padding: 0.75rem;
    overflow-x: auto;
    margin: 1em 0;
  }

  .dark .message-assistant .prose pre {
    background-color: rgba(0, 0, 0, 0.3);
  }

  .message-assistant .prose code {
    background-color: rgba(0, 0, 0, 0.05);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    font-family: ui-monospace, monospace;
  }

  .dark .message-assistant .prose code {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .message-assistant .prose pre code {
    background-color: transparent;
    padding: 0;
  }

  .message-assistant .prose hr {
    border: none;
    border-top: 1px solid rgba(107, 114, 128, 0.3);
    margin: 1.5em 0;
  }

  .message-assistant .prose a {
    color: #3b82f6;
    text-decoration: underline;
  }

  .message-assistant .prose a:hover {
    color: #2563eb;
  }

  .message-assistant .prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.875em;
  }

  .message-assistant .prose th,
  .message-assistant .prose td {
    border: 1px solid rgba(107, 114, 128, 0.3);
    padding: 0.5em 0.75em;
    text-align: left;
  }

  .message-assistant .prose th {
    font-weight: 600;
    background-color: rgba(0, 0, 0, 0.03);
  }

  .dark .message-assistant .prose th {
    background-color: rgba(255, 255, 255, 0.05);
  }
}

/* ─────────────────────────────────────────────
   Trix editor overrides (base CSS loaded via CDN)
   ───────────────────────────────────────────── */
@layer components {
  /* Editor area */
  trix-editor {
    @apply border border-gray-300 rounded-md;
    @apply bg-white text-gray-900;
    @apply p-4 text-sm min-h-[700px] leading-relaxed;
    @apply focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none;
  }

  [data-theme="dark"] trix-editor {
    border-color: #4b5563 !important;
    background-color: #111827;
    color: #f3f4f6;
  }

  /* Content styles inside the editor */
  trix-editor h1 { @apply text-xl font-bold mb-2; }
  trix-editor a { @apply text-blue-600 dark:text-blue-400 underline; }
  trix-editor ul, trix-editor ol { @apply pl-5 my-2; }

  trix-editor blockquote {
    @apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-600 dark:text-gray-400 my-2;
  }

  trix-editor pre {
    @apply bg-gray-100 dark:bg-gray-800 rounded p-3 text-xs font-mono my-2 overflow-x-auto;
  }

  /* Toolbar button group borders */
  trix-toolbar .trix-button-group {
    border-color: var(--trix-border, #e5e7eb);
  }

  /* Toolbar buttons — light mode */
  trix-toolbar .trix-button {
    background-color: white;
  }

  trix-toolbar .trix-button:hover {
    background-color: #f3f4f6;
  }

  trix-toolbar .trix-button.trix-active {
    background-color: #eff6ff;
  }

  /* Toolbar — dark mode: override all CDN borders */
  [data-theme="dark"] trix-toolbar .trix-button-group {
    border-color: #374151 !important;
  }

  [data-theme="dark"] trix-toolbar .trix-button-group .trix-button {
    background-color: #1f2937;
    border-color: #374151 !important;
  }

  [data-theme="dark"] trix-toolbar .trix-button:hover {
    background-color: #374151;
  }

  [data-theme="dark"] trix-toolbar .trix-button.trix-active {
    background-color: rgba(59, 130, 246, 0.15);
  }

  /* Dark mode: invert Trix SVG icons for visibility */
  [data-theme="dark"] trix-toolbar .trix-button::before {
    filter: invert(0.8);
  }

  [data-theme="dark"] trix-toolbar .trix-button.trix-active::before {
    filter: invert(0) brightness(1.5) sepia(1) hue-rotate(190deg) saturate(3);
  }

  /* Hide file attachment button */
  trix-toolbar .trix-button-group--file-tools {
    display: none;
  }

  /* Merge tag insertion buttons */
  .beacon-merge-tag-btn {
    @apply inline-flex items-center px-2 py-0.5 text-[11px] font-mono rounded;
    @apply bg-purple-50 dark:bg-purple-500/10 text-purple-600 dark:text-purple-400;
    @apply border border-purple-200 dark:border-purple-500/30;
    @apply hover:bg-purple-100 dark:hover:bg-purple-500/20 transition-colors;
  }

  /* "All" language toggle variant */
  .tag-toggle--all {
    @apply font-medium;
  }

  /* ─────────────────────────────────────────────
     Filter builder (Beacon audience targeting)
     ───────────────────────────────────────────── */
  .filter-row {
    @apply rounded-md border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/50 p-2 space-y-1.5;
  }

  .filter-row-fields {
    @apply flex gap-1.5;
  }

  .filter-row-value {
    @apply flex gap-1.5 items-start;
  }

  .filter-field-select,
  .filter-operator-select {
    @apply h-8 px-2 text-xs rounded border border-gray-300 dark:border-gray-600;
    @apply bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300;
    @apply focus:ring-1 focus:ring-blue-500 focus:border-blue-500;
  }

  .filter-field-select {
    @apply flex-1 min-w-0;
  }

  .filter-operator-select {
    @apply w-24 shrink-0;
  }

  .filter-value-input {
    @apply w-full h-7 px-2 text-xs rounded border border-gray-300 dark:border-gray-600;
    @apply bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300;
    @apply focus:ring-1 focus:ring-blue-500 focus:border-blue-500;
  }

  .filter-value-select {
    @apply w-full text-xs rounded border border-gray-300 dark:border-gray-600;
    @apply bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300;
    @apply focus:ring-1 focus:ring-blue-500 focus:border-blue-500;
    @apply p-1.5;
    min-height: 56px;
    max-height: 100px;
  }

  .filter-value-select option {
    @apply px-2 py-1 rounded;
  }

  .filter-remove-btn {
    @apply shrink-0 w-6 h-6 flex items-center justify-center rounded text-gray-400 dark:text-gray-500;
    @apply hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-500/10 dark:hover:text-red-400;
    @apply transition-colors text-sm leading-none;
  }
}