/* ============================================================
       STRUCTURAL (theme-agnostic) tokens
       ============================================================ */
    :root {
      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 20px;
      --radius-xl: 26px;
      --radius-full: 9999px;

      --shadow-soft: 0 10px 30px -4px rgba(45, 35, 20, 0.04), 0 2px 6px rgba(45, 35, 20, 0.02);
      --shadow-hover: 0 16px 36px -4px rgba(45, 35, 20, 0.08), 0 4px 10px rgba(45, 35, 20, 0.03);
      --shadow-pill: 0 4px 14px rgba(24, 23, 21, 0.12);
      --shadow-inset: inset 0 2px 6px rgba(45, 35, 20, 0.04);

      --header-h: 70px;
    }

    /* Legacy aliases — inline HTML style="..." and JS template strings STILL reference
       the OLD names. New names are the source of truth; these resolve on body[data-theme]. */
    body[data-theme] {
      --bg-base: var(--bg-app);
      --bg-card-hover: var(--bg-hover);
      --bg-surface: var(--bg-card-elevated);
      --bg-subtle: var(--bg-card-sub);
      --brand-terracotta: var(--main-color);
      --brand-terracotta-hover: var(--main-color-hover);
      --brand-terracotta-soft: var(--main-color-soft);
      --brand-mauve: var(--text-secondary);
      --brand-amber: var(--accent-secondary);
      --brand-dark-pill: var(--main-color);
      --brand-dark-hover: var(--main-color-hover);
      --text-main: var(--text-primary);
      --text-muted: var(--text-secondary);
      --text-dim: var(--text-secondary);
      --border-light: var(--border-color);
      --border-focus: var(--main-color);
    }

    /* ============================================================
       THEME: Obsidian Dark
       Tagline: High-contrast slate & vibrant warm orange
       Mood: Executive, Sleek, Focused FinTech
       ============================================================ */
    body[data-theme="obsidian"] {
      --main-color: #f97316;
      --main-color-hover: color-mix(in srgb, #f97316 82%, #000);
      --main-color-soft: color-mix(in srgb, #f97316 14%, transparent);
      --accent-secondary: #fde047;

      --bg-app: #0a0b0e;
      --bg-card: #13141a;
      --bg-card-sub: #191b24;
      --bg-card-elevated: #161821;
      --bg-sidebar: #0e0f13;
      --bg-header: rgba(14, 15, 19, 0.9);
      --bg-input: #14161d;
      --bg-hover: #1a1c24;
      --bg-popover: #15171e;

      --border-color: #222530;
      --border-subtle: #1b1c24;

      --text-primary: #ffffff;
      /* legacy aliases (F7): obsidian keeps the exact old fallbacks -> default theme pixel-identical */
      --panel-bg: #111318;
      --text: #eee;
      --border: rgba(255,255,255,0.1);
      --text-secondary: #a3a3a3;
      --text-muted: #8f8f8f;

      --glow-filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.45));
      --scrollbar-thumb: rgba(150, 150, 150, 0.20);
      --scrollbar-hover: rgba(150, 150, 150, 0.40);
    }

    /* ============================================================
       THEME: Creator Violet
       Tagline: Electric orchid magenta & midnight plum canvas
       Mood: Cyberpunk, Modern Web3, High Voltage
       ============================================================ */
    body[data-theme="violet"] {
      --main-color: #da5be8;
      --main-color-hover: color-mix(in srgb, #da5be8 82%, #000);
      --main-color-soft: color-mix(in srgb, #da5be8 14%, transparent);
      --accent-secondary: #b793f5;

      --bg-app: #0f0916;
      --bg-card: #171520;
      --bg-card-sub: #1e1a2c;
      --bg-card-elevated: #251e36;
      --bg-sidebar: #130f1c;
      --bg-header: rgba(19, 15, 28, 0.9);
      --bg-input: #1a1526;
      --bg-hover: #281f3b;
      --bg-popover: #1a1526;

      --border-color: #292238;
      --border-subtle: #201a2e;

      --text-primary: #fcfaff;
      --panel-bg: var(--bg-card);
      --text: var(--text-primary);
      --border: var(--border-color);
      --text-secondary: #b6a8cc;
      --text-muted: #a292bd;

      --glow-filter: drop-shadow(0 0 14px rgba(192, 38, 211, 0.50));
      --scrollbar-thumb: rgba(192, 38, 211, 0.25);
      --scrollbar-hover: rgba(192, 38, 211, 0.45);
    }

    /* ============================================================
       THEME: Crimson Velvet
       Tagline: Deep wine burgundy & radiant coral red highlights
       Mood: Dramatic, Bold, High-Stakes Financials
       ============================================================ */
    body[data-theme="crimson"] {
      --main-color: #f25962;
      --main-color-hover: color-mix(in srgb, #f25962 82%, #000);
      --main-color-soft: color-mix(in srgb, #f25962 14%, transparent);
      --accent-secondary: #fff0d4;

      --bg-app: #200b12;
      --bg-card: #31131c;
      --bg-card-sub: #280e17;
      --bg-card-elevated: #3d1824;
      --bg-sidebar: #270e17;
      --bg-header: rgba(39, 14, 23, 0.9);
      --bg-input: #240c14;
      --bg-hover: #3f1925;
      --bg-popover: #31131c;

      --border-color: #4e1e2e;
      --border-subtle: #3f1825;

      --text-primary: #fff0f3;
      --panel-bg: var(--bg-card);
      --text: var(--text-primary);
      --border: var(--border-color);
      --text-secondary: #c5a6af;
      --text-muted: #b18c96;

      --glow-filter: drop-shadow(0 0 14px rgba(234, 67, 77, 0.55));
      --scrollbar-thumb: rgba(234, 67, 77, 0.25);
      --scrollbar-hover: rgba(234, 67, 77, 0.45);
    }

    /* ============================================================
       THEME: Emerald Sage
       Tagline: Crisp mist & deep forest emerald aesthetic
       Mood: Calm, Fresh, Clean Daylight Banking
       ============================================================ */
    body[data-theme="emerald"] {
      --main-color: #0c6b44;
      --main-color-hover: color-mix(in srgb, #0c6b44 82%, #000);
      --main-color-soft: color-mix(in srgb, #0c6b44 14%, transparent);
      --accent-secondary: #3a7855;

      --bg-app: #ebf1ee;
      --bg-card: #ffffff;
      --bg-card-sub: #f3f7f4;
      --bg-card-elevated: #ffffff;
      --bg-sidebar: #f6faf8;
      --bg-header: rgba(255, 255, 255, 0.9);
      --bg-input: #f3f7f4;
      --bg-hover: #eaf3ed;
      --bg-popover: #ffffff;

      --border-color: #d8e3dc;
      --border-subtle: #e8efe9;

      --text-primary: #131f1a;
      --panel-bg: var(--bg-card);
      --text: var(--text-primary);
      --border: var(--border-color);
      --text-secondary: #44564c;
      --text-muted: #5a6d62;

      --glow-filter: drop-shadow(0 0 14px rgba(12, 107, 68, 0.40));
      --scrollbar-thumb: rgba(12, 107, 68, 0.25);
      --scrollbar-hover: rgba(12, 107, 68, 0.45);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      background-color: var(--bg-app);
      color: var(--text-primary);
      font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      height: 100vh;
      display: flex;
      overflow: hidden;
      user-select: none;
      -webkit-font-smoothing: antialiased;
    }

    /* Editorial Heading Styles */
    h1, h2, h3, .brand-title, .editorial-heading {
      font-family: 'Newsreader', 'Cormorant Garamond', 'Playfair Display', serif;
      font-weight: 500;
      color: var(--text-primary);
      letter-spacing: -0.02em;
    }

     .kicker-tag {
      filter: var(--glow-filter);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.8px;
      color: var(--main-color);
      margin-bottom: 0.35rem;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }

    /* Custom Refined Scrollbars */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: var(--bg-app); }
    ::-webkit-scrollbar-thumb { 
      background: var(--scrollbar-thumb); 
      border-radius: var(--radius-full); 
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

    /* LAYOUT */
    .app-container {
      display: flex;
      width: 100vw;
      height: 100vh;
    }

    /* ARCHITECTURAL SIDEBAR */
    .sidebar {
      width: 260px;
      background: var(--bg-sidebar);
      border-right: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      justify-content: space-between;
      position: relative;
      z-index: 20;
      overflow: hidden;
      min-height: 0;
    }

    .sidebar-top {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }

    /* BRAND LOGO AREA (Atelier Style) */
    .sidebar-brand {
      padding: 1.35rem 1.4rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      border-bottom: 1px solid var(--border-color);
      text-decoration: none;
      background: var(--bg-card-sub);
      flex-shrink: 0;
    }

    .brand-icon-wrapper {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      filter: var(--glow-filter);
      transition: transform 0.3s ease;
    }

    .sidebar-brand:hover .brand-icon-wrapper {
      transform: scale(1.08) rotate(5deg);
    }

    .brand-title {
      font-family: 'Newsreader', serif;
      font-size: 1.45rem;
      font-weight: 500;
      color: var(--text-primary);
      display: flex;
      align-items: baseline;
      gap: 0.15rem;
      letter-spacing: -0.03em;
    }

     .brand-dot {
      filter: var(--glow-filter);
      color: var(--main-color);
      font-size: 1.6rem;
      line-height: 0;
      font-weight: 800;
    }

    .brand-badge-pill {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      background: var(--main-color-soft);
      color: var(--main-color);
      border: 1px solid color-mix(in srgb, var(--main-color) 22%, transparent);
      padding: 2px 7px;
      border-radius: var(--radius-full);
      margin-left: 0.4rem;
      vertical-align: middle;
    }

    /* NAV MENU */
    .nav-menu {
      padding: 1.15rem 0.85rem;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    .nav-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.72rem 0.95rem;
      border-radius: 12px;
      color: var(--text-secondary);
      font-size: 0.88rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.16s ease;
      border: 1px solid transparent;
      text-decoration: none;
    }

    .nav-item-left {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      min-width: 0;
    }

    .nav-item-left span {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .nav-item-left i {
      font-size: 0.95rem;
      width: 18px;
      text-align: center;
      color: var(--text-muted);
      transition: color 0.16s ease, transform 0.16s ease;
      flex-shrink: 0;
    }

    .nav-item:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
      transform: translateX(2px);
    }

    .nav-item:hover .nav-item-left i {
      color: var(--main-color);
    }

    .nav-item.active {
      background: var(--bg-card);
      color: var(--text-primary);
      font-weight: 600;
      border-color: var(--border-color);
      box-shadow: 0 4px 14px rgba(45, 35, 20, 0.04);
    }

    .nav-item.active .nav-item-left i {
      color: var(--main-color);
    }

     .nav-badge-live {
      filter: var(--glow-filter);
      font-size: 0.75rem;
      line-height: 1;
      background: var(--main-color-soft);
      color: var(--main-color);
      border: 1px solid color-mix(in srgb, var(--main-color) 25%, transparent);
      padding: 2px 7px;
      border-radius: var(--radius-full);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      flex-shrink: 0;
    }

    /* DEVELOPER FOOTER CARD */
    .sidebar-bottom {
      padding: 1.1rem;
      border-top: 1px solid var(--border-color);
      flex-shrink: 0;
    }

    .dev-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 0.95rem;
      box-shadow: var(--shadow-soft);
    }

    .dev-tag {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--main-color);
      text-transform: uppercase;
      letter-spacing: 1.2px;
      margin-bottom: 0.2rem;
    }

    .dev-name {
      font-family: 'Newsreader', serif;
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .dev-link {
      font-size: 0.75rem;
      color: var(--text-secondary);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 0.35rem;
      margin-top: 3px;
      transition: color 0.15s ease;
    }

    .dev-link:hover {
      color: var(--main-color);
    }

    .server-status-line {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 0.8rem;
      padding-top: 0.6rem;
      border-top: 1px solid var(--border-color);
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--main-color);
      font-family: 'JetBrains Mono', monospace;
    }

     .status-dot-pulse {
      filter: var(--glow-filter);
      width: 8px;
      height: 8px;
      background: var(--main-color);
      border-radius: 50%;
      box-shadow: 0 0 8px color-mix(in srgb, var(--main-color) 40%, transparent);
      animation: pulseWarm 2.4s infinite ease-in-out;
    }

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

    /* MAIN VIEW */
    .main-view {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: var(--bg-app);
      overflow: hidden;
      min-width: 0;
      position: relative;
    }

    /* FLOATING LUXURY TOP HEADER */
    .top-header {
      height: 70px;
      padding: 0 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      background: var(--bg-header);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--border-color);
      z-index: 10;
    }

    .header-left h1 {
      font-family: 'Newsreader', serif;
      font-size: 1.4rem;
      font-weight: 500;
      color: var(--text-primary);
      display: flex;
      align-items: baseline;
      gap: 0.6rem;
    }

    .header-left p {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin-top: 1px;
    }

    .header-right {
      display: flex;
      align-items: center;
      gap: 0.85rem;
    }

    /* PING PILL BADGE */
    .ping-badge {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      padding: 0.3rem 0.75rem;
      border-radius: var(--radius-full);
      font-size: 0.78rem;
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-primary);
      font-weight: 600;
      box-shadow: var(--shadow-soft);
    }

    /* PRIMARY & SECONDARY PILL BUTTONS */
    .btn-copy-base {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      padding: 0.5rem 1.1rem;
      border-radius: var(--radius-full);
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      box-shadow: var(--shadow-soft);
      transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-copy-base:hover {
      background: var(--main-color);
      color: #ffffff;
      border-color: var(--main-color);
      transform: translateY(-1px);
      box-shadow: var(--shadow-pill);
    }

    .btn-copy-base:active {
      transform: translateY(1px);
    }

    /* SOLID DEEP CHARCOAL ACTION BUTTON (Inquire / Generate Key) */
    .btn-generate-key {
      background: var(--main-color);
      color: #ffffff;
      font-weight: 600;
      font-size: 0.78rem;
      padding: 0.6rem 1.35rem;
      border-radius: var(--radius-full);
      border: 1px solid var(--main-color);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.55rem;
      box-shadow: var(--shadow-pill);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-generate-key:hover {
      background: var(--main-color-hover);
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(24, 23, 21, 0.2);
    }

    .btn-generate-key:active {
      transform: translateY(1px);
    }

    /* VIEW CONTAINER */
    .view-content {
      flex: 1;
      padding: 1.75rem 2rem 3.5rem;
      overflow-y: auto;
      display: none;
    }

    .view-content.active {
      display: block;
    }

    #tab-playground.view-content.active {
      display: flex;
      flex-direction: column;
    }

    /* REFINED CARDS & PANELS */
    .panel-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-soft);
      position: relative;
    }

    .panel-card-header {
      padding: 1.35rem 1.65rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid var(--border-color);
      background: var(--bg-card-sub);
    }

    .panel-card-title h2 {
      font-size: 1.2rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .panel-card-title p {
      font-size: 0.82rem;
      color: var(--text-secondary);
      margin-top: 3px;
    }

    /* KEYS TABLE */
    .keys-table-container {
      width: 100%;
      overflow-x: auto;
    }

    .keys-admin-note {
      margin-top: 0.85rem;
      padding: 0.7rem 1rem;
      border-radius: var(--radius-md);
      font-size: 0.78rem;
      color: var(--text-secondary);
      background: var(--bg-card-sub);
      border: 1px dashed var(--border-color);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .keys-admin-note code {
      font-family: 'JetBrains Mono', monospace;
      color: var(--main-color);
    }

    table.keys-table {
      width: 100%;
      border-collapse: collapse;
      text-align: left;
    }

    table.keys-table th {
      background: var(--bg-card-sub);
      padding: 0.95rem 1.65rem;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border-color);
    }

    table.keys-table td {
      padding: 1.15rem 1.65rem;
      border-bottom: 1px solid var(--border-subtle);
      font-size: 0.86rem;
      color: var(--text-primary);
    }

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

    table.keys-table tr:hover td {
      background: var(--bg-hover);
    }

    .key-token-display {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 600;
      color: var(--text-primary);
      font-size: 0.86rem;
      display: flex;
      align-items: center;
      gap: 0.55rem;
    }

    .badge-status-active {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.3rem 0.75rem;
      border-radius: var(--radius-full);
      font-size: 0.75rem;
      font-weight: 700;
      background: var(--main-color-soft);
      color: var(--main-color);
      border: 1px solid color-mix(in srgb, var(--main-color) 25%, transparent);
      letter-spacing: 0.4px;
    }

    /* Access-lifecycle plan §10.2: amber variant for SUSPENDED rows */
    .badge-status-suspended {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.3rem 0.75rem;
      border-radius: var(--radius-full);
      font-size: 0.75rem;
      font-weight: 700;
      background: rgba(245, 158, 11, 0.12);
      color: #f59e0b;
      border: 1px solid rgba(245, 158, 11, 0.35);
      letter-spacing: 0.4px;
    }

    .action-btn-group {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    /* SECONDARY ACTION BUTTONS (Pill Style) */
    .btn-action-sm {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      padding: 0.4rem 0.9rem;
      border-radius: var(--radius-full);
      font-size: 0.78rem; /* BD3: pill text floor 12.48px (was 0.76rem) */
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      box-shadow: 0 1px 3px rgba(45, 35, 20, 0.04);
      transition: all 0.16s ease;
    }

    .btn-action-sm:hover {
      background: var(--main-color);
      color: #ffffff;
      border-color: var(--main-color);
      transform: translateY(-1px);
    }

    .btn-action-sm.delete:hover {
      background: #dc2626;
      border-color: #dc2626;
      color: #ffffff;
    }

    /* INSTRUCTION GUIDE CARD */
    .guide-box {
      margin-top: 1.75rem;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 1.65rem;
      box-shadow: var(--shadow-soft);
    }

    .guide-box-header {
      display: flex;
      align-items: center;
      gap: 0.7rem;
      margin-bottom: 1.25rem;
    }

    .guide-box-header i {
      color: var(--main-color);
      font-size: 1.15rem;
    }

    .guide-box-header h3 {
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--text-primary);
    }

    .guide-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
      gap: 1.25rem;
    }

    .guide-card {
      background: var(--bg-card-sub);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 1.2rem;
      box-shadow: 0 2px 8px rgba(45, 35, 20, 0.02);
      transition: all 0.2s ease;
      min-width: 0;
      overflow: hidden;
    }

    .guide-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-soft);
      border-color: var(--border-color);
    }

    .guide-card h4 {
      font-family: 'Newsreader', serif;
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.6rem;
    }

    .guide-card h4 i {
      color: var(--main-color);
      font-size: 0.95rem;
    }

    .guide-row {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin-top: 0.45rem;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      min-width: 0;
    }

    .guide-code {
      font-family: 'JetBrains Mono', monospace;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      padding: 0.35rem 0.65rem;
      border-radius: var(--radius-sm);
      color: var(--main-color);
      font-size: 0.78rem;
      word-break: break-all;
      display: inline-block;
      max-width: 100%;
    }

    .guide-card pre {
      max-width: 100%;
      /* pre-wrap at ALL widths (B4): preset snippets (OLKIL/Cursor/Cline JSON)
         previously scrolled horizontally inside their card on desktop. */
      white-space: pre-wrap;
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    .preset-section {
      grid-column: 1 / -1;
      margin-top: 0.6rem;
      padding-top: 0.75rem;
      border-top: 1px dashed var(--border-color);
    }

    .preset-section h3 {
      font-family: 'Newsreader', serif;
      font-size: 0.95rem;
      font-weight: 600;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin: 0 0 0.25rem;
    }

    .preset-section h3 i {
      color: var(--main-color);
      font-size: 0.9rem;
    }

    /* Live gateway status row in the 1-Click Presets panel header */
    .preset-status-ok { color: var(--main-color); font-weight: 600; }
    .preset-status-warn { color: #b8860b; font-weight: 600; }
    .preset-status-bad { color: #ef4444; font-weight: 600; }

    /* AI PLAYGROUND VIEW */
    .playground-container {
      display: flex;
      flex-direction: column;
      height: calc(100vh - 70px);
      background: var(--bg-app);
    }

    .playground-toolbar {
      padding: 0.85rem 2rem;
      background: var(--bg-card);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
      box-shadow: 0 2px 10px rgba(45, 35, 20, 0.02);
      z-index: 5;
    }

    .playground-controls-left {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      flex-wrap: wrap;
    }

    .control-group {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-secondary);
    }

    .control-select {
      background: var(--bg-card-sub);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      padding: 0.45rem 0.95rem;
      border-radius: var(--radius-full);
      font-size: 0.82rem;
      font-family: inherit;
      outline: none;
      cursor: pointer;
      transition: all 0.18s ease;
    }

    .control-select:focus {
      border-color: var(--main-color);
      background: var(--bg-card);
    }

    .checkbox-container {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      cursor: pointer;
      font-size: 0.82rem;
      color: var(--text-secondary);
    }

    .checkbox-container input[type="checkbox"] {
      accent-color: var(--main-color);
      cursor: pointer;
    }

    .btn-clear-chat {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      padding: 0.42rem 0.95rem;
      border-radius: var(--radius-full);
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      transition: all 0.16s ease;
    }

    .btn-clear-chat:hover {
      background: color-mix(in srgb, #dc2626 14%, transparent);
      color: #f87171;
      border-color: color-mix(in srgb, #dc2626 35%, transparent);
    }

    /* SPEED TELEMETRY BAR */
    .stream-telemetry-bar {
      background: var(--bg-card-sub);
      border-bottom: 1px solid var(--border-color);
      padding: 0.5rem 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.75rem;
      font-family: 'JetBrains Mono', monospace;
      color: var(--text-secondary);
    }

    .stream-speed-indicator {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      color: var(--main-color);
      font-weight: 700;
    }

    /* CHAT MESSAGES AREA */
    .chat-messages-area {
      flex: 1;
      overflow-y: auto;
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1.45rem;
      user-select: text;
    }

    .message-row {
      display: flex;
      gap: 1rem;
      max-width: 920px;
      width: 100%;
    }

    .message-row.user {
      align-self: flex-end;
      justify-content: flex-end;
    }

    /* AVATARS */
    .message-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.95rem;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(45, 35, 20, 0.06);
    }

     .message-avatar.ai {
      filter: var(--glow-filter);
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      color: var(--main-color);
    }

    .message-avatar.user-av {
      background: var(--main-color);
      color: #ffffff;
    }

    /* EDITORIAL CHAT BUBBLES */
    .message-bubble {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 1.25rem 1.45rem;
      color: var(--text-primary);
      font-size: 0.92rem;
      line-height: 1.68;
      max-width: 820px;
      box-shadow: var(--shadow-soft);
    }

    .message-row.user .message-bubble {
      background: var(--main-color);
      border-color: var(--main-color);
      color: #ffffff;
      box-shadow: var(--shadow-pill);
    }

    .message-row.user .message-bubble p {
      color: #ffffff;
    }

    .message-bubble pre {
      background: #181715 !important;
      border: 1px solid #2d2b27;
      border-radius: var(--radius-md);
      padding: 1.15rem;
      overflow-x: auto;
      margin: 0.9rem 0;
      position: relative;
    }

    .message-bubble code {
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.84rem;
    }

    /* CODE BLOCK WRAPPER */
    .code-block-wrapper {
      background: #181715;
      border: 1px solid #2e2c28;
      border-radius: var(--radius-md);
      margin: 1rem 0;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(24, 23, 21, 0.15);
    }

    .code-block-header {
      background: #23211e;
      border-bottom: 1px solid #33302b;
      padding: 0.6rem 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .code-lang-label {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: #a8a298;
      display: flex;
      align-items: center;
      gap: 0.45rem;
    }

    .code-actions-group {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .btn-code-action {
      background: #2e2b27;
      border: 1px solid #44403a;
      color: #eae5dc;
      padding: 0.35rem 0.8rem;
      border-radius: var(--radius-full);
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      transition: all 0.16s ease;
      font-family: inherit;
    }

    .btn-code-action:hover {
      background: #403c36;
      color: #ffffff;
      border-color: #555048;
    }

    .btn-code-action.run-btn {
      background: linear-gradient(135deg, var(--main-color) 0%, var(--main-color-hover) 100%);
      border-color: var(--main-color);
      color: #ffffff;
      box-shadow: 0 2px 8px color-mix(in srgb, var(--main-color) 30%, transparent);
    }

    .btn-code-action.run-btn:hover {
      background: linear-gradient(135deg, var(--main-color-hover) 0%, color-mix(in srgb, var(--main-color) 80%, #000) 100%);
      transform: translateY(-1px);
      box-shadow: 0 4px 14px color-mix(in srgb, var(--main-color) 45%, transparent);
    }

    .code-block-wrapper pre {
      margin: 0;
      border: none !important;
      border-radius: 0;
      background: transparent !important;
      padding: 1.25rem;
    }

    /* INLINE PREVIEW CONTAINER */
    .inline-preview-container {
      display: none;
      border-top: 1px solid #33302b;
      background: #000;
      position: relative;
    }

    .inline-preview-container.active {
      display: block;
    }

    .inline-preview-toolbar {
      background: #181715;
      padding: 0.5rem 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #2e2c28;
      font-size: 0.75rem;
      color: #a8a298;
    }

    .inline-preview-iframe {
      width: 100%;
      height: 480px;
      border: none;
      display: block;
      background: #fff;
    }

    /* INTERACTIVE GAME CALLOUT CARD (Atelier & Forge Style) */
    .game-callout-card {
      background: var(--bg-card);
      border: 1px solid color-mix(in srgb, var(--main-color) 28%, transparent);
      border-radius: var(--radius-lg);
      padding: 1.25rem 1.45rem;
      margin: 1.1rem 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
      box-shadow: 0 10px 28px -4px color-mix(in srgb, var(--main-color) 10%, transparent), var(--shadow-soft);
      position: relative;
      overflow: hidden;
    }

    .game-callout-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: var(--main-color);
    }

    .game-callout-info {
      display: flex;
      align-items: center;
      gap: 1rem;
    }

     .game-callout-icon {
      filter: var(--glow-filter);
      width: 46px;
      height: 46px;
      background: var(--main-color-soft);
      border: 1px solid color-mix(in srgb, var(--main-color) 25%, transparent);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--main-color);
      font-size: 1.3rem;
      flex-shrink: 0;
    }

    .game-callout-text h4 {
      font-family: 'Newsreader', serif;
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
    }

    .game-callout-text p {
      font-size: 0.8rem;
      color: var(--text-secondary);
    }

    .game-callout-btns {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      flex-wrap: wrap;
    }

    /* INPUT CONTAINER (Capsule / Pill Bar) */
    .playground-input-container {
      padding: 1.15rem 2rem 1.45rem;
      background: var(--bg-app);
    }

    .input-box-wrapper {
      background: var(--bg-input);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-full);
      display: flex;
      align-items: center;
      padding: 0.5rem 0.85rem 0.5rem 1.25rem;
      gap: 0.85rem;
      box-shadow: 0 10px 30px rgba(45, 35, 20, 0.05);
      transition: all 0.2s ease;
    }

    .input-box-wrapper:focus-within {
      border-color: var(--main-color);
      box-shadow: 0 12px 34px rgba(24, 23, 21, 0.1);
    }

    .btn-attachment {
      background: transparent;
      border: none;
      color: var(--text-muted);
      font-size: 1.1rem;
      cursor: pointer;
      padding: 0.4rem;
      border-radius: 50%;
      transition: color 0.15s ease;
    }

    .btn-attachment:hover {
      color: var(--main-color);
    }

    .btn-attachment.has-files {
      color: var(--main-color);
    }

    /* FILE ATTACHMENT BAR + CHIPS */
    .attach-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 0 0 8px;
    }

    .attach-bar[hidden] {
      display: none;
    }

    .attach-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      max-width: 100%;
      background: var(--bg-card-sub);
      color: var(--text-muted);
      font-size: 12px;
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: 8px;
      padding: 4px 8px;
    }

    .attach-chip img.attach-thumb {
      width: 24px;
      height: 24px;
      object-fit: cover;
      border-radius: 6px;
      flex-shrink: 0;
    }

    .attach-chip .attach-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 220px;
    }

    .attach-chip .attach-size {
      color: var(--text-muted);
      opacity: 0.75;
      flex-shrink: 0;
    }

    .attach-chip .attach-remove {
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 13px;
      padding: 0 2px;
      line-height: 1;
      flex-shrink: 0;
    }

    .attach-chip .attach-remove:hover {
      color: var(--brand-terracotta);
    }

    .attach-inline {
      max-width: 180px;
      max-height: 140px;
      border-radius: 10px;
      display: block;
      margin-bottom: 6px;
      object-fit: cover;
    }

    .attach-inline-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      background: var(--bg-card-sub);
      padding: 3px 8px;
      border-radius: 8px;
      margin-bottom: 6px;
      color: var(--text-muted);
    }

    .chat-textarea {
      flex: 1;
      background: transparent;
      border: none;
      color: var(--text-primary);
      font-family: inherit;
      font-size: 0.92rem;
      line-height: 1.5;
      resize: none;
      outline: none;
      max-height: 120px;
      min-height: 24px;
      padding: 0.3rem 0;
    }

    .chat-textarea::placeholder {
      color: var(--text-muted);
    }

    /* CIRCULAR BLACK SEND BUTTON */
     .btn-send {
      filter: var(--glow-filter);
      background: var(--main-color);
      color: #ffffff;
      border: none;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 0.95rem;
      box-shadow: 0 2px 8px rgba(24, 23, 21, 0.2);
      transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
      flex-shrink: 0;
    }

    .btn-send:hover {
      background: var(--main-color-hover);
      transform: scale(1.05);
    }

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

    .btn-send:disabled {
      background: var(--bg-input);
      color: var(--text-muted);
      box-shadow: none;
      cursor: not-allowed;
      transform: none;
    }

    /* DASHBOARD STATS GRID */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 1.35rem;
      margin-bottom: 1.75rem;
    }

    .stat-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 1.45rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      box-shadow: var(--shadow-soft);
      transition: all 0.2s ease;
    }

    .stat-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-hover);
      border-color: var(--border-color);
    }

    .stat-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--text-muted);
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.2px;
    }

    .stat-card-top i {
      color: var(--main-color);
      font-size: 1.05rem;
    }

    .stat-card-val {
      font-family: 'Newsreader', serif;
      font-size: 2.2rem;
      font-weight: 600;
      color: var(--text-primary);
      margin: 0.6rem 0 0.25rem;
      letter-spacing: -0.02em;
    }

    .stat-card-sub {
      font-size: 0.76rem;
      color: var(--main-color);
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.35rem;
    }

    /* TERMINAL CONSOLE FOR LIVE LOGS */
    .terminal-console {
      background: #181715;
      border: 1px solid #2d2b27;
      border-radius: var(--radius-md);
      padding: 1.25rem 1.45rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.78rem;
      color: #ede8df;
      height: 480px;
      overflow-y: auto;
      user-select: text;
      box-shadow: 0 8px 24px rgba(24, 23, 21, 0.15);
    }

    .log-line {
      margin-bottom: 0.45rem;
      line-height: 1.55;
    }

    .log-ts { color: var(--text-muted); }
    .log-info { color: #60a5fa; }
    .log-req { color: #34d399; }
    .log-warn { color: var(--accent-secondary); }
    .log-err { color: #f87171; }

    
    /* ATELIER HERO CARD (Screenshot Match) */
    .atelier-hero-card {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-xl);
      padding: 2.25rem 2.85rem;
      margin-bottom: 2rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 2.5rem;
      box-shadow: var(--shadow-soft);
      position: relative;
      min-height: fit-content;
      flex-shrink: 0;
    }

    .atelier-hero-content {
      flex: 1;
      max-width: 580px;
      min-width: 0;
    }

    .atelier-hero-title {
      font-family: 'Newsreader', serif;
      font-size: 2.9rem;
      line-height: 1.15;
      font-weight: 500;
      color: var(--text-primary);
      margin: 0.65rem 0 1.25rem;
      letter-spacing: -0.02em;
    }

    .editorial-italic {
      font-style: italic;
      color: var(--text-secondary);
      font-family: 'Newsreader', serif;
    }

    .atelier-hero-desc {
      font-size: 0.95rem;
      line-height: 1.68;
      color: var(--text-secondary);
      margin-bottom: 1.85rem;
    }

    .atelier-hero-actions {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      flex-wrap: wrap;
    }

    .btn-hero-primary {
      background: var(--main-color);
      color: #ffffff;
      padding: 0.75rem 1.75rem;
      border-radius: var(--radius-full);
      font-size: 0.88rem;
      font-weight: 600;
      border: 1px solid var(--main-color);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      box-shadow: var(--shadow-pill);
      transition: all 0.2s ease;
    }

    .btn-hero-primary:hover {
      background: var(--main-color-hover);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(24, 23, 21, 0.2);
    }

    .btn-hero-secondary {
      background: var(--bg-card);
      color: var(--text-primary);
      padding: 0.75rem 1.6rem;
      border-radius: var(--radius-full);
      font-size: 0.88rem;
      font-weight: 600;
      border: 1px solid var(--border-color);
      cursor: pointer;
      box-shadow: 0 1px 4px rgba(45, 35, 20, 0.04);
      transition: all 0.2s ease;
    }

    .btn-hero-secondary:hover {
      background: var(--bg-hover);
      border-color: var(--text-primary);
      transform: translateY(-2px);
    }

    .atelier-hero-graphic {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .globe-wrapper {
      filter: drop-shadow(0 14px 32px var(--main-color-soft));
      animation: floatSubtle 6s ease-in-out infinite alternate;
      width: clamp(160px, 26vw, 240px);
      aspect-ratio: 1 / 1;
    }

    @keyframes floatSubtle {
      0% { transform: translateY(0) rotate(0deg); }
      100% { transform: translateY(-8px) rotate(2deg); }
    }

    /* ── Hero particle globe (hero-globe.js) ── */
    .globe-wrapper canvas {
      width: 100% !important;
      height: 100% !important;
      display: block;
    }

    /* Static dot-globe: the loading state AND the fallback when WebGL/land
       data is unavailable. Colors come from CSS (not SVG attrs) so they
       follow --main-color in all four themes. Crossfades out on .globe-ready. */
    .hero-globe-fallback {
      width: 100%;
      height: 100%;
      display: block;
      transition: opacity 0.6s ease;
    }
    .hero-globe-fallback circle { fill: var(--main-color); }
    .hero-globe-fallback .ring { fill: none; stroke: var(--main-color); }
    .hero-globe-fallback .disc { stroke: none; }
    .globe-wrapper.globe-ready .hero-globe-fallback { opacity: 0; }

    /* TOAST NOTIFICATION */
    .toast-popup {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      background: var(--main-color);
      color: #ffffff;
      padding: 0.85rem 1.45rem;
      border-radius: var(--radius-full);
      font-size: 0.84rem;
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 0.65rem;
      box-shadow: 0 12px 32px rgba(24, 23, 21, 0.25);
      z-index: 9999;
      transform: translateY(100px);
      opacity: 0;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
    }

    .toast-popup.show {
      transform: translateY(0);
      opacity: 1;
    }

    /* THEME-ADAPTIVE INLINE SVG ICONS */
    .toast-icon,
    .inline-icon {
      display: inline-block;
      width: 1.05em;
      height: 1.05em;
      vertical-align: -0.17em;
      flex: none;
    }
    .toast-icon { margin-right: 0.45rem; }
    .inline-icon { margin-right: 0.3em; }
    .has-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
    }
    .toast-popup svg { stroke: currentColor; }
    .ab-emoji svg {
      width: 1.3em;
      height: 1.3em;
    }
  
    /* THEME TOGGLE BUTTON */
    .btn-theme-toggle {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      padding: 0.46rem 1rem;
      border-radius: var(--radius-full);
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.45rem;
      box-shadow: var(--shadow-soft);
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .btn-theme-toggle:hover {
      background: var(--bg-hover);
      transform: translateY(-1px);
    }

    /* ATELIER ARCHITECTURE DIAGRAM BOX */
    .atelier-arch-box {
      background: var(--bg-input);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 1.35rem 1.5rem;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.82rem;
      line-height: 1.85;
      transition: background 0.2s ease, border-color 0.2s ease;
    }


  
    /* =========================================================
       VOICE MODE (SPEECH-TO-PROMPT) ATELIER STYLES
       ========================================================= */
    .btn-mic {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-secondary);
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 1.05rem;
      transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
      flex-shrink: 0;
      position: relative;
    }

    .btn-mic:hover {
      background: var(--bg-input);
      color: var(--main-color);
      transform: scale(1.06);
    }

    .btn-mic.listening {
      background: var(--main-color) !important;
      color: #ffffff !important;
      border-color: var(--main-color);
      animation: mic-pulse 1.4s infinite;
    }

    @keyframes mic-pulse {
      0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--main-color) 55%, transparent), 0 4px 14px color-mix(in srgb, var(--main-color) 40%, transparent);
      }
      70% {
        box-shadow: 0 0 0 10px transparent, 0 4px 14px color-mix(in srgb, var(--main-color) 40%, transparent);
      }
      100% {
        box-shadow: 0 0 0 0 transparent, 0 4px 14px color-mix(in srgb, var(--main-color) 40%, transparent);
      }
    }

    .voice-status-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-full);
      padding: 0.45rem 1.15rem;
      margin-bottom: 0.75rem;
      box-shadow: 0 4px 20px rgba(45, 35, 20, 0.06);
      animation: voiceSlideUp 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      gap: 0.85rem;
    }

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

    .voice-status-left {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex: 1;
      min-width: 0;
    }

    .voice-wave-bars {
      display: flex;
      align-items: center;
      gap: 3px;
      height: 16px;
    }

    .voice-wave-bars .bar {
      width: 3px;
      background: var(--main-color);
      border-radius: 3px;
      animation: waveBar 1.1s ease-in-out infinite alternate;
    }
    .voice-wave-bars .bar-1 { height: 6px; animation-delay: 0.1s; }
    .voice-wave-bars .bar-2 { height: 16px; animation-delay: 0.25s; }
    .voice-wave-bars .bar-3 { height: 10px; animation-delay: 0.4s; }
    .voice-wave-bars .bar-4 { height: 14px; animation-delay: 0.15s; }

    @keyframes waveBar {
      0% { transform: scaleY(0.3); }
      100% { transform: scaleY(1); }
    }

    .voice-status-text {
      font-size: 0.76rem;
      font-weight: 700;
      color: var(--main-color);
      text-transform: uppercase;
      letter-spacing: 0.9px;
      flex-shrink: 0;
    }

    .voice-interim-preview {
      font-size: 0.84rem;
      color: var(--text-secondary);
      font-style: italic;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .voice-status-actions {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      flex-shrink: 0;
    }

    .btn-voice-action {
      border: none;
      border-radius: var(--radius-full);
      padding: 0.32rem 0.8rem;
      font-size: 0.76rem;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      transition: all 0.15s ease;
    }

    .btn-voice-action.send {
      background: var(--main-color);
      color: #ffffff;
    }
    .btn-voice-action.send:hover {
      background: var(--main-color);
    }

    .btn-voice-action.stop {
      background: var(--bg-input);
      color: var(--text-primary);
      border: 1px solid var(--border-color);
    }
    .btn-voice-action.stop:hover {
      background: var(--bg-hover);
    }

    .btn-voice-action.cancel {
      background: transparent;
      color: var(--text-muted);
      padding: 0.32rem 0.55rem;
    }
    .btn-voice-action.cancel:hover {
      color: #ef4444;
    }

    /* =========================================================
       CONVERSATION HISTORY DRAWER (MATCHING IMAGE 2)
       ========================================================= */
    .playground-split-layout {
      display: flex;
      flex-direction: row;
      height: calc(100vh - 64px);
      width: 100%;
      overflow: hidden;
      position: relative;
    }

    .playground-main-pane {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 100%;
      min-width: 0;
      position: relative;
      background: var(--bg-app);
    }

    .chat-history-sidebar {
      width: 275px;
      height: 100%;
      background: var(--bg-sidebar);
      border-right: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1), margin-left 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      z-index: 10;
      overflow: hidden;
    }

    .chat-history-sidebar.collapsed {
      width: 0px !important;
      border-right: none !important;
    }


    .history-top-actions {
      padding: 0.95rem 0.85rem 0.55rem;
    }

    .btn-new-conversation {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 0.65rem;
      padding: 0.65rem 0.95rem;
      background: var(--bg-input);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-full);
      color: var(--text-primary);
      font-family: inherit;
      font-size: 0.88rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.16s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .btn-new-conversation:hover {
      background: var(--bg-hover);
      border-color: var(--border-color);
      color: #ffffff;
      transform: translateY(-1px);
    }

    .btn-new-conversation i {
      font-size: 0.85rem;
      color: var(--main-color);
    }


    .history-nav-links {
      padding: 0.25rem 0.85rem 0.55rem;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      border-bottom: 1px solid var(--border-color);
    }


    .history-nav-item {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      padding: 0.42rem 0.6rem;
      border-radius: 6px;
      font-size: 0.82rem;
      color: var(--text-muted);
      cursor: pointer;
      transition: all 0.15s ease;
    }

    .history-nav-item:hover {
      background: var(--bg-input);
      color: var(--text-primary);
    }

    .history-nav-item.active {
      color: #ffffff;
      font-weight: 600;
    }


    .history-search-container {
      padding: 0.4rem 0.85rem;
      position: relative;
      display: flex;
      align-items: center;
    }

    .history-search-container input {
      width: 100%;
      background: var(--bg-input);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 0.4rem 1.8rem 0.4rem 0.75rem;
      color: var(--text-primary);
      font-size: 0.8rem;
      font-family: inherit;
      outline: none;
    }
    .history-search-container input:focus {
      border-color: var(--main-color);
    }
    .btn-clear-search {
      position: absolute;
      right: 1.25rem;
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 0.75rem;
    }

    .history-scroll-list {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden; /* vertical scroller: children keep natural width when drawer collapses */
      padding: 0.65rem 0.85rem;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
    }

    .history-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.9px;
      color: var(--text-muted);
      padding: 0 0.4rem;
      margin-bottom: 0.35rem;
    }

    .history-folder-group {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }

    .history-folder-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-secondary);
      padding: 0.35rem 0.5rem;
      border-radius: 6px;
      cursor: pointer;
      user-select: none;
      transition: background 0.12s ease;
    }
    .history-folder-row:hover {
      background: var(--bg-hover);
      color: #ffffff;
    }

    .folder-title-left {
      display: flex;
      align-items: center;
      gap: 0.45rem;
    }

    .history-chat-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.45rem 0.65rem;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.14s ease;
      position: relative;
      margin-left: 0.4rem;
    }

    .history-chat-item:hover {
      background: var(--bg-hover);
    }

    .history-chat-item.active {
      background: var(--bg-input);
      border: 1px solid var(--border-color);
    }


    .chat-item-title {
      flex: 1;
      font-size: 0.82rem;
      color: var(--text-secondary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 400;
    }

    .history-chat-item:hover .chat-item-title,
    .history-chat-item.active .chat-item-title {
      color: var(--text-primary);
    }

    .chat-item-time {
      font-size: 0.75rem;
      color: var(--text-muted);
      font-variant-numeric: tabular-nums;
      margin-left: 0.45rem;
      flex-shrink: 0;
    }

    .chat-item-actions {
      display: none;
      align-items: center;
      gap: 0.35rem;
      margin-left: 0.45rem;
      flex-shrink: 0;
    }

    .history-chat-item:hover .chat-item-time {
      display: none;
    }
    .history-chat-item:hover .chat-item-actions {
      display: flex;
    }

    .btn-chat-item-action {
      background: transparent;
      border: none;
      color: var(--text-muted);
      font-size: 0.75rem;
      cursor: pointer;
      padding: 0.15rem 0.25rem;
      border-radius: 4px;
      transition: color 0.12s ease;
    }
    .btn-chat-item-action:hover {
      color: #ffffff;
    }
    .btn-chat-item-action.delete:hover {
      color: #ef4444;
    }

    .history-footer {
      padding: 0.65rem 0.85rem;
      border-top: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.76rem;
      color: var(--text-muted);
    }

    .btn-history-collapse {
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 0.3rem 0.5rem;
      border-radius: var(--radius-full);
      transition: all 0.14s ease;
    }
    .btn-history-collapse:hover {
      background: var(--bg-hover);
      color: #ffffff;
    }

    .btn-history-toggle-pill {
      background: transparent;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-full);
      padding: 0.35rem 0.75rem;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-secondary);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      transition: all 0.16s ease;
      margin-right: 0.5rem;
    }
    .btn-history-toggle-pill:hover {
      background: var(--bg-input);
      color: var(--main-color);
      border-color: var(--main-color);
    }

  
    .history-top-actions {
      padding: 0.95rem 0.85rem 0.55rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .btn-new-conversation {
      flex: 1;
      display: flex;
      align-items: center;
      gap: 0.65rem;
      padding: 0.65rem 0.95rem;
      background: var(--bg-input);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-full);
      color: var(--text-primary);
      font-family: inherit;
      font-size: 0.86rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.16s ease;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .btn-new-conversation:hover {
      background: var(--bg-hover);
      border-color: var(--border-color);
      color: #ffffff;
      transform: translateY(-1px);
    }

    .btn-hide-history-top {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-full);
      background: var(--bg-input);
      border: 1px solid var(--border-color);
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 0.82rem;
      transition: all 0.16s ease;
      flex-shrink: 0;
    }

    .btn-hide-history-top:hover {
      background: var(--bg-hover);
      color: #ffffff;
      border-color: var(--border-color);
    }


    .history-search-container {
      padding: 0.2rem 0.85rem 0.65rem;
      position: relative;
      display: flex;
      align-items: center;
    }

    .history-search-container .search-icon {
      position: absolute;
      left: 1.55rem;
      font-size: 0.76rem;
      color: var(--text-muted);
      pointer-events: none;
    }

    .history-search-container input {
      width: 100%;
      background: var(--bg-input);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      padding: 0.42rem 1.8rem 0.42rem 2rem;
      color: var(--text-primary);
      font-size: 0.8rem;
      font-family: inherit;
      outline: none;
      transition: border-color 0.15s ease;
    }
    .history-search-container input:focus {
      border-color: var(--main-color);
    }

    .chat-msg-icon {
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-right: 0.5rem;
      flex-shrink: 0;
    }

    .history-chat-item.active .chat-msg-icon {
      color: var(--main-color);
    }

    .empty-history-box {
      text-align: center;
      padding: 2.5rem 1rem;
      color: var(--text-muted);
      font-size: 0.82rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.45rem;
    }

    .empty-history-box i {
      font-size: 1.8rem;
      color: var(--text-muted);
      margin-bottom: 0.25rem;
    }

    .empty-history-box h4 {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--text-secondary);
    }

    .empty-history-box span {
      font-size: 0.78rem;
      color: var(--text-muted);
    }


  
    /* =========================================================
       FULL CHAT INTERFACE - ATELIER SLEEK TOP BAR & FULL CANVAS
       ========================================================= */
    body.chat-mode-active .top-header {
      display: none !important;
    }

    body.chat-mode-active #tab-playground {
      height: 100vh !important;
      max-height: 100vh !important;
      padding: 0 !important;
      overflow: hidden !important;
    }

    body.chat-mode-active .playground-split-layout {
      height: 100vh !important;
      max-height: 100vh !important;
    }

    .sleek-chat-header {
      height: 52px;
      min-height: 52px;
      padding: 0 1.25rem;
      background: var(--bg-header);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      z-index: 15;
      box-shadow: 0 2px 8px rgba(45, 35, 20, 0.03);
      position: relative;
    }


    .chat-header-left, .chat-header-right {
      display: flex;
      align-items: center;
      gap: 0.65rem;
    }

    /* SLEEK MODEL PICKER PILL */
    .chat-model-selector-pill {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--bg-card-elevated);
      border: 1px solid var(--border-color);
      padding: 0.32rem 0.85rem;
      border-radius: var(--radius-full);
      position: relative;
      cursor: pointer;
      transition: all 0.16s ease;
    }


    .chat-model-selector-pill:hover {
      border-color: var(--main-color);
      box-shadow: 0 2px 8px color-mix(in srgb, var(--main-color) 12%, transparent);
    }

    .sleek-model-dropdown {
      background: transparent;
      border: none;
      font-family: inherit;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text-primary);
      cursor: pointer;
      outline: none;
      padding-right: 0.25rem;
    }


    .sleek-model-dropdown option {
      background: var(--bg-card-elevated);
      color: var(--text-primary);
    }

    /* ACTION PILLS & ICONS IN HEADER */
    .btn-chat-pill-action {
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      color: var(--text-primary);
      padding: 0.35rem 0.85rem;
      border-radius: var(--radius-full);
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.45rem;
      transition: all 0.16s ease;
    }


    .btn-chat-pill-action:hover {
      background: var(--main-color);
      border-color: var(--main-color);
      color: #ffffff;
      transform: translateY(-1px);
    }

    .btn-chat-icon {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 0.85rem;
      transition: all 0.16s ease;
      position: relative;
    }


    .btn-chat-icon:hover {
      background: var(--bg-hover);
      color: var(--main-color);
      border-color: var(--main-color);
      transform: translateY(-1px);
    }


    /* HEADER TELEMETRY BADGE */
    .header-live-badge {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      background: color-mix(in srgb, var(--main-color) 8%, transparent);
      border: 1px solid color-mix(in srgb, var(--main-color) 20%, transparent);
      padding: 0.32rem 0.85rem;
      border-radius: var(--radius-full);
      font-size: 0.78rem;
      font-family: 'JetBrains Mono', monospace;
      color: var(--main-color);
      font-weight: 600;
      white-space: nowrap;
    }


    /* TUNING SETTINGS POPOVER */
    .options-dropdown-wrap {
      position: relative;
    }

    .tuning-popover {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 310px;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 1.15rem;
      box-shadow: 0 12px 36px rgba(45, 35, 20, 0.12);
      z-index: 50;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      animation: popoverFadeIn 0.15s ease-out;
    }


    @keyframes popoverFadeIn {
      from { opacity: 0; transform: translateY(-6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .tuning-popover-title {
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--text-primary);
      padding-bottom: 0.4rem;
      border-bottom: 1px solid var(--border-color);
    }


    .tuning-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      font-size: 0.8rem;
      color: var(--text-secondary);
    }


    .tuning-row label {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      font-weight: 500;
    }

    .tuning-divider {
      height: 1px;
      background: var(--border-color);
      margin: 0.2rem 0;
    }


    /* PLAYGROUND CHAT TABS STRIP */
    .chat-tabs-bar {
      height: 38px;
      min-height: 38px;
      background: var(--bg-sidebar);
      border-bottom: 1px solid var(--border-color);
      display: flex;
      align-items: center;
      padding: 0 0.85rem;
      gap: 0.4rem;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      z-index: 12;
    }
    .chat-tabs-bar::-webkit-scrollbar {
      display: none;
    }
    .chat-tab-pill {
      height: 28px;
      padding: 0 0.75rem;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-full);
      font-size: 0.78rem;
      color: var(--text-secondary);
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s ease;
      max-width: 190px;
      user-select: none;
    }
    .chat-tab-pill:hover {
      background: var(--bg-card);
      color: var(--text-primary);
      border-color: var(--main-color);
    }
    .chat-tab-pill.active {
      background: var(--bg-card);
      color: var(--main-color);
      font-weight: 600;
      border-color: var(--main-color);
      box-shadow: 0 2px 8px color-mix(in srgb, var(--main-color) 12%, transparent);
    }
    .chat-tab-pill .tab-icon {
      font-size: 0.75rem;
      opacity: 0.75;
    }
    .chat-tab-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
    }
    .chat-tab-close {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: 0.75rem;
      padding: 2px 3px;
      border-radius: 50%;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 0.55;
      transition: opacity 0.15s, color 0.15s, background 0.15s;
      margin-left: 2px;
    }
    .chat-tab-close:hover {
      opacity: 1;
      color: #ef4444;
      background: rgba(239, 68, 68, 0.15);
    }
    .btn-add-chat-tab {
      height: 28px;
      padding: 0 0.75rem;
      background: transparent;
      border: 1px dashed var(--border-color);
      border-radius: var(--radius-full);
      font-size: 0.78rem;
      color: var(--main-color);
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      transition: all 0.15s ease;
      white-space: nowrap;
      user-select: none;
    }
    .btn-add-chat-tab:hover {
      background: var(--main-color-soft);
      border-color: var(--main-color);
      transform: translateY(-1px);
    }

    /* FULL CHAT MESSAGES CANVAS */
    .playground-main-pane {
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 100%;
      min-width: 0;
      position: relative;
      background: var(--bg-app);
    }

    .chat-messages-area {
      flex: 1;
      overflow-y: auto;
      padding: 1.5rem 1.5rem 1.5rem 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 1.45rem;
      user-select: text;
    }

    .message-row {
      display: flex;
      gap: 0.9rem;
      max-width: 860px;
      width: 100%;
      margin: 0 auto;
    }

    .message-row.user {
      align-self: center;
      justify-content: flex-end;
    }

    .message-bubble {
      max-width: 82%;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: 18px;
      padding: 1rem 1.35rem;
      color: var(--text-primary);
      font-size: 0.92rem;
      line-height: 1.68;
      box-shadow: 0 4px 14px rgba(45, 35, 20, 0.03);
    }

    .message-row.user .message-bubble {
      background: var(--main-color);
      color: #ffffff;
      border-color: var(--main-color);
      border-top-right-radius: 4px;
    }


    /* FIXED USER AVATAR */
    .message-avatar.user-av {
      background: var(--main-color);
      color: #ffffff;
      border: 1px solid transparent;
    }


    /* FLOATING INPUT CONTAINER */
    .playground-input-container {
      padding: 0.75rem 1.5rem 1.15rem;
      background: var(--bg-app);
      border-top: 1px solid var(--border-color);
      position: relative;
      z-index: 10;
    }


    .input-box-wrapper {
      max-width: 860px;
      margin: 0 auto;
    }

  
    /* MAIN SIDEBAR COLLAPSE FOR FULL CHAT EXPERIENCE */
    .sidebar {
      transition: width 0.22s cubic-bezier(0.16, 1, 0.3, 1), min-width 0.22s cubic-bezier(0.16, 1, 0.3, 1), padding 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }
    body.sidebar-collapsed .sidebar {
      width: 0px !important;
      min-width: 0px !important;
      max-width: 0px !important;
      padding: 0 !important;
      border-right: none !important;
      overflow: hidden !important;
    }

  
    /* LIVE ENGINE ACTIVITY MONITOR IN DASHBOARD */
    .activity-filter-group {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .btn-filter-pill {
      background: var(--bg-card-sub);
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      padding: 0.38rem 0.85rem;
      border-radius: var(--radius-full);
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.45rem;
      transition: all 0.16s ease;
    }


    .btn-filter-pill.active {
      background: var(--main-color);
      border-color: var(--main-color);
      color: #ffffff;
      box-shadow: 0 2px 8px color-mix(in srgb, var(--main-color) 25%, transparent);
    }

    .live-metrics-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 0.75rem;
      margin-bottom: 1rem;
      padding: 0.85rem 1rem;
      background: var(--bg-card-sub);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
    }


    .metric-mini-pill {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }

    .metric-mini-label {
      font-size: 0.75rem;
      color: var(--text-muted);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .metric-mini-val {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--text-primary);
      font-family: 'JetBrains Mono', monospace;
    }


    .live-activity-feed {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      max-height: 380px;
      overflow-y: auto;
      padding-right: 0.35rem;
    }

    .activity-feed-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      padding: 0.65rem 0.95rem;
      background: var(--bg-card);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-sm);
      font-size: 0.8rem;
      transition: all 0.18s ease;
      animation: feedItemSlide 0.22s ease-out;
    }


    .activity-feed-item:hover {
      transform: translateX(2px);
      border-color: var(--main-color);
    }

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

    .activity-item-left {
      display: flex;
      align-items: center;
      gap: 0.65rem;
      min-width: 0;
      flex: 1;
    }

    .activity-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.22rem 0.55rem;
      border-radius: var(--radius-full);
      font-size: 0.78rem;
      font-weight: 700;
      white-space: nowrap;
      text-transform: uppercase;
    }

    .activity-badge.web {
      background: color-mix(in srgb, var(--main-color) 12%, transparent);
      color: var(--main-color);
      border: 1px solid color-mix(in srgb, var(--main-color) 25%, transparent);
    }

    .activity-badge.api {
      background: rgba(16, 185, 129, 0.12);
      color: #10b981;
      border: 1px solid rgba(16, 185, 129, 0.25);
    }

    .activity-badge.you {
      background: rgba(245, 158, 11, 0.15);
      color: #d97706;
      border: 1px solid rgba(245, 158, 11, 0.35);
      animation: pulseGlow 1.5s infinite;
    }

    @keyframes pulseGlow {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.6; }
    }

    .activity-desc {
      color: var(--text-primary);
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }


    .activity-item-right {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-shrink: 0;
      font-family: 'JetBrains Mono', monospace;
      font-size: 0.75rem;
      color: var(--text-muted);
    }

    .activity-tokens {
      color: var(--main-color);
      font-weight: 600;
    }

    /* ================= THEME SWITCHER (4-swatch dropdown) ================= */
    .theme-switcher { position: relative; }
    .theme-menu {
      position: absolute; right: 0; top: calc(100% + 8px); z-index: 80;
      min-width: 196px; background: var(--bg-popover);
      border: 1px solid var(--border-color); border-radius: var(--radius-md);
      padding: 0.4rem; box-shadow: var(--shadow-hover);
      opacity: 0; visibility: hidden; transform: translateY(-4px);
      transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .theme-menu.open { opacity: 1; visibility: visible; transform: none; }
    .theme-option {
      display: flex; align-items: center; gap: 0.6rem; width: 100%;
      min-height: 44px; /* BD2: B6 floor — rows measured h=34 (F4) */
      padding: 0.55rem 0.7rem; border: none; background: transparent;
      color: var(--text-primary); border-radius: var(--radius-sm);
      font-size: 0.82rem; font-weight: 600; cursor: pointer; text-align: left;
    }
    .theme-option:hover, .theme-option.active { background: var(--bg-hover); }
    .theme-swatch {
      width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, var(--swatch) 55%, var(--swatch2) 55%);
      border: 1px solid var(--border-color);
    }

    /* ================= RESPONSIVE (additive; >1024px untouched) ================= */
    .header-hamburger {
      display: none; align-items: center; justify-content: center;
      width: 40px; height: 40px; border: 1px solid var(--border-color);
      border-radius: var(--radius-md); background: var(--bg-card);
      color: var(--text-primary); cursor: pointer; margin-right: 0.4rem;
    }
    .sidebar-backdrop {
      position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 70;
      opacity: 0; visibility: hidden; transition: all 0.2s ease;
    }

    @media (max-width: 1024px) {
      .top-header { padding: 0 1.25rem; }
      .header-left p { display: none; }
      .nav-item { padding: 0.55rem 0.7rem; }
      /* Main nav goes off-canvas so the content pane spans the full width
         and stays centered (same pattern as phones). */
      .header-hamburger { display: flex; }
      .sidebar {
        padding: 0.9rem 0.8rem;
        position: fixed; left: 0; top: 0; bottom: 0; width: min(280px, 82vw); z-index: 80;
        transform: translateX(-105%); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: var(--shadow-hover);
      }
      body.sidebar-open .sidebar { transform: none; }
      body.sidebar-open .sidebar-backdrop { opacity: 1; visibility: visible; }
      /* History drawer becomes an overlay so the chat pane keeps the full
         remaining width and its content stays visually centered. */
      .playground-split-layout { position: relative; }
      .chat-history-sidebar {
        position: absolute; left: 0; top: 52px; bottom: 0; width: 275px; z-index: 16;
        transform: translateX(-105%); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: var(--shadow-hover);
      }
      .chat-history-sidebar:not(.collapsed) { transform: none; }
      .btn-hide-history-top { display: flex !important; }
    }

    @media (max-width: 900px) {
      .sidebar-brand { padding: 1.1rem 1rem; }
      .brand-title { font-size: 1.28rem; }
      .nav-menu { padding: 1rem 0.6rem; }
      .nav-item { padding: 0.65rem 0.7rem; font-size: 0.84rem; }
      .chat-history-sidebar { width: 240px; }
      .playground-input-container { padding: 1rem 1.25rem 1.25rem; }
      .message-bubble { max-width: 100%; }
      .sleek-chat-header { padding: 0 0.75rem; gap: 0.5rem; }
      .chat-header-left, .chat-header-right { gap: 0.45rem; min-width: 0; }
      .header-live-badge { display: none; }
    }

    @media (max-width: 768px) {
      :root { --header-h: 60px; }
      body { height: 100dvh; }
      .app-container { height: 100vh; height: 100dvh; }
      .sidebar-brand { padding: 1.15rem 1.1rem; }
      .brand-title { font-size: 1.35rem; }
      .nav-menu { padding: 1.1rem 0.75rem; }
      .nav-item { padding: 0.72rem 0.85rem; font-size: 0.88rem; }
      .sleek-chat-header { padding: 0 0.7rem; }
      .sleek-model-dropdown { max-width: 130px; }
      .stat-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
      .atelier-hero-card { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 1.6rem; }
      .hero-actions { width: 100%; }
    }

    @media (max-width: 480px) {
      :root { --header-h: 56px; }
      .top-header { height: var(--header-h); padding: 0 0.9rem; }
      .header-left h1 { font-size: 1.05rem; }
      .ping-badge .ping-label,
      .theme-label { display: none; }
      .btn-theme-toggle { padding: 0.42rem 0.7rem; }
      .sleek-chat-header { padding: 0 0.4rem; gap: 0.35rem; }
      .chat-header-left, .chat-header-right { gap: 0.35rem; }
      .btn-chat-icon { width: 30px; height: 30px; font-size: 0.78rem; }
      .chat-model-selector-pill { padding: 0.28rem 0.5rem; gap: 0.3rem; }
      .sleek-model-dropdown { max-width: 80px; font-size: 0.75rem; }
      .btn-chat-pill-action { padding: 0.32rem 0.55rem; }
      .btn-chat-pill-action span { display: none; }
      .playground-input-container { padding: 0.7rem 0.85rem 0.9rem; }
      .input-box-wrapper { border-radius: var(--radius-lg); padding: 0.4rem 0.6rem 0.4rem 0.9rem; }
      .message-row { padding: 0 0.85rem; }
      .message-bubble { max-width: 100%; padding: 1rem 1.05rem; }
      .playground-split-layout { height: calc(100dvh - var(--header-h)); }
      .btn-hero-primary, .btn-hero-secondary, .btn-copy-base,
      .btn-action-sm, .btn-send, .btn-mic, .nav-item { min-height: 44px; }
      .keys-table-container { overflow-x: auto; }
      table.keys-table { min-width: 0; }
      .stat-card { padding: 1rem; }
      .atelier-hero-card { padding: 1.25rem; border-radius: var(--radius-lg); }
      .hero-cta-row { flex-direction: column; width: 100%; }
    }

    /* ================= STEP 5: SPACING RHYTHM (<=1024 only; >1024 untouched) ================= */
    /* Sidebar/nav snap to an 8px rhythm (8/16/24/32); all other mobile values are multiples of 4px. */

    @media (max-width: 1024px) {
      .sidebar { padding: 0; }
      .sidebar-brand { padding: 1rem 1.5rem; }
      .nav-menu { padding: 1rem 0.5rem; gap: 0.5rem; }
      .nav-item { padding: 0.75rem 1rem; }
      .sidebar-bottom { padding: 1rem; }
      .input-box-wrapper { gap: 0.75rem; }
    }

    @media (max-width: 768px) {
      .history-top-actions { padding: 1rem 1rem 0.5rem; }
      .history-search-container { padding: 0.5rem 1rem 1rem; }
      .message-row { gap: 1rem; }
      .message-bubble { padding: 1rem 1.25rem; }
      .stat-card { padding: 1.5rem; }
      .guide-box { padding: 1.5rem; margin-top: 1.75rem; }
      .guide-card { padding: 1.25rem; }
      .atelier-hero-card { padding: 1.5rem; gap: 1.25rem; }
      .atelier-hero-actions { gap: 0.75rem; }
      .header-right { gap: 0.75rem; }
    }

    @media (max-width: 480px) {
      .playground-input-container { padding: 0.75rem 1rem 1rem; }
      .input-box-wrapper { padding: 0.5rem 0.75rem 0.5rem 1rem; }
      .message-row { padding: 0 1rem; }
      .message-bubble { padding: 1rem; }
      .stat-card { padding: 1rem; }
      .atelier-hero-card { padding: 1.25rem; }
      .atelier-hero-actions { gap: 0.5rem; }
      .header-right { gap: 0.5rem; }
    }


/* ── Provider Manager (Phase 2) ── */
.ab-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-size: 1.25rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-terracotta, #cf5c36) 16%, transparent);
  flex: none;
}
.ab-preview-msgs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 240px;
  overflow-y: auto;
  padding: 0.75rem;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-bg, #111318) 92%, transparent);
}
.ab-msg {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-width: 85%;
}
.ab-msg.user { align-self: flex-end; }
.ab-msg.bot { align-self: flex-start; }
.ab-msg-role {
  font-size: 0.75rem;
  opacity: 0.7;
}
.ab-msg-text {
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 0.45rem 0.65rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-bg, #111318) 70%, transparent);
}
.ab-test-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; font-size: 0.8rem; }
.ab-test-status-pill { flex: none; font-size: 0.75rem; padding: 0.16rem 0.6rem; border-radius: var(--radius-full, 999px); font-weight: 700; letter-spacing: 0.4px; }
.pm-table {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pm-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border, rgba(255,255,255,0.12));
  border-radius: 12px;
  font-size: 0.9rem;
}
.pm-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-bg, #111318) 92%, transparent);
  flex-wrap: wrap;
}
.pm-row-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 180px;
  min-width: 180px;
}
.pm-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto;
  background: var(--text-muted, #888);
}
.pm-dot.ok { background: #34c977; box-shadow: 0 0 6px rgba(52,201,119,0.6); }
.pm-dot.fail { background: #e5484d; box-shadow: 0 0 6px rgba(229,72,77,0.6); }
.pm-dot.unknown { background: #eab308; box-shadow: 0 0 6px rgba(234,179,8,0.5); }
.pm-dot.open { background: #a020f0; box-shadow: 0 0 6px rgba(160,32,240,0.6); }
.pm-title {
  font-weight: 700; font-size: 0.95rem; line-height: 1.25;
}
.pm-sub {
  font-size: 0.75rem; color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}
.pm-chips {
  display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center;
  flex: 1 1 280px;
}
.pm-chip {
  font-size: 0.78rem; padding: 0.3rem 0.75rem; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--brand-terracotta, #cf5c36) 14%, transparent);
  color: var(--text, #eee); border: 1px solid color-mix(in srgb, var(--brand-terracotta, #cf5c36) 30%, transparent);
  white-space: nowrap; display: inline-block;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.pm-chip.sec { background: color-mix(in srgb, #34c977 12%, transparent); border-color: color-mix(in srgb, #34c977 30%, transparent); }
.pm-chip.muted { background: color-mix(in srgb, var(--text-muted, #888) 12%, transparent); border-color: color-mix(in srgb, var(--text-muted, #888) 30%, transparent); }
.pm-chip-inuse { background: color-mix(in srgb, #34c977 12%, transparent); border-color: color-mix(in srgb, #34c977 30%, transparent); color: #4fd187; }
.pm-chip-idle { background: color-mix(in srgb, var(--text-muted, #888) 10%, transparent); border-color: color-mix(in srgb, var(--text-muted, #888) 26%, transparent); }
.pm-chip-suspended { background: color-mix(in srgb, #f0a63b 10%, transparent); border-color: color-mix(in srgb, #f0a63b 28%, transparent); color: #f2b55c; }
.pm-subrow-l2 { border-top: 1px dashed var(--border, rgba(255,255,255,0.1)); padding-top: 0.5rem; margin-top: 0.4rem; }
.pm-sched-panel { display: flex; flex-direction: column; gap: 0.6rem; }
.pm-sched-panel .pm-actions { justify-content: flex-end; }
.pm-hint { font-size: 0.7rem; color: var(--text-muted, #888); }
.ab-usage-panel { display: flex; flex-direction: column; gap: 0.5rem; }
.ab-usage-bars { display: flex; align-items: flex-end; gap: 2px; height: 84px; padding: 0.2rem 0 0; }
.ab-usage-day { display: flex; flex-direction: column-reverse; align-items: center; flex: 1; min-width: 4px; gap: 0.15rem; height: 100%; }
.ab-usage-day div { width: 100%; border-radius: 2px 2px 0 0; max-height: 100%; }
.ab-bar-tok { background: linear-gradient(180deg, #cf5c36, #a03d20); opacity: 0.9; }
.ab-bar-req { background: #34c977; opacity: 0.55; height: 3px !important; }
.pm-chip-btn {
  background: transparent; border: none; color: var(--text-muted, #888);
  cursor: pointer; font-size: 0.78rem; font-weight: 600;
  padding: 0.1rem 0.18rem; border-radius: var(--radius-full); line-height: 1;
}
.pm-chip-btn:hover { color: var(--text, #fff); background: color-mix(in srgb, var(--text-muted, #888) 15%, transparent); }
tr.ck-subrow > td { padding-top: 0.15rem; border-top: none; }
tr.ck-subrow .pm-subrow-l2 { padding-top: 0.55rem; padding-bottom: 0.75rem; }
.pm-actions {
  display: flex; gap: 0.4rem; align-items: center; flex: 0 0 auto;
}
.pm-actions button {
  background: color-mix(in srgb, var(--text-muted, #888) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-muted, #888) 25%, transparent);
  color: var(--text, #eee);
  border-radius: var(--radius-full); min-width: 30px; height: 30px; cursor: pointer;
  font-size: 0.78rem; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}
.pm-actions button:hover { background: color-mix(in srgb, var(--brand-terracotta, #cf5c36) 25%, transparent); }
.pm-circuit {
  font-size: 0.75rem; font-weight: 700; color: #fff;
  background: rgba(160,32,240,0.85); padding: 0.15rem 0.5rem; border-radius: 999px;
  letter-spacing: 0.04em; white-space: nowrap;
}
.pm-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.pm-modal {
  width: min(760px, 96vw); max-height: 90vh; overflow: auto;
  background: var(--panel-bg, #16181d);
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.pm-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border, rgba(255,255,255,0.1));
  position: sticky; top: 0; background: var(--panel-bg, #16181d); z-index: 1;
}
.pm-modal-header h3 { font-size: 1rem; margin: 0; }
.pm-modal-close {
  background: none; border: none; color: var(--text-muted);
  font-size: 1.1rem; cursor: pointer; padding: 0.3rem;
}
.pm-modal-body { padding: 1.25rem; }
.pm-field { margin-bottom: 0.9rem; }
.pm-field label {
  display: block; font-size: 0.78rem; font-weight: 600; margin-bottom: 0.35rem;
  color: var(--text-secondary, #bbb);
}
.pm-field .pm-hint { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.25rem; }
.pm-input,
.pm-select {
  width: 100%; padding: 0.55rem 0.7rem; font-size: 0.85rem;
  background: color-mix(in srgb, var(--panel-bg, #111318) 60%, #000);
  border: 1px solid var(--border, rgba(255,255,255,0.14)); border-radius: 8px;
  color: var(--text, #eee); box-sizing: border-box;
}
.pm-input:focus, .pm-select:focus { outline: none; border-color: var(--brand-terracotta, #cf5c36); }
.pm-subrow {
  display: flex; gap: 0.6rem; align-items: center;
  padding: 0.45rem 0; border-top: 1px dashed var(--border, rgba(255,255,255,0.08));
}
.pm-subrow:first-child { border-top: none; }
.pm-json {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
}
.pm-modal-actions {
  display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.25rem;
}
.pm-path-tabs {
  display: flex; gap: 0.5rem; margin-bottom: 0.9rem;
}
.pm-path-tab {
  flex: 1; padding: 0.5rem; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); cursor: pointer; font-weight: 600;
}
.pm-path-tab-active {
  background: color-mix(in srgb, var(--brand-terracotta) 16%, transparent);
  border-color: color-mix(in srgb, var(--brand-terracotta) 45%, transparent);
  color: var(--text);
}
.pm-auto {
  border: 1px solid var(--line); border-radius: 10px; padding: 0.75rem;
  margin-bottom: 0.9rem; background: color-mix(in srgb, var(--line) 35%, transparent);
}
.pm-auto-title { font-weight: 600; }
.pm-auto input { width: 100%; margin: 0.35rem 0; }
.pm-auto .btn-generate-key { margin-top: 0.5rem; width: 100%; }
.pm-auto .btn-action-sm { margin-top: 0.5rem; width: 100%; }
.pm-auto-status { font-size: 0.8rem; min-height: 1.1em; margin-top: 0.5rem; }
.pm-auto-phase { color: var(--text-muted); }
.pm-auto-ok { color: #16a34a; }
.pm-auto-err { color: #dc2626; }
.pm-auto-spin { display: inline-block; margin-left: 0.35rem; animation: pm-spin 1s linear infinite; }
.pm-auto-spin::before { content: '⟳'; }
@keyframes pm-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.pm-row-models {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 0.35rem;
  padding-top: 0.5rem; margin-top: 0.35rem;
  border-top: 1px dashed var(--border, rgba(255,255,255,0.08));
}

/* =========================================================
   RESPONSIVE OVERFLOW HARDENING (design-only, no logic)
   ========================================================= */

/* Chat bubbles must wrap long pasted strings / inline code */
.message-bubble {
  min-width: 0;
  overflow-wrap: anywhere;
}
.message-bubble code {
  overflow-wrap: anywhere;
}

/* Live Logs: keep long tokens visible instead of clipped */
.terminal-console {
  overflow-x: auto;
}
.log-line {
  overflow-wrap: anywhere;
}

/* Network Doctor rows: wrap details instead of overflowing the card */
#doctor-results > div {
  flex-wrap: wrap;
  gap: 0.4rem;
}
#doctor-results > div > div:first-child {
  min-width: 0;
  flex: 1;
  overflow-wrap: anywhere;
}
#doctor-results .badge-status-active {
  flex-shrink: 0;
}

/* Provider Manager chips: ellipsize instead of hanging past the row */
.pm-title {
  overflow-wrap: anywhere;
}

/* Tuning popover must never clip off the left viewport edge */
.tuning-popover {
  width: min(310px, calc(100vw - 1.5rem));
}

/* Keys page header wraps on narrow viewports */
.panel-card-header {
  flex-wrap: wrap;
  gap: 0.75rem;
}
.panel-card-title {
  min-width: 0;
  flex: 1 1 200px;
}

/* Dashboard grids shrink below their preferred min on small screens */
.stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.live-metrics-row {
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

/* Chat tabs bar: thin visible scrollbar so extra tabs are reachable */
.chat-tabs-bar {
  scrollbar-width: thin;
}
.chat-tabs-bar::-webkit-scrollbar {
  display: block;
  height: 4px;
}

/* Voice status bar: shrinking left cluster + ellipsized interim preview */
.voice-status-left {
  min-width: 0;
}
.voice-interim-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Playground pane height follows the responsive --header-h value
   (chat-mode keeps its own full-canvas !important overrides) */
body:not(.chat-mode-active) #tab-playground.view-content {
  height: calc(100dvh - var(--header-h)) !important;
}

/* Mobile top header: keep actions icon-only to stop 320-400px overflow */
@media (max-width: 640px) {
  .ping-badge,
  .btn-copy-base span {
    display: none;
  }

  /* API Keys table: stack as labelled cards so the 6-button action row never
     forces a horizontal scroll on phones (was min-width 600 + in-card scroll). */
  table.keys-table thead {
    display: none;
  }
  table.keys-table,
  table.keys-table tbody,
  table.keys-table tr {
    display: block;
    width: 100%;
  }
  table.keys-table tr {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin: 0 0 0.75rem 0;
    padding: 0.1rem 1rem 0.85rem;
  }
  table.keys-table tr:hover {
    background: var(--bg-hover);
  }
  table.keys-table tr:hover td {
    background: transparent;
  }
  table.keys-table td {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.3rem 0.9rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  table.keys-table td::before {
    width: 100%;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-secondary);
  }
  table.keys-table td:nth-child(1)::before { content: 'API Key'; }
  table.keys-table td:nth-child(2)::before { content: 'Created'; }
  table.keys-table td:nth-child(3)::before { content: 'Status'; }
  table.keys-table td:nth-child(4)::before { content: 'Actions'; }
  tr.ck-subrow {
    border: none;
    padding: 0;
  }
  tr.ck-subrow > td {
    display: block;
    border-bottom: none;
  }
  tr.ck-subrow > td::before {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   BD1 — NATIVE SELECT CHROME + THEMED OPTION POPUP (button-design plan).
   Evidence: all 11 <select>s shipped appearance:auto UA chrome (probe gate);
   option popups were unstyleable before. Global `select` rule is the shortest
   correct surface — every select in the app is token-fed. Popup styling follows
   the established #toast precedent for token-fed elements outside body subtree.
   Arrow = fixed mid-gray (#9aa0ae): contrast-safe on both dark cards (3 dark
   themes) and emerald's light cards; it sits at right 0.6rem to coexist with
   the inline padding on #pg-thinking/#pg-voice-lang (inline wins on padding-right).
   ════════════════════════════════════════════════════════════════ */
select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: var(--text-primary);
  background-color: var(--bg-card-sub);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa0ae' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  padding-right: 1.8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .18s, background-color .18s;
}
select:hover { border-color: var(--main-color); }
select:focus-visible { outline: 2px solid var(--main-color); outline-offset: 1px; }
select option {
  background-color: var(--bg-card-elevated);
  color: var(--text-primary);
  padding: 0.55rem 0.8rem;
}
select option:disabled { color: var(--text-muted); }
select optgroup {
  background-color: var(--bg-card-elevated);
  color: var(--text-muted);
  font-weight: 600;
  font-style: normal;
  padding: 0.4rem 0.8rem;
}
select::-ms-expand { display: none; }
/* Class-level reinforcement: `.control-select` (own background shorthand +
   padding) and `.sleek-model-dropdown` (transparent bg + 0.25rem padding)
   outrank the element rule above — re-assert only the arrow + clearance,
   keep their background/border/radius design intact. */
.control-select, .sleek-model-dropdown {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa0ae' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
  padding-right: 1.7rem;
}
.control-select option, .sleek-model-dropdown option { padding: 0.55rem 0.8rem; }

/* ════════════════════════════════════════════════════════════════
   B6 — TOUCH TARGETS ≥44px (WCAG 2.5.8 / plan block B6).
   Kept last in the cascade so these expansions win over earlier
   size rules (including ≤480 media overrides) at every viewport.
   ════════════════════════════════════════════════════════════════ */

/* Playground chat header icons: 30/34px → 44px box; strip padding so the
   box truly measures 44px; never let flex shrink them below the hit area */
.btn-chat-icon { width: 44px; height: 44px; padding: 0; flex: 0 0 auto; }
.btn-chat-pill-action { min-width: 44px; min-height: 44px; }

/* Header hamburger: 40px → 44px */
.header-hamburger { min-width: 44px; min-height: 44px; }

/* Theme toggle + dashboard filter pills → 44px tall */
.btn-theme-toggle { min-height: 44px; }
.btn-filter-pill { min-height: 44px; }

/* API keys action buttons + generate → 44px tall */
.btn-action-sm { min-height: 44px; }
.btn-generate-key { min-height: 44px; }

/* Provider Manager / AI Bots row action buttons: 30px → 44px;
   rows wrap on narrow screens so nothing overflows its card.
   min/max-width let the item shrink inside .pm-row so the wrap engages
   (flex: 0 0 auto alone sizes it to max-content and overflows at ≤480). */
.pm-actions { flex-wrap: wrap; row-gap: 0.35rem; min-width: 0; max-width: 100%; }
.pm-actions button {
  min-width: 44px;
  min-height: 44px;
}
.pm-enabled { min-width: 44px !important; min-height: 44px !important; }

/* Model reorder chevrons inside provider chips: tiny (18px) → 44px */
.pm-chip-btn {
  position: relative;
  min-width: 44px;
  min-height: 44px;
}

/* AI Bots sub-panels reuse .pm-actions buttons (44px, wrapped above) */
.pm-sched-panel .pm-actions button,
.ab-usage-panel .pm-actions button {
  min-width: 44px;
  min-height: 44px;
}

/* Chat tabs bar: pills ≥44px tall; close button 44x44 hit area */
.chat-tab-pill { min-height: 44px; }
.chat-tab-close { min-width: 44px; min-height: 44px; }
.btn-add-chat-tab { min-height: 44px; }

/* History drawer controls → 44px */
.btn-new-conversation { min-height: 44px; min-width: 44px; }
.btn-hide-history-top { min-width: 44px; min-height: 44px; }
.btn-history-collapse { min-width: 44px; min-height: 44px; }
#history-search-input { min-height: 44px; }
.btn-chat-item-action { min-width: 44px; min-height: 44px; }

/* Composer: attachment/mic/send → 44px */
.btn-attachment { min-width: 44px; min-height: 44px; }
.btn-send { width: 44px; height: 44px; }
.btn-mic { width: 44px; height: 44px; }

/* Chat model dropdown + settings selects: real height for a 44px hit */
.sleek-model-dropdown { min-height: 44px; }
.control-select { min-height: 44px; }

/* Sidebar developer link: inline text link → padded 44px row */
.dev-link { display: inline-flex; align-items: center; min-height: 44px; }

/* History item rows (nav-level list rows) ≥44px tall */
.history-chat-item { min-height: 48px; }

/* Dashboard stat-card reset icon button (inline-styled in the markup):
   !important is required to beat the inline padding/box */
#tab-dashboard .stat-card-top button { min-width: 44px !important; min-height: 44px !important; }

/* Settings: standalone inline link (YouTube) becomes a 44px row */
#tab-settings .panel-card p a { display: inline-flex; align-items: center; min-height: 44px; }

/* Sidebar nav rows: 43px → 44px */
.nav-item { min-height: 44px; }

/* Header copy-base button + hero CTAs → 44px tall */
.btn-copy-base { min-height: 44px; }
.btn-hero-primary,
.btn-hero-secondary { min-height: 44px; }

/* ≤480: the single-row chat header cannot fit every control at 44px wide.
   Hide duplicates instead of shrinking hit areas below 44px: the theme
   switcher exists in the top header, "New" exists in the tabs bar, and the
   telemetry badge is decorative (dashboard carries the real numbers). */
@media (max-width: 480px) {
  .sleek-chat-header .theme-switcher { display: none; }
  .sleek-chat-header .header-live-badge { display: none; }
  .sleek-chat-header .btn-chat-pill-action { display: none; }
  .chat-model-selector-pill { flex: 1 1 auto; min-width: 0; }
}

/* The chat header right cluster must be allowed to shrink before anything
   clips at ~1280 (chat area = viewport − sidebar there): the telemetry badge
   is the only elastic element, so give it ellipsis instead of pushing the
   tuning/theme buttons past the viewport edge. */
.chat-header-right { min-width: 0; }
.chat-header-right .header-live-badge {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══ AI BOTS SECTION — card grid redesign ═══════════════════════════════
   Scoped to the AI Bots tab (#ab-list / .ab-*). Provider Manager rows keep
   their own .pm-table/.pm-row styling; only this section opts into the grid. */

/* Section header icon badge + live bot counter */
.ab-head-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand-terracotta, #cf5c36) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-terracotta, #cf5c36) 32%, transparent);
  color: var(--brand-terracotta, #cf5c36);
  font-size: 0.95rem;
  flex: 0 0 auto;
}
#ab-count-chip {
  font-size: 0.72rem;
  padding: 0.14rem 0.6rem;
}
#ab-count-chip[hidden] { display: none; }

/* List container: responsive card grid (1 → 3 columns by width).
   Overrides .pm-table's column flex for this section only. */
#ab-list.ab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 0.9rem;
}
#ab-list.ab-grid .pm-empty {
  grid-column: 1 / -1;
}

/* Card: column layout overriding the shared .pm-row row-flex */
.pm-row.ab-card {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.pm-row.ab-card:hover {
  border-color: color-mix(in srgb, var(--brand-terracotta, #cf5c36) 45%, var(--border, rgba(255,255,255,0.1)));
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

/* Card head: avatar + name + status chips side by side */
.pm-row.ab-card .ab-card-head {
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}
.pm-row.ab-card .ab-emoji {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  background: color-mix(in srgb, var(--brand-terracotta, #cf5c36) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-terracotta, #cf5c36) 22%, transparent);
  flex: 0 0 auto;
}
.pm-row.ab-card .ab-card-id {
  min-width: 0;
}
.pm-row.ab-card .ab-card-id .pm-title {
  font-size: 1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-row.ab-card .ab-card-chips {
  flex: 0 0 auto;
  margin-top: 0.25rem;
}
.pm-row.ab-card .ab-card-chips .pm-chip {
  font-size: 0.68rem;
  padding: 0.12rem 0.5rem;
}
.pm-row.ab-card .ab-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted, #888);
  line-height: 1.45;
}

/* Meta line: keep monospace but wrap cleanly inside the card */
.pm-row.ab-card .ab-card-meta {
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.6;
}

/* Grouped action footer: main actions left, toggle + icon cluster right */
.pm-row.ab-card .ab-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  border-top: 1px dashed var(--border, rgba(255,255,255,0.1));
  padding-top: 0.65rem;
  margin-top: 0.1rem;
}
.pm-row.ab-card .ab-card-foot-main,
.pm-row.ab-card .ab-card-foot-side {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.pm-row.ab-card .ab-card-foot button {
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: color-mix(in srgb, var(--panel-bg, #111318) 60%, transparent);
  font-size: 0.78rem;
}
.pm-row.ab-card .ab-card-foot button:hover {
  background: color-mix(in srgb, var(--brand-terracotta, #cf5c36) 25%, transparent);
}
/* Disabled twin of the Suspend/Resume toggle: invisible, still in the DOM
   (batteries assert both attributes exist on the row). */
.pm-row.ab-card .ab-btn-hidden { display: none; }

/* Sub-panels (schedule / usage) flow inside the card */
.pm-row.ab-card .ab-card-sub { border-top: none; margin-top: 0; }

@media (max-width: 420px) {
  #ab-list.ab-grid { grid-template-columns: 1fr; }
  .pm-row.ab-card .ab-card-foot { flex-direction: column; align-items: stretch; }
  .pm-row.ab-card .ab-card-foot-side { justify-content: flex-end; }
}
/* ══ end AI BOTS section ═════════════════════════════════════════════ */

/* ══ PLAYGROUND CHAT HEADER — decluttered single-row restyle ═══════════
   Scope: ONLY .playground-main-pane .sleek-chat-header (AI Playground and
   its Chat History view). No other header in the app is affected.
   Fixes: doubled model-selector chevrons (custom + native select arrow),
   duplicated model name in the status pill (script.js side), cramped
   right-edge icons, unstructured clusters. */

/* Model pill: ONE chevron — suppress the native select arrow, keep the
   custom one; pill grows to absorb part of the dead middle space. */
.playground-main-pane .chat-model-selector-pill {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 420px;
  gap: 0.55rem;
  /* 0.15rem (was 0.42rem): pill = 44px select + padding + border = ~51px
     so it fits INSIDE the 52px bar — 0.42rem made it 59px, overflowing
     the header top/bottom edges. */
  padding: 0.15rem 0.95rem;
}
.playground-main-pane .chat-model-selector-pill > .fa-bolt-lightning {
  color: var(--brand-terracotta);
  font-size: 0.85rem;
  flex: 0 0 auto;
}
.playground-main-pane .sleek-model-dropdown {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Root cause of the DOUBLE chevron: style.css ~3516 (.control-select,
     .sleek-model-dropdown) paints a second chevron as a background-image.
     appearance:none only kills the native arrow — this kills the painted one.
     Specificity 0,2,0 beats that rule's 0,1,0 regardless of order. */
  background-image: none;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  /* Grow with the pill so the chevron stays pinned to the pill's right
     edge instead of leaving dead space after it. */
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 0;
}
.playground-main-pane .sleek-model-dropdown::-ms-expand { display: none; }
.select-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--text-dim, #777);
  font-size: 0.62rem;
  pointer-events: none;
  flex: 0 0 auto;
  transition: transform 0.16s ease;
}
.chat-model-selector-pill:focus-within .select-chevron { transform: rotate(180deg); }

/* Cluster rhythm + balance: the left cluster stretches into the middle void
   so the growing pill (flex:1, capped 420px) absorbs dead space instead of
   both clusters hugging the edges with a wide gap between them. Airier gaps
   than the base 0.65rem/0.75rem (measured 10.4px/12.8px before). */
.playground-main-pane .sleek-chat-header { gap: 0.9rem; }
.playground-main-pane .chat-header-left { flex: 1 1 auto; gap: 0.75rem; }

/* Visual grouping: a divider separates the navigation/model cluster from
   the status + action cluster; even gaps replace the end-cramming. */
.playground-main-pane .chat-header-right.with-divider {
  position: relative;
  padding-left: 1.1rem;
  gap: 0.9rem;
}
.playground-main-pane .chat-header-right.with-divider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 22px;
  background: var(--border-color);
}
.playground-main-pane .chat-header-right.with-divider .btn-chat-icon {
  margin-left: 0.15rem;
  flex: 0 0 auto;
}

/* ≤900: the scoped rhythm rules above (specificity 0,2,0) would otherwise
   beat the base ≤900 media rules — mirror the tighter rhythm here. */
@media (max-width: 900px) {
  .playground-main-pane .sleek-chat-header { gap: 0.5rem; }
  .playground-main-pane .chat-header-left { gap: 0.45rem; }
  .playground-main-pane .chat-header-right.with-divider { gap: 0.55rem; padding-left: 0.8rem; }
}
@media (max-width: 768px) {
  /* select is capped at 130px here — don't stretch the pill and leave dead
     space after its chevron; the header void absorbs it instead. */
  .playground-main-pane .chat-model-selector-pill { flex: 0 1 auto; }
}
@media (max-width: 480px) {
  /* 0.12rem vertical keeps the pill (44 + ~3.8 + 2 ≈ 50px) inside the 52px bar */
  .playground-main-pane .chat-model-selector-pill { padding: 0.12rem 0.55rem; gap: 0.3rem; }
  .playground-main-pane .sleek-chat-header { gap: 0.35rem; }
  .playground-main-pane .chat-header-left { gap: 0.35rem; }
  .playground-main-pane .chat-header-right.with-divider { gap: 0.45rem; padding-left: 0.7rem; }
}
/* ══ end playground chat header restyle ═════════════════════════════ */

/* ══ CHAT BUBBLE COPY + DOWNLOAD BUTTONS ════════════════════════════ */
/* Ghost affordances in the corner of every Playground chat bubble —
   user + AI. Copy grabs the raw source (AI: markdown with code fences;
   user: visible text). Download (AI bubbles only) saves the response as a
   timestamped .md file. Appear on hover/focus; visible on touch. */
.message-bubble { position: relative; }
.msg-copy-btn,
.msg-download-btn {
  position: absolute;
  top: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-bg, #111318) 55%, transparent);
  color: var(--text-muted, #888);
  font-size: 0.72rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
  z-index: 2;
}
.msg-copy-btn { right: 6px; }
.msg-download-btn { right: 38px; }
.message-row:hover .msg-copy-btn,
.message-row:hover .msg-download-btn,
.msg-copy-btn:focus-visible,
.msg-download-btn:focus-visible {
  opacity: 1;
}
.msg-copy-btn:hover,
.msg-download-btn:hover {
  background: color-mix(in srgb, var(--brand-terracotta, #cf5c36) 30%, transparent);
  color: var(--text-primary, #eee);
}
.msg-copy-btn:active,
.msg-download-btn:active { transform: scale(0.94); }

/* Touch devices have no hover: keep the affordances reachable */
@media (hover: none) {
  .msg-copy-btn,
  .msg-download-btn { opacity: 0.55; }
}

/* User bubbles are filled with the accent color — invert the ghost buttons
   (user bubbles carry copy only; download is AI-only) */
.message-row.user .msg-copy-btn {
  background: color-mix(in srgb, #000 25%, transparent);
  color: rgba(255, 255, 255, 0.85);
}
.message-row.user .msg-copy-btn:hover {
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}
/* ══ end chat bubble copy + download buttons ═══════════════════════ */

/* ════════════════════════════════════════════════════════════════
   CUSTOM SELECT MENU — the options popup redesign.
   The native <select> stays untouched as the trigger (values, tests,
   aria keep working); its browser-rendered popup is suppressed and
   replaced by this token-fed listbox so option styling blends with
   every theme (obsidian / violet / crimson / emerald) automatically:
   every color below resolves from body[data-theme] custom properties.
   JS: selmenu enhancer at the end of script.js (open/close, flip,
   keyboard, change-event sync, MutationObserver for dynamic forms).
   ════════════════════════════════════════════════════════════════ */
.selmenu {
  position: fixed;
  z-index: 2500;
  min-width: 160px;
  max-width: 480px;
  max-height: min(320px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  margin: 0;
  background: var(--bg-card-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30), 0 4px 10px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.selmenu.open { opacity: 1; transform: translateY(0); }
.selmenu::-webkit-scrollbar { width: 8px; }
.selmenu::-webkit-scrollbar-track { background: transparent; }
.selmenu::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-full);
}

/* Optgroup section header */
.selmenu-group {
  padding: 0.55rem 0.7rem 0.25rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  user-select: none;
}
.selmenu-group:first-child { padding-top: 0.2rem; }

/* Option row */
.selmenu-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 40px;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.84rem;
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
}
.selmenu-option .selmenu-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.selmenu-option:hover:not(.disabled),
.selmenu-option.active {
  background: var(--main-color-soft);
}
.selmenu-option.selected {
  color: var(--main-color);
  font-weight: 600;
}
.selmenu-option.selected .selmenu-check { color: var(--main-color); }
.selmenu-check {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 0.74rem;
}
.selmenu-option.disabled {
  color: var(--text-muted);
  opacity: 0.55;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .selmenu { transition: none; }
}