/* ===== style.css ===== */

  * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
  html, body { height: 100%; width: 100%; overflow: hidden; overscroll-behavior: none; }
  body {
    font-family: 'Inter', sans-serif;
    background: #212121;
    color: #ececec;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    user-select: none;
    position: fixed;
    inset: 0;
  }

  /* Use dynamic viewport height when supported so iOS URL bar doesn't hide the input */
  #app {
    height: 100vh;
    height: 100dvh;
    height: var(--app-h, 100dvh);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    overflow: hidden;
  }
  main { min-height: 0; min-width: 0; }
  #messages { min-height: 0; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
  #chatList { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }

  /* Allow text selection in messages */
  .prose-chat, .user-bubble { -webkit-user-select: text; user-select: text; }

  /* Scrollbar */
  .scroll-soft { scrollbar-width: thin; scrollbar-color: #4a4a4a transparent; -webkit-overflow-scrolling: touch; }
  .scroll-soft::-webkit-scrollbar { width: 6px; }
  .scroll-soft::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 99px; }
  .scroll-soft:hover::-webkit-scrollbar-thumb { background: #5a5a5a; }

  textarea { resize: none; -webkit-user-select: text; user-select: text; }
  input, textarea, button { font-family: inherit; }

  /* Markdown */
  .prose-chat { font-size: 15px; line-height: 1.7; color: #ececec; word-wrap: break-word; overflow-wrap: anywhere; }
  .prose-chat p { margin: 0 0 1em; }
  .prose-chat p:last-child { margin-bottom: 0; }
  .prose-chat h1, .prose-chat h2, .prose-chat h3 { font-weight: 600; margin: 1.2em 0 .5em; line-height: 1.3; }
  .prose-chat h1 { font-size: 1.5em; }
  .prose-chat h2 { font-size: 1.25em; }
  .prose-chat h3 { font-size: 1.1em; }
  .prose-chat ul, .prose-chat ol { margin: .5em 0 1em; padding-left: 1.5em; }
  .prose-chat li { margin: .25em 0; }
  .prose-chat code { background: #2f2f2f; padding: 2px 6px; border-radius: 5px; font-size: 0.875em; font-family: ui-monospace, 'SF Mono', monospace; word-break: break-word; }
  .prose-chat pre { background: #0d0d0d; padding: 14px; border-radius: 10px; overflow-x: auto; margin: .8em 0; border: 1px solid #2f2f2f; -webkit-overflow-scrolling: touch; }
  .prose-chat pre code { background: transparent; padding: 0; font-size: 0.85em; color: #f4f4f5; word-break: normal; }
  .prose-chat strong { color: #fff; font-weight: 600; }
  .prose-chat a { color: #7eb6ff; text-decoration: underline; word-break: break-all; }
  .prose-chat blockquote { border-left: 3px solid #4a4a4a; padding-left: 1em; color: #b4b4b4; margin: .8em 0; }
  .prose-chat table { border-collapse: collapse; margin: .8em 0; width: 100%; font-size: 0.9em; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .prose-chat th, .prose-chat td { border: 1px solid #3a3a3a; padding: 6px 10px; text-align: left; }
  .prose-chat th { background: #2f2f2f; }

  /* KaTeX styling */
  .prose-chat .katex { font-size: 1em; }
  .prose-chat .katex-display { margin: 0.8em 0; overflow-x: auto; overflow-y: hidden; }

  /* Light theme */
  html.light, html.light body { background: #ffffff; color: #0d0d0d; }
  html.light .bg-bg { background: #ffffff !important; }
  html.light .bg-bg-side { background: #f9f9f9 !important; }
  html.light .bg-bg-soft { background: #f4f4f4 !important; }
  html.light .bg-bg-hover { background: #ececec !important; }
  html.light .text-ink { color: #0d0d0d !important; }
  html.light .text-ink-dim { color: #5d5d5d !important; }
  html.light .text-ink-faint { color: #8e8e8e !important; }
  html.light .border-white\/10 { border-color: rgba(0,0,0,0.1) !important; }
  html.light .border-white\/5 { border-color: rgba(0,0,0,0.06) !important; }
  html.light .hover\:bg-white\/5:hover { background: rgba(0,0,0,0.04) !important; }
  html.light .hover\:bg-white\/10:hover { background: rgba(0,0,0,0.06) !important; }
  html.light .bg-bg-soft\/70 { background: #f0f0f0 !important; }
  html.light .hover\:bg-bg-hover:hover { background: #e4e4e4 !important; }

  /* Header / IDE model selector — Tailwind dark tokens don't remap with /opacity */
  html.light #modelTriggerBtn,
  html.light .vlen-model-trigger {
    background: #f0f0f0 !important;
    color: #3f3f46 !important;
    border-color: rgba(0,0,0,0.12) !important;
  }
  html.light #modelTriggerBtn:hover,
  html.light .vlen-model-trigger:hover {
    background: #e4e4e4 !important;
    color: #0d0d0d !important;
  }
  html.light #modelMenu {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.12) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
  }
  html.light #modelMenu .model-opt:hover { background: rgba(0,0,0,0.04) !important; }
  html.light #modelMenu .bg-white\/\[0\.08\],
  html.light #modelMenu .bg-white\/\[0\.05\] { background: rgba(0,0,0,0.05) !important; }
  html.light .prose-chat { color: #0d0d0d; }
  html.light .prose-chat strong { color: #000; }
  html.light .prose-chat code { background: #f0f0f0; }
  html.light .prose-chat pre { background: #f7f7f7; border-color: #e5e5e5; }
  html.light .prose-chat pre code { color: #0d0d0d; }
  html.light .user-bubble { background: #e9e9e9 !important; color: #0d0d0d !important; }

  /* === Light mode fixes === */
  html.light .prose-chat table { color: #0d0d0d; }
  html.light .prose-chat th, html.light .prose-chat td { border-color: #d4d4d8; color: #0d0d0d; }
  html.light .prose-chat th { background: #ececec; color: #000; font-weight: 700; }
  html.light .prose-chat td { background: #ffffff; }
  html.light .prose-chat tbody tr:nth-child(even) td { background: #fafafa; }
  html.light .prose-chat blockquote { border-color: #d4d4d8; color: #4a4a4a; }
  html.light .prose-chat a { color: #2563eb; }

  /* Usage panel and limit state in light mode */
  html.light #usageModal > div,
  html.light #limitModal > div { background: #ffffff !important; border-color: rgba(0,0,0,0.12) !important; color: #0d0d0d !important; box-shadow: 0 20px 60px rgba(0,0,0,0.18); }
  html.light #usageModal .text-ink-dim,
  html.light #usageModal .text-ink-faint,
  html.light #limitModal .text-ink-dim { color: #52525b !important; }
  html.light #usageProgress { background: #4f46e5 !important; }

  /* Limit modal readability in light mode */
  html.light #limitModal { background: rgba(0,0,0,0.35) !important; }
  html.light #limitModal h3 { color: #0d0d0d; }
  html.light #limitModal p { color: #3f3f46 !important; }
  html.light #limitModal button { background: #111 !important; color: #fff !important; }
  html.light #limitModal button:hover { background: #333 !important; }

  /* User bubble text visibility already handled; ensure list markers & inline code contrast */
  html.light .prose-chat code { color: #b91c1c; background: #f4f4f5; border: 1px solid #e4e4e7; }
  html.light .prose-chat pre code { color: #0d0d0d; border: 0; background: transparent; }


  .user-bubble { background: #2f2f2f; color: #ececec; }


  
  /* Typing cursor */
  .cursor-blink::after { content: '●'; display: inline-block; margin-left: 4px; animation: blink 1s infinite; }
  @keyframes blink { 50% { opacity: 0.2; } }

  /* Thinking dots */
  .thinking-dot { animation: pulse 1.4s infinite ease-in-out both; }
  .thinking-dot:nth-child(2) { animation-delay: 0.2s; }
  .thinking-dot:nth-child(3) { animation-delay: 0.4s; }
  @keyframes pulse { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

  /* Sidebar transitions */
  .sidebar-open { transform: translateX(0) !important; }
  .sidebar-closed { transform: translateX(-100%) !important; }

  /* Drop overlay */
  .drop-active { backdrop-filter: blur(20px); }

  /* Profile input style */
  #profileNameInput { background: transparent; border: none; outline: none; width: 100%; font-size: 0.875rem; font-weight: 500; -webkit-user-select: text; user-select: text; }
  #profileNameInput::placeholder { color: #8e8e8e; }

  /* Mobile sidebar overlay */
  #sidebarOverlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 30; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
  #sidebarOverlay.active { opacity: 1; pointer-events: auto; }

  /* Desktop sidebar */
  @media (min-width: 768px) {
    #sidebar { transform: translateX(0) !important; width: 260px !important; position: relative !important; height: auto !important; box-shadow: none !important; transition: margin-left 0.3s cubic-bezier(.2,.8,.2,1), opacity 0.25s ease; }
    #sidebarOverlay { display: none; }
    #showSidebarBtn { display: none !important; }
    #desktopToggleBtn { display: inline-flex !important; align-items: center; justify-content: center; }
    /* Collapsed state on desktop — slide sidebar out */
    #app.desktop-sidebar-collapsed #sidebar { margin-left: -260px; opacity: 0.4; pointer-events: none; }
    #app.desktop-sidebar-collapsed #desktopToggleBtn svg { transform: rotate(180deg); }
    #desktopToggleBtn svg { transition: transform 0.3s ease; }
  }
  @media (max-width: 767px) {
    #desktopToggleBtn { display: none !important; }
  }


  /* Mobile optimizations */
  @media (max-width: 767px) {
    #sidebar {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      height: 100%;
      width: min(82vw, 300px);
      z-index: 40;
      transform: translateX(-100%);
      transition: transform 0.28s cubic-bezier(.2,.8,.2,1);
      box-shadow: 2px 0 20px rgba(0,0,0,0.4);
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
    }

    #collapseBtn { display: none !important; }
    #showSidebarBtn { display: inline-flex !important; align-items: center; justify-content: center; }

    #app { flex-direction: column; }
    main { width: 100%; min-width: 0; }

    header { height: 52px; padding: 0 8px; }
    header button { padding: 10px; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }

    #messages { font-size: 15px; padding-bottom: 8px; }
    .prose-chat { font-size: 15px; }

    /* IMPORTANT: 16px font on inputs to prevent iOS auto-zoom */
    textarea, input[type="text"] { font-size: 16px !important; }
    #inputContainer { border-radius: 22px; padding: 10px 12px; }

    .max-w-3xl { max-width: 100% !important; }

    .user-bubble { max-width: 88%; }

    /* Bigger send/attach tap targets */
    #sendBtn { width: 40px; height: 40px; }
    #attachBtn { padding: 10px; }

    /* Suggestion cards */
    #suggestions { gap: 8px; }

    /* Hide hover-only desktop affordances on touch */
    .group .opacity-0 { opacity: 1 !important; }
  }

  /* Prevent body scroll when sidebar is open */
  body.sidebar-open { overflow: hidden; }

  /* Hide chat-row action buttons on touch unless they're explicitly visible */
  @media (hover: none) {
    .opacity-0.group-hover\:opacity-100 { opacity: 1 !important; }
  }

  /* ====== Toast Notification ====== */
  #vlenToast {
    position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: rgba(30,30,30,0.96); backdrop-filter: blur(12px);
    color: #ececec; padding: 10px 18px; border-radius: 12px;
    font-size: 13px; font-weight: 500; z-index: 200;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.1);
    max-width: calc(100vw - 32px); text-align: center; line-height: 1.4;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  #vlenToast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: none; }
  html.light #vlenToast { background: rgba(255,255,255,0.96); color: #0d0d0d; border-color: rgba(0,0,0,0.1); }

  /* ====== Screen Awareness UI ====== */
  #shareScreenBtn.active { color: #ef4444; }
  #shareScreenBtn.active svg { animation: swpulse 1.6s infinite; border-radius: 99px; }

  #screenWidget {
    position: fixed; z-index: 60; right: 16px; bottom: 16px;
    width: 380px; height: 520px;
    min-width: 240px; min-height: 280px;
    max-width: calc(100vw - 24px); max-height: calc(100vh - 24px);
    background: rgba(24,24,24,0.92); backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.12); border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    color: #ececec; display: none; overflow: hidden;
    user-select: none;
    flex-direction: column;
    transition: background 0.3s ease;
  }
  #screenWidget.visible { display: flex; }
  /* Mobile: full-width widget anchored above keyboard */
  @media (max-width: 767px) {
    #screenWidget {
      right: 8px; left: 8px;
      bottom: calc(72px + env(safe-area-inset-bottom));
      top: auto;
      width: auto !important;
      height: auto !important;
      min-width: 0; max-width: none;
      min-height: 0;
      max-height: var(--sw-max-h, 70dvh);
      border-radius: 18px;
      flex-direction: column;
      transform: translateZ(0);
      will-change: transform;
      transition: none;
    }
    #screenWidget.visible { display: flex; }
    #swResize { display: none; }
    #screenWidget .sw-head { cursor: default; flex-shrink: 0; }
    #screenWidget .sw-body {
      height: auto !important;
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto !important;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      touch-action: pan-y;
      display: flex;
      flex-direction: column;
    }
    #screenWidget .sw-preview { aspect-ratio: 16/9; max-height: 28vh; flex-shrink: 0; }
    #screenWidget .sw-question-section { gap: 6px; flex-shrink: 0; }
    #screenWidget .sw-question-section > div { display: flex; gap: 6px; align-items: stretch; }
    #screenWidget .sw-question-input { flex: 1; min-width: 0; }
    #screenWidget .sw-send-btn { flex-shrink: 0; padding: 10px 14px; }
    /* Let the body be the single scroll container — un-nest the answer box */
    #screenWidget .sw-answer-section { flex: 0 0 auto; min-height: 0; }
    #screenWidget .sw-answer-box {
      flex: 0 0 auto !important;
      overflow: visible !important;
      max-height: none !important;
      min-height: 0 !important;
      height: auto !important;
      touch-action: pan-y;
    }
  }
  html.light #screenWidget {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    color: #0d0d0d;
  }
  .sw-resize-handle {
    position: absolute; right: 0; bottom: 0; width: 22px; height: 22px;
    cursor: nwse-resize; z-index: 20; touch-action: none;
    background: linear-gradient(135deg, transparent 55%, rgba(255,255,255,0.35) 55%, rgba(255,255,255,0.35) 65%, transparent 65%, transparent 75%, rgba(255,255,255,0.25) 75%, rgba(255,255,255,0.25) 85%, transparent 85%);
  }
  #screenWidget .sw-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; cursor: move;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  html.light #screenWidget .sw-head {
    background: rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  #screenWidget .sw-dot {
    width: 8px; height: 8px; border-radius: 99px;
    background: #ef4444; box-shadow: 0 0 0 0 rgba(239,68,68,0.7);
    animation: swpulse 1.6s infinite;
  }
  #screenWidget .sw-dot.paused {
    background: #f59e0b; animation: none; box-shadow: none;
  }
  @keyframes swpulse { 0%{box-shadow:0 0 0 0 rgba(239,68,68,0.7);} 70%{box-shadow:0 0 0 10px rgba(239,68,68,0);} 100%{box-shadow:0 0 0 0 rgba(239,68,68,0);} }
  #screenWidget .sw-title { font-size: 13px; font-weight: 600; flex: 1; }
  #screenWidget .sw-btn { padding: 4px; border-radius: 6px; cursor: pointer; color: #b4b4b4; }
  #screenWidget .sw-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
  #screenWidget .sw-btn.active { color: #6366f1; }
  #screenWidget .sw-body {
    padding: 10px 12px; flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 10px;
  }
  #screenWidget .sw-preview {
    width: 100%; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
    background: #000; border: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
  }
  #screenWidget .sw-preview video { width: 100%; height: 100%; object-fit: contain; background: #000; }
  #screenWidget .sw-question-section {
    display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 10px;
  }
  #screenWidget .sw-question-label {
    font-size: 11px; font-weight: 600; color: #b4b4b4; text-transform: uppercase; letter-spacing: 0.5px;
  }
  #screenWidget .sw-question-input {
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px; padding: 8px 10px; font-size: 13px; color: #ececec; outline: none; transition: all 0.2s; font-family: inherit;
  }
  @media (max-width: 767px) {
    #screenWidget .sw-question-input { font-size: 16px !important; padding: 10px 12px; }
    #screenWidget .sw-question-section > div { display: flex !important; gap: 6px !important; align-items: stretch !important; }
  }
  html.light #screenWidget .sw-question-input {
    background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.1); color: #0d0d0d;
  }
  #screenWidget .sw-question-input:focus {
    background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2);
  }
  #screenWidget .sw-question-input::placeholder { color: #8e8e8e; }
  #screenWidget .sw-answer-section {
    display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; min-height: 0;
  }
  #screenWidget .sw-answer-label {
    font-size: 11px; font-weight: 600; color: #b4b4b4; text-transform: uppercase; letter-spacing: 0.5px;
  }
  /* Hide preview visually but keep video rendering so AI can still capture frames */
  #screenWidget .sw-preview.preview-hidden {
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    aspect-ratio: unset !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #screenWidget .sw-answer-box {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.65;
    color: #ececec;
    flex: 0 0 auto; min-height: 100px;
    overflow: visible; word-break: break-word;
  }
  @media (max-width: 767px) {
    #screenWidget .sw-answer-box { min-height: 80px; font-size: 14px; padding: 10px 12px; }
  }
  #screenWidget .sw-answer-box::-webkit-scrollbar { width: 4px; }
  #screenWidget .sw-answer-box::-webkit-scrollbar-thumb { background: #4a4a4a; border-radius: 99px; }
  html.light #screenWidget .sw-answer-box {
    background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #0d0d0d;
  }
  #screenWidget .sw-answer-box.empty { color: #8e8e8e; font-style: italic; }
  #screenWidget .sw-answer-box.thinking { display: flex; align-items: center; gap: 6px; }
  #screenWidget .sw-send-btn {
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: all 0.2s; font-family: inherit; color: #ececec;
  }
  #screenWidget .sw-send-btn:hover:not(:disabled) { background: rgba(255,255,255,0.2); }
  #screenWidget .sw-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  #screenWidget.visible { display: flex; }

  /* PiP Container Styles */
  #pipContainer {
    display: none;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #212121;
    color: #ececec;
    font-family: 'Inter', sans-serif;
  }
  #pipContainer.active {
    display: flex;
  }
  #pipContainer.light {
    background: #ffffff;
    color: #0d0d0d;
  }
  #pipHeader {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    cursor: move;
  }
  #pipContainer.light #pipHeader {
    background: rgba(0,0,0,0.05);
    border-bottom-color: rgba(0,0,0,0.08);
  }
  #pipStatusDot {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239,68,68,0.7);
    animation: swpulse 1.6s infinite;
  }
  #pipStatusDot.paused {
    background: #f59e0b;
    animation: none;
    box-shadow: none;
  }
  #pipTitle {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
  }
  #pipControls {
    display: flex;
    gap: 4px;
  }
  #pipControls button {
    padding: 4px;
    border-radius: 6px;
    cursor: pointer;
    color: #b4b4b4;
    background: transparent;
    border: none;
    transition: all 0.2s;
  }
  #pipControls button:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
  }
  #pipControls button.active {
    color: #6366f1;
  }
  #pipBody {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #4a4a4a transparent;
  }
  #pipContainer.light #pipBody {
    scrollbar-color: #b4b4b4 transparent;
  }
  #pipBody::-webkit-scrollbar {
    width: 6px;
  }
  #pipBody::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 99px;
  }
  #pipContainer.light #pipBody::-webkit-scrollbar-thumb {
    background: #b4b4b4;
  }
  #pipPreview {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    border: 1px solid rgba(255,255,255,0.08);
  }
  #pipContainer.light #pipPreview {
    border-color: rgba(0,0,0,0.1);
  }
  #pipPreview video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
  }
  #pipQuestionSection {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 10px;
  }
  #pipContainer.light #pipQuestionSection {
    border-top-color: rgba(0,0,0,0.08);
  }
  #pipQuestionLabel {
    font-size: 11px;
    font-weight: 600;
    color: #b4b4b4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  #pipQuestionInput {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    color: #ececec;
    outline: none;
    transition: all 0.2s;
    font-family: inherit;
  }
  #pipContainer.light #pipQuestionInput {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.1);
    color: #0d0d0d;
  }
  #pipQuestionInput:focus {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
  }
  #pipQuestionInput::placeholder {
    color: #8e8e8e;
  }
  #pipAnswerSection {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
  }
  #pipAnswerLabel {
    font-size: 11px;
    font-weight: 600;
    color: #b4b4b4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  #pipAnswerBox {
    background: rgba(99,102,241,0.1);
    border: 1px solid rgba(99,102,241,0.3);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: #ddd;
    overflow-y: auto;
    min-height: 40px;
    flex: 1;
  }
  #pipContainer.light #pipAnswerBox {
    background: rgba(99,102,241,0.05);
    border-color: rgba(99,102,241,0.2);
    color: #1a1a1a;
  }
  #pipAnswerBox.empty {
    color: #8e8e8e;
    font-style: italic;
  }
  #pipAnswerBox.thinking {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  #pipSendBtn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: #ececec;
    font-family: inherit;
  }
  #pipSendBtn:hover:not(:disabled) {
    background: rgba(255,255,255,0.2);
  }
  #pipSendBtn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  /* ── Edit message UI ───────────────────────────────────── */
  .edit-textarea {
    width: 100%;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 16px;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: inherit;
    font-family: inherit;
    resize: none;
    outline: none;
    overflow-y: hidden;
    transition: border-color 0.15s;
  }
  .edit-textarea:focus { border-color: rgba(255,255,255,0.35); }
  html.light .edit-textarea {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.14);
  }
  html.light .edit-textarea:focus { border-color: rgba(0,0,0,0.28); }

  /* ── Selection popup ───────────────────────────────────── */
  #selectionPopup {
    position: fixed;
    transform: translateX(-50%);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s, transform 0.12s;
    transform: translateX(-50%) translateY(4px);
  }
  #selectionPopup.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  #askAboutSelBtn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #2a2a2c;
    color: #ececec;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 20px;
    padding: 7px 14px 7px 11px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.45);
    font-family: inherit;
    transition: background 0.12s;
  }
  #askAboutSelBtn:hover { background: #3a3a3c; }
  html.light #askAboutSelBtn {
    background: #fff;
    color: #0d0d0d;
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
  }
  html.light #askAboutSelBtn:hover { background: #f4f4f4; }

  /* ── AI-generated PDF download card (Claude-style) ────── */
  .pdf-file-card {
    display: flex; align-items: center; gap: 12px;
    width: 100%; max-width: 320px;
    margin-top: 10px; padding: 10px 12px;
    background: #2a2a2a; border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; cursor: pointer; text-align: left;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
  }
  .pdf-file-card:hover { background: #313131; border-color: rgba(255,255,255,0.14); }
  .pdf-file-card:active { transform: scale(0.99); }
  .pdf-file-icon {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#ef4444,#dc2626); color: #fff;
  }
  .pdf-file-icon svg { width: 19px; height: 19px; }
  .pdf-file-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .pdf-file-name { font-size: 13px; font-weight: 600; color: #ececec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pdf-file-sub { font-size: 11.5px; color: #9a9a9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pdf-file-download {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: #b4b4b4; background: rgba(255,255,255,0.05);
    transition: background .15s ease, color .15s ease;
  }
  .pdf-file-download svg { width: 15px; height: 15px; }
  .pdf-file-card:hover .pdf-file-download { background: rgba(99,102,241,0.18); color: #a5b4fc; }
  .pdf-file-card.pdf-downloading .pdf-file-download svg { animation: pdfSpin 0.8s linear infinite; }
  @keyframes pdfSpin { to { transform: rotate(360deg); } }

  html.light .pdf-file-card { background: #f4f4f5; border-color: rgba(0,0,0,0.08); }
  html.light .pdf-file-card:hover { background: #ececec; border-color: rgba(0,0,0,0.14); }
  html.light .pdf-file-name { color: #0d0d0d; }
  html.light .pdf-file-sub { color: #6b6b6b; }
  html.light .pdf-file-download { background: rgba(0,0,0,0.05); color: #5d5d5d; }

  /* ── PDF chip badge ────────────────────────────────────── */
  .pdf-ready-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 9px; font-weight: 700; color: #6366f1;
    background: rgba(99,102,241,0.13); border-radius: 5px;
    padding: 1px 5px; margin-top: 2px; letter-spacing: 0.2px;
  }

  /* ====== Code Compiler ====== */
  #codeCompilerOverlay {
    position: fixed; inset: 0; z-index: 1000;
    display: none; background: #141414;
    flex-direction: column; font-family: 'Inter', sans-serif;
  }
  #codeCompilerOverlay.visible { display: flex; }
  html.light #codeCompilerOverlay { background: #f2f2f2; }

  /* ── Header ── */
  #ccHeader {
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px; height: 50px;
    background: #1c1c1c; border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
  }
  html.light #ccHeader { background: #ffffff; border-color: rgba(0,0,0,0.09); }

  #ccLogo {
    display: flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 700; color: #e5e5e5; margin-right: 4px;
  }
  html.light #ccLogo { color: #111; }
  #ccLogo svg { flex-shrink: 0; }

  #ccLangSelect {
    background: #2a2a2a; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 6px 10px; font-size: 13px; color: #e0e0e0;
    outline: none; font-family: inherit; cursor: pointer; min-width: 150px;
    transition: border-color 0.15s;
  }
  html.light #ccLangSelect { background: #f0f0f0; border-color: rgba(0,0,0,0.12); color: #111; }
  #ccLangSelect:focus { border-color: rgba(255,255,255,0.3); }

  #ccRunBtn {
    display: flex; align-items: center; gap: 6px;
    background: #22c55e; color: #fff; border: none; border-radius: 8px;
    padding: 7px 16px; font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: background 0.15s, transform 0.1s;
    white-space: nowrap; letter-spacing: 0.2px;
  }
  #ccRunBtn:hover:not(:disabled) { background: #16a34a; }
  #ccRunBtn:active:not(:disabled) { transform: scale(0.97); }
  #ccRunBtn:disabled { background: rgba(255,255,255,0.1); color: #666; cursor: not-allowed; }
  html.light #ccRunBtn:disabled { background: rgba(0,0,0,0.08); color: #999; }

  #ccClearBtn {
    background: transparent; border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 6px 12px; font-size: 13px; color: #888;
    cursor: pointer; font-family: inherit; transition: all 0.15s;
  }
  #ccClearBtn:hover { border-color: rgba(255,255,255,0.2); color: #ccc; background: rgba(255,255,255,0.05); }
  html.light #ccClearBtn { border-color: rgba(0,0,0,0.1); color: #666; }
  html.light #ccClearBtn:hover { color: #222; background: rgba(0,0,0,0.04); }

  .cc-icon-btn {
    background: transparent; border: none; border-radius: 8px; padding: 7px;
    cursor: pointer; color: #888; display: inline-flex; align-items: center;
    justify-content: center; transition: all 0.15s; flex-shrink: 0;
  }
  .cc-icon-btn:hover { background: rgba(255,255,255,0.08); color: #e0e0e0; }
  html.light .cc-icon-btn { color: #666; }
  html.light .cc-icon-btn:hover { background: rgba(0,0,0,0.06); color: #111; }
  .cc-spacer { flex: 1; min-width: 8px; }

  /* ── Body ── */
  #ccBody { display: flex; flex: 1; min-height: 0; overflow: hidden; }

  /* ── Editor pane ── */
  #ccEditorPane {
    display: flex; flex-direction: column;
    flex: 1 1 58%; min-width: 0;
    border-right: 1px solid rgba(255,255,255,0.06);
  }
  html.light #ccEditorPane { border-color: rgba(0,0,0,0.08); }

  .cc-pane-bar {
    display: flex; align-items: center; gap: 8px; padding: 5px 14px;
    background: #1a1a1a; border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 11px; color: #666; flex-shrink: 0; min-height: 32px;
  }
  html.light .cc-pane-bar { background: #f7f7f7; border-color: rgba(0,0,0,0.07); color: #999; }
  .cc-pane-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; font-size: 10px; }

  #ccEditor {
    flex: 1; width: 100%; background: #0e0e0e; color: #e8e8e8;
    border: none; outline: none; resize: none;
    font-family: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    font-size: 14px; line-height: 1.7; padding: 18px 20px;
    tab-size: 2; -webkit-user-select: text; user-select: text;
    overflow-y: auto; overflow-x: auto;
    scrollbar-width: thin; scrollbar-color: #333 transparent;
    caret-color: #22c55e;
  }
  html.light #ccEditor { background: #1a1a1a; color: #e8e8e8; }
  #ccEditor::-webkit-scrollbar { width: 6px; }
  #ccEditor::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
  #ccEditor::placeholder { color: #444; }

  #ccStdinRow {
    display: flex; align-items: center; gap: 10px; padding: 7px 14px;
    background: #161616; border-top: 1px solid rgba(255,255,255,0.05); flex-shrink: 0;
  }
  html.light #ccStdinRow { background: #f5f5f5; border-color: rgba(0,0,0,0.06); }
  #ccStdinLabel {
    font-size: 10px; font-weight: 700; color: #555; text-transform: uppercase;
    letter-spacing: 0.6px; white-space: nowrap;
  }
  html.light #ccStdinLabel { color: #999; }
  #ccStdin {
    flex: 1; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,0.07);
    padding: 3px 0; font-size: 12px; color: #ccc;
    outline: none; font-family: ui-monospace, monospace;
    -webkit-user-select: text; user-select: text; transition: border-color 0.15s;
  }
  #ccStdin:focus { border-color: rgba(255,255,255,0.2); }
  html.light #ccStdin { border-color: rgba(0,0,0,0.1); color: #333; }
  html.light #ccStdin:focus { border-color: rgba(0,0,0,0.25); }
  #ccStdin::placeholder { color: #444; }
  html.light #ccStdin::placeholder { color: #aaa; }

  /* ── Right pane ── */
  #ccRightPane {
    display: flex; flex-direction: column;
    flex: 0 0 42%; min-width: 0; min-height: 0;
  }

  /* ── Terminal (VS Code-inspired) ── */
  #ccOutputPane {
    display: flex; flex-direction: column;
    flex: 1 1 50%; min-height: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: #1e1e1e;
  }
  html.light #ccOutputPane { border-color: rgba(0,0,0,0.08); background: #ffffff; }

  /* Terminal tab bar (mimics VS Code panel tabs) */
  .cc-term-tabs {
    display: flex; align-items: stretch; gap: 0;
    background: #252526; border-bottom: 1px solid #1a1a1a;
    padding: 0 6px; min-height: 34px; flex-shrink: 0;
    user-select: none;
  }
  html.light .cc-term-tabs { background: #f3f3f3; border-bottom-color: #e5e5e5; }
  .cc-term-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 0 12px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.6px; color: #969696; cursor: pointer;
    border-bottom: 1px solid transparent; text-transform: uppercase;
    position: relative; transition: color 0.15s;
  }
  .cc-term-tab:hover { color: #d4d4d4; }
  html.light .cc-term-tab { color: #616161; }
  html.light .cc-term-tab:hover { color: #111; }
  .cc-term-tab.active { color: #ffffff; border-bottom-color: #007acc; }
  html.light .cc-term-tab.active { color: #0d0d0d; border-bottom-color: #007acc; }
  .cc-term-tab .cc-tab-count {
    background: rgba(255,255,255,0.12); color: #d4d4d4;
    font-size: 10px; padding: 1px 6px; border-radius: 10px; min-width: 16px; text-align: center;
  }
  html.light .cc-term-tab .cc-tab-count { background: rgba(0,0,0,0.08); color: #333; }
  .cc-term-tab.has-errors .cc-tab-count { background: #f14c4c; color: #fff; }
  .cc-term-actions {
    margin-left: auto; display: flex; align-items: center; gap: 2px; padding-right: 4px;
  }
  #ccRunStatus { font-size: 11px; margin-right: 8px; font-family: ui-monospace, 'Cascadia Code', monospace; }
  .cc-term-btn {
    background: transparent; border: none; padding: 6px;
    color: #c5c5c5; cursor: pointer; border-radius: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s;
  }
  .cc-term-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); color: #fff; }
  .cc-term-btn:disabled { opacity: 0.35; cursor: not-allowed; }
  .cc-term-btn.active { background: rgba(0,122,204,0.25); color: #4fc3f7; }
  html.light .cc-term-btn { color: #616161; }
  html.light .cc-term-btn:hover:not(:disabled) { background: rgba(0,0,0,0.06); color: #111; }
  html.light .cc-term-btn.active { background: rgba(0,122,204,0.12); color: #007acc; }

  /* Search bar */
  .cc-term-search {
    display: none; align-items: center; gap: 6px;
    padding: 6px 10px; background: #252526; border-bottom: 1px solid #1a1a1a;
    flex-shrink: 0;
  }
  .cc-term-search.visible { display: flex; }
  html.light .cc-term-search { background: #f3f3f3; border-bottom-color: #e5e5e5; }
  .cc-term-search input {
    flex: 1; background: #3c3c3c; border: 1px solid transparent;
    color: #e0e0e0; padding: 4px 8px; font-size: 12px; border-radius: 3px;
    outline: none; font-family: ui-monospace, 'Cascadia Code', monospace;
  }
  .cc-term-search input:focus { border-color: #007acc; }
  html.light .cc-term-search input { background: #fff; border-color: #ccc; color: #111; }
  .cc-term-search .cc-search-info { font-size: 11px; color: #969696; font-family: ui-monospace, monospace; min-width: 50px; text-align: right; }
  html.light .cc-term-search .cc-search-info { color: #616161; }

  /* Terminal body */
  #ccOutput {
    flex: 1; background: #1e1e1e; color: #cccccc;
    font-family: 'Cascadia Code', 'Cascadia Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px; line-height: 1.5; padding: 8px 12px;
    overflow-y: auto; overflow-x: auto;
    white-space: pre-wrap; word-break: break-word;
    -webkit-user-select: text; user-select: text;
    scrollbar-width: thin; scrollbar-color: #464647 transparent;
    scroll-behavior: smooth;
  }
  #ccOutput.nowrap { white-space: pre; word-break: normal; }
  html.light #ccOutput { background: #ffffff; color: #333333; scrollbar-color: #c1c1c1 transparent; }
  #ccOutput::-webkit-scrollbar { width: 10px; height: 10px; }
  #ccOutput::-webkit-scrollbar-thumb { background: #464647; border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
  #ccOutput::-webkit-scrollbar-thumb:hover { background: #5a5a5b; border: 2px solid transparent; background-clip: padding-box; }
  html.light #ccOutput::-webkit-scrollbar-thumb { background: #c1c1c1; border: 2px solid transparent; background-clip: padding-box; }

  /* Terminal panels */
  .cc-term-panel { display: none; }
  .cc-term-panel.active { display: block; }

  /* Prompt line */
  .cc-term-prompt {
    display: flex; align-items: baseline; flex-wrap: wrap;
    padding: 2px 0; gap: 6px;
  }
  .cc-term-user { color: #4ec9b0; font-weight: 600; }
  .cc-term-at { color: #808080; }
  .cc-term-host { color: #dcdcaa; font-weight: 600; }
  .cc-term-colon { color: #808080; }
  .cc-term-path { color: #569cd6; font-weight: 600; }
  .cc-term-sigil { color: #cccccc; margin-right: 4px; }
  .cc-term-cmd { color: #ce9178; }
  .cc-term-time { color: #6a6a6a; font-size: 11px; margin-left: 8px; }
  html.light .cc-term-user { color: #098658; }
  html.light .cc-term-host { color: #795e26; }
  html.light .cc-term-path { color: #0451a5; }
  html.light .cc-term-sigil { color: #333; }
  html.light .cc-term-cmd { color: #a31515; }
  html.light .cc-term-at, html.light .cc-term-colon { color: #616161; }
  html.light .cc-term-time { color: #999; }

  /* Output block */
  .cc-term-block { margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px dashed rgba(255,255,255,0.04); }
  .cc-term-block:last-child { border-bottom: 0; }
  html.light .cc-term-block { border-bottom-color: rgba(0,0,0,0.05); }
  .cc-term-body { padding-left: 0; white-space: pre-wrap; word-break: break-word; }
  .cc-term-body.stderr { color: #f48771; }
  html.light .cc-term-body.stderr { color: #cd3131; }
  .cc-term-body.compile-error { color: #f48771; }
  html.light .cc-term-body.compile-error { color: #cd3131; }
  .cc-term-body.info { color: #75beff; }
  html.light .cc-term-body.info { color: #007acc; }

  /* Status line under output */
  .cc-term-status {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0 2px; font-size: 12px;
  }
  .cc-term-status.ok { color: #4ec9b0; }
  .cc-term-status.err { color: #f48771; }
  html.light .cc-term-status.ok { color: #098658; }
  html.light .cc-term-status.err { color: #cd3131; }
  .cc-term-status svg { flex-shrink: 0; }

  /* Blinking cursor */
  .cc-term-cursor {
    display: inline-block; width: 8px; height: 15px;
    background: #cccccc; vertical-align: middle;
    animation: cc-cursor-blink 1s steps(1) infinite;
    margin-left: 2px; border-radius: 1px;
  }
  html.light .cc-term-cursor { background: #333; }
  @keyframes cc-cursor-blink { 50% { opacity: 0; } }

  /* Welcome/empty state */
  .cc-term-welcome { padding: 4px 0; }
  .cc-term-hint {
    color: #6a6a6a; font-size: 12px; margin-top: 8px;
    font-family: 'Inter', sans-serif;
  }
  html.light .cc-term-hint { color: #616161; }
  .cc-term-hint kbd {
    background: #3c3c3c; border: 1px solid #555; color: #d4d4d4;
    padding: 1px 6px; border-radius: 4px; font-family: inherit;
    font-size: 11px; margin: 0 2px;
  }
  html.light .cc-term-hint kbd { background: #f4f4f5; border-color: #d4d4d8; color: #333; }

  /* Running indicator */
  .cc-term-running {
    display: inline-flex; align-items: center; gap: 8px;
    color: #dcdcaa; font-size: 12px;
  }
  html.light .cc-term-running { color: #795e26; }
  .cc-term-running .cc-run-dots { display: inline-flex; gap: 3px; }
  .cc-term-running .cc-run-dots span {
    width: 4px; height: 4px; border-radius: 50%; background: currentColor;
    animation: cc-run-dot 1.2s ease-in-out infinite;
  }
  .cc-term-running .cc-run-dots span:nth-child(2) { animation-delay: 0.15s; }
  .cc-term-running .cc-run-dots span:nth-child(3) { animation-delay: 0.3s; }
  @keyframes cc-run-dot { 0%,60%,100% { opacity: 0.3; transform: scale(0.8); } 30% { opacity: 1; transform: scale(1); } }

  /* ANSI colors */
  .ansi-30 { color: #000000; } .ansi-31 { color: #cd3131; } .ansi-32 { color: #0dbc79; }
  .ansi-33 { color: #e5e510; } .ansi-34 { color: #2472c8; } .ansi-35 { color: #bc3fbc; }
  .ansi-36 { color: #11a8cd; } .ansi-37 { color: #e5e5e5; }
  .ansi-90 { color: #666666; } .ansi-91 { color: #f14c4c; } .ansi-92 { color: #23d18b; }
  .ansi-93 { color: #f5f543; } .ansi-94 { color: #3b8eea; } .ansi-95 { color: #d670d6; }
  .ansi-96 { color: #29b8db; } .ansi-97 { color: #ffffff; }
  .ansi-b { font-weight: 700; } .ansi-i { font-style: italic; } .ansi-u { text-decoration: underline; }

  /* Search highlight */
  .cc-search-hit { background: rgba(234,179,8,0.35); border-radius: 2px; }
  .cc-search-hit.current { background: #ea580c; color: #fff; }

  /* STDIN multi-line */
  #ccStdinRow.multi { align-items: flex-start; padding: 8px 12px; }
  #ccStdinRow.multi #ccStdinLabel { padding-top: 4px; }
  textarea#ccStdin {
    flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px; padding: 6px 10px; font-size: 12px; color: #d4d4d4;
    font-family: 'Cascadia Code', ui-monospace, monospace; outline: none;
    resize: vertical; min-height: 30px; max-height: 120px; line-height: 1.5;
  }
  textarea#ccStdin:focus { border-color: #007acc; }
  html.light textarea#ccStdin { background: #fff; border-color: rgba(0,0,0,0.12); color: #111; }
  textarea#ccStdin::placeholder { color: #6a6a6a; }
  html.light textarea#ccStdin::placeholder { color: #aaa; }

  /* ── Vlen AI pane ── */
  #ccAiPane { display: flex; flex-direction: column; flex: 1 1 50%; min-height: 0; background: #121212; }
  html.light #ccAiPane { background: #f8f8f8; }

  #ccAiBar {
    display: flex; align-items: center; gap: 7px; padding: 5px 14px;
    background: #1a1a1a; border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 11px; flex-shrink: 0; min-height: 32px;
  }
  html.light #ccAiBar { background: #f7f7f7; border-color: rgba(0,0,0,0.07); }
  #ccAiLabel { font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; font-size: 10px; color: #777; }
  #ccAiBadge { font-size: 10px; color: #555; margin-left: 2px; }
  html.light #ccAiLabel { color: #999; }
  html.light #ccAiBadge { color: #bbb; }

  #ccAiQuickBtns {
    display: flex; gap: 5px; padding: 8px 12px; flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,0.05); flex-shrink: 0;
    background: #151515;
  }
  html.light #ccAiQuickBtns { border-color: rgba(0,0,0,0.06); background: #f5f5f5; }

  .cc-ai-quick {
    padding: 4px 11px; border-radius: 20px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: #b0b0b0; font-size: 11px; font-weight: 500;
    cursor: pointer; font-family: inherit; transition: all 0.15s; white-space: nowrap;
  }
  .cc-ai-quick:hover:not(:disabled) { background: rgba(255,255,255,0.12); color: #e0e0e0; border-color: rgba(255,255,255,0.2); }
  .cc-ai-quick:disabled { opacity: 0.35; cursor: not-allowed; }
  html.light .cc-ai-quick { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.1); color: #555; }
  html.light .cc-ai-quick:hover:not(:disabled) { background: rgba(0,0,0,0.1); color: #111; }

  #ccAiResponse {
    flex: 1; overflow-y: auto; padding: 12px 14px;
    font-size: 13px; line-height: 1.65; color: #d0d0d0; min-height: 0;
    scrollbar-width: thin; scrollbar-color: #333 transparent;
    -webkit-user-select: text; user-select: text;
  }
  #ccAiResponse::-webkit-scrollbar { width: 6px; }
  #ccAiResponse::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
  html.light #ccAiResponse { color: #222; }
  #ccAiResponse.empty { color: #555; font-style: italic; font-size: 12px; }
  html.light #ccAiResponse.empty { color: #aaa; }
  #ccAiResponse.thinking { display: flex; align-items: center; gap: 6px; padding: 14px; }

  #ccAiInputRow {
    display: flex; gap: 6px; padding: 8px 10px;
    border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
    background: #161616;
  }
  html.light #ccAiInputRow { border-color: rgba(0,0,0,0.07); background: #f5f5f5; }

  #ccAiInput {
    flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; padding: 7px 12px; font-size: 13px; color: #e0e0e0;
    outline: none; font-family: inherit; -webkit-user-select: text; user-select: text; min-width: 0;
    transition: border-color 0.15s;
  }
  html.light #ccAiInput { background: #fff; border-color: rgba(0,0,0,0.12); color: #111; }
  #ccAiInput:focus { border-color: rgba(255,255,255,0.25); }
  html.light #ccAiInput:focus { border-color: rgba(0,0,0,0.25); }
  #ccAiInput::placeholder { color: #555; }
  html.light #ccAiInput::placeholder { color: #aaa; }

  #ccAiSendBtn {
    background: #e5e5e5; border: none; border-radius: 8px; padding: 7px 14px;
    color: #111; font-size: 13px; font-weight: 600; cursor: pointer;
    font-family: inherit; white-space: nowrap; transition: all 0.15s; flex-shrink: 0;
  }
  #ccAiSendBtn:hover:not(:disabled) { background: #fff; }
  #ccAiSendBtn:disabled { opacity: 0.3; cursor: not-allowed; }
  html.light #ccAiSendBtn { background: #111; color: #fff; }
  html.light #ccAiSendBtn:hover:not(:disabled) { background: #333; }

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

  /* ── Responsive ── */
  @media (max-width: 767px) {
    #ccBody { flex-direction: column; }
    #ccEditorPane { flex: 0 0 44%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
    #ccRightPane { flex: 0 0 56%; overflow: hidden; flex-direction: column; }
    #ccOutputPane { flex: 1 1 45%; }
    #ccAiPane { flex: 1 1 55%; }
    #ccEditor { font-size: 13px; padding: 12px; }
    #ccOutput { font-size: 12px; padding: 10px 12px; }
    #ccAiResponse { font-size: 12px; }
    #ccHeader { gap: 5px; padding: 0 10px; height: 46px; }
    #ccLangSelect { min-width: 120px; font-size: 12px; padding: 5px 8px; }
    #ccRunBtn { padding: 6px 12px; font-size: 12px; }
    #ccClearBtn { display: none; }
    #ccLogo span { display: none; }
    #ccAiQuickBtns { gap: 4px; padding: 6px 10px; }
    .cc-ai-quick { font-size: 10px; padding: 3px 9px; }
  }


  /* Greeting screen */
  .greeting-wrap { animation: greetingIn .5s cubic-bezier(.2,.7,.2,1) both; }
  .greeting-title {
    background: linear-gradient(135deg, #ececec 0%, #b4b4b4 60%, #8e8e8e 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    letter-spacing: -0.02em;
  }
  html.light .greeting-title {
    background: linear-gradient(135deg, #111 0%, #333 60%, #666 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .greeting-name {
    background: linear-gradient(135deg, #a78bfa 0%, #60a5fa 50%, #34d399 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .greeting-sub { animation: greetingIn .6s .08s cubic-bezier(.2,.7,.2,1) both; }
  #suggestions { animation: greetingIn .7s .16s cubic-bezier(.2,.7,.2,1) both; }
  #suggestions > button { transition: transform .18s ease, background-color .18s ease, border-color .18s ease; }
  #suggestions > button:hover { transform: translateY(-1px); }
  #suggestions > button:active { transform: translateY(0); }
  @keyframes greetingIn {
    from { opacity: 0; transform: translateY(8px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0);   filter: blur(0); }
  }

  /* Infinity thinking loader */
  .infinity-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .infinity-loader svg {
    width: 64px;
    height: 26px;
    overflow: visible;
  }
  .inf-track {
    stroke: currentColor;
    stroke-opacity: 0.12;
    stroke-width: 3;
    stroke-linecap: round;
    fill: none;
  }
  .inf-trace {
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 40 160;
    stroke-dashoffset: 0;
    color: #ececec;
    animation: infTrace 1.6s cubic-bezier(.65,.05,.35,1) infinite;
  }
  html.light .inf-trace { color: #1a1a1a; }
  @keyframes infTrace {
    0%   { stroke-dashoffset: 0;    stroke-dasharray: 4 200; }
    50%  { stroke-dasharray: 80 120; }
    100% { stroke-dashoffset: -200; stroke-dasharray: 4 200; }
  }
    100% { background-position: -200% 0; }
  }

  /* Mobile smoothness */
  #messages, #chatList, .scroll-soft {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
  }
  #messages > *, .user-bubble, .prose-chat { will-change: transform; }
  @media (max-width: 768px) {
    * { -webkit-tap-highlight-color: transparent; }
    button, a, [role="button"] { touch-action: manipulation; }
    #input { font-size: 16px; } /* prevent iOS zoom on focus */
    .transition, .transition-all, .transition-colors, .transition-opacity, .transition-transform {
      transition-duration: 180ms;
    }
    #sidebar { transition: transform 260ms cubic-bezier(.2,.7,.2,1); }
    .user-bubble, .prose-chat, #suggestions > button {
      transform: translateZ(0);
      backface-visibility: hidden;
    }
    @keyframes greetingIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .greeting-wrap, .greeting-sub, #suggestions { animation: none !important; }
    .inf-trace { animation-duration: 3s; }
  }

  .att-chip-loading { opacity: 0.6; }
  .att-chip-loading::after {
    content: ''; display: inline-block; width: 10px; height: 10px;
    margin-left: 6px; border-radius: 50%;
    border: 1.5px solid currentColor; border-top-color: transparent;
    animation: spin 0.8s linear infinite; vertical-align: middle;
  }
  @keyframes spin { to { transform: rotate(360deg); } }



  /* === Listen Mode (independent feature) === */
  #listenModeBtn.recording { color: #ef4444; }
  #listenModeBtn.recording svg { animation: lmpulse 1.5s infinite; border-radius: 99px; }
  @keyframes lmpulse {
    0%   { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
    100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
  }

  #listenWidget {
    display: none;
    position: fixed;
    right: 20px; bottom: 20px;
    width: 360px; max-width: calc(100vw - 32px);
    max-height: 70vh;
    background: #2f2f2f;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    z-index: 9998;
    flex-direction: column;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    color: #ececec;
  }
  #listenWidget.visible { display: flex; }
  html.light #listenWidget { background: #ffffff; color: #1a1a1a; border-color: rgba(0,0,0,0.1); }

  #listenWidget .lw-head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.15);
  }
  html.light #listenWidget .lw-head { border-color: rgba(0,0,0,0.08); background: rgba(0,0,0,0.03); }
  #listenWidget .lw-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #6b7280;
  }
  #listenWidget.is-recording .lw-dot { background: #ef4444; animation: lmpulse 1.5s infinite; }
  #listenWidget .lw-title { flex: 1; font-size: 13px; font-weight: 600; }
  #listenWidget .lw-btn {
    padding: 4px 6px; border-radius: 6px; cursor: pointer;
    color: #b4b4b4; background: transparent; border: none;
    display: inline-flex; align-items: center; justify-content: center;
  }
  #listenWidget .lw-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
  html.light #listenWidget .lw-btn:hover { background: rgba(0,0,0,0.05); color: #000; }

  #listenWidget .lw-body {
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 10px;
    overflow: hidden;
  }
  #lwMeter {
    width: 100%; height: 28px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
  }
  html.light #lwMeter { background: rgba(0,0,0,0.05); }
  #lwTranscript {
    min-height: 80px; max-height: 200px;
    overflow-y: auto;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    font-size: 13px; line-height: 1.5;
    white-space: pre-wrap; word-wrap: break-word;
    color: #ececec;
  }
  html.light #lwTranscript { background: rgba(0,0,0,0.04); color: #1a1a1a; }
  #lwTranscript.empty { color: #8e8e8e; font-style: italic; }

  .lw-meta { font-size: 11px; color: #8e8e8e; display: flex; gap: 10px; align-items: center; }
  .lw-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .lw-action-btn {
    flex: 1;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.08);
    color: #ececec;
    font-size: 12px; font-weight: 500;
    border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  }
  .lw-action-btn:hover { background: rgba(255,255,255,0.15); }
  .lw-action-btn.primary { background: #ececec; color: #1a1a1a; }
  .lw-action-btn.primary:hover { background: #fff; }
  .lw-action-btn.danger { background: #ef4444; color: #fff; }
  .lw-action-btn.danger:hover { background: #dc2626; }
  .lw-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
  html.light .lw-action-btn { background: rgba(0,0,0,0.06); color: #1a1a1a; }
  html.light .lw-action-btn:hover { background: rgba(0,0,0,0.12); }
  html.light .lw-action-btn.primary { background: #1a1a1a; color: #fff; }

  .lw-question-row { display: none; gap: 6px; }
  #listenWidget.is-stopped .lw-question-row { display: flex; }
  #lwQuestionInput {
    flex: 1; min-width: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: #ececec;
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 13px; outline: none;
  }
  html.light #lwQuestionInput { background: rgba(0,0,0,0.04); color: #1a1a1a; border-color: rgba(0,0,0,0.08); }
  #lwQuestionInput:focus { border-color: rgba(255,255,255,0.25); }
  #lwQuestionInput::placeholder { color: #8e8e8e; }

  @media (max-width: 640px) {
    #listenWidget { right: 8px; left: 8px; width: auto; bottom: 8px; max-height: 80vh; }
  }



  /* Voice Mode Enhanced Styles */
  /* Simplified Voice Mode — animation-only */
  #voiceOverlay #vmStatePill,
  #voiceOverlay #vmConversationCount,
  #voiceOverlay #vmTranscriptArea,
  #voiceOverlay #vmResponseArea,
  #voiceOverlay #vmMuteBtn,
  #voiceOverlay #vmSettingsBtn,
  #voiceOverlay #vmMicBtn,
  #voiceOverlay #vmHint { display: none !important; }
  #voiceOverlay #vmCloseBtn { position: absolute; top: max(env(safe-area-inset-top), 16px); right: 16px; z-index: 20; }
  #voiceOverlay #vmError { text-align:center; }

  #voiceOverlay.open { display: flex; animation: vmFadeIn .35s cubic-bezier(.16,1,.3,1); }
  @keyframes vmFadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* Orb animations */
  #vmMicBtn.listening #vmOrbBody {
    background: linear-gradient(135deg, #ffffff 0%, #d0d0d0 40%, #888888 100%);
    box-shadow: 0 0 60px rgba(255,255,255,0.12), 0 8px 32px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.2);
  }
  #vmMicBtn.listening #vmOrbRing {
    animation: vmOrbPulse 1.8s cubic-bezier(.4,0,.2,1) infinite;
    border-color: rgba(255,255,255,0.25);
  }
  @keyframes vmOrbPulse {
    0%   { transform: scale(1); opacity: 1; border-color: rgba(255,255,255,0.25); }
    50%  { transform: scale(1.15); opacity: 0.5; border-color: rgba(255,255,255,0.08); }
    100% { transform: scale(1); opacity: 1; border-color: rgba(255,255,255,0.25); }
  }

  #vmMicBtn.speaking #vmOrbBody {
    background: linear-gradient(135deg, #f0f0f0 0%, #b8b8b8 40%, #6a6a6a 100%);
    box-shadow: 0 0 50px rgba(220,220,220,0.15), 0 8px 32px rgba(0,0,0,0.4), inset 0 2px 4px rgba(255,255,255,0.15);
  }
  #vmMicBtn.speaking #vmOrbRing {
    animation: vmOrbSpeak 1.2s ease-in-out infinite;
    border-color: rgba(220,220,220,0.3);
  }
  @keyframes vmOrbSpeak {
    0%   { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.3); opacity: 0; }
  }

  #vmMicBtn.thinking #vmOrbBody {
    background: linear-gradient(135deg, #ececec 0%, #b0b0b0 40%, #707070 100%);
    box-shadow: 0 0 40px rgba(200,200,200,0.1), 0 8px 32px rgba(0,0,0,0.4);
  }

  /* State dot (monochrome) */
  #vmStateDot.listening { background: #e8e8e8; box-shadow: 0 0 8px rgba(232,232,232,0.5); }
  #vmStateDot.speaking { background: #cfcfcf; box-shadow: 0 0 8px rgba(207,207,207,0.5); }
  #vmStateDot.thinking { background: #a8a8a8; box-shadow: 0 0 8px rgba(168,168,168,0.5); animation: vmDotPulse 1s infinite; }
  @keyframes vmDotPulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

  /* Glow effects (monochrome) */
  #vmGlow.listening { opacity:1; background: radial-gradient(circle at 50% 50%, rgba(232,232,232,0.08) 0%, transparent 60%); }
  #vmGlow.speaking { opacity:1; background: radial-gradient(circle at 50% 50%, rgba(207,207,207,0.08) 0%, transparent 60%); }
  #vmGlow.thinking { opacity:1; background: radial-gradient(circle at 50% 50%, rgba(168,168,168,0.06) 0%, transparent 60%); }

  /* Light mode */
  html.light #voiceOverlay {
    background: radial-gradient(ellipse 1400px 900px at 50% 30%, #f8f8f8 0%, #eeeeee 50%, #e0e0e0 100%) !important;
  }
  html.light #vmMicBtn.listening #vmOrbBody {
    background: linear-gradient(135deg, #e0e0e0 0%, #c0c0c0 40%, #909090 100%);
  }
  html.light #vmSettingsPanel .bg-bg-side { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; }
  html.light #vmSettingsPanel select, html.light #vmSettingsPanel input { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.1) !important; color: #111 !important; }
  html.light #vmSettingsPanel button { background: rgba(0,0,0,0.06) !important; color: #111 !important; }


/* ====== Image Generator ====== */
#imageGeneratorOverlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(12px);
  overflow-y: auto;
}
#imageGeneratorOverlay.visible { display: flex; }
#imageGeneratorPanel {
  width: min(100%, 1040px);
  max-height: min(900px, calc(100dvh - 40px));
  overflow: auto;
  color: #ececec;
  background: #181818;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}
#imageGeneratorHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.image-generator-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.image-generator-subtitle { margin-top: 4px; color: #999; font-size: 12px; }
.image-generator-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 7px;
  color: #aaa;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.image-generator-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
#imageGeneratorBody {
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(320px, 1.14fr);
  gap: 24px;
  padding: 24px;
}
.image-generator-controls { min-width: 0; }
.image-generator-controls > label,
.image-generator-options label {
  display: block;
  margin-bottom: 7px;
  color: #bdbdbd;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#imagePromptInput,
.image-generator-options input,
.image-generator-options select {
  width: 100%;
  color: #ececec;
  background: #252525;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 12px;
  outline: none;
  font: inherit;
  transition: border-color .15s, background .15s;
}
#imagePromptInput { min-height: 116px; padding: 12px 13px; resize: vertical; line-height: 1.5; }
#imagePromptInput:focus,
.image-generator-options input:focus,
.image-generator-options select:focus { border-color: rgba(129,140,248,0.85); background: #292929; }
#imagePromptInput::placeholder { color: #777; }
.image-generator-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 10px;
  margin-top: 18px;
}
.image-generator-options label { margin-bottom: 5px; font-size: 10px; }
.image-generator-options input,
.image-generator-options select { height: 38px; padding: 0 10px; font-size: 13px; }
.image-generator-options select { cursor: pointer; }
.image-generator-optional { color: #777; font-size: 9px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.image-generator-actions { display: flex; align-items: center; gap: 12px; margin-top: 22px; min-height: 40px; }
#imageGenerateBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 132px;
  padding: 10px 16px;
  color: #212121;
  background: #ececec;
  border: 0;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, opacity .15s, transform .1s;
}
#imageGenerateBtn:hover:not(:disabled) { background: #fff; }
#imageGenerateBtn:active:not(:disabled) { transform: scale(.98); }
#imageGenerateBtn:disabled { opacity: .48; cursor: wait; }
.image-generate-icon { width: 15px; height: 15px; }
#imageGenerateBtn.is-loading .image-generate-icon { animation: imageGeneratorSpin .9s linear infinite; }
#imageGeneratorStatus { color: #9f9f9f; font-size: 12px; }
.image-generator-error {
  margin-top: 12px;
  padding: 10px 12px;
  color: #ffb4b4;
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.24);
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
}
.image-generator-preview-section { min-width: 0; }
.image-preview-empty,
.image-preview-loading {
  display: flex;
  min-height: 380px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: #777;
  background: #111;
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 16px;
  text-align: center;
}
.image-preview-empty svg { width: 48px; height: 48px; color: #555; }
.image-preview-empty p { margin: 0; font-size: 12px; }
.image-preview-loading { color: #aaa; border-style: solid; }
#generatedImage {
  display: block;
  width: 100%;
  max-height: 560px;
  min-height: 260px;
  object-fit: contain;
  background: #111;
  border-radius: 16px;
}
.image-loading-spinner {
  width: 27px;
  height: 27px;
  border: 3px solid rgba(255,255,255,0.18);
  border-top-color: #d4d4d4;
  border-radius: 50%;
  animation: imageGeneratorSpin .8s linear infinite;
}
.image-preview-actions { display: flex; gap: 8px; margin-top: 12px; }
.image-preview-actions button {
  flex: 1;
  min-height: 36px;
  color: #cfcfcf;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.image-preview-actions button:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,0.12); }
.image-preview-actions button:disabled { color: #666; cursor: not-allowed; opacity: .6; }
@keyframes imageGeneratorSpin { to { transform: rotate(360deg); } }

html.light #imageGeneratorPanel { color: #171717; background: #fff; border-color: rgba(0,0,0,0.1); }
html.light #imageGenerateBtn { color: #fff; background: #212121; }
html.light #imageGenerateBtn:hover:not(:disabled) { background: #333; }
html.light #imageGeneratorHeader { border-color: rgba(0,0,0,0.09); }
html.light .image-generator-subtitle,
html.light #imageGeneratorStatus { color: #707070; }
html.light .image-generator-close { color: #666; }
html.light .image-generator-close:hover { color: #111; background: rgba(0,0,0,0.06); }
html.light .image-generator-controls > label,
html.light .image-generator-options label { color: #555; }
html.light #imagePromptInput,
html.light .image-generator-options input,
html.light .image-generator-options select { color: #171717; background: #f6f6f6; border-color: rgba(0,0,0,0.12); }
html.light #imagePromptInput:focus,
html.light .image-generator-options input:focus,
html.light .image-generator-options select:focus { background: #fff; }
html.light .image-preview-empty,
html.light .image-preview-loading,
html.light #generatedImage { color: #777; background: #f5f5f5; border-color: rgba(0,0,0,0.13); }
html.light .image-preview-actions button { color: #555; background: #f4f4f4; border-color: rgba(0,0,0,0.1); }
html.light .image-preview-actions button:hover:not(:disabled) { color: #111; background: #e9e9e9; }

@media (max-width: 760px) {
  #imageGeneratorOverlay { align-items: flex-start; padding: 10px; }
  #imageGeneratorPanel { max-height: calc(100dvh - 20px); border-radius: 18px; }
  #imageGeneratorHeader { padding: 18px; }
  #imageGeneratorBody { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
  .image-preview-empty,
  .image-preview-loading { min-height: 260px; }
  #generatedImage { max-height: 60dvh; }
}

@media (max-width: 420px) {
  .image-generator-options { grid-template-columns: 1fr 1fr; gap: 11px 8px; }
  #imageGeneratorBody { padding: 14px; }
}


/* Mobile interaction refinements for the image generator */
body.image-generator-open { overflow: hidden; }
#imageGeneratorOverlay {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#imageGeneratorPanel {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.image-generator-close {
  width: 44px;
  height: 44px;
}
#imageGeneratorStatus { min-height: 18px; }

@media (max-width: 760px) {
  #imageGeneratorOverlay {
    padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  #imageGeneratorPanel {
    width: 100%;
    max-height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
  }
  #imageGeneratorHeader {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #181818;
  }
  html.light #imageGeneratorHeader { background: #fff; }
  #imageGeneratorBody { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  #imagePromptInput,
  .image-generator-options input,
  .image-generator-options select,
  #imageGenerateBtn,
  .image-preview-actions button { min-height: 44px; }
  #imagePromptInput { min-height: 112px; }
  .image-generator-options input,
  .image-generator-options select { font-size: 16px; }
  #imageGenerateBtn { width: 100%; }
  .image-generator-actions { align-items: stretch; flex-direction: column; gap: 7px; }
  #imageGeneratorStatus { text-align: center; }
  .image-generator-error { margin-top: 8px; }
  .image-preview-actions button { flex: 1 1 0; }
}


/* ===== Tiny inline sponsored answer card =====
   The ad is outside .msg-body, so it never enters copied text, PDF exports,
   or the assistant's streamed response. Fixed flex sizing prevents overflow. */
.sponsored-answer-ad {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  box-sizing: border-box;
}

.sponsored-ad-link {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 66px;
  box-sizing: border-box;
  padding: 7px 10px 7px 7px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  background: rgba(255,255,255,0.025);
  color: #8e8e8e;
  text-decoration: none;
  overflow: hidden;
  transition: background 180ms ease, border-color 180ms ease;
}

.sponsored-ad-link:hover,
.sponsored-ad-link:focus-visible {
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.055);
  color: #b4b4b4;
  outline: none;
}

.sponsored-ad-image {
  display: block;
  width: 96px;
  height: 54px;
  flex: 0 0 96px;
  border-radius: 6px;
  object-fit: cover;
  background: #2f2f2f;
}

.sponsored-ad-label {
  flex: 0 0 auto;
  color: inherit;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.sponsored-ad-copy {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sponsored-ad-arrow {
  flex: 0 0 auto;
  color: #8e8e8e;
  font-size: 12px;
  line-height: 1;
}

html.light .sponsored-answer-ad { border-top-color: rgba(0,0,0,0.08); }
html.light .sponsored-ad-link { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.09); color: #8e8e8e; }
html.light .sponsored-ad-link:hover,
html.light .sponsored-ad-link:focus-visible { background: rgba(0,0,0,0.045); border-color: rgba(0,0,0,0.16); color: #5d5d5d; }
html.light .sponsored-ad-image { background: #e5e5e5; }

@media (max-width: 767px) {
  .sponsored-answer-ad { width: 100%; margin-top: 6px; padding-top: 5px; }
  .sponsored-ad-link { gap: 8px; min-height: 50px; padding: 6px 8px 6px 6px; border-radius: 9px; }
  .sponsored-ad-image { width: 72px; height: 40px; flex-basis: 72px; border-radius: 5px; }
  .sponsored-ad-label { font-size: 8px; }
  .sponsored-ad-copy { font-size: 11px; }
  .sponsored-ad-arrow { font-size: 13px; }
}


/* =========================================================
   MOBILE LIVE CAMERA — Gemini Live style immersive view
   Applies ONLY at max-width: 767px and only while
   #screenWidget carries the .sw-live class. Desktop untouched.
   ========================================================= */

/* Live layer is hidden everywhere by default (incl. desktop) */
.sw-live-bar { display: none; }

@media (max-width: 767px) {

  /* ---- 1. Full-screen immersive shell ---- */
  #screenWidget.sw-live {
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #000 !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    z-index: 9999 !important;
    display: none;
  }
  #screenWidget.sw-live.visible { display: block !important; }
  html.light #screenWidget.sw-live { background: #000 !important; color: #fff; }

  /* ---- 2. Header floats over the feed ---- */
  #screenWidget.sw-live .sw-head {
    position: absolute; z-index: 4;
    top: 0; left: 0; right: 0;
    padding: calc(12px + env(safe-area-inset-top)) 14px 14px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.60), rgba(0,0,0,0));
    border-bottom: none !important;
    cursor: default;
  }
  #screenWidget.sw-live .sw-title { color: #fff; font-size: 14px; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
  #screenWidget.sw-live .sw-btn { color: rgba(255,255,255,0.85); }

  /* ---- 3. Camera feed becomes the background ---- */
  #screenWidget.sw-live .sw-body {
    position: absolute; inset: 0;
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
    height: 100% !important;
    max-height: none !important;
    overflow: hidden !important;
    touch-action: none;
  }
  #screenWidget.sw-live .sw-preview,
  #screenWidget.sw-live .sw-preview.preview-hidden {
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important;
    max-height: none !important; min-height: 0 !important;
    aspect-ratio: auto !important;
    border: none !important; border-radius: 0 !important;
    margin: 0 !important; padding: 0 !important;
    overflow: hidden !important;
    background: #000; z-index: 1;
  }
  #screenWidget.sw-live .sw-preview video {
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
  }
  /* Subtle vignette so overlaid text stays readable */
  #screenWidget.sw-live .sw-body::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.28) 34%, rgba(0,0,0,0) 62%);
  }

  /* ---- 4. Voice-only: no typed input on mobile live ---- */
  #screenWidget.sw-live .sw-question-section,
  #screenWidget.sw-live .sw-question-input,
  #screenWidget.sw-live .sw-send-btn,
  #screenWidget.sw-live .sw-answer-label,
  #screenWidget.sw-live .sw-resize-handle,
  #screenWidget.sw-live #swResize { display: none !important; }

  /* ---- 5. Floating subtitle overlay for Vlen's live text ---- */
  #screenWidget.sw-live .sw-answer-section {
    position: absolute; z-index: 5;
    left: 0; right: 0;
    bottom: calc(112px + env(safe-area-inset-bottom));
    display: block !important;
    padding: 0 14px;
    min-height: 0;
    pointer-events: auto;
  }
  #screenWidget.sw-live .sw-answer-box {
    margin: 0;
    max-height: 34dvh !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    background: linear-gradient(180deg, rgba(12,12,14,0.46), rgba(12,12,14,0.78)) !important;
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 20px;
    padding: 14px 16px !important;
    font-size: 15px !important;
    line-height: 1.6;
    color: #fff !important;
    text-shadow: 0 1px 10px rgba(0,0,0,0.55);
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  }
  #screenWidget.sw-live .sw-answer-box .prose-chat { color: #fff; font-size: 15px; }
  #screenWidget.sw-live .sw-answer-box::-webkit-scrollbar { width: 0; }
  #screenWidget.sw-live .sw-answer-box.empty { display: none !important; }

  /* ---- 6. Minimalist listening controls ---- */
  #screenWidget.sw-live .sw-live-bar {
    display: flex !important;
    position: absolute; z-index: 6;
    left: 0; right: 0;
    bottom: calc(20px + env(safe-area-inset-bottom));
    flex-direction: column; align-items: center; gap: 12px;
    padding: 0 16px;
  }
  #screenWidget.sw-live .sw-live-transcript {
    max-width: 88%;
    font-size: 13px; line-height: 1.45; text-align: center;
    color: rgba(255,255,255,0.92);
    background: rgba(0,0,0,0.34);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    padding: 7px 14px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.6);
    opacity: 0.95;
    transition: opacity 0.2s ease;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #screenWidget.sw-live .sw-live-actions {
    display: flex; align-items: center; justify-content: center; gap: 22px;
  }
  #screenWidget.sw-live .sw-live-btn {
    width: 46px; height: 46px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.16);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    cursor: pointer; transition: transform 0.15s ease, background 0.2s ease;
  }
  #screenWidget.sw-live .sw-live-btn:active { transform: scale(0.92); }
  #screenWidget.sw-live .sw-live-btn svg { width: 20px; height: 20px; }
  #screenWidget.sw-live .sw-live-btn-danger {
    background: rgba(239,68,68,0.9); border-color: rgba(239,68,68,0.6);
  }

  /* Pulsing mic indicator */
  #screenWidget.sw-live .sw-mic-orb {
    position: relative;
    width: 62px; height: 62px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.24);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  }
  #screenWidget.sw-live .sw-mic-orb svg { width: 24px; height: 24px; position: relative; z-index: 2; }
  #screenWidget.sw-live .sw-mic-ring {
    position: absolute; inset: 0; border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.55);
    opacity: 0;
  }
  /* Actively listening */
  #screenWidget.sw-live .sw-mic-orb.listening { background: rgba(99,102,241,0.30); border-color: rgba(129,140,248,0.7); }
  #screenWidget.sw-live .sw-mic-orb.listening .sw-mic-ring { animation: swLivePulse 1.8s ease-out infinite; }
  /* Vlen is answering */
  #screenWidget.sw-live .sw-mic-orb.speaking { background: rgba(16,185,129,0.30); border-color: rgba(52,211,153,0.7); }
  #screenWidget.sw-live .sw-mic-orb.speaking .sw-mic-ring { animation: swLivePulse 1s ease-out infinite; border-color: rgba(52,211,153,0.7); }
  /* Muted / unavailable */
  #screenWidget.sw-live .sw-mic-orb.muted { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }

  @keyframes swLivePulse {
    0%   { transform: scale(1);    opacity: 0.85; }
    70%  { transform: scale(1.55); opacity: 0; }
    100% { transform: scale(1.55); opacity: 0; }
  }
}

/* =========================================================
   WhatsApp Voice Messaging Custom Styles
   ========================================================= */
#whatsappModal, #vlenContactsModal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  overscroll-behavior: contain;
}

/* Only show the modals when they are not hidden */
#whatsappModal:not(.hidden), #vlenContactsModal:not(.hidden) {
  display: flex;
}

#whatsappModal.hidden, #vlenContactsModal.hidden {
  display: none !important;
}

#whatsappModalContent, #vlenContactsModalContent {
  display: flex;
  flex-direction: column;
  max-height: min(88dvh, 640px);
  width: 100%;
  max-width: 480px;
  background-color: #181818;
  color: #ececec;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

html.light #whatsappModalContent, html.light #vlenContactsModalContent {
  background-color: #ffffff;
  color: #171717;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.wa-modal-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.wa-modal-header {
  flex: 0 0 auto;
}

.wa-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.wa-modal-footer {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  #whatsappModal, #vlenContactsModal {
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  #whatsappModalContent, #vlenContactsModalContent {
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    border-radius: 20px;
  }
}




/* ── In-chat generated images (ChatGPT-style) ───────────────────── */
.vlen-img-card { margin: 4px 0 6px; max-width: 420px; }
.vlen-img-frame {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 18px; background: #1c1c1c; border: 1px solid rgba(255,255,255,.07);
}
.vlen-img-frame img {
  width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in;
  animation: vlenImgIn .45s ease both;
}
@keyframes vlenImgIn { from { opacity: 0; transform: scale(.985); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

.vlen-img-skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, #1e1e1e 20%, #2c2c2c 40%, #1e1e1e 60%);
  background-size: 220% 100%;
  animation: vlenImgShimmer 1.5s linear infinite;
}
@keyframes vlenImgShimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }

.vlen-img-loading-label {
  position: absolute; inset: auto 0 14px 0; display: flex; align-items: center; justify-content: center;
  gap: 8px; font-size: 12.5px; color: #b4b4b4; letter-spacing: -.01em;
}
.vlen-img-spinner {
  width: 13px; height: 13px; border-radius: 99px;
  border: 1.6px solid rgba(255,255,255,.18); border-top-color: #ececec;
  animation: vlenImgSpin .7s linear infinite; display: inline-block;
}
@keyframes vlenImgSpin { to { transform: rotate(360deg); } }

.vlen-img-tools {
  position: absolute; top: 10px; right: 10px; display: flex; gap: 6px;
  opacity: 0; transform: translateY(-4px); transition: .18s ease;
}
.vlen-img-frame:hover .vlen-img-tools { opacity: 1; transform: none; }
.vlen-img-tool {
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; border-radius: 10px; color: #ececec;
  background: rgba(20,20,20,.62); backdrop-filter: blur(10px); transition: .15s;
}
.vlen-img-tool:hover { background: rgba(20,20,20,.85); }
.vlen-img-tool svg { width: 16px; height: 16px; }

.vlen-img-caption {
  margin-top: 8px; font-size: 12px; line-height: 1.55; color: #8e8e8e;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.vlen-img-error {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 20px; text-align: center;
  font-size: 12.5px; color: #b4b4b4; background: #1c1c1c;
}
.vlen-img-error svg { width: 22px; height: 22px; color: #8e8e8e; }
.vlen-img-retry {
  border: 1px solid rgba(255,255,255,.12); background: #2a2a2a; color: #ececec;
  font-size: 12px; padding: 6px 12px; border-radius: 99px; cursor: pointer; transition: .15s;
}
.vlen-img-retry:hover { background: #333; }

.vlen-img-viewer {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.86); padding: 24px; opacity: 0; transition: opacity .18s ease; cursor: zoom-out;
}
.vlen-img-viewer.visible { opacity: 1; }
.vlen-img-viewer img { max-width: 100%; max-height: 100%; border-radius: 14px; }

@media (max-width: 640px) {
  .vlen-img-card { max-width: 100%; }
  .vlen-img-tools { opacity: 1; transform: none; }
}

/* ===== vlen-code.css ===== */
/* ── Vlen Code — sleek grayscale workspace ───────────────────────── */
#vcRoot {
  position: fixed; inset: 0; z-index: 120; display: none;
  background: #212121; color: #ececec;
  font-family: 'Inter', system-ui, sans-serif;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
#vcRoot.vc-open { display: flex; }

.vc-head { height: 48px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; border-bottom: 1px solid rgba(255,255,255,.06); }
.vc-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.vc-dot { width: 8px; height: 8px; border-radius: 99px; background: #ececec; }
.vc-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 8px; color: #b4b4b4; background: transparent; border: 0; cursor: pointer; transition: .15s; }
.vc-icon-btn:hover { background: rgba(255,255,255,.08); color: #ececec; }

.vc-body { flex: 1; min-height: 0; display: flex; }
.vc-left { width: 40%; max-width: 520px; min-width: 300px; display: flex; flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.06); background: #1c1c1c; min-height: 0; }
.vc-right { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #212121; }

.vc-thread { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.vc-empty { margin: auto; text-align: center; color: #8e8e8e; font-size: 13px; line-height: 1.7; padding: 24px; }
.vc-empty h3 { color: #ececec; font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.vc-chip { display: block; width: 100%; text-align: left; margin-top: 8px; padding: 10px 12px; font-size: 12.5px;
  color: #b4b4b4; background: #2a2a2a; border: 1px solid rgba(255,255,255,.06); border-radius: 12px; cursor: pointer; transition: .15s; }
.vc-chip:hover { background: #333; color: #ececec; }

.vc-msg-user { align-self: flex-end; max-width: 85%; background: #303030; padding: 10px 14px;
  border-radius: 18px 18px 4px 18px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.vc-msg-ai { align-self: flex-start; max-width: 95%; font-size: 13.5px; color: #b4b4b4; line-height: 1.7; }

.vc-log { border: 1px solid rgba(255,255,255,.07); background: #262626; border-radius: 12px; padding: 10px 12px;
  font-size: 12.5px; color: #b4b4b4; display: flex; flex-direction: column; gap: 6px; }
.vc-log-row { display: flex; align-items: center; gap: 8px; }
.vc-log-row.done { color: #ececec; }
.vc-spin { width: 12px; height: 12px; border-radius: 99px; border: 1.5px solid rgba(255,255,255,.25);
  border-top-color: #ececec; animation: vc-spin .7s linear infinite; flex: 0 0 auto; }
@keyframes vc-spin { to { transform: rotate(360deg); } }
.vc-tick { width: 12px; height: 12px; flex: 0 0 auto; }

.vc-composer { flex: 0 0 auto; padding: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.vc-input-wrap { background: #2f2f2f; border: 1px solid transparent; border-radius: 18px; padding: 10px 12px; transition: .15s; }
.vc-input-wrap:focus-within { border-color: rgba(255,255,255,.14); }
#vcInput { width: 100%; background: transparent; border: 0; outline: none; color: #ececec; font-size: 14px;
  line-height: 1.5; resize: none; max-height: 160px; }
.vc-composer-row { display: flex; justify-content: flex-end; margin-top: 8px; }
.vc-send { width: 32px; height: 32px; border-radius: 99px; border: 0; cursor: pointer; background: #ececec; color: #212121;
  display: inline-flex; align-items: center; justify-content: center; transition: .15s; }
.vc-send:disabled { opacity: .3; cursor: default; }

.vc-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.06); background: #1c1c1c; }
.vc-tabs { display: flex; gap: 4px; background: #2a2a2a; padding: 3px; border-radius: 10px; }
.vc-tab { padding: 5px 12px; font-size: 12.5px; border-radius: 8px; border: 0; background: transparent;
  color: #8e8e8e; cursor: pointer; transition: .15s; }
.vc-tab:hover { color: #ececec; }
.vc-tab.active { background: #3a3a3a; color: #fff; }
.vc-spacer { flex: 1; }
.vc-dl { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.1); background: transparent; color: #b4b4b4; cursor: pointer; transition: .15s; }
.vc-dl:hover { background: rgba(255,255,255,.08); color: #ececec; }
.vc-dl.primary { background: #ececec; color: #1a1a1a; border-color: #ececec; font-weight: 600; }
.vc-dl.primary:hover { background: #fff; color: #1a1a1a; }
.vc-dl:disabled { opacity: .35; cursor: default; }

.vc-pane { flex: 1; min-height: 0; position: relative; }
#vcPreview { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.vc-code { position: absolute; inset: 0; display: none; flex-direction: column; }
.vc-code.active { display: flex; }
.vc-subtabs { display: flex; gap: 2px; padding: 8px 10px 0; }
.vc-subtab { padding: 6px 12px; font-size: 12px; border: 0; background: transparent; color: #8e8e8e;
  border-bottom: 2px solid transparent; cursor: pointer; font-family: ui-monospace, 'SF Mono', monospace; }
.vc-subtab.active { color: #ececec; border-bottom-color: #ececec; }
#vcCodeView { flex: 1; overflow: auto; margin: 0; padding: 14px 16px; font-size: 12.5px; line-height: 1.65;
  font-family: ui-monospace, 'SF Mono', monospace; color: #d4d4d4; background: #171717; white-space: pre; }
.vc-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #6b6b6b; font-size: 13px; background: #212121; }

#vcToast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 24px); z-index: 200;
  background: #ececec; color: #1a1a1a; font-size: 13px; font-weight: 600; padding: 10px 18px; border-radius: 99px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: .25s ease; }
#vcToast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  .vc-body { flex-direction: column; }
  .vc-left { width: 100%; max-width: none; min-width: 0; height: 45%; border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.06); }
}

/* ── Attachment bar ─────────────────────────────────────── */
.vc-attachments {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 12px 4px;
}
.vc-attachments.hidden { display: none; }

.vc-att-chip {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; padding: 5px 8px;
  max-width: 200px; position: relative;
}

.vc-att-remove {
  background: none; border: 0; cursor: pointer;
  color: #6b6b6b; font-size: 15px; line-height: 1;
  padding: 0 2px; flex-shrink: 0; transition: color .15s;
}
.vc-att-remove:hover { color: #ececec; }

/* ── Attach button ──────────────────────────────────────── */
.vc-attach-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: transparent; border: 0; cursor: pointer;
  color: #6b6b6b; transition: .15s; flex-shrink: 0;
}
.vc-attach-btn:hover { background: rgba(255,255,255,.08); color: #ececec; }

/* ── Drop overlay ───────────────────────────────────────── */
.vc-drop-overlay {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(33,33,33,.88);
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed rgba(255,255,255,.22); border-radius: 4px;
  pointer-events: none;
}
.vc-drop-overlay.hidden { display: none; }
.vc-drop-inner {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: #b4b4b4; font-size: 14px; font-weight: 500;
}

/* keep composer-row gap consistent with the attach btn */
.vc-composer-row { gap: 6px; }

/* ===== reference-ui.css ===== */
/* Screenshot-matched light chat surface. Original app styles and behavior remain intact. */
:root { --ref-paper:#fff; --ref-side:#fafafa; --ref-ink:#1d1d1f; --ref-muted:#777b81; --ref-line:#e8e8ea; --ref-hover:#f2f3f5; --ref-soft:#f7f7f8; --ref-bubble:#f3f3f4; --ref-blue:#3272ce; }
html.light,html.light body { background:var(--ref-paper);color:var(--ref-ink); }
#app { background:var(--ref-paper); }
#sidebar.bg-bg-side,html.light #sidebar.bg-bg-side { background:var(--ref-side)!important; border-right:1px solid var(--ref-line)!important; }
#sidebar { color:var(--ref-ink); }
@media(min-width:768px) {
  #sidebar,html.light #sidebar { width:220px!important; }
  #app.desktop-sidebar-collapsed #sidebar { margin-left:-220px; }
}
.vlen-sidebar-brand { display:flex;justify-content:space-between;align-items:center;padding:12px 15px 8px;min-height:46px;font-size:16px;line-height:20px; }
.vlen-sidebar-brand strong {font-weight:650;}
#sidebar > .p-3.flex {padding:3px 6px 8px;}
#newChatBtn { border:0!important;background:var(--ref-hover);border-radius:9px;min-height:31px;padding:5px 10px;font-size:13px;font-weight:500;gap:8px; }
#newChatBtn svg {height:16px;width:16px;}
#sidebar .px-2.pb-2 {padding:0 6px 10px;}
#sidebar .px-2.pb-2 > button { color:var(--ref-ink)!important;padding:7px 10px!important;font-size:13px!important;line-height:17px;border-radius:8px;min-height:31px; }
#sidebar .px-2.pb-2 > button:hover, #chatList .group:hover {background:var(--ref-hover)!important;}
#sidebar .px-2.pb-2 svg {color:var(--ref-ink)!important;width:17px;height:17px;}
#chatList {padding:0 6px;}
#chatList > div > div:first-child {padding-left:8px;margin-top:11px;margin-bottom:6px;font-size:12px;font-weight:400;color:var(--ref-muted)!important;}
#chatList .group {min-height:30px;padding:6px 8px;border-radius:8px;font-size:13px;}
#sidebar > .p-3.border-t {padding:8px 7px 12px;border-top:0!important;}
#sidebar > .p-3.border-t > .px-3.py-2 {padding:7px 9px;margin-bottom:1px;}
#usageButton:hover {background:var(--ref-hover)!important;}
#usageProgress {background:var(--ref-blue)!important;}
#sidebar > .p-3.border-t > .flex.items-center {padding:6px 8px;border-radius:8px;}
#sidebar > .p-3.border-t > .flex.items-center > div:first-child {border-radius:50%;background:#e59886;font-size:0;color:#fff;width:22px;height:22px;}
#sidebar > .p-3.border-t > .flex.items-center > div:first-child::after {content:'V';font-size:10px;}
#profileNameInput {font-size:12px;}
#themeBtn {color:var(--ref-muted);}
main {background:var(--ref-paper);color:var(--ref-ink);}
main > header {height:44px;min-height:44px;border:0!important;padding:0 19px;}
main > header > .flex:first-child > .flex.items-center.gap-1\.5 {display:none;}
#desktopToggleBtn {color:var(--ref-muted);}
#modelTriggerBtn,html.light #modelTriggerBtn {background:var(--ref-soft)!important;color:var(--ref-ink)!important;border:1px solid var(--ref-line)!important;border-radius:20px;padding:7px 13px;font-size:12px;min-width:90px;justify-content:center;}
main > header > .flex:last-child { gap:2px; }
main > header > .flex:last-child button {color:var(--ref-muted)!important;}
#messages {overflow-x:hidden;}
#messages:has(#suggestions) {position:static;flex:1;}
#messages .greeting-wrap {position:absolute;left:0;right:0;top:calc(50% - 109px);height:auto!important;justify-content:flex-start;align-items:center;padding:0 20px;animation:none;pointer-events:none;}
#messages .greeting-title,html.light #messages .greeting-title {font-size:22px!important;margin:0!important;line-height:30px;letter-spacing:0;background:none!important;-webkit-text-fill-color:initial!important;color:var(--ref-ink)!important;font-weight:500;white-space:normal;overflow-wrap:anywhere;}
#messages .greeting-title::after {content:none;}
#messages .greeting-sub {display:none;}
#suggestions {position:absolute;top:122px;left:50%;transform:translateX(-50%);width:min(100% - 40px,816px);max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 12px;animation:none;pointer-events:auto;}
#suggestions > button,html.light #suggestions > button {text-align:left;padding:10px 12px!important;border:0!important;border-radius:8px!important;color:var(--ref-muted);background:transparent!important;min-height:38px;transform:none!important;}
#suggestions > button:hover {background:var(--ref-soft)!important;color:var(--ref-ink);}
#suggestions > button > div:first-child {font-size:13px;font-weight:400;}
#suggestions > button > div:first-child::before {content:'✎';display:inline-block;width:28px;color:#8f9497;font-size:17px;vertical-align:-1px;}
#suggestions > button:nth-child(1) > div:first-child::before {content:'▧';}
#suggestions > button:nth-child(2) > div:first-child::before {content:'◎';}
#suggestions > button:nth-child(4) > div:first-child::before {content:'⌘';}
#suggestions > button > div:last-child {display:none;}
#messages:has(#suggestions) + div {position:absolute;left:50%;top:calc(50% - 59px);transform:translateX(-50%);width:min(100% - 40px,816px);padding:0;z-index:2;}
#inputContainer,html.light #inputContainer {background:var(--ref-paper)!important;border:1px solid var(--ref-line)!important;border-radius:24px!important;box-shadow:0 3px 13px #0000000a!important;padding:5px 7px 5px 11px!important;max-width:816px;min-height:48px;display:flex;align-items:center;gap:8px;}
#inputContainer:focus-within {border-color:#c4c8ce!important;box-shadow:0 3px 16px #00000012!important;}
/* Uploads occupy their own row inside the composer, never over the greeting. */
#inputContainer {flex-wrap:wrap;}
#inputContainer #attachments:not(.hidden) {
  position:static;order:-2;flex:0 0 100%;width:100%;min-width:0;
  display:flex;flex-wrap:nowrap;gap:8px;margin:0;padding:6px 0 10px;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--chatgpt-border) transparent;
}
#inputContainer #input {width:auto;flex:1;}
.vlen-attachment {
  position:relative;display:flex;align-items:center;gap:10px;
  flex:0 0 200px;max-width:100%;min-width:0;height:64px;
  padding:8px 34px 8px 8px;border:1px solid var(--chatgpt-border);
  border-radius:8px;background:var(--chatgpt-canvas);color:var(--chatgpt-text);
}
.vlen-attachment-preview {
  width:40px;height:40px;flex:none;border-radius:6px;object-fit:cover;
  display:flex;align-items:center;justify-content:center;
  background:var(--chatgpt-user);color:var(--chatgpt-secondary);font-size:10px;font-weight:600;
}
.vlen-attachment-info {flex:1;min-width:0;font-size:12px;line-height:18px;}
.vlen-attachment-name {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
.vlen-attachment-size {font-size:10px;color:var(--chatgpt-tertiary);}
.vlen-attachment .att-remove {
  position:absolute;top:4px;right:4px;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:0;border-radius:50%;background:transparent;
  color:var(--chatgpt-secondary);font-size:18px;line-height:1;cursor:pointer;
}
.vlen-attachment .att-remove:hover {background:var(--chatgpt-hover);}
.vlen-attachment .att-remove:focus-visible {outline:2px solid var(--ref-blue);outline-offset:1px;}
main:has(#attachments:not(.hidden)) #suggestions {top:202px;}
@media(max-width:767px) {
  main:has(#attachments:not(.hidden)) #suggestions {top:212px;}
}
#input {flex:1;min-width:0;line-height:24px;height:26px;min-height:26px;padding:0;background:transparent;color:var(--ref-ink);font-size:13px;overflow-y:auto;}
#input::placeholder {color:#85888c;}
#inputContainer > .flex.items-center.justify-between {margin:0;display:contents;}
#inputContainer > .flex.items-center.justify-between > .flex:first-child {order:-1;}
#attachBtn {padding:6px;color:var(--ref-ink);}
#attachBtn svg {width:18px;height:18px;}
#sendBtn {background:var(--ref-ink);color:var(--ref-paper);width:32px;height:32px;flex:none;}
#sendBtn:disabled {opacity:.5;}
#sendBtn svg {width:18px;height:18px;}
.vlen-disclaimer {color:var(--ref-muted);margin-top:8px;}
#messages:has(#suggestions) + div .vlen-disclaimer {display:none;}
#messages:not(:has(#suggestions)) + div {padding-bottom:16px;}
#messages:not(:has(#suggestions)) + div #inputContainer {max-width:816px;}
html.light #modelMenu {color:var(--ref-ink);}
@media(max-width:767px) {
  #sidebar {width:min(82vw,300px);}
  main > header {height:50px;min-height:50px;padding:0 8px;}
  main > header button {min-width:36px;min-height:36px;padding:7px;}
  #messages .greeting-wrap {top:calc(44% - 100px);}
  #messages .greeting-title {font-size:20px!important;}
  #messages:has(#suggestions) + div {top:calc(44% - 50px);width:calc(100% - 26px);}
  #inputContainer {border-radius:24px!important;padding:5px 7px!important;}
  #input {font-size:16px!important;}
  #attachBtn {padding:6px;}
  #sendBtn {width:32px;height:32px;}
  #suggestions {top:116px;width:calc(100% - 32px);grid-template-columns:1fr;gap:1px;}
  #suggestions > button {padding:8px 10px!important;min-height:34px;}
}
@media(prefers-reduced-motion:reduce) { #suggestions,#messages .greeting-wrap {animation:none!important;} }
/* Reference suggestion list is a compact vertical menu below the composer. */
#suggestions {grid-template-columns:1fr;gap:0;width:min(100% - 40px,816px);}
#suggestions > button {max-width:100%;}
@media(max-width:767px) { #suggestions {width:calc(100% - 32px);} }

/* ===== dark-theme.css ===== */
/* Dark-only counterpart to the reference UI. Light styles remain unchanged. */
html.dark {
  color-scheme: dark;
  --ref-paper: #212121;
  --ref-side: #171717;
  --ref-ink: #ececec;
  --ref-muted: #a2a2a2;
  --ref-line: #3a3a3a;
  --ref-hover: #292929;
  --ref-soft: #303030;
  --ref-bubble: #303030;
  --ref-blue: #4285db;
}
html.dark, html.dark body { background: var(--ref-paper); color: var(--ref-ink); }
html.dark #sidebar.bg-bg-side { background: var(--ref-side) !important; border-color: var(--ref-line) !important; }
html.dark #sidebar .px-2.pb-2 > button { color: var(--ref-ink) !important; }
html.dark #sidebar .px-2.pb-2 svg { color: var(--ref-ink) !important; }
html.dark #sidebar > .p-3.border-t > .flex.items-center > div:first-child { background: #925b50; }
html.dark #newChatBtn { color: var(--ref-ink); }
html.dark #modelTriggerBtn { background: var(--ref-soft) !important; color: var(--ref-ink) !important; border-color: var(--ref-line) !important; }
html.dark #messages .greeting-title { color: var(--ref-ink) !important; }
html.dark #suggestions > button { color: var(--ref-muted); background: transparent !important; }
html.dark #suggestions > button:hover { background: var(--ref-soft) !important; color: var(--ref-ink); }
html.dark #suggestions > button > div:first-child::before { color: var(--ref-muted); }
html.dark #inputContainer { background: var(--ref-soft) !important; border-color: var(--ref-line) !important; box-shadow: 0 3px 13px #00000030 !important; }
html.dark #inputContainer:focus-within { border-color: #777 !important; box-shadow: 0 3px 16px #00000040 !important; }
html.dark #input::placeholder { color: var(--ref-muted); }
html.dark #sendBtn { background: var(--ref-ink); color: var(--ref-paper); }
html.dark #themeBtn svg { display: none; }
html.dark #themeBtn::after { content: '☀'; display: block; font-size: 19px; line-height: 16px; width: 16px; height: 16px; text-align: center; }
/* ===== ChatGPT screenshot match v2 =====
   Visual-only overrides. Existing Vlen IDs, controls, and behavior are untouched. */
:root {
  --chatgpt-canvas: #ffffff;
  --chatgpt-sidebar: #f9f9f9;
  --chatgpt-text: #171717;
  --chatgpt-secondary: #5d5d5d;
  --chatgpt-tertiary: #8f8f8f;
  --chatgpt-hover: #ececec;
  --chatgpt-border: #e5e5e5;
  --chatgpt-user: #f4f4f4;
  --chatgpt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html, body, button, input, textarea, select,
.prose-chat, #vcRoot, #pipContainer {
  font-family: var(--chatgpt-font) !important;
  letter-spacing: 0 !important;
}

html.light, html.light body, html.light #app,
html.light main {
  background: var(--chatgpt-canvas) !important;
  color: var(--chatgpt-text) !important;
}

html.light #sidebar,
html.light #sidebar.bg-bg-side {
  width: 220px !important;
  background: var(--chatgpt-sidebar) !important;
  border-right: 1px solid var(--chatgpt-border) !important;
  color: var(--chatgpt-text) !important;
}

.vlen-sidebar-brand {
  min-height: 52px;
  padding: 14px 15px 8px;
  font-size: 16px;
  line-height: 22px;
}
.vlen-sidebar-brand strong { font-weight: 600; }

#sidebar > .p-3.flex { padding: 5px 7px 7px; }
#newChatBtn {
  min-height: 34px;
  padding: 7px 9px;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  color: var(--chatgpt-text) !important;
  font-size: 13px;
  font-weight: 400;
}
#newChatBtn:hover { background: var(--chatgpt-hover) !important; }
#sidebar .px-2.pb-2 { padding: 0 7px 8px; }
#sidebar .px-2.pb-2 > button {
  min-height: 34px;
  padding: 7px 9px !important;
  border-radius: 8px;
  color: var(--chatgpt-text) !important;
  font-size: 13px !important;
  font-weight: 400;
}
#sidebar .px-2.pb-2 > button:hover,
#chatList .group:hover,
#chatList .group.bg-white\/10 { background: var(--chatgpt-hover) !important; }
#sidebar .px-2.pb-2 svg { width: 17px; height: 17px; color: var(--chatgpt-text) !important; }
#chatList { padding: 0 7px; }
#chatList > div > div:first-child {
  margin: 13px 0 5px;
  padding-left: 6px;
  color: #777 !important;
  font-size: 12px;
  font-weight: 400;
}
#chatList .group {
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 20px;
}
#sidebar > .p-3.border-t { padding: 8px 7px 12px; }
#sidebar > .p-3.border-t > .flex.items-center { padding: 7px 8px; border-radius: 8px; }
#profileNameInput { color: var(--chatgpt-text); font-size: 12px; font-weight: 400; }

main > header {
  height: 48px;
  min-height: 48px;
  padding: 0 17px;
  border: 0 !important;
  background: var(--chatgpt-canvas);
}
#desktopToggleBtn, main > header > .flex:last-child button { color: #595959 !important; }
#desktopToggleBtn:hover, main > header > .flex:last-child button:hover { background: var(--chatgpt-user) !important; }
#modelTriggerBtn, html.light #modelTriggerBtn {
  min-width: 0;
  padding: 6px 10px;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  color: var(--chatgpt-text) !important;
  font-size: 14px;
  font-weight: 600;
}
#modelTriggerBtn:hover { background: var(--chatgpt-user) !important; }

#messages { background: var(--chatgpt-canvas); }
#msgList {
  width: 100%;
  max-width: 816px !important;
  padding: 42px 16px 28px !important;
  row-gap: 26px;
}
#msgList > .items-start { display: block; }
#msgList > .items-start > div:first-child { display: none; }
#msgList .user-bubble {
  border-radius: 18px !important;
  background: var(--chatgpt-user) !important;
  color: var(--chatgpt-text) !important;
  padding: 9px 16px !important;
  font-size: 14px !important;
  line-height: 21px;
}
.prose-chat {
  color: var(--chatgpt-text) !important;
  font-size: 14px;
  line-height: 1.66;
  font-weight: 400;
}
.prose-chat p { margin: 0 0 1em; }
.prose-chat h1, .prose-chat h2, .prose-chat h3 {
  color: var(--chatgpt-text) !important;
  font-weight: 600;
  line-height: 1.42;
}
.prose-chat strong { color: var(--chatgpt-text) !important; font-weight: 600; }
.prose-chat ul, .prose-chat ol { padding-left: 1.65em; }
.prose-chat li { margin: .18em 0; }

#messages .greeting-wrap { top: calc(50% - 112px); }
#messages .greeting-title, html.light #messages .greeting-title {
  font-size:22px!important;
  color: var(--chatgpt-text);
  font-size: 22px;
  font-weight: 500;
  line-height: 30px;
}

#inputContainer, html.light #inputContainer {
  width: 100%;
  max-width: 816px;
  min-height: 52px;
  padding: 6px 8px 6px 12px !important;
  border: 1px solid var(--chatgpt-border) !important;
  border-radius: 26px !important;
  background: var(--chatgpt-canvas) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .08) !important;
}
#inputContainer:focus-within {
  border-color: #d3d3d3 !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .1) !important;
}
#input {
  height: 28px;
  min-height: 28px;
  padding: 2px 0 0;
  color: var(--chatgpt-text);
  font-size: 14px;
  line-height: 24px;
}
#input::placeholder { color: #8b8b8b; }
#attachBtn { width: 34px; height: 34px; padding: 7px; color: var(--chatgpt-text); }
#attachBtn:hover { background: var(--chatgpt-user) !important; }
#sendBtn {
  width: 34px;
  height: 34px;
  background: #0d0d0d;
  color: #fff;
}
#sendBtn svg { width: 18px; height: 18px; }
.vlen-disclaimer { margin-top: 8px; color: #858585; font-size: 11px; }

#suggestions { width: min(100% - 40px, 816px); }
#suggestions > button, html.light #suggestions > button {
  min-height: 36px;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: #626262;
  font-size: 13px;
}
#suggestions > button:hover { background: var(--chatgpt-user) !important; color: var(--chatgpt-text); }

@media (max-width: 767px) {
  html.light #sidebar, html.light #sidebar.bg-bg-side { width: min(82vw, 300px) !important; }
  main > header { height: 50px; min-height: 50px; padding: 0 8px; }
  #msgList { padding: 26px 14px 20px !important; }
  .prose-chat { font-size: 15px; line-height: 1.62; }
  #messages .greeting-title, html.light #messages .greeting-title { font-size: 20px!important; }
  #inputContainer { min-height: 50px; }
  #input { font-size: 16px !important; }
}

html.dark {
  --chatgpt-canvas: #212121;
  --chatgpt-sidebar: #171717;
  --chatgpt-text: #ececec;
  --chatgpt-secondary: #b4b4b4;
  --chatgpt-tertiary: #8e8e8e;
  --chatgpt-hover: #2f2f2f;
  --chatgpt-border: #3a3a3a;
  --chatgpt-user: #303030;
}
html.dark body, html.dark #app, html.dark main,
html.dark #messages, html.dark main > header { background: var(--chatgpt-canvas) !important; color: var(--chatgpt-text) !important; }
html.dark #sidebar, html.dark #sidebar.bg-bg-side { background: var(--chatgpt-sidebar) !important; }
html.dark #inputContainer { background: var(--chatgpt-user) !important; }
html.dark #sendBtn { background: #fff; color: #171717; }

/* ===== Mobile UX polish ===== */
@media (max-width: 767px) {
  /* No accidental horizontal scroll or double-tap zoom jank */
  html, body { overflow-x: hidden; overscroll-behavior-y: none; }
  body { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

  /* Buttery message scrolling with momentum, contained overscroll */
  #messages, #msgList {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
  }

  /* Composer respects the home-indicator safe area and sits tighter */
  #messages + div, main > div:last-child {
    padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important;
  }
  #inputContainer {
    box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  }

  /* Sidebar: full-height sheet feel, easier to read and tap */
  #sidebar {
    width: min(84vw, 320px) !important;
    border-right: none;
    border-radius: 0 20px 20px 0;
  }
  #sidebar button, #sidebar a {
    min-height: 44px;
  }
  .vlen-sidebar-brand { padding-top: calc(12px + env(safe-area-inset-top)); }

  /* Header safe area + slightly roomier title */
  main > header {
    padding-top: env(safe-area-inset-top);
    height: calc(50px + env(safe-area-inset-top)) !important;
    min-height: calc(50px + env(safe-area-inset-top)) !important;
  }

  /* Greeting centered better on small screens */
  #messages .greeting-wrap { top: calc(44% - 112px); width: 100%; text-align: center; }

  /* User bubbles breathe more on narrow screens */
  .user-bubble { max-width: 92%; }

  /* Toast sits above the composer */
  #vlenToast { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* Touch devices: larger, friendlier press feedback */
@media (hover: none) {
  button:active { opacity: 0.75; }
  #sidebar button:active, #suggestions > button:active { transform: scale(0.98); }
  #sidebar button, #suggestions > button { transition: transform 0.12s ease, background 0.15s ease; }
}

/* Brighter top-bar controls */
#desktopToggleBtn,
#showSidebarBtn,
main > header > .flex:last-child button {
  color: var(--chatgpt-secondary) !important;
  opacity: 1;
}
html.dark #desktopToggleBtn,
html.dark #showSidebarBtn,
html.dark main > header > .flex:last-child button {
  color: var(--chatgpt-secondary) !important;
}