/* study-deeptutor-glass.css — Liquid-glass skin for the Khio AI / Ask AI
   chat (#view-deeptutor). Matches the Khio Life glass: a soft white-blue
   gradient (light) / neutral-black gradient (dark) behind frosted,
   translucent surfaces (rail, input bar, home cards).

   Scoped entirely to #view-deeptutor so no other Study view is touched.
   Loaded AFTER study-deeptutor.js injects its base <style>, but the base
   surface rules aren't !important, so these win. The deeptutor uses the
   Study theme system, so dark keys off html[data-theme="dark"]. James 2026-06-26. */

/* ── Background gradient (the whole chat view) ── */
#view-deeptutor {
    background:
        radial-gradient(80% 46% at 50% -6%, rgba(150,185,255,.50), transparent 60%),
        radial-gradient(54% 38% at 90% 18%, rgba(158,198,255,.40), transparent 58%),
        radial-gradient(52% 44% at 6% 82%, rgba(150,205,255,.38), transparent 60%),
        linear-gradient(180deg, #f6f9ff 0%, #e9f0fb 50%, #dbe6f7 100%) !important;
}
html[data-theme="dark"] #view-deeptutor {
    background:
        radial-gradient(95% 55% at 50% -5%, rgba(110,122,150,.13), transparent 60%),
        linear-gradient(180deg, #1a1a1d 0%, #0e0e11 55%, #060607 100%) !important;
}
/* Let the gradient show through the main chat canvas. */
#view-deeptutor .dt2-main { background: transparent !important; }

/* ── Frosted left rail (conversation list) ── */
#view-deeptutor .dt2-rail {
    -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
    backdrop-filter: blur(22px) saturate(180%) !important;
    background: rgba(255,255,255,.46) !important;
    border-right: 1px solid rgba(255,255,255,.55) !important;
}
html[data-theme="dark"] #view-deeptutor .dt2-rail {
    background: rgba(255,255,255,.05) !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
}

/* ── Frosted input bar ── */
#view-deeptutor .dt2-chathero-bar,
#view-deeptutor .dt2-input-wrap {
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(255,255,255,.85) !important;
    box-shadow: 0 8px 22px rgba(80,100,140,.10), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html[data-theme="dark"] #view-deeptutor .dt2-chathero-bar,
html[data-theme="dark"] #view-deeptutor .dt2-input-wrap {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2) !important;
}

/* ── Frosted home cards (notebook tiles, quickstarts, quiz/mermaid blobs) ── */
#view-deeptutor .dt2-nb-card,
#view-deeptutor .dt2-quickstart-card,
#view-deeptutor .dt2-quiz-card,
#view-deeptutor .dt2-mermaid-card,
#view-deeptutor .dt2-chathero-blob {
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    background: rgba(255,255,255,.55) !important;
    border: 1px solid rgba(255,255,255,.85) !important;
    box-shadow: 0 8px 22px rgba(80,100,140,.10), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
html[data-theme="dark"] #view-deeptutor .dt2-nb-card,
html[data-theme="dark"] #view-deeptutor .dt2-quickstart-card,
html[data-theme="dark"] #view-deeptutor .dt2-quiz-card,
html[data-theme="dark"] #view-deeptutor .dt2-mermaid-card,
html[data-theme="dark"] #view-deeptutor .dt2-chathero-blob {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.2) !important;
}