:root {
      --bg: #0f1117;
      --panel: rgba(255, 255, 255, 0.04);
      --panel-soft: rgba(255, 255, 255, 0.02);
      --border: rgba(255, 255, 255, 0.1);
      --text: #e2e8f0;
      --muted: #94a3b8;
      --brand: #6366f1;
      --brand-strong: #4f46e5;
      --ok: #22c55e;
      --warn: #f59e0b;
      --danger: #ef4444;
      --shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
      --radius-panel: 16px;

      --scroll-track: rgba(0, 0, 0, 0.2);
      --scroll-thumb: rgba(255, 255, 255, 0.1);
      --scroll-thumb-hover: rgba(255, 255, 255, 0.2);
      --input-bg: rgba(0, 0, 0, 0.2);
      --btn-ghost-bg: rgba(255, 255, 255, 0.05);
      --btn-ghost-hover: rgba(255, 255, 255, 0.1);
      --side-voice-bg: rgba(0, 0, 0, 0.18);
      --select-bg: rgba(255, 255, 255, 0.05);
      --select-bg-focus: rgba(255, 255, 255, 0.08);
      --radio-bg: rgba(255, 255, 255, 0.03);
      --toggle-bg: rgba(255, 255, 255, 0.04);
      --toggle-hover-bg: rgba(255, 255, 255, 0.08);
      --chip-bg: rgba(0, 0, 0, 0.2);
      --chip-dot-bg: var(--panel);
      --thought-bg: rgba(0, 0, 0, 0.3);
      --voice-name-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.04)), rgba(15, 17, 23, 0.55);
      --debug-card-bg: #1a1b2e;
    }

    :root[data-theme="light"] {
      --bg: #f8fafc;
      --panel: rgba(255, 255, 255, 0.7);
      --panel-soft: rgba(255, 255, 255, 0.5);
      --border: rgba(0, 0, 0, 0.15);
      --text: #0f172a;
      --muted: #64748b;
      --brand: #4f46e5;
      --brand-strong: #4338ca;
      --shadow: 0 4px 16px rgba(0, 0, 0, 0.06);

      --scroll-track: rgba(0, 0, 0, 0.05);
      --scroll-thumb: rgba(0, 0, 0, 0.15);
      --scroll-thumb-hover: rgba(0, 0, 0, 0.25);
      --input-bg: rgba(255, 255, 255, 0.6);
      --btn-ghost-bg: rgba(0, 0, 0, 0.05);
      --btn-ghost-hover: rgba(0, 0, 0, 0.1);
      --side-voice-bg: rgba(0, 0, 0, 0.03);
      --select-bg: rgba(255, 255, 255, 0.5);
      --select-bg-focus: rgba(255, 255, 255, 0.8);
      --radio-bg: rgba(0, 0, 0, 0.05);
      --toggle-bg: rgba(0, 0, 0, 0.04);
      --toggle-hover-bg: rgba(0, 0, 0, 0.08);
      --chip-bg: rgba(0, 0, 0, 0.05);
      --chip-dot-bg: #cbd5e1;
      --thought-bg: rgba(255, 255, 255, 0.6);
      --voice-name-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)), rgba(248, 250, 252, 0.8);
      --debug-card-bg: #f1f5f9;
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      height: 100%;
      font-family: "Manrope", "IBM Plex Sans", "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(1200px 600px at -10% -20%, rgba(99, 102, 241, 0.1) 0%, transparent 40%),
        radial-gradient(1000px 500px at 120% -10%, rgba(99, 102, 241, 0.08) 0%, transparent 45%),
        var(--bg);
    }

    body {
      min-height: 100vh;
      min-height: 100dvh;
      padding: 16px;
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

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

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

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

    .hidden {
      display: none !important;
    }

    .sr-only {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      white-space: nowrap !important;
      border: 0 !important;
    }

    .login-shell {
      min-height: calc(100vh - 32px);
      min-height: calc(100dvh - 32px);
      display: grid;
      place-items: center;
    }

    .login-card {
      width: min(440px, 100%);
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 24px;
      box-shadow: var(--shadow);
      padding: 28px;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      letter-spacing: 0.2px;
      font-size: 22px;
      margin: 0;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    .brand-dot {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: linear-gradient(120deg, var(--brand), #8b5cf6);
      box-shadow: 0 0 0 6px rgba(99, 102, 241, 0.14);
      flex: 0 0 auto;
    }

    .lead {
      margin: 10px 0 0;
      color: var(--muted);
      line-height: 1.45;
      font-size: 14px;
    }

    .stack {
      margin-top: 20px;
      display: grid;
      gap: 12px;
    }

    label {
      display: grid;
      gap: 7px;
      color: var(--text);
      font-size: 13px;
      font-weight: 600;
    }

    input,
    select {
      width: 100%;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      border-radius: 12px;
      padding: 12px 14px;
      outline: none;
      font: inherit;
    }

    input:focus,
    select:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.13);
    }

    button {
      border: 0;
      border-radius: 999px;
      padding: 11px 16px;
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.16s ease;
    }

    button:disabled {
      cursor: not-allowed;
      opacity: 0.58;
    }

    .btn-main {
      background: var(--brand);
      color: #fff;
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
    }

    .btn-main:hover:not(:disabled) {
      transform: translateY(-1px);
      background: var(--brand-strong);
    }

    .btn-ghost {
      background: var(--btn-ghost-bg);
      color: var(--text);
      border: 1px solid var(--border);
    }

    .btn-ghost:hover {
      background: var(--btn-ghost-hover);
    }

    .btn-danger {
      background: var(--danger);
      color: white;
    }

    .btn-danger:hover {
      background: #dc2626;
    }

    .side-link {
      display: inline-block;
      text-align: center;
      text-decoration: none;
    }

    .side-tools {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    .side-voice {
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--side-voice-bg);
    }

    .side-voice-title {
      margin: 0;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
    }

    .side-voice-field {
      display: grid;
      gap: 4px;
    }

    .side-voice-field>span {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.03em;
      color: var(--muted);
      text-transform: uppercase;
    }

    .side-voice-field select {
      height: 38px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--select-bg);
      color: var(--text);
      padding: 0 10px;
      font-size: 12px;
      font-weight: 700;
      outline: none;
    }

    :root[data-theme="light"] .side-voice-field select:not(.voice-name-select) {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    }

    .side-voice-field select:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
      background: var(--select-bg-focus);
    }

    :root[data-theme="light"] .side-voice-field select:not(.voice-name-select):focus {
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2), 0 6px 16px rgba(0, 0, 0, 0.22);
    }

    .side-voice-radio {
      display: grid;
      gap: 6px;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--radio-bg);
    }

    .side-voice-radio label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
    }

    .side-voice-radio input[type="radio"] {
      width: auto;
      margin: 0;
      border: 0;
      padding: 0;
      background: transparent;
      box-shadow: none;
      accent-color: var(--brand);
    }

    .debug-mode-toggle {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 8px 12px;
      background: var(--toggle-bg);
      color: var(--text);
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      user-select: none;
    }

    .debug-mode-toggle:hover {
      background: var(--toggle-hover-bg);
    }

    .debug-mode-toggle input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
    }

    .debug-switch {
      position: relative;
      width: 34px;
      height: 20px;
      border-radius: 999px;
      background: rgba(148, 163, 184, 0.3);
      transition: background 0.2s ease;
    }

    .debug-switch::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #f8fafc;
      transition: transform 0.2s ease;
    }

    .debug-mode-toggle input:checked+.debug-switch {
      background: rgba(99, 102, 241, 0.8);
    }

    .debug-mode-toggle input:checked+.debug-switch::after {
      transform: translateX(14px);
    }

    .status {
      min-height: 20px;
      margin-top: 10px;
      font-size: 13px;
      color: var(--muted);
    }

    .status.ok {
      color: var(--ok);
    }

    .status.warn {
      color: var(--warn);
    }

    .status.error {
      color: var(--danger);
    }

    .app-shell {
      height: calc(100vh - 32px);
      height: calc(100dvh - 32px);
      display: grid;
      grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
      gap: 14px;
      overflow: hidden;
    }

    .side {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-panel);
      box-shadow: var(--shadow);
      padding: 16px;
      display: grid;
      align-content: start;
      gap: 14px;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 8px 12px;
      background: var(--chip-bg);
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .chip-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--chip-dot-bg);
      flex-shrink: 0;
    }

    .chip-dot.live {
      background: var(--ok);
      box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.16);
    }

    .chip-dot.paused,
    .voice-chip-dot.paused {
      background: #ffa500;
      box-shadow: none;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: var(--radius-panel);
      box-shadow: var(--shadow);
      display: grid;
      grid-template-rows: 1fr auto;
      min-height: 0;
      overflow: hidden;
      position: relative;
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    .panel.voice-mode-active {
      border-color: rgba(239, 68, 68, 0.5);
      box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
    }

    .messages {
      padding: 18px;
      overflow-y: auto;
      min-height: 0;
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .message {
      display: grid;
      gap: 5px;
      max-width: min(720px, 92%);
    }

    .message.assistant {
      justify-self: start;
    }

    .message.user {
      justify-self: end;
    }

    .message.system {
      justify-self: center;
      max-width: 100%;
    }

    .bubble {
      border-radius: 18px;
      padding: 12px 14px;
      line-height: 1.4;
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 15px;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    .assistant .bubble {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid var(--border);
      color: var(--text);
      border-top-left-radius: 8px;
    }

    .user .bubble {
      background: linear-gradient(135deg, var(--brand), #8b5cf6);
      color: #fff;
      border-top-right-radius: 8px;
    }

    .system .bubble {
      background: rgba(255, 255, 255, 0.02);
      border: 1px dashed rgba(255, 255, 255, 0.2);
      color: var(--muted);
      font-size: 13px;
      text-align: center;
      border-radius: 12px;
    }

    .message.system.system-debug-left {
      justify-self: start;
      max-width: min(1100px, 98%);
    }

    .message.system.audio-fallback {
      justify-self: start;
      max-width: min(520px, 100%);
    }

    .message.system.audio-fallback .bubble {
      display: grid;
      gap: 10px;
      text-align: left;
      border-style: solid;
    }

    .audio-fallback-note {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .audio-fallback-player {
      display: block;
      width: min(320px, 100%);
      max-width: 100%;
    }

    .message.system.system-debug-left .bubble {
      text-align: left;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
      font-size: 12px;
      line-height: 1.35;
      white-space: pre-wrap;
    }

    .message.system.system-debug-left .bubble details.debug-json-collapsible {
      border: 1px solid rgba(148, 163, 184, 0.35);
      border-radius: 10px;
      background: rgba(15, 23, 42, 0.35);
      padding: 7px 9px;
    }

    .message.system.system-debug-left .bubble summary.debug-json-summary {
      cursor: pointer;
      color: #cbd5e1;
      font-weight: 700;
      outline: none;
      user-select: none;
    }

    .message.system.system-debug-left .bubble summary.debug-json-summary:hover {
      color: #e2e8f0;
    }

    .message.system.system-debug-left .bubble pre.debug-json-body {
      margin: 8px 0 0;
      padding: 8px;
      border-radius: 8px;
      border: 1px solid rgba(148, 163, 184, 0.18);
      background: rgba(2, 6, 23, 0.45);
      color: #cbd5e1;
      white-space: pre-wrap;
      word-break: break-word;
      overflow: auto;
    }

    .message.system.system-debug-left .meta {
      text-transform: none;
      letter-spacing: 0;
      color: #94a3b8;
      font-size: 11px;
      font-weight: 700;
      padding-left: 2px;
    }

    .message.thought {
      justify-self: start;
      max-width: 85%;
    }

    .message.thought .bubble {
      background: rgba(0, 0, 0, 0.2);
      border: 1px solid var(--border);
      border-left: 3px solid var(--muted);
      color: var(--muted);
      font-family: monospace;
      font-size: 13px;
      border-top-left-radius: 4px;
      box-shadow: none;
    }

    .message.thought .meta {
      color: #64748b;
    }

    .meta {
      font-size: 11px;
      color: var(--muted);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 0 3px;
    }

    .panel-foot {
      border-top: 0;
      background: transparent;
      padding: 12px 14px 14px;
      display: grid;
      gap: 10px;
    }

    .composer {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto auto auto;
      gap: 8px;
      align-items: end;
    }

    .composer textarea {
      resize: none;
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 11px 13px;
      min-height: 44px;
      max-height: 150px;
      font: inherit;
      color: var(--text);
      outline: none;
      background: rgba(255, 255, 255, 0.05);
      line-height: 1.35;
      transition: border-color 0.2s;
    }

    .composer textarea:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
      background: rgba(255, 255, 255, 0.08);
    }

    .mic-btn {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      padding: 0;
      background: rgba(255, 255, 255, 0.05);
      color: var(--text);
      font-size: 20px;
      border: 1px solid var(--border);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
      position: relative;
      z-index: 5;
    }

    .voice-name-select {
      height: 44px;
      min-width: 126px;
      max-width: 180px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--voice-name-bg);
      color: var(--text);
      padding: 0 12px;
      font-size: 13px;
      font-weight: 700;
      outline: none;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .voice-name-select:focus {
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.24);
    }

    .voice-name-select option {
      background: var(--bg);
      color: var(--text);
    }

    .voice-name-select:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .mic-btn:hover {
      transform: translateY(-2px);
      background: var(--mic-hover-bg, rgba(255, 255, 255, 0.1));
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    }

    .mic-btn.live {
      background: var(--danger);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
      animation: mic-pulse 2s infinite;
    }

    .mic-btn.live svg {
      stroke: #fff;
    }

    .mic-btn.paused {
      background: rgba(255, 165, 0, 0.15);
      border-color: rgba(255, 165, 0, 0.5);
      color: #ffa500;
      animation: none;
      box-shadow: 0 0 0 5px rgba(255, 165, 0, 0.08);
    }

    .mic-btn .mic-countdown {
      position: absolute;
      bottom: -2px;
      right: -2px;
      font-size: 10px;
      font-weight: 700;
      color: #fff;
      background: rgba(255, 60, 60, 0.85);
      border-radius: 8px;
      min-width: 18px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      padding: 0 3px;
      pointer-events: none;
    }

    @keyframes mic-pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
      }

      70% {
        box-shadow: 0 0 0 12px rgba(239, 68, 68, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
      }
    }

    .voice-thought-bubble {
      background: var(--thought-bg) !important;
      border: 1px solid var(--border) !important;
      border-left: 3px solid #8b5cf6 !important;
      color: #94a3b8 !important;
      font-family: monospace;
      font-size: 13px !important;
    }

    .send-btn {
      border-radius: 14px;
      padding: 0 15px;
      height: 44px;
    }

    .foot-row {
      display: flex;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .foot-meta {
      color: var(--muted);
      font-size: 12px;
    }

    .message.debug {
      justify-self: stretch;
      max-width: 100%;
    }

    .message.debug .bubble {
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      white-space: normal;
    }

    .debug-card {
      background: var(--debug-card-bg);
      border: 1px solid rgba(148, 163, 184, 0.3);
      border-radius: 14px;
      box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4);
      overflow: hidden;
    }

    .debug-head {
      padding: 10px 12px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.22);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: rgba(15, 23, 42, 0.58);
    }

    .debug-head-title {
      font-size: 13px;
      font-weight: 800;
      color: #f8fafc;
      max-width: min(80%, 880px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .debug-head-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #94a3b8;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }

    .debug-body {
      padding: 10px 12px 12px;
      display: grid;
      gap: 10px;
      align-content: start;
    }

    .debug-section {
      border: 1px solid rgba(148, 163, 184, 0.22);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(15, 23, 42, 0.35);
    }

    .debug-section-head {
      border: 0;
      margin: 0;
      width: 100%;
      padding: 9px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      background: rgba(255, 255, 255, 0.03);
      color: #cbd5e1;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .debug-section-body {
      padding: 9px 10px 10px;
      display: grid;
      gap: 8px;
    }

    .debug-kv {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 12px;
      color: #cbd5e1;
      line-height: 1.5;
    }

    .debug-kv span {
      display: inline-flex;
      gap: 4px;
      white-space: nowrap;
    }

    .debug-table-wrap {
      border: 1px solid rgba(148, 163, 184, 0.2);
      border-radius: 10px;
      overflow: auto;
      background: rgba(15, 23, 42, 0.35);
    }

    .debug-table {
      width: 100%;
      border-collapse: collapse;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 12px;
      color: #e2e8f0;
      min-width: 680px;
    }

    .debug-table th,
    .debug-table td {
      padding: 6px 8px;
      border-bottom: 1px solid rgba(148, 163, 184, 0.18);
      vertical-align: top;
      text-align: left;
    }

    .debug-table th {
      color: #93c5fd;
      font-weight: 700;
      background: rgba(30, 41, 59, 0.45);
      position: sticky;
      top: 0;
      z-index: 1;
    }

    .debug-table tbody tr:nth-child(even) {
      background: rgba(30, 41, 59, 0.22);
    }

    .debug-table tbody tr:hover {
      background: rgba(56, 189, 248, 0.1);
    }

    .debug-text-cell {
      max-width: 320px;
      word-break: break-word;
      white-space: normal;
    }

    .debug-score-cell {
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .debug-score-bar {
      width: 70px;
      height: 5px;
      border-radius: 999px;
      background: rgba(148, 163, 184, 0.25);
      overflow: hidden;
      flex: 0 0 auto;
    }

    .debug-score-bar>i {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #22c55e, #38bdf8);
    }

    .debug-source-chip {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 2px 7px;
      font-size: 10px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: #020617;
      background: #94a3b8;
    }

    .debug-source-chip.voice {
      background: #22c55e;
    }

    .debug-source-chip.recon {
      background: #f59e0b;
    }

    .debug-source-chip.chat {
      background: #38bdf8;
    }

    .debug-confidence {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .debug-confidence.high {
      color: #14532d;
      background: #86efac;
    }

    .debug-confidence.medium {
      color: #78350f;
      background: #fde68a;
    }

    .debug-confidence.low {
      color: #7f1d1d;
      background: #fca5a5;
    }

    .debug-muted {
      color: #94a3b8;
      font-size: 11px;
    }

    body.v2-layout {
      background: #fafbfd;
      color: #1f2937;
      --v2-chat-column-width: 860px;
      font-family: "Google Sans Text", "Google Sans", "Noto Sans", "Segoe UI", sans-serif;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body.v2-layout button,
    body.v2-layout input,
    body.v2-layout textarea,
    body.v2-layout select {
      font-family: inherit;
    }

    body.v2-layout .app-shell {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      gap: 0;
      height: calc(100vh - 32px);
      height: calc(100dvh - 32px);
    }

    body.v2-layout .side {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      border: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      clip-path: inset(50%);
      white-space: nowrap;
    }

    body.v2-layout .panel {
      background: rgba(250, 251, 253, 0.92);
      border: 0;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      grid-template-rows: auto 1fr auto;
      border-radius: 0;
      overflow: visible;
    }

    body.v2-layout .panel.voice-mode-active {
      border-color: transparent;
      box-shadow: none;
    }

    .v2-topbar {
      position: absolute;
      top: 10px;
      right: clamp(8px, 4vw, 28px);
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      padding: 0;
      margin: 0;
    }

    .v2-user-chip {
      min-width: 0;
      max-width: min(44vw, 360px);
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(176, 186, 202, 0.24);
      color: #556072;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      box-shadow: 0 6px 18px rgba(15, 23, 42, 0.045);
    }

    .v2-logout-btn {
      border-radius: 999px;
      padding: 8px 13px;
      height: 36px;
      background: rgba(255, 255, 255, 0.76);
      color: #465266;
      border: 1px solid rgba(176, 186, 202, 0.26);
      font-size: 13px;
      font-weight: 600;
      box-shadow: 0 6px 16px rgba(15, 23, 42, 0.045);
    }

    .v2-logout-btn:hover {
      background: rgba(255, 255, 255, 0.92);
    }

    body.v2-layout .messages {
      padding: 52px clamp(14px, 4vw, 30px) 14px;
      gap: 14px;
      justify-items: center;
    }

    body.v2-layout .message {
      max-width: min(var(--v2-chat-column-width), 100%);
    }

    body.v2-layout .message.assistant,
    body.v2-layout .message.user,
    body.v2-layout .message.system:not(.system-debug-left) {
      width: min(var(--v2-chat-column-width), 100%);
      max-width: min(var(--v2-chat-column-width), 100%);
      justify-self: center;
    }

    body.v2-layout .message.assistant {
      justify-items: start;
    }

    body.v2-layout .message.user {
      justify-items: end;
    }

    body.v2-layout .message.system:not(.system-debug-left) {
      justify-items: center;
    }

    body.v2-layout .assistant .bubble {
      background: transparent;
      border: 0;
      color: #202124;
      box-shadow: none;
      padding: 0;
      border-radius: 0;
      font-size: 16px;
      line-height: 1.55;
      letter-spacing: -0.01em;
    }

    body.v2-layout .user .bubble {
      background: #e7ecf3;
      border: 0;
      color: #202124;
      box-shadow: none;
      border-radius: 20px;
      border-top-right-radius: 4px;
      padding: 12px 16px;
      max-width: min(78%, 100%);
      line-height: 1.35;
    }

    body.v2-layout .system .bubble {
      background: rgba(255, 255, 255, 0.74);
      border: 1px solid rgba(176, 186, 202, 0.3);
      color: #64748b;
      box-shadow: none;
    }

    body.v2-layout .panel-foot {
      padding: 0 clamp(10px, 4vw, 30px) calc(12px + env(safe-area-inset-bottom, 0px));
      gap: 8px;
      align-content: end;
    }

    body.v2-layout .composer.composer-v2 {
      display: block;
    }

    .v2-composer-shell {
      width: min(var(--v2-chat-column-width), 100%);
      margin: 0 auto;
      border-radius: 30px;
      background: rgba(250, 251, 253, 0.92);
      border: 1px solid rgba(207, 214, 225, 0.9);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 10px 22px rgba(15, 23, 42, 0.055);
      padding: 12px 14px 12px;
      display: grid;
      grid-template-rows: auto auto;
      gap: 8px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .v2-composer-top {
      display: block;
    }

    body.v2-layout .composer-v2 textarea {
      width: 100%;
      min-height: 28px;
      max-height: 280px;
      border-radius: 16px;
      border: 0;
      background: transparent;
      box-shadow: none;
      padding: 6px 10px 0;
      color: #111827;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.3;
      letter-spacing: -0.015em;
      overflow-y: hidden;
    }

    body.v2-layout .composer-v2 textarea::placeholder {
      color: #6b7280;
      font-weight: 400;
    }

    body.v2-layout .composer-v2 textarea:focus {
      border-color: transparent;
      box-shadow: none;
      background: transparent;
    }

    .v2-composer-controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }

    .v2-composer-left {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 1 1 auto;
    }

    .v2-composer-right {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: 0 0 auto;
    }

    .v2-attach {
      position: relative;
      flex: 0 0 auto;
    }

    .v2-attach-trigger,
    .v2-settings-trigger,
    .v2-debug-trigger {
      width: 42px;
      height: 42px;
      padding: 0;
      border-radius: 50%;
      border: 0;
      background: transparent;
      color: #4b5563;
      display: grid;
      place-items: center;
      box-shadow: none;
      transition: background-color 0.16s ease, color 0.16s ease;
    }

    .v2-debug-trigger[hidden] {
      display: none !important;
    }

    .v2-attach-trigger svg,
    .v2-settings-trigger svg,
    .v2-debug-trigger svg {
      width: 18px;
      height: 18px;
    }

    .v2-attach-trigger:hover,
    .v2-settings-trigger:hover,
    .v2-debug-trigger:hover {
      background: #e7ecf2;
    }

    .v2-attach.open .v2-attach-trigger {
      background: #edf1f6;
    }

    .v2-settings {
      position: relative;
      flex: 0 0 auto;
      margin-left: -8px;
    }

    .v2-settings.open .v2-settings-trigger {
      background: #edf1f6;
    }

    .v2-debug-trigger.active {
      background: #edf1f6;
      color: #1a73e8;
    }

    .v2-attach-panel {
      position: absolute;
      left: 0;
      bottom: calc(100% + 12px);
      min-width: 300px;
      padding: 10px;
      background: #e7ecf3;
      border: 1px solid rgba(148, 163, 184, 0.24);
      border-radius: 20px;
      box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
      z-index: 30;
    }

    .v2-attach-item {
      width: 100%;
      border-radius: 14px;
      border: 1px solid transparent;
      background: transparent;
      color: #1f2937;
      padding: 12px 13px;
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: flex-start;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .v2-attach-item:hover {
      background: rgba(255, 255, 255, 0.45);
      border-color: rgba(59, 130, 246, 0.25);
    }

    .v2-settings-panel {
      position: absolute;
      left: 0;
      bottom: calc(100% + 12px);
      width: min(268px, 84vw);
      padding: 12px 10px;
      background: #e7ecf3;
      border: 1px solid rgba(148, 163, 184, 0.24);
      border-radius: 20px;
      box-shadow: 0 12px 26px rgba(15, 23, 42, 0.1);
      z-index: 34;
      display: grid;
      gap: 10px;
    }

    .v2-settings-panel[hidden] {
      display: none !important;
    }

    .v2-settings-group {
      display: grid;
      gap: 7px;
      min-width: 0;
    }

    .v2-settings-group-label {
      margin: 0 4px;
      font-size: 12px;
      font-weight: 700;
      color: #5f6b80;
      letter-spacing: -0.01em;
    }

    .v2-settings-group .v2-dropdown {
      width: 100%;
    }

    .v2-settings-group .v2-dropdown-trigger {
      width: 100%;
      min-width: 0;
      max-width: none;
      justify-content: flex-start;
      padding: 0 10px;
      background: transparent;
    }

    .v2-settings-group .v2-dropdown-trigger-value {
      font-size: 15px;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    .v2-settings-group .v2-dropdown-trigger:hover {
      background: rgba(255, 255, 255, 0.44);
    }

    .v2-settings-group .v2-dropdown.open .v2-dropdown-trigger {
      background: rgba(255, 255, 255, 0.54);
      box-shadow: none;
    }

    .v2-settings-group .v2-dropdown-panel {
      width: calc(100% - 14px);
      min-width: 0;
      max-width: none;
      bottom: calc(100% + 10px);
      left: 7px;
      padding: 10px;
      border-radius: 16px;
    }

    .v2-settings-group .v2-dropdown-title {
      display: none;
    }

    .v2-settings-group .v2-dropdown-list {
      gap: 2px;
      max-height: min(42vh, 300px);
    }

    .v2-settings-group .v2-dropdown-option {
      padding: 7px 9px;
      border-radius: 12px;
      gap: 7px;
    }

    .v2-settings-group .v2-dropdown-option-main {
      gap: 0;
    }

    .v2-settings-group .v2-dropdown-option.active,
    .v2-settings-group .v2-dropdown-option.active:hover {
      border-color: transparent;
      background: transparent;
      box-shadow: none;
    }

    .v2-settings-group .v2-speed-control {
      width: 100%;
      min-width: 0;
      max-width: none;
      height: 42px;
      padding: 0 4px 0 10px;
      border-radius: 999px;
      background: transparent;
      justify-self: stretch;
      gap: 6px;
    }

    .v2-settings-group .v2-speed-control:hover {
      background: transparent;
    }

    .v2-settings-group .v2-speed-label {
      display: none;
    }

    .v2-settings-group .v2-speed-range {
      min-width: 0;
      flex: 0 1 150px;
      max-width: 150px;
      -webkit-appearance: none;
      appearance: none;
      background: transparent;
      height: 18px;
      border: 0;
      outline: none;
      box-shadow: none;
      padding: 0;
    }

    .v2-settings-group .v2-speed-range::-webkit-slider-container {
      border: 0;
      background: transparent;
    }

    .v2-settings-group .v2-speed-range::-webkit-slider-runnable-track {
      height: 3px;
      border-radius: 999px;
      border: 0;
      background: rgba(71, 85, 105, 0.35);
    }

    .v2-settings-group .v2-speed-range::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      margin-top: -5.5px;
      border-radius: 50%;
      border: 1px solid #1a73e8;
      background: #1a73e8;
      box-shadow: none;
    }

    .v2-settings-group .v2-speed-range::-moz-range-track {
      height: 3px;
      border: 0;
      border-radius: 999px;
      background: rgba(71, 85, 105, 0.35);
    }

    .v2-settings-group .v2-speed-range::-moz-range-progress {
      height: 3px;
      border-radius: 999px;
      background: #1a73e8;
    }

    .v2-settings-group .v2-speed-range::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 1px solid #1a73e8;
      background: #1a73e8;
      box-shadow: none;
    }

    .v2-speed-theme-btn {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 0;
      background: transparent;
      color: #5a6476;
      display: inline-grid;
      place-items: center;
      padding: 0;
      flex: 0 0 auto;
      margin-left: auto;
      box-shadow: none;
      transition: background-color 0.16s ease, color 0.16s ease;
    }

    .v2-speed-theme-btn:hover {
      background: rgba(15, 23, 42, 0.05);
      color: #394354;
    }

    .v2-speed-theme-btn svg {
      width: 18px;
      height: 18px;
    }

    .v2-dropdown-row {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      flex-wrap: wrap;
    }

    .v2-dropdown {
      position: relative;
      flex: 0 0 auto;
    }

    .v2-speed-control {
      height: 42px;
      min-width: 176px;
      max-width: min(240px, 28vw);
      border-radius: 999px;
      background: transparent;
      color: #394354;
      padding: 0 10px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      box-shadow: none;
      transition: background-color 0.16s ease, color 0.16s ease;
      flex: 0 0 auto;
    }

    .v2-speed-control:hover {
      background: #edf1f6;
    }

    .v2-speed-control[hidden] {
      display: none !important;
    }

    .v2-speed-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: #647085;
      text-transform: uppercase;
      flex: 0 0 auto;
      user-select: none;
    }

    .v2-speed-range {
      flex: 1 1 auto;
      min-width: 78px;
      width: 100%;
      accent-color: #1a73e8;
      margin: 0;
      background: transparent;
    }

    .v2-speed-range:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .v2-speed-value {
      flex: 0 0 auto;
      min-width: 30px;
      text-align: right;
      font-size: 12px;
      font-weight: 600;
      color: #394354;
      letter-spacing: -0.015em;
      user-select: none;
    }

    .v2-dropdown-trigger {
      height: 42px;
      min-width: 118px;
      max-width: min(220px, 24vw);
      border-radius: 999px;
      border: 0;
      background: transparent;
      color: #394354;
      padding: 0 10px;
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      box-shadow: none;
      transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
    }

    .v2-dropdown-trigger:hover {
      background: #edf1f6;
    }

    .v2-dropdown.open .v2-dropdown-trigger {
      background: #f7f9fd;
      box-shadow: inset 0 0 0 2px #1a73e8;
    }

    .v2-dropdown-trigger:disabled {
      opacity: 0.55;
      cursor: not-allowed;
    }

    .v2-dropdown-trigger-label {
      display: none;
    }

    .v2-dropdown-trigger-value {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: -0.015em;
      text-align: left;
    }

    .v2-dropdown-chevron {
      color: #505a6c;
      width: 15px;
      height: 15px;
      transition: transform 0.18s ease;
      flex-shrink: 0;
    }

    .v2-dropdown.open .v2-dropdown-chevron {
      transform: rotate(180deg);
    }

    .v2-dropdown-panel {
      position: absolute;
      left: 0;
      bottom: calc(100% + 14px);
      width: min(430px, 92vw);
      padding: 12px;
      border-radius: 20px;
      border: 1px solid rgba(148, 163, 184, 0.22);
      background: #e8edf4;
      box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1), 0 1px 2px rgba(15, 23, 42, 0.04);
      z-index: 35;
    }

    .v2-dropdown-title {
      margin: 0 4px 8px;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: -0.015em;
      color: #404a5b;
    }

    .v2-dropdown-list {
      display: grid;
      gap: 6px;
      max-height: min(48vh, 360px);
      overflow: auto;
      padding-right: 2px;
    }

    .v2-dropdown-group-label {
      margin: 2px 6px 0;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #6b778d;
    }

    .v2-dropdown-group-divider {
      height: 1px;
      margin: 4px 6px;
      background: rgba(148, 163, 184, 0.34);
      border-radius: 999px;
    }

    .v2-dropdown-option {
      width: 100%;
      text-align: left;
      border-radius: 14px;
      border: 1px solid transparent;
      background: transparent;
      color: #1f2937;
      padding: 10px 12px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 10px;
      align-items: center;
      box-shadow: none;
    }

    .v2-dropdown-option:hover {
      background: rgba(255, 255, 255, 0.32);
    }

    .v2-dropdown-option.active {
      border-color: #2b66f0;
      background: rgba(255, 255, 255, 0.46);
      box-shadow: inset 0 0 0 1px rgba(43, 102, 240, 0.08);
    }

    .v2-dropdown-option-main {
      min-width: 0;
      display: grid;
      gap: 2px;
    }

    .v2-dropdown-option-label {
      font-size: 15px;
      font-weight: 600;
      color: #2d3646;
      line-height: 1.16;
      letter-spacing: -0.015em;
    }

    .v2-dropdown-option-desc {
      font-size: 11px;
      font-weight: 600;
      color: #6b7a93;
      line-height: 1.24;
    }

    .v2-dropdown-check {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      border: 1px solid transparent;
      color: transparent;
      flex-shrink: 0;
    }

    .v2-dropdown-option.active .v2-dropdown-check {
      background: transparent;
      color: #1a5fe2;
      border-color: #1a5fe2;
    }

    .v2-dropdown-check svg {
      opacity: 0;
      transform: scale(0.8);
      transition: opacity 0.14s ease, transform 0.14s ease;
    }

    .v2-dropdown-option.active .v2-dropdown-check svg {
      opacity: 1;
      transform: scale(1);
    }

    body.v2-layout .v2-send-btn {
      display: none;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      padding: 0;
      display: grid;
      place-items: center;
      background: #2457e7;
      border: 0;
      box-shadow: 0 8px 16px rgba(36, 87, 231, 0.2);
    }

    body.v2-layout .v2-send-btn:hover:not(:disabled) {
      background: #1f4dd3;
      transform: translateY(-1px);
    }

    body.v2-layout .v2-send-btn:disabled {
      opacity: 0.5;
      box-shadow: none;
    }

    body.v2-layout .v2-mic-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1px solid transparent;
      background: transparent;
      box-shadow: none;
      color: #4b5563;
      padding: 0;
    }

    body.v2-layout .v2-mic-btn:hover {
      background: rgba(15, 23, 42, 0.04);
      box-shadow: none;
    }

    body.v2-layout .v2-mic-btn.live {
      background: rgba(239, 68, 68, 0.12);
      color: #dc2626;
      border-color: rgba(239, 68, 68, 0.22);
      animation: none;
      box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08);
    }

    body.v2-layout .v2-mic-btn.paused {
      background: rgba(245, 158, 11, 0.12);
      color: #d97706;
      border-color: rgba(245, 158, 11, 0.25);
      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.08);
    }

    body.v2-layout .foot-row {
      width: min(var(--v2-chat-column-width), 100%);
      margin: 0 auto;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 0 4px;
    }

    .v2-disclaimer {
      font-size: 16px;
      font-weight: 500;
      color: #545f71;
      letter-spacing: -0.01em;
      text-align: center;
      margin-top: 4px;
    }

    body.v2-layout #chatStatus.status {
      margin-top: 0;
      min-height: 0;
      font-size: 12px;
      color: #798394;
      text-align: center;
    }

    body.v2-layout #meta.foot-meta {
      display: none;
      font-size: 11px;
      color: #94a3b8;
      text-align: center;
    }

    :root:not([data-theme="light"]) body.v2-layout {
      background: #0f131a;
      color: #e2e8f0;
    }

    :root:not([data-theme="light"]) body.v2-layout .panel {
      background: rgba(15, 19, 26, 0.96);
    }

    :root:not([data-theme="light"]) .v2-user-chip,
    :root:not([data-theme="light"]) .v2-logout-btn {
      background: rgba(28, 35, 46, 0.84);
      border-color: rgba(100, 116, 139, 0.22);
      color: #cbd5e1;
      box-shadow: none;
    }

    :root:not([data-theme="light"]) .v2-logout-btn:hover {
      background: rgba(37, 46, 60, 0.92);
    }

    :root:not([data-theme="light"]) body.v2-layout .assistant .bubble {
      color: #e5e7eb;
    }

    :root:not([data-theme="light"]) body.v2-layout .user .bubble {
      background: #273243;
      color: #f1f5f9;
    }

    :root:not([data-theme="light"]) body.v2-layout .system .bubble {
      background: rgba(30, 41, 59, 0.35);
      border-color: rgba(100, 116, 139, 0.24);
      color: #a7b4c8;
    }

    :root:not([data-theme="light"]) .v2-composer-shell {
      background: rgba(19, 24, 32, 0.94);
      border-color: rgba(71, 85, 105, 0.4);
      box-shadow: 0 1px 2px rgba(2, 6, 23, 0.35), 0 12px 28px rgba(2, 6, 23, 0.35);
    }

    :root:not([data-theme="light"]) body.v2-layout .composer-v2 textarea {
      color: #e5e7eb;
    }

    :root:not([data-theme="light"]) body.v2-layout .composer-v2 textarea::placeholder {
      color: #8f9bb0;
    }

    :root:not([data-theme="light"]) .v2-attach-trigger,
    :root:not([data-theme="light"]) .v2-settings-trigger,
    :root:not([data-theme="light"]) .v2-debug-trigger,
    :root:not([data-theme="light"]) body.v2-layout .v2-mic-btn {
      color: #98a4b8;
    }

    :root:not([data-theme="light"]) .v2-attach-trigger:hover,
    :root:not([data-theme="light"]) .v2-settings-trigger:hover,
    :root:not([data-theme="light"]) .v2-debug-trigger:hover,
    :root:not([data-theme="light"]) body.v2-layout .v2-mic-btn:hover {
      background: rgba(148, 163, 184, 0.1);
    }

    :root:not([data-theme="light"]) .v2-attach.open .v2-attach-trigger,
    :root:not([data-theme="light"]) .v2-settings.open .v2-settings-trigger {
      background: rgba(148, 163, 184, 0.13);
    }

    :root:not([data-theme="light"]) .v2-debug-trigger.active {
      background: rgba(59, 130, 246, 0.2);
      color: #c7d8ff;
    }

    :root:not([data-theme="light"]) .v2-attach-panel,
    :root:not([data-theme="light"]) .v2-settings-panel,
    :root:not([data-theme="light"]) .v2-dropdown-panel {
      background: #1a212d;
      border-color: rgba(100, 116, 139, 0.24);
      box-shadow: 0 14px 30px rgba(2, 6, 23, 0.42);
    }

    :root:not([data-theme="light"]) .v2-attach-item {
      color: #e2e8f0;
    }

    :root:not([data-theme="light"]) .v2-attach-item:hover {
      background: rgba(255, 255, 255, 0.03);
      border-color: rgba(59, 130, 246, 0.18);
    }

    :root:not([data-theme="light"]) .v2-settings-group-label,
    :root:not([data-theme="light"]) .v2-dropdown-title {
      color: #9eacc2;
    }

    :root:not([data-theme="light"]) .v2-settings-group .v2-dropdown-trigger,
    :root:not([data-theme="light"]) .v2-dropdown-trigger {
      color: #d8e0ec;
    }

    :root:not([data-theme="light"]) .v2-settings-group .v2-dropdown-trigger:hover,
    :root:not([data-theme="light"]) .v2-dropdown-trigger:hover {
      background: rgba(148, 163, 184, 0.08);
    }

    :root:not([data-theme="light"]) .v2-settings-group .v2-dropdown.open .v2-dropdown-trigger {
      background: rgba(148, 163, 184, 0.1);
    }

    :root:not([data-theme="light"]) .v2-dropdown.open .v2-dropdown-trigger {
      background: rgba(148, 163, 184, 0.1);
      box-shadow: none;
    }

    :root:not([data-theme="light"]) .v2-dropdown-trigger-value {
      color: #dbe4f2;
    }

    :root:not([data-theme="light"]) .v2-dropdown-chevron {
      color: #93a1b6;
    }

    :root:not([data-theme="light"]) .v2-dropdown-option {
      color: #e2e8f0;
    }

    :root:not([data-theme="light"]) .v2-dropdown-option:hover {
      background: rgba(255, 255, 255, 0.04);
    }

    :root:not([data-theme="light"]) .v2-dropdown-option.active {
      border-color: rgba(59, 130, 246, 0.55);
      background: rgba(59, 130, 246, 0.08);
      box-shadow: none;
    }

    :root:not([data-theme="light"]) .v2-settings-group .v2-dropdown-option.active,
    :root:not([data-theme="light"]) .v2-settings-group .v2-dropdown-option.active:hover {
      border-color: transparent;
      background: transparent;
      box-shadow: none;
    }

    :root:not([data-theme="light"]) .v2-dropdown-option-label {
      color: #e5ecf7;
    }

    :root:not([data-theme="light"]) .v2-dropdown-option-desc {
      color: #94a3b8;
    }

    :root:not([data-theme="light"]) .v2-dropdown-check {
      border-color: transparent;
    }

    :root:not([data-theme="light"]) .v2-speed-value,
    :root:not([data-theme="light"]) .v2-speed-theme-btn {
      color: #b7c2d4;
    }

    :root:not([data-theme="light"]) .v2-speed-theme-btn:hover {
      background: rgba(255, 255, 255, 0.05);
      color: #e2e8f0;
    }

    :root:not([data-theme="light"]) .v2-settings-group .v2-speed-range::-webkit-slider-runnable-track {
      background: rgba(148, 163, 184, 0.34);
    }

    :root:not([data-theme="light"]) .v2-settings-group .v2-speed-range::-moz-range-track {
      background: rgba(148, 163, 184, 0.34);
    }

    :root:not([data-theme="light"]) body.v2-layout .v2-disclaimer {
      color: #a7b1c2;
    }

    :root:not([data-theme="light"]) body.v2-layout #chatStatus.status {
      color: #7f8da3;
    }

    @media (max-width: 960px) {
      body.v2-layout .app-shell {
        height: calc(100vh - 20px);
        height: calc(100dvh - 20px);
      }

      body.v2-layout .panel {
        grid-template-rows: auto 1fr auto;
        overflow: hidden;
        min-height: 0;
      }

      .v2-topbar {
        top: 8px;
        right: 10px;
      }

      .v2-user-chip {
        max-width: calc(100% - 104px);
      }

      .v2-composer-shell {
        width: 100%;
        border-radius: 28px;
        padding: 12px 12px 14px;
        gap: 10px;
      }

      body.v2-layout .composer-v2 textarea {
        min-height: 34px;
        font-size: 18px;
        padding: 8px 10px 2px;
      }

      .v2-composer-controls {
        align-items: center;
        flex-wrap: nowrap;
      }

      .v2-composer-left {
        flex: 1 1 auto;
        flex-wrap: nowrap;
        gap: 10px;
      }

      .v2-composer-right {
        margin-left: auto;
        gap: 8px;
        flex: 0 0 auto;
      }

      .v2-dropdown-row {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
        gap: 8px;
      }

      .v2-dropdown-trigger {
        height: 44px;
        min-width: 140px;
        max-width: 70vw;
        padding: 0 12px;
      }

      .v2-speed-control {
        height: 44px;
        min-width: 176px;
        max-width: 72vw;
        padding: 0 12px;
      }

      .v2-speed-range {
        min-width: 86px;
      }

      .v2-dropdown-panel {
        width: min(92vw, 330px);
        padding: 10px;
        border-radius: 16px;
      }

      .v2-dropdown-title {
        font-size: 15px;
      }

      .v2-dropdown-option {
        padding: 9px 10px;
        border-radius: 12px;
      }

      .v2-dropdown-option-label {
        font-size: 14px;
      }

      .v2-dropdown-option-desc {
        font-size: 10px;
      }

      .v2-dropdown-check {
        width: 26px;
        height: 26px;
      }

      .v2-attach-trigger {
        width: 42px;
        height: 42px;
      }

      .v2-settings-trigger {
        width: 42px;
        height: 42px;
      }

      .v2-debug-trigger {
        width: 42px;
        height: 42px;
      }

      .v2-attach-panel {
        min-width: 240px;
        width: min(82vw, 300px);
      }

      .v2-settings-panel {
        width: min(74vw, 268px);
        padding: 10px 9px;
        border-radius: 18px;
        gap: 8px;
      }

      .v2-settings-group {
        gap: 5px;
      }

      .v2-settings-group-label {
        font-size: 11px;
      }

      .v2-settings-group .v2-dropdown-trigger,
      .v2-settings-group .v2-speed-control {
        height: 40px;
      }

      .v2-settings-group .v2-dropdown-list {
        gap: 2px;
        max-height: min(40vh, 260px);
      }

      .v2-settings-group .v2-dropdown-option {
        padding: 6px 8px;
        gap: 6px;
      }

      .v2-settings-group .v2-dropdown-trigger-value {
        font-size: 14px;
      }

      .v2-settings-group .v2-speed-control {
        width: 100%;
      }

      .v2-settings-group .v2-speed-range {
        flex-basis: 130px;
        max-width: 130px;
      }

      .v2-settings-group .v2-speed-range::-webkit-slider-thumb {
        width: 13px;
        height: 13px;
        margin-top: -5px;
      }

      .v2-settings-group .v2-speed-range::-moz-range-thumb {
        width: 13px;
        height: 13px;
      }

      .v2-speed-theme-btn {
        width: 28px;
        height: 28px;
      }

      .v2-speed-theme-btn svg {
        width: 17px;
        height: 17px;
      }

      .v2-attach-item {
        font-size: 14px;
        padding: 11px 12px;
      }

      body.v2-layout .v2-send-btn {
        width: 48px;
        height: 48px;
      }

      body.v2-layout .v2-mic-btn {
        width: 42px;
        height: 42px;
      }

      .v2-disclaimer {
        font-size: 14px;
      }

      body.v2-layout .foot-row {
        gap: 4px;
      }

      body.v2-layout .panel-foot {
        z-index: 15;
        background: linear-gradient(180deg, rgba(250, 251, 253, 0) 0%, rgba(250, 251, 253, 0.9) 18%, rgba(250, 251, 253, 0.98) 100%);
      }
    }

    @media (max-width: 960px) {
      body {
        padding: 10px;
      }

      .app-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: calc(100vh - 20px);
        height: calc(100dvh - 20px);
        gap: 10px;
      }

      .side {
        grid-template-columns: 1fr auto;
        align-items: center;
      }

      .side-tools {
        grid-column: 1 / -1;
      }

      .panel {
        min-height: 0;
      }

      .composer {
        grid-template-columns: minmax(0, 1fr) auto auto auto auto;
      }

      .send-btn {
        order: 2;
      }

      .mic-btn {
        order: 3;
      }

    }

    @media (max-width: 960px) {
      :root:not([data-theme="light"]) body.v2-layout .panel-foot {
        background: linear-gradient(180deg, rgba(13, 18, 28, 0) 0%, rgba(13, 18, 28, 0.9) 18%, rgba(13, 18, 28, 0.98) 100%);
      }
    }