/* Companion Stylesheet - Spark Look Tokens */
/* 
 * Legacy token mappings for backwards compatibility.
 * These reference the unified theme tokens defined in theme-tokens.css
 * and Spark-specific tokens defined in spark-colours.css
 * 
 * Note: Tokens like --bg, --text, --border, --success, --warning, --error
 * are already defined in theme-tokens.css and inherited automatically.
 */
:root {
  /* Legacy tokens that need remapping - mapped to unified theme tokens */
  --panel: var(--surface);
  --muted: var(--text-muted);
  --primary: var(--accent);
  --dark: var(--surface-subtle);
  --radius: 16px;
  --radius-card: 12px;
  --radius-bubble: 14px;
  --bubble-agent-bg: var(--bubble-coach);
  --bubble-coach-bg: var(--bubble-user);
  --chip-bg: var(--chip-background);
  --card-surface: var(--card-bg);
  
  /* SparkSurface component tokens - mapped to Spark tokens */
  --surface-background-dark: var(--surface-background);
  --surface-border-dark: var(--surface-border);
  --surface-border-hover: var(--surface-hover);
  
  /* Spark Chat Bubble Colors - mapped to Spark tokens */
  --spark-bubble-user: var(--bubble-user);
  --spark-bubble-coach: var(--bubble-coach);
  --spark-bubble-user-border: var(--brand-accent-border);
  --spark-bubble-coach-border: var(--surface-border);
  --text-secondary: var(--text-secondary);
  --surface-chat: var(--surface-background);
  
  /* Additional color variants for navigation */
  --primary-hover: var(--accent-soft);
  --success-hover: var(--success-hover);
  
  /* Spark Composer tokens */
  --composer-background: var(--surface-background);
  --composer-border: var(--surface-border);
  --composer-border-focus: var(--brand-accent-border);
  --composer-focus-ring: var(--brand-accent-soft);
  --composer-placeholder: var(--text-muted);
  --composer-send-bg: var(--brand-accent);
  --composer-send-bg-hover: var(--brand-accent);
  --composer-send-text: #ffffff;
  --composer-chip-bg: var(--chip-background);
  --composer-chip-border: var(--chip-border);
  --composer-chip-bg-hover: var(--surface-hover);
  --composer-chip-border-hover: var(--surface-border);
  --composer-chip-text: var(--text);
  
  /* Spark Chip tokens - mapped to Spark tokens */
  --chip-border-dark: var(--chip-border);
  --chip-background-dark: var(--chip-background);
  --chip-background-hover: var(--surface-hover);
  --chip-border-hover: var(--surface-border);
  --chip-text: var(--text);
  --chip-text-dark: var(--text);
  
  /* Risk chip colors - mapped to Spark tokens */
  --chip-risk-low-bg: var(--risk-low-bg);
  --chip-risk-low-border: var(--risk-low-border);
  --chip-risk-low-text: var(--risk-low-text);
  
  --chip-risk-medium-bg: var(--risk-medium-bg);
  --chip-risk-medium-border: var(--risk-medium-border);
  --chip-risk-medium-text: var(--risk-medium-text);
  
  --chip-risk-high-bg: var(--risk-high-bg);
  --chip-risk-high-border: var(--risk-high-border);
  --chip-risk-high-text: var(--risk-high-text);
  
  --chip-risk-critical-bg: var(--risk-high-bg);
  --chip-risk-critical-border: var(--risk-high-border);
  --chip-risk-critical-text: var(--risk-high-text);
  
  --chip-risk-unknown-bg: var(--chip-background);
  --chip-risk-unknown-border: var(--chip-border);
  --chip-risk-unknown-text: var(--text-muted);
}

/* Light Theme - only override what's different */
body[data-theme="light"] {
  /* Additional color variants for navigation in light mode */
  --primary-dark: #2c5aa0;
  --primary-hover-bg: #d5e5ff;
  --success-dark: #1e7a4f;
}

/* Full-page layout */
.cc-shell {
  background: var(--bg);
  height: 100vh;
  width: 100vw;
  overflow: hidden; /* shell doesn't scroll; individual panes scroll via .cc-pane */
}

/* Override MudBlazor Layout positioning */
.cc-shell.mud-layout {
  position: relative;
}

/* Allow MudDrawer to control its own positioning for responsive behavior */
.cc-shell .mud-drawer {
  height: 100% !important;
}

/* MudMainContent positioning */
.cc-shell .mud-main-content {
  height: 100% !important;
  padding: 0 !important;
}

/* Sticky center header that never overlaps left pane */
.cc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) var(--space-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cc-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.cc-header-right {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.cc-header h5 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

/* Small icon button */
.cc-icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-input);
  background: var(--card-surface);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .12s;
}

.cc-icon-btn:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}

.cc-icon-btn:active {
  transform: scale(0.98);
}

/* Every pane fills the grid cell and scrolls independently */
.cc-pane {
  background: var(--surface-background) !important;
  border: 1px solid var(--surface-border) !important;
  border-radius: var(--radius-card) !important;
  height: 100%;
  overflow: auto;            /* independent scroll */
  box-shadow: none !important; /* depth handled below */
  transition: box-shadow 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

/* === Bubble Styling - Spark Style === */
.bubble-agent {
  background: var(--spark-bubble-coach);
  border: 1px solid var(--spark-bubble-coach-border);
  border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 4px;
  padding: 10px 14px;
  max-width: 68ch;
  animation: sparkFadeIn 120ms ease-out;
  /* Safe wrapping rules to prevent overflow */
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  overflow: hidden;
}

.bubble-coach {
  background: var(--spark-bubble-user);
  border: 1px solid var(--spark-bubble-user-border);
  border-radius: var(--radius-bubble) var(--radius-bubble) 4px var(--radius-bubble);
  padding: 10px 14px;
  max-width: 68ch;
  animation: sparkFadeIn 120ms ease-out;
  /* Safe wrapping rules to prevent overflow */
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  overflow: hidden;
}



/* Card and Chip Helpers for Right Rail and Sidebar */
.card-surface {
  background: var(--card-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card) !important;
  margin-bottom: var(--space-12);
  padding: var(--space-16);
}

.chip {
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  padding: var(--space-chip-vertical) var(--space-chip-horizontal);
  font-size: 12px;
  color: var(--muted);
}

/* Typography Helper */
body {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--text);
}

/* Icon Utilities */
.icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  opacity: .9;
}

.icon.lg {
  width: 22px;
  height: 22px;
}

.icon.xl {
  width: 24px;
  height: 24px;
}

.icon.muted {
  opacity: .65;
}

/* Icon with text layout helper */
.icon-text {
  display: flex;
  align-items: center;
  gap: var(--space-element-gap-small);
}

.icon-text.mb-sm {
  margin-bottom: var(--space-4);
}

/* 24px circular avatar chip for chat roles */
.avatar-24 {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-4);  /* balances left/right baselines visually */
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--text);
}

/* Theme Polish - Spark Pixel Match Updates */

/* Typography overrides for H5 and H6 */
h5, .mud-typography-h5 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

h6, .mud-typography-h6 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Paper surfaces with flat elevation and border */
.cc-paper {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
}

/* Chip accent variant */
.chip.accent {
  background: color-mix(in srgb, var(--primary) 20%, transparent);
  color: var(--text);
}

/* Sidebar row utility */
.row {
  text-align: left;
  padding: var(--space-12);
  border-radius: var(--space-12);
}

.row.active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
}

/* Search input styling */
.search-dark .mud-input-root {
  background: var(--card-surface);
  border: 1px solid var(--border);
  color: var(--text);
}

/* === Timestamp & hover feedback === */
.time-subtle {
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  letter-spacing: .01em;
  opacity: 0.7;
}

.bubble-agent:hover, .bubble-coach:hover {
  opacity: .97;
}

.bubble-agent:hover {
  border-color: color-mix(in srgb, var(--primary) 20%, var(--spark-bubble-coach-border));
}

/* Make assistant message bubbles visually clickable */
.bubble-agent.bubble-clickable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.bubble-agent.bubble-clickable:hover {
  background: color-mix(in srgb, var(--primary) 5%, var(--spark-bubble-coach));
  border-color: color-mix(in srgb, var(--primary) 30%, var(--spark-bubble-coach-border));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.bubble-agent.bubble-clickable:active {
  transform: scale(0.99);
}

.bubble-coach:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, var(--spark-bubble-user-border));
}

/* Optional: faint guide line for lane definition (light mode only) */
body[data-theme="light"] .msg-row.is-agent > div:nth-child(2)::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-12));
  top: 0;
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border-radius: 2px;
}


/* === Conversation Thread Layout === */
.msgs {
  padding: var(--space-12) var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  overflow: auto;
  flex: 1;
  /* Spark-style smooth scrolling - aligned with --trans-normal (120ms) */
  scroll-behavior: smooth;
}

/* Spark chat surface - wraps the entire conversation area for depth */
.spark-chat-surface {
  background: var(--surface-background);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-panel);
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  transition: box-shadow 120ms ease, border-color 120ms ease;
}

/* Thread container - needs relative positioning for absolute jump button */
.thread-container {
  position: relative;
}

/* Dark mode shadows */
.spark-chat-surface {
  box-shadow: var(--shadow-light);
}

/* Light mode shadows */
body[data-theme="light"] .spark-chat-surface {
  box-shadow: var(--shadow-light);
}

/* When using spark-chat-feed, enhance with proper scrolling */
.spark-chat-feed {
  padding: var(--space-12) 0;
  /* Spark-style smooth scrolling */
  scroll-behavior: smooth;
}

/* Composer aligned and compact */
.composer {
  border-top: 1px solid var(--border);
  padding: var(--space-8) var(--space-12);
  display: flex;
  align-items: center;   /* vertical alignment */
  gap: var(--space-8);
}

/* Bubble small variant */
.bubble-small {
  opacity: .85;
  font-size: 13px;
}

/* Right rail container */
.rail {
  padding: var(--space-panel-padding);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  overflow: auto;
}

/* Key-value list */
.kv {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
}

.kv li {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  padding: var(--space-4) 0;
}

/* Next Best Actions styling */
.nba small {
  display: block;
  color: var(--muted);
}

/* Compliance checks styling */
.checks .ok {
  color: var(--success);
}

.checks .warn {
  color: var(--warning);
}

/* Section heading with small icon */
.rail-h {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0 0 var(--space-element-gap-small) 0;
  font-weight: 600;
  font-size: 16px;
}

.rail-h .icon {
  width: 18px;
  height: 18px;
  opacity: .9;
}

/* Dark scrollbars */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-input);
  border: 2px solid var(--bg);
}

*::-webkit-scrollbar-track {
  background: var(--bg);
}

/* Top app bar that matches the theme and never leaves a white strip */
.spark-appbar{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--space-12);
  background: var(--panel) !important;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  z-index: 1200;
}

/* Toggle label tone */
.spark-appbar .mud-text {
  color: var(--muted);
  font-size: 12px;
}

/* Ensure body starts below the app bar (if needed where default layout wraps) */
body {
  scroll-padding-top: 44px;
}

/* Neutralize MudBlazor default elevations globally */
.mud-elevation-1, .mud-elevation-2, .mud-elevation-3,
.mud-elevation-4, .mud-elevation-5, .mud-elevation-6,
.mud-paper, .mud-card {
  box-shadow: none !important;
}

/* Default (dark mode): subtle shadows */
.cc-pane,
.cc-paper,
.card-surface {
  box-shadow: var(--shadow-light);
}

/* Soft elevation in LIGHT mode */
body[data-theme="light"] .cc-pane,
body[data-theme="light"] .cc-paper,
body[data-theme="light"] .card-surface {
  box-shadow: var(--shadow-light);
}
body[data-theme="light"] .card-surface:hover {
  box-shadow: var(--shadow-medium);
}

/* Sidebar row layout */
.cc-side-list { padding: var(--space-8); }
.cc-row {
  display: grid;
  grid-template-columns: 22px 1fr auto; /* icon | title+meta | time */
  gap: var(--space-element-gap-medium);
  align-items: center;
  width: 100%;
  text-align: left;
  padding: var(--space-element-gap-medium) var(--space-12);
  border-radius: var(--space-12);
  border: 1px solid transparent; /* focus ring uses outline */
  background: transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.cc-row:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.cc-row.active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  transition: background-color .18s ease, color .15s ease;
}
.cc-row:active {
  transform: scale(0.99);
}
.cc-row .title {
  font-weight: 600;
  line-height: 1.2;
}
.cc-row .meta {
  display: flex; gap: var(--space-8); align-items: center;
  color: var(--muted);
  font-size: 12px;
  margin-top: var(--space-4);
}
.cc-row .time {
  color: var(--muted);
  font-size: 12px;
  margin-left: var(--space-8);
}

/* Keyboard focus */
.cc-row:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Default message row layout */
.msg-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-8);
  align-items: flex-start;
  /* Spark fade-in and slide-in animation */
  opacity: 0;
  transform: translateY(2px);
  animation: sparkFadeIn var(--fade-in-duration) var(--fade-in-ease) forwards;
}

/* Grouping rhythm */
.msg-row + .msg-row { margin-top: var(--space-element-gap-medium); }
.msg-row.same-role { margin-top: var(--space-element-gap-small); }

/* === Role-based indentation === */
.msg-row.is-coach,
.msg-row.msg-user {
  grid-template-columns: 1fr 28px;
}
.msg-row.is-coach > .avatar-24,
.msg-row.msg-user > .avatar-24 { order: 2; }
.msg-row.is-coach > div:nth-child(2),
.msg-row.msg-user > div:nth-child(2) { order: 1; }
.msg-row.is-coach > div:nth-child(2) > .bubble-coach,
.msg-row.msg-user > div:nth-child(2) > .bubble-coach { margin-left: auto; }

/* Increase intra-lane padding to avoid midline crowding */
.msg-row.is-agent > div:nth-child(2),
.msg-row.msg-assistant > div:nth-child(2) { padding-right: var(--space-32); }
.msg-row.is-coach > div:nth-child(2),
.msg-row.msg-user > div:nth-child(2) { padding-left: var(--space-32); }

/* Avatar (24px circle) inherits currentColor */
.msg-avatar{
  width: 24px; height: 24px;
  border-radius: var(--radius-chip);
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--text);
}

/* Accessible live announcements */
.msgs[aria-live="polite"]{ outline: none; }

/* Focus styles for keyboard nav (tab into thread) */
.msg-row:focus-within{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* =========================
   Micro-interactions & Motion
   ========================= */

/* Message bubble fade-in keyframe - Spark style
   NOTE: sparkFadeIn keyframe is now defined in spark-interactions.css */

/* Legacy animation name for backwards compatibility */
@keyframes msgFadeIn {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hover lift effect for interactive cards */
.card-surface {
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.card-surface:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}

body[data-theme="dark"] .card-surface:hover {
  box-shadow: var(--shadow-strong);
}

/* Respect users who prefer reduced motion */
/* Note: Universal selector is intentional for accessibility compliance per WCAG guidelines */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Explicitly disable specific animations for clarity */
  .msg-row,
  .bubble-agent,
  .bubble-coach,
  .system-bubble,
  .streaming-cursor,
  .card-surface,
  .new-messages-pill,
  .event-card,
  .log-event--highlighted,
  .rail-panel,
  .note-section {
    animation: none !important;
    transition: none !important;
  }
  
  /* Preserve focus visibility but remove transition */
  .cc-row:focus-visible,
  .cc-icon-btn:focus-visible,
  .mud-button:focus-visible,
  .mud-input-root:focus-within,
  a:focus-visible,
  [role="button"]:focus-visible {
    transition: none !important;
  }
}

/* Default transition for interactive elements */
.chip,
.mud-button,
.mud-input-root,
.bubble-agent,
.bubble-coach,
.card-surface,
.cc-pane,
.icon {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease, transform .12s ease;
}

/* Active press feedback (micro scale) for buttons */
.mud-button:active {
  transform: scale(0.99);
}

/* Focus ring visibility for buttons and inputs */
.mud-button:focus-visible,
.mud-input-root:focus-within {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Chips: hover and active feel */
.chip:hover { opacity: .92; }
.chip:active { transform: scale(0.98); }



/* Drawer backdrop fade (MudBlazor uses .mud-overlay) */
.mud-overlay {
  transition: opacity .18s ease;
}

/* =========================
   Keyboard Focus Visibility (WCAG 2.1 AA)
   ========================= */

/* Text selection styling */
:where(.cc-row, .cc-icon-btn, .mud-button, .mud-input-root, a, button, [role="button"])::selection {
  background: color-mix(in srgb, var(--primary) 25%, transparent);
}

/* Prevent text selection during Spark resizer drag */
.spark-resizing {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
}

.spark-resizing * {
  cursor: col-resize !important;
}

/* Consistent focus rings for keyboard navigation */
.cc-row:focus-visible,
.cc-icon-btn:focus-visible,
.mud-button:focus-visible,
.mud-input-root:focus-within,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-input);
}

/* Ensure no component-level CSS removes focus outlines */
*:focus {
  box-shadow: none !important;
}

/* =========================
   Spark-level Readability & Rhythm Polish
   ========================= */

/* D) Make the title feel like a page anchor */
.cc-header h5 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }

/* E) Make values pop a touch */
.kv li b { font-weight: 600; color: var(--text); }
/* Clamp summary tone */
.nba + .mud-typography { color: var(--muted); margin-top: var(--space-element-gap-small); }

/* F) Clear separation between hover and active in both themes */
.cc-row:hover  { background: color-mix(in srgb, var(--primary) 8%,  transparent); }
.cc-row.active { background: color-mix(in srgb, var(--primary) 16%, transparent); }

/* G) Empty thread state */
.empty-thread { color: var(--muted); display: grid; place-items: center; height: 40vh; gap: var(--space-8); }

/* I) Ensure chip text is legible */
.chip { color: var(--muted); }
body[data-theme="light"] .chip { color: var(--text); }

/* === Date Dividers for Long Threads === */
.msg-divider{
  display:flex; align-items:center; justify-content:center;
  margin: var(--space-24) 0; color:var(--muted); font-size:12px;
}
.msg-divider::before, .msg-divider::after{
  content:""; flex:1; height:1px; background:var(--border); margin:0 var(--space-12); border-radius:1px;
}

/* === Subtle Bubble Entrance Animation === */
@keyframes bubbleIn {
  from { opacity:0; transform: translateY(2px); }
  to   { opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .bubble-agent, .bubble-coach { animation: sparkFadeIn 120ms ease-out; }
}

/* === Streaming Text Cursor Animation === */
.streaming-cursor {
  display: inline-block;
  margin-left: 2px;
  animation: blink 1s infinite;
  color: var(--primary);
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.bubble-agent.streaming {
  /* Spark-style streaming indicator with subtle left border */
  border-left: 2px solid var(--primary);
  padding-left: 12px;
}

/* === Preparing Response Indicator === */
.bubble-agent.preparing {
  /* Subtle style for preparation state */
  border-left: 2px solid var(--primary);
  padding-left: 12px;
  opacity: 0.9;
}

.preparing-text {
  font-style: italic;
  color: var(--text-secondary);
}

.preparing-dots {
  display: inline-block;
  margin-left: 2px;
}

.preparing-dots .dot {
  animation: dotPulse 1.4s infinite ease-in-out;
  opacity: 0;
}

.preparing-dots .dot:nth-child(1) {
  animation-delay: 0s;
}

.preparing-dots .dot:nth-child(2) {
  animation-delay: 0.2s;
}

.preparing-dots .dot:nth-child(3) {
  animation-delay: 0.4s;
}

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

/* === New Messages Pill / Jump to Latest Button === */
.new-messages-pill-container {
  position: absolute;
  bottom: 80px; /* Above the composer */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none; /* Allow clicks to pass through container */
}

.new-messages-pill {
  pointer-events: auto; /* Re-enable clicks on the button */
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  background: var(--brand-accent);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-chip);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-strong);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast), background-color var(--trans-fast);
  animation: sparkFadeIn var(--fade-in-duration) var(--fade-in-ease);
}

.new-messages-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  background: color-mix(in srgb, var(--brand-accent) 90%, white);
}

.new-messages-pill:active {
  transform: translateY(0);
}

/* Dark mode subtle adjustments */
body[data-theme="dark"] .new-messages-pill {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

body[data-theme="dark"] .new-messages-pill:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}

/* === Diagnostic Badge === */
.diag-badge {
  font-size: 0.75rem;
  margin-left: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-input);
  color: #fff;
  font-weight: 500;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}

.diag-badge.timeout {
  background-color: var(--warning);
}

.diag-badge.error {
  background-color: var(--error);
}

/* =========================
   Responsive Breakpoints for Message Bubbles
   ========================= */

/* Tablets and smaller laptops - slightly wider bubbles */
@media (max-width: 1024px) {
  .bubble-agent,
  .bubble-coach {
    max-width: 75%;
  }
  
  .system-bubble {
    max-width: 85%;
  }
}

/* Mobile devices - much wider bubbles to maximize space */
@media (max-width: 768px) {
  .bubble-agent,
  .bubble-coach {
    max-width: 90%;
  }
  
  .system-bubble {
    max-width: 95%;
  }
  
  /* Reduce padding on smaller screens */
  .msg-row.is-agent > div:nth-child(2),
  .msg-row.msg-assistant > div:nth-child(2) {
    padding-right: var(--space-8);
  }
  
  .msg-row.is-coach > div:nth-child(2),
  .msg-row.msg-user > div:nth-child(2) {
    padding-left: var(--space-8);
  }
}

/* Very small mobile devices - maximize available space */
@media (max-width: 480px) {
  .bubble-agent,
  .bubble-coach {
    max-width: 95%;
  }
  
  .system-bubble {
    max-width: 98%;
  }
}

/* =========================
   Responsive Layout Adjustments for Narrow Viewports
   ========================= */

/* Tablets and narrow laptops - tighten layout */
@media (max-width: 768px) {
  /* Reduce padding in scrollable areas */
  .conversation-scroll {
    padding: var(--space-8);
  }
  
  .right-rail-scroll {
    padding: var(--space-8);
  }
  
  /* Reduce header padding */
  .cc-header {
    padding: var(--space-4) var(--space-12);
  }
  
  /* Stack header items on very narrow screens */
  .cc-header-left,
  .cc-header-right {
    flex-wrap: wrap;
  }
}

/* Very small phones - aggressive space optimization */
@media (max-width: 480px) {
  .cc-header {
    padding: var(--space-4) var(--space-8);
  }
  
  /* Reduce font sizes slightly */
  .cc-header h5 {
    font-size: 18px;
  }
}