/* study-ask.css, Mobile-first homework chat (Gemini-3-Flash wrapper).
   Matches the screenshot reference: cream background, hero title, big
   input card with Attach + Photo + orange send button, suggestion
   cards below, sidebar of past chats accessible via the history
   button in the header. */

/* Force the entire Solve view stack to cream so the area where the
   fixed pill floats (which is study-main / view-ask underneath the
   ask-shell) doesn't render white while the cards above sit on
   cream. James caught the seam, pill area was rgb(255,255,255),
   cards area was rgb(250,247,243). Need the whole column cream. */
body.mobile-app .study-main:has(#view-ask.active),
body.capacitor-app .study-main:has(#view-ask.active),
.study-main:has(#view-ask.active),
#view-ask,
body[data-scheme] #view-ask,
#view-ask.active {
    background: #faf7f3 !important;
    background-color: #faf7f3 !important;
}
.ask-shell {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    background: #faf7f3 !important;
    color: #1a1a1a;
    overflow: hidden;
    position: relative;
}
/* Once a chat thread exists (the .ask-body sheds its .is-empty class
   the moment a message is sent), flip the whole Solve surface to a
   plain white background so the colored answer / step / math cards
   read more cleanly. The peach watermark gradient also gets hidden
   so it doesn't tint the "white" with leftover orange. James:
   "make the entire background white so it looks easier to read."
   The cream stays for the empty/hero state, that's where the warm
   tint actually helps. */
.ask-shell:has(.ask-body:not(.is-empty)),
#view-ask:has(.ask-body:not(.is-empty)),
body:has(#view-ask.active .ask-body:not(.is-empty)) .study-main {
    background: #ffffff !important;
    background-color: #ffffff !important;
}
.ask-shell:has(.ask-body:not(.is-empty))::before {
    display: none !important;
}
/* Subtle wavy peach gradient watermark anchored to the upper-left,
   only around the hero icon area. Was previously at the bottom-left
   which bled into the input wrap region, visible peach tint
   surrounding the floating "Ask anything" pill. Now confined to the
   top half so it adds warmth behind the hero without touching the
   input bar. */
.ask-shell::before {
    content: '';
    position: absolute;
    left: -10%; top: 8%;
    width: 70%; height: 35%;
    background: radial-gradient(ellipse at 35% 50%,
        rgba(255, 200, 158, 0.22) 0%,
        rgba(255, 200, 158, 0.10) 35%,
        rgba(255, 200, 158, 0) 65%);
    filter: blur(18px);
    pointer-events: none;
    z-index: 0;
}
.ask-shell > * { position: relative; z-index: 1; }

/* ── Header ──
   Lives OUTSIDE .ask-body as a position:fixed bar that auto-hides on
   scroll-down and reveals on scroll-up (iOS Safari URL-bar pattern).
   James: "in solve when you start scrolling up, this should appear
   so you can leave without fully scrolling, but only when scrolling
   up." JS in study-ask.js toggles `.ask-header--hidden` based on
   scroll direction; near the top it's always shown.
   The transparent background keeps the white surface continuous
   behind it once a thread exists; on the empty/hero state the cream
   shows through. */
.ask-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 18px 10px;
    background: transparent;
    border-bottom: none;
    transform: translateY(0);
    transition: transform .22s cubic-bezier(.4,0,.2,1);
    pointer-events: auto;
}
.ask-header.ask-header--hidden { transform: translateY(-110%); }
/* Once a thread exists, the page is white (see :has rule above); give
   the header a matching solid background and a faint bottom hairline
   so it reads as a real toolbar when it slides in over content. */
.ask-shell:has(.ask-body:not(.is-empty)) .ask-header {
    background: #ffffff;
}
.ask-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* Header buttons, clean rounded squares with a soft shadow, no
   border. Hamburger (left) and edit/history (right) all share the
   same style. */
.ask-header-icon,
.ask-header-btn {
    width: 40px; height: 40px;
    border-radius: 14px;
    border: none;
    background: #ffffff;
    color: #1a1a1a;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 1px 6px rgba(0,0,0,0.03);
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.ask-header-icon:hover,
.ask-header-btn:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.06), 0 2px 10px rgba(0,0,0,0.05); }
.ask-header-icon:active,
.ask-header-btn:active { transform: scale(0.94); }
.ask-header-icon i,
.ask-header-btn i { width: 18px; height: 18px; }
button.ask-header-menu-btn.ask-header-icon i { width: 20px; height: 20px; }
/* Desktop already shows the persistent left sidebar, the hamburger
   menu button is mobile-only. Hiding it on desktop also hides the
   "Solve" title that sat next to it (the desktop sidebar marks the
   active view, no in-page title needed here). */
@media (min-width: 760px) {
    .ask-header-menu-btn,
    #askWorkspaceMenuBtn { display: none !important; }
    .ask-header .ask-header-title { display: none !important; }
}
.ask-header-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.ask-header-actions { display: flex; gap: 10px; align-items: center; }

/* ── Body (scrollable) ──
   The header (.ask-header) lives inside this, so the top padding has
   to clear the iOS status bar / notch via env(safe-area-inset-top). */
.ask-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Top padding clears the fixed .ask-header (≈60px once safe-area
       is included). Bottom padding clears the floating input pill
       only, when the free-counter chip is hidden (premium / no
       counter) we don't need extra buffer for it. James: gap "still
       slightly too big." Down from 96px to 64px. The chip, when
       shown, sits above the pill within the wrap; if it overlaps the
       last message slightly, the wrap background covers it. */
    padding: calc(env(safe-area-inset-top, 0px) + 64px) 18px calc(64px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column;
    align-items: center;
}
/* Messages now flow top-down (ChatGPT-style) rather than being
   anchored to the bottom of the scroll container. James, 2026-05-02:
   "first messages should go up top like [ChatGPT]", the user's
   first message lands at the top of the viewport, the AI reply
   below it, and the input pill stays at its fixed position at the
   bottom of the viewport. Empty space between the last reply and
   the input pill is fine; long conversations scroll naturally
   because overflow-y is auto.
   We previously had `margin-top: auto` here to anchor messages to
   the bottom (bottom-up like iMessage). That rule has been removed. */
.ask-body::-webkit-scrollbar { display: none; }
/* On the initial empty state (hero + suggestion cards, no chat
   thread yet) lock scrolling so the hero can't bounce past the input
   pill. Once there are messages the .is-empty class drops and
   overflow-y:auto re-enables. */
.ask-body.is-empty {
    overflow-y: hidden;
    overscroll-behavior: contain;
    touch-action: pan-x;
}

/* ── Hero (initial state) ── */
.ask-hero {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    width: 100%; max-width: 560px;
    padding: 12px 8px 8px;
}
.ask-hero-icon {
    width: 86px; height: 86px; border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(232,133,58,0.18);
    display: flex; align-items: center; justify-content: center;
    color: #e8853a;
    margin-bottom: 22px;
    box-shadow: 0 4px 18px rgba(232,133,58,0.10);
    position: relative;
}
.ask-hero-icon i { width: 36px; height: 36px; stroke-width: 2.2; }
/* Four sparkle stars floating around the hero icon, yellow / peach
   tints with a soft glow. Pure CSS via two pseudo-elements + two
   absolutely positioned spans (added inline below). */
.ask-hero-icon::before,
.ask-hero-icon::after {
    content: '✦';
    position: absolute;
    color: #f4b878;
    text-shadow: 0 0 8px rgba(244, 184, 120, 0.70), 0 0 14px rgba(244, 184, 120, 0.35);
    pointer-events: none;
    line-height: 1;
}
.ask-hero-icon::before {
    top: -6px; left: -16px;
    font-size: 16px;
    transform: rotate(-12deg);
}
.ask-hero-icon::after {
    bottom: -2px; right: -14px;
    font-size: 13px;
    transform: rotate(8deg);
}
.ask-hero-icon .ask-spark-tr,
.ask-hero-icon .ask-spark-bl {
    position: absolute;
    color: #f4b878;
    text-shadow: 0 0 8px rgba(244, 184, 120, 0.70), 0 0 14px rgba(244, 184, 120, 0.35);
    pointer-events: none;
    line-height: 1;
}
.ask-hero-icon .ask-spark-tr {
    top: 4px; right: -22px;
    font-size: 12px;
    transform: rotate(20deg);
}
.ask-hero-icon .ask-spark-bl {
    bottom: 6px; left: -20px;
    font-size: 11px;
    transform: rotate(-25deg);
}
.ask-hero-title {
    font-size: 30px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.05;
    margin-bottom: 8px;
}
.ask-hero-title .accent { color: #e8853a; display: block; }
.ask-hero-sub {
    font-size: 15px; color: rgba(26,26,26,0.6); line-height: 1.5;
    margin-bottom: 22px; max-width: 320px;
}

/* ── Suggestions ── */
.ask-suggest-label {
    align-self: flex-start;
    margin: 4px 4px 10px;
    font-size: 13px; font-weight: 700; color: rgba(26,26,26,0.55);
}
.ask-suggest-list {
    width: 100%; max-width: 560px;
    display: flex; flex-direction: column; gap: 10px;
}
.ask-suggest-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: transform .12s ease, box-shadow .12s ease;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 10px rgba(0,0,0,0.03);
}
.ask-suggest-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.05); }
.ask-suggest-card .ask-suggest-card-chevron {
    margin-left: auto;
    color: rgba(26,26,26,0.32);
    flex-shrink: 0;
    display: flex; align-items: center;
}
.ask-suggest-card .ask-suggest-card-chevron i { width: 16px; height: 16px; }
.ask-suggest-card:active { transform: scale(0.99); }
.ask-suggest-card-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ask-suggest-card-icon i { width: 18px; height: 18px; }
.ask-suggest-card-icon.bg-blue { background: #e0ecff; color: #2a66d6; }
.ask-suggest-card-icon.bg-green { background: #ddf5e3; color: #1f9b53; }
.ask-suggest-card-icon.bg-purple { background: #ece0ff; color: #6d3fd6; }
.ask-suggest-card-icon.bg-orange { background: #ffe5d3; color: #e8853a; }
.ask-suggest-card-text { display: flex; flex-direction: column; min-width: 0; }
.ask-suggest-card-title { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.ask-suggest-card-sub { font-size: 12px; color: rgba(26,26,26,0.55); margin-top: 2px; }

/* ── Chat thread (after first message) ── */
.ask-thread {
    width: 100%; max-width: 720px;
    display: flex; flex-direction: column; gap: 16px;
    padding-top: 4px;
}
.ask-msg-row { display: flex; width: 100%; }
.ask-msg-row.user { justify-content: flex-end; }
.ask-msg-row.ai { justify-content: flex-start; }
.ask-msg-bubble {
    max-width: 88%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 15px; line-height: 1.55;
    overflow-wrap: break-word; word-break: break-word;
}
.ask-msg-bubble img.ask-msg-photo {
    display: block;
    max-width: 100%;
    border-radius: 12px;
    margin-bottom: 8px;
}
.ask-msg-row.user .ask-msg-bubble {
    /* Bubble background + text color are CSS vars so the picker
       (small palette button in the Solve header) can swap them
       live. Default is the soft cool blue James locked in
       2026-05-02. */
    background: var(--ask-user-bubble-bg, #e9eef6);
    color: var(--ask-user-bubble-text, #1a1a1a);
    border-bottom-right-radius: 6px;
}

/* ── User-bubble color picker (tiny popover anchored to a
       palette icon in the .ask-header). 4 preset swatches + a
       native color input for fine-tuning. Saved to
       localStorage.khioAskBubbleColor and applied on every
       Solve load. ── */
.ask-bubble-picker {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 56px);
    right: 18px;
    z-index: 30;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.04);
    padding: 12px;
    display: none;
    flex-direction: column;
    gap: 8px;
    min-width: 220px;
}
.ask-bubble-picker.is-open { display: flex; }
.ask-bubble-picker-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(0,0,0,0.55);
    margin: 0 2px 2px;
}
.ask-bubble-swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.ask-bubble-swatch {
    height: 36px;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease;
    padding: 0;
    font-family: inherit;
}
.ask-bubble-swatch:hover { transform: translateY(-1px); }
.ask-bubble-swatch.is-active { border-color: rgba(0,0,0,0.35); box-shadow: inset 0 0 0 2px #fff; }
.ask-bubble-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px 0;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: 2px;
}
.ask-bubble-custom label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(0,0,0,0.65);
    flex: 1;
}
.ask-bubble-custom input[type="color"] {
    width: 36px;
    height: 28px;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    padding: 0;
}
.ask-msg-row.ai .ask-msg-bubble {
    /* AI messages sit directly on the chat surface, no white bubble
       behind them. The structured cards inside (ANSWER, STEP, MATH,
       WHY) provide all the visual chrome. James: "make it so like
       the AI doesn't make his own text box, it just gets put into
       like the website background." Width grows to nearly full so
       step headings and math cards have room; padding goes to zero
       so there's no visible gutter. */
    background: transparent;
    border: none;
    color: #1a1a1a;
    border-radius: 0;
    padding: 0;
    max-width: 100%;
    width: 100%;
}
.ask-msg-row.ai .ask-msg-bubble p { margin: 0 0 8px; }
.ask-msg-row.ai .ask-msg-bubble p:last-child { margin-bottom: 0; }
.ask-msg-row.ai .ask-msg-bubble strong { font-weight: 700; }
.ask-msg-row.ai .ask-msg-bubble code {
    background: rgba(0,0,0,0.05);
    padding: 1px 5px; border-radius: 4px;
    font-size: 13px;
}
.ask-msg-row.ai .ask-msg-bubble pre {
    background: #f5f3ef; padding: 10px 12px; border-radius: 10px;
    overflow-x: auto; font-size: 13px;
}
.ask-msg-row.ai .ask-msg-bubble ul,
.ask-msg-row.ai .ask-msg-bubble ol { padding-left: 22px; margin: 6px 0 8px; }

/* ── Solve structured blocks, [ANSWER] / [STEP] / [MATH] / [WHY] ──
   Rendered inside .ask-msg-row.ai .ask-msg-bubble. ANSWER is a colored
   summary card at the top. STEP is a bullet-led card with a heading
   and a body that can contain MATH (centered LaTeX card) and WHY
   (collapsible explainer pill). TIP was removed per James's spec ,
   "answer + explanation" only. */
.ask-callout {
    border-radius: 14px;
    padding: 12px 16px 14px;
    margin: 10px 0;
    border: 1px solid;
    border-left-width: 4px;
    line-height: 1.5;
    font-size: 14.5px;
}
.ask-callout-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
    opacity: 0.78;
}
.ask-callout-icon { width: 14px; height: 14px; flex-shrink: 0; }
.ask-callout-body p { margin: 0 0 6px; }
.ask-callout-body p:last-child { margin-bottom: 0; }
.ask-callout-body ol,
.ask-callout-body ul { margin: 4px 0 0; padding-left: 22px; }
.ask-callout-body li { margin: 3px 0; line-height: 1.55; }
.ask-callout-body strong { font-weight: 700; }

/* Answer, warm amber highlighter, bigger headline weight */
.ask-callout--answer {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-color: #f59e0b;
    color: #78350f;
}
.ask-callout--answer .ask-callout-label { color: #b45309; }
.ask-callout--answer .ask-callout-body { font-size: 16px; font-weight: 600; color: #78350f; }
.ask-callout--answer .ask-callout-body strong { color: #78350f; font-weight: 800; }

/* Step, bullet + heading + body. Used for STEM problems with worked
   solutions. Each step gets its own card so the user can scan the
   solution as a sequence of clean rows. */
.ask-step {
    margin: 18px 0;
    padding: 0;
}
.ask-step-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.ask-step-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1f2937;
    flex-shrink: 0;
    margin-top: 11px;
}
.ask-step-title {
    flex: 1;
    margin: 0;
    font-size: 19px;
    line-height: 1.32;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
}
.ask-step-body { padding-left: 20px; }
.ask-step-body p { margin: 4px 0 8px; line-height: 1.55; }
.ask-step-body p:last-child { margin-bottom: 0; }

/* Math card, centered LaTeX inside a soft gray rounded box. Tuned to
   sit nicely under a step heading. .ask-math-tex is the inner span
   KaTeX renders into; we just give it room. */
.ask-math-card {
    background: #f3f4f6;
    border-radius: 16px;
    padding: 22px 20px;
    margin: 10px 0 6px;
    text-align: center;
    overflow-x: auto;
    overflow-y: hidden;
}
.ask-math-card .katex-display { margin: 0; }
.ask-math-card .katex { font-size: 1.18em; }

/* Why pill, purple play-style chip the user can tap to expand a
   short explanation of the step. Built on <details>/<summary> so it
   needs zero JS. The play triangle is a CSS triangle on ::before. */
.ask-step-why {
    margin-top: 8px;
    display: inline-block;
}
.ask-step-why-summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 10px;
    border-radius: 999px;
    background: #ede9fe;
    color: #6d28d9;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .15s;
}
.ask-step-why-summary::-webkit-details-marker { display: none; }
.ask-step-why-summary:hover { background: #ddd6fe; }
.ask-step-why-icon {
    display: inline-block;
    width: 0; height: 0;
    border-left: 8px solid #7c3aed;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: transform .15s;
}
.ask-step-why[open] .ask-step-why-icon { transform: rotate(90deg); }
.ask-step-why-body {
    margin-top: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #faf5ff;
    border: 1px solid #e9d5ff;
    font-size: 14px;
    line-height: 1.55;
    color: #4c1d95;
}

/* Dark theme overrides for step / math / why */
body[data-scheme="dark"] .ask-step-bullet,
[data-theme="dark"] .ask-step-bullet { background: #f4f4f5; }
body[data-scheme="dark"] .ask-step-title,
[data-theme="dark"] .ask-step-title { color: #f4f4f5; }
body[data-scheme="dark"] .ask-math-card,
[data-theme="dark"] .ask-math-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
}
body[data-scheme="dark"] .ask-step-why-summary,
[data-theme="dark"] .ask-step-why-summary {
    background: rgba(124, 58, 237, 0.20);
    color: #c4b5fd;
}
body[data-scheme="dark"] .ask-step-why-icon,
[data-theme="dark"] .ask-step-why-icon { border-left-color: #c4b5fd; }
body[data-scheme="dark"] .ask-step-why-body,
[data-theme="dark"] .ask-step-why-body {
    background: rgba(124, 58, 237, 0.10);
    border-color: rgba(124, 58, 237, 0.35);
    color: #ddd6fe;
}

/* Dark mode, keep the same hue family but pull saturation down so the
   cards don't blow out a dark chat surface. */
body[data-scheme="dark"] .ask-callout--answer,
[data-theme="dark"] .ask-callout--answer {
    background: linear-gradient(135deg, rgba(245,158,11,0.14) 0%, rgba(245,158,11,0.06) 100%);
    border-color: rgba(245,158,11,0.55);
    color: #fde68a;
}
body[data-scheme="dark"] .ask-callout--answer .ask-callout-label,
[data-theme="dark"] .ask-callout--answer .ask-callout-label { color: #fcd34d; }
body[data-scheme="dark"] .ask-callout--answer .ask-callout-body,
body[data-scheme="dark"] .ask-callout--answer .ask-callout-body strong,
[data-theme="dark"] .ask-callout--answer .ask-callout-body,
[data-theme="dark"] .ask-callout--answer .ask-callout-body strong { color: #fde68a; }
/* (.ask-callout--steps and .ask-callout--tip dark overrides removed ,
    those callout types are gone. STEP / MATH / WHY have their own
    dark overrides in the block above.) */

/* Typing indicator */
.ask-typing {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 14px 18px;
}
.ask-typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(26,26,26,0.35);
    animation: askTypingDot 1.2s ease-in-out infinite;
}
.ask-typing span:nth-child(2) { animation-delay: 0.15s; }
.ask-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes askTypingDot {
    0%, 100% { opacity: 0.35; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-3px); }
}

/* ── Input bar (fixed bottom, keyboard-aware, pill style) ──
   Wrap takes the same cream as the rest of the Solve view so the
   area surrounding the floating pill blends with the cards section
   above. (Earlier we'd made the wrap transparent, but the body /
   study-main underneath was white, so the bottom region showed
   pure white. James noticed the seam: cream cards / white pill
   surround. Now both are cream and continuous.)

   Also adds a small upward gradient above the wrap so content
   scrolling underneath fades into cream cleanly instead of cutting
   off at a hard edge. */
.ask-input-wrap,
body[data-scheme] .ask-input-wrap {
    position: fixed; left: 0; right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--khio-kbh, 0px));
    background-color: #faf7f3 !important;
    background: #faf7f3 !important;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 5;
    transition: bottom 0.18s ease;
    box-sizing: border-box;
}
.ask-input-wrap::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: -16px; height: 16px;
    background: linear-gradient(to bottom, rgba(250,247,243,0) 0%, #faf7f3 100%);
    pointer-events: none;
}
/* Once a chat thread exists the surface is white (see :has rule near
   the top of this file). Match the input wrap and its top fade-in
   gradient to that white so there's no visible cream/white seam
   between the last message and the input pill, which was reading as
   a "still too big gap" with the wrap painted in a different color
   from the body above it. Empty/hero state keeps the cream wrap
   because the surface is still cream there. */
.ask-shell:has(.ask-body:not(.is-empty)) .ask-input-wrap {
    background: #ffffff !important;
    background-color: #ffffff !important;
}
.ask-shell:has(.ask-body:not(.is-empty)) .ask-input-wrap::before {
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 100%);
}
body.khio-kb-open .ask-input-wrap {
    bottom: var(--khio-kbh, 0px);
    padding-bottom: 10px;
}

/* Single pill input, clean rounded bar, doesn't extend off-screen,
   plus button on the left, text input fills the middle, orange send
   on the right. No border, just a soft shadow, the previous gray
   border and inner gray tint were rendering as a "weird gray" pill-
   in-pill on iOS, which James asked to remove. */
.ask-input-pill {
    display: flex; align-items: center; gap: 4px;
    background: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 4px 4px 4px 6px;
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    box-sizing: border-box;
    box-shadow: 0 2px 14px rgba(0,0,0,0.06);
    transition: box-shadow 0.15s ease;
}
.ask-input-pill:focus-within {
    box-shadow: 0 0 0 2px rgba(232,133,58,0.25), 0 2px 14px rgba(0,0,0,0.06);
}
.ask-input-plus {
    width: 38px; height: 38px;
    border-radius: 50%; border: none;
    background: transparent;
    color: rgba(26,26,26,0.55);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; flex-shrink: 0;
    font-family: inherit;
    transition: background 0.12s ease, color 0.12s ease;
}
.ask-input-plus:hover { background: rgba(0,0,0,0.05); color: #1a1a1a; }
.ask-input-plus:active { transform: scale(0.94); }
.ask-input-plus i { width: 20px; height: 20px; }
/* Raised specificity (input.ask-input-text + body[data-scheme]) to beat
   the global `input,textarea,select { background: <gray> !important }`
   rule that shared-nav.js injects at runtime, that's the "weird gray"
   James was seeing painted behind "Ask anything." */
input.ask-input-text,
body[data-scheme] input.ask-input-text,
.ask-input-pill input.ask-input-text {
    flex: 1; min-width: 0;
    border: none !important; outline: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    font-size: 15px; line-height: 1.3;
    color: #1a1a1a !important;
    padding: 9px 6px;
}
input.ask-input-text::placeholder,
body[data-scheme] input.ask-input-text::placeholder {
    color: rgba(26,26,26,0.42) !important;
    opacity: 1 !important;
}
.ask-input-send-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #ff8a3a, #e8853a);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(232,133,58,0.35);
    flex-shrink: 0;
    transition: transform 0.1s ease, opacity 0.15s ease;
}
.ask-input-send-btn:disabled {
    background: linear-gradient(135deg, #ff8a3a, #e8853a);
    color: #fff;
    opacity: 0.35;
    box-shadow: none; cursor: default;
}
.ask-input-send-btn:active:not(:disabled) { transform: scale(0.94); }
.ask-input-send-btn i { width: 18px; height: 18px; }
.ask-input-attached-photo {
    position: relative;
    margin-bottom: 6px;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    background: #faf7f3;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
}
.ask-input-attached-photo img {
    width: 38px; height: 38px; object-fit: cover; border-radius: 6px;
}
.ask-input-attached-photo .ask-photo-label { font-size: 12px; color: #1a1a1a; flex: 1; }
.ask-input-attached-photo .ask-photo-remove {
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(0,0,0,0.06); border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #1a1a1a;
}
.ask-input-attached-photo .ask-photo-remove i { width: 14px; height: 14px; }

/* Free-tier counter pill */
.ask-free-counter {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    background: #ffe5d3;
    color: #b35a14;
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    margin-bottom: 4px;
}
.ask-free-counter.empty { background: #ffd2d2; color: #b81f1f; }
.ask-free-counter.hidden { display: none; }

/* ── History sheet (slide-down) ── */
.ask-history-sheet {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #faf7f3;
    z-index: 10;
    display: none;
    flex-direction: column;
}
.ask-history-sheet.open { display: flex; }
.ask-history-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 12px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.ask-history-header h2 { margin: 0; font-size: 18px; font-weight: 800; }
.ask-history-list {
    flex: 1; overflow-y: auto;
    padding: 8px 12px calc(80px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
}
.ask-history-item {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 14px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    margin-bottom: 8px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
}
.ask-history-item:active { transform: scale(0.99); }
.ask-history-item-text { flex: 1; min-width: 0; }
.ask-history-item-title { font-size: 15px; font-weight: 700; color: #1a1a1a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-history-item-preview { font-size: 12px; color: rgba(26,26,26,0.55); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-history-item-delete {
    width: 32px; height: 32px; border-radius: 50%;
    background: transparent; border: none;
    display: flex; align-items: center; justify-content: center;
    color: rgba(0,0,0,0.45);
    cursor: pointer; flex-shrink: 0;
}
.ask-history-item-delete:hover { color: #b81f1f; background: rgba(184,31,31,0.06); }
.ask-history-item-delete i { width: 16px; height: 16px; }
.ask-history-empty {
    text-align: center; padding: 60px 20px;
    color: rgba(26,26,26,0.5); font-size: 14px;
}

/* ── Desktop / wider screens ──
   No suggestion cards on desktop, James asked for it to look "like
   another AI" (ChatGPT-style: just the hero greeting + input pill,
   then conversation). The pill input centers itself via max-width. */
@media (min-width: 760px) {
    /* Top padding clears the fixed .ask-header (40px buttons + 10px top
       padding + 10px bottom = ~60px) plus 28px of breathing room so the
       first message lands ~88px from the viewport top instead of getting
       clipped by the floating New-chat / History toolbar. */
    .ask-body { padding: 88px 32px calc(160px); }
    .ask-input-wrap {
        padding: 16px 24px 32px;
        background-color: #faf7f3 !important;
        background: #faf7f3 !important;
    }
    /* Conversation mode (after at least one message exists): the
       fixed input wrap was spanning the FULL viewport including
       over the persistent left sidebar, so the centered pill ended
       up off-center vs the chat content above it. Shift the wrap's
       left edge to the sidebar's right edge so the pill centers in
       the same column the messages are centered in. James, 2026-05-02:
       "can we center the typing bar after sending a message and
       raise it up a bit." Bottom padding bumped 24->32 to lift the
       pill up off the viewport edge a touch. */
    .ask-shell:has(.ask-body:not(.is-empty)) .ask-input-wrap {
        left: var(--sidebar-w, 300px) !important;
    }
    /* Collapsed sidebar narrows to var(--sidebar-w-collapsed, 72px). */
    .study-layout.sidebar-collapsed .ask-shell:has(.ask-body:not(.is-empty)) .ask-input-wrap {
        left: var(--sidebar-w-collapsed, 72px) !important;
    }
    .ask-suggest-list { display: none !important; }
    .ask-hero { margin-top: 12vh; }
    .ask-hero-title { font-size: 40px; }
    .ask-hero-sub { font-size: 16px; max-width: 380px; }
    .ask-hero-icon { width: 64px; height: 64px; }
    .ask-hero-icon i { width: 28px; height: 28px; }
    .ask-input-pill { max-width: 760px; padding: 6px 6px 6px 8px; }
    .ask-input-text { font-size: 16px; padding: 10px 8px; }
    .ask-input-plus, .ask-input-send-btn { width: 40px; height: 40px; }
}
/* Laptop range, desktop block above is sized for 1600px+ canvases.
   At 1280-1440 the hero icon + 40px title + 88/160 body padding eat
   most of the viewport. Compact everything so the input pill lifts
   ~60px and the hero feels balanced. James 2026-05-12. */
@media (min-width: 761px) and (max-width: 1440px) {
    .ask-body { padding-top: 64px; padding-bottom: 100px; }
    .ask-hero { margin-top: 8vh; }
    .ask-hero-title { font-size: 32px; }
    .ask-hero-sub { font-size: 15px; }
    .ask-hero-icon { width: 52px; height: 52px; }
    .ask-hero-icon i { width: 24px; height: 24px; }

    /* ── Desktop empty state: hero + bigger search bar centered together ──
       James: input was pinned at the bottom of the screen with a huge
       empty gap between it and the headline. On desktop empty, drop
       the body's flex:1 so it shrinks to content, anchor the input
       directly below the hero, and vertically center the hero+input
       pair in the shell. */
    .ask-shell:has(.ask-body.is-empty) {
        position: relative;
        justify-content: center;
    }
    .ask-shell:has(.ask-body.is-empty) .ask-body {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 32px;
        overflow: visible;
    }
    .ask-shell:has(.ask-body.is-empty) .ask-hero {
        margin-top: 0;
        margin-bottom: 28px;
    }
    .ask-shell:has(.ask-body.is-empty) .ask-input-wrap {
        position: static;
        bottom: auto;
        background: transparent !important;
        background-color: transparent !important;
        padding: 0 32px;
        flex: 0 0 auto;
    }
    .ask-shell:has(.ask-body.is-empty) .ask-input-wrap::before {
        display: none;
    }
    .ask-shell:has(.ask-body.is-empty) .ask-input-pill {
        max-width: 720px;
        padding: 10px 10px 10px 14px;
        box-shadow: 0 4px 24px rgba(232,133,58,0.12), 0 2px 8px rgba(0,0,0,0.04);
    }
    .ask-shell:has(.ask-body.is-empty) .ask-input-text {
        font-size: 18px;
        padding: 14px 8px;
    }
    .ask-shell:has(.ask-body.is-empty) .ask-input-plus,
    .ask-shell:has(.ask-body.is-empty) .ask-input-send-btn {
        width: 48px; height: 48px;
    }
    .ask-shell:has(.ask-body.is-empty) .ask-input-plus i {
        width: 22px; height: 22px;
    }
    /* Header stays at the top, give it back its position so the
       shell's justify-content:center doesn't pull it inward. */
    .ask-shell:has(.ask-body.is-empty) .ask-header {
        flex: 0 0 auto;
        position: absolute; top: 0; left: 0; right: 0;
    }
}