/* ---------------------------------------------------------------- Librarian Bot
   A panel that is a bottom sheet on a phone and a side panel on a laptop.
   Everything is one-handed reachable, the send button and chips are 44px tall,
   and the typing dots stop moving for anyone who asked for less motion. */

.lb { position: fixed; inset: auto 0 0 auto; z-index: 70; }

/* The way in. It was an 81×48 pill with a bare word on it, which is small on a
   phone and says nothing to someone who has not met one of these before: it is
   now a 58px-tall button with a speech-bubble icon, the word Ask at 1.05rem, and
   an aria-label that explains what pressing it does. */
.lb-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 24px 0 20px;
  font-size: 1.05rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink, #17201c);
  color: var(--paper, #fff);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.lb-toggle:hover { transform: translateY(-1px); }
.lb-toggle:focus-visible { outline: 3px solid var(--amber, #f0c960); outline-offset: 2px; }
.lb-toggle-icon { display: inline-flex; align-items: center; }
.lb-toggle-icon svg { display: block; }
.lb-toggle-label { font-size: 1.05rem; letter-spacing: .01em; }
html.lb-is-open .lb-toggle { display: none; }

.lb-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 380px;
  max-width: calc(100vw - 32px);
  height: min(620px, calc(100vh - 32px));
  display: flex;
  flex-direction: column;
  background: var(--paper, #fff);
  color: var(--ink, #17201c);
  border: 1px solid var(--line, rgba(0, 0, 0, .12));
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .26);
  overflow: hidden;
}

.lb-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, rgba(0, 0, 0, .1));
  background: var(--mint, #eaf5ee);
}
.lb-title { margin: 0; font-size: 1rem; line-height: 1.2; }
.lb-sub { margin: 2px 0 0; font-size: .82rem; opacity: .75; }
.lb-close {
  min-width: 44px; min-height: 44px;
  border: 0; border-radius: 10px;
  background: transparent; color: inherit;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lb-close:hover { background: rgba(0, 0, 0, .06); }
.lb-close:focus-visible { outline: 3px solid var(--amber, #f0c960); }

.lb-log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

.lb-msg { max-width: 92%; }
.lb-msg.lb-me { align-self: flex-end; }
.lb-text {
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: .94rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lb-bot .lb-text { background: var(--wash, #f4f2ee); border-bottom-left-radius: 4px; }
.lb-me .lb-text { background: var(--ink, #17201c); color: var(--paper, #fff); border-bottom-right-radius: 4px; }

.lb-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.lb-card {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line, rgba(0, 0, 0, .14));
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: var(--paper, #fff);
}
.lb-card:hover { border-color: var(--ink, #17201c); }
.lb-card:focus-visible { outline: 3px solid var(--amber, #f0c960); outline-offset: 1px; }
.lb-card-title { display: block; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.lb-card-meta { display: block; font-size: .76rem; opacity: .7; margin-top: 3px; }
.lb-card-when { display: block; font-size: .84rem; margin-top: 6px; opacity: .85; }
.lb-card-go { display: block; margin-top: 8px; font-size: .82rem; font-weight: 600; }

.lb-travel { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.lb-btn {
  min-height: 44px;
  padding: 0 14px;
  display: inline-flex; align-items: center;
  border: 1px solid var(--line, rgba(0, 0, 0, .18));
  border-radius: 10px;
  background: var(--paper, #fff);
  color: inherit;
  font: inherit; font-size: .88rem;
  text-decoration: none;
  cursor: pointer;
}
.lb-btn-go { background: var(--ink, #17201c); color: var(--paper, #fff); border-color: transparent; }
.lb-btn:focus-visible { outline: 3px solid var(--amber, #f0c960); outline-offset: 2px; }

/* The starter chips, under a line that tells a first-time user what they are. */
.lb-chips-label {
  margin: 0; padding: 8px 14px 0;
  font-size: .84rem; opacity: .8;
}
.lb-chips {
  display: flex; gap: 8px; padding: 6px 14px 0;
  overflow-x: auto; scrollbar-width: none;
}
.lb-chips::-webkit-scrollbar { display: none; }
.lb-chip {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line, rgba(0, 0, 0, .18));
  border-radius: 999px;
  background: transparent;
  color: inherit; font: inherit; font-size: .9rem;
  cursor: pointer; white-space: nowrap;
}
.lb-chip:hover { background: var(--wash, #f4f2ee); }
.lb-chip:focus-visible { outline: 3px solid var(--amber, #f0c960); outline-offset: 2px; }

.lb-form { display: flex; gap: 8px; padding: 10px 14px 6px; }
.lb-input {
  flex: 1 1 auto;
  /* An input has a browser default width and will not shrink below it, which
     pushed the Send button 16px outside the panel on a 320px screen — clipped by
     the panel's own overflow. min-width lets the row fit whatever it is given. */
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line, rgba(0, 0, 0, .2));
  border-radius: 10px;
  font: inherit; font-size: .94rem;
  background: var(--paper, #fff); color: inherit;
}
.lb-input:focus-visible { outline: 3px solid var(--amber, #f0c960); outline-offset: 1px; }
.lb-send {
  min-height: 44px; padding: 0 16px;
  border: 0; border-radius: 10px;
  background: var(--ink, #17201c); color: var(--paper, #fff);
  font: inherit; font-weight: 600; cursor: pointer;
}
.lb-send:focus-visible { outline: 3px solid var(--amber, #f0c960); outline-offset: 2px; }

.lb-foot {
  margin: 0; padding: 4px 14px 12px;
  font-size: .72rem; opacity: .7; line-height: 1.4;
}

.lb-typing { display: flex; gap: 4px; padding: 12px; }
.lb-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .4;
  animation: lb-bounce 1.1s infinite;
}
.lb-typing span:nth-child(2) { animation-delay: .15s; }
.lb-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes lb-bounce { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-4px); opacity: .9; } }

@media (max-width: 639px) {
  .lb-panel {
    right: 0; left: 0; bottom: 0;
    width: auto; max-width: none;
    height: min(78vh, 640px);
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
  }
  .lb-toggle { right: 12px; bottom: 12px; min-height: 58px; padding: 0 22px 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-log { scroll-behavior: auto; }
  .lb-toggle:hover { transform: none; }
  .lb-typing span { animation: none; opacity: .7; }
}
/* While the panel is open its own close button does the job, and the round
   trigger would sit on top of the footer text. Hiding it also stops two
   overlapping controls competing for the same tap. It comes back the moment
   the panel closes, which is where focus returns. */
html.lb-is-open .lb-toggle { display: none; }

/* The panel is a <section>, and the page styles sections with 58px of vertical
   padding for long-form reading. Inside a floating panel that padding wasted a
   third of the height and pushed the footer out of view. Each child pads
   itself, so none is needed here. */
.lb-panel { padding: 0; }
.lb-panel > .lb-head,
.lb-panel > .lb-chips-label,
.lb-panel > .lb-chips,
.lb-panel > .lb-form,
.lb-panel > .lb-foot { flex: 0 0 auto; }
.lb-panel > .lb-log { min-height: 0; }

/* ---------------------------------------------------- Librarian Bot, refined
   Bigger type and stronger contrast, because this gets read on a phone in a
   workshop. One bubble per result with its own full-width action, so the button
   is the obvious thing to press rather than a link buried in a paragraph. */

.lb-text { font-size: 1rem; line-height: 1.55; }

/* The reset above sets `font: inherit` on the trigger, which quietly undid the
   size set at the top of this file. The label states it again, and the button is
   a thumb-sized 60px so it does not disappear at the edge of a phone screen. */
.lb-toggle { min-height: 60px; }
.lb-toggle-label { font-size: 1.06rem; font-weight: 700; }
.lb-toggle-icon svg { width: 24px; height: 24px; }

/* What to try when the question missed. Full-width taps, because these are for
   the person who does not know the vocabulary yet — reading them is one thing,
   pressing one is the point. */
.lb-suggest { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.lb-suggest-label { margin: 0; font-size: .86rem; opacity: .8; }
.lb-suggest-btn {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line, rgba(0, 0, 0, .22));
  border-radius: 12px;
  background: var(--paper, #fff);
  color: inherit;
  font: inherit; font-size: .95rem; text-align: left;
  cursor: pointer;
}
.lb-suggest-btn:hover { background: var(--wash, #f4f2ee); }
.lb-suggest-btn:focus-visible { outline: 3px solid var(--amber, #f0c960); outline-offset: 2px; }
.lb-suggest-btn:active { transform: translateY(1px); }
.lb-sub { font-size: .84rem; opacity: .82; }
.lb-chip { font-size: .88rem; min-height: 44px; }
.lb-input, .lb-send { font-size: 1rem; }
.lb-foot { font-size: .76rem; opacity: .78; }
.lb-title { font-size: 1.06rem; }

.lb-item {
  max-width: 96%;
  padding: 12px 13px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: var(--wash, #f4f2ee);
}
.lb-item-tag {
  margin: 0 0 6px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--amber-ink, #7a5a12);
}
.lb-item-title { margin: 0; font-size: 1.03rem; font-weight: 650; line-height: 1.32; }
.lb-item-meta { margin: 5px 0 0; font-size: .84rem; opacity: .85; }
.lb-item-when { margin: 8px 0 0; font-size: .96rem; line-height: 1.45; }
.lb-item-go {
  display: block;
  margin-top: 12px;
  min-height: 46px;
  line-height: 46px;
  text-align: center;
  border-radius: 10px;
  background: var(--ink, #17201c);
  color: var(--paper, #fff);
  text-decoration: none;
  font-weight: 600;
  font-size: .96rem;
}
.lb-item-go:hover { filter: brightness(1.12); }
.lb-item-go:focus-visible { outline: 3px solid var(--amber, #f0c960); outline-offset: 2px; }

/* Press feedback: a tap that does not visibly answer feels broken. */
.lb-chip, .lb-btn, .lb-item-go, .lb-send, .lb-toggle, .chip, .askchips button {
  transition: transform .12s ease;
}
.lb-chip:active, .lb-btn:active, .lb-item-go:active, .lb-send:active, .lb-toggle:active,
.chip:active, .askchips button:active, .lb-pressed {
  transform: scale(.958);
}

/* ------------------------------------------------------------- the cut scene
   Shown once, on the way back from checkout. Named features only, every one of
   which exists; three ways out; no motion for anyone who asked for none. */

.lb-party {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: block;
  /* The overlay scrolls, not the card. Centring a card taller than the screen
     puts its title above the top edge where nobody can reach it, so the card
     sits at the top on phones and is only centred where there is room. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  background: rgba(12, 16, 15, .55);
}
.lb-party-card {
  position: relative;
  width: min(560px, 100%);
  margin: 0 auto;
  padding: 26px 22px 22px;
  border-radius: 18px;
  background: var(--paper, #fff);
  color: var(--ink, #17201c);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  animation: lb-party-in .5s cubic-bezier(.2, .9, .3, 1.15) both;
}
.lb-party-out { animation: lb-party-out .16s ease both; }
.lb-party-close { position: absolute; top: 6px; right: 6px; }
.lb-party-face {
  width: 64px; height: 64px;
  margin: 0 auto 10px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--mint, #eaf5ee);
}
.lb-party-book {
  position: relative;
  width: 26px; height: 30px;
  border: 3px solid var(--ink, #17201c);
  border-radius: 3px 6px 6px 3px;
}
.lb-party-book::after {
  content: '';
  position: absolute;
  left: 50%; top: 3px; bottom: 3px;
  width: 2px;
  background: var(--ink, #17201c);
}
.lb-party-kicker {
  margin: 0;
  text-align: center;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .7;
}
.lb-party-title { margin: 6px 0 8px; text-align: center; font-size: 1.5rem; line-height: 1.25; }
.lb-party-lead { margin: 0 auto 16px; max-width: 44ch; text-align: center; font-size: 1rem; opacity: .9; }
.lb-party-list { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.lb-party-list li { position: relative; padding-left: 26px; font-size: .98rem; line-height: 1.45; }
.lb-party-list li::before {
  content: '\2713';
  position: absolute; left: 0; top: 0;
  color: #1f6f4a;
  font-weight: 700;
}
.lb-party-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

@keyframes lb-party-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes lb-party-out {
  to { opacity: 0; transform: translateY(8px) scale(.99); }
}

@media (min-width: 640px) and (min-height: 760px) {
  .lb-party { display: flex; align-items: center; justify-content: center; }
}

@media (max-width: 639px) {
  .lb-party-title { font-size: 1.32rem; }
  .lb-party-actions { flex-direction: column; }
  .lb-party-actions > * { width: 100%; justify-content: center; text-align: center; }
  /* Six lines and two buttons on a 375-wide phone: trim the air, not the words,
     so the whole thing is readable without scrolling. */
  .lb-party-card { padding: 20px 18px 18px; }
  .lb-party-face { width: 52px; height: 52px; margin-bottom: 8px; }
  .lb-party-lead { margin-bottom: 12px; font-size: .96rem; }
  .lb-party-list { gap: 7px; margin-bottom: 14px; }
  .lb-party-list li { font-size: .94rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lb-party-card, .lb-party-out { animation: none; }
  .lb-pressed, .lb-chip:active, .lb-btn:active, .lb-item-go:active { transform: none; }
}

/* Moving between categories should answer the tap. The kit and trade cards
   already lift on hover; this adds the small press on touch, where there is no
   hover to give the same signal. */
.btn { transition: transform .12s ease, background .15s ease; }
.kitcat:active, .catcard:active, .btn:active, .save:active, .copy:active {
  transform: scale(.97);
}

/* A new bubble arrives the way a message does: a short lift, nothing bouncing. */
.lb-msg { animation: lb-msg-in .18s ease-out both; }
@keyframes lb-msg-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lb-msg { animation: none; }
}
/* ---------------------------------------------- copy, save, and "did it fit"

   The panel's job is to end with something in the clipboard, so copying lives
   in the answer and not one page away. Every control here is 44px tall: this is
   read on a phone, held in one hand, often with gloves off. */

.lb-head-btns { display: flex; align-items: center; gap: 4px; }
.lb-new {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line, rgba(0, 0, 0, .16));
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
}
.lb-new:hover { background: rgba(0, 0, 0, .05); }
.lb-new:focus-visible { outline: 3px solid var(--amber, #f0c960); outline-offset: 2px; }

/* Three tools, three equal buttons on one line: wrapped to two rows, the third
   looks like an afterthought and the row reads as a list of links. */
.lb-copyrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.lb-copylabel {
  grid-column: 1 / -1;
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .72;
}
.lb-copybtn {
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line, rgba(0, 0, 0, .16));
  border-radius: 10px;
  background: var(--paper, #fff);
  color: inherit;
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  cursor: pointer;
}
.lb-copybtn:hover { border-color: var(--ink, #17201c); }
.lb-copybtn:focus-visible { outline: 3px solid var(--amber, #f0c960); outline-offset: 2px; }
.lb-copybtn[disabled] { opacity: .5; cursor: progress; }

.lb-save {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 6px;
  border: 1px dashed var(--line, rgba(0, 0, 0, .22));
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}
.lb-save:hover { background: rgba(0, 0, 0, .04); }
.lb-save:focus-visible { outline: 3px solid var(--amber, #f0c960); outline-offset: 2px; }
.lb-save[aria-pressed="true"] {
  border-style: solid;
  border-color: rgba(31, 111, 74, .45);
  background: var(--mint, #eaf5ee);
  color: var(--green-dark, #145c39);
}

.lb-fb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 0 2px;
  font-size: .84rem;
  opacity: .92;
}
.lb-fb-ask { opacity: .8; }
.lb-fb-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 0 12px;
  border: 1px solid var(--line, rgba(0, 0, 0, .16));
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
}
.lb-fb-btn:hover { background: rgba(0, 0, 0, .05); }
.lb-fb-btn:focus-visible { outline: 3px solid var(--amber, #f0c960); outline-offset: 2px; }
.lb-fb-note { display: flex; gap: 6px; width: 100%; margin-top: 2px; }
.lb-fb-note[hidden] { display: none; }
.lb-fb-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line, rgba(0, 0, 0, .16));
  border-radius: 10px;
  background: var(--paper, #fff);
  color: inherit;
  font: inherit;
  font-size: .9rem;
}
.lb-fb-input:focus-visible { outline: 3px solid var(--amber, #f0c960); outline-offset: 1px; }
.lb-fb-send { background: var(--ink, #17201c); color: var(--paper, #fff); border-color: transparent; }

/* On a phone the panel is a sheet over the page; letting the page scroll
   underneath sends taps to the wrong place. */
@media (max-width: 639px) {
  html.lb-is-open body { overflow: hidden; }
}

/* While the cut scene is up, the round Ask button is hidden: a modal overlay
   with a live button showing through it is a trap for a thumb. */
html.lb-party-open .lb-toggle { display: none; }