/* Vibe Studio, plain theme. Loaded last: remaps the colour tokens to a quiet paper-and-ink palette
   (follows the device's light/dark setting) and removes the glow, gradients, blur and pulsing. */

:root {
  --bg-primary: #fafaf9;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --border: #e7e5e4;
  --border-hover: #d6d3d1;
  --text-primary: #1c1917;
  --text-secondary: #57534e;
  --text-muted: #78716c;
  --accent: #2f6e78;
  --accent-hover: #255861;
  --accent-glow: rgba(47, 110, 120, 0.18);
  --sunk: #f5f5f4;
  --on-accent: #ffffff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #161514;
    --bg-secondary: #1c1b19;
    --bg-card: #1f1e1c;
    --border: #2e2c29;
    --border-hover: #44403c;
    --text-primary: #f5f5f4;
    --text-secondary: #a8a29e;
    --text-muted: #8a847e;
    --accent: #6aa9b3;
    --accent-hover: #86bcc4;
    --accent-glow: rgba(106, 169, 179, 0.22);
    --sunk: #252321;
    --on-accent: #10201f;
    color-scheme: dark;
  }
}

/* No glow, gradients, glass or pulsing anywhere in the builder chrome. */
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body *:not(i):not(svg):not(img):not(iframe) { background-image: none !important; }
html, body { background: var(--bg-primary) !important; color: var(--text-primary); }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Surfaces */
.navbar, .chat-panel, .editor-panel, .chat-input-area, .modal, .modal-content, .modal-body,
.draft-recovery-card, #chat-generating, .preview-toolbar, .tabs, .editor-tabs { background-color: var(--bg-secondary) !important; color: var(--text-primary); }
.navbar { border-bottom: 1px solid var(--border); }
.navbar-logo, .navbar-logo:visited { color: var(--text-primary) !important; }
.chat-input-row { background: var(--bg-card) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; }
.chat-input-row:focus-within { border-color: var(--accent) !important; }
textarea, input, select { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
textarea::placeholder, input::placeholder { color: var(--text-muted) !important; }

/* Buttons: one solid accent for the main action, quiet outlines for the rest */
.btn { border-radius: 8px !important; transform: none !important; font-weight: 500; }
.btn-primary, .btn-send:not(.btn-mic), #empty-preview .empty-actions .btn, .draft-recovery-actions .btn-primary {
  background: var(--accent) !important; color: var(--on-accent) !important; border: 1px solid var(--accent) !important;
}
.btn-primary:hover, .btn-send:not(.btn-mic):hover, #empty-preview .empty-actions .btn:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.btn:not(.btn-primary):not(.btn-send), .btn-secondary, .btn-icon, .btn-mic, .draft-recovery-actions .btn-secondary {
  background: transparent !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important;
}
.btn:not(.btn-primary):not(.btn-send):hover, .btn-mic:hover { background: var(--sunk) !important; border-color: var(--border-hover) !important; }
.btn-mic.listening { background: #b91c1c !important; border-color: #b91c1c !important; color: #fff !important; }
.chip { background: transparent !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; border-radius: 999px !important; }
.chip:hover { color: var(--text-primary) !important; background: var(--sunk) !important; }

/* Chat */
.message, .chat-message, .msg { box-shadow: none !important; }
.message.user, .chat-message.user, .msg-user, .message-user { background: var(--sunk) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; }
.message.ai, .chat-message.ai, .msg-ai, .message-ai { background: transparent !important; color: var(--text-primary) !important; }
.chat-welcome h2, #empty-preview h2, #empty-preview h3, #preview-skeleton h3, .draft-recovery-card, .docs-empty h3 { color: var(--text-primary) !important; }
.chat-welcome p, #empty-preview p, #preview-skeleton p, .draft-recovery-card p, .draft-recovery-age,
#chat-generating .generation-help, #chat-generating small { color: var(--text-secondary) !important; }
#generation-metrics, .generation-next summary { color: var(--accent) !important; }
#chat-generating { border: 1px solid var(--border) !important; border-radius: 10px !important; }
#generation-note { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
.welcome-symbol, #empty-preview .empty-icon, .empty-icon { display: none !important; }

/* Preview area and empty state */
#empty-preview, .preview-container, .preview-wrap, .preview-frame-wrap { background: var(--bg-primary) !important; }
#empty-preview .empty-badge, #empty-preview .badge { color: var(--accent) !important; background: transparent !important; border: 1px solid var(--border) !important; }

/* Status pills and tabs */
.tab.active, .editor-tab.active, .preview-size-btn.active, .device-btn.active, [aria-selected="true"].tab {
  background: var(--text-primary) !important; color: var(--bg-primary) !important; border-color: var(--text-primary) !important;
}
.badge, .pill, .mobile-audit-badge, #mobile-audit-badge { background: transparent !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; }

/* Overlays */
.modal-overlay, .modal-backdrop, .chat-overlay { background: rgba(28, 25, 23, 0.35) !important; }
#auth-overlay { background: rgba(250, 250, 249, 0.85) !important; }
@media (prefers-color-scheme: dark) { #auth-overlay { background: rgba(22, 21, 20, 0.85) !important; } }

/* Calm motion: keep the loading spinner, drop the pulsing and shimmer */
.btn-send, .pulse, .pulsing, .skel-header, .skel-block, .skel-box, .generation-progress, #chat-generating::before, .thinking-overlay * { animation: none !important; }
.skel-header, .skel-block, .skel-box { background: var(--sunk) !important; }
.progress-bar, .progress-fill, .generation-bar { background: var(--accent) !important; }

/* Scrollbars */
::-webkit-scrollbar-thumb { background: var(--border-hover) !important; }
::-webkit-scrollbar-track { background: transparent !important; }

/* Footer under the studio */
.studio-footer { border-top-color: var(--border) !important; color: var(--text-muted) !important; }

/* Preview size switch */
.preview-size { background: transparent !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; }
.preview-size.active { background: var(--text-primary) !important; color: var(--bg-primary) !important; border-color: var(--text-primary) !important; }
#empty-preview .preview-placeholder-icon { color: var(--text-muted) !important; background: transparent !important; border: 1px solid var(--border) !important; }
#empty-preview .empty-actions .btn:focus-visible { outline-color: var(--accent) !important; }
/* Prompt box: one clean box, buttons sit inside it */
.chat-input-area textarea { border: 0 !important; background: transparent !important; }
.chat-input-row .btn-send { border-radius: 8px !important; }

/* Chat bubbles: yours on a light gray, replies as plain text */
.message.user-message .message-content { background: var(--sunk) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; }
.message.ai-message .message-content { background: transparent !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; }
.message .message-avatar, .message .avatar { background: var(--sunk) !important; color: var(--text-secondary) !important; border: 1px solid var(--border) !important; }

/* Install-app bar: a solid card */
.pwa-install-banner { background: var(--bg-card) !important; color: var(--text-primary) !important; border: 1px solid var(--border) !important; z-index: 2000; }