/* ══════════════════════════════════════════════════════════════════════════
   NOVA GLASS v11 — vibrant "Gemini-inspired" colour pass + premium motion.
   Loaded after theme_glass_v10.css, before nova_layout_fix.css. Scoped to
   html[data-theme="glass"] only (Nova Moon untouched).

   Contents (in cascade order):
     1. Harmonised colour tokens
     2. Vibrant mesh ambient background (reuses the body::before layer — no extra
        compositing layer, just richer colour)
     3. Colour-tinted glass panels + inset colour glow
     4. Soft coloured OUTER glow on active/elevated containers
     5. Hover: lift + deeper blur + brighter border
     6. Micro-interactions: click scale + new-message fade/scale-in
     7. Reduced-motion / reduced-transparency guardrails
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Harmonised colour tokens ─────────────────────────────────────────── */
html[data-theme="glass"] {
  --g-mesh-1: rgba(99, 102, 241, 0.30);   /* deep indigo  */
  --g-mesh-2: rgba(34, 211, 238, 0.28);   /* neon cyan    */
  --g-mesh-3: rgba(236, 72, 153, 0.26);   /* vibrant pink */
  --g-mesh-4: rgba(20, 184, 166, 0.24);   /* teal         */
  --g-mesh-5: rgba(168, 85, 247, 0.28);   /* violet       */
  --g-glow:   rgba(6, 182, 212, 0.25);    /* soft cyan outer glow */
  --g-tint:   rgba(120, 119, 198, 0.12);  /* cool indigo inset wash */
  --g-hover-blur: 40px;
}

/* ── 2. Vibrant mesh ambient background ──
   Overrides the v7 body::before (same selector, later file → wins, no !important)
   with a rich multi-stop radial mesh. It sits at the deepest layer (z-index -3)
   so it glows up through the translucent panels. Gradient-only = cheap (no blur
   layer added), drifts slowly via background-position. ── */
html[data-theme="glass"] body::before {
  content: ""; position: fixed; inset: -10%; z-index: -3;
  pointer-events: none; display: block;
  background:
    radial-gradient(40% 46% at 16% 22%, var(--g-mesh-2), transparent 60%),
    radial-gradient(44% 50% at 50% 14%, var(--g-mesh-1), transparent 62%),
    radial-gradient(46% 52% at 82% 24%, var(--g-mesh-5), transparent 60%),
    radial-gradient(48% 54% at 86% 80%, var(--g-mesh-3), transparent 62%),
    radial-gradient(44% 50% at 14% 82%, var(--g-mesh-4), transparent 60%),
    radial-gradient(38% 42% at 52% 58%, rgba(99,102,241,0.16), transparent 64%);
  background-size: 170% 170%;
  filter: saturate(128%);
  opacity: 0.78;
  animation: gv11Mesh 44s ease-in-out infinite;
}
@keyframes gv11Mesh {
  0%,100% { background-position: 0% 0%; }
  50%     { background-position: 100% 100%; }
}
/* Give the existing drifting orbs (v7 body::after) a touch more saturation/pop */
html[data-theme="glass"] body::after { filter: saturate(135%); opacity: 0.72; }

/* ── 3. Colour-tinted glass panels + inset colour glow ──
   Re-declared with !important so they win over v10's !important. backdrop-filter
   from v10 (blur 30px) is left intact (not redeclared here). ── */

/* Tier 1 — general surfaces: faint indigo↔cyan wash over translucent white */
html[data-theme="glass"] .suggestion-card,
html[data-theme="glass"] #welcomeScreen,
html[data-theme="glass"] .welcome-screen,
html[data-theme="glass"] .ai-row .message-bubble,
html[data-theme="glass"] .ai-row .ai-content,
html[data-theme="glass"] .ai-row .message-content {
  background:
    linear-gradient(135deg, rgba(99,102,241,0.07), rgba(6,182,212,0.05)),
    rgba(255, 255, 255, 0.34) !important;
  box-shadow:
    0 16px 50px rgba(31, 38, 135, 0.18),
    inset 0 0 22px var(--g-tint),
    inset 0 1px 0 rgba(255, 255, 255, 0.60) !important;
}

/* Tier 2 — elevated chrome (input + dialogs): a touch more body + violet hint */
html[data-theme="glass"] .input-container,
html[data-theme="glass"] .settings-drawer,
html[data-theme="glass"] .account-dialog {
  background:
    linear-gradient(135deg, rgba(168,85,247,0.08), rgba(99,102,241,0.05)),
    rgba(255, 255, 255, 0.44) !important;
  box-shadow:
    0 18px 55px rgba(31, 38, 135, 0.20),
    inset 0 0 24px rgba(168, 85, 247, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

/* Tier 3 — sidebar / topbar: keep v10 gradient backgrounds, add a subtle cyan
   inner glow so they soak up the ambient colour. (Only box-shadow redeclared.) */
html[data-theme="glass"] .sidebar {
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, 0.55),
    inset 0 0 60px rgba(6, 182, 212, 0.06),
    4px 0 40px rgba(99, 102, 241, 0.10) !important;
}
html[data-theme="glass"] .topbar {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 40px rgba(99, 102, 241, 0.05),
    0 8px 30px rgba(10, 14, 30, 0.08) !important;
}

/* ── 4. Smooth transitions on interactive surfaces (base state) ──
   Declared on the base element so BOTH enter and leave animate. ── */
html[data-theme="glass"] .suggestion-card,
html[data-theme="glass"] .mode-chip,
html[data-theme="glass"] .model-chip,
html[data-theme="glass"] .input-container,
html[data-theme="glass"] .chat-history > *,
html[data-theme="glass"] .new-chat-btn,
html[data-theme="glass"] .account-btn,
html[data-theme="glass"] .local-ai-card,
html[data-theme="glass"] .sidebar-settings-btn {
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    -webkit-backdrop-filter 0.35s ease,
    backdrop-filter 0.35s ease;
  will-change: transform;
}

/* ── 5. Hover: gentle lift + deeper blur + brighter border + coloured glow ── */
html[data-theme="glass"] .suggestion-card:hover {
  transform: translateY(-5px);
  -webkit-backdrop-filter: blur(var(--g-hover-blur)) saturate(185%);
  backdrop-filter: blur(var(--g-hover-blur)) saturate(185%);
  border-color: rgba(255, 255, 255, 0.85) !important;
  background:
    linear-gradient(135deg, rgba(99,102,241,0.10), rgba(6,182,212,0.07)),
    rgba(255, 255, 255, 0.50) !important;
  box-shadow:
    0 0 0 1.5px rgba(6, 182, 212, 0.35),
    0 22px 60px rgba(168, 85, 247, 0.22),
    0 16px 50px rgba(31, 38, 135, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}
html[data-theme="glass"] .chat-history > *:hover,
html[data-theme="glass"] .new-chat-btn:hover,
html[data-theme="glass"] .account-btn:hover,
html[data-theme="glass"] .local-ai-card:hover,
html[data-theme="glass"] .sidebar-settings-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.85) !important;
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.30),
    0 10px 28px rgba(99, 102, 241, 0.18) !important;
}
html[data-theme="glass"] .mode-chip:hover,
html[data-theme="glass"] .model-chip:hover {
  transform: translateY(-2px);
  -webkit-backdrop-filter: blur(var(--g-hover-blur)) saturate(180%);
  backdrop-filter: blur(var(--g-hover-blur)) saturate(180%);
  border-color: rgba(255, 255, 255, 0.85) !important;
}

/* ── 6a. Soft coloured OUTER glow on active / focused containers ── */
html[data-theme="glass"] .input-container:focus-within {
  border-color: rgba(99, 102, 241, 0.55) !important;
  box-shadow:
    0 0 0 1px rgba(99, 102, 241, 0.40),
    0 8px 34px rgba(99, 102, 241, 0.25),
    0 18px 55px rgba(31, 38, 135, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}
html[data-theme="glass"] .model-chip.active,
html[data-theme="glass"] .mode-chip.active {
  box-shadow:
    0 0 0 1px rgba(168, 85, 247, 0.45),
    0 6px 24px rgba(168, 85, 247, 0.20),
    var(--g-shadow) !important;
}

/* ── 6b. Micro-interactions ──
   Quick scale(0.98) on click; fade + scale-in for new message rows. ── */
html[data-theme="glass"] .send-btn:active,
html[data-theme="glass"] .new-chat-btn:active,
html[data-theme="glass"] .suggestion-card:active,
html[data-theme="glass"] .mode-chip:active,
html[data-theme="glass"] .model-chip:active,
html[data-theme="glass"] .account-btn:active {
  transform: scale(0.98);
  transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
}
/* New messages appear with an elegant fade + scale-in (the .message-row wrapper
   isn't disabled by v7's animation:none on .message-content). */
html[data-theme="glass"] .message-row {
  animation: gv11MsgIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gv11MsgIn {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ── 7. Accessibility guardrails ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="glass"] body::before { animation: none !important; }
  html[data-theme="glass"] .message-row { animation: none !important; }
  html[data-theme="glass"] .suggestion-card,
  html[data-theme="glass"] .mode-chip,
  html[data-theme="glass"] .model-chip,
  html[data-theme="glass"] .input-container,
  html[data-theme="glass"] .chat-history > *,
  html[data-theme="glass"] .new-chat-btn,
  html[data-theme="glass"] .account-btn,
  html[data-theme="glass"] .local-ai-card,
  html[data-theme="glass"] .sidebar-settings-btn {
    transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
  }
  html[data-theme="glass"] .suggestion-card:hover,
  html[data-theme="glass"] .chat-history > *:hover,
  html[data-theme="glass"] .new-chat-btn:hover,
  html[data-theme="glass"] .account-btn:hover,
  html[data-theme="glass"] .local-ai-card:hover,
  html[data-theme="glass"] .sidebar-settings-btn:hover,
  html[data-theme="glass"] .mode-chip:hover,
  html[data-theme="glass"] .model-chip:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="glass"] .suggestion-card,
  html[data-theme="glass"] #welcomeScreen,
  html[data-theme="glass"] .welcome-screen,
  html[data-theme="glass"] .ai-row .message-content {
    background: rgba(255, 255, 255, 0.86) !important;
  }
  html[data-theme="glass"] .input-container,
  html[data-theme="glass"] .settings-drawer,
  html[data-theme="glass"] .account-dialog {
    background: rgba(255, 255, 255, 0.92) !important;
  }
}