/* The Listening Post (/labs/listening-post) — desktop.
   Part of the /labs stylesheet, split out of one 3,400-line labs.css.

   THE NUMBER IN THE FILENAME IS LOAD-BEARING. stylesheet_link_tag :app
   collects every stylesheet under app/assets and serves them sorted by
   path, so the ordinal prefix is the only thing holding the cascade order
   these rules were written in — and several classes are shared across labs
   (.lp-head, .lab-entry, .lab-block, .dt-table). Renaming a file without
   renumbering it, or inserting one out of sequence, reorders the cascade
   silently.

   Nothing in this comment may contain the two characters that close a CSS
   comment. The first version of it wrote a shell glob here, which closed
   the comment early; the leaked text then parsed as a selector and ate the
   first real rule in all nine files. There is a test for that now.
   ============================================================ */

/* ---- Listening Post ----
   Scoped styles for the labs pages. Reuses design tokens (--ink, --line,
   --font-serif, etc.) defined globally in app/assets/tailwind/application.css. */

/* Top from --page-top (application.css), which the hero and /labs also read, so the three cannot
   drift apart again. The bottom stays local: it separates this head from whatever the page puts
   under it, which differs per lab.
   Below 680px neither applies — labs_01_composer_mobile.css's `body.lp-demo .lp-head` replaces
   both with 26px/14px to fit the empty state in one viewport, and being two classes deep it also
   beats labs_09's `.fd-head`. That override is already tighter than this token's floor, so mobile
   was never part of the gap this token was introduced to close. */
.lp-head {
  padding-block: var(--page-top) clamp(28px, 4vw, 40px);
  text-align: center;
}

/* page title — serif "human voice" */
.lp-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(32px, 5.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 18px;
}
/* time-of-day greeting — subheading beneath the title, anchored by the static starburst */
.lp-greeting {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(21px, 2.9vw, 32px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 14px;
}
.lp-greeting-mark { display: inline-flex; color: var(--ink); }
.lp-greeting-mark svg {
  display: block;
  overflow: visible;
}
.lp-subtitle {
  font-family: var(--font-sans);
  color: var(--ink-muted);
  font-size: clamp(16px, 1.6vw, 18px);
  max-width: 56ch;
  margin: 18px auto 0;
}

.lp-body {
  padding-bottom: clamp(32px, 4vw, 48px);   /* footer is fixed; body reserves its height */
}

/* ---- conversation layout ----
   Initial state: greeting + composer sit near the top (as authored). Once the
   first question is asked, `.is-conversing` on the controller root hides the
   greeting, reveals the scrolling transcript, and docks the composer to the
   bottom of the viewport (sticky) so follow-ups read like a chat. */
.lp-transcript:empty { display: none; }

.lp-turn + .lp-turn { border-top: 1px solid var(--line-soft); }
.lp-transcript .lp-turn:first-child .lp-answer-block { margin-top: 0; }

/* Composer dock: normal flow initially; sticky to the screen bottom while conversing. */
.lp-composer-dock { margin-top: 28px; }

/* "Start over" lives inside the composer bar next to the segment menu; it uses the
   .lp-menu-trigger look and only appears once a conversation is underway. The
   two-class selector beats .lp-menu-trigger's own `display` so it stays hidden
   until `.is-conversing`. */
.lp-composer-menus .lp-startover { display: none; }

.is-conversing .lp-head { display: none; }
.is-conversing .lp-startover { display: inline-flex; }
.is-conversing .lp-transcript {
  padding-top: clamp(24px, 5vw, 48px);
  /* The answer reads top-down: it starts just under the header and grows downward,
     scrolling only once it fills the space above the composer (auto-follow in the JS
     controller keeps the newest line in view). We reserve just the composer's height
     here so the last line clears it — the footer is already reserved by
     `body { padding-bottom: var(--footer-h) }`; reserving it twice left a large gap. */
  padding-bottom: calc(var(--lp-dock-h, 168px) + 24px);
}
.is-conversing .lp-body { padding-bottom: 0; }

/* The composer and the global footer are both pinned to the bottom of the viewport
   while a conversation is underway, so neither drifts as the answer streams in. The
   class lives on <body> because the footer is outside the controller's element; the
   controller keeps --lp-dock-h / --lp-footer-h up to date. */
body.lp-conversing .lp-composer-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--lp-footer-h, 76px);
  z-index: 30;
  padding: 16px var(--gutter) 20px;
  /* opaque base with a short top fade so transcript text scrolls cleanly under it */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, var(--bg) 22px, var(--bg) 100%);
}
body.lp-conversing footer.cx-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--bg);
  box-shadow: 0 1px 0 1px var(--bg);   /* cover any sub-pixel transcript sliver at the very edge */
}

/* ---- composer (chat-style input) ----
   A single large input surface: a growing textarea over a toolbar carrying the
   two dropdown menus and the send control. Monochrome, hairline-bordered — the
   only concession to the "chat input" idiom is a soft corner radius. */
.lp-composer {
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color 0.2s;
}
.lp-composer:focus-within { border-color: var(--ink); }

.lp-composer-input {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  resize: none;
  overflow-y: auto;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  padding: 20px 20px 6px;
  min-height: 58px;
  max-height: 200px;
}
.lp-composer-input::placeholder { color: var(--ink-faint); }
.lp-composer-input:focus { outline: none; }

.lp-composer-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 10px;
}
.lp-composer-menus { display: flex; flex-wrap: wrap; gap: 8px; }

.lp-composer-send {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #0B0B0C;
  color: #FFFFFF;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.lp-composer-send:hover { opacity: 0.8; }
.lp-composer-send:disabled,
.lp-composer-send.is-busy { opacity: 0.4; cursor: default; }

/* ---- composer dropdown menus ---- */
.lp-menu { position: relative; }
.lp-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 13px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.lp-menu-trigger:hover { border-color: var(--ink); }
.lp-menu-trigger[aria-expanded="true"] {
  border-color: var(--ink);
  background: rgba(0, 0, 0, 0.03);
}
.lp-menu-ico { flex: 0 0 auto; color: var(--ink-faint); }

.lp-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: max-content;
  min-width: min(360px, 84vw);
  max-width: min(560px, 92vw);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.lp-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lp-menu-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-faint);
  padding: 0 2px;
  transition: color 0.2s;
}
.lp-menu-close:hover { color: var(--ink); }
.lp-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  padding: 13px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.lp-menu-item:first-of-type { border-top: none; }
.lp-menu-item:hover { background: rgba(0, 0, 0, 0.04); }

@media (max-width: 680px) {
  .lp-menu-panel { width: auto; min-width: min(320px, 84vw); max-width: 92vw; }
  .lp-menu-item { white-space: normal; }
}

/* ---- mobile suggestion chips (empty state, replaces the "Ask a question" menu) ----
   Rendered on the demo page only; the row is hidden on desktop and once conversing. */
.lp-chips { display: none; }
.lp-chip {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 13px;
  min-height: 40px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.lp-chip:hover { border-color: var(--ink); }