/**
 * AI Agent Chat UI Styles
 *
 * Design principles:
 * - All classes prefixed with 'ai-agent-' to avoid conflicts
 * - Uses CSS @scope for style isolation
 * - Font sizes are relative (em) to a single configurable base
 * - Theming via CSS custom properties on .ai-agent-wrapper
 *
 * Supports light and dark themes via [data-theme] attribute
 */

/* ===========================================================================
   Configuration - Override these on .ai-agent-wrapper for customization
   =========================================================================== */

.ai-agent-wrapper {
  /* Typography - Base settings (override these to customize) */
  --ai-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ai-font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  --ai-font-size-base: 16px;
  --ai-line-height: 1.5;

  /* Light theme colors (default) */
  --ai-bg-primary: #ffffff;
  --ai-bg-secondary: #f5f5f5;
  --ai-bg-tertiary: #e8e8e8;
  --ai-bg-user-message: #00ab44;
  --ai-bg-assistant-message: transparent;
  --ai-text-primary: #1a1a1a;
  --ai-text-secondary: #666666;
  --ai-text-user-message: #000000;
  --ai-text-assistant-message: #1a1a1a;
  --ai-border-color: #e0e0e0;
  --ai-border-focus: #00ab44;
  --ai-accent-color: #00ab44;
  --ai-accent-hover: #008f3a;
  --ai-code-bg: #f6f8fa;
  --ai-code-text: #24292e;
  --ai-scrollbar-thumb: #c1c1c1;
  --ai-scrollbar-track: #f1f1f1;
  --ai-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  --ai-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ai-agent-wrapper[data-theme="dark"] {
  /* Dark theme colors */
  --ai-bg-primary: #1e1e1e;
  --ai-bg-secondary: #2d2d2d;
  --ai-bg-tertiary: #3d3d3d;
  --ai-bg-user-message: #00ab44;
  --ai-bg-assistant-message: transparent;
  --ai-text-primary: #e0e0e0;
  --ai-text-secondary: #a0a0a0;
  --ai-text-user-message: #000000;
  --ai-text-assistant-message: #e0e0e0;
  --ai-border-color: #404040;
  --ai-border-focus: #00ab44;
  --ai-accent-color: #00ab44;
  --ai-accent-hover: #008f3a;
  --ai-code-bg: #2d2d2d;
  --ai-code-text: #e0e0e0;
  --ai-scrollbar-thumb: #555555;
  --ai-scrollbar-track: #2d2d2d;
  --ai-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  --ai-shadow-light: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Mermaid dark theme: brighten connector lines and arrows */
.ai-agent-wrapper[data-theme="dark"] .ai-agent-mermaid-diagram .flowchart-link,
.ai-agent-wrapper[data-theme="dark"] .ai-agent-mermaid-diagram .edgePath path,
.ai-agent-wrapper[data-theme="dark"] .ai-agent-mermaid-diagram .relation,
.ai-agent-wrapper[data-theme="dark"] .ai-agent-mermaid-diagram path.path {
  stroke: #888888 !important;
}

.ai-agent-wrapper[data-theme="dark"] .ai-agent-mermaid-diagram marker path {
  fill: #888888 !important;
}

/* Graphviz DOT dark theme: elements where JS stripped inline colors
   get themed via CSS (colored elements keep their inline attributes) */
.ai-agent-wrapper[data-theme="dark"] .ai-agent-dot-diagram .edge path:not([stroke]),
.ai-agent-wrapper[data-theme="dark"] .ai-agent-dot-diagram .edge polygon:not([stroke]) {
  stroke: #aaaaaa;
}

.ai-agent-wrapper[data-theme="dark"] .ai-agent-dot-diagram .edge polygon:not([fill]) {
  fill: #aaaaaa;
}

.ai-agent-wrapper[data-theme="dark"] .ai-agent-dot-diagram .node polygon:not([stroke]),
.ai-agent-wrapper[data-theme="dark"] .ai-agent-dot-diagram .node ellipse:not([stroke]),
.ai-agent-wrapper[data-theme="dark"] .ai-agent-dot-diagram .node path:not([stroke]) {
  stroke: #aaaaaa;
}

/* Mermaid dark theme: edge label text must be dark (default theme uses light label backgrounds) */
.ai-agent-wrapper[data-theme="dark"] .ai-agent-mermaid-diagram .edgeLabel,
.ai-agent-wrapper[data-theme="dark"] .ai-agent-mermaid-diagram .edgeLabel * {
  color: #1a1a1a !important;
}

/* ===========================================================================
   Base Container (outside @scope for initial setup)
   =========================================================================== */

.ai-agent-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.ai-agent-wrapper {
  display: flex;
  flex-direction: column;
  background: var(--ai-bg-primary);
  color: var(--ai-text-primary);
  font-family: var(--ai-font-family);
  font-size: var(--ai-font-size-base);
  line-height: var(--ai-line-height);
  overflow: hidden;
}

/* Wrapper modifier classes - outside @scope since they apply to wrapper itself */
.ai-agent-wrapper.ai-agent-hidden {
  display: none !important;
}

.ai-agent-wrapper.ai-agent-div-mode {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Page-scroll mode: content flows naturally, input sticks to viewport bottom.
   Uses !important to override @scope rules which may win in cascade. */
.ai-agent-page-scroll.ai-agent-wrapper {
  height: auto !important;
  overflow: visible !important;
}

/* flex:1 expands messages to fill wrapper, pushing footer to bottom.
   overflow-y:visible lets content flow naturally with the page. */
.ai-agent-page-scroll .ai-agent-messages {
  flex: 1 !important;
  overflow-y: visible !important;
}

.ai-agent-page-scroll .ai-agent-sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--ai-bg-primary);
}

/* Container must also not constrain height in page-scroll mode */
.ai-agent-container:has(.ai-agent-page-scroll) {
  height: auto !important;
  overflow: visible !important;
}

.ai-agent-wrapper.ai-agent-widget-mode {
  position: fixed;
  bottom: 90px;
  right: 20px;
  width: 380px;
  height: 520px;
  max-height: calc(100vh - 120px);
  z-index: 9999;
  border-radius: 12px;
  box-shadow: var(--ai-shadow);
  border: 1px solid var(--ai-border-color);
}

.ai-agent-wrapper.ai-agent-widget-mode.ai-agent-maximized {
  bottom: 20px;
  right: 20px;
  width: calc(100vw - 40px);
  height: calc(100vh - 40px);
  max-height: none;
  border-radius: 16px;
}

/* Widget floating button - sibling of wrapper, not inside it */
.ai-agent-float-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  border: none;
  background: var(--ai-accent-color);
  color: white;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--ai-font-family);
  font-size: var(--ai-font-size-base);
}

.ai-agent-float-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.ai-agent-float-button svg {
  width: 1.5em;
  height: 1.5em;
}

/* ===========================================================================
   Scoped Styles - All internal elements
   =========================================================================== */

@scope (.ai-agent-wrapper) {
  /* -------------------------------------------------------------------------
     Utility Classes (for child elements)
     ------------------------------------------------------------------------- */

  .ai-agent-hidden {
    display: none !important;
  }

  /* Widget Header */
  .ai-agent-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75em 1em;
    background: var(--ai-bg-secondary);
    border-bottom: 1px solid var(--ai-border-color);
  }

  .ai-agent-widget-title {
    font-weight: 600;
    font-size: 0.9375em;
  }

  .ai-agent-widget-controls {
    display: flex;
    gap: 0.5em;
  }

  .ai-agent-widget-controls button {
    background: transparent;
    border: none;
    color: var(--ai-text-secondary);
    cursor: pointer;
    padding: 0.25em;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
  }

  .ai-agent-widget-controls button:hover {
    color: var(--ai-text-primary);
    background: var(--ai-bg-tertiary);
  }

  .ai-agent-widget-controls button svg {
    width: 1.125em;
    height: 1.125em;
  }

  /* -------------------------------------------------------------------------
     Messages Area
     ------------------------------------------------------------------------- */

  .ai-agent-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1em;
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    scroll-behavior: smooth;
    container-type: inline-size;  /* Enable container queries for child elements */
  }

  /* Home screen: shown when no messages */
  .ai-agent-home {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    padding: 2em 1.5em;
    gap: 2em;
    text-align: center;
  }

  /* Legacy SVG home content */
  .ai-agent-home svg {
    width: 100%;
    max-width: 960px;
    height: auto;
  }

  /* Welcome prose */
  .ai-agent-home-welcome {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ai-text-primary);
    margin: 0;
    margin-top: auto;
    max-width: 600px;
  }

  /* Input area when inside home screen (centered, no border) */
  .ai-agent-home .ai-agent-input-area {
    width: 100%;
    max-width: 700px;
    border-top: none;
    padding: 0;
  }

  /* Hint suggestions (non-interactive text) */
  .ai-agent-home-hints {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    max-width: 700px;
  }

  .ai-agent-home-hint {
    color: var(--ai-text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
  }

  /* Quick links (pill buttons, pinned to bottom) */
  .ai-agent-home-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
    max-width: 700px;
    margin-top: auto;
  }

  .ai-agent-home-link {
    background: var(--ai-bg-tertiary, #e8e8e8);
    color: var(--ai-text-secondary);
    border: 1px solid var(--ai-border-color);
    border-radius: 1em;
    padding: 0.5em 1em;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s;
  }

  .ai-agent-home-link:hover {
    color: var(--ai-text-primary);
    background: var(--ai-bg-secondary);
    text-decoration: none;
  }

  /* Global Scrollbar Styles - applies to all scrollable elements */
  :scope *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  :scope *::-webkit-scrollbar-track {
    background: var(--ai-scrollbar-track);
    border-radius: 4px;
  }

  :scope *::-webkit-scrollbar-thumb {
    background: var(--ai-scrollbar-thumb);
    border-radius: 4px;
  }

  :scope *::-webkit-scrollbar-thumb:hover {
    background: var(--ai-scrollbar-thumb);
    filter: brightness(0.9);
  }

  /* Firefox scrollbar */
  :scope * {
    scrollbar-width: thin;
    scrollbar-color: var(--ai-scrollbar-thumb) var(--ai-scrollbar-track);
  }

  /* -------------------------------------------------------------------------
     Message Bubbles
     ------------------------------------------------------------------------- */

  .ai-agent-message {
    position: relative;
    animation: ai-agent-fadeIn 0.2s ease-out;
  }

  @keyframes ai-agent-fadeIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .ai-agent-message-user {
    align-self: flex-end;
    max-width: 85%;
  }

  .ai-agent-message-assistant {
    align-self: stretch;
    width: 100%;
  }

  .ai-agent-message-content {
    padding: 0.625em 0.875em;
    border-radius: 1em;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  .ai-agent-message-user .ai-agent-message-content {
    background: var(--ai-bg-user-message);
    color: var(--ai-text-user-message);
    border-bottom-right-radius: 4px;
  }

  .ai-agent-message-assistant .ai-agent-message-content {
    background: var(--ai-bg-assistant-message);
    color: var(--ai-text-assistant-message);
    border-radius: 0;
    /* Dynamic horizontal padding: scales with container width (min 0.5em, 5% of container, max 5em) */
    padding: 0.75em clamp(0.5em, 5cqi, 5em);
  }

  /* Double-buffer: hide inactive buffer during streaming */
  .ai-agent-buffer-hidden {
    display: none;
  }

  /* Message Actions */
  .ai-agent-message-actions {
    position: absolute;
    top: 0.25em;
    opacity: 0;
    transition: opacity 0.2s;
  }

  .ai-agent-message-user .ai-agent-message-actions {
    left: -2em;
  }

  .ai-agent-message-assistant .ai-agent-message-actions {
    right: 0.5em;
  }

  .ai-agent-message:hover .ai-agent-message-actions {
    opacity: 1;
  }

  .ai-agent-copy-btn {
    background: var(--ai-bg-tertiary);
    border: none;
    color: var(--ai-text-secondary);
    cursor: pointer;
    padding: 0.25em;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
  }

  .ai-agent-copy-btn:hover {
    color: var(--ai-text-primary);
    background: var(--ai-border-color);
  }

  .ai-agent-copy-btn.copied {
    color: #22c55e;
  }

  .ai-agent-copy-btn svg {
    width: 0.875em;
    height: 0.875em;
  }

  /* Message Footer (stats + copy for assistant messages) */
  .ai-agent-message-footer {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin-top: 0.75em;
    padding: 0.5em clamp(0.5em, 5cqi, 5em) 0;
    border-top: 1px solid var(--ai-border-color);
    font-size: 0.8125em;
  }

  .ai-agent-message-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    color: var(--ai-text-secondary);
    font-variant-numeric: tabular-nums;
    flex: 1;
  }

  .ai-agent-message-footer .ai-agent-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
  }

  .ai-agent-message-footer .ai-agent-stat-item svg {
    width: 0.875em;
    height: 0.875em;
    opacity: 0.7;
  }

  .ai-agent-message-footer .ai-agent-stat-value {
    opacity: 0.9;
  }

  .ai-agent-message-footer .ai-agent-copy-btn {
    flex-shrink: 0;
  }

  /* -------------------------------------------------------------------------
     Markdown Content Styling
     ------------------------------------------------------------------------- */

  .ai-agent-message-content p {
    margin: 0 0 0.5em 0;
  }

  .ai-agent-message-content p:last-child {
    margin-bottom: 0;
  }

  .ai-agent-message-content h1,
  .ai-agent-message-content h2,
  .ai-agent-message-content h3,
  .ai-agent-message-content h4,
  .ai-agent-message-content h5,
  .ai-agent-message-content h6 {
    margin: 1em 0 0.5em 0;
    font-weight: 600;
  }

  .ai-agent-message-content h1 { font-size: 1.5em; }
  .ai-agent-message-content h2 { font-size: 1.25em; }
  .ai-agent-message-content h3 { font-size: 1.125em; }
  .ai-agent-message-content h4 { font-size: 1em; }
  .ai-agent-message-content h5 { font-size: 0.9375em; }
  .ai-agent-message-content h6 { font-size: 0.875em; }

  .ai-agent-message-content h1:first-child,
  .ai-agent-message-content h2:first-child,
  .ai-agent-message-content h3:first-child {
    margin-top: 0;
  }

  .ai-agent-message-content ul,
  .ai-agent-message-content ol {
    margin: 0.5em 0;
    padding-left: 1.5em;
  }

  .ai-agent-message-content li {
    margin: 0.25em 0;
  }

  .ai-agent-message-content a {
    color: var(--ai-accent-color);
    text-decoration: none;
  }

  .ai-agent-message-content a:hover {
    text-decoration: underline;
  }

  .ai-agent-message-content blockquote {
    margin: 0.5em 0;
    padding: 0.5em 1em;
    border-left: 3px solid var(--ai-border-color);
    background: var(--ai-bg-secondary);
    border-radius: 0 4px 4px 0;
  }

  .ai-agent-message-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5em 0;
    font-size: 1em;
  }

  .ai-agent-message-content th,
  .ai-agent-message-content td {
    border: 1px solid var(--ai-border-color);
    padding: 0.375em 0.625em;
    text-align: left;
  }

  .ai-agent-message-content th {
    background: var(--ai-bg-secondary);
    font-weight: 600;
  }

  /* Horizontal Rule */
  .ai-agent-message-content hr {
    border: none;
    border-top: 1px solid var(--ai-border-color);
    margin: 1em 0;
  }

  /* Inline Code */
  .ai-agent-message-content code {
    background: var(--ai-code-bg);
    color: var(--ai-code-text);
    padding: 0.125em 0.375em;
    border-radius: 4px;
    font-family: var(--ai-font-family-mono);
    font-size: 0.9em;
  }

  /* Code Blocks */
  .ai-agent-code-block-wrapper {
    position: relative;
    margin: 0.75em 0;
  }

  .ai-agent-code-block {
    background: var(--ai-code-bg);
    color: var(--ai-code-text);
    border-radius: 8px;
    overflow-x: auto;
    margin: 0;
    padding: 0.75em 0.875em;
    font-family: var(--ai-font-family-mono);
    font-size: 1em;
    line-height: 1.0;  /* Tight spacing for ASCII art */
  }

  .ai-agent-code-block code {
    background: none;
    padding: 0;
    border-radius: 0;
    color: inherit;
    font-size: inherit;
  }

  .ai-agent-code-block-wrapper .ai-agent-code-copy-btn {
    position: absolute;
    top: 0.5em;
    right: 0.5em;
    opacity: 0;
    transition: opacity 0.2s;
  }

  .ai-agent-code-block-wrapper:hover .ai-agent-code-copy-btn {
    opacity: 1;
  }

  /* Mermaid Diagrams */
  .ai-agent-mermaid-diagram {
    margin: 0.75em 0;
    padding: 1em;
    background: var(--ai-bg-secondary);
    border-radius: 8px;
    overflow-x: auto;
    text-align: center;
  }

  .ai-agent-mermaid-diagram svg {
    max-width: 100%;
    height: auto;
  }

  /* SVG Diagrams (from ```svg code blocks) */
  /* Graphviz DOT Diagrams (from ```dot code blocks) */
  .ai-agent-dot-diagram {
    margin: 0.75em 0;
    padding: 1em;
    background: var(--ai-bg-secondary);
    border-radius: 8px;
    overflow-x: auto;
    text-align: center;
  }

  .ai-agent-dot-diagram svg {
    max-width: 100%;
    height: auto;
  }

  /* Graphviz: theme colors for elements where JS stripped inline attrs.
     Colored elements keep their inline fill/stroke and are unaffected. */
  .ai-agent-dot-diagram text {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }

  .ai-agent-dot-diagram text:not([fill]) {
    fill: var(--ai-text-primary);
  }

  .ai-agent-dot-diagram .node polygon:not([fill]),
  .ai-agent-dot-diagram .node ellipse:not([fill]),
  .ai-agent-dot-diagram .node path:not([fill]) {
    fill: var(--ai-bg-secondary);
  }

  .ai-agent-dot-diagram .node polygon:not([stroke]),
  .ai-agent-dot-diagram .node ellipse:not([stroke]),
  .ai-agent-dot-diagram .node path:not([stroke]) {
    stroke: var(--ai-text-secondary);
  }

  .ai-agent-dot-diagram .edge path:not([stroke]) {
    stroke: var(--ai-text-secondary);
  }

  .ai-agent-dot-diagram .edge polygon:not([fill]) {
    fill: var(--ai-text-secondary);
  }

  .ai-agent-dot-diagram .edge polygon:not([stroke]) {
    stroke: var(--ai-text-secondary);
  }

  .ai-agent-dot-diagram .cluster > polygon:not([stroke]),
  .ai-agent-dot-diagram .cluster > path:not([stroke]) {
    stroke: var(--ai-text-secondary);
  }

  .ai-agent-dot-diagram .cluster > polygon:not([fill]),
  .ai-agent-dot-diagram .cluster > path:not([fill]) {
    fill: transparent;
  }

  .ai-agent-svg-diagram {
    margin: 0.75em 0;
    padding: 1em;
    background: var(--ai-bg-secondary);
    border-radius: 8px;
    overflow-x: auto;
    text-align: center;
  }

  .ai-agent-svg-diagram svg {
    max-width: 100%;
    height: auto;
  }

  /* -------------------------------------------------------------------------
     Input Area
     ------------------------------------------------------------------------- */

  .ai-agent-input-area {
    display: flex;
    align-items: flex-end;
    gap: 0.5em;
    padding: 0.75em 1em;
    border-top: 1px solid var(--ai-border-color);
    background: var(--ai-bg-primary);
  }

  .ai-agent-input {
    flex: 1;
    min-height: 2.5em;
    max-height: 33vh;
    padding: 0.625em 0.875em;
    border: 1px solid var(--ai-border-color);
    border-radius: 1.25em;
    background: var(--ai-bg-secondary);
    color: var(--ai-text-primary);
    font-family: inherit;
    font-size: 1em;
    line-height: 1.4;
    resize: none;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .ai-agent-input:focus {
    border-color: var(--ai-border-focus);
    box-shadow: 0 0 0 2px rgba(0, 171, 68, 0.15);
  }

  .ai-agent-input::placeholder {
    color: var(--ai-text-secondary);
  }

  .ai-agent-send {
    width: 2.5em;
    height: 2.5em;
    border: none;
    border-radius: 50%;
    background: var(--ai-accent-color);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.1s;
    flex-shrink: 0;
  }

  .ai-agent-send:hover {
    background: var(--ai-accent-hover);
  }

  .ai-agent-send:active {
    transform: scale(0.95);
  }

  .ai-agent-send svg {
    width: 1.125em;
    height: 1.125em;
  }

  /* Stop button state */
  .ai-agent-send-stop {
    background: #dc3545;
  }

  .ai-agent-send-stop:hover {
    background: #c82333;
  }

  /* Ghosted send button (empty input or cooldown) */
  .ai-agent-send-ghosted {
    opacity: 0.35;
    pointer-events: none;
  }

  /* Disabled input state */
  .ai-agent-input-disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* Input size limit warning flash */
  .ai-agent-input-limit-warning {
    animation: ai-agent-limit-flash 0.3s ease-in-out;
  }

  @keyframes ai-agent-limit-flash {
    0%, 100% { border-color: var(--ai-border-color); }
    50% { border-color: #ff6b6b; box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.3); }
  }

  /* -------------------------------------------------------------------------
     Status Bar
     ------------------------------------------------------------------------- */

  .ai-agent-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375em 1em;
    background: var(--ai-bg-secondary);
    border-top: 1px solid var(--ai-border-color);
    font-size: 0.75em;
    min-height: 2em;
  }

  .ai-agent-status-text {
    color: var(--ai-text-secondary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  .ai-agent-status-actions {
    display: flex;
    gap: 0.25em;
  }

  .ai-agent-status-actions button {
    background: transparent;
    border: none;
    color: var(--ai-text-secondary);
    cursor: pointer;
    padding: 0.25em 0.375em;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background 0.2s;
  }

  .ai-agent-status-actions button:hover {
    color: var(--ai-text-primary);
    background: var(--ai-bg-tertiary);
  }

  .ai-agent-status-actions button svg {
    width: 1.166em;
    height: 1.166em;
  }

  /* -------------------------------------------------------------------------
     Spinner
     ------------------------------------------------------------------------- */

  .ai-agent-spinner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5em;
    /* Match assistant message content padding */
    padding: 0.75em clamp(0.5em, 5cqi, 5em);
  }

  .ai-agent-spinner-working {
    display: flex;
    align-items: center;
    gap: 0.5em;
    color: var(--ai-text-primary);
    font-size: 1em;
    font-weight: 500;
  }

  .ai-agent-spinner-working::before {
    content: '';
    display: inline-block;
    width: 0.875em;
    height: 0.875em;
    border: 2px solid var(--ai-accent-color);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ai-agent-spinnerRotate 0.8s linear infinite;
  }

  @keyframes ai-agent-spinnerRotate {
    to {
      transform: rotate(360deg);
    }
  }

  /* Spinner Stats Row */
  .ai-agent-spinner-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    padding-left: 1.375em;
    color: var(--ai-text-secondary);
    font-size: 0.8125em;
    font-variant-numeric: tabular-nums;
  }

  .ai-agent-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
  }

  .ai-agent-stat-item svg {
    width: 0.9em;
    height: 0.9em;
    opacity: 0.7;
    flex-shrink: 0;
  }

  .ai-agent-stat-value {
    min-width: 1.5em;
  }

  .ai-agent-spinner-status {
    color: var(--ai-text-secondary);
    font-size: 0.875em;
    padding-left: 1.375em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* -------------------------------------------------------------------------
     Responsive Adjustments
     ------------------------------------------------------------------------- */

  @media (max-width: 480px) {
    .ai-agent-message {
      max-width: 90%;
    }
  }
}

/* Media queries for wrapper-level elements (outside @scope) */
@media (max-width: 480px) {
  .ai-agent-wrapper.ai-agent-widget-mode {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .ai-agent-float-button {
    bottom: 16px;
    right: 16px;
    width: 3.25em;
    height: 3.25em;
  }
}