/* Phase 21a: the page styles that predate the Zentivue-style kit (va.css). Their colours now come from tokens.css, so they follow
   the VectorAtlas brand and dark mode; each page moves to va- classes as Phase 21a task D restyles it, and this file shrinks. */
:root {
    --oi-ink: var(--va-color-text);
    --oi-accent: var(--va-color-brand-action);
    --oi-bg: var(--va-color-bg);
    --oi-border: var(--va-color-border);
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Atlas chat widget (plans/phase18-Atlas-Integration.md, task 6) — a global floating launcher/panel,
   mounted once in MainLayout.razor inside EulaGate. Prefixed atlas- rather than oi- since it's a
   self-contained widget, not a page section. */
.atlas-launcher {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--oi-accent);
    color: var(--va-color-on-brand);
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 24; /* Phase 21a: Zentivue's layers. The launcher sits below the phone drawer (40) and dialogs (50-60), never over them. */
}

/* Phase 21a D5: a page with an ActionBar (the setup guide) has buttons fixed along the bottom, so the launcher sits above the bar. */
.va-main:has(.va-action-bar) .atlas-launcher {
    bottom: calc(var(--va-tap) + 2 * var(--va-space-2) + var(--va-space-4) + env(safe-area-inset-bottom));
}

.atlas-launcher svg {
    width: 26px;
    height: 26px;
    fill: var(--va-color-on-brand);
}

.atlas-launcher.atlas-hidden {
    display: none;
}

.atlas-panel {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 360px;
    max-width: calc(100vw - 2rem);
    height: 520px;
    max-height: calc(100vh - 3rem);
    background: var(--va-color-surface);
    border: 1px solid var(--oi-border);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 45; /* Phase 21a: Zentivue's layers. The panel sits below the phone drawer (40) and dialogs (50-60), never over them. */
}

.atlas-panel.atlas-hidden {
    display: none;
}

.atlas-panel.atlas-expanded {
    width: 480px;
    height: 680px;
}

.atlas-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--oi-ink);
    color: var(--va-color-on-brand);
}

.atlas-header svg {
    width: 20px;
    height: 20px;
    fill: var(--va-color-on-brand);
}

.atlas-header-title {
    font-weight: 600;
    flex: 1;
}

.atlas-beta-pill {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--oi-accent);
}

.atlas-header-btn {
    background: transparent;
    border: none;
    color: var(--va-color-on-brand);
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
}

.atlas-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.atlas-intro {
    margin-bottom: 0.5rem;
}

.atlas-greeting {
    margin: 0 0 0.5rem;
    font-size: 14px;
}

.atlas-disclaimer {
    font-size: 11px;
    color: var(--va-color-text-muted);
    display: flex;
    gap: 4px;
}

.atlas-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.atlas-chip {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--oi-border);
    background: var(--oi-bg);
    cursor: pointer;
}

.atlas-message {
    max-width: 85%;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.atlas-message-user {
    align-self: flex-end;
    background: var(--oi-accent);
    color: var(--va-color-on-brand);
}

.atlas-message-assistant {
    align-self: flex-start;
    background: var(--oi-bg);
    border: 1px solid var(--oi-border);
}

.atlas-typing {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 0.5rem 0.75rem;
}

.atlas-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--va-color-border-strong);
    animation: atlas-typing-bounce 1s infinite ease-in-out;
}

.atlas-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.atlas-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes atlas-typing-bounce {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

.atlas-input-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--oi-border);
}

.atlas-input {
    flex: 1;
    resize: none;
    border: 1px solid var(--oi-border);
    border-radius: 8px;
    padding: 0.5rem;
    font-family: inherit;
    font-size: 13px;
    max-height: 100px;
}

.atlas-send-btn {
    background: var(--oi-accent);
    border: none;
    color: var(--va-color-on-brand);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.atlas-send-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.atlas-send-btn svg {
    width: 16px;
    height: 16px;
    fill: var(--va-color-on-brand);
}
.oi-pulse-banner { border: 1px solid currentColor; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.oi-pulse-banner ol { margin: 8px 0; padding-left: 20px; }