/* ==========================================================================
   ai.css — the AI extension layer.

   No new colours, radii, spacing or type: every value below comes from the
   tokens in theme.css. This file only arranges the one screen the assistant
   will live on.
   ========================================================================== */

/* Same ground as the dashboard backdrop, mirrored, so the sheet reads as
   another corner of the same room rather than another document. */
.sheet--ai {
    background:
        radial-gradient(86% 48% at 80% 2%, rgba(60, 158, 114, 0.16), transparent 62%),
        radial-gradient(72% 44% at 10% 24%, rgba(191, 168, 99, 0.08), transparent 60%),
        radial-gradient(120% 64% at 50% 104%, rgba(120, 165, 96, 0.08), transparent 62%),
        linear-gradient(180deg, var(--bg-main) 0%, var(--bg-deep) 100%);
}

.screen__scroll--ai {
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Top — the dismissal area.

   Vertical movement here belongs to the sheet, not to the scroller, which is
   why `touch-action: none` sits on this header and nowhere else on the sheet:
   a future conversation below it keeps scrolling normally.
   -------------------------------------------------------------------------- */
.ai-top {
    flex: none;
    padding-top: max(var(--space-3), var(--safe-top));
    padding-bottom: var(--space-3);
    touch-action: none;
}

/* The grabber: says "pull me down" in the same language as the dock handle. */
.sheet-handle {
    display: block;
    width: 38px;
    height: 4px;
    margin: var(--space-2) auto 0;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.20);
}

.ai-top__row {
    display: flex;
    align-items: center;
    padding-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   Middle — intentionally empty
   -------------------------------------------------------------------------- */
.ai-main {
    display: grid;
    place-items: center;
    flex: 1 1 auto;
    padding-block: var(--space-6);
}

.ai-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.ai-empty__title {
    margin-top: var(--space-6);
    font-size: var(--fs-brand);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.ai-empty__status {
    margin-top: var(--space-2);
    font-size: var(--fs-small);
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   The assistant, as an abstract glass orb.
   The dotted ring is the dashboard's "no data yet" idiom, reused here.
   -------------------------------------------------------------------------- */
.orb {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(120px, 36vw, 152px);
    aspect-ratio: 1;
}

.orb__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    animation: orb-rotate 72s linear infinite;
}

.orb__ring circle {
    fill: none;
    stroke: rgba(255, 255, 255, 0.26);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 0.5 9;
}

/* A light source behind the glass, not a coloured disc. Kept low-contrast
   with a long falloff so it never bands on the dark ground. */
.orb__glow {
    position: absolute;
    inset: -34%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(60, 158, 114, 0.16) 0%,
        rgba(60, 158, 114, 0.08) 26%,
        rgba(60, 158, 114, 0.02) 48%,
        transparent 72%);
}

.orb__core {
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    background: radial-gradient(120% 120% at 30% 22%,
        rgba(255, 255, 255, 0.24) 0%,
        rgba(255, 255, 255, 0.09) 34%,
        rgba(255, 255, 255, 0.02) 62%,
        rgba(255, 255, 255, 0.06) 100%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    backdrop-filter: blur(14px) saturate(125%);
    /* Rim light on top, depth underneath: reads as a sphere of glass. */
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, 0.24),
        inset 0 -20px 30px rgba(0, 0, 0, 0.20),
        0 20px 42px rgba(0, 0, 0, 0.28);
    animation: orb-breathe 7s ease-in-out infinite;
}

/* Specular sheen. */
.orb__core::after {
    content: "";
    position: absolute;
    inset: 9% 20% 54% 17%;
    border-radius: 50%;
    background: radial-gradient(ellipse at 42% 24%, rgba(255, 255, 255, 0.30), transparent 72%);
    filter: blur(3px);
}

@keyframes orb-rotate {
    to { transform: rotate(360deg); }
}

@keyframes orb-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}

/* --------------------------------------------------------------------------
   Bottom — space reserved for the future input interface.
   Deliberately inert: no field, no caret, no send control.
   -------------------------------------------------------------------------- */
.ai-composer {
    flex: none;
    padding-bottom: max(var(--space-4), calc(var(--safe-bottom) + var(--space-4)));
}

.ai-composer__slot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    /* Outline only, never a filled field: this must not read as a usable box. */
    border: 1px dashed rgba(255, 255, 255, 0.10);
    border-radius: var(--radius-md);
    background: none;
}

.ai-composer__note {
    font-size: var(--fs-tiny);
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Larger screens — the layer stays a phone-sized sheet, centred like the
   dashboard, never stretched into a desktop panel.
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
    .ai-top { padding-top: var(--space-5); }
    .ai-composer { padding-bottom: var(--space-5); }
}