/* ============================================================================
   sphere1.css — Phase R3a — Sphere 1 page complete redesign.

   Sphere 1 is the gateway to the entire digital space. Violet identity.
   Avatar is the dominant centerpiece. Liquid glass. Spherical-harmonic
   ripple already lives in avatar.css. Layout adapts from 320px phones to
   1280px+ desktops via container queries.
   ========================================================================= */

.page-sphere1.s1-stage {
    --s1-violet:        #b187ff;
    --s1-violet-soft:   rgba(177, 135, 255, 0.18);
    --s1-violet-edge:   rgba(177, 135, 255, 0.42);
    --s1-glass:         rgba(20, 18, 32, 0.62);
    --s1-glass-strong:  rgba(28, 24, 44, 0.80);
    --s1-text:          #f0e8ff;
    --s1-text-soft:     rgba(240, 232, 255, 0.65);
    --s1-text-faint:    rgba(240, 232, 255, 0.40);

    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    min-height: calc(100dvh - 132px);
    color: var(--s1-text);
    container-type: inline-size;
    /* Subtle violet scrim behind everything so the page reads as Sphere 1
       even before the avatar paints. */
    background:
        radial-gradient(ellipse at 50% 12%,
            rgba(160, 100, 240, 0.22) 0%,
            rgba(160, 100, 240, 0.10) 24%,
            rgba(0, 0, 0, 0)         60%);
}

/* ── Top bar ───────────────────────────────────────────────────────────── */

.page-sphere1 .s1-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--s1-glass);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}

.page-sphere1 .s1-identity {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.page-sphere1 .s1-nick-display {
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    transition: background 160ms ease;
}
.page-sphere1 .s1-nick-display:hover,
.page-sphere1 .s1-nick-display:focus-visible {
    background: var(--s1-violet-soft);
    outline: none;
}
.page-sphere1 .s1-nick-input {
    font: inherit;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.35);
    color: var(--s1-text);
    border: 1px solid var(--s1-violet-edge);
    border-radius: 8px;
    padding: 4px 8px;
    outline: none;
    max-width: 220px;
}
.page-sphere1 .s1-nick-edit-icon {
    color: var(--s1-text-faint);
    font-size: 12px;
    pointer-events: none;
}

.page-sphere1 .s1-topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.page-sphere1 .s1-pill {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--s1-text-soft);
    cursor: pointer;
    transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.page-sphere1 .s1-pill[data-state="online"] {
    color: #58e89a;
    border-color: rgba(88, 232, 154, 0.42);
    background: rgba(88, 232, 154, 0.06);
}
.page-sphere1 .s1-pill[data-state="reconnecting"],
.page-sphere1 .s1-pill[data-state="connecting"],
.page-sphere1 .s1-pill[data-state="authenticating"] {
    color: #ffb45a;
    border-color: rgba(255, 180, 90, 0.42);
    background: rgba(255, 180, 90, 0.06);
}
.page-sphere1 .s1-pill[data-state="manual-offline"] {
    color: #ffb45a;
    border-color: rgba(255, 180, 90, 0.55);
    background: rgba(255, 180, 90, 0.10);
}
.page-sphere1 .s1-pill[data-state="error"],
.page-sphere1 .s1-pill[data-state="auth-failed"] {
    color: #ff5a78;
    border-color: rgba(255, 90, 120, 0.42);
    background: rgba(255, 90, 120, 0.06);
}

.page-sphere1 .s1-iconbtn {
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--s1-text-soft);
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}
.page-sphere1 .s1-iconbtn:hover { background: var(--s1-violet-soft); border-color: var(--s1-violet-edge); color: var(--s1-text); }
.page-sphere1 .s1-iconbtn:active { transform: scale(0.97); }
.page-sphere1 .s1-iconbtn:disabled { opacity: 0.42; cursor: not-allowed; }
.page-sphere1 .s1-iconbtn:focus-visible { outline: 2px solid var(--s1-violet-edge); outline-offset: 2px; }

/* ── Avatar hero ────────────────────────────────────────────────────────── */

.page-sphere1 .s1-avatar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0 4px;
    min-height: 280px;
    position: relative;
}
.page-sphere1 .s1-avatar-host {
    /* y_avatar.js applies its own scale class; we just give it room to breathe. */
    display: inline-block;
    line-height: 0;
}
.page-sphere1 .s1-state-badge {
    font-size: 12px;
    font-weight: 600;
    color: var(--s1-text-faint);
    text-transform: lowercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.page-sphere1 .s1-state-badge[data-state="listening"] { color: var(--s1-violet); border-color: var(--s1-violet-edge); background: var(--s1-violet-soft); }
.page-sphere1 .s1-state-badge[data-state="thinking"]  { color: #6aa8f0; border-color: rgba(106, 168, 240, 0.42); background: rgba(106, 168, 240, 0.10); }
.page-sphere1 .s1-state-badge[data-state="speaking"]  { color: #ffd07a; border-color: rgba(255, 208, 122, 0.42); background: rgba(255, 208, 122, 0.10); }
.page-sphere1 .s1-state-badge[data-state="error"]     { color: #ff5a78; border-color: rgba(255, 90, 120, 0.42); background: rgba(255, 90, 120, 0.06); }

/* ── Conversation log ──────────────────────────────────────────────────── */

.page-sphere1 .s1-log {
    flex: 1;
    min-height: 80px;
    overflow-y: auto;
    padding: 8px 4px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}
.page-sphere1 .s1-row {
    max-width: 88%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.page-sphere1 .s1-row.user      { align-self: flex-end; }
.page-sphere1 .s1-row.ai        { align-self: flex-start; }
.page-sphere1 .s1-row .s1-who {
    font-size: 11px;
    font-weight: 600;
    color: var(--s1-text-faint);
    padding: 0 12px;
}
.page-sphere1 .s1-row .s1-bubble {
    background: var(--s1-glass);
    backdrop-filter: blur(14px) saturate(115%);
    -webkit-backdrop-filter: blur(14px) saturate(115%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.page-sphere1 .s1-row.user .s1-bubble {
    background: linear-gradient(135deg, rgba(177, 135, 255, 0.22), rgba(140, 100, 220, 0.16));
    border-color: var(--s1-violet-edge);
    color: var(--s1-text);
}
.page-sphere1 .s1-row.ai .s1-bubble {
    color: var(--s1-text);
}
.page-sphere1 .s1-row.user.interim .s1-bubble {
    background: rgba(177, 135, 255, 0.10);
    border-style: dashed;
    color: var(--s1-text-soft);
    font-style: italic;
}
.page-sphere1 .s1-row.queued {
    align-self: flex-end;
    max-width: 88%;
}
.page-sphere1 .s1-row.queued .s1-bubble {
    background: linear-gradient(135deg, rgba(255, 180, 90, 0.16), rgba(255, 140, 80, 0.10));
    border-color: rgba(255, 180, 90, 0.42);
}
.page-sphere1 .s1-row.queued .s1-queued-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    padding: 0 4px;
}
.page-sphere1 .s1-row.queued .s1-queued-actions button {
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: var(--s1-text-soft);
}
.page-sphere1 .s1-row.queued .s1-q-send {
    background: var(--s1-violet);
    border-color: var(--s1-violet);
    color: #fff;
}
.page-sphere1 .s1-row.queued .s1-q-send:disabled { opacity: 0.42; cursor: not-allowed; }

/* ── Dock ──────────────────────────────────────────────────────────────── */

.page-sphere1 .s1-dock {
    position: sticky;
    bottom: 0;
    background: var(--s1-glass-strong);
    backdrop-filter: blur(20px) saturate(125%);
    -webkit-backdrop-filter: blur(20px) saturate(125%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.page-sphere1 .s1-dock-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.page-sphere1 .s1-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--s1-text-soft);
}
.page-sphere1 .s1-toggle input[type="checkbox"] {
    width: 14px; height: 14px;
    accent-color: var(--s1-violet);
    cursor: pointer;
}
.page-sphere1 .s1-stop-autosend {
    color: #ffb45a;
    border-color: rgba(255, 180, 90, 0.42);
    background: rgba(255, 180, 90, 0.06);
}
.page-sphere1 .s1-spacer { flex: 1; }
.page-sphere1 .s1-mode {
    font-size: 11px;
    color: var(--s1-text-faint);
    letter-spacing: 0.04em;
}

.page-sphere1 .s1-dock-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
.page-sphere1 .s1-mic {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 18px;
}
.page-sphere1 .s1-mic[data-listening="true"] {
    background: var(--s1-violet);
    border-color: var(--s1-violet);
    color: #fff;
    box-shadow: 0 0 0 4px var(--s1-violet-soft);
}
.page-sphere1 .s1-input {
    flex: 1;
    min-height: 44px;
    max-height: 140px;
    resize: none;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(8, 6, 16, 0.60);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--s1-text);
    font: inherit;
    font-size: 14px;
    line-height: 1.45;
    outline: none;
    transition: border-color 160ms ease, background 160ms ease;
    overflow-y: auto;
}
.page-sphere1 .s1-input:focus {
    border-color: var(--s1-violet-edge);
    background: rgba(8, 6, 16, 0.78);
}
.page-sphere1 .s1-input::placeholder { color: var(--s1-text-faint); }
.page-sphere1 .s1-send {
    flex: 0 0 auto;
    min-width: 72px;
    height: 44px;
    border-radius: 14px;
    background: var(--s1-violet);
    border: 1px solid var(--s1-violet);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 160ms ease, transform 100ms ease;
}
.page-sphere1 .s1-send:hover:not(:disabled) { transform: translateY(-1px); }
.page-sphere1 .s1-send:active:not(:disabled) { transform: translateY(0); }
.page-sphere1 .s1-send:disabled { opacity: 0.42; cursor: not-allowed; }

/* ── Container-query responsiveness ────────────────────────────────────── */

@container (min-width: 720px) {
    .page-sphere1 .s1-avatar-wrap { min-height: 360px; padding: 28px 0 12px; }
    .page-sphere1 .s1-row { max-width: 70%; }
    .page-sphere1 .s1-row .s1-bubble { font-size: 15px; }
    .page-sphere1 .s1-input { font-size: 15px; }
}

@container (min-width: 1024px) {
    .page-sphere1 .s1-avatar-wrap { min-height: 420px; }
    .page-sphere1 .s1-row { max-width: 60%; }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .page-sphere1 .s1-pill,
    .page-sphere1 .s1-iconbtn,
    .page-sphere1 .s1-state-badge,
    .page-sphere1 .s1-input,
    .page-sphere1 .s1-send {
        transition: none !important;
    }
}