@layer base {
/*
 * source-citations.css — base styles for the chat-bubble citation chip
 * (.gf-citation) and the right-side slide-out container (.gf-source-*).
 * Owned by citations-anchor.js since the legacy source-citations.js was
 * removed; the file name is kept so the existing import order in
 * index.html and the override file (citations-anchor.css) still resolve.
 */

/* ─── Citation chip in chat bubbles ─── */
.gf-citation {
    display: inline-block;
    background: #fa520f22;
    color: #fa520f;
    border: 1px solid #fa520f66;
    border-radius: 4px;
    padding: 1px 5px;
    margin: 0 1px;
    font-size: 0.78em;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    user-select: text;
    -webkit-user-select: text;
    transition: background 0.1s, border-color 0.1s, transform 0.05s;
    vertical-align: baseline;
    text-decoration: none;
}
.gf-citation:hover {
    background: #fa520f44;
    border-color: #fa520f;
}
.gf-citation:active { transform: translateY(1px); }

/* ─── Right-side slide-out container ─── */
/* Single source of truth for the slide-out width. The panel width AND the
   body padding-right that shrinks the app both read this, so they can never
   drift apart. Narrowed in the combined plan+source state below. */
body { --gf-source-w: min(56vw, 720px); }

.gf-source-slideout {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: var(--gf-source-w);
    background: #1f1f1f;
    border-left: 1px solid #1f1f1f;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.4);
    transform: translateX(100%);
    transition: transform 0.22s ease-out, width 0.22s ease-out;
    z-index: var(--z-popover);
    display: flex;
    flex-direction: column;
    color: #e8e8e8;
    font-family: inherit;
}
.gf-source-slideout.open { transform: translateX(0); }

/* When the slide-out is open, shrink the main content so the PDF panel
   sits beside the chat instead of overlapping it. The slide-out itself
   stays position:fixed (its slide animation depends on transform), but
   the chat area's right edge is pulled in by an equal amount. */
body { transition: padding-right 0.22s ease-out; }
body.gf-source-open { padding-right: var(--gf-source-w); }

/* When the floor-plan pane is open alongside the standard, the screen is a
   three-way split: chat 35vw | plan 32.5vw | standard 32.5vw. This var sets
   the standard pane's own width; guide-x-adapter.css consumes the same var
   to shrink .app and sizes the chat/plan grid columns to match. */
body.gf-source-open.gf-plan-pane-open { --gf-source-w: 32.5vw; }

/* Header */
.gf-source-slideout-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #1a1a1a;
    background: #0d0d0d;
}
.gf-source-slideout-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #e8e8e8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 14px;
}
.gf-source-slideout-close {
    background: transparent;
    border: 1px solid #2a2a2a;
    color: #aaa;
    font-size: 18px;
    line-height: 1;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
    font-family: inherit;
}
.gf-source-slideout-close:hover { background: #1a1a1a; color: #fff; border-color: #444; }

/* Zoom controls (buttons reuse .gf-source-slideout-close for base styling) */
.gf-source-zoom-segment {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-right: 10px;
}
.gf-source-zoom-label {
    font-size: 11px;
    color: #bbb;
    min-width: 42px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    user-select: none;
}
.gf-src-zoom-btn { font-size: 14px; }
.gf-src-zoom-btn[title^="Fit"] { width: auto; padding: 0 8px; font-size: 11px; }

/* Body */
.gf-source-slideout-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 12px;
    background: #050505;
    position: relative;
}

/* Continuous-scroll container — one .gf-source-page-wrap per PDF page,
   stacked vertically. The slide-out body is the scroll container; each
   page is lazy-rendered when it enters the viewport. */
.gf-source-pages-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-bottom: 32px;
}

/* PDF page wrap with positioned text layer over canvas */
.gf-source-page-wrap {
    position: relative;
    margin: 0 auto;
    background: #1a1a1a;            /* placeholder colour while not yet rendered */
}
.gf-source-page-canvas {
    display: block;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
.gf-source-page-label {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    pointer-events: none;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    background: rgba(13, 13, 13, 0.7);
    padding: 2px 8px;
    border-radius: 4px;
    backdrop-filter: blur(2px);
}
.gf-source-text-layer {
    /* Text layer is no longer rendered — highlights are drawn directly
       above the canvas using viewport.transform on getTextContent items.
       Hidden so the empty container can't catch selection or display
       any stray content (the "ghost text" issue). */
    display: none;
}
/* Overlay layer for highlight boxes — sits above the canvas, below the
   text layer, drawn from Range API client rects so the boxes align with
   the actual rendered glyph geometry rather than the slightly-offset
   text-layer span dimensions. One <div> per visible line of the match. */
.gf-source-highlight-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}
.gf-source-highlight-box {
    /* Mimic native browser text-selection look — a flat, semi-transparent
       overlay rectangle with no border or rounded corners, the way the OS
       highlights selected text. Cleaner than a highlighter-style box and
       matches the mental model of "selected text" rather than "marker". */
    position: absolute;
    background: rgba(255, 140, 0, 0.32);
}

/* Text-fallback (no PDF available) */
.gf-source-text-fallback {
    background: #0d0d0d;
    color: #ddd;
    padding: 14px 16px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid #1a1a1a;
}
.gf-source-text-fallback mark.gf-source-highlight {
    background: rgba(255, 230, 0, 0.55);
    color: #111;
    padding: 0 2px;
    border-radius: 2px;
}
/* States */
.gf-source-loading,
.gf-source-error {
    text-align: center;
    color: #888;
    font-size: 13px;
    padding: 40px 20px;
}
.gf-source-error { color: #d88; }

}