/* Hallmark · macrostructure: incumbent chat overlay · genre: archive utility · tone: compact and unobtrusive
 * theme: studied-DNA (source: Tony Chase Archive) · anchor: archive blue
 * states: default · hover · focus · active · disabled · loading · error · success
 * pre-emit critique: P5 H5 E5 S5 R5 V4 · contrast: pass (40–41) · icons: pass (30)
 * tokens: pass (48) · responsive/mobile: pass (34, 49–57)
 */

:root {
    --chat-follow-surface: var(--color-panel, oklch(98.5% 0.004 255));
    --chat-follow-surface-hover: var(--color-paper-2, oklch(94% 0.018 255));
    --chat-follow-ink: var(--color-ink, oklch(20% 0.014 255));
    --chat-follow-rule: var(--color-rule-strong, oklch(58% 0.04 255));
    --chat-follow-accent: var(--color-accent, oklch(56% 0.2 258));
    --chat-follow-accent-ink: var(--color-accent-ink, oklch(99% 0.003 255));
    --chat-follow-focus: var(--color-focus, oklch(55% 0.21 258));
    --chat-follow-danger: var(--color-danger, oklch(54% 0.19 27));
    --chat-follow-success: var(--color-success, oklch(48% 0.13 148));
    --chat-follow-shadow: var(--color-shadow, oklch(16% 0.018 255 / 0.24));
    --chat-follow-radius: var(--radius-round, 999px);
    --chat-follow-ease: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
    --chat-follow-duration: var(--dur-short, 220ms);
    --chat-follow-z: var(--z-raised, 10);
}

body.dark-mode,
html[data-theme="dark"] {
    --chat-follow-surface: var(--color-panel, oklch(27% 0.012 255));
    --chat-follow-surface-hover: var(--color-paper-3, oklch(34% 0.015 255));
    --chat-follow-ink: var(--color-ink, oklch(95% 0.006 255));
    --chat-follow-rule: var(--color-rule-strong, oklch(59% 0.014 255));
    --chat-follow-accent: var(--color-accent, oklch(70% 0.17 255));
    --chat-follow-accent-ink: var(--color-accent-ink, oklch(17% 0.018 255));
    --chat-follow-focus: var(--color-focus, oklch(78% 0.16 255));
    --chat-follow-danger: var(--color-danger, oklch(68% 0.17 27));
    --chat-follow-success: var(--color-success, oklch(72% 0.12 148));
    --chat-follow-shadow: var(--color-shadow, oklch(8% 0.018 255 / 0.34));
}

.chat-message-stage {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.chat-message-stage > #messages {
    width: 100%;
    min-width: 0;
    min-height: 0;
}

.chat-scroll-resume {
    position: absolute;
    z-index: var(--chat-follow-z);
    right: 0.75rem;
    bottom: 0.75rem;
    display: inline-grid;
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0;
    place-items: center;
    line-height: 0;
    border: 1px solid var(--chat-follow-rule);
    border-radius: var(--chat-follow-radius);
    background: var(--chat-follow-surface);
    color: var(--chat-follow-ink);
    box-shadow: 0 0.4rem 1rem var(--chat-follow-shadow);
    cursor: pointer;
    transition:
        transform 120ms var(--chat-follow-ease),
        background-color var(--chat-follow-duration) var(--chat-follow-ease),
        border-color var(--chat-follow-duration) var(--chat-follow-ease),
        color var(--chat-follow-duration) var(--chat-follow-ease);
}

button.chat-scroll-resume {
    padding: 0;
}

.chat-scroll-resume[hidden] {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .chat-scroll-resume:hover,
    .chat-scroll-resume.is-hover {
        border-color: var(--chat-follow-accent);
        background: var(--chat-follow-surface-hover);
        color: var(--chat-follow-accent);
        transform: translateY(-1px);
    }
}

.chat-scroll-resume:focus-visible,
.chat-scroll-resume.is-focus {
    outline: 3px solid var(--chat-follow-focus);
    outline-offset: 2px;
}

.chat-scroll-resume:active,
.chat-scroll-resume.is-active {
    transform: translateY(1px);
}

.chat-scroll-resume:disabled,
.chat-scroll-resume.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.chat-scroll-resume[data-state="loading"] {
    cursor: wait;
    opacity: 0.72;
}

.chat-scroll-resume[data-state="loading"] .chat-scroll-resume__icon {
    animation: chat-follow-loading 800ms steps(8) infinite;
}

.chat-scroll-resume.is-error,
.chat-scroll-resume[data-state="error"] {
    border-color: var(--chat-follow-danger);
    color: var(--chat-follow-danger);
}

.chat-scroll-resume.is-success,
.chat-scroll-resume[data-state="success"] {
    border-color: var(--chat-follow-success);
    color: var(--chat-follow-success);
}

.chat-scroll-resume__icon {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    margin: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: translateY(-1px);
    transform-origin: center;
    pointer-events: none;
}

.chat-scroll-resume__count {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    display: grid;
    min-width: 1.25rem;
    height: 1.25rem;
    padding-inline: 0.3rem;
    place-items: center;
    border: 2px solid var(--chat-follow-surface);
    border-radius: var(--chat-follow-radius);
    background: var(--chat-follow-accent);
    color: var(--chat-follow-accent-ink);
    font-size: 0.625rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.chat-scroll-resume__count[hidden] {
    display: none;
}

.chat-scroll-status,
.chat-scroll-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@keyframes chat-follow-loading {
    to {
        transform: translateY(-1px) rotate(1turn);
    }
}

@media (pointer: coarse) {
    .chat-scroll-resume {
        width: 3rem;
        min-width: 3rem;
        height: 3rem;
        min-height: 3rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-scroll-resume {
        transition-duration: 0.01ms;
    }

    .chat-scroll-resume[data-state="loading"] .chat-scroll-resume__icon {
        animation: none;
    }
}