/* ============================================
   FINKIT CHATBOT - PREMIUM SAGE GREEN UI
   ============================================ */

      /* ============================================
   1. CSS DESIGN TOKENS
   ============================================ */
      :root {
        /* Sage Green Brand Palette - derived from rgb(215, 230, 198) */
        --brand-50: #f6f9f2;
        --brand-100: #eaf0e2;
        --brand-200: #e0ebd4;
        --brand-300: #d7e6c6;
        --brand-400: #c2d9ab;
        --brand-500: #a8c98e;
        --brand-600: #8eb872;
        --brand-700: #74a557;
        --brand-800: #5c8a43;
        --brand-900: #466a33;

        /* Primary Brand Colors */
        --brand-primary: #a8c98e;
        --brand-primary-light: #c2d9ab;
        --brand-primary-dark: #74a557;
        --brand-accent: #5c8a43;
        --brand-glow: rgba(215, 230, 198, 0.5);
        --brand-glow-subtle: rgba(215, 230, 198, 0.2);

        /* Glassmorphism Tokens */
        --glass-bg: rgba(255, 255, 255, 0.72);
        --glass-bg-hover: rgba(255, 255, 255, 0.88);
        --glass-bg-solid: rgba(255, 255, 255, 0.95);
        --glass-border: rgba(255, 255, 255, 0.22);
        --glass-border-subtle: rgba(255, 255, 255, 0.08);
        --glass-border-emphasized: rgba(215, 230, 198, 0.5);
        --glass-blur-sm: blur(8px);
        --glass-blur-md: blur(16px);
        --glass-blur-lg: blur(24px);
        --glass-blur-xl: blur(40px);

        /* Glass Shadows */
        --glass-shadow:
          0 4px 20px rgba(0, 0, 0, 0.04),
          inset 0 1px 0 rgba(255, 255, 255, 0.5),
          inset 0 -1px 0 rgba(0, 0, 0, 0.01);
        --glass-shadow-elevated:
          0 12px 32px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03),
          inset 0 1px 0 rgba(255, 255, 255, 0.6);
        --glass-shadow-glow:
          0 0 40px rgba(215, 230, 198, 0.2), 0 4px 20px rgba(0, 0, 0, 0.04);

        /* Surface Colors */
        --surface-primary: #ffffff;
        --surface-secondary: #f8faf5;
        --surface-tertiary: #f1f5ec;
        --surface-elevated: #ffffff;
        --surface-overlay: rgba(15, 23, 42, 0.6);

        /* Text Colors */
        --text-primary: #1e2d16;
        --text-secondary: #3e5a30;
        --text-tertiary: #6e8e60;
        --text-muted: #9ab48c;
        --text-inverse: #ffffff;
        --text-brand: #5c8a43;

        /* Border Colors */
        --border-default: rgba(0, 0, 0, 0.06);
        --border-subtle: rgba(0, 0, 0, 0.03);
        --border-emphasized: rgba(0, 0, 0, 0.1);
        --border-brand: rgba(215, 230, 198, 0.5);

        /* Spacing */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-16: 4rem;

        /* Typography */
        --font-sans:
          "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
          sans-serif;
        --font-mono:
          "Fira Code", "JetBrains Mono", "SF Mono", Monaco, monospace;

        --text-xs: 0.75rem;
        --text-sm: 0.875rem;
        --text-base: 1rem;
        --text-lg: 1.125rem;
        --text-xl: 1.25rem;
        --text-2xl: 1.5rem;
        --text-3xl: 1.875rem;
        --text-4xl: 2.25rem;

        /* Border Radius */
        --radius-sm: 0.375rem;
        --radius-md: 0.5rem;
        --radius-lg: 0.75rem;
        --radius-xl: 1rem;
        --radius-2xl: 1.5rem;
        --radius-full: 9999px;

        /* Animations */
        --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
        --ease-in-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);
        --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        --ease-smooth-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        --ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.4);
        --duration-fast: 150ms;
        --duration-normal: 250ms;
        --duration-slow: 400ms;
        --duration-entrance: 600ms;
        --duration-dramatic: 800ms;

        /* Motion primitives: one spring-ish ease-out for UI, one strong
           in-out for on-screen movement, explicit press/quick/base/slow
           budgets. UI motion stays under 320ms. */
        --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
        --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1);
        --ease-settle: cubic-bezier(0.2, 0.9, 0.25, 1.06);
        --t-press: 120ms;
        --t-quick: 160ms;
        --t-base: 220ms;
        --t-slow: 320ms;

        /* Instrument palette - the mono voice and semantic risk colors */
        --ink: #16240f;
        --ink-2: #35502a;
        --text-label: #4f6c43;
        --line: rgba(24, 44, 15, 0.1);
        --line-strong: rgba(24, 44, 15, 0.16);
        --paper: #f5f9f0;
        --card: #ffffff;
        --sage-600: #5f8f45;
        --sage-700: #456b31;
        --risk-high: #a2621d;
        --risk-high-soft: rgba(162, 98, 29, 0.1);
        --risk-clean: #3f7d4e;
        --risk-clean-soft: rgba(63, 125, 78, 0.1);
        --shadow-card: 0 1px 2px rgba(20, 40, 12, 0.04),
          0 12px 28px -12px rgba(20, 40, 12, 0.16);
        --shadow-float: 0 2px 6px rgba(20, 40, 12, 0.06),
          0 24px 48px -24px rgba(20, 40, 12, 0.28);

        /* Z-Index */
        --z-base: 0;
        --z-elevated: 10;
        --z-sticky: 100;
        --z-overlay: 200;
        --z-modal: 300;
        --z-toast: 400;
      }

      /* ============================================
   2. BASE RESET & GLOBAL STYLES
   ============================================ */
      *,
      *::before,
      *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html,
      body {
        height: 100%;
        width: 100%;
        font-family: var(--font-sans);
        background: var(--surface-secondary);
        color: var(--text-primary);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        scrollbar-width: auto;
        scrollbar-color: var(--brand-700) var(--surface-tertiary);
      }

      /* Global Scrollbar Stylings - Maximum Visibility */
      ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
      }

      ::-webkit-scrollbar-track {
        background: var(--surface-tertiary);
        border-radius: var(--radius-full);
      }

      ::-webkit-scrollbar-thumb {
        background: var(--brand-600);
        border: 3px solid var(--surface-tertiary);
        border-radius: var(--radius-full);
        transition: background 0.2s;
      }

      ::-webkit-scrollbar-thumb:hover {
        background: var(--brand-700);
      }

      ::-webkit-scrollbar-thumb:active {
        background: var(--brand-800);
      }

      /* ============================================
   3. AMBIENT BACKGROUND
   ============================================ */
      .ambient-background {
        position: fixed;
        inset: 0;
        overflow: hidden;
        z-index: -1;
        background:
          radial-gradient(
            ellipse 80% 50% at 50% -20%,
            rgba(215, 230, 198, 0.12),
            transparent
          ),
          radial-gradient(
            ellipse 60% 40% at 100% 100%,
            rgba(168, 201, 142, 0.08),
            transparent
          ),
          radial-gradient(
            ellipse 40% 30% at 0% 50%,
            rgba(215, 230, 198, 0.06),
            transparent
          ),
          linear-gradient(
            180deg,
            var(--surface-secondary) 0%,
            var(--surface-primary) 100%
          );
      }

      .ambient-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(100px);
        opacity: 0.3;
        animation: floatOrb 25s ease-in-out infinite, orbBreathe 8s ease-in-out infinite;
        pointer-events: none;
        will-change: transform, opacity;
      }

      .ambient-orb--primary {
        width: 400px;
        height: 400px;
        background: radial-gradient(
          circle,
          rgba(215, 230, 198, 0.4),
          transparent 70%
        );
        top: -25%;
        left: -15%;
        animation-delay: 0s, -2s;
      }

      .ambient-orb--secondary {
        width: 300px;
        height: 300px;
        background: radial-gradient(
          circle,
          rgba(215, 230, 198, 0.3),
          transparent 70%
        );
        bottom: -15%;
        right: -10%;
        animation-delay: -8s, -4s;
      }

      .ambient-orb--tertiary {
        width: 200px;
        height: 200px;
        background: radial-gradient(
          circle,
          rgba(168, 201, 142, 0.2),
          transparent 70%
        );
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation-delay: -16s, -6s;
      }

      @keyframes floatOrb {
        0%, 100% {
          transform: translate(0, 0) scale(1) rotate(0deg);
        }
        15% {
          transform: translate(50px, -40px) scale(1.08) rotate(5deg);
        }
        30% {
          transform: translate(-30px, 30px) scale(0.92) rotate(-3deg);
        }
        45% {
          transform: translate(40px, 20px) scale(1.05) rotate(8deg);
        }
        60% {
          transform: translate(-20px, -35px) scale(0.95) rotate(-5deg);
        }
        75% {
          transform: translate(35px, 10px) scale(1.03) rotate(3deg);
        }
        85% {
          transform: translate(-15px, -25px) scale(0.97) rotate(-2deg);
        }
      }

      @keyframes orbBreathe {
        0%, 100% {
          opacity: 0.3;
          filter: blur(100px);
        }
        50% {
          opacity: 0.45;
          filter: blur(85px);
        }
      }

      .ambient-background::after {
        content: "";
        position: absolute;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(168, 201, 142, 0.12), transparent 70%);
        top: 60%;
        right: 20%;
        filter: blur(60px);
        animation: floatParticle 20s ease-in-out infinite;
        pointer-events: none;
      }

      @keyframes floatParticle {
        0%, 100% {
          transform: translate(0, 0) scale(0.8);
          opacity: 0.2;
        }
        33% {
          transform: translate(-60px, -40px) scale(1.1);
          opacity: 0.4;
        }
        66% {
          transform: translate(40px, 30px) scale(0.9);
          opacity: 0.25;
        }
      }

      /* ============================================
   4. CHATBOT CONTAINER
   ============================================ */
      .chatbot-container {
        display: flex;
        flex-direction: column;
        height: 100vh;
        width: 100%;
        max-width: 100%;
        background: transparent;
        overflow: hidden;
        animation: containerFadeIn 0.8s var(--ease-out-expo);
      }

      @keyframes containerFadeIn {
        0% {
          opacity: 0;
          transform: scale(0.97) translateY(8px);
          filter: blur(6px);
        }
        60% {
          opacity: 0.8;
          filter: blur(1px);
        }
        100% {
          opacity: 1;
          transform: scale(1) translateY(0);
          filter: blur(0);
        }
      }

      /* ============================================
   5. CHAT HEADER
   ============================================ */
      .chat-header {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky);
        padding: var(--space-2) var(--space-3);
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur-md);
        -webkit-backdrop-filter: var(--glass-blur-md);
        border-bottom: 1px solid var(--glass-border-subtle);
        transition:
          background 0.3s,
          box-shadow 0.3s;
        flex-shrink: 0;
      }

      .chat-header.scrolled {
        background: var(--glass-bg-solid);
        box-shadow:
          0 1px 12px rgba(0, 0, 0, 0.04),
          0 0 40px rgba(215, 230, 198, 0.06);
        backdrop-filter: var(--glass-blur-lg);
        -webkit-backdrop-filter: var(--glass-blur-lg);
      }

      .chat-header__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-width: 0;
      }

      .chat-header__brand {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-width: 0;
        overflow: hidden;
      }

      .brand-logo {
        display: flex;
        align-items: center;
        gap: var(--space-2);
      }

      .brand-logo__icon {
        width: 28px;
        height: 28px;
        background: linear-gradient(
          135deg,
          var(--brand-primary),
          var(--brand-primary-dark)
        );
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 14px var(--brand-glow-subtle);
        transition:
          transform 0.3s var(--ease-spring),
          box-shadow 0.3s;
      }

      .brand-logo:hover .brand-logo__icon {
        transform: rotate(-5deg) scale(1.1);
        box-shadow:
          0 6px 20px var(--brand-glow),
          0 0 30px rgba(215, 230, 198, 0.3);
      }

      .brand-logo__icon svg {
        width: 14px;
        height: 14px;
        color: white;
      }

      .brand-logo__text {
        font-size: var(--text-base);
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: -0.02em;
        white-space: nowrap;
      }

      .status-indicator {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-1) var(--space-3);
        background: rgba(215, 230, 198, 0.1);
        border: 1px solid rgba(215, 230, 198, 0.15);
        border-radius: var(--radius-full);
        font-size: var(--text-xs);
        font-weight: 500;
        color: var(--brand-primary-dark);
      }

      .status-indicator__dot {
        width: 6px;
        height: 6px;
        background: var(--brand-primary);
        border-radius: 50%;
        animation: statusPulse 2s ease-in-out infinite;
        box-shadow: 0 0 6px var(--brand-glow);
      }

      @keyframes statusPulse {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
          box-shadow: 0 0 6px var(--brand-glow), 0 0 12px rgba(215, 230, 198, 0.1);
        }
        50% {
          opacity: 0.5;
          transform: scale(0.75);
          box-shadow: 0 0 2px var(--brand-glow-subtle), 0 0 0 rgba(215, 230, 198, 0);
        }
      }

      .chat-header__actions {
        display: flex;
        align-items: center;
        gap: var(--space-2);
      }

      /* Action Buttons */
      .action-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur-sm);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-lg);
        color: var(--text-primary);
        font-size: var(--text-sm);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-in-out-smooth);
        position: relative;
        overflow: hidden;
      }

      .action-btn svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
      }

      .action-btn:hover {
        background: var(--glass-bg-hover);
        border-color: var(--border-brand);
        transform: translateY(-1px);
        box-shadow: var(--glass-shadow);
      }

      .action-btn:active {
        transform: translateY(0) scale(0.97);
      }

      .action-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(circle at center, rgba(215, 230, 198, 0.3) 0%, transparent 70%);
        opacity: 0;
        transform: scale(0);
        transition: opacity 0.4s, transform 0.4s;
      }

      .action-btn:active::before {
        opacity: 1;
        transform: scale(2.5);
        transition: opacity 0s, transform 0s;
      }

      .action-btn--primary {
        background: linear-gradient(
          135deg,
          var(--brand-primary),
          var(--brand-primary-dark)
        );
        border-color: transparent;
        color: var(--text-inverse);
        box-shadow: 0 4px 16px var(--brand-glow-subtle);
      }

      .action-btn--primary:hover {
        background: linear-gradient(
          135deg,
          var(--brand-primary-light),
          var(--brand-primary)
        );
        box-shadow: 0 6px 24px var(--brand-glow);
        transform: translateY(-2px);
      }

      /* ============================================
   6. CHAT MAIN AREA
   ============================================ */
      .chat-main {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        padding: 0;
        scroll-behavior: smooth;
        /* Custom High-Visibility Scrollbar */
        scrollbar-gutter: stable;
      }

      /* ============================================
   7. WELCOME STATE
   ============================================ */
      .welcome-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        padding: var(--space-8) var(--space-4);
        text-align: center;
        animation: welcomeFadeIn 1s var(--ease-out-expo);
        min-width: 0;
        width: 100%;
      }

      @keyframes welcomeFadeIn {
        0% {
          opacity: 0;
          transform: translateY(60px) scale(0.92);
          filter: blur(8px);
        }
        40% {
          opacity: 0.6;
          filter: blur(2px);
        }
        100% {
          opacity: 1;
          transform: translateY(0) scale(1);
          filter: blur(0);
        }
      }

      .welcome-state__content {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
        min-width: 0;
      }

      .welcome-state__icon-wrapper {
        position: relative;
        animation: welcomeElementStagger 0.8s var(--ease-out-expo) 0.1s both;
      }

      .welcome-state__icon {
        width: 56px;
        height: 56px;
        background: linear-gradient(
          135deg,
          var(--brand-primary),
          var(--brand-primary-dark)
        );
        border-radius: var(--radius-2xl);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--glass-shadow-glow);
        animation: iconFloat 5s ease-in-out infinite;
        position: relative;
        z-index: 1;
      }

      .welcome-state__icon svg {
        width: 28px;
        height: 28px;
        color: white;
      }

      @keyframes iconFloat {
        0%, 100% {
          transform: translateY(0) rotate(0deg) scale(1);
        }
        25% {
          transform: translateY(-10px) rotate(3deg) scale(1.02);
        }
        50% {
          transform: translateY(-6px) rotate(-1deg) scale(0.99);
        }
        75% {
          transform: translateY(-8px) rotate(1.5deg) scale(1.01);
        }
      }

      .welcome-state__glow {
        position: absolute;
        inset: -30px;
        background: radial-gradient(
          circle,
          var(--brand-glow) 0%,
          transparent 60%
        );
        filter: blur(25px);
        z-index: 0;
        animation: glowPulse 4s ease-in-out infinite;
      }

      @keyframes glowPulse {
        0%, 100% {
          opacity: 0.4;
          transform: scale(1);
          filter: blur(25px);
        }
        30% {
          opacity: 0.7;
          transform: scale(1.15);
          filter: blur(20px);
        }
        60% {
          opacity: 0.85;
          transform: scale(1.08);
          filter: blur(28px);
        }
      }

      .welcome-state__title {
        font-size: var(--text-xl);
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: -0.03em;
        line-height: 1.2;
        animation: welcomeElementStagger 0.8s var(--ease-out-expo) 0.25s both;
      }

      .welcome-state__subtitle {
        font-size: var(--text-sm);
        color: var(--text-secondary);
        line-height: 1.55;
        max-width: 100%;
        padding: 0 var(--space-2);
        animation: welcomeElementStagger 0.8s var(--ease-out-expo) 0.4s both;
      }

      @keyframes welcomeElementStagger {
        0% {
          opacity: 0;
          transform: translateY(30px);
          filter: blur(4px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
          filter: blur(0);
        }
      }

      /* Suggestion Chips */
      .welcome-state__suggestions {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        width: 100%;
        max-width: 100%;
        animation: welcomeElementStagger 0.8s var(--ease-out-expo) 0.55s both;
      }

      .suggestion-chip {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur-sm);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-lg);
        color: var(--text-primary);
        font-size: var(--text-sm);
        font-weight: 500;
        cursor: pointer;
        transition: all 0.25s var(--ease-out-expo);
        text-align: left;
        position: relative;
        overflow: hidden;
        opacity: 0;
        animation: chipEntrance 0.5s var(--ease-out-back) both;
        min-width: 0;
        width: 100%;
      }

      .suggestion-chip:nth-child(1) { animation-delay: 0.6s; }
      .suggestion-chip:nth-child(2) { animation-delay: 0.7s; }
      .suggestion-chip:nth-child(3) { animation-delay: 0.8s; }
      .suggestion-chip:nth-child(4) { animation-delay: 0.9s; }

      @keyframes chipEntrance {
        0% {
          opacity: 0;
          transform: translateY(20px) scale(0.9);
          filter: blur(3px);
        }
        100% {
          opacity: 1;
          transform: translateY(0) scale(1);
          filter: blur(0);
        }
      }

      .suggestion-chip::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          rgba(215, 230, 198, 0.08),
          transparent
        );
        opacity: 0;
        transition: opacity 0.25s;
      }

      .suggestion-chip:hover::before {
        opacity: 1;
      }

      .suggestion-chip:hover {
        background: var(--glass-bg-hover);
        border-color: var(--border-brand);
        transform: translateY(-4px) scale(1.03);
        box-shadow:
          var(--glass-shadow-elevated),
          0 0 20px rgba(215, 230, 198, 0.15);
      }

      .suggestion-chip:hover .suggestion-chip__icon {
        transform: scale(1.2);
        transition: transform 0.25s var(--ease-spring);
      }

      .suggestion-chip:active {
        transform: translateY(-1px) scale(0.99);
      }

      .suggestion-chip__icon {
        font-size: var(--text-lg);
        width: 24px;
        text-align: center;
        position: relative;
        z-index: 1;
      }

      .suggestion-chip span:last-child {
        position: relative;
        z-index: 1;
      }

      /* ============================================
   8. MESSAGES CONTAINER
   ============================================ */
      .messages-container {
        display: flex;
        flex-direction: column;
        gap: var(--space-4);
        padding: var(--space-3) var(--space-3) var(--space-6);
        width: 100%;
        min-width: 0;
        overflow: visible;
      }

      /* ============================================
   9. MESSAGE GROUPS
   ============================================ */
      .message-group {
        display: flex;
        animation: messageEntrance 0.6s var(--ease-out-expo);
        will-change: transform, opacity;
      }

      @keyframes messageEntrance {
        0% {
          opacity: 0;
          transform: translateY(24px) scale(0.95);
          filter: blur(3px);
        }
        50% {
          opacity: 0.7;
          transform: translateY(-2px) scale(1.005);
          filter: blur(0.5px);
        }
        70% {
          transform: translateY(1px) scale(0.998);
        }
        100% {
          opacity: 1;
          transform: translateY(0) scale(1);
          filter: blur(0);
        }
      }

      .message-group.user {
        justify-content: flex-end;
      }

      .message-group.bot {
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        overflow: hidden;
      }

      /* ============================================
   10. MESSAGE BUBBLES
   ============================================ */
      .message {
        max-width: 85%;
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-xl);
        word-wrap: break-word;
        line-height: 1.65;
        font-size: var(--text-base);
        position: relative;
      }

      /* User Message */
      .message.user-msg {
        max-width: 82%;
        word-break: break-word;
        overflow-wrap: break-word;
        background: linear-gradient(
          135deg,
          var(--brand-primary),
          var(--brand-primary-dark)
        );
        color: var(--text-inverse);
        border-radius: 1.25rem 1.25rem 0.375rem 1.25rem;
        box-shadow:
          0 4px 16px var(--brand-glow-subtle),
          0 0 30px rgba(215, 230, 198, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.15);
        animation: userBubblePop 0.6s var(--ease-out-back);
        overflow: hidden;
      }

      @keyframes userBubblePop {
        0% {
          opacity: 0;
          transform: scale(0.6) translateX(40px);
          filter: blur(4px);
        }
        40% {
          opacity: 0.8;
          transform: scale(1.05) translateX(-4px);
          filter: blur(0);
        }
        60% {
          transform: scale(0.98) translateX(1px);
        }
        80% {
          transform: scale(1.01) translateX(0);
        }
        100% {
          opacity: 1;
          transform: scale(1) translateX(0);
        }
      }

      .message.user-msg:hover {
        box-shadow:
          0 6px 24px var(--brand-glow),
          0 0 40px rgba(215, 230, 198, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transform: translateX(-2px);
        transition: all 0.3s var(--ease-out-expo);
      }

      .message.user-msg::after {
        content: "";
        position: absolute;
        top: 0;
        left: -150%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.12),
          transparent
        );
        animation: userShimmer 3s ease-in-out infinite;
      }

      @keyframes userShimmer {
        0% {
          left: -150%;
          opacity: 0;
        }
        20% {
          opacity: 1;
        }
        50% {
          left: 150%;
          opacity: 0;
        }
        100% {
          left: 150%;
          opacity: 0;
        }
      }

      /* Bot Message */
      .message.bot-msg {
        max-width: 100%;
        width: 100%;
        min-width: 0;
        background: transparent;
        backdrop-filter: none;
        border: none;
        color: var(--text-primary);
        border-radius: 0;
        box-shadow: none;
        padding: var(--space-1) var(--space-2);
        animation: botBubbleFade 0.5s var(--ease-out-expo);
        transition: all var(--duration-normal) var(--ease-in-out-smooth);
        overflow-wrap: break-word;
        word-break: break-word;
        overflow: hidden;
      }

      @keyframes botBubbleFade {
        0% {
          opacity: 0;
          transform: translateY(12px) translateX(-8px);
          filter: blur(2px);
        }
        50% {
          opacity: 0.7;
          filter: blur(0);
        }
        70% {
          transform: translateY(-1px) translateX(0);
        }
        100% {
          opacity: 1;
          transform: translateY(0) translateX(0);
        }
      }

      .message.bot-msg:hover {
        background: rgba(215, 230, 198, 0.04);
        box-shadow: -3px 0 0 0 rgba(168, 201, 142, 0.2);
        transition: all 0.3s var(--ease-out-expo);
      }

      /* ============================================
         11. RISK VERDICT PLATE (ticket mode)
         One card, one verdict. The left rail is the risk meter: quiet
         sage while the outcome is unknown, semantic once it settles.
         ============================================ */
      .classification-message {
        position: relative;
        width: 100%;
        padding: var(--space-4) var(--space-4) var(--space-3)
          calc(var(--space-4) + 6px);
        border: 1px solid var(--line);
        border-radius: 20px;
        background: var(--card);
        box-shadow: var(--shadow-card);
        overflow: hidden;
        animation: verdictArrive var(--t-slow) var(--ease-out) both;
      }
      .classification-message::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
        opacity: 0.45;
        transition:
          opacity var(--t-slow) var(--ease-out),
          background var(--t-slow) var(--ease-out);
      }
      .classification-message.is-settled::before {
        opacity: 1;
      }
      .classification-message[data-risk="high"]::before {
        background: linear-gradient(180deg, #d3a05a, var(--risk-high));
      }
      .classification-message[data-risk="review"]::before {
        background: linear-gradient(180deg, #d3a05a, var(--risk-high));
      }
      .classification-message[data-risk="unknown"]::before {
        background: var(--line);
      }
      .classification-message[data-risk="clean"]::before {
        background: linear-gradient(180deg, var(--brand-500), var(--risk-clean));
      }

      .classification-message__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        margin-bottom: var(--space-3);
      }
      .classification-message__eyebrow {
        color: var(--text-label);
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        white-space: nowrap;
      }
      .classification-message__login {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border: 1px solid var(--line);
        border-radius: var(--radius-full);
        background: var(--paper);
        color: var(--ink-2);
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.02em;
        white-space: nowrap;
        animation: chipIn var(--t-base) var(--ease-out) both;
      }

      .classification-message__label {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        color: var(--ink);
        font-size: var(--text-xl);
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.015em;
        overflow-wrap: anywhere;
        animation: verdictIn var(--t-slow) var(--ease-out) both;
      }
      .classification-message__dot {
        width: 9px;
        height: 9px;
        flex: 0 0 9px;
        border-radius: 50%;
        background: var(--sage-600);
        box-shadow: 0 0 0 4px var(--risk-clean-soft);
        animation: dotPop var(--t-slow) var(--ease-settle) both;
      }
      .classification-message__dot[data-risk="high"] {
        background: var(--risk-high);
        box-shadow: 0 0 0 4px var(--risk-high-soft);
      }
      .classification-message__dot[data-risk="review"] {
        background: var(--risk-high);
        box-shadow: 0 0 0 4px var(--risk-high-soft);
      }
      .classification-message__dot[data-risk="unknown"] {
        background: var(--text-label);
        box-shadow: 0 0 0 4px var(--paper);
      }

      /* Three dots, one jump each, in sequence — the only motion that
         runs while the classifier works. */
      .classification-message__thinking {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        min-height: 28px;
        color: var(--ink-2);
        font-size: var(--text-sm);
      }
      .classification-message__thinking-dots {
        display: inline-flex;
        align-items: flex-end;
        gap: 4px;
        height: 10px;
      }
      .classification-message__thinking-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--sage-600);
        opacity: 0.5;
        animation: dotJump 1.2s var(--ease-out) infinite;
      }
      .classification-message__thinking-dot:nth-child(2) {
        animation-delay: 0.11s;
      }
      .classification-message__thinking-dot:nth-child(3) {
        animation-delay: 0.22s;
      }
      .classification-message.is-settled .classification-message__thinking-dot {
        animation: none;
      }
      .classification-message__thinking-timer {
        color: var(--text-label);
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        font-variant-numeric: tabular-nums;
      }

      .classification-message__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        width: 100%;
        min-height: 44px;
        margin-top: var(--space-3);
        padding: var(--space-2) 0 0;
        border: 0;
        background: transparent;
        color: var(--sage-700);
        font: inherit;
        font-size: var(--text-sm);
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        transition:
          color var(--t-quick) ease,
          transform var(--t-press) var(--ease-out);
      }
      .classification-message__toggle:hover {
        color: var(--ink);
        text-decoration: none;
      }
      .classification-message__toggle:active {
        transform: scale(0.99);
      }
      .classification-message__toggle-icon {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
        transition: transform var(--t-base) var(--ease-out);
      }
      .classification-message__toggle-icon svg {
        display: block;
        width: 100%;
        height: 100%;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .classification-message__toggle[aria-expanded="true"]
        .classification-message__toggle-icon {
        transform: rotate(180deg);
      }

      .classification-message__details[hidden] {
        display: none;
      }
      .classification-message__details {
        display: grid;
        grid-template-rows: 0fr;
        overflow: hidden;
        transition: grid-template-rows var(--t-slow) var(--ease-out);
      }
      .classification-message__details.is-open {
        grid-template-rows: 1fr;
      }
      .classification-message__details-inner {
        min-height: 0;
        overflow: hidden;
        margin-top: var(--space-3);
        padding-top: var(--space-3);
        border-top: 1px solid var(--line);
        color: var(--ink-2);
        font-size: var(--text-sm);
        line-height: 1.7;
        overflow-wrap: anywhere;
      }
      .classification-message__details h4 {
        margin: var(--space-3) 0 var(--space-1);
        color: var(--text-label);
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .classification-message__details-inner > h4:first-child,
      .classification-message__details-inner > p:first-child + h4 {
        margin-top: 0;
      }
      .classification-message__details p {
        margin: 0 0 var(--space-2);
        white-space: pre-line;
      }
      .classification-message__details ul {
        margin: var(--space-1) 0 var(--space-3);
        padding: 0;
        list-style: none;
      }
      .classification-message__details li {
        position: relative;
        padding-left: var(--space-4);
        color: var(--ink-2);
        font-family: var(--font-mono);
        font-size: 0.75rem;
        line-height: 1.6;
      }
      .classification-message__details li::before {
        content: "";
        position: absolute;
        left: 1px;
        top: 0.72em;
        width: 6px;
        height: 1px;
        background: var(--brand-500);
      }
      .classification-message__details li + li {
        margin-top: 2px;
      }
      .classification-message__explanation {
        white-space: pre-line;
      }
      .classification-message__explanation--report {
        white-space: normal;
      }

      .classification-message__score-head {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-3);
      }
      .classification-message__score-head h4 {
        margin: 0;
      }
      .classification-message__score-compact {
        display: inline-flex;
        align-items: baseline;
        gap: 2px;
        color: var(--ink);
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
      }
      .classification-message__score-value {
        font-size: var(--text-sm);
        font-weight: 600;
      }
      .classification-message__score-suffix {
        color: var(--text-label);
        font-size: 0.625rem;
      }
      .classification-message__meter {
        display: block;
        height: 4px;
        margin: var(--space-2) 0 var(--space-3);
        border-radius: var(--radius-full);
        background: rgba(24, 44, 15, 0.08);
        overflow: hidden;
      }
      .classification-message__meter-bar {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, var(--brand-500), var(--risk-high));
        transform: scaleX(var(--ratio, 0));
        transform-origin: left center;
      }
      .classification-message__meter-bar[data-risk="clean"] {
        background: linear-gradient(90deg, var(--brand-400), var(--risk-clean));
      }
      .classification-message__details.is-open .classification-message__meter-bar {
        animation: meterFill 900ms var(--ease-out) both;
      }
      @keyframes meterFill {
        from {
          transform: scaleX(0);
        }
        to {
          transform: scaleX(var(--ratio, 0));
        }
      }

      .classification-message__status {
        margin: var(--space-2) 0 0;
        color: var(--text-label);
        font-size: var(--text-sm);
      }
      .classification-message__error {
        margin-top: var(--space-3);
        padding: var(--space-3);
        border: 1px solid rgba(162, 98, 29, 0.28);
        border-radius: 14px;
        background: var(--risk-high-soft);
        animation: verdictIn var(--t-base) var(--ease-out) both;
      }
      .classification-message__error-text {
        margin: 0 0 var(--space-3);
        color: var(--ink-2);
        font-size: var(--text-sm);
      }
      .classification-message__retry {
        min-height: 36px;
        padding: 6px 16px;
        border: 1px solid rgba(162, 98, 29, 0.35);
        border-radius: var(--radius-full);
        background: var(--surface-primary);
        color: var(--risk-high);
        font-family: inherit;
        font-size: var(--text-sm);
        font-weight: 600;
        cursor: pointer;
        transition:
          background var(--t-quick) ease,
          transform var(--t-press) var(--ease-out);
      }
      .classification-message__retry:hover {
        background: rgba(162, 98, 29, 0.08);
      }
      .classification-message__retry:active:not(:disabled) {
        transform: scale(0.97);
      }
      .classification-message__retry:disabled {
        opacity: 0.6;
        cursor: default;
      }
      .classification-message__label[hidden],
      .classification-message__login[hidden],
      .classification-message__toggle[hidden],
      .classification-message__thinking[hidden],
      .classification-message__status[hidden],
      .classification-message__error[hidden],
      .classification-message__head[hidden] {
        display: none;
      }

      @keyframes verdictArrive {
        from {
          opacity: 0;
          transform: translateY(10px) scale(0.985);
          filter: blur(3px);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
          filter: blur(0);
        }
      }
      @keyframes verdictIn {
        from {
          opacity: 0;
          transform: translateY(6px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @keyframes dotPop {
        from {
          opacity: 0;
          transform: scale(0.4);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      @keyframes dotJump {
        0%,
        62%,
        100% {
          transform: translateY(0) scale(0.85);
          opacity: 0.5;
        }
        24% {
          transform: translateY(-6px) scale(1.05);
          opacity: 1;
        }
      }
      @keyframes chipIn {
        from {
          opacity: 0;
          transform: translateY(-2px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .classification-message,
        .classification-message__label,
        .classification-message__login,
        .classification-message__dot,
        .classification-message__error {
          animation: none;
        }
        .classification-message__thinking-dot {
          animation: none;
          opacity: 0.8;
        }
        .classification-message__thinking-dot:nth-child(2) {
          opacity: 0.6;
        }
        .classification-message__thinking-dot:nth-child(3) {
          opacity: 0.45;
        }
        .classification-message__details,
        .classification-message__meter-bar {
          transition: none;
        }
        .classification-message__details.is-open .classification-message__meter-bar {
          animation: none;
        }
      }

      /* Bot Message Typography */
      .message.bot-msg h1,
      .message.bot-msg h2,
      .message.bot-msg h3,
      .message.bot-msg h4 {
        margin-top: var(--space-4);
        margin-bottom: var(--space-2);
        font-weight: 600;
        color: var(--text-primary);
      }

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

      .message.bot-msg h1 {
        font-size: var(--text-xl);
      }
      .message.bot-msg h2 {
        font-size: var(--text-lg);
      }
      .message.bot-msg h3 {
        font-size: var(--text-base);
      }

      .message.bot-msg p {
        margin-bottom: var(--space-3);
        line-height: 1.7;
      }

      .message.bot-msg p:last-child {
        margin-bottom: 0;
      }

      .message.bot-msg ul,
      .message.bot-msg ol {
        margin: var(--space-3) 0;
        padding-left: var(--space-6);
      }

      .message.bot-msg li {
        margin-bottom: var(--space-2);
      }

      .message.bot-msg strong {
        font-weight: 600;
        color: var(--text-primary);
      }

      .message.bot-msg em {
        font-style: italic;
        color: var(--text-secondary);
      }

      .message.bot-msg a {
        color: var(--brand-primary-dark);
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color var(--duration-fast);
      }

      .message.bot-msg a:hover {
        color: var(--brand-primary);
      }

      .message.bot-msg code {
        background: var(--surface-tertiary);
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-sm);
        font-family: var(--font-mono);
        font-size: 0.88em;
        color: var(--brand-primary-dark);
      }

      .message.bot-msg pre {
        background: var(--surface-tertiary);
        padding: var(--space-3);
        border-radius: var(--radius-lg);
        overflow-x: auto;
        max-width: 100%;
        margin: var(--space-3) 0;
        border: 1px solid var(--border-default);
        font-size: var(--text-xs);
        -webkit-overflow-scrolling: touch;
      }

      .message.bot-msg pre code {
        background: transparent;
        padding: 0;
        color: var(--text-primary);
      }

      .message.bot-msg blockquote {
        border-left: 3px solid var(--brand-primary);
        padding-left: var(--space-4);
        margin: var(--space-4) 0;
        color: var(--text-secondary);
        font-style: italic;
      }

      .message.bot-msg table {
        display: block;
        width: max-content;
        max-width: 100%;
        overflow-x: auto;
        border-collapse: collapse;
        margin: var(--space-3) 0;
        font-size: var(--text-xs);
        -webkit-overflow-scrolling: touch;
      }

      .message.bot-msg th,
      .message.bot-msg td {
        border: 1px solid var(--border-default);
        padding: var(--space-1) var(--space-2);
        text-align: left;
        vertical-align: top;
        white-space: nowrap;
      }

      .message.bot-msg th {
        background: rgba(215, 230, 198, 0.28);
        color: var(--text-primary);
        font-weight: 600;
      }

      .message.bot-msg tbody tr:nth-child(even) {
        background: rgba(215, 230, 198, 0.08);
      }

      /* ============================================
   11. THINKING BLOCK - ChatGPT-Style
   ============================================ */
      .thinking-block-wrapper {
        max-width: 100%;
        width: 100%;
        animation: thinkingEnter 0.5s var(--ease-out-expo);
        will-change: transform, opacity;
      }

      @keyframes thinkingEnter {
        0% {
          opacity: 0;
          transform: translateY(20px) scale(0.93);
          filter: blur(5px);
        }
        40% {
          opacity: 0.6;
          filter: blur(1px);
        }
        70% {
          transform: translateY(-2px) scale(1.005);
        }
        100% {
          opacity: 1;
          transform: translateY(0) scale(1);
          filter: blur(0);
        }
      }

      .thinking-block {
        border-radius: var(--radius-xl);
        overflow: hidden;
        transition: all 0.4s var(--ease-out-expo);
      }

      /* Thinking Header - Collapsible Toggle */
      .thinking-block__header {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding: 10px 14px;
        background: rgba(215, 230, 198, 0.08);
        border: 1px solid rgba(215, 230, 198, 0.15);
        border-radius: var(--radius-xl);
        cursor: pointer;
        transition: all 0.25s var(--ease-in-out-smooth);
        user-select: none;
        position: relative;
        overflow: hidden;
      }

      .thinking-block__header::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(215, 230, 198, 0.06),
          transparent
        );
        animation: headerShimmer 2.5s ease-in-out infinite;
        pointer-events: none;
      }

      @keyframes headerShimmer {
        0% {
          transform: translateX(-100%);
          opacity: 0;
        }
        40% {
          opacity: 1;
        }
        100% {
          transform: translateX(100%);
          opacity: 0;
        }
      }

      .thinking-block__header:not(.completed) {
        animation: thinkingBreathe 2s ease-in-out infinite;
      }

      @keyframes thinkingBreathe {
        0%, 100% {
          box-shadow: 0 0 0 0 rgba(215, 230, 198, 0);
          border-color: rgba(215, 230, 198, 0.15);
        }
        50% {
          box-shadow: 0 0 15px rgba(215, 230, 198, 0.1);
          border-color: rgba(215, 230, 198, 0.3);
        }
      }

      .thinking-block__header:hover {
        background: rgba(215, 230, 198, 0.12);
        border-color: rgba(215, 230, 198, 0.25);
      }

      .thinking-block__header.completed {
        background: rgba(215, 230, 198, 0.05);
        border-color: rgba(215, 230, 198, 0.1);
      }

      .thinking-block__header.completed::before {
        animation: none;
        display: none;
      }

      /* Chevron */
      .thinking-block__chevron {
        width: 16px;
        height: 16px;
        color: var(--brand-primary-dark);
        transition: transform 0.3s var(--ease-spring);
        flex-shrink: 0;
      }

      .thinking-block.expanded .thinking-block__chevron {
        transform: rotate(90deg);
      }

      /* Sparkle Icon with Animation */
      .thinking-block__sparkle {
        width: 18px;
        height: 18px;
        color: var(--brand-primary);
        flex-shrink: 0;
        animation: sparkleRotate 3s linear infinite;
      }

      .thinking-block__header.completed .thinking-block__sparkle {
        animation: none;
        color: var(--brand-primary);
      }

      @keyframes sparkleRotate {
        0% {
          transform: rotate(0deg) scale(1);
          filter: drop-shadow(0 0 0 transparent);
        }
        25% {
          transform: rotate(90deg) scale(1.15);
          filter: drop-shadow(0 0 3px rgba(168, 201, 142, 0.4));
        }
        50% {
          transform: rotate(180deg) scale(0.95);
          filter: drop-shadow(0 0 1px rgba(168, 201, 142, 0.2));
        }
        75% {
          transform: rotate(270deg) scale(1.1);
          filter: drop-shadow(0 0 4px rgba(168, 201, 142, 0.5));
        }
        100% {
          transform: rotate(360deg) scale(1);
          filter: drop-shadow(0 0 0 transparent);
        }
      }

      /* Title */
      .thinking-block__title {
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--text-brand);
        flex: 1;
        line-height: 1.4;
      }

      /* Spinner */
      .thinking-block__spinner {
        width: 15px;
        height: 15px;
        border: 2px solid rgba(215, 230, 198, 0.2);
        border-top-color: var(--brand-primary);
        border-radius: 50%;
        animation: spin 0.7s linear infinite;
        flex-shrink: 0;
      }

      .thinking-block__header.completed .thinking-block__spinner {
        display: none;
      }

      /* Duration badge */
      .thinking-block__duration {
        font-size: 11px;
        color: var(--text-tertiary);
        font-weight: 500;
        background: rgba(215, 230, 198, 0.08);
        padding: 2px 8px;
        border-radius: var(--radius-full);
      }

      /* Checkmark for completed */
      .thinking-block__check {
        width: 16px;
        height: 16px;
        color: var(--brand-primary);
        display: none;
      }

      .thinking-block__header.completed .thinking-block__check {
        display: block;
        animation: checkPop 0.4s var(--ease-out-back);
      }

      @keyframes checkPop {
        0% {
          transform: scale(0) rotate(-45deg);
          opacity: 0;
        }
        50% {
          transform: scale(1.3) rotate(5deg);
        }
        70% {
          transform: scale(0.9) rotate(-2deg);
        }
        100% {
          transform: scale(1) rotate(0deg);
          opacity: 1;
        }
      }

      /* Collapsible Content */
      .thinking-block__content {
        max-height: 0;
        overflow: hidden;
        transition:
          max-height 0.4s var(--ease-out-expo),
          opacity 0.3s;
        opacity: 0;
      }

      .thinking-block.expanded .thinking-block__content {
        max-height: 600px;
        opacity: 1;
      }

      .thinking-block__inner {
        padding: var(--space-3) var(--space-4);
        margin-top: var(--space-2);
        background: rgba(215, 230, 198, 0.04);
        border-radius: var(--radius-lg);
        border-left: 3px solid var(--brand-primary);
      }

      /* Thinking Steps */
      .thinking-step {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: 8px 0;
        font-size: var(--text-sm);
        color: var(--text-tertiary);
        transition: all 0.35s var(--ease-out-expo);
        position: relative;
      }

      .thinking-step + .thinking-step {
        border-top: 1px solid rgba(0, 0, 0, 0.03);
      }

      .thinking-step.active {
        color: var(--text-brand);
      }

      .thinking-step.complete {
        color: var(--text-secondary);
        animation: stepComplete 0.4s var(--ease-out-back);
      }

      @keyframes stepComplete {
        0% {
          background: rgba(215, 230, 198, 0.15);
        }
        50% {
          background: rgba(215, 230, 198, 0.08);
        }
        100% {
          background: transparent;
        }
      }

      /* Step icon container */
      .thinking-step__icon-wrap {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.35s var(--ease-out-expo);
        background: rgba(215, 230, 198, 0.08);
        border: 1.5px solid rgba(215, 230, 198, 0.15);
      }

      .thinking-step.active .thinking-step__icon-wrap {
        background: rgba(215, 230, 198, 0.15);
        border-color: var(--brand-primary);
        animation: stepIconPulse 1.5s ease-in-out infinite;
      }

      .thinking-step.complete .thinking-step__icon-wrap {
        background: var(--brand-primary);
        border-color: var(--brand-primary);
      }

      @keyframes stepIconPulse {
        0%, 100% {
          box-shadow: 0 0 0 0 rgba(215, 230, 198, 0.4);
          transform: scale(1);
        }
        50% {
          box-shadow: 0 0 0 8px rgba(215, 230, 198, 0);
          transform: scale(1.05);
        }
      }

      .thinking-step__icon-wrap svg {
        width: 12px;
        height: 12px;
      }

      .thinking-step.active .thinking-step__icon-wrap svg {
        color: var(--brand-primary-dark);
      }

      .thinking-step.complete .thinking-step__icon-wrap svg {
        color: white;
      }

      .thinking-step__icon-wrap .step-spinner {
        width: 12px;
        height: 12px;
        border: 1.5px solid rgba(215, 230, 198, 0.2);
        border-top-color: var(--brand-primary-dark);
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
        display: none;
      }

      .thinking-step.active .thinking-step__icon-wrap .step-spinner {
        display: block;
      }

      .thinking-step.active .thinking-step__icon-wrap .step-check {
        display: none;
      }

      .thinking-step.complete .thinking-step__icon-wrap .step-spinner {
        display: none;
      }

      .thinking-step.complete .thinking-step__icon-wrap .step-check {
        display: block;
      }

      .thinking-step__icon-wrap .step-check {
        display: none;
      }

      /* Step waiting state (default) */
      .thinking-step:not(.active):not(.complete)
        .thinking-step__icon-wrap
        .step-spinner,
      .thinking-step:not(.active):not(.complete)
        .thinking-step__icon-wrap
        .step-check {
        display: none;
      }

      .thinking-step:not(.active):not(.complete)
        .thinking-step__icon-wrap::after {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(215, 230, 198, 0.3);
      }

      .thinking-step__text {
        font-weight: 500;
        line-height: 1.4;
      }

      .thinking-step.active .thinking-step__text {
        font-weight: 600;
      }

      /* ============================================
   12. TYPING INDICATOR
   ============================================ */
      .typing-indicator {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur-sm);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-xl);
        width: fit-content;
        box-shadow: var(--glass-shadow);
        margin-top: var(--space-2);
        animation: typingGlow 2s ease-in-out infinite;
      }

      @keyframes typingGlow {
        0%, 100% {
          box-shadow: var(--glass-shadow);
        }
        50% {
          box-shadow: var(--glass-shadow), 0 0 15px rgba(215, 230, 198, 0.12);
        }
      }

      .typing-indicator__dots {
        display: flex;
        gap: 4px;
      }

      .typing-dot {
        width: 7px;
        height: 7px;
        background: linear-gradient(
          135deg,
          var(--brand-primary-light),
          var(--brand-primary)
        );
        border-radius: 50%;
        animation: typingBounce 1.4s ease-in-out infinite;
      }

      .typing-dot:nth-child(1) {
        animation-delay: 0s;
      }
      .typing-dot:nth-child(2) {
        animation-delay: 0.15s;
      }
      .typing-dot:nth-child(3) {
        animation-delay: 0.3s;
      }

      @keyframes typingBounce {
        0%, 60%, 100% {
          opacity: 0.25;
          transform: translateY(0) scale(0.7);
        }
        15% {
          opacity: 0.6;
          transform: translateY(-6px) scale(0.9);
        }
        30% {
          opacity: 1;
          transform: translateY(-10px) scale(1.05);
        }
        45% {
          opacity: 0.8;
          transform: translateY(-4px) scale(0.95);
        }
      }

      .typing-text {
        font-size: var(--text-sm);
        color: var(--text-secondary);
        font-weight: 500;
        min-width: 0;
        animation: textFade 2s ease-in-out infinite;
      }

      @keyframes textFade {
        0%,
        100% {
          opacity: 0.65;
        }
        50% {
          opacity: 1;
        }
      }

      /* ============================================
   14. SKELETON LOADING
   ============================================ */
      .skeleton {
        background: linear-gradient(
          90deg,
          var(--surface-tertiary) 0%,
          var(--surface-secondary) 50%,
          var(--surface-tertiary) 100%
        );
        background-size: 200% 100%;
        animation: skeletonShimmer 1.5s ease-in-out infinite;
        border-radius: var(--radius-md);
      }

      @keyframes skeletonShimmer {
        0% {
          background-position: 200% 0;
          opacity: 0.7;
        }
        50% {
          opacity: 1;
        }
        100% {
          background-position: -200% 0;
          opacity: 0.7;
        }
      }

      /* ============================================
   15. METADATA PANEL
   ============================================ */
      .metadata-panel {
        margin-top: var(--space-4);
        padding: var(--space-4);
        background: var(--surface-tertiary);
        border-left: 3px solid var(--brand-primary);
        border-radius: var(--radius-lg);
        font-size: var(--text-sm);
      }

      .metadata-panel h3 {
        color: var(--brand-primary-dark);
        font-size: var(--text-sm);
        font-weight: 600;
        margin-bottom: var(--space-3);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .metadata-panel pre {
        margin: var(--space-2) 0;
        background: var(--surface-primary);
        padding: var(--space-3);
        border-radius: var(--radius-md);
        overflow-x: auto;
        font-size: var(--text-xs);
      }

      .metadata-panel code {
        font-size: 0.85em;
      }

      /* ============================================
   16. CHAT INPUT FOOTER
   ============================================ */
      .chat-footer {
        position: sticky;
        bottom: 0;
        z-index: var(--z-sticky);
        padding: var(--space-2) var(--space-3) var(--space-4);
        background: linear-gradient(
          180deg,
          transparent,
          var(--surface-secondary) 30%
        );
        flex-shrink: 0;
      }

      .chat-footer__inner {
        width: 100%;
        min-width: 0;
      }

      .message-composer__wrapper {
        display: flex;
        align-items: flex-end;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur-md);
        border: 1.5px solid var(--glass-border);
        border-radius: var(--radius-2xl);
        box-shadow: var(--glass-shadow);
        transition: all 0.25s var(--ease-out-expo);
        min-width: 0;
      }

      .message-composer__wrapper:focus-within {
        border-color: var(--brand-primary);
        box-shadow:
          var(--glass-shadow),
          0 0 0 4px var(--brand-glow-subtle),
          0 0 30px rgba(215, 230, 198, 0.08);
        background: var(--glass-bg-hover);
        transform: translateY(-1px);
      }

      .message-composer__input {
        flex: 1;
        padding: var(--space-2) 0;
        border: none;
        background: transparent;
        font-family: var(--font-sans);
        font-size: var(--text-base);
        color: var(--text-primary);
        line-height: 1.5;
        resize: none;
        min-height: 24px;
        max-height: 120px;
      }

      .message-composer__input:focus {
        outline: none;
      }

      .message-composer__input::placeholder {
        color: var(--text-tertiary);
      }

      /* Send Button */
      .send-button {
        width: 40px;
        height: 40px;
        border: none;
        border-radius: var(--radius-lg);
        background: linear-gradient(
          135deg,
          var(--brand-primary),
          var(--brand-primary-dark)
        );
        color: var(--text-inverse);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s var(--ease-spring);
        flex-shrink: 0;
        box-shadow: 0 4px 14px var(--brand-glow-subtle);
        position: relative;
        overflow: hidden;
      }

      .send-button::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          transparent,
          rgba(255, 255, 255, 0.15)
        );
        opacity: 0;
        transition: opacity 0.2s;
      }

      .send-button:hover:not(:disabled)::after {
        opacity: 1;
      }

      .send-button svg {
        width: 18px;
        height: 18px;
        position: relative;
        z-index: 1;
        transition: transform 0.2s var(--ease-spring);
      }

      .send-button:hover:not(:disabled) {
        transform: translateY(-2px) scale(1.06);
        box-shadow: 0 8px 24px var(--brand-glow);
      }

      .send-button:hover:not(:disabled) svg {
        transform: translate(1px, -1px);
      }

      .send-button:active:not(:disabled) {
        transform: translateY(0) scale(0.94);
      }

      .send-button:disabled {
        opacity: 0.35;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }

      /* Disclaimer */
      .chat-footer__disclaimer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        margin-top: var(--space-3);
        font-size: var(--text-xs);
        color: var(--text-tertiary);
      }

      .chat-footer__disclaimer-icon {
        font-size: var(--text-sm);
      }

      /* ============================================
   17. ACCESS DENIED OVERLAY
   ============================================ */
      .access-denied-overlay {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: var(--space-8);
        background: linear-gradient(
          135deg,
          var(--surface-secondary) 0%,
          var(--surface-primary) 50%,
          var(--brand-50) 100%
        );
      }

      .access-denied-overlay::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(
            circle at 30% 20%,
            rgba(215, 230, 198, 0.1) 0%,
            transparent 50%
          ),
          radial-gradient(
            circle at 70% 80%,
            rgba(168, 201, 142, 0.08) 0%,
            transparent 50%
          );
        animation: pulseBackground 8s ease-in-out infinite;
      }

      @keyframes pulseBackground {
        0%,
        100% {
          opacity: 0.5;
          transform: scale(1);
        }
        50% {
          opacity: 0.8;
          transform: scale(1.05);
        }
      }

      .access-denied-card {
        position: relative;
        z-index: 1;
        background: var(--glass-bg);
        backdrop-filter: var(--glass-blur-lg);
        border: 1px solid var(--glass-border);
        border-radius: var(--radius-2xl);
        padding: var(--space-10) var(--space-12);
        box-shadow: var(--glass-shadow-elevated);
        animation: cardSlideUp 0.6s var(--ease-out-expo);
      }

      @keyframes cardSlideUp {
        from {
          opacity: 0;
          transform: translateY(40px) scale(0.95);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .access-denied-icon {
        width: 72px;
        height: 72px;
        margin: 0 auto var(--space-6);
        background: linear-gradient(
          135deg,
          var(--brand-primary),
          var(--brand-primary-dark)
        );
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 32px var(--brand-glow-subtle);
      }

      .access-denied-icon svg {
        width: 32px;
        height: 32px;
        color: white;
      }

      .access-denied-title {
        font-size: var(--text-2xl);
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: var(--space-2);
      }

      .access-denied-subtitle {
        font-size: var(--text-base);
        color: var(--text-secondary);
        margin-bottom: var(--space-6);
        line-height: 1.6;
      }

      .access-denied-code {
        display: inline-block;
        padding: var(--space-2) var(--space-4);
        background: var(--brand-50);
        border: 1px solid var(--brand-200);
        border-radius: var(--radius-full);
        font-size: var(--text-xs);
        color: var(--brand-primary-dark);
        font-weight: 600;
        letter-spacing: 0.05em;
      }

      /* ============================================
   18. VISUALIZATION STYLES
   ============================================ */
      .visualization-container {
        margin-top: var(--space-4);
        padding: var(--space-4);
        background: var(--surface-tertiary);
        border-radius: var(--radius-lg);
      }

      .visualization-title {
        font-size: var(--text-base);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--space-3);
      }

      .table-wrapper {
        overflow-x: auto;
      }

      .data-table {
        width: 100%;
        border-collapse: collapse;
        background: var(--surface-primary);
        border-radius: var(--radius-lg);
        overflow: hidden;
      }

      .data-table thead {
        background: linear-gradient(
          135deg,
          var(--brand-primary),
          var(--brand-primary-dark)
        );
        color: var(--text-inverse);
      }

      .data-table th {
        padding: var(--space-3) var(--space-4);
        text-align: left;
        font-weight: 600;
        font-size: var(--text-sm);
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }

      .data-table td {
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--border-default);
        font-size: var(--text-sm);
      }

      .data-table tbody tr:last-child td {
        border-bottom: none;
      }

      .data-table tbody tr {
        transition: background 0.15s;
      }

      .data-table tbody tr:hover {
        background: var(--surface-secondary);
      }

      /* Pagination */
      .pagination-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        margin-top: var(--space-4);
        padding: var(--space-3);
        background: var(--surface-primary);
        border-radius: var(--radius-lg);
        flex-wrap: wrap;
      }

      .pagination-btn {
        padding: var(--space-2) var(--space-4);
        background: var(--surface-secondary);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--duration-fast) var(--ease-in-out-smooth);
      }

      .pagination-btn:hover:not(:disabled) {
        background: var(--brand-primary);
        color: var(--text-inverse);
        border-color: var(--brand-primary);
      }

      .pagination-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
      }

      .pagination-numbers {
        display: flex;
        gap: var(--space-1);
      }

      .pagination-page {
        min-width: 36px;
        height: 36px;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        background: var(--surface-primary);
        font-size: var(--text-sm);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--duration-fast);
      }

      .pagination-page:hover {
        border-color: var(--brand-primary);
        background: var(--brand-50);
      }

      .pagination-page.active {
        background: var(--brand-primary);
        color: var(--text-inverse);
        border-color: var(--brand-primary);
      }

      .pagination-info {
        width: 100%;
        text-align: center;
        font-size: var(--text-xs);
        color: var(--text-tertiary);
        margin-top: var(--space-2);
      }

      /* ============================================
   19. SCROLL TO BOTTOM BUTTON
   ============================================ */
      .scroll-bottom-btn {
        position: fixed;
        bottom: 100px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        opacity: 0;
        pointer-events: none;
        z-index: var(--z-elevated);
        width: 38px;
        height: 38px;
        border: none;
        border-radius: 50%;
        background: var(--glass-bg-solid);
        backdrop-filter: var(--glass-blur-sm);
        box-shadow: var(--glass-shadow-elevated);
        border: 1px solid var(--glass-border);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s var(--ease-out-expo);
      }

      .scroll-bottom-btn.visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
      }

      .scroll-bottom-btn:hover {
        background: var(--brand-primary);
        border-color: var(--brand-primary);
        box-shadow: 0 4px 16px var(--brand-glow);
      }

      .scroll-bottom-btn:hover svg {
        color: white;
      }

      .scroll-bottom-btn svg {
        width: 18px;
        height: 18px;
        color: var(--text-secondary);
        transition: color 0.15s;
      }

      /* ============================================
   20. RESPONSIVE DESIGN
   ============================================ */
      @media (min-width: 768px) {
        .action-btn__label {
          display: inline;
        }
      }

      @media (max-width: 767px) {
        .status-indicator__text {
          display: none;
        }
        .action-btn__label {
          display: none;
        }
        .message-composer__input {
          /* Prevent iOS zoom on focus */
          font-size: 16px;
        }
        .chat-footer__disclaimer {
          display: none;
        }
      }

      @supports (padding-top: env(safe-area-inset-top)) {
        .chat-header {
          padding-top: calc(var(--space-2) + env(safe-area-inset-top));
        }
        .chat-footer {
          padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
        }
      }

      :focus-visible {
        outline: 2px solid var(--brand-primary);
        outline-offset: 2px;
      }

      ::selection {
        background: var(--brand-200);
        color: var(--brand-900);
      }

      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(360deg);
        }
      }

      .preview-mode-banner {
        position: relative;
        z-index: var(--z-elevated);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-2) var(--space-4);
        border-bottom: 1px solid var(--border-brand);
        background: var(--brand-50);
        color: var(--text-secondary);
        font-size: var(--text-xs);
        line-height: 1.5;
      }

      .preview-mode-banner__button {
        flex: 0 0 auto;
        padding: var(--space-1) var(--space-3);
        border: 1px solid var(--brand-600);
        border-radius: var(--radius-full);
        background: var(--surface-primary);
        color: var(--brand-900);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
        transition: background var(--duration-fast) ease, transform var(--duration-fast) ease;
      }

      .preview-mode-banner__button:hover {
        background: var(--brand-100);
      }

      .preview-mode-banner__button:active {
        transform: translateY(1px);
      }

      @media (max-width: 480px) {
        .preview-mode-banner {
          align-items: flex-start;
          font-size: 0.6875rem;
        }

        .preview-mode-banner__button {
          white-space: nowrap;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .preview-mode-banner__button {
          transition: none;
        }
      }
      /* ============================================
         21. RISK MODE - one focused review surface
         A ticket analysis is not a conversation. While a ticket is being
         analysed the composer, the new-chat action, the welcome state and
         every chat message leave the screen; only the current verdict
         plate remains.
         ============================================ */
      body.is-risk-mode .chat-header,
      body.is-risk-mode .chat-footer,
      body.is-risk-mode .scroll-bottom-btn,
      body.is-risk-mode .welcome-state,
      body.is-risk-mode .message-group:not(.message-group--risk) {
        display: none;
      }

      /* The iframe starts here while the parent obtains a fresh ticket. Keep
         the chat surface off screen from the first paint. */
      .risk-pending {
        padding: var(--space-3) var(--space-3) var(--space-6);
      }
      body:not(.is-risk-pending) .risk-pending {
        display: none;
      }
      .risk-pending__card {
        position: relative;
        padding: var(--space-4) var(--space-4) var(--space-3)
          calc(var(--space-4) + 6px);
        border: 1px solid var(--line);
        border-radius: 20px;
        background: var(--card);
        box-shadow: var(--shadow-card);
      }
      .risk-pending__card::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 0;
        width: 4px;
        border-radius: 20px 0 0 20px;
        background: linear-gradient(180deg, var(--brand-400), var(--brand-600));
      }
      .risk-pending__activity {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin-top: var(--space-3);
        min-height: 28px;
        color: var(--ink-2);
        font-size: var(--text-sm);
      }
      .risk-pending__dots {
        display: inline-flex;
        align-items: flex-end;
        gap: 4px;
        height: 10px;
      }
      .risk-pending__dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--sage-600);
        opacity: 0.5;
        animation: dotJump 1.2s var(--ease-out) infinite;
      }
      .risk-pending__dots span:nth-child(2) {
        animation-delay: 0.11s;
      }
      .risk-pending__dots span:nth-child(3) {
        animation-delay: 0.22s;
      }

      .risk-header {
        position: relative;
        z-index: var(--z-sticky);
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        padding: var(--space-3) var(--space-4) var(--space-4);
        background: var(--glass-bg-solid);
        backdrop-filter: var(--glass-blur-lg);
        -webkit-backdrop-filter: var(--glass-blur-lg);
        border-bottom: 1px solid var(--line);
        animation: verdictIn var(--t-base) var(--ease-out) both;
      }
      .risk-header[hidden] {
        display: none;
      }
      .risk-header__inner {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--space-3);
      }
      .risk-header__brand {
        min-width: 0;
      }
      .risk-header__eyebrow {
        display: block;
        color: var(--text-label);
        font-family: var(--font-mono);
        font-size: 0.625rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .risk-header__title {
        margin: 3px 0 0;
        color: var(--ink);
        font-size: var(--text-base);
        font-weight: 600;
        letter-spacing: -0.015em;
        line-height: 1.15;
      }
      .risk-header__login {
        display: inline-flex;
        align-items: center;
        padding: 3px 9px;
        border: 1px solid var(--line);
        border-radius: var(--radius-full);
        background: var(--paper);
        color: var(--ink-2);
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        letter-spacing: 0.02em;
        white-space: nowrap;
        animation: chipIn var(--t-base) var(--ease-out) both;
      }
      .risk-header__login[hidden] {
        display: none;
      }
      .risk-header__status {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin-top: var(--space-2);
        color: var(--ink-2);
        font-size: var(--text-xs);
        line-height: 1.4;
      }
      .risk-header__status-dot {
        width: 7px;
        height: 7px;
        flex: 0 0 7px;
        border-radius: 50%;
        background: var(--brand-500);
        transition: background var(--t-base) ease;
      }
      .risk-header__status-dot[data-state="analyzing"] {
        background: var(--sage-600);
        animation: statusThrob 1.6s var(--ease-in-out-strong) infinite;
      }
      .risk-header__status-dot[data-state="ready"] {
        background: var(--risk-clean);
      }
      .risk-header__status-dot[data-state="error"] {
        background: var(--risk-high);
      }
      .risk-header__track {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        overflow: hidden;
        background: rgba(24, 44, 15, 0.05);
        opacity: 0;
        transition: opacity var(--t-base) ease;
      }
      .risk-header[data-busy="true"] .risk-header__track {
        opacity: 1;
      }
      .risk-header__track-bar {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 36%;
        border-radius: var(--radius-full);
        background: linear-gradient(90deg, var(--brand-400), var(--sage-600));
        transform: translateX(-110%);
      }
      .risk-header[data-busy="true"] .risk-header__track-bar {
        animation: trackSweep 1.6s var(--ease-in-out-strong) infinite;
      }

      @keyframes statusThrob {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.4;
        }
      }
      @keyframes trackSweep {
        from {
          transform: translateX(-110%);
        }
        to {
          transform: translateX(300%);
        }
      }

      /* ============================================
         22. HEADER, COMPOSER & SCROLL POLISH
         ============================================ */
      .chat-header {
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--line);
      }
      .chat-header.scrolled {
        border-bottom-color: var(--line-strong);
        box-shadow: 0 10px 24px -24px rgba(20, 40, 12, 0.9);
      }
      .brand-logo {
        gap: var(--space-2);
      }
      .brand-logo__monogram {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 9px;
        background: linear-gradient(150deg, var(--brand-400), var(--sage-600));
        color: #ffffff;
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        box-shadow: 0 6px 14px -6px rgba(69, 107, 49, 0.7);
      }
      .brand-logo__text {
        font-size: var(--text-base);
        font-weight: 600;
        color: var(--ink);
        letter-spacing: -0.02em;
      }
      .status-indicator {
        padding: 3px 10px;
        border: 1px solid rgba(63, 125, 78, 0.16);
        background: rgba(63, 125, 78, 0.07);
        color: var(--sage-700);
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.02em;
      }
      .status-indicator__dot {
        width: 6px;
        height: 6px;
        background: var(--risk-clean);
        box-shadow: none;
        animation: statusThrob 2.6s var(--ease-in-out-strong) infinite;
      }

      .action-btn {
        padding: 7px 13px;
        border: 1px solid var(--line);
        border-radius: 11px;
        background: var(--card);
        color: var(--ink);
        font-size: var(--text-sm);
        font-weight: 600;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition:
          transform var(--t-press) var(--ease-out),
          border-color var(--t-quick) ease,
          box-shadow var(--t-quick) ease;
      }
      .action-btn:hover {
        background: var(--card);
        border-color: var(--line-strong);
        box-shadow: var(--shadow-card);
        transform: translateY(-1px);
      }
      .action-btn:active {
        transform: scale(0.97);
      }
      .action-btn--primary {
        background: linear-gradient(150deg, var(--brand-500), var(--sage-700));
        border-color: transparent;
        color: #ffffff;
        box-shadow: 0 6px 16px -8px rgba(69, 107, 49, 0.75);
      }
      .action-btn--primary:hover {
        background: linear-gradient(150deg, var(--brand-400), var(--sage-600));
        box-shadow: 0 10px 22px -10px rgba(69, 107, 49, 0.8);
        transform: translateY(-1px);
      }

      .messages-container {
        gap: var(--space-3);
        padding: var(--space-4) var(--space-4) var(--space-6);
      }
      .message-group {
        animation: msgIn var(--t-slow) var(--ease-out) both;
        will-change: auto;
      }
      @keyframes msgIn {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .message {
        max-width: 88%;
        font-size: 0.9375rem;
        line-height: 1.6;
        border-radius: 16px;
      }
      .message.user-msg {
        padding: 10px 14px;
        border-radius: 16px 16px 5px 16px;
        background: linear-gradient(150deg, var(--brand-400), var(--sage-600));
        color: #14260d;
        box-shadow: 0 8px 20px -14px rgba(69, 107, 49, 0.9);
        animation: none;
      }
      .message.bot-msg {
        padding: 12px 14px;
        border: 1px solid var(--line);
        border-radius: 16px 16px 16px 5px;
        background: var(--card);
        color: var(--ink-2);
        box-shadow: var(--shadow-card);
        animation: none;
      }
      .message.bot-msg:hover {
        background: var(--card);
        box-shadow: var(--shadow-card);
        transition: none;
      }

      .chat-footer {
        padding: var(--space-2) var(--space-4) var(--space-4);
        background: linear-gradient(
          180deg,
          rgba(245, 249, 240, 0) 0%,
          var(--paper) 36%
        );
      }
      .message-composer__wrapper {
        padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
        border: 1px solid var(--line);
        border-radius: 18px;
        background: var(--card);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: var(--shadow-card);
        transition:
          border-color var(--t-quick) ease,
          box-shadow var(--t-quick) ease;
      }
      .message-composer__wrapper:focus-within {
        border-color: var(--brand-500);
        background: var(--card);
        box-shadow:
          0 0 0 4px rgba(168, 201, 142, 0.22),
          var(--shadow-card);
        transform: none;
      }
      .message-composer__input {
        font-size: 0.9375rem;
        color: var(--ink);
      }
      .message-composer__input::placeholder {
        color: var(--text-label);
      }
      .send-button {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        background: linear-gradient(150deg, var(--brand-500), var(--sage-700));
        box-shadow: 0 6px 16px -8px rgba(69, 107, 49, 0.75);
        transition:
          transform var(--t-press) var(--ease-out),
          box-shadow var(--t-quick) ease;
      }
      .send-button svg {
        width: 16px;
        height: 16px;
      }
      .send-button:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 10px 22px -10px rgba(69, 107, 49, 0.85);
      }
      .send-button:hover:not(:disabled) svg {
        transform: none;
      }
      .send-button:active:not(:disabled) {
        transform: scale(0.94);
      }
      .send-button:disabled {
        opacity: 0.4;
        box-shadow: none;
      }
      .chat-footer__disclaimer {
        margin-top: var(--space-3);
        color: var(--text-label);
        font-size: 0.6875rem;
      }

      .scroll-bottom-btn {
        bottom: 108px;
        width: 36px;
        height: 36px;
        border: 1px solid var(--line);
        background: var(--card);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: var(--shadow-float);
        transform: translateX(-50%) translateY(8px) scale(0.94);
        transition:
          opacity var(--t-quick) ease,
          transform var(--t-base) var(--ease-out),
          background var(--t-quick) ease,
          border-color var(--t-quick) ease;
      }
      .scroll-bottom-btn.visible {
        transform: translateX(-50%) translateY(0) scale(1);
      }
      .scroll-bottom-btn:hover {
        background: var(--card);
        border-color: var(--line-strong);
        box-shadow:
          0 0 0 4px rgba(168, 201, 142, 0.18),
          var(--shadow-float);
      }
      .scroll-bottom-btn:hover svg {
        color: var(--sage-700);
      }
      .scroll-bottom-btn svg {
        width: 16px;
        height: 16px;
        color: var(--sage-700);
      }

      /* ============================================
         23. WELCOME STATE
         ============================================ */
      .welcome-state {
        padding: var(--space-10) var(--space-5) var(--space-8);
        animation: none;
      }
      .welcome-state__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
        width: 100%;
        min-width: 0;
      }
      .welcome-state__icon-wrapper {
        animation: verdictIn var(--t-slow) var(--ease-out) both;
      }
      .welcome-state__icon {
        width: 46px;
        height: 46px;
        border-radius: 15px;
        background: linear-gradient(150deg, var(--brand-400), var(--sage-600));
        box-shadow: 0 12px 26px -12px rgba(69, 107, 49, 0.75);
        animation: none;
      }
      .welcome-state__icon svg {
        width: 22px;
        height: 22px;
      }
      .welcome-state__glow {
        display: none;
      }
      .welcome-state__title {
        color: var(--ink);
        font-size: 1.375rem;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.025em;
        animation: verdictIn var(--t-slow) var(--ease-out) 40ms both;
      }
      .welcome-state__subtitle {
        max-width: 34ch;
        color: var(--ink-2);
        font-size: var(--text-sm);
        line-height: 1.6;
        animation: verdictIn var(--t-slow) var(--ease-out) 80ms both;
      }
      .welcome-state__suggestions {
        gap: var(--space-2);
        margin-top: var(--space-2);
        animation: none;
      }
      .suggestion-chip {
        gap: var(--space-3);
        padding: 11px var(--space-4);
        border: 1px solid var(--line);
        border-radius: 14px;
        background: var(--card);
        color: var(--ink);
        font-size: var(--text-sm);
        font-weight: 500;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        transform: none;
        transition:
          transform var(--t-base) var(--ease-out),
          border-color var(--t-base) ease,
          box-shadow var(--t-base) ease;
        animation: verdictIn var(--t-slow) var(--ease-out) both;
      }
      .suggestion-chip:nth-child(1) {
        animation-delay: 120ms;
      }
      .suggestion-chip:nth-child(2) {
        animation-delay: 170ms;
      }
      .suggestion-chip:nth-child(3) {
        animation-delay: 220ms;
      }
      .suggestion-chip:nth-child(4) {
        animation-delay: 270ms;
      }
      .suggestion-chip:hover {
        background: var(--card);
        border-color: var(--line-strong);
        box-shadow: var(--shadow-card);
        transform: translateY(-2px);
      }
      .suggestion-chip:hover::before {
        opacity: 0;
      }
      .suggestion-chip:active {
        transform: scale(0.99);
      }
      .suggestion-chip__icon {
        width: 18px;
        font-size: 0.875rem;
        color: var(--sage-600);
        transition: none;
      }
      .suggestion-chip:hover .suggestion-chip__icon {
        transform: none;
      }

      /* ============================================
         24. ACCESSIBILITY & MATERIALS
         ============================================ */
      :focus-visible {
        outline: 2px solid var(--sage-600);
        outline-offset: 2px;
      }
      .message-composer__input:focus-visible,
      .message-composer__wrapper:has(.message-composer__input:focus-visible) {
        outline: none;
      }

      @media (prefers-reduced-motion: reduce) {
        .ambient-orb,
        .ambient-background::after,
        .status-indicator__dot,
        .risk-header__status-dot,
        .risk-header__track-bar,
        .risk-pending__dots span,
        .welcome-state__icon,
        .welcome-state__icon-wrapper,
        .welcome-state__title,
        .welcome-state__subtitle,
        .message-group,
        .suggestion-chip,
        .risk-header {
          animation: none;
        }
        .suggestion-chip {
          opacity: 1;
          transform: none;
        }
        .scroll-bottom-btn {
          transition: opacity var(--t-quick) ease;
        }
        .scroll-bottom-btn,
        .scroll-bottom-btn.visible {
          transform: translateX(-50%);
        }
      }

      @media (prefers-reduced-transparency: reduce) {
        .chat-header,
        .risk-header {
          background: var(--surface-primary);
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
        }
      }

      @media (prefers-contrast: more) {
        .classification-message,
        .message.bot-msg,
        .message-composer__wrapper,
        .suggestion-chip {
          border-color: rgba(24, 44, 15, 0.4);
        }
        .classification-message__eyebrow,
        .risk-header__eyebrow,
        .classification-message__thinking-timer {
          color: #2f4a22;
        }
      }

      /* ============================================
         25. VERDICT RATING & MESSAGE FORMATTING
         ============================================ */
      .classification-message__label {
        flex-wrap: wrap;
      }
      .classification-message__label-text {
        min-width: 0;
      }
      .classification-message__plain-meaning {
        margin: var(--space-2) 0 0 17px;
        color: var(--ink-2);
        font-size: var(--text-sm);
        line-height: 1.5;
      }
      .classification-message__plain-meaning[hidden] {
        display: none;
      }
      /* Severity and score travel with the verdict, so the rating is readable
         before the details are opened. */
      .classification-message__rating {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        padding: 3px 10px;
        border: 1px solid rgba(63, 125, 78, 0.28);
        border-radius: var(--radius-full);
        background: var(--risk-clean-soft);
        color: var(--risk-clean);
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        white-space: nowrap;
        animation: ratingIn var(--t-base) var(--ease-settle) both;
      }
      .classification-message__rating[hidden] {
        display: none;
      }
      .classification-message__rating[data-level="elevated"] {
        border-color: rgba(192, 138, 53, 0.34);
        background: rgba(192, 138, 53, 0.1);
        color: #8a6118;
      }
      .classification-message__rating[data-level="high"] {
        border-color: rgba(162, 98, 29, 0.34);
        background: var(--risk-high-soft);
        color: #8c5216;
      }
      .classification-message__rating[data-level="critical"] {
        border-color: rgba(162, 52, 52, 0.38);
        background: rgba(162, 52, 52, 0.1);
        color: #8d2525;
      }
      .classification-message__rating[data-level="clean"] {
        border-color: rgba(63, 125, 78, 0.28);
        background: var(--risk-clean-soft);
        color: var(--risk-clean);
      }
      .classification-message__rating-score {
        display: inline-flex;
        align-items: baseline;
        gap: 1px;
        font-variant-numeric: tabular-nums;
      }
      .classification-message__rating-score[hidden] {
        display: none;
      }
      .classification-message__rating-value {
        font-weight: 600;
      }
      .classification-message__rating-unit {
        font-size: 0.625rem;
        opacity: 0.75;
      }
      @keyframes ratingIn {
        from {
          opacity: 0;
          transform: translateY(-3px) scale(0.96);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      /* Formatted answers: paragraph rhythm, lists, quotes, code and tables
         produced by the markdown renderer. */
      .message.bot-msg {
        white-space: normal;
      }
      .message.user-msg {
        white-space: pre-wrap;
      }
      .message.bot-msg p {
        margin: 0 0 0.75em;
        line-height: 1.65;
      }
      .message.bot-msg p:last-child {
        margin-bottom: 0;
      }
      .message.bot-msg strong {
        color: var(--ink);
        font-weight: 600;
      }
      .message.bot-msg em {
        color: var(--ink-2);
        font-style: italic;
      }
      .message.bot-msg del {
        opacity: 0.7;
      }
      .message.bot-msg ul,
      .message.bot-msg ol {
        margin: 0 0 0.75em;
        padding-left: 1.15em;
      }
      .message.bot-msg li {
        margin-bottom: 0.35em;
        line-height: 1.6;
      }
      .message.bot-msg li::marker {
        color: var(--sage-600);
      }
      .message.bot-msg li:last-child {
        margin-bottom: 0;
      }
      .message.bot-msg h1,
      .message.bot-msg h2,
      .message.bot-msg h3,
      .message.bot-msg h4 {
        color: var(--ink);
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.3;
        margin: 0 0 0.5em;
      }
      .message.bot-msg h1 {
        font-size: 1.1875rem;
      }
      .message.bot-msg h2 {
        font-size: 1.0625rem;
      }
      .message.bot-msg h3,
      .message.bot-msg h4 {
        font-size: 0.9375rem;
      }
      .message.bot-msg code {
        padding: 1px 5px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--paper);
        color: var(--sage-700);
        font-family: var(--font-mono);
        font-size: 0.85em;
      }
      .message.bot-msg pre {
        margin: 0 0 0.75em;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #f3f7ee;
        font-size: 0.75rem;
        line-height: 1.6;
      }
      .message.bot-msg pre code {
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--ink);
      }
      .message.bot-msg blockquote {
        margin: 0 0 0.75em;
        padding: 8px 12px;
        border-left: 3px solid var(--brand-400);
        border-radius: 0 10px 10px 0;
        background: rgba(168, 201, 142, 0.1);
        color: var(--ink-2);
        font-style: italic;
      }
      .message.bot-msg blockquote p:last-child {
        margin-bottom: 0;
      }
      .message.bot-msg table {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: var(--card);
      }
      .message.bot-msg th,
      .message.bot-msg td {
        padding: 6px 10px;
        border-color: var(--line);
      }
      .message.bot-msg th {
        background: var(--paper);
        color: var(--text-label);
        font-family: var(--font-mono);
        font-size: 0.6875rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .message.bot-msg tbody tr:nth-child(even) {
        background: rgba(168, 201, 142, 0.07);
      }
      .message.bot-msg hr {
        margin: 12px 0;
        border: 0;
        border-top: 1px solid var(--line);
      }
      .message.bot-msg a {
        color: var(--sage-700);
      }

      /* Each formatted block settles in just after the bubble, so a long answer
         reads as a sequence instead of arriving as one slab. */
      .message.bot-msg > * {
        animation: blockIn 240ms var(--ease-out) both;
      }
      .message.bot-msg > *:nth-child(1) {
        animation-delay: 0ms;
      }
      .message.bot-msg > *:nth-child(2) {
        animation-delay: 36ms;
      }
      .message.bot-msg > *:nth-child(3) {
        animation-delay: 72ms;
      }
      .message.bot-msg > *:nth-child(4) {
        animation-delay: 108ms;
      }
      .message.bot-msg > *:nth-child(5) {
        animation-delay: 144ms;
      }
      .message.bot-msg > *:nth-child(6) {
        animation-delay: 180ms;
      }
      .message.bot-msg > *:nth-child(n + 7) {
        animation-delay: 210ms;
      }
      @keyframes blockIn {
        from {
          opacity: 0;
          transform: translateY(5px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .classification-message__rating,
        .message.bot-msg > * {
          animation: none;
        }
      }