/*
 * Citations as the bottom edge of the assistant's bubble (see citations.js).
 *
 * The bubble and its footer share a column (.cite-stack). The bubble loses its
 * bottom corners and the footer carries the same fill and border, so the two
 * read as one shape with a faint divider. Collapsed: one quiet line. "+N" opens
 * the rest.
 */

.cite-stack {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    /* A one-word reply still leaves room to read the source. */
    min-width: min(16rem, 80%);
}

/* The bubble's own max-width is relative to the row; inside the stack it fills it. */
.cite-stack > .msg-assistant,
.cite-stack > [data-transcript-text] {
    max-width: 100% !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.cite-footer {
    /* The bubble sets the width; a long source title truncates instead of widening it. */
    width: 0;
    min-width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none; /* the bubble's bottom border is the divider */
    border-radius: 0 0 1rem 1rem;
    padding: 0.3rem 0.85rem 0.35rem;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.42);
    transition: color 0.2s ease;
}

.cite-footer:hover {
    color: rgba(255, 255, 255, 0.62);
}

.cite-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.cite-row-more {
    padding-left: 1.05rem; /* lines up with the first row's text, past the icon */
    margin-top: 0.15rem;
}

.cite-icon {
    flex: 0 0 auto;
    opacity: 0.7;
}

.cite-main {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
    flex: 1 1 auto;
}

.cite-link {
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

a.cite-link {
    cursor: pointer;
    /* Faint, but there: a source you can click should look like one. */
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.2);
    text-underline-offset: 2px;
}

/* A stored document that would not open (link expired, no access): say so quietly. */
.cite-link-failed {
    text-decoration: line-through;
    opacity: 0.6;
}

a.cite-link:hover {
    color: rgba(1, 196, 198, 0.9);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cite-domain {
    flex: 0 0 auto;
    opacity: 0.7;
    white-space: nowrap;
}

.cite-domain::before {
    content: "·";
    margin-right: 0.4rem;
}

.cite-badge {
    flex: 0 0 auto;
    font-size: 0.625rem;
    letter-spacing: 0.02em;
    opacity: 0.85;
}

.cite-toggle {
    flex: 0 0 auto;
    margin-left: auto;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    color: inherit;
    font: inherit;
    font-size: 0.625rem;
    line-height: 1;
    padding: 0.15rem 0.4rem;
    cursor: pointer;
}

.cite-toggle:hover {
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.75);
}

.cite-toggle:focus-visible {
    outline: 1px solid rgba(1, 164, 166, 0.6);
    outline-offset: 1px;
}

.cite-more[hidden] {
    display: none;
}

/* Video chat captions: same footer, in the caption bubble's teal glass. */
.cite-stack:has(> .video-transcript-bubble) {
    max-width: 88%;
}
.cite-stack > .video-transcript-bubble {
    max-width: 100% !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.cite-stack > .video-transcript-assistant + .cite-footer {
    background: rgba(20, 184, 166, 0.13);
    border-color: rgba(20, 184, 166, 0.26);
    border-radius: 0 0 14px 14px;
    color: rgba(233, 246, 244, 0.5);
}

@media (max-width: 640px) {
    .cite-stack {
        max-width: 92%;
    }
    .cite-domain {
        display: none;
    }
}

@media print {
    .cite-toggle {
        display: none;
    }
    .cite-more[hidden] {
        display: block;
    }
}