/* ============================================================
   Sylor — Minimal Theme Override
   Flat, clean UI inspired by Gemini & ChatGPT.
   Loads AFTER styles.css to override legacy decorative effects.
   ============================================================ */

/* ============================================================
   1. Design Tokens — light default + dark mode
   ============================================================ */
:root,
:root[data-theme="light"] {
  /* Brand */
  --sylor-blue: #2563EB;

  /* Backgrounds */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F9FAFB;
  --bg-surface: #FFFFFF;
  --bg-surface-hover: #F3F4F6;
  --bg-surface-active: #E5E7EB;
  --bg-elevated: #FFFFFF;

  /* Text */
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-tertiary: #9CA3AF;
  --text-inverse: #FFFFFF;

  /* Accent */
  --accent-primary: #2563EB;
  --accent-secondary: #1D4ED8;
  --accent-gradient: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
  --sylor-spark-gradient: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%);
  --accent-soft: #3B82F6;
  --accent-dim: rgba(37, 99, 235, 0.08);
  --accent-code: #2563EB;
  --accent-quote: #7C3AED;
  --accent-quote-dim: rgba(124, 58, 237, 0.06);

  /* Borders */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.16);

  /* Inputs */
  --bg-input: #FFFFFF;
  --bg-input-focus: #FFFFFF;
  --border-input: rgba(0, 0, 0, 0.14);
  --border-input-focus: rgba(37, 99, 235, 0.50);

  /* Semantic */
  --accent-primary-rgb: 37, 99, 235;
  --accent-warning-rgb: 245, 158, 11;
  --danger-critical-rgb: 239, 68, 68;
  --success-primary: #10B981;
  --danger-warning: #F59E0B;
  --danger-critical: #EF4444;
  --button-primary-text: #FFFFFF;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-xl2: 22px;
  --radius-full: 9999px;

  /* Minimal, soft shadows only */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.08);
  --shadow-inset: none;
  --shadow-inset-strong: none;

  /* User bubble */
  --user-bubble-bg: #F3F4F6;

  font-family: var(--font-main);
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.6;
}

:root[data-theme="dark"] {
  --sylor-blue: #3B82F6;

  --bg-primary: #202123;
  --bg-secondary: #171717;
  --bg-surface: rgba(255, 255, 255, 0.04);
  --bg-surface-hover: rgba(255, 255, 255, 0.06);
  --bg-surface-active: rgba(255, 255, 255, 0.08);
  --bg-elevated: #2D2D2D;

  --text-primary: #ECECF1;
  --text-secondary: #9CA3AF;
  --text-tertiary: #6B7280;
  --text-inverse: #111827;

  --accent-primary: #3B82F6;
  --accent-secondary: #60A5FA;
  --accent-gradient: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
  --sylor-spark-gradient: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
  --accent-soft: #93C5FD;
  --accent-dim: rgba(59, 130, 246, 0.12);
  --accent-code: #93C5FD;
  --accent-quote: #A78BFA;
  --accent-quote-dim: rgba(167, 139, 250, 0.08);

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);

  --bg-input: rgba(40, 40, 40, 0.80);
  --bg-input-focus: rgba(50, 50, 50, 0.95);
  --border-input: rgba(255, 255, 255, 0.12);
  --border-input-focus: rgba(59, 130, 246, 0.50);

  --accent-primary-rgb: 59, 130, 246;
  --accent-warning-rgb: 245, 158, 11;
  --danger-critical-rgb: 239, 68, 68;
  --success-primary: #10B981;
  --danger-warning: #F59E0B;
  --danger-critical: #EF4444;
  --button-primary-text: #111827;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.14);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.24);
  --shadow-inset: none;
  --shadow-inset-strong: none;

  --user-bubble-bg: #444654;

  color: var(--text-primary);
}

/* ============================================================
   2. Global resets
   ============================================================ */
html, body {
  background: var(--bg-primary);
}

* {
  text-shadow: none !important;
}

a {
  color: var(--accent-soft);
}

a:hover {
  color: var(--accent-primary);
  text-decoration: underline;
}

/* ============================================================
   3. Layout & sidebar
   ============================================================ */
.app {
  background: var(--bg-primary);
}

.sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-subtle);
  border-radius: 0;
  box-shadow: none;
}

.sidebar.expanded {
  box-shadow: none;
}

#btn-sidebar-toggle {
  background: transparent;
  box-shadow: none;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  transition: background-color 0.15s ease, color 0.15s ease;
}

#btn-sidebar-toggle:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}

#btn-sidebar-toggle:active {
  box-shadow: none;
  transform: none;
}

.sidebar-nav {
  padding: 12px 10px;
}

.sidebar-nav-item {
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar-nav-item:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}

.sidebar-nav-item:active {
  box-shadow: none;
  transform: none;
}

.sidebar-nav-item.active-pill {
  background: var(--bg-surface-active);
  color: var(--text-primary);
  box-shadow: none;
  font-weight: 600;
}

.sidebar-nav-item.active-pill:hover,
.sidebar-nav-item.active-pill:active {
  box-shadow: none;
  transform: none;
}

.conv-item {
  border-radius: var(--radius-md);
  margin-bottom: 2px;
}

.conv-item:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}

.conv-item.active {
  background: var(--bg-surface-active);
  color: var(--text-primary);
  box-shadow: none;
  border: none;
}

/* ============================================================
   4. Header & chat area
   ============================================================ */
.chat-main {
  background: var(--bg-primary);
}

.chat-header {
  background: transparent;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.chat-header-title h1 {
  color: var(--text-primary);
}

.coming-soon-badge {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-tertiary);
  box-shadow: none;
}

/* ============================================================
   5. Welcome screen
   ============================================================ */
.welcome-screen {
  background: transparent;
}

.welcome-logo {
  animation: none;
}

.welcome-logo img {
  filter: none;
}

.welcome-screen h2 {
  font-weight: 500;
  color: var(--text-primary);
}

.welcome-screen p {
  color: var(--text-secondary);
}

.suggestion-chip {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  color: var(--text-secondary);
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.suggestion-chip:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}

.suggestion-chip:active {
  box-shadow: none;
  transform: none;
}

/* ============================================================
   6. Messages
   ============================================================ */
.messages {
  padding-top: 16px;
}

.message {
  max-width: 800px;
  padding: 8px 24px;
}

.message-avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
}

.message.assistant .message-avatar {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  box-shadow: none;
}

.message.user .message-body {
  background: var(--user-bubble-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl) var(--radius-sm) var(--radius-xl) var(--radius-xl);
  color: var(--text-primary);
  box-shadow: none;
}

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

.message-content {
  color: var(--text-primary);
}

.message-content code {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--accent-primary);
}

.message-content pre {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.code-block {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.code-block .code-lang {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  color: var(--accent-soft);
}

.code-block .btn-copy {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
}

.code-block .btn-copy:hover {
  background: var(--bg-surface-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
  box-shadow: none;
}

.message-content blockquote {
  border-left: 3px solid var(--accent-quote);
  background: var(--accent-quote-dim);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.citation-badge {
  background: var(--accent-primary);
  color: var(--text-inverse);
  border-radius: 4px;
}

.feedback-btn {
  color: var(--text-tertiary);
  background: transparent;
  border-radius: var(--radius-full);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.feedback-btn:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}

.feedback-btn.active {
  color: var(--accent-primary);
  background: var(--accent-dim);
  box-shadow: none;
}

/* ============================================================
   7. Thinking block
   ============================================================ */
.thinking-block {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  margin: 12px 0;
}

.thinking-block summary {
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.thinking-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.thinking-block[open] .thinking-chevron {
  transform: rotate(180deg);
}

.thinking-content {
  padding: 0 14px 14px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

/* ============================================================
   8. Input area
   ============================================================ */
.input-area {
  background: linear-gradient(to top, var(--bg-primary) 90%, transparent);
  border-top: 1px solid var(--border-subtle);
}

.input-container {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl2);
  box-shadow: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.input-container:focus-within {
  border-color: var(--border-strong);
  background: var(--bg-elevated);
  box-shadow: none;
  transform: none;
}

.input-row {
  padding: 10px 14px;
}

.btn-attach {
  background: transparent;
  border-radius: var(--radius-md);
  color: var(--text-tertiary);
  box-shadow: none;
  width: 34px;
  height: 34px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-attach:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}

.btn-attach:active {
  box-shadow: none;
  transform: none;
}

textarea#message-input {
  color: var(--text-primary);
}

textarea#message-input::placeholder {
  color: var(--text-tertiary);
}

.btn-send {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-tertiary);
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.btn-send:not(:disabled) {
  opacity: 1;
  background: var(--accent-primary);
  color: var(--text-inverse);
}

.btn-send:not(:disabled):hover {
  background: var(--accent-secondary);
  box-shadow: none;
  transform: none;
}

.btn-send:not(:disabled):active {
  box-shadow: none;
  transform: none;
}

.input-disclaimer {
  color: var(--text-tertiary);
}

/* ============================================================
   9. Model selector & modes menu
   ============================================================ */
.model-select-pill {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.model-select-pill:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}

.model-select-pill:active {
  box-shadow: none;
}

.model-pill-dot {
  box-shadow: none;
}

.modes-menu {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.mode-item-header {
  color: var(--text-tertiary);
}

.mode-item {
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mode-item:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}

.mode-item:active {
  box-shadow: none;
}

.mode-item.active {
  background: var(--accent-dim);
  color: var(--accent-primary);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.25);
  box-shadow: none;
}

.mode-divider {
  background: var(--border-default);
}

/* ============================================================
   10. Agent mode toggle, quota, user info
   ============================================================ */
.agent-mode-toggle {
  background: var(--bg-surface);
  border-radius: var(--radius-full);
  box-shadow: none;
  border: 1px solid var(--border-default);
}

.agent-toggle-track {
  background: var(--accent-dim);
  border-radius: var(--radius-full);
  box-shadow: none;
}

.agent-toggle-thumb {
  background: var(--bg-elevated);
  border-radius: var(--radius-full);
  box-shadow: none;
  border: 1px solid var(--border-default);
}

.agent-toggle-label {
  color: var(--text-tertiary);
}

.agent-toggle-label.active {
  color: var(--accent-primary);
}

.agent-quota-bar,
.usage-bar {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  box-shadow: none;
}

.agent-quota-text,
.usage-text {
  color: var(--text-tertiary);
}

.agent-quota-track,
.usage-track {
  background: var(--bg-secondary);
  height: 5px;
  border-radius: var(--radius-full);
  overflow: hidden;
}

.agent-quota-fill,
.usage-fill {
  background: var(--accent-gradient);
  border-radius: var(--radius-full);
  box-shadow: none;
  height: 100%;
  transition: width 0.4s ease, background 0.3s ease;
}

#pro-usage-fill {
  background: var(--accent-primary);
}

.usage-fill.low {
  background: var(--danger-critical) !important;
}

.usage-fill.medium {
  background: var(--accent-warning) !important;
}

.user-info {
  background: transparent;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  box-shadow: none;
}

.user-info:hover {
  background: var(--bg-surface-hover);
  box-shadow: none;
}

.user-avatar {
  background: var(--accent-gradient);
  color: var(--text-inverse);
  box-shadow: none;
}

#btn-settings-nav {
  background: transparent;
  border-radius: var(--radius-full);
}

#btn-settings-nav:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}

.agent-mode-badge {
  background: var(--accent-dim);
  border: 1px solid rgba(var(--accent-primary-rgb), 0.25);
  border-radius: var(--radius-full);
  color: var(--accent-primary);
  box-shadow: none;
}

.header-action-btn {
  background: transparent;
  border-radius: var(--radius-full);
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.header-action-btn:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}

/* ============================================================
   11. Images, lightbox, toasts, modals
   ============================================================ */
.chat-img-container {
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.chat-img-watermark {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  box-shadow: none;
}

.chat-img-skeleton {
  background: var(--bg-secondary);
}

.chat-img-toolbar button {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  box-shadow: none;
}

.chat-img-toolbar button:hover {
  background: var(--bg-surface-hover);
  box-shadow: none;
  transform: none;
}

.lightbox-overlay {
  background: var(--bg-primary);
}

.lightbox-img {
  border-radius: var(--radius-md);
  box-shadow: none;
}

.lightbox-actions {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  box-shadow: none;
}

.toast-container {
  z-index: 10000;
}

.toast {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
}

.modal-overlay,
.agent-confirm-overlay,
.odrive-modal-overlay,
.verify-panel-overlay {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal,
.agent-confirm-modal,
.odrive-modal,
.verify-modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.btn-primary,
.btn-secondary {
  border-radius: var(--radius-md);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--accent-primary);
  color: var(--text-inverse);
  border: none;
  box-shadow: none;
}

.btn-primary:hover {
  background: var(--accent-secondary);
  box-shadow: none;
  transform: none;
}

.btn-primary:active {
  box-shadow: none;
  transform: none;
}

.btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}

.btn-secondary:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}

.btn-secondary:active {
  box-shadow: none;
}

/* ============================================================
   12. Auth pages
   ============================================================ */
.auth-page {
  background: var(--bg-primary);
}

.hero-section {
  background: transparent;
}

.action-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

@media (max-width: 768px) {
  .action-panel {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: none;
  }
}

.btn-google-pro,
.btn-orzatty-pro,
.btn-auth-pro,
.btn-submit-pro,
.btn-back-pro {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-google-pro:hover,
.btn-orzatty-pro:hover,
.btn-auth-pro:hover,
.btn-submit-pro:hover,
.btn-back-pro:hover {
  background: var(--bg-surface-hover);
  box-shadow: none;
  transform: none;
}

.btn-orzatty-pro,
.btn-auth-pro.primary,
.btn-submit-pro {
  background: var(--accent-primary);
  color: var(--text-inverse);
  border: none;
}

.btn-orzatty-pro:hover,
.btn-auth-pro.primary:hover,
.btn-submit-pro:hover {
  background: var(--accent-secondary);
  box-shadow: none;
}

.input-group input {
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  box-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.input-group input:focus {
  background: var(--bg-input-focus);
  border-color: var(--border-input-focus);
  box-shadow: none;
  outline: none;
}

.code-digit {
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  box-shadow: none;
}

.code-digit:focus {
  border-color: var(--accent-primary);
  box-shadow: none;
}

/* ============================================================
   13. Scrollbar
   ============================================================ */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 8px;
  border: 2px solid var(--bg-primary);
}

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

/* ============================================================
   14. O-Drive modal, mobile button, misc
   ============================================================ */
.odrive-modal-close {
  background: transparent;
  border-radius: var(--radius-full);
}

.odrive-modal-close:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}

.odrive-files-list .file-item {
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.odrive-files-list .file-item:hover {
  background: var(--bg-surface-hover);
  box-shadow: none;
  transform: none;
}

#btn-menu {
  background: transparent;
  border-radius: var(--radius-full);
  box-shadow: none;
}

#btn-menu:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  box-shadow: none;
  transform: none;
}

.typing-indicator span {
  background: var(--text-tertiary);
}

.glow, .neon, .cyber-glow {
  box-shadow: none !important;
  text-shadow: none !important;
}

.toast,
.modal,
.agent-confirm-modal,
.odrive-modal,
.verify-modal,
.modes-menu,
.suggestion-chip,
.model-select-pill,
.input-group input {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.btn-action-primary {
  background: var(--accent-primary);
  color: var(--text-inverse);
  border: none;
  box-shadow: none;
}

.btn-action-primary:hover {
  background: var(--accent-secondary);
  box-shadow: none;
  transform: none;
}

.btn-action-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}

.btn-action-secondary:hover {
  background: var(--bg-surface-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.avatar-big {
  box-shadow: none !important;
}

.dot-accent {
  box-shadow: none !important;
}

/* ============================================================
   15. Responsive
   ============================================================ */
@media (max-width: 768px) {
  .input-area {
    padding: 12px 16px 20px;
  }

  .message {
    padding: 8px 16px;
  }

  .sidebar {
    border-radius: 0;
  }

  .action-panel {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
}

/* ============================================================
   16. Fixes post-deploy jul 2026 (preserve)
   ============================================================ */
.sidebar:not(.expanded) .sidebar-header {
  justify-content: center !important;
  padding: 0 !important;
}

.sidebar:not(.expanded) .brand {
  display: none !important;
}

#usage-bar {
  display: none !important;
}

/* ============================================================
   17. Reduced motion / low-end devices
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .clay-button,
  .input-area,
  .sidebar-nav-item,
  .mode-item,
  .suggestion-chip,
  .conv-item,
  .feedback-btn,
  .agent-confirm-btn,
  .btn-icon,
  .btn-send,
  .btn-attach,
  .model-select-pill,
  .input-container {
    transition: none !important;
  }

  .clay-button:hover,
  .suggestion-chip:hover,
  .sidebar-nav-item:hover,
  .mode-item:hover,
  .conv-item:hover,
  .feedback-btn:hover,
  .agent-confirm-btn:hover,
  .clay-button:active,
  .suggestion-chip:active,
  .agent-confirm-btn:active {
    transform: none !important;
  }
}

.low-motion {
  --shadow-sm: none;
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.low-motion * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}