/* ============================================================================
   pllm — AI chat client window.  Rebuilt to the supplied designs
   (content/LLM current.svg = in-chat, content/LLM New chat.svg = new chat).
   Every selector is prefixed .pllm- / #win-pllm per components/DESIGN.md.
   ========================================================================== */

/* Sized to 84% of #win-doc (originally 80%, +5% per a later request):
   width 63vw (84% of its 75vw) here via --w on the element; height mirrors
   #win-doc's own min(80vh, --desk-band) formula scaled by the same 0.84
   factor (distributing 0.84 over the min() is equivalent to scaling the
   result, without needing to read #win-doc's computed height). */
#win-pllm {
  height: min(67.2vh, calc(var(--desk-band) * 0.84));
  min-height: 320px;
  cursor: default;      /* only the title bar drags */
  touch-action: auto;   /* content stays scrollable */
}

.pllm-chrome {
  /* Palette sampled from the designs. Warm lavender ground, pure black rules. */
  --pllm-line: #000000;
  --pllm-ground: #F7E8FB;        /* sidebar + main pane */
  --pllm-periwinkle: #CBC7F7;    /* New Chat, active tab, pinned-active */
  --pllm-pink: #F8DCF7;          /* the "+" button in the composer */
  --pllm-field: #FEFCFF;         /* composer fill */
  --pllm-muted: #8C8894;         /* section labels, placeholder, disclaimer */
  --pllm-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Assistant prose + hero headline. Swap this one line to change the serif. */
  --pllm-serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;

  display: flex;
  flex-direction: column;
  height: 100%;
  /* Containing block for .pllm-toast, which is centred against this box.
     Safe next to the menus below: each of those is absolute inside its own
     `position: relative` wrapper, so none of them retarget to here. */
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--pllm-ground);
  border: 1px solid var(--pllm-line);
  font-family: var(--pllm-sans);
  color: #000;
}

/* --- Title bar: the only drag handle -------------------------------------- */
.pllm-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: var(--pllm-ground);
  border-bottom: 1px solid var(--pllm-line);
  cursor: grab;
  flex: none;
}
.pllm-chrome .pllm-titlebar:active { cursor: grabbing; }
/* Supplied dots (Group 1000004610.svg), 58x16 — drawn, not typeset; scaled
   so each circle lands at ~11px, matching the old CSS-drawn dots' size. */
.pllm-lights { display: block; width: 45px; height: auto; flex: none; }
.pllm-titlebar-name {
  flex: 1; text-align: center; font-size: 12px; font-weight: 600;
  letter-spacing: .01em; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.pllm-titlebar-spacer { width: 45px; flex: none; }

/* --- Body: sidebar + main ------------------------------------------------- */
/* inline-size container so the sidebar responds to the WINDOW's width, not the
   viewport's — the window is dragged and resized independently of the page. */
/* 14-column grid: sidebar spans 4, conversation spans 10 (per the design's
   column overlay). inline-size container so the sidebar responds to the
   WINDOW's width, not the viewport's — the window is dragged and resized
   independently of the page. */
.pllm-body {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  flex: 1; min-height: 0;
  container-type: inline-size;
  container-name: pllmbody;
}
.pllm-side { grid-column: span 4; }
.pllm-main { grid-column: span 10; }
/* With the sidebar hidden the conversation takes all 14 */
@container pllmbody (max-width: 430px) {
  .pllm-main { grid-column: span 14; }
}

/* These elements set an explicit display, which would otherwise beat the
   [hidden] attribute's UA rule and leave both views stacked on top of another. */
.pllm-hero[hidden],
.pllm-thread[hidden],
.pllm-composer-wrap[hidden],
.pllm-code-empty[hidden] { display: none; }

/* ---------- Sidebar ---------- */
.pllm-side {
  border-right: 1px solid var(--pllm-line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.pllm-side-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px; padding: 14px 14px 10px;
  flex: none;
}
/* Supplied wordmark, 109x36 — drawn, not typeset. Wider than the 66x24 mark
   it replaced (2026-08-10) because it now carries the burst glyph as well as
   the lettering, so 62px would have rendered the "pllm" itself ~40% smaller
   than before; 100px keeps the lettering at roughly its old size. The head
   has ~184px of room next to "forever in beta", so this still fits. */
.pllm-wordmark { display: block; width: 100px; height: auto; flex: none; }
.pllm-beta { font-size: 11.5px; color: var(--pllm-muted); white-space: nowrap; }

/* Home / Code segmented control */
.pllm-seg {
  display: flex; margin: 0 14px 10px; flex: none;
  border: 1px solid var(--pllm-line); border-radius: 9px;
  background: var(--pllm-periwinkle); overflow: hidden;
}
.pllm-seg button {
  flex: 1; font: inherit; font-size: 12px; padding: 5px 4px;
  background: none; border: 0; cursor: pointer; color: #000;
}
.pllm-seg button.is-active {
  background: #FCFAFD; border: 1px solid var(--pllm-line);
  border-radius: 7px; margin: 1.5px;
}

/* New Chat — full-width pill on the new-chat screen, compact icon + label
   once a conversation is open. Both states live here; JS toggles .is-compact. */
.pllm-newchat {
  display: flex; align-items: center; gap: 10px;
  margin: 0 14px 14px; padding: 6px 10px; flex: none;
  font: inherit; font-size: 13px; font-weight: 700; color: #000;
  background: var(--pllm-periwinkle);
  border: 1px solid var(--pllm-line); border-radius: 9px;
  cursor: pointer; width: calc(100% - 28px); text-align: left;
}
.pllm-newchat svg { width: 15px; height: 15px; flex: none; }
.pllm-newchat.is-compact {
  background: none; border: 0; padding: 0; gap: 9px;
}
.pllm-newchat.is-compact .pllm-newchat-icon {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  background: var(--pllm-periwinkle);
  border: 1px solid var(--pllm-line); border-radius: 8px;
}
.pllm-newchat:not(.is-compact) .pllm-newchat-icon { display: contents; }

/* Scrollable chat lists. Border is always reserved (transparent by default,
   toggled to real color by JS on scroll) so the line appearing doesn't
   shift anything below it by 1px. */
.pllm-lists {
  flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 10px;
  border-top: 1px solid transparent;
}
.pllm-lists.is-scrolled { border-top-color: var(--pllm-line); }
.pllm-lists::-webkit-scrollbar { width: 8px; }
.pllm-lists::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .22); border-radius: 4px;
}

.pllm-label {
  padding: 6px 14px 6px; font-size: 12.5px; color: var(--pllm-muted);
}

.pllm-list { list-style: none; margin: 0 0 6px; padding: 0; }
.pllm-list button {
  display: block; width: 100%; text-align: left; font: inherit; font-size: 12.5px;
  color: #000; background: none; border: 0; cursor: pointer;
  padding: 9px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pllm-list button:hover { background: rgba(0, 0, 0, .045); }

.pllm-list.pllm-pinned button.is-active,
.pllm-list.pllm-recents button.is-active {
  background: var(--pllm-periwinkle);
  border: 1px solid var(--pllm-line); border-radius: 8px;
  width: calc(100% - 28px); margin: 0 14px; padding: 7px 10px;
}

/* ---------- Main pane ---------- */
.pllm-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* Conversation thread (in-chat state) */
.pllm-thread {
  flex: 1; overflow-y: auto; min-height: 0;
  padding: 20px 26px 4px;
}
/* Q/A content sits in the middle 70% (15% padding each side); the thread
   composer is a touch wider at ~73% (13.5% each side) — both percentage-
   based, not the old fixed-760px measure, so they scale with the window
   instead of capping out. Padding-based so it never touches child margins —
   .pllm-q relies on margin-left:auto to sit right, which a centering rule
   would override. The hero's own composer keeps its own width rule below. */
.pllm-thread { padding-inline: 15%; }
.pllm-composer-wrap { padding-inline: 13.5%; }
.pllm-hero-title { max-width: 760px; }
.pllm-thread::-webkit-scrollbar { width: 9px; }
.pllm-thread::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .22); border-radius: 5px;
}

.pllm-q {
  max-width: 78%; margin: 0 0 22px auto; width: fit-content;
  padding: 8px 15px; font-size: 13.5px; line-height: 1.45;
  background: #FDFBFE; border: 1px solid var(--pllm-line); border-radius: 9px;
}

.pllm-a {
  font-family: var(--pllm-serif);
  font-size: 17px; line-height: 1.5; margin-bottom: 6px;
  /* Read back by pllm.js (clampMetrics) so the max-height below and the
     measurement that decides whether to apply it share one number. */
  --pllm-clamp-lines: 20;
}
.pllm-a p { margin: 0 0 14px; }
.pllm-a ul { margin: 0 0 14px; padding-left: 20px; }
.pllm-a li { margin-bottom: 5px; }

/* Long-answer clamp. Applied PER ANSWER by pllm.js, which measures each one
   and only clamps it — and only then adds a "Read more" — when it genuinely
   runs past --pllm-clamp-lines lines. 1.5em is one line at this element's own
   line-height, so the height tracks font-size instead of a hardcoded px
   guess. Then a fade to the pane's background instead of a hard cut (at least
   3 lines' worth, 3 * 1.5em, so the fade itself reads as a real transition
   and not a near-hairline gradient), and a sans-serif "Read more" so it
   doesn't read as more answer prose. */
.pllm-a-clamped {
  max-height: calc(var(--pllm-clamp-lines) * 1.5em);
  overflow: hidden; position: relative;
}
.pllm-a-clamped::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6em; /* 4 lines, past the "at least 3" floor */
  background: linear-gradient(to bottom, transparent, var(--pllm-ground));
  pointer-events: none;
}
/* Same text treatment as the sidebar's "Pinned" / "recent chats" labels —
   sans-serif, muted, same size — not answer prose. Left-aligned: button's
   own UA style centers text by default. Sits clear of the fade above it
   (generous top padding, no more pulling it up into the gradient) and
   lower overall, matching the actions row below it. */
.pllm-readmore {
  display: block; text-align: left; font-family: var(--pllm-sans);
  font-size: 12.5px; font-weight: 400; color: var(--pllm-muted);
  background: none; border: 0; padding: 18px 14px 6px; cursor: pointer;
  margin: 4px 0 24px; position: relative; z-index: 1;
}
.pllm-readmore:hover { text-decoration: underline; }

/* Two-column tables recovered from the PDF (e.g. "Risk / What it looks like") */
.pllm-dl {
  display: grid; grid-template-columns: minmax(110px, 1fr) 2.2fr;
  gap: 0; margin: 0 0 16px;
  border: 1px solid var(--pllm-line); border-radius: 8px; overflow: hidden;
  font-size: 14px;
}
.pllm-dl dt, .pllm-dl dd {
  margin: 0; padding: 8px 12px; border-top: 1px solid var(--pllm-line);
}
.pllm-dl dt { font-weight: 600; border-right: 1px solid var(--pllm-line); }
/* first row is the header pair */
.pllm-dl dt:first-of-type, .pllm-dl dt:first-of-type + dd {
  border-top: 0; background: rgba(0, 0, 0, .05); font-weight: 600;
}

/* Copy / read aloud / vote */
.pllm-actions { display: flex; gap: 16px; margin: 10px 0 26px; }
.pllm-actions button {
  position: relative; /* anchors .pllm-copied-bubble */
  background: none; border: 0; padding: 0; cursor: pointer; color: #000;
  display: grid; place-items: center;
  opacity: .4; transition: opacity .1s ease;
}
/* The supplied icons share a 16-unit height but differ in width (12–15 units),
   so fix the height and let width follow — forcing both would distort them. */
.pllm-actions svg { height: 17px; width: auto; }
.pllm-actions svg path { stroke-width: 1; transition: stroke-width .1s ease; }
/* "In use" = hovered, a toggled vote, or the read-aloud button while it's
   actively reading/paused (.is-reading, set in pllm.js) — full opacity and a
   heavier stroke instead of the idle 40%/1px. */
.pllm-actions button:hover,
.pllm-actions button.is-on,
.pllm-actions button.is-reading { opacity: 1; }
.pllm-actions button:hover svg path,
.pllm-actions button.is-on svg path,
.pllm-actions button.is-reading svg path { stroke-width: 1.3; }
.pllm-actions button.is-on { color: #5B4BD6; }

/* "Copied to clipboard" bubble, anchored above the copy button */
.pllm-copied-bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  background: #000; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
  padding: 5px 9px; border-radius: 6px; pointer-events: none;
  opacity: 0; transition: opacity .15s ease;
}
.pllm-copied-bubble::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: #000;
}
.pllm-copied-bubble.is-shown { opacity: 1; }

/* New-chat hero */
.pllm-hero {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 16px 26px 0; min-height: 0; text-align: center;
}
.pllm-wave { width: 92px; height: 92px; margin-bottom: 18px; flex: none; }
.pllm-hero-title {
  font-family: var(--pllm-serif); font-weight: 400;
  font-size: 27px; line-height: 1.22; margin-bottom: 22px;
}

/* Code tab — static empty state, same centering as the hero */
.pllm-code-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 16px 26px 0; min-height: 0; text-align: center;
}
.pllm-code-siren { width: 66px; height: auto; margin-bottom: 20px; flex: none; }
.pllm-code-empty-title {
  font-family: var(--pllm-serif); font-weight: 400;
  font-size: 20px; line-height: 1.35; max-width: 380px;
  margin: 0 0 10px;
}
.pllm-code-empty-sub { font-size: 12px; color: var(--pllm-muted); margin: 0; }

/* ---------- Composer ---------- */
/* padding-block only — padding-inline (13.5%, set above) must survive this. */
.pllm-composer-wrap { flex: none; padding-block: 0 10px; }
.pllm-hero .pllm-composer-wrap { width: 100%; max-width: 640px; padding: 0; }

.pllm-composer {
  position: relative;
  background: var(--pllm-field);
  border: 1px solid var(--pllm-line);
  border-radius: 13px;
  padding: 16px 14px 13px; /* vertical padding +30% (was 12px/10px) for a taller box */
}
.pllm-composer textarea {
  display: block; width: 100%; border: 0; outline: 0; resize: none;
  background: none; font: inherit; font-size: 13.5px; line-height: 1.45;
  color: #000; max-height: 96px; padding-right: 44px;
}
.pllm-composer textarea::placeholder { color: var(--pllm-muted); }

.pllm-send {
  position: absolute; top: 11px; right: 12px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid #B9B4C2; color: #B9B4C2;
}
.pllm-send svg { width: 15px; height: 15px; }
.pllm-composer.is-ready .pllm-send { border-color: #000; color: #000; }

.pllm-composer-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px; margin-top: 10px;
}
.pllm-plus {
  display: grid; place-items: center; width: 28px; height: 28px; flex: none;
  background: var(--pllm-pink); border: 1px solid var(--pllm-line);
  border-radius: 8px; cursor: pointer; color: #000;
}
.pllm-plus svg { width: 14px; height: 14px; }
.pllm-model { font-size: 11.5px; white-space: nowrap; }
.pllm-model b { font-weight: 700; }
.pllm-model span { color: var(--pllm-muted); margin-left: 7px; }

.pllm-disclaimer {
  flex: none; text-align: center; font-size: 11px;
  color: var(--pllm-muted); padding: 0 26px 12px;
}

/* ---------- "+" menu ---------- */
/* The menu is anchored to the BOTTOM (it opens upward from the "+"). If the
   submenu were a sibling in the same flow, opening a taller one would grow the
   container and shove the root panel upward — the "jumping to the top" bug.
   The root panel alone defines the menu box; submenus are taken out of flow and
   pinned to its bottom-left — matching the root panel's own bottom-anchored,
   grows-upward direction — so the root panel never moves. */
.pllm-menu {
  position: absolute; bottom: calc(100% + 8px); left: 0;
  display: none; z-index: 5;
}
.pllm-menu.is-open { display: block; }
.pllm-menu-subs { position: absolute; left: calc(100% + 8px); bottom: 0; }

.pllm-menu-panel {
  background: var(--pllm-pink);
  border: 1px solid var(--pllm-line);
  border-radius: 10px;
  padding: 5px;
  min-width: 172px;
}
.pllm-menu-panel button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; font: inherit; font-size: 12.5px; color: #000;
  background: none; border: 0; border-radius: 6px;
  padding: 7px 9px; cursor: pointer; text-align: left; white-space: nowrap;
}
.pllm-menu-panel button:hover { background: rgba(0, 0, 0, .06); }
.pllm-menu-panel button.is-open {
  background: var(--pllm-periwinkle);
  border: 1px solid var(--pllm-line); padding: 6px 8px;
}
.pllm-menu-chev { width: 11px; height: 11px; flex: none; }

/* Submenu */
.pllm-sub { display: none; min-width: 178px; }
.pllm-sub.is-open { display: block; }
.pllm-sub-head {
  padding: 6px 9px 8px; border-bottom: 1px solid var(--pllm-line); margin-bottom: 5px;
}
.pllm-sub-head b { display: block; font-size: 12.5px; color: var(--pllm-muted); font-weight: 500; }
.pllm-sub-note {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--pllm-muted); margin-top: 4px;
}
.pllm-sub-note svg { width: 12px; height: 12px; flex: none; }
.pllm-sub-group { padding: 3px 9px 5px; font-size: 12.5px; }
.pllm-check { width: 12px; height: 12px; flex: none; }
/* Skills read as active links in the design */
.pllm-sub[data-kind="check-underline"] button span:first-child {
  text-decoration: underline; text-decoration-color: #2C6BE8;
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}

/* Below this WINDOW width the sidebar would crush the conversation column.
   Keyed to the window, not the viewport (see .pllm-body container above). */
@container pllmbody (max-width: 430px) {
  .pllm-side { display: none; }
}

/* ============================================================================
   Mobile (<=767px). Appended at the end so it wins by source order over the
   @container rule above at equal specificity. Desktop (>=768px) is untouched.
   ========================================================================== */
@media (max-width: 767px) {
  #win-pllm { min-height: 0; }

  /* Edge-to-edge app, not a floating card. */
  .pllm-chrome { border-radius: 0; }

  /* Re-enable the sidebar (hidden by the @container rule above) — it becomes
     the off-canvas drawer panel wired up in pllm.js. Matches the desktop
     display value (flex column). On desktop it has no background of its own
     (it sits in-flow over .pllm-chrome's fill); pulled out as an overlay it
     needs a solid one or the thread shows through. */
  .pllm-side {
    display: flex;
    background: var(--pllm-ground);
  }
  .pllm-body { position: relative; }

  /* Desktop uses percentage padding (15% / 13.5%) that scales fine on wide
     windows but overflows badly at 375px — swap to fixed px. */
  .pllm-thread { padding-inline: 16px; }
  .pllm-composer-wrap { padding-inline: 12px; }

  /* Composer/disclaimer and the drawer's chat list bottom out above the
     dock's peeking band. */
  .pllm-main { padding-bottom: var(--m-bottom-inset); }
  .pllm-lists { padding-bottom: var(--m-bottom-inset); }

  /* Narrow the oversized first column of the recovered PDF tables so they
     don't force horizontal scroll at 375px, and trim the font a touch. */
  .pllm-dl {
    grid-template-columns: minmax(84px, 1fr) 1.8fr;
    font-size: 13px;
  }

  /* "+" menu: the submenu normally opens to the RIGHT of the root panel
     (left: calc(100% + 8px)), which flies off the right edge at 375px.
     Re-anchor it to open ABOVE the root panel instead, and cap its height
     so a long list (e.g. many skills) scrolls instead of overflowing. */
  .pllm-menu-subs {
    left: 0;
    bottom: calc(100% + 6px);
  }
  .pllm-sub {
    max-height: 40vh;
    overflow-y: auto;
  }
  /* Keep the root panel itself from overflowing the viewport horizontally. */
  .pllm-menu-panel {
    max-width: calc(100vw - 32px);
  }
}

/* ============================================================================
   Send-attempt notice (pllm.js's showToast)
   Nothing is ever really sent, so a send attempt gets this card instead: it
   fades in over the pane, holds ~1.5s and fades out on its own. Geometry
   follows the supplied mock (475x387 card, ~41px header strip, centred pink
   warning triangle, serif title, two-line sans description), scaled down to
   sit inside the window rather than fill it.
   ========================================================================== */
.pllm-toast {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 30;
  width: min(320px, 84%);
  box-sizing: border-box;
  background: #ECECEC;
  border: 1px solid var(--pllm-line);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  text-align: center;
  /* Inert while hidden AND while shown: the card is a notice, not a control,
     and must never swallow a tap meant for the composer underneath. */
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
}
.pllm-toast.is-shown {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.pllm-toast-head {
  padding: 10px 12px;
  border-bottom: 1px solid var(--pllm-line);
  font-family: var(--pllm-sans);
  font-size: 12.5px;
  font-weight: 500;
  color: #000;
}

.pllm-toast-body { padding: 22px 26px 26px; }

.pllm-toast-icon {
  display: block;
  width: 46px;
  height: auto;
  margin: 0 auto 18px;
}

.pllm-toast-title {
  margin: 0 0 10px;
  font-family: var(--pllm-serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  color: #000;
}

.pllm-toast-sub {
  margin: 0;
  font-family: var(--pllm-sans);
  font-size: 13px;
  line-height: 1.5;
  color: #000;
}

@media (prefers-reduced-motion: reduce) {
  .pllm-toast { transition: none; }
}