/* Chat Thread component (2026-08-03) -- [lpos_chat] / ChatThread.php.
   Token-driven glass HUD matching .lpos-c-subpanel / .lpos-c-icon-btn / the archive-card design
   language. Every value below is var(--lpos-*) (or calc()/color-mix() built from those vars) whose
   fallback equals the token's canon :where(:root) value in console-tokens.css -- no raw hex/px/rgba,
   no invented root tokens.

   NO-SCROLLBAR LAW: the whole component is one flex column that fills its panel (height:100%,
   overflow:hidden). The message list never scrolls -- ChatThread.php renders every message but
   hides all but the current page ([hidden]); chat-thread.js flips pages. `justify-content:flex-end`
   keeps the visible page's bubbles pinned to the BOTTOM of the list, which combined with defaulting
   to the last page on load reads as "anchored to the newest message" without any overflow scroll. */

.lpos-c-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
  gap: var(--lpos-gap, 12px);
}

/* ---- head: peer avatar + name/role, pager cluster ---- */
.lpos-c-chat__head {
  flex: 0 0 auto;
  gap: var(--lpos-space-sm, 8px);
}
.lpos-c-chat__peer {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.lpos-c-chat__peer-name {
  font: 700 var(--lpos-text-sm, 14px)/1.2 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-ink, #EAF2FB);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lpos-c-chat__peer-role {
  font: 400 var(--lpos-text-2xs, 12px)/1.2 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-muted, #A8B2C7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ONE-PANEL (2026-08-10): the pager lost its `.lpos-c-subpanel .lpos-c-subpanel--cluster` wrapper
   classes (it sat inside the head, itself a subpanel -- panel inside panel). Those classes were the
   only source of its row layout and gap, so both move here, chromeless. */
.lpos-c-chat__pager {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  gap: var(--lpos-gap, 12px);
}
/* HONESTY (2026-08-10): the "Sample" chip. Identical recipe to .lpos-c-chart__sample so every
   Component's stand-in content is badged the same way. `__samplerow` is the bare carrier used when
   head="off" (the console pane) removes the head that would otherwise hold the chip. */
.lpos-c-chat__sample {
  flex: 0 0 auto;
  font: 600 var(--lpos-text-2xs, 12px) / 1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  letter-spacing: var(--lpos-tracking-label, 0.08em);
  text-transform: uppercase;
  color: var(--lpos-muted, #A8B2C7);
  padding: var(--lpos-space-xs, 4px) var(--lpos-space-sm, 8px);
  border: var(--lpos-border-width, 1px) dashed color-mix(in srgb, var(--lpos-muted, #A8B2C7) var(--lpos-border-alpha-2, 40%), transparent);
  border-radius: var(--lpos-radius-sm, 4px);
}
.lpos-c-chat__samplerow {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
}
.lpos-c-chat__pageinfo {
  font: 600 var(--lpos-text-sm, 14px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-ink, #EAF2FB);
  min-width: 3.5ch;
  text-align: center;
  padding: 0 var(--lpos-space-xs, 4px);
  white-space: nowrap;
}

/* ---- avatars (shared by head + message rows) ---- */
/* CHIP-IN-PANEL EXCEPTION (documented 2026-08-10, JD's law pass -- the same exception media.php
   has carried since 2026-08-04, written down here for the Component sheets that lacked it).
   The one-panel law bans a PANEL inside a panel. It does not ban a CHIP inside a panel: a small
   round or pill-shaped marker that carries its own background/border to read as a distinct token
   ON a surface -- avatars, timeline nodes, status pills, calendar day cells, sample badges, stat
   icons. These are Assets with a shape, not panels: they never take the panel radius, never take
   the panel blur, and never contain other content. A law audit will flag them as "bare chrome
   inside chrome"; that is expected and correct. If one of these ever grows the panel radius plus
   backdrop-filter, it has stopped being a chip and the law applies again. */
.lpos-c-chat__avatar {
  flex: 0 0 auto;
  width: calc(var(--lpos-control-size, 46px) * 0.6);
  height: calc(var(--lpos-control-size, 46px) * 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 var(--lpos-text-xs, 13px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-ink, #EAF2FB);
  background: var(--lpos-glass-2, rgba(255,255,255,0.055));
  border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-accent, #00D4FF) var(--lpos-border-alpha-2, 40%), transparent);
}
.lpos-c-chat__avatar svg {
  width: var(--lpos-icon-size-xs, 20px);
  height: var(--lpos-icon-size-xs, 20px);
  fill: none;
  stroke: currentColor;
}
.lpos-c-chat__avatar--head {
  width: var(--lpos-control-size, 46px);
  height: var(--lpos-control-size, 46px);
  font: 700 var(--lpos-text-sm, 14px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
}
.lpos-c-chat__msg--out .lpos-c-chat__avatar {
  background: color-mix(in srgb, var(--lpos-accent, #00D4FF) var(--lpos-border-alpha-1, 30%), var(--lpos-glass-panel, linear-gradient(180deg, rgba(30,42,66,0.34), rgba(16,24,40,0.45))));
}

/* ---- body / list: fits the panel, no scroll, bottom-anchored current page ---- */
.lpos-c-chat__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  box-sizing: border-box;
}
.lpos-c-chat__empty {
  margin: auto;
  padding: var(--lpos-space-sm, 8px) var(--lpos-space-md, 12px);
  color: var(--lpos-muted, #A8B2C7);
  font: 400 var(--lpos-text-sm, 14px)/1.4 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
}
.lpos-c-chat__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--lpos-space-sm, 8px);
}
.lpos-c-chat__msg[hidden],
.lpos-c-chat__divider[hidden] {
  display: none;
}

/* ---- day divider ---- */
.lpos-c-chat__divider {
  display: flex;
  align-items: center;
  gap: var(--lpos-space-sm, 8px);
  margin: 0;
  color: var(--lpos-muted, #A8B2C7);
  font: 600 var(--lpos-text-2xs, 12px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: var(--lpos-tracking-label, 0.08em);
}
.lpos-c-chat__divider::before,
.lpos-c-chat__divider::after {
  content: "";
  flex: 1 1 auto;
  height: var(--lpos-border-width, 1px);
  background: color-mix(in srgb, var(--lpos-ink, #EAF2FB) 8%, transparent);
}

/* ---- message row + bubble ---- */
.lpos-c-chat__msg {
  display: flex;
  align-items: flex-end;
  gap: var(--lpos-space-sm, 8px);
  max-width: 82%;
  min-width: 0;
}
.lpos-c-chat__msg--in {
  align-self: flex-start;
  flex-direction: row;
}
.lpos-c-chat__msg--out {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.lpos-c-chat__bubble {
  display: flex;
  flex-direction: column;
  gap: var(--lpos-space-xs, 4px);
  min-width: 0;
  padding: var(--lpos-space-sm, 8px) var(--lpos-space-md, 12px);
  background: var(--lpos-glass-2, rgba(255,255,255,0.055));
  border: var(--lpos-border-width, 1px) solid color-mix(in srgb, var(--lpos-ink, #EAF2FB) 8%, transparent);
  border-radius: var(--lpos-radius-panel, 10px) var(--lpos-radius-panel, 10px) var(--lpos-radius-panel, 10px) var(--lpos-radius-sm, 4px);
}
.lpos-c-chat__msg--out .lpos-c-chat__bubble {
  background: color-mix(in srgb, var(--lpos-accent, #00D4FF) var(--lpos-border-alpha-1, 30%), var(--lpos-glass-panel, linear-gradient(180deg, rgba(30,42,66,0.34), rgba(16,24,40,0.45))));
  border-color: color-mix(in srgb, var(--lpos-accent, #00D4FF) var(--lpos-border-alpha-2, 40%), transparent);
  border-radius: var(--lpos-radius-panel, 10px) var(--lpos-radius-panel, 10px) var(--lpos-radius-sm, 4px) var(--lpos-radius-panel, 10px);
}
.lpos-c-chat__text {
  margin: 0;
  font: 400 var(--lpos-text-sm, 14px)/1.5 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-ink, #EAF2FB);
  overflow-wrap: anywhere;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}
.lpos-c-chat__time {
  align-self: flex-end;
  font: 600 var(--lpos-text-2xs, 12px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-muted, #A8B2C7);
}

/* ---- composer ---- */
.lpos-c-chat__composer {
  flex: 0 0 auto;
  height: var(--lpos-control-size, 46px);
  box-sizing: border-box;
  align-items: stretch; /* canon .lpos-search recipe: the input fills the bar via stretch, not a literal height */
  gap: var(--lpos-space-sm, 8px);
}
.lpos-c-chat__composer-label {
  position: absolute;
  width: var(--lpos-border-width, 1px);
  height: var(--lpos-border-width, 1px);
  padding: 0;
  margin: calc(var(--lpos-border-width, 1px) * -1);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Canonical console input recipe (matches .lpos-search input / .lpos-c-select__search input in
   console-tokens.css): the composer's own .lpos-c-subpanel wrapper IS the one visible glass box
   (idle border/background already come from that base class) -- the input itself stays chrome-less
   at rest and only lights up its own hairline + tint on focus, instead of stacking a second bordered
   box inside the bar. */
.lpos-c-chat__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  padding: 0 var(--lpos-space-sm, 8px);
  background: transparent;
  color: var(--lpos-ink, #EAF2FB);
  font: 500 var(--lpos-text-sm, 14px)/1 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  border: var(--lpos-border-width, 1px) solid transparent;
  border-radius: var(--lpos-radius-sm, 4px);
  transition: background-color var(--lpos-duration-fast, 120ms) var(--lpos-ease-tech, cubic-bezier(0.16, 1, 0.3, 1)),
              border-color var(--lpos-duration-fast, 120ms) var(--lpos-ease-tech, cubic-bezier(0.16, 1, 0.3, 1));
}
.lpos-c-chat__input::placeholder {
  color: var(--lpos-muted, #A8B2C7);
}
.lpos-c-chat__input:focus {
  background: var(--lpos-glass-2, rgba(255,255,255,0.055));
  border-color: color-mix(in srgb, var(--lpos-accent, #00D4FF) var(--lpos-border-alpha-2, 40%), transparent);
}
.lpos-c-chat__input:focus-visible {
  outline: none;
  box-shadow: var(--lpos-focus-ring, 0 0 0 2px rgba(0,212,255,.9), 0 0 12px rgba(0,212,255,.6));
}
.lpos-c-chat__note {
  flex: 0 0 auto;
  margin: 0;
  font: 400 var(--lpos-text-2xs, 12px)/1.4 var(--lpos-font-ui, 'Inter', ui-sans-serif, system-ui, sans-serif);
  color: var(--lpos-muted, #A8B2C7);
}

/* ---- icon buttons: ONE recipe for chat/form/kanban/calendar now lives in the COMPONENT ICON
   BUTTON block at the end of console-tokens.css (2026-08-10, JD: "make all four match"). This
   sheet's local copy is deleted -- the four had drifted into four different buttons. ---- */

@media (prefers-reduced-motion: reduce) {
}