/* Chat app, the right-hand artifact drawer and the library slot. */
/* artifact drawer */
/* Transparent click-catcher only, no dim, no blur. The search popup and the
   artifact side-drawer both use this, and the surrounding content must stay
   fully readable (not dimmed/blurred) while they're open. */
.drawer-backdrop { position: fixed; inset: 0; background: transparent; opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 40; }
.drawer-backdrop.show { opacity: 1; pointer-events: auto; }
/* No border-left: the drawer is told apart from what it covers by its own fill, and a
   stroke is allowed on exactly two elements in this app (see chat-base.css). */
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: var(--drawer-w); background: var(--panel); transform: translateX(100%); transition: transform 0.26s var(--ease); z-index: 50; display: flex; flex-direction: column; }
/* Shadow only while open, a closed drawer is off-screen to the right, but its
   left-bleeding shadow (-14px) still painted a soft grey/white smudge just
   inside the viewport's right edge. Also hide the resize handle when closed
   (it's absolutely positioned at left:-4px and poked a sliver back in-view). */
.drawer.open { transform: translateX(0); box-shadow: -14px 0 44px rgba(10, 10, 10,0.28); }
.drawer:not(.open) .drawer-resizer { display: none; }
body:has(.drawer.open) { padding-right: var(--drawer-w); transition: padding-right 0.26s var(--ease); }
/* Library is a dedicated PAGE in the SAME slot the chat occupies (like Julius's
   own Library tab), the sidebar/rail stays visible on the left, Library fills
   everything to its right. Not a narrow side strip, but not a full-viewport
   takeover either. */
/* ---- a PAGE, not a card ---------------------------------------------------------
   This used to be a floating white card: --panel (#FFFFFF) fill, a 40px --r-xl radius,
   and the shell's inset around it, which made it read as a popup laid over the chat.
   It is now the same surface the CHAT is: `--bg` (#F2F2F2, surface-0), square corners,
   no card edge of any kind. `.chat` gets there with `background: transparent`; this
   panel cannot, because it is `position: fixed` and would let the conversation show
   through underneath -- an opaque fill in the shell's own colour is what occludes the
   chat while still reading as the page rather than as something on top of it.

   The insets stay. They are now invisible (panel fill == shell fill, so there is no
   edge to see), but they keep the Library's content starting on the same vertical line
   the chat's does, and they mean nothing has to change if the shell padding is retuned.

   Re-levelling consequence, handled in chat-overlays.css: everything INSIDE the Library
   moved down one surface level with it. Cards and filter pills were surface-2 (#F2F2F2)
   because they sat on a white panel; on a #F2F2F2 page they would have been invisible,
   so they are surface-1 (white) now. See the notes on .library-card / .lib-pill. */
.drawer#libraryPanel {
  top: var(--shell-pad); bottom: var(--shell-pad); right: var(--shell-pad); height: auto;
  /* left = shell's own left padding (--sp-4) + sidebar width + the inter-card
     gap (--sp-4). The earlier value omitted the first --sp-4, so the panel
     started flush against the sidebar's right edge with no gap. */
  left: calc(var(--shell-pad) + var(--sidebar-w) + var(--shell-gap)); width: auto;
  border-left: none; border-radius: 0; background: var(--bg);
  transition: transform 0.26s var(--ease), left 0.24s var(--ease);
}
body.sidebar-collapsed .drawer#libraryPanel { left: calc(var(--shell-pad) + var(--rail-w) + var(--shell-gap)); }
/* The base .drawer rule's closed transform (translateX(100%)) only shifts a
   box by its OWN width, correct for the artifact drawer (flush at right:0),
   but this panel is inset var(--sp-4) from the true edge, so 100% falls
   exactly var(--sp-4) short of clearing the viewport. That's the stray white
   sliver that stayed visible on every page except Library itself (where the
   panel is, correctly, exactly where this transform puts it). */
.drawer#libraryPanel:not(.open) { transform: translateX(calc(100% + var(--shell-pad))); }
body:has(#libraryPanel.open) { padding-right: 0; }
.drawer-resizer { position: absolute; top: 0; left: -4px; width: 9px; height: 100%; cursor: ew-resize; z-index: 60; touch-action: none; }
.drawer-resizer::before { content: ""; position: absolute; top: 0; left: 4px; width: 1px; height: 100%; background: transparent; transition: background 0.15s, box-shadow 0.15s; }
.drawer-resizer:hover::before, .drawer-resizer.dragging::before { background: var(--ring); box-shadow: 0 0 0 1px var(--ring); }
body.drawer-resizing, body.drawer-resizing .drawer { transition: none !important; }
body.drawer-resizing { cursor: ew-resize; user-select: none; }
/* Separated from the body below it by its padding, not a hairline. */
/* Top padding equals the horizontal inset, so the title clears the panel's rounded
   corner by the same amount on both axes. It was a flat 15px, which put the title 16px
   below the top of a 40px corner arc -- visually crowding it. The bottom stays tighter
   (15px) because the head's lower edge is an interior boundary, not a curved panel edge.
   `align-items: center` keeps the close button centred against the title whatever the
   padding is, so the two can never drift apart vertically. */
.drawer-head { display: flex; align-items: center; gap: 10px; padding: var(--drawer-pad-x) var(--drawer-pad-x) var(--sp-4); }
/* Panel titles: "Library", "Artifact", "Settings". font-weight 500 (Satoshi Medium).
   The app uses TWO weights only -- 400 regular and 500 medium, no bold anywhere -- so a
   title is distinguished from the content under it by SIZE (24px for the dialog titles,
   see below), not by weight. */
.drawer-title { flex: 1; font-family: var(--font-display); font-weight: 500; font-size: 15.5px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* line-height must leave room for descenders. At `line-height: 1` the line box is
   exactly the font size (24px) while Satoshi actually needs ~28px to draw "Settings"
   with its "g" intact, and .drawer-title's `overflow: hidden` (there for the ellipsis
   on long artifact titles) cropped the overhang instead of letting it spill. 1.3 also
   gives the heading a line box taller than the 30px close button beside it, so
   .drawer-head's `align-items: center` now centres the two against each other
   properly rather than against a box shorter than the text it holds. */
/* font-weight is NOT restated here. It used to repeat `500`, which -- being an ID
   selector -- silently beat .drawer-title's 700 and left "Settings" as the one panel
   title still at the old weight while Library and Artifact moved. Inheriting from
   .drawer-title means the three titles can only ever change together. */
/* The two DIALOG titles -- "Settings" and "Library" -- share one rule so they cannot
   drift. Both name a whole panel, so they get the larger 24px heading size rather
   than .drawer-title's 15.5px default. That default stays for the ARTIFACT drawer,
   whose title is a variable-length artifact name that has to ellipsize in a strip
   beside the close button, not a fixed one-word panel name.
   Weight is inherited from .drawer-title (700) on purpose -- see the note above it. */
#settingsTitle, #libraryPanel .drawer-title { font-size: 24px; letter-spacing: 0; line-height: 1.3; }
/* The settings modal is a dialog, not the artifact drawer: its title is a 24px
   heading rather than a 15.5px label, so the shared 15px strip padding reads tight
   above and below it. */
.settings-box .drawer-head { padding: 18px 22px; }
.drawer-head-btns { display: flex; align-items: center; gap: 8px; flex: none; }
.drawer-dl svg { width: 17px; height: 17px; }
/* padding-top is deliberately SMALL, not the full --drawer-pad-x. The header above
   already contributes its own bottom padding, so a uniform inset stacked the two and put
   61px between the "Library" heading and the search bar under it. Left/right stay at the
   full inset -- that is what keeps the body's content aligned with the heading -- and the
   bottom keeps it too, since there is no neighbour below to share the gap with. */
.drawer-body { flex: 1; overflow: auto; padding: var(--sp-2) var(--drawer-pad-x) var(--drawer-pad-x); display: flex; flex-direction: column; }
.chart-box { position: relative; width: 100%; height: 340px; }
.chart-box canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.drawer-body .chart-box.drawer-chart { height: min(72dvh, 560px); }
/* Chart caption under the drawer chart: what it shows / the key takeaway. */
.chart-desc { color: var(--muted); font-size: 13.5px; line-height: 1.45; margin-top: 14px; }
.report-frame { display: block; width: 100%; border-radius: var(--r); background: var(--panel); }
.report-frame.drawer-report { flex: 1; min-height: 0; border: 0; border-radius: 0; }
.drawer-loading { color: var(--muted); font-size: 13px; padding: 8px 2px; }
.artifact-table { border-collapse: collapse; width: 100%; font-size: 14px; }
/* Cells had a full 1px box each, which is a stroke, so it went. A data table still
   needs its rows told apart, so the separation is now a single horizontal rule per
   row: a separator inside one surface, which is the case the stroke rule keeps (see
   chat-base.css). Vertical lines are not reinstated, the column gutters do that job. */
.artifact-table th, .artifact-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.artifact-table tr:last-child td { border-bottom: none; }
.artifact-table th { background: rgba(133,133,133,0.14); font-weight: 500; white-space: nowrap; }
.artifact-table tbody tr:nth-child(even) td { background: rgba(133,133,133,0.06); }