/* Evidence panel (desktop side panel, tablet overlay, mobile bottom sheet), its reference list and the citation
   hover preview. Tokens only (scripts/ci/check-css-tokens.sh). Behaviour lives in /js/chat-evidence.js. */

.evidence {
    --evidence-w: var(--panel-w);
    --sheet-h: 55dvh;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    color: var(--paper);
    background-color: var(--ink-1);
    font-family: var(--font-ui);
}

.evidence[hidden] {
    display: none;
}

/* >= 1200 px: a grid column that resizes from its left edge. */
@media (min-width: 1200px) {
    .evidence {
        flex: 1 1 auto;
        align-self: stretch;
        width: clamp(20rem, var(--evidence-w), 50vw);
        border-left: var(--focus-w) solid var(--rule);
    }
}

/* 900-1199 px: a right overlay sheet. */
@media (min-width: 900px) and (max-width: 1199.98px) {
    .evidence {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 50;
        width: min(30rem, 90vw);
        box-shadow: var(--e-overlay);
    }

    .evidence:not([hidden]) {
        animation: evidence-in var(--d-slow) var(--ease-out);
    }
}

/* < 900 px: a bottom sheet that snaps to 55% or 92% of the height. */
@media (max-width: 899.98px) {
    .evidence {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 60;
        height: var(--sheet-h);
        max-height: 92dvh;
        padding-bottom: env(safe-area-inset-bottom);
        border-radius: var(--r-2) var(--r-2) 0 0;
        box-shadow: var(--e-overlay);
    }

    .evidence:not([hidden]) {
        animation: evidence-in var(--d-slow) var(--ease-out);
    }
}

@media (prefers-reduced-motion: reduce) {
    .evidence:not([hidden]) {
        animation: none;
    }
}

@keyframes evidence-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.evidence__grip {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -0.125rem;
    z-index: 1;
    width: 0.5rem;
    cursor: col-resize;
    touch-action: none;
}

.evidence__grip:hover,
.evidence__grip:focus-visible {
    background-color: var(--rule-strong);
}

.evidence__grip:focus-visible {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: calc(-1 * var(--focus-w));
}

.evidence__sheet-grip {
    display: none;
}

@media (max-width: 1199.98px) {
    .evidence__grip {
        display: none;
    }

    /* Overlay and bottom sheet: cited lines wrap instead of scrolling sideways; numbers keep their column. */
    .evidence__src {
        overflow-x: visible;
    }

    .evidence__src .src__line {
        grid-template-columns: var(--s-7) minmax(0, 1fr);
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }

    .evidence__src .src__ln {
        align-self: start;
    }

    .evidence__src .src__code {
        min-width: 0;
    }

    .evidence__sym,
    .evidence__reason {
        overflow-wrap: anywhere;
    }
}

@media (max-width: 899.98px) {
    .evidence__sheet-grip {
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: var(--hit);
        padding: 0;
        background: none;
        border: 0;
        border-radius: var(--r-2) var(--r-2) 0 0;
        cursor: grab;
        touch-action: none;
    }

    .evidence__sheet-grip::before {
        content: "";
        width: 2.25rem;
        height: var(--bar-cite);
        background-color: var(--rule-strong);
        border-radius: var(--r-pill);
    }

    .evidence__sheet-grip:focus-visible {
        outline: var(--focus-w) solid var(--accent);
        outline-offset: calc(-1 * var(--focus-w));
    }
}

.evidence__head {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--s-1);
    min-height: var(--topbar-h);
    padding: 0 var(--s-2) 0 var(--s-4);
    border-bottom: var(--focus-w) solid var(--rule);
}

.evidence__title {
    flex: 1;
    margin: 0;
    font: 500 var(--t-xs) / var(--lh-xs) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--paper-lo);
}

.evidence__title:focus {
    outline: none;
}

.evidence__close {
    min-width: var(--hit);
    min-height: var(--hit);
}

.evidence__body {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: var(--s-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--rule-strong) transparent;
}

.evidence__empty {
    margin: var(--s-6) 0;
    text-align: center;
    color: var(--paper-lo);
}

.evidence__file {
    display: grid;
    justify-items: start;
    gap: var(--s-1);
    margin-bottom: var(--s-3);
    font-family: var(--font-mono);
}

.evidence__path {
    margin: 0;
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
    color: var(--paper-hi);
    overflow-wrap: anywhere;
}

.evidence__sym,
.evidence__lines {
    margin: 0;
    font-size: var(--t-xs);
    line-height: var(--lh-xs);
    color: var(--paper-lo);
}

.evidence__reason {
    margin: var(--s-1) 0 0;
    font-family: var(--font-ui);
    font-size: var(--t-sm);
    line-height: var(--lh-sm);
    color: var(--paper);
}

.evidence__status {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    margin-top: var(--s-1);
    padding: 0 var(--s-2);
    font: 500 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper-hi);
    background-color: var(--ink-2);
    border: 1px solid var(--rule-strong);
    border-left: var(--bar-cite) solid var(--paper-faint);
    border-radius: var(--r-1);
}

.evidence__status[data-status="verified"] {
    border-left-color: var(--ok);
}

.evidence__status[data-status="verified"] > span {
    color: var(--ok);
}

.evidence__status[data-status="unverified"] {
    border-left-style: dashed;
    border-left-color: var(--caution);
}

.evidence__status[data-status="unverified"] > span {
    color: var(--caution);
}

.evidence__status[data-status="invalid"] {
    border-left-color: var(--fault);
}

.evidence__status[data-status="invalid"] > span {
    color: var(--fault);
}

.evidence__status[data-status="note"] {
    border-left-style: dotted;
    border-left-color: var(--info);
}

.evidence__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-3) 0 var(--s-4);
    border-bottom: var(--focus-w) solid var(--rule);
}

.evidence__link,
.evidence__button {
    display: inline-flex;
    align-items: center;
    min-height: var(--hit);
    padding: 0 var(--s-3);
    font: 500 var(--t-sm) / var(--lh-sm) var(--font-ui);
    color: var(--paper-hi);
    text-decoration: none;
    background-color: var(--ink-2);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-2);
    cursor: pointer;
}

.evidence__link:hover,
.evidence__button:hover {
    background-color: var(--ink-3);
}

.evidence__link:focus-visible,
.evidence__button:focus-visible,
.evidence__ref:focus-visible,
.evidence__close:focus-visible {
    outline: var(--focus-w) solid var(--accent);
    outline-offset: var(--focus-offset);
}

.evidence__live {
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper-lo);
}

.evidence__src .src__line[data-cited="true"] {
    background-color: var(--accent-wash);
}

.evidence__src .src__line[data-cited="true"]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--bar);
    background-color: var(--accent);
}

/* Same pair as .src__line.is-hl: paper-lo drops below 4.5:1 on the accent wash. */
.evidence__src .src__line[data-cited="true"] .src__ln {
    color: var(--paper);
}

.evidence__skeleton {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-2) 0;
}

.evidence__skeleton-line {
    display: block;
    height: var(--s-3);
    background-color: var(--ink-3);
    border-radius: var(--r-1);
}

.evidence__skeleton-line:nth-child(2n) {
    width: 82%;
}

.evidence__skeleton-line:nth-child(3n) {
    width: 64%;
}

.evidence__error {
    display: grid;
    justify-items: start;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    color: var(--fault);
    background-color: var(--ink-2);
    border: 1px solid var(--rule);
    border-left: var(--bar-cite) solid var(--fault);
    border-radius: var(--r-1);
}

.evidence__error p {
    margin: 0;
}

.evidence__refs {
    padding-top: var(--s-4);
}

.evidence__refs-title {
    margin: 0 0 var(--s-2);
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--paper-lo);
}

.evidence__ref-list {
    display: grid;
    gap: var(--s-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.evidence__ref {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    min-height: var(--hit);
    padding: 0 var(--s-2);
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper);
    text-align: left;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--r-2);
    cursor: pointer;
}

.evidence__ref:hover {
    background-color: var(--ink-2);
    border-color: var(--rule);
}

.evidence__ref[aria-current="true"] {
    color: var(--paper-hi);
    background-color: var(--ink-2);
    border-color: var(--accent);
}

.evidence__ref-glyph {
    min-width: var(--s-4);
    font-family: var(--font-ui);
    font-weight: 700;
    text-align: center;
    color: var(--paper-lo);
}

.evidence__ref[data-status="verified"] .evidence__ref-glyph {
    color: var(--ok);
}

.evidence__ref[data-status="unverified"] .evidence__ref-glyph {
    color: var(--caution);
}

.evidence__ref[data-status="invalid"] .evidence__ref-glyph {
    color: var(--fault);
}

.evidence__ref-text {
    overflow-wrap: anywhere;
}

.evidence-preview {
    position: fixed;
    z-index: 70;
    width: min(26rem, 90vw);
    max-height: 16rem;
    padding: var(--s-2) 0;
    overflow: hidden;
    background-color: var(--ink-2);
    border: 1px solid var(--rule-strong);
    border-radius: var(--r-2);
    box-shadow: var(--e-overlay);
}

.evidence-preview[hidden] {
    display: none;
}

.evidence-preview__head {
    padding: 0 var(--s-3) var(--s-2);
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-mono);
    color: var(--paper-lo);
    overflow-wrap: anywhere;
}

.evidence-preview__error {
    margin: 0;
    padding: 0 var(--s-3);
    font: 400 var(--t-xs) / var(--lh-xs) var(--font-ui);
    color: var(--fault);
}

.evidence-preview .src {
    background: none;
    border: 0;
    border-radius: 0;
}

.evidence-preview .src__line[data-cited="true"] {
    background-color: var(--accent-wash);
}