/**
 * =========================================
 * CHAT - Messenger-Style Chat Component
 * =========================================
 *
 * Modern chat interface with:
 * - WebSocket real-time messaging
 * - Messenger-style bubbles
 * - Emoji picker support
 * - Desktop sidebar + Mobile drawer
 */

/* ============================================
 * CHAT SIDEBAR (Desktop 768px+)
 * ============================================ */

.chat-sidebar {
  display: none;
}

@media (min-width: 768px) {
  .chat-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 360px;
    max-width: 30vw;
    background: var(--color-bg-primary);
    border-left: 1px solid var(--color-border);
    z-index: var(--z-sidebar, 100);
    transform: translateX(100%);
    transition: transform var(--duration-base) var(--ease-out);
  }

  .chat-sidebar.is-open {
    transform: translateX(0);
  }

  /* Adjust main content when chat is open */
  body.chat-open .main-content {
    margin-right: 360px;
    transition: margin-right var(--duration-base) var(--ease-out);
  }
}

@media (min-width: 1200px) {
  .chat-sidebar {
    width: 400px;
  }

  body.chat-open .main-content {
    margin-right: 400px;
  }
}

/* Chat toggle button for desktop */
.chat-toggle {
  display: none;
}

@media (min-width: 768px) {
  .chat-toggle {
    display: flex;
    position: fixed;
    right: var(--spacing-lg);
    bottom: var(--spacing-lg);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent-purple), var(--color-accent-purple-dark, #5b48c7));
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(108, 92, 231, 0.4);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    transition: all var(--transition-button);
    z-index: var(--z-fab, 1000);
  }

  .chat-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.5);
  }

  .chat-toggle.is-hidden {
    display: none;
  }

  /* Badge for unread messages */
  .chat-toggle__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--color-danger);
    color: white;
    font-size: 12px;
    font-weight: bold;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 2px solid var(--color-bg-primary);
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
  }

  .chat-toggle__badge.has-unread {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
 * CHAT HEADER
 * ============================================ */

.chat__header {
  padding: var(--spacing-md) var(--spacing-lg);
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.15), rgba(91, 72, 199, 0.1));
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.chat__header-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent-purple);
  margin: 0;
}

.chat__status {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.chat__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent-green);
  animation: pulse 2s infinite;
}

.chat__status-dot.disconnected {
  background: var(--color-danger);
  animation: none;
}

.chat__status-dot.connecting {
  background: var(--color-warning);
  animation: blink 1s infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

.chat__close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: all var(--transition-fast);
}

.chat__close:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-accent-purple);
}

/* ============================================
 * CHAT MESSAGES CONTAINER
 * ============================================ */

.chat__messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

/* Custom scrollbar */
.chat__messages::-webkit-scrollbar {
  width: 6px;
}

.chat__messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat__messages::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

.chat__messages::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

/* ============================================
 * MESSAGE BUBBLES
 * ============================================ */

.chat-message {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  animation: messageSlide 0.2s ease-out;
}

@keyframes messageSlide {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Incoming messages (left aligned) */
.chat-message--incoming {
  align-self: flex-start;
}

.chat-message--incoming .chat-message__bubble {
  background: var(--color-bg-tertiary);
  color: var(--primitive-neutral-50, #f5f5fa);
  /* explicit 8.5:1 on #252538 */
  border-radius: 18px 18px 18px 4px;
}

/* Outgoing messages (right aligned) */
.chat-message--outgoing {
  align-self: flex-end;
}

.chat-message--outgoing .chat-message__bubble {
  background: linear-gradient(135deg, var(--color-accent-purple), var(--color-accent-purple-dark, #5b48c7));
  color: white;
  border-radius: 18px 18px 4px 18px;
}

/* Message bubble */
.chat-message__bubble {
  padding: var(--spacing-sm) var(--spacing-md);
  word-wrap: break-word;
  word-break: break-word;
  line-height: 1.4;
  font-size: var(--font-size-md);
}

/* Message sender name */
.chat-message__sender {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--primitive-purple-300, #a99df5);
  /* 5.1:1 contrast on dark bg */
  margin-bottom: 2px;
  padding-left: var(--spacing-xs);
}

.chat-message--outgoing .chat-message__sender {
  display: none;
}

/* Message timestamp */
.chat-message__time {
  font-size: 10px;
  color: var(--color-text-secondary);
  /* #adadc9 — 4.7:1 on dark bg (AA) */
  margin-top: 2px;
  padding: 0 var(--spacing-xs);
}

.chat-message--outgoing .chat-message__time {
  text-align: right;
}

/* Group consecutive messages from same user */
.chat-message--grouped {
  margin-top: -4px;
}

.chat-message--grouped .chat-message__sender {
  display: none;
}

.chat-message--grouped.chat-message--incoming .chat-message__bubble {
  border-radius: 18px 18px 18px 4px;
}

.chat-message--grouped.chat-message--outgoing .chat-message__bubble {
  border-radius: 18px 18px 4px 18px;
}

/* ============================================
 * TYPING INDICATOR
 * ============================================ */

.chat-typing {
  display: none;
  align-self: flex-start;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-tertiary);
  border-radius: 18px;
  margin-top: var(--spacing-xs);
}

.chat-typing.is-visible {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.chat-typing__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
}

.chat-typing__dots {
  display: flex;
  gap: 3px;
}

.chat-typing__dot {
  width: 6px;
  height: 6px;
  background: var(--color-text-tertiary);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite;
}

.chat-typing__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.chat-typing__dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {

  0%,
  60%,
  100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-4px);
  }
}

/* ============================================
 * CHAT INPUT AREA
 * ============================================ */

.chat__input-area {
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  flex-shrink: 0;
}

.chat__input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-sm);
  background: var(--color-bg-tertiary);
  border-radius: 24px;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-border);
  transition: border-color var(--transition-fast);
}

.chat__input-wrapper:focus-within {
  border-color: var(--color-accent-purple);
}

/* Emoji button */
.chat__emoji-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.chat__emoji-btn:hover {
  background: var(--color-bg-hover);
  color: var(--color-accent-purple);
}

.chat__emoji-btn.is-active {
  background: rgba(108, 92, 231, 0.1);
  color: var(--color-accent-purple);
}

/* Text input */
.chat__input {
  flex: 1;
  border: none;
  background: transparent;
  padding: var(--spacing-sm) 0;
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
  resize: none;
  max-height: 100px;
  min-height: 20px;
  line-height: 1.4;
  font-family: inherit;
}

.chat__input::placeholder {
  color: var(--color-text-tertiary);
}

.chat__input:focus {
  outline: none;
}

/* Send button */
.chat__send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-accent-purple), var(--color-accent-purple-dark, #5b48c7));
  border: none;
  color: white;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.chat__send-btn:hover:not(:disabled) {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.4);
}

.chat__send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Cooldown indicator */
.chat__cooldown {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  text-align: center;
  padding-top: var(--spacing-xs);
  display: none;
}

.chat__cooldown.is-visible {
  display: block;
}

/* ============================================
 * EMOJI PICKER
 * ============================================ */

.emoji-picker {
  display: none;
  position: absolute;
  bottom: 100%;
  left: var(--spacing-md);
  right: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  max-height: 280px;
  overflow: hidden;
  z-index: 10;
}

.emoji-picker.is-open {
  display: flex;
  flex-direction: column;
}

/* Emoji picker tabs */
.emoji-picker__tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-xs);
  gap: var(--spacing-xs);
  overflow-x: auto;
  flex-shrink: 0;
}

.emoji-picker__tab {
  padding: var(--spacing-xs) var(--spacing-sm);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 18px;
  opacity: 0.6;
  transition: all var(--transition-fast);
}

.emoji-picker__tab:hover {
  background: var(--color-bg-hover);
  opacity: 1;
}

.emoji-picker__tab.is-active {
  background: rgba(108, 92, 231, 0.1);
  opacity: 1;
}

/* Emoji grid */
.emoji-picker__content {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-sm);
}

.emoji-picker__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}

.emoji-picker__emoji {
  width: 100%;
  aspect-ratio: 1;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.emoji-picker__emoji:hover {
  background: var(--color-bg-hover);
  transform: scale(1.2);
}

/* ============================================
 * CONNECTION STATUS BAR
 * ============================================ */

.chat__connection-bar {
  padding: var(--spacing-xs) var(--spacing-md);
  text-align: center;
  font-size: var(--font-size-sm);
  display: none;
}

.chat__connection-bar.is-visible {
  display: block;
}

.chat__connection-bar.connecting {
  background: rgba(252, 211, 77, 0.2);
  color: var(--color-warning);
}

.chat__connection-bar.disconnected {
  background: rgba(239, 68, 68, 0.2);
  color: var(--color-danger);
}

.chat__connection-bar.reconnecting {
  background: rgba(59, 130, 246, 0.2);
  color: #3b82f6;
}

/* ============================================
 * SYSTEM MESSAGES
 * ============================================ */

.chat-message--system {
  align-self: center;
  max-width: 90%;
}

.chat-message--system .chat-message__bubble {
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  font-style: italic;
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* ============================================
 * DATE SEPARATOR
 * ============================================ */

.chat-date-separator {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin: var(--spacing-md) 0;
}

.chat-date-separator__line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.chat-date-separator__text {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================
 * MOBILE DRAWER OVERRIDES
 * ============================================ */

@media (max-width: 767px) {

  /* Keep using drawer on mobile but with new message styles */
  .drawer--chat .drawer__content {
    padding: var(--spacing-sm);
    display: flex;
    flex-direction: column;
  }

  .drawer--chat #chat-messages {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .drawer--chat .drawer__footer {
    position: relative;
  }
}

/* ============================================
 * ACCESSIBILITY
 * ============================================ */

.chat__send-btn:focus-visible,
.chat__emoji-btn:focus-visible,
.emoji-picker__emoji:focus-visible {
  outline: 2px solid var(--color-accent-purple);
  outline-offset: 2px;
}

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

  .chat-message,
  .chat-typing__dot {
    animation: none;
  }
}

/* ==========================================================================
   GYVA PANELĖ (2026-09-03)
   Pokalbis + sisteminės „prisijungė" eilutės centrinėje kolonoje, ≤1023px.
   Specas: docs/superpowers/specs/2026-09-03-klasikine-pokalbis-panele-design.md
   ========================================================================== */

/* Prislopinti kortelės akcentai (2026-09-04).

   Bendri tokenai (`#fbbf24`, `#2ecc71`) yra brandingo spalvos — jos skirtos
   pasirodyti po kartą: mygtukas, fokuso žiedas, antraštė. Šiame sąraše vardas
   ir suma kartojasi kas eilutę, ir tas pats sodrumas iš akcento virsta triukšmu:
   akis nebeturi kur nutūpti, nes rėkia viskas.

   Todėl ČIA jos silpnesnės — tas pats atspalvis, mažesnis sodrumas. Tokenų
   neliečiame: jie galioja visai svetainei, o problema yra tik kartojimas.
   Norint dar švelniau ar atgal sodriau, keičiamos tik šios dvi eilutės. */
/* Akcentas ir žalia — abiem kortelėms.
   ==========================================
   Iki 2026-09-13 tokenai buvo apibrėžti TIK ant `.live-panel`, o „Stalo"
   kortelė jų nepaveldėdavo: jos viduje esantys `.live-panel__*` elementai
   nestovi `.live-panel` viduje, tad visur suveikdavo `var()` atsarga. Dėl to
   akcento keitimas vienoje vietoje darbalaukio kortelės nepaliesdavo.

   `--chat-accent` perrašo režimas (Auksinis #f5c518, Grandinėlė gintarinė);
   be jo lieka klasikinės auksas. Vardas `--panel-gold` istorinis — komponentas
   gimė klasikinėje. */
.live-panel,
.live-table {
  --panel-gold: var(--chat-accent, #cbb079);
  --panel-green: #6fb692;
}

.live-panel {

  /* Atskaita antraštės etiketei, įsėdusiai į kortelės rėmelį. Stacking
	   context čia nieko nelaužo: `.chat-sidebar` ir `.chat-toggle` — vieninteliai
	   `position: fixed` šiame faile — gyvena už kortelės ribų, o toast'as
	   keliauja į `document.body`. */
  position: relative;

  display: none;
  background: var(--color-bg-secondary, #1a1a2e);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-card, 12px);
  padding: var(--spacing-md, 1rem);
  margin-bottom: var(--spacing-sm, 0.5rem);
}

/* ≤1023px panelė perima pokalbį, o stalčius užrakinamas.
   `!important` čia pagrįstas: fab-drawer.js atidarydamas stalčių prideda
   klases ir inline stilius, tad draudimas turi nusverti besąlygiškai. */
@media (max-width: 1023px) {
  .live-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.375rem);
    margin-top: var(--spacing-sm);
  }

  .drawer--chat,
  #chat-backdrop {
    display: none !important;
  }
}

/* Antraštė, skaitiklis ir laukas — viena juosta.

   Atskira antraštės eilutė kainavo ~28 px vien tam, kad pasakytų vieną žodį.
   Kortelės vardas ir jos valdiklis puikiai sugyvena greta, o `flex-wrap`
   pasirūpina siaurais ekranais: nebetilpęs laukas nusileidžia žemiau pats,
   be jokio media query. */
.live-panel__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
}

.live-panel__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 0.375rem);
}

/* Laukas užima visą likutį, bet po 190 px persikelia į savo eilutę —
   siauresniame nei tai rašyti nebeįmanoma. */
.live-panel__form,
.live-panel__guest {
  flex: 1 1 190px;
  min-width: 0;
}

.live-panel__title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: clamp(0.95rem, 3vw, 1.05rem);
  font-weight: 700;
  /* Display šriftas turi paveldėtą `line-height: 1.1`, ir „y" uodegėlė
	   nusikirsdavo ties kortelės kraštu. Antraštė viena eilutė — vietos
	   tai nekainuoja. */
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--color-accent-gold, #e7ca93);
}

/* Skaitiklis — plika skaitmena su tašku, apvilkta vos matoma kapsule.
   Be jokio fono skaičius kabodavo tuščiame kampe ir atrodė kaip pamiršta
   liekana; su rėmeliu ar spalva jis imtų varžytis su antrašte. Kapsulė iš
   6 % baltumo yra tiek, kad skaičius turėtų kur stovėti, ir ne daugiau.

   Mono šeima — DESIGN.md „Mono-Label Rule": HUD skaitmenys visur mono. */
.live-panel__online {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.55em;
  border-radius: var(--radius-full, 9999px);
  background: rgba(245, 245, 250, 0.06);
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-text-secondary, #adadc9);
  font-variant-numeric: tabular-nums;
  cursor: default;
}

/* Žmogaus siluetas vietoj žodžio „pokalbyje".

   Žodis eilutėje buvo būtinas, kol skaičius stovėjo vienas: ekranu žemiau yra
   „Online Dabar" su VISAI KITU skaičiumi (ten — svetainės lankytojai, čia —
   pokalbio jungtys), ir plikas „● 2" atrodė kaip ta pati reikšmė du kartus.
   Siluetas tą darbą atlieka be devynių simbolių, o emoji juostoje, kur vietos
   maža, tai skirtumas tarp „telpa" ir „netelpa". Žodis niekur nedingo — jis
   persikėlė į `title` ir į `.sr-only`, tad ekrano skaitytuvas girdi tą patį
   sakinį kaip anksčiau.

   Siluetas perėmė ir žalio taško vaidmenį: viena forma, viena spalva. Nutrūkus
   ryšiui jis pilkėja — skaičius užšalo, ir tai matosi. */
.live-panel__online-icon {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  color: var(--panel-green, #6fb692);
  /* Tik spalva, jokio pulsavimo: kortelė ir taip pilna judančio turinio. */
  transition: color var(--duration-base, 250ms) var(--ease-default, ease-out);
}

.live-panel__online.is-offline .live-panel__online-icon {
  color: var(--color-text-tertiary, #8080a0);
}

/* Emoji juostoje kapsulės nebereikia: skaičius jau turi kur stovėti, o antras
   fonas greta emoji mygtukų būtų trečias sluoksnis toje pačioje eilutėje.
   `margin-left: auto` prispaudžia jį prie dešiniojo krašto. */
.live-panel__online--bare {
  margin-left: auto;
  padding: 0;
  background: none;
  font-size: 11px;
  line-height: 1;
  gap: 0.35em;
}

/* VIENAS kortelės slinkties konteineris.

   Anksčiau jų buvo du (pokalbis 30vh + srautas 34vh) vienas virš kito, ir
   kartu jie uždengdavo beveik visą telefono ekraną. Pirštas beveik niekada
   nepataikydavo į patį puslapį, o `overscroll-behavior: contain` neleisdavo
   slinkčiai persimesti į jį net pasiekus sąrašo galą — todėl puslapis
   atrodydavo užstrigęs. Dabar sąrašas vienas, o pasiekus jo galą slinktis
   natūraliai tęsiasi puslapiu. */
.live-panel__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* 2026-09-04: kortelė sutrumpinta dviem žingsniais — pirma ~20 %, paskui dar
	   8 %. Galvutė, laukas ir būsenos eilutė yra pastovaus aukščio, tad visą
	   sumažinimą prisiima sąrašas: 52vh → 38vh → 34vh → 33vh. Citata ir „Online dabar"
	   dėl to pakyla arčiau pirmo ekrano. Paskutinis vh atiduotas įvedimo
	   kapsulei, kuri už seną eilutę yra 4 px aukštesnė. */
  min-height: 110px;
  max-height: clamp(165px, 33vh, 385px);
  /* Plaukelio storio riba tarp lauko ir srauto. Laukui atsidūrus viršuje,
	   be jos įvedimo eilutė ir pirmoji žinutė sulimpa į vieną bloką. */
  margin-top: var(--spacing-xs, 0.375rem);
  padding-top: var(--spacing-xs, 0.375rem);
  border-top: 1px solid rgba(245, 245, 250, 0.09);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 245, 250, 0.24) transparent;
}

.live-panel__list::-webkit-scrollbar {
  width: 6px;
}

.live-panel__list::-webkit-scrollbar-track {
  background: transparent;
}

.live-panel__list::-webkit-scrollbar-thumb {
  background: rgba(245, 245, 250, 0.24);
  border-radius: 3px;
}

/* „Rodyti dar 40" — PASKUTINĖ sąrašo eilutė, ne blokas po sąrašu.

   Todėl mygtukas pasirodo akyse tik nuslinkus iki galo, ir jokio `scroll`
   klausytojo tam nereikia. Prislopintas sąmoningai: tai įrankis, ne turinys —
   greta gulinčios eilutės turi likti ryškesnės už jį.

   #cbb079 ant suplokštinto fono (0,08 aukso ant #1a1a2e) = 7,1:1. */
.live-panel__more {
  display: flex;
  justify-content: center;
  padding: var(--spacing-xs, 0.375rem) 0 2px;
}

.live-panel__more-btn {
  padding: 6px 16px;
  border: 1px solid rgba(203, 176, 121, 0.32);
  border-radius: 999px;
  background: rgba(203, 176, 121, 0.08);
  color: var(--panel-gold, #cbb079);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background var(--duration-fast, 150ms) var(--ease-default, ease-out),
    border-color var(--duration-fast, 150ms) var(--ease-default, ease-out),
    color var(--duration-fast, 150ms) var(--ease-default, ease-out);
}

.live-panel__more-btn:hover {
  background: rgba(203, 176, 121, 0.16);
  border-color: rgba(203, 176, 121, 0.55);
}

.live-panel__more-btn:focus-visible {
  outline: 2px solid var(--panel-gold, #cbb079);
  outline-offset: 2px;
}

/* Rodyklė sako kryptį: senesnės eilutės ateis ŽEMIAU, ne pakeis esamas.
   Užvedus ji pastumiama tuo pačiu 2 px, kuriuo pajudės ir sąrašas. */
.live-panel__more-arrow {
  display: inline-block;
  margin-left: 0.4em;
  font-size: 0.95em;
  line-height: 1;
  transition: transform var(--duration-fast, 150ms) var(--ease-default, ease-out);
}

.live-panel__more-btn:hover .live-panel__more-arrow {
  transform: translateY(2px);
}

@media (prefers-reduced-motion: reduce) {
  .live-panel__more-arrow {
    transition: none;
  }

  .live-panel__more-btn:hover .live-panel__more-arrow {
    transform: none;
  }
}

/* Kraunant mygtukas lieka toje pačioje vietoje — tik nustoja atrodyti
   spaudžiamas. Rodyklė slepiama per `visibility`, ne `display`: krypties tuo
   metu nėra, bet jos vieta turi likti, kitaip mygtukas trumpam susitrauktų. */
.live-panel__more-btn:disabled {
  cursor: default;
  color: var(--color-text-secondary, #adadc9);
  border-color: rgba(245, 245, 250, 0.14);
  background: none;
}

.live-panel__more-btn:disabled .live-panel__more-arrow {
  visibility: hidden;
}

/* Viena eilutės forma visoms trims rūšims — žinutei, sisteminiam įvykiui ir
   srauto atsakymui. Burbulai tinka dviese, o čia viename sraute maišosi trys
   tipai — vienoda eilutė skaitosi greičiau ir lengviau lyginama akimis.

   Ketvirtas stulpelis (suma) tuščias žinutėse — būtent tai ir daro srauto
   eilutę atpažįstamą nekeičiant jos kalbos. */
.chat-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: var(--spacing-xs, 0.375rem);
  align-items: baseline;
  padding: 2px var(--spacing-xs, 0.375rem);
  font-size: clamp(0.8rem, 2.6vw, 0.9rem);
  line-height: 1.45;
}

/* #adadc9 ant #1a1a2e = 7,8:1. `--color-text-tertiary` (#8080a0) čia NETINKA:
   ant to paties fono jis duoda 4,48:1 — žemiau AA ribos. */
.chat-row__time {
  color: var(--color-text-secondary, #adadc9);
  font-variant-numeric: tabular-nums;
  font-size: 0.85em;
}

.chat-row__name {
  font-weight: 600;
  color: var(--panel-gold, #cbb079);
  white-space: nowrap;
}

.chat-row__text {
  color: var(--color-text-primary, #f5f5fa);
  overflow-wrap: anywhere;
}

.chat-row--system .chat-row__name {
  font-weight: 500;
  color: var(--color-text-secondary, #adadc9);
}

.chat-row--system .chat-row__text {
  color: var(--color-text-secondary, #adadc9);
  font-style: italic;
}

/* VALANDOS CITATA (2026-09-11)

   Tyliomis valandomis serveris pats įrašo citatą iš `quotes` lentelės
   (`a_chat_server.js`, postQuote()). Pokalbis čia stovi puslapyje ir didžiąją
   paros dalį yra tuščias — 0,24 žmogaus vienu metu, — tad be jos darbalaukio
   kortelė rodytų vien „X prisijungė" eilučių sieną.

   Forma sąmoningai NE žinutės: vardo stulpelio nėra, autorius eina po tekstu,
   o kairėje stovi auksinė linija. Kas nors, kas atrodo kaip žinutė, skaitomas
   kaip kažkieno parašytas — o šitos niekas neparašė. */
.chat-row--quote .chat-row__quote {
  /* Nuo antro stulpelio iki galo: vardui skirtos skilties citata neturi. */
  grid-column: 2 / -1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0;
  padding: 2px 0 2px var(--spacing-sm, 0.5rem);
  border-left: 2px solid var(--panel-gold, #cbb079);
}

.chat-row--quote .chat-row__quote-text {
  color: var(--color-text-primary, #f5f5fa);
  font-style: italic;
  overflow-wrap: anywhere;
}

.chat-row--quote .chat-row__quote-author {
  font-size: 0.85em;
  /* #adadc9 ant #1a1a2e = 7,8:1. Tas pats tonas kaip laiko stulpelyje: abu yra
     eilutės metrika, ne turinys. */
  color: var(--color-text-secondary, #adadc9);
}

/* Brūkšnys piešiamas, o ne rašomas į tekstą: taip pažymėjus ir nukopijavus
   citatą į iškarpinę patenka vardas be pradinio brūkšnio. */
.chat-row--quote .chat-row__quote-author::before {
  content: '— ';
}

.live-panel__status {
  margin: 0;
  min-height: 1em;
  font-size: 0.78rem;
  color: var(--color-text-secondary, #adadc9);
}

.live-panel__status:empty {
  display: none;
}

.live-panel__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs, 0.375rem);
  margin: 0;
}

/* Laukas ir mygtukas — viena kapsulė.

   Anksčiau tai buvo du atskiri stačiakampiai su tarpu: platus tamsus laukas ir
   greta jo sodrus auksinis kvadratas, aukštesnis už visą kortelės antraštę.
   Mygtukas traukė akį stipriau už bet kurią eilutę, nors yra ne turinys, o
   įrankis. Sudėjus juos į vieną kapsulę, mygtukas tampa jos dalimi — apvalus,
   mažesnis, prislopinto aukso, — o fokuso žiedas apjuosia visą valdiklį. */
.live-panel__field {
  flex: 1 1 100%;
  display: flex;
  /* Be `min-width: 0` kapsulė nesusitraukia žemiau vidinio `<input>` pločio:
	   390 px ekrane dešinė kortelės paraštė susitraukdavo nuo 16 iki 8 px, o
	   375 px ekrane kapsulė peržengdavo kortelės rėmelį 6 px. */
  min-width: 0;
  align-items: center;
  gap: 4px;
  padding: 3px;
  /* Ta pati forma kaip `.answer-input` virš kortelės (`--radius-sm`, 4 px).
	   Du įvedimo laukai viename ekrane turi atrodyti kaip vienos sistemos
	   dalys — kapsulė šalia stačiakampio skaitėsi kaip svetimas valdiklis. */
  border-radius: var(--radius-sm, 4px);
  border: 1px solid rgba(245, 245, 250, 0.12);
  background: var(--color-bg-primary, #0f0f1f);
  transition: border-color var(--duration-fast, 150ms) var(--ease-default, ease-out);
}

/* UŽRAKINTAS LAUKAS (2026-09-11)

   Nepatvirtinusiam el. paštą anksčiau buvo rodomas raginimas su dideliu
   geltonu mygtuku „Mano profilis". Jis traukė akį labiau nei pats pokalbis ir
   atrodė kaip pagrindinis puslapio veiksmas, nors tebuvo nuoroda.

   Dabar rodomas tas pats laukas, tik prislopintas: žmogus mato, kur rašytų, ir
   mato, kad dabar negali. Nuoroda patvirtinti stovi viršuje (`verify-gate`),
   tad čia jos kartoti nereikia. */
.live-panel__field--locked {
  border-style: dashed;
  border-color: rgba(245, 245, 250, 0.14);
  background: rgba(15, 15, 31, 0.55);
  cursor: not-allowed;
}

.live-panel__field--locked .live-panel__input {
  color: var(--color-text-secondary, #adadc9);
  cursor: not-allowed;
}

/* Placeholder yra vienintelis šio lauko tekstas, tad jis privalo būti
   skaitomas, o ne blankus dekoras: naršyklės numatytasis ~0,5 permatomumas ant
   tamsaus fono nukristų žemiau WCAG AA. */
.live-panel__field--locked .live-panel__input::placeholder {
  color: var(--color-text-secondary, #adadc9);
  opacity: 1;
}

.live-panel__field--locked .live-panel__send {
  /* Mygtukas čia — tik formos dalis, kad laukas atrodytų pažįstamai. Aukso
     spalva prislopinama, kitaip neveikiantis mygtukas liktų ryškiausiu tašku. */
  background: rgba(203, 176, 121, 0.25);
  color: rgba(26, 26, 46, 0.65);
  opacity: 1;
}

/* Fokusas ant viso valdiklio, ne ant vienos jo pusės. DESIGN.md: 2px akcento
   žiedas su nedideliu atitraukimu, ne storas rėmas. */
.live-panel__field:focus-within {
  border-color: transparent;
  outline: 2px solid var(--panel-gold, #cbb079);
  outline-offset: 2px;
}

/* ANTRAŠTĖ KORTELĖS RĖMELYJE (2026-09-04)

   „GYVAI" nebeturi savo eilutės — jis įsėda į pačios kortelės rėmelį.
   Absoliučiai pozicionuota etiketė, nudažyta tuo, kas už kortelės, iškerpa
   liniją po savimi; tas pats raštas, kurį `<fieldset>`/`<legend>` daro pats,
   tik be fieldset keistenybių flex konteineryje.

   Vertikaliai nekainuoja nieko (etiketė gyvena virš kortelės krašto), o juosta
   netekusi antraštės atiduoda laukui visą plotį: 195 -> 272 px 390 px ekrane.

   SĄLYGA: `background` turi sutapti su tuo, kas piešiama UŽ kortelės. Artimiausias
   dažantis protėvis yra `.game-layout` su `var(--color-bg-primary)` — vientisa
   spalva, todėl įpjova veikia. Jei kada nors ten atsirastų gradientas ar
   paveikslėlis, žodis atrodytų kaip dėmė ir reikėtų tikro `<fieldset>`.

   ANTRA SĄLYGA: etiketė kyla 5 px virš kortelės krašto, tad virš jos turi likti
   bent tiek laisvos vietos. Šiuo metu `.game-board` tarpas tarp kortelių yra
   8 px — telpa su 3 px atsarga. Sumažinus tą tarpą, žodis užliptų ant klausimo
   kortelės. */
.live-panel__legend {
  position: absolute;
  top: 0;
  /* 16 px praleidžia 12 px kortelės kampo lenkimą. */
  left: 16px;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 6px;
  background: var(--color-bg-primary, #0f0f1f);
  font-family: var(--font-display, inherit);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-gold, #fbbf24);
  /* Etiketė kabo virš lauko krašto — pelės ji neturi gaudyti. */
  pointer-events: none;
}

.live-panel__input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 0 0 var(--spacing-sm, 0.5rem);
  border: 0;
  background: transparent;
  color: var(--color-text-primary, #f5f5fa);
  font-size: 16px;
  /* <16px priverčia iOS priartinti puslapį fokusuojant */
}

.live-panel__send {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  /* Kaip `.answer-input__submit-icon`: suapvalintas kvadratas prie dešiniojo
	   krašto, ne apskritimas. */
  border-radius: var(--radius-sm, 4px);
  background: var(--panel-gold, #cbb079);
  color: #1a1a2e;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--duration-fast, 150ms) var(--ease-default, ease-out);
}

.live-panel__send:hover:not(:disabled) {
  background: #ddc48f;
}

.live-panel__send:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Emoji juosta vietos neužima, kol nerašai: pasirodo tik atsiradus žymekliui
   lauke ir išnyksta jį praradus. Telefone kiekvienas nuolat matomas 36px
   ruožas yra tikra kaina — pokalbis dalijasi ekranu su klausimu ir srautu. */
/* 2026-09-04: emoji sumažinti 30 %. Apatinis tarpas priešingai — padidintas:
   po juosta dabar stovi rėmelio etiketė, kuriai reikia oro. */

/* Emoji kairėje, skaitiklis dešinėje — viena eilutė.

   Abu pasirodo tuo pačiu momentu (žymeklis lauke), tad atskira eilutė
   skaičiui buvo dviguba kaina: 17 px aukščio ir antra mono eilutė ekrane,
   kai emoji juostos dešinė pusė stovėjo tuščia. `margin-left: auto` prie
   skaitiklio — vienintelis dalykas, kuris jį ten nustumia; emoji juosta pati
   plečiasi tiek, kiek reikia mygtukams. */
.live-panel__quickrow {
  display: none;
  flex-basis: 100%;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
  padding-bottom: 10px;
}

.live-panel__form:focus-within .live-panel__quickrow {
  display: flex;
}

/* `display: none` lieka numatytoji: stalčiaus (`#chat-form`) emoji juosta
   quickrow'o neturi ir be jo nerodoma — taip buvo ir iki šiol. */
.live-panel__emoji {
  display: none;
  flex-basis: 100%;
  gap: 6px;
  padding-bottom: 10px;
}

.live-panel__quickrow .live-panel__emoji {
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  flex-basis: auto;
  min-width: 0;
  padding-bottom: 0;
}

.live-panel__emoji button {
  background: none;
  border: 0;
  padding: 0;
  /* 20,8 -> 14,6 px ir 36 -> 25 px. 25 px dar telpa virš 24 px WCAG AA ribos
	   lietimo taikiniui, bet nykščiu pataikyti sunkiau nei anksčiau. */
  font-size: 0.91rem;
  line-height: 1;
  min-width: 25px;
  min-height: 25px;
  cursor: pointer;
}

.live-panel__guest {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm, 0.5rem);
  flex-wrap: wrap;
}

.live-panel__guest-text {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-secondary, #adadc9);
}

/* Stalčiuje eilutės tos pačios, bet sąrašo atstatymą reikia pakartoti ČIA,
   be media query.

   Priežastis: identiška taisyklė jau yra `chat.css:675`, tačiau ji uždaryta
   `@media (max-width: 767px)` bloke. Iki 2026-09-03 tai buvo teisinga —
   stalčius buvo mobilus. Dabar jis rodomas tik nuo 1024px, tad visas tas
   blokas pokalbio stalčiui nebegalioja ir <ul> liktų su naršyklės
   numatytuoju padding'u bei taškeliais. */
.drawer--chat #chat-messages {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   SRAUTO EILUTĖ BENDRAME SĄRAŠE (2026-09-03, antras praėjimas)

   Iki šiol srautas buvo atskira `<details>Srautas` skiltis su savo sąrašu,
   savo tipografija ir savo slinktimi. Dabar `historyService` piešia tokį pat
   `.chat-row` `<li>` į TĄ PATĮ sąrašą kaip pokalbis, chronologiškai — todėl
   visos senos `.live-panel .history-*` perrašymo taisyklės čia nebereikalingos
   ir pašalintos. Kairę darbalaukio juostą (`#history-list`) jos vis dar
   aptarnauja iš `classique.css`, ir ten nieko nepasikeitė.

   Skiriamieji ženklai lieka du, abu smulkūs: būsenos taškas prie vardo ir
   suma dešinėje. Nei kito šrifto, nei kito fono — kitaip vienoje kortelėje
   vėl atsirastų du komponentai.
   ========================================================================== */

.chat-row--event .chat-row__name {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
}

/* Būsena — 5px taškas, ne šoninė juostelė ir ne spalvotas fonas. Tas pats
   signalas, bet neužima eilutės pločio ir nekonkuruoja su tekstu. */
.chat-row--event .chat-row__name::before {
  content: '';
  flex: none;
  align-self: center;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--row-state, var(--color-text-secondary, #adadc9));
}

.chat-row--win {
  --row-state: var(--panel-green, #6fb692);
}

.chat-row--late {
  --row-state: var(--color-warning, #f97316);
}

.chat-row--loss {
  --row-state: var(--color-error, #ef4444);
}

/* Frazė ir detalė — prislopintos: eilutėje svarbiausia KAS ir KIEK.
   #adadc9 ant #1a1a2e = 7,8:1. `--color-text-tertiary` (#8080a0) čia NETINKA:
   ant to paties fono jis duoda 4,48:1 — žemiau AA ribos. */
.chat-row--event .chat-row__text {
  color: var(--color-text-secondary, #adadc9);
}

/* Atsakymas — vienintelis ryškus žodis frazėje. Kol prieš jį stovėjo etiketė
   „atsakymas:", jo išskirti nereikėjo; be jos ryškumas yra tai, kas pasako,
   kur baigiasi aprašymas ir prasideda turinys. #f5f5fa ant #1a1a2e = 15,7:1. */
.chat-row__detail {
  color: var(--color-text-primary, #f5f5fa);
  font-weight: 600;
}

/* Neteisingas spėjimas nėra turinys, kurio žmogus ieško — jis lieka prislopintas
   kartu su „bandė:". Ryškinti klaidą reikštų duoti jai daugiau svorio nei
   teisingam atsakymui gretimoje eilutėje. */
.chat-row--loss .chat-row__detail {
  color: var(--color-text-secondary, #adadc9);
  font-weight: 400;
}

/* Suma — vienintelė žalia dėmė eilutėje. #6fb692 ant #1a1a2e = 7,1:1. */
.chat-row__amount {
  justify-self: end;
  white-space: nowrap;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--panel-green, #6fb692);
}

/* Pavėluotas atsakymas litų neduoda, tad ir žalios nenusipelno. */
.chat-row--late .chat-row__amount {
  font-weight: 400;
  color: var(--color-text-secondary, #adadc9);
}

.chat-row--loss .chat-row__amount {
  color: var(--color-error, #ef4444);
}

/* ==========================================================================
   FOKUSAS
   ========================================================================== */

/* DESIGN.md: „2px accent-color outline with a small offset", ne storas rėmas.
   Įvedimo laukas jau turi savo rėmelį, tad fokusas tik jį paryškina. */
/* Pats laukas žiedo nebeturi — jį neša kapsulė `.live-panel__field`. Du žiedai
   vienas kitame atrodytų kaip klaida. */
.live-panel__input:focus,
.live-panel__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.live-panel__send:focus-visible,
.live-panel__emoji button:focus-visible {
  outline: 2px solid var(--panel-gold, #cbb079);
  outline-offset: 2px;
}
/* ==========================================================================
   SVEČIO MYGTUKAS
   ==========================================================================
   Iki 2026-09-13 `.guest-btn` taisyklės gyveno `classique.css`, nors markup'as
   — komponento (`composer.php`). Kituose režimuose nuoroda dėl to likdavo
   pliku tekstu: komponentas atsinešdavo HTML, bet ne jo išvaizdą.

   Taikoma TIK pokalbio viduje, kad likusios dvi klasikinės `.guest-btn` vietos
   liktų savo failo žinioje. Reikšmės sutampa su `classique.css` — `--accent-gold`
   ten yra #fbbf24, o čia ta pati reikšmė stovi kaip `var()` atsarga, tad
   klasikinėje niekas nepasikeičia, o Auksinis su Grandinėle gauna tą patį
   mygtuką. */
.live-panel__guest .guest-btn {
  text-decoration: none;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* #0f0f1f ant #fbbf24 = 12,6:1. */
.live-panel__guest .guest-btn--primary {
  background: var(--accent-gold, #fbbf24);
  color: #0f0f1f;
}