/* ══════════════════════════════════════════════════════════════════════════
   NOVA GLASS v3 — flowing rainbow background, contrast fixes, readable bubbles,
   transparent input surround, glass web-result panel. Loaded after v2.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Full-screen flowing RAINBOW WAVES (colours change across the screen) ── */
html[data-theme="glass"] body {
  background:
    linear-gradient(125deg,
      rgba(34,211,238,0.40), rgba(99,102,241,0.36), rgba(168,85,247,0.36),
      rgba(236,72,153,0.34), rgba(20,184,166,0.40), rgba(34,211,238,0.40)) !important;
  background-size: 360% 360% !important;
  background-attachment: fixed !important;
  animation: gv3Rainbow 26s ease-in-out infinite;
  color: var(--g-text);
}
@keyframes gv3Rainbow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* a second softer wave layer (root pseudo) for depth that drifts the other way */
html[data-theme="glass"]::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 50% at 20% 80%, rgba(236,72,153,0.22), transparent 60%),
    radial-gradient(60% 50% at 80% 70%, rgba(34,211,238,0.22), transparent 60%),
    repeating-linear-gradient(100deg, transparent 0 80px, rgba(255,255,255,0.04) 80px 160px);
  background-size: 200% 200%, 200% 200%, 100% 100%;
  animation: gv3Wave 30s ease-in-out infinite;
  mix-blend-mode: soft-light;
}
@keyframes gv3Wave {
  0%,100% { background-position: 0% 0%, 100% 100%, 0 0; }
  50%     { background-position: 100% 100%, 0% 0%, 0 0; }
}

/* ── Remove the dark surround around the input / chat; let the waves show ── */
html[data-theme="glass"] #mainContent,
html[data-theme="glass"] .main-content,
html[data-theme="glass"] #messagesContainer,
html[data-theme="glass"] .messages-container,
html[data-theme="glass"] .chat-messages,
html[data-theme="glass"] .chat-container,
html[data-theme="glass"] .chat-area,
html[data-theme="glass"] .conversation,
html[data-theme="glass"] .composer,
html[data-theme="glass"] .composer-wrap,
html[data-theme="glass"] .input-wrapper,
html[data-theme="glass"] .input-area,
html[data-theme="glass"] .input-footer,
html[data-theme="glass"] .input-bar,
html[data-theme="glass"] .bottom-bar,
html[data-theme="glass"] footer { background: transparent !important; box-shadow: none !important; }
/* keep app content above the wave layers */
html[data-theme="glass"] #sidebar,
html[data-theme="glass"] #mainContent,
html[data-theme="glass"] .topbar { position: relative; z-index: 1; }

/* ── READABILITY: never white-on-white. AI side dark text, user side white ── */
html[data-theme="glass"] #messagesContainer,
html[data-theme="glass"] .messages-container,
html[data-theme="glass"] .ai-row,
html[data-theme="glass"] .ai-row .ai-content,
html[data-theme="glass"] .ai-row .message-content,
html[data-theme="glass"] .ai-content,
html[data-theme="glass"] .ai-row p,
html[data-theme="glass"] .ai-row li,
html[data-theme="glass"] .ai-row span:not(.nova-cl-num):not(.model-badge),
html[data-theme="glass"] .ai-row strong,
html[data-theme="glass"] .ai-row em { color: var(--g-text) !important; }
/* user bubble text stays white on its vivid gradient */
html[data-theme="glass"] .user-row .message-content,
html[data-theme="glass"] .user-row .message-content * { color: #fff !important; }
/* headings, links, code inside AI messages */
html[data-theme="glass"] .ai-row h1, html[data-theme="glass"] .ai-row h2,
html[data-theme="glass"] .ai-row h3, html[data-theme="glass"] .ai-row h4 { color: #0f1c3d !important; }
html[data-theme="glass"] .ai-row a { color: #0e7490 !important; text-decoration: underline; }
html[data-theme="glass"] .ai-row code,
html[data-theme="glass"] .ai-row pre {
  background: rgba(255,255,255,0.66) !important; color: #0f2747 !important;
  border: 1px solid rgba(99,102,241,0.18) !important; border-radius: 8px;
}
html[data-theme="glass"] .ai-row pre { padding: 10px 12px; }
/* timestamps / muted */
html[data-theme="glass"] .timestamp, html[data-theme="glass"] .msg-time,
html[data-theme="glass"] .message-time { color: var(--g-text-soft) !important; }

/* ── Better, more readable glass message bubbles ── */
html[data-theme="glass"] .ai-row .message-content,
html[data-theme="glass"] .ai-content {
  background: rgba(255,255,255,0.66) !important;
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(150%); backdrop-filter: blur(var(--g-blur)) saturate(150%);
  border: 1px solid rgba(255,255,255,0.8) !important;
  border-radius: 18px 18px 18px 6px !important;
  box-shadow: 0 8px 26px rgba(70,110,200,0.14), inset 0 1px 0 rgba(255,255,255,0.7) !important;
  color: var(--g-text) !important;
}
html[data-theme="glass"] .user-row .message-content {
  background: linear-gradient(135deg, var(--g-accent), var(--g-accent2) 55%, var(--g-accent3)) !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  border-radius: 18px 18px 6px 18px !important;
  box-shadow: 0 8px 26px rgba(99,102,241,0.28) !important;
}

/* ── Glass styling for the resizable web-result panel ── */
html[data-theme="glass"] .nova-web-result {
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid rgba(255,255,255,0.8) !important;
  box-shadow: 0 10px 30px rgba(70,110,200,0.16) !important;
}
html[data-theme="glass"] .nova-web-result-head {
  background: linear-gradient(120deg, rgba(6,182,212,0.16), rgba(168,85,247,0.14)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.6) !important;
}
html[data-theme="glass"] .nova-web-result-title { color: var(--g-text) !important; }
html[data-theme="glass"] .nova-web-result-body { color: var(--g-text) !important; }
html[data-theme="glass"] .nwr-btn { background: rgba(255,255,255,0.55) !important; border: 1px solid var(--g-border) !important; color: var(--g-text) !important; }
html[data-theme="glass"] .nwr-btn:hover { background: rgba(6,182,212,0.2) !important; color: #0e7490 !important; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="glass"] body { animation: none; background-position: 50% 50% !important; }
  html[data-theme="glass"]::before { animation: none; }
}