/* ============================================================
   Life Base — the corner, and the light it casts on the page

   Two files' worth of styling, kept as one: the panel in the corner
   (corner.js) and the reference light it draws over the page
   (corner-view.js). They are one feature and they share a palette, so
   they share a stylesheet.

   ★ EVERY NAME IN HERE IS PREFIXED `lbc-`, INCLUDING THE VARIABLES.

   The app already has an `--ink` and an `--ink-soft` that mean
   something slightly different. Dropping this file's palette on
   `:root` under the same names would have quietly restyled the whole
   app the moment a regular page loaded — the kind of change nobody
   traces back to a chat panel. So the corner brings its own, under its
   own names, and touches nothing it does not own.

   Nothing in here styles a page element. The light is drawn in its own
   fixed layer above the canvas; the page underneath is not modified,
   not even by a class.
   ============================================================ */

:root {
  --lbc-paper:       #ffffff;
  --lbc-paper-warm:  #fcfbf9;
  --lbc-ink:         #1c1a17;
  --lbc-ink-soft:    #4a4642;
  --lbc-ink-faint:   #8a8580;
  --lbc-hair:        #e8e4de;
  --lbc-hair-strong: #d8d2ca;
  /* ★ THE ACCENT IS THE APP'S OWN INK, NOT A HUE.
     It used to be a teal (#2f6f6a) — the one spot of colour in a UI
     that is otherwise neutral greys and near-black (the chat page's
     own send button is #0d0d0d). A coloured accent read as a different
     product sitting in the corner. Everything that used the teal now
     uses the ink, so the panel belongs to the same app as the page
     beside it. */
  --lbc-accent:      #1c1a17;
  --lbc-serif: Charter, "Bitstream Charter", Cambria, Georgia, serif;
  --lbc-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;

  --lbc-scrim:  rgba(24, 21, 18, 0.5);
  /* ★ THE PANEL FLOATS. THE PAGE IS NEVER NARROWED.

     It used to take 420px off `#canvas` so the page and the panel could
     never overlap. That is right for a full-window document and wrong
     here: this app already spends two columns of the window on the
     section list and the page list, so the writing column was being
     squeezed a third time by a panel somebody opened for a minute.

     A page you are reading must not reflow because you asked a
     question. So the panel sits ON TOP, and it is small enough to
     leave most of the writing visible underneath — 30% narrower and
     about 40% shorter than the version that had the page to itself. */
  --lbc-panelw: 332px;   /* 277 + 20% */
  --lbc-panelh: 67vh;    /* 56vh + 20% */
  --lbc-panelgap: 14px;
}

/* ============================================================
   The light on the page (corner-view.js).

   Every view is light, colour, a number, a small mark or a bracket.
   None of them puts a sentence on the page: the page is the person's
   writing, and the assistant's words belong in the chat.

   The whole layer is sized to the CANVAS, not the window, so a view can
   never sit on the conversation. It is `pointer-events: none`, so you
   can keep typing straight through one.
   ============================================================ */

#lbc-lens {
  position: fixed; z-index: 90;
  pointer-events: none;
}
#lbc-lens .lbc-svg { position: fixed; overflow: visible; }
#lbc-lens .lbc-html { position: fixed; }

/* ---------------- the dim ---------------- */

.lbc-scrim {
  fill: var(--lbc-scrim);
  opacity: 0;
  transition: opacity .3s cubic-bezier(.3,.8,.3,1);
}
#lbc-lens.lit[data-scrim="on"] .lbc-scrim { opacity: 1; }
#lbc-lens.lit[data-scrim="peek"] .lbc-scrim { opacity: 1; fill: rgba(24,21,18,.26); }

.lbc-hole {
  fill: #000;
  transform-box: fill-box; transform-origin: center;
  transform: scale(1.04); opacity: 0;
  transition: transform .34s cubic-bezier(.2,.9,.25,1), opacity .24s ease;
}
#lbc-lens.lit .lbc-hole { transform: scale(1); opacity: 1; }
.lbc-hole.hard { transition: none; transform: none; opacity: 1; }

/* ---------------- the bracket (group) ---------------- */

.lbc-bracket {
  fill: none; stroke-width: 2; stroke-linecap: round;
  opacity: 0; stroke-dasharray: 1000; stroke-dashoffset: 1000;
  transition: opacity .3s ease, stroke-dashoffset .8s cubic-bezier(.3,.8,.3,1);
}
#lbc-lens.lit .lbc-bracket { opacity: .85; stroke-dashoffset: 0; }
.lbc-bdot { opacity: 0; transition: opacity .3s ease .2s; }
#lbc-lens.lit .lbc-bdot { opacity: .9; }
.lbc-glabel {
  position: absolute;
  font-family: var(--lbc-sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .03em; text-transform: lowercase; white-space: nowrap;
  opacity: 0; transition: opacity .3s ease .25s;
}
#lbc-lens.lit .lbc-glabel { opacity: .95; }

/* ---------------- tint ---------------- */

.lbc-tintfill, .lbc-tintbar { opacity: 0; transition: opacity .4s ease; }
#lbc-lens.lit .lbc-tintfill, #lbc-lens.lit .lbc-tintbar { opacity: 1; }

.lbc-legend {
  position: absolute; left: 14px; bottom: 16px;
  background: rgba(255,253,248,.97);
  border: 1px solid rgba(58,49,40,.1);
  border-radius: 11px; padding: 9px 12px;
  box-shadow: 0 6px 22px rgba(24,21,18,.12);
  font-family: var(--lbc-sans); font-size: 12px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s ease .1s, transform .3s ease .1s;
}
#lbc-lens.lit .lbc-legend { opacity: 1; transform: none; }
.lbc-legrow { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: var(--lbc-ink-soft); }
.lbc-legdot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.lbc-legcount { color: var(--lbc-ink-faint); font-size: 11px; margin-left: auto; padding-left: 10px; }

/* ---------------- margin marks ---------------- */

.lbc-mark {
  position: absolute; pointer-events: auto;
  width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  font-family: var(--lbc-sans); font-size: 12.5px; font-weight: 700; line-height: 1;
  background: #fff; cursor: default;
  box-shadow: 0 2px 8px rgba(24,21,18,.13);
  transform: translateX(-5px) scale(.7); opacity: 0;
  transition: transform .32s cubic-bezier(.2,1.4,.4,1), opacity .22s ease, box-shadow .16s ease;
}
#lbc-lens.lit .lbc-mark { transform: none; opacity: 1; }
.lbc-mark:hover { box-shadow: 0 4px 14px rgba(24,21,18,.24); z-index: 4; }
.lbc-mark[data-kind="question"]      { color: #2f6096; background: #eaf1fa; box-shadow: 0 2px 8px rgba(24,21,18,.12), inset 0 0 0 1.2px #c6dbf2; }
.lbc-mark[data-kind="contradiction"] { color: #a8405c; background: #fceef1; box-shadow: 0 2px 8px rgba(24,21,18,.12), inset 0 0 0 1.2px #f2ccd6; }
.lbc-mark[data-kind="stale"]         { color: #6f685e; background: #f3f1ed; box-shadow: 0 2px 8px rgba(24,21,18,.12), inset 0 0 0 1.2px #ddd8d0; }
.lbc-mark[data-kind="unfinished"]    { color: #9c6d1c; background: #fdf4e2; box-shadow: 0 2px 8px rgba(24,21,18,.12), inset 0 0 0 1.2px #f0dfbc; }
.lbc-mark[data-kind="strong"]        { color: #3d6a43; background: #ecf5ed; box-shadow: 0 2px 8px rgba(24,21,18,.12), inset 0 0 0 1.2px #cee2d1; }

.lbc-tip {
  position: absolute; left: 27px; top: -3px; width: 210px;
  background: #241f1a; color: #f4efe8;
  font-family: var(--lbc-sans); font-size: 11.5px; line-height: 1.45; font-weight: 400;
  padding: 7px 10px; border-radius: 9px; text-align: left;
  box-shadow: 0 6px 20px rgba(24,21,18,.28);
  opacity: 0; pointer-events: none; transform: translateX(-4px);
  transition: opacity .16s ease, transform .16s ease;
  z-index: 5;
}
.lbc-mark:hover .lbc-tip { opacity: 1; transform: none; }
.lbc-tip b {
  display: block; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  opacity: .55; margin-bottom: 3px; font-weight: 600;
}

/* ---------------- order numbers ---------------- */

.lbc-num {
  position: absolute; pointer-events: auto;
  width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center;
  background: #fff; color: var(--lbc-accent);
  font-family: var(--lbc-sans); font-size: 11.5px; font-weight: 700;
  box-shadow: 0 2px 8px rgba(24,21,18,.14), inset 0 0 0 1.3px rgba(28,26,23,.3);
  transform: scale(.5); opacity: 0;
  transition: transform .34s cubic-bezier(.2,1.5,.4,1), opacity .2s ease;
}
#lbc-lens.lit .lbc-num { transform: none; opacity: 1; }

/* ---------------- the gap ---------------- */

.lbc-gap {
  position: absolute; pointer-events: auto; cursor: text;
  height: 46px; border-radius: 8px;
  border: 1.5px dashed rgba(28,26,23,.4);
  background: rgba(28,26,23,.04);
  display: flex; align-items: center; gap: 9px; padding: 0 12px;
  opacity: 0; transform: scaleY(.7);
  transition: opacity .3s ease, transform .36s cubic-bezier(.2,.9,.25,1), background .16s ease;
}
#lbc-lens.lit .lbc-gap { opacity: 1; transform: none; }
.lbc-gap:hover { background: rgba(28,26,23,.09); }
.lbc-gap .plus { color: var(--lbc-accent); font-size: 17px; line-height: 1; font-weight: 300; }
.lbc-gap .hint { font-family: var(--lbc-sans); font-size: 11.5px; color: rgba(28,26,23,.7); }

/* ---------------- trace ticks ---------------- */

.lbc-tick2 {
  position: absolute; width: 18px; height: 18px; border-radius: 999px;
  background: #fff8e8; display: grid; place-items: center;
  box-shadow: 0 2px 7px rgba(24,21,18,.26);
  opacity: 0; transform: scale(.4);
  transition: opacity .2s ease, transform .3s cubic-bezier(.2,1.5,.4,1);
}
.lbc-tick2.in { opacity: 1; transform: none; }

/* ---------------- dates ---------------- */

.lbc-date {
  position: absolute; width: 84px; text-align: right;
  font-family: var(--lbc-sans); font-size: 10.5px; color: var(--lbc-ink-faint);
  white-space: nowrap;
  opacity: 0; transform: translateX(5px);
  transition: opacity .3s ease, transform .3s ease;
}
#lbc-lens.lit .lbc-date { opacity: 1; transform: none; }
.lbc-date.mid { color: #9c7b4a; }
.lbc-date.old { color: #b0623f; font-weight: 600; }

/* ---------------- the hover ring ---------------- */

.lbc-ring {
  position: fixed; z-index: 95; pointer-events: none;
  border-radius: 8px;
  background: rgba(255, 236, 190, .34);
  box-shadow: 0 0 0 1.5px rgba(226, 176, 84, .75);
  opacity: 0;
  transition: opacity .15s ease;
}
.lbc-ring.in { opacity: 1; }

/* ---------------- the bar ---------------- */

#lbc-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(16px);
  z-index: 120; pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  background: rgba(33,30,26,.93); backdrop-filter: blur(12px);
  color: #f4efe8; font-family: var(--lbc-sans); font-size: 12.5px;
  padding: 7px 8px 7px 14px; border-radius: 999px;
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
  opacity: 0; transition: opacity .22s ease, transform .3s cubic-bezier(.2,.9,.25,1), left .3s ease;
}
#lbc-bar.up { opacity: 1; transform: translateX(-50%) translateY(0); }
/* it lives over the PAGE, so it moves when the page does */
/* the toast keeps clear of the panel without moving the page */
body.lbc-open #lbc-bar { left: calc((100% - var(--lbc-panelw) - 28px) / 2); }
#lbc-bar .k { display: flex; align-items: center; gap: 8px; }
#lbc-bar .hint .esc {
  border: 1px solid rgba(255,255,255,.22); border-radius: 5px;
  padding: 1px 5px; font-size: 10px; color: rgba(244,239,232,.6);
}
#lbc-bar button {
  appearance: none; border: 0; background: rgba(255,255,255,.1); color: #fff;
  width: 24px; height: 24px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center;
}
#lbc-bar button:hover { background: rgba(255,255,255,.2); }
#lbc-bar .dot { width: 7px; height: 7px; border-radius: 999px; background: #ffd88a; box-shadow: 0 0 10px #ffd88a; }

/* ---------------- proposed edits: deliberately absent ----------------
   The prototype had a card at the side of the page with a "deploy"
   button on it. It is not here, and its styling is not here either.

   In Life Base the AI reads the notebook and answers; it never writes,
   edits, moves or reorganises somebody's pages (CLAUDE.md, settled
   2026-07-24). A card that changes a line with one press is writing,
   with a step in front of it. Leaving the CSS behind "just in case"
   would have been an invitation to wire it back up.
   -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #lbc-lens *, #lbc-bar, .lbc-msg { transition-duration: .001s !important; animation-duration: .001s !important; }
}

/* the spine only joins; the arms are what say "this line is in it" */
.lbc-bracket { opacity: 0; }
#lbc-lens.lit .lbc-bracket { opacity: .38; }
.lbc-barm { stroke-width: 2; stroke-linecap: round; opacity: 0; transition: opacity .3s ease .15s; }
#lbc-lens.lit .lbc-barm { opacity: .9; }
.lbc-bdot { opacity: 0; transition: opacity .3s ease .18s; }
#lbc-lens.lit .lbc-bdot { opacity: 1; }

/* ---------------- a reference on the page ----------------
   The same light as any other view, turned down: a softer scrim, no bar,
   and the numbers from the reply repeated in the margin. The first
   version of this drew a yellow band behind the line — a second visual
   language for the same idea, in a colour nothing else here uses. This
   is the one gesture the product already has, said quietly. */

#lbc-lens.lit[data-scrim="soft"] .lbc-scrim { opacity: 1; fill: rgba(24, 21, 18, .30); }
#lbc-lens.refs .lbc-ring { opacity: .55; }

.lbc-refnum {
  position: absolute;
  width: 19px; height: 19px; border-radius: 999px;
  display: grid; place-items: center;
  background: #fff8e8; color: #3a3128;
  font-family: var(--lbc-sans); font-size: 10.5px; font-weight: 700;
  box-shadow: 0 2px 7px rgba(24,21,18,.25), inset 0 0 0 1px rgba(58,49,40,.12);
  transform: scale(.5); opacity: 0;
  transition: transform .32s cubic-bezier(.2,1.5,.4,1), opacity .2s ease, background .16s ease;
}
#lbc-lens.lit .lbc-refnum { transform: none; opacity: 1; }

/* ============================================================
   The panel itself (corner.js).

   Closed it is a small white button. Open it is a short column of white
   with the app's serif in it, floating in the bottom corner. Three
   rules decide everything here:

     · it never looks like a chat product bolted onto a page — no
       avatars, no bubbles for the assistant, no product name shouting
       at you, no gradient anything;
     · it never moves the page. The window already spends two columns
       on the section list and the page list; a panel that took a third
       would reflow writing somebody is in the middle of reading. It
       floats over the page instead, and stays small enough that most
       of the writing is still visible beside and under it;
     · it stays quiet when it is closed. A control that is always on
       screen has to be forgettable, which is why the button is a
       34px square with a hairline border and not a sentence.
   ============================================================ */

/* ---------------- the closed button ----------------
   ★ A BUTTON, NOT AN ADVERTISEMENT.

   It used to be a cream lozenge reading "Ask about this page", with a
   breathing eye on it. On a page somebody is writing on, that is a
   permanent sales pitch in the corner of their notebook — the widest,
   loudest thing on screen, saying the same sentence forever.

   A control that is always present should be quiet enough to forget and
   obvious enough to find. So: a small white rounded square with a chat
   mark on it and a hairline border. The sentence moved to the tooltip,
   where a sentence belongs. */

#lbc-pill {
  /* ★ NO BOX. The bubble's own outline is the border, and the shape is
     the whole control — a square around a picture of a bubble is two
     borders saying the same thing.

     It sits further in from the corner than it did. Flush to the edge
     reads as browser chrome; a real margin reads as part of the page.
     `padding` is what makes a thin outline comfortable to hit — the
     drawing stays 41px, the target is 57px. */
  position: fixed; right: 34px; bottom: 34px; z-index: 100;
  display: grid; place-items: center;
  padding: 8px; background: none; border: 0;
  cursor: pointer;
  /* ★ THE SAME LINE THE ACCOUNT AVATAR IS DRAWN WITH.

     Not a colour picked to look right on its own — the exact border the
     round initial in the bottom bar uses, `1px solid #e0ddd9`. That is
     the app's own hairline, so the button belongs to the app instead of
     resembling it, and if the palette is ever retuned this moves with
     it rather than drifting away from it.

     Stroke-width 0.78 in a 32-unit viewBox drawn at 41px is exactly
     1.0px on screen. The suite measures both against `#avatar` and
     fails if they stop matching. */
  color: #e0ddd9;
  transition: transform .2s cubic-bezier(.2,.9,.25,1), color .2s ease, opacity .2s ease;
}
#lbc-pill .bub {
  display: block;
  /* White inside so it never goes see-through over writing — and NO
     drop shadow. A shadow on an SVG path lands on both sides of the
     stroke, so it put a smudge around the bubble and a second one just
     inside it. The drawing is a line, and a line is all it should be. */
  fill: #fff;
}
/* on hover it firms up, still the same family */
#lbc-pill:hover { color: #b9b2a8; transform: translateY(-1px); }
#lbc-pill:active { transform: translateY(0); }
#lbc-pill:focus-visible { outline: 2px solid var(--lbc-accent); outline-offset: 3px; border-radius: 8px; }

/* ★ `hidden` HAS TO WIN, AND ON ITS OWN IT DOES NOT.

   `display: flex` above beats the browser's built-in `[hidden]` rule,
   so `pill.hidden = true` set the attribute, changed nothing on screen,
   and threw no error. The corner's button sat on every board page and
   every chat page in the app while the code that hid it ran correctly.

   The same trap took a whole afternoon on `.section-row[hidden]` in the
   nav (CLAUDE.md). It is written down and it still caught this file.
   Anything here that can be hidden gets the rule explicitly. */
#lbc-pill[hidden],
#lbc-chat[hidden],
#lbc-whisper[hidden] { display: none !important; }
/* one small dot, when it said something you have not read */
#lbc-pill .pip {
  position: absolute; top: 4px; right: 4px;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--lbc-accent); border: 1.5px solid #fff;
  opacity: 0; transition: opacity .2s ease;
}
#lbc-pill.unread .pip { opacity: 1; }

#lbc-whisper {
  position: fixed; right: 34px; bottom: 94px; z-index: 100;
  max-width: 250px; padding: 9px 13px;
  background: #241f1a; color: #f4efe8; border-radius: 12px;
  font-family: var(--lbc-serif); font-size: 13px; line-height: 1.45;
  box-shadow: 0 8px 26px rgba(24,21,18,.26);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .34s ease, transform .34s cubic-bezier(.2,.9,.25,1);
}
#lbc-whisper.up { opacity: 1; transform: none; }

/* ---------------- the panel ---------------- */

#lbc-chat {
  /* ★ IT OPENS ABOVE THE BUBBLE, NOT OVER IT.
     The bubble is the control that opens AND closes the panel, so it
     has to stay on screen while the panel is up — the earlier geometry
     hid it behind the panel and left the little arrow in the header as
     the only way back, which is the thing nobody could find. The bubble
     tops out 86px from the window's foot (34px up, 52px tall); the
     panel starts 10px above that and grows from the same corner, so the
     two read as one anchored object. */
  position: fixed; right: var(--lbc-panelgap); bottom: 96px; z-index: 100;
  width: var(--lbc-panelw);
  height: var(--lbc-panelh); min-height: 408px; max-height: calc(100vh - 110px);
  display: none; flex-direction: column;
  background: #fffefb;
  border: 1px solid rgba(58,49,40,.13);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(24,21,18,.18), 0 2px 6px rgba(24,21,18,.06);
  overflow: hidden;
  transform-origin: 100% 100%;
  transition: opacity .22s ease, transform .3s cubic-bezier(.2,.9,.25,1), filter .3s ease;
}
#lbc-chat.open { display: flex; animation: lbc-panelin .34s cubic-bezier(.2,.9,.25,1) both; }
@keyframes lbc-panelin { from { opacity: 0; transform: translateY(12px) scale(.97); } }

/* No fading, no yielding, nothing to get wrong: the PAGE makes room
   (page.css), so a view is never drawn where the conversation is. */

/* ---------------- header ---------------- */

#lbc-head2 {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 12px 10px 15px;
  border-bottom: 1px solid #f1ece4;
  background: rgba(255,254,251,.9);
  backdrop-filter: blur(8px);
}
#lbc-head2 .who { flex: 1; min-width: 0; }
#lbc-head2 .t1 {
  font-family: var(--lbc-sans); font-size: 13px; font-weight: 600; color: var(--lbc-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#lbc-head2 .t2 {
  font-family: var(--lbc-sans); font-size: 10.5px; color: var(--lbc-ink-faint);
  margin-top: 2px; display: flex; align-items: center; gap: 6px;
}
#lbc-head2 .eff {
  border: 1px solid var(--lbc-hair-strong); border-radius: 5px;
  padding: 0 4px; font-size: 9.5px; letter-spacing: .03em;
}
.lbc-hbtn {
  appearance: none; border: 1px solid transparent; background: transparent;
  width: 27px; height: 27px; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; color: var(--lbc-ink-faint);
}
.lbc-hbtn:hover { background: #f4f1eb; color: var(--lbc-ink-soft); }
.lbc-hbtn.on { color: var(--lbc-accent); background: rgba(28,26,23,.08); }
.lbc-hbtn.off { color: #b9b2a8; }

/* ---------------- the list ---------------- */

#lbc-list {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 15px 6px;
  scrollbar-width: thin;
}
#lbc-list::-webkit-scrollbar { width: 8px; }
#lbc-list::-webkit-scrollbar-thumb { background: #e6e1d9; border-radius: 8px; border: 2px solid #fffefb; }

.lbc-msg { margin-bottom: 16px; }
.lbc-msg.user { display: flex; justify-content: flex-end; }
.lbc-msg.user .b {
  background: #f2efe9; color: var(--lbc-ink);
  font-family: var(--lbc-sans); font-size: 13.5px; line-height: 1.48;
  padding: 8px 12px; border-radius: 14px 14px 4px 14px; max-width: 84%;
  white-space: pre-wrap; word-break: break-word;
}
.lbc-msg.ai .b {
  font-family: var(--lbc-serif); font-size: 14.5px; line-height: 1.62; color: var(--lbc-ink);
  word-break: break-word;
}
.lbc-msg.ai .b p { margin: 0 0 9px; }
.lbc-msg.ai .b p:last-child { margin-bottom: 0; }
.lbc-msg.ai .b strong { font-weight: 600; }
.lbc-msg.ai .b em { font-style: italic; }
.lbc-msg.ai .b ul, .lbc-msg.ai .b ol { margin: 6px 0; padding-left: 20px; }
.lbc-msg.ai .b li { margin: 3px 0; }
.lbc-msg.ai .b code {
  font-family: ui-monospace, Menlo, monospace; font-size: 12.5px;
  background: #f4f1eb; padding: 1px 4px; border-radius: 4px;
}

/* ---------------- the citation mark ---------------- */

.lbc-cite {
  display: inline-grid; place-items: center; vertical-align: baseline;
  min-width: 16px; height: 16px; padding: 0 4px; margin: 0 1.5px;
  border-radius: 5px; cursor: pointer;
  background: #f3efe6; color: #6a6055;
  font-family: var(--lbc-sans); font-size: 10.5px; font-weight: 600;
  border: 1px solid rgba(58,49,40,.09);
  transition: background .14s ease, color .14s ease, transform .14s ease;
  position: relative; top: -1px;
}
.lbc-cite:hover { background: #ffe9b8; color: #6b4f16; border-color: rgba(150,110,30,.28); transform: translateY(-1px); }
.lbc-cite.held { background: var(--lbc-accent); color: #fff; border-color: transparent; }
.lbc-cite.dead { background: transparent; color: #c3bcb2; cursor: default; }

/* ---------------- the view chip ---------------- */

.lbc-viewchip {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 9px; padding: 5px 10px 5px 8px;
  background: #fdf8ec; border: 1px solid rgba(150,110,30,.18);
  border-radius: 9px; cursor: pointer;
  font-family: var(--lbc-sans); font-size: 11.5px; color: #6b5a3a;
  transition: background .14s ease, transform .14s ease;
}
.lbc-viewchip:hover { background: #fbf0d9; transform: translateY(-1px); }
.lbc-viewchip .g { font-size: 12px; opacity: .8; }
.lbc-viewchip .r { color: #a3937a; font-size: 10.5px; }

.lbc-showme {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 9px; padding: 4px 10px;
  border: 1px dashed var(--lbc-hair-strong); border-radius: 9px;
  background: transparent; cursor: pointer;
  font-family: var(--lbc-sans); font-size: 11.5px; color: var(--lbc-ink-faint);
}
.lbc-showme:hover { border-color: var(--lbc-accent); color: var(--lbc-accent); background: rgba(28,26,23,.05); }

/* ---------------- thinking ---------------- */

.lbc-think {
  margin: 0 0 8px; font-family: var(--lbc-sans); font-size: 11.5px; color: var(--lbc-ink-faint);
}
.lbc-think .row { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.lbc-think .row:hover { color: var(--lbc-ink-soft); }
.lbc-think .caret { transition: transform .18s ease; }
.lbc-think.open .caret { transform: rotate(90deg); }
.lbc-think .body {
  display: none; margin-top: 6px; padding: 8px 10px;
  background: #faf7f1; border-radius: 9px; border: 1px solid #f0ebe2;
  font-size: 11.5px; line-height: 1.55; color: #7d766c;
  max-height: 190px; overflow: auto; white-space: pre-wrap;
}
.lbc-think.open .body { display: block; }
.lbc-think .live { opacity: .85; }
/* three dots, breathing. The only honest thing to show while it thinks
   is that it is thinking — the reasoning itself is one click away. */
.lbc-think .live::after {
  content: "";
  display: inline-block; width: 1.6em; text-align: left;
  animation: lbc-dots 1.5s steps(4, end) infinite;
}
@keyframes lbc-dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}

@keyframes lbc-pulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
.lbc-typing { display: inline-block; animation: lbc-pulse 1.4s ease-in-out infinite; }

/* ---------------- composer ---------------- */

#lbc-foot {
  border-top: 1px solid #f1ece4; padding: 9px 10px 10px;
  background: #fffefb;
}
/* a chip under a message names a page an older conversation had pulled
   in — new ones can no longer be added (the @ picker is gone), but what
   was said then still says where it came from */
.lbc-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #f2efe9; border-radius: 7px; padding: 3px 6px 3px 8px;
  font-family: var(--lbc-sans); font-size: 11.5px; color: var(--lbc-ink-soft);
}
.lbc-chip b { font-weight: 500; }
.lbc-chip .x { cursor: pointer; color: var(--lbc-ink-faint); font-size: 12px; line-height: 1; }
.lbc-chip .x:hover { color: #b04f6a; }

#lbc-inputwrap {
  display: flex; align-items: flex-end; gap: 6px;
  border: 1px solid var(--lbc-hair-strong); border-radius: 12px;
  padding: 6px 6px 6px 11px; background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
#lbc-inputwrap:focus-within { border-color: #c2bab0; box-shadow: 0 0 0 3px rgba(28,26,23,.06); }
#lbc-input {
  /* `min-width: 0` is what stops a flex item refusing to shrink below
     its own placeholder. Without it the composer widened past the panel
     and the placeholder was cut off mid-sentence — a narrow panel finds
     every flex item that was never asked to be narrow. */
  flex: 1; min-width: 0;
  border: 0; outline: 0; resize: none; background: transparent;
  font-family: var(--lbc-sans); font-size: 13.5px; line-height: 1.5; color: var(--lbc-ink);
  max-height: 120px; padding: 2px 0;
}
#lbc-input::placeholder { color: #b5aea4; }
/* the chat page's send button, exactly: a 34px black circle with a 15px
   arrow in it. It used to be a small rounded square in the panel's brown
   accent, which read as a different control from the one on a chat page
   even though it does the same job. One send button in the app. */
#lbc-send {
  appearance: none; width: 34px; height: 34px; border-radius: 50%;
  background: #0d0d0d; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border: 0;
}
#lbc-send svg { width: 15px; height: 15px; }
#lbc-send:disabled { opacity: .25; cursor: default; }
/* while a reply is coming the same button is a stop button — a filled
   square in the circle, the shape everyone already reads as "stop this" */
#lbc-send.stopping { background: #3a3a3a; }
#lbc-send.stopping:hover { background: #565656; }

/* ---------------- footer note ---------------- */

.lbc-note {
  font-family: var(--lbc-sans); font-size: 11px; color: var(--lbc-ink-faint);
  text-align: center; padding: 4px 0 10px;
}
.lbc-err {
  font-family: var(--lbc-sans); font-size: 12px; color: #a8483f;
  background: #fdf0ee; border: 1px solid #f4dcd8; border-radius: 9px;
  padding: 8px 10px; margin-bottom: 12px;
}
.lbc-empty {
  font-family: var(--lbc-serif); font-size: 14px; color: var(--lbc-ink-faint);
  line-height: 1.55; padding: 6px 2px 14px;
}
.lbc-empty b { color: var(--lbc-ink-soft); font-weight: 600; }
.lbc-starters { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.lbc-starter {
  text-align: left; appearance: none; cursor: pointer;
  border: 1px solid var(--lbc-hair); background: #fff; border-radius: 10px;
  padding: 8px 11px; font-family: var(--lbc-serif); font-size: 13px; color: var(--lbc-ink-soft);
  transition: border-color .14s ease, transform .14s ease, color .14s ease;
}
.lbc-starter:hover { border-color: #c2bab0; color: var(--lbc-ink); transform: translateX(2px); }

/* a short quote from another page, under the message that cited it */
.lbc-quote {
  margin-top: 8px; padding: 8px 11px;
  background: #faf7f1; border-left: 2px solid var(--lbc-hair-strong);
  border-radius: 0 8px 8px 0;
  font-family: var(--lbc-serif); font-size: 13px; line-height: 1.5; color: var(--lbc-ink-soft);
}
.lbc-quote .src {
  display: block; font-family: var(--lbc-sans); font-size: 9.5px;
  letter-spacing: .09em; text-transform: uppercase; color: var(--lbc-ink-faint);
  margin-bottom: 4px; font-weight: 600;
}

/* ---------------- you can select what it said ----------------
   The app's own stylesheet sets `user-select: none` on `body` — it is an
   application shell, and it re-enables selection only on the surfaces
   you are meant to edit. Loading the app's CSS brought that rule with
   it, and the corner is not one of those surfaces, so nothing it said
   could be copied. It is a chat: every word in it is selectable. */
#lbc-chat, #lbc-chat * {
  user-select: text;
  -webkit-user-select: text;
  cursor: auto;
}
#lbc-chat button, #lbc-chat .lbc-cite, #lbc-chat .lbc-viewchip,
#lbc-chat .lbc-starter, #lbc-chat .lbc-showme, #lbc-chat .lbc-chip .x { cursor: pointer; }
#lbc-chat #lbc-input { cursor: text; }
#lbc-whisper, #lbc-pill { user-select: none; }

/* a mark standing for a run of lines: one chip, a little wider */
.lbc-cite.many { padding: 0 5px; letter-spacing: .02em; }


/* ============================================================
   ★ NOTHING HERE TOUCHES #canvas.

   An earlier version narrowed the page while the panel was open, and a
   block of rules lived here to do it. They are gone, along with the
   reason for them: the panel overlays the writing now, and a page never
   reflows because somebody opened a chat.

   What that costs: a lit line can end up underneath the panel. That is
   the accepted trade — the light also SCROLLS the page to what it is
   pointing at (`scrollTo` in corner-lines.js), and the panel is short
   enough and far enough right that the writing column is rarely under
   it. Reflowing a page somebody is reading is the worse of the two.
   ============================================================ */