/* =========================================================================
   STALAS — darbalaukio pokalbis (≥1024px)
   =========================================================================

   Kraunamas PO `chat.css`, nes naudoja tas pačias `.live-panel__*` dalis
   (kapsulę, lauką, mygtuką, emoji juostą) ir kai kurias jų perrašo plačioje
   kortelėje. Kaskados tvarka, ne `!important`.

   KĄ TAI PAKEIČIA

   Iki 2026-09-11 darbalaukyje pokalbio puslapyje nebuvo. Jis gyveno
   `#chat-drawer` stalčiuje: 380 px slenkanti panelė, uždedanti ant puslapio
   užtemdytą foną. Kalbėti ir žaisti vienu metu buvo neįmanoma — o būtent tai
   žmogus ir daro viktorinoje. Kortelės vietoje kabojo „ONLINE DABAR ● 0".

   MAKETAS

   Dvi kolonos. Kairė (148 px) — kas prie stalo, dešinė — pokalbis. Skirtukas
   yra viena linija, ne antra kortelė: tai vienas daiktas dviem kolonomis, o
   du rėmeliai greta skaitytųsi kaip du nesusiję valdikliai.

   KODĖL KAIRĖ JUOSTA RODO IR PRAEITĮ

   Svetainėje vidutiniškai 0,24 žmogaus vienu metu (matuota 2026-09-04 iš
   apache logų), tad grynas „kas dabar online" sąrašas ~75 % paros būtų
   tuščias. Todėl `live-table.js` po dabartinių sudeda neseniai kalbėjusius —
   jie piešiami prislopinti (`--past`).

   Prislopinamas AVATARAS, ne tekstas. Praeities žmogaus vardas ir laikas
   lieka pilno kontrasto (#adadc9 ant #1a1a2e ≈ 7:1): prasmė gali būti tyli,
   skaitomumas — ne. `--color-text-tertiary` (#8080a0) čia netinka, jis ant
   šio fono duoda 4,48:1, žemiau WCAG AA ribos.
   ========================================================================= */

.live-table {
	/* Bazė — paslėpta. Iki 1024px pokalbį neša `.live-panel` centrinėje
	   kolonoje, ir dvi kortelės viename ekrane rodytų tą patį dukart. */
	display: none;

	/* Atskaita rėmelyje sėdinčiai etiketei. */
	position: relative;

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

@media (min-width: 1024px) {
	.live-table {
		display: grid;
		/* Kairė fiksuota: avataro (32) + vardo stulpelis, kuris neturi
		   plėstis atimdamas plotį iš pokalbio. */
		grid-template-columns: 148px minmax(0, 1fr);
		align-items: stretch;
	}

	/* Stalčius nuo šiol neturi ko rodyti: tas pats pokalbis stovi puslapyje, o
	   išslinkęs stalčius uždengtų kortelę, kurią ką tik atidarėme.

	   Slepiama CSS, o ne šalinama iš HTML: `fab-drawer.js` ir pokalbio
	   `watchDrawerVisibility()` tebeieško šių elementų, ir tegul randa.

	   Jį atidarantis mygtukas slepiamas ne čia, o `fab.css` — ten taisyklės
	   naudoja `!important`, tad nusverti jas galima tik tame pačiame faile. */
	.drawer--chat,
	#chat-backdrop {
		display: none;
	}

	/* Atgautas dešinysis koridorius. `--fab-lane` (56 px mygtukas + 16 px oro)
	   buvo atimtas iš maketo būtent dėl to mygtuko; jam dingus, tai tiesiog
	   tuščias 72 px ruožas. `.game-layout` visose media query naudoja
	   `padding` shorthand'ą, tad perrašyti reikia abu dydžius. */
	.game-layout {
		--fab-lane: 0px;
	}

	/* Prisijungusiųjų kortelė centrinės kolonos gale — tas pats sąrašas, kurį
	   dabar neša „Stalo" kairė juosta, tik be praeities ir be ryšio su
	   pokalbiu. Lieka 768–1023px, kur „Stalo" nėra. */
	.sidebar__section--online-users {
		display: none;
	}
}

/* Kortelės vardas rėmelyje — tas pats raštas kaip `.live-panel__legend`
   (žr. chat.css: absoliuti etiketė, nudažyta tuo, kas piešiama UŽ kortelės,
   iškerpa liniją po savimi). Kartojama, o ne dalijamasi klase, nes etiketės
   `background` privalo sutapti su konkretaus protėvio fonu, ir jei „Stalas"
   kada nors atsidurtų ant kitokio fono, keistųsi tik ši viena vieta. */
.live-table__legend {
	position: absolute;
	top: 0;
	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);
	pointer-events: none;
}

/* ─── KAIRĖ: PRIE STALO ──────────────────────────────────────────────────── */

.live-table__people {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs, 0.375rem);
	padding: var(--spacing-md, 1rem) var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem)
		var(--spacing-md, 1rem);
	/* Skirtukas priklauso DEŠINEI kolonai (žr. `.live-table__chat`), kad
	   linija eitų per visą kortelės aukštį net tada, kai viena pusė trumpesnė. */
	min-width: 0;
}

.live-table__people-title {
	margin: 0 0 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	/* Tylumą neša dydis (10 px) ir didžiosios raidės, NE permatomumas.
	   `opacity: 0.75` čia buvo: #adadc9 per jį ant #1a1a2e virsta ~#8888a2, o
	   tai 4,95:1 — vos virš AA ribos ir, svarbiausia, nematoma
	   `getComputedStyle` matavimui. Be permatomumo lieka 7,8:1 ir spalva, kurią
	   galima patikrinti neatidarant naršyklės. */
	color: var(--color-text-secondary, #adadc9);
}

.live-table__people-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Daug žmonių čia nebūna, bet jei kada bus — juosta slenka pati, o ne
	   tempia kortelę žemyn. */
	max-height: 320px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.live-table__people-list::-webkit-scrollbar {
	width: 4px;
}

.live-table__people-list::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 2px;
}

/* Vienas žmogus: apskritimas + vardas + tyli antra eilutė. */
.live-table__person {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	align-items: center;
	gap: var(--spacing-xs, 0.375rem);
	padding: 4px 6px;
	border-radius: var(--radius-sm, 4px);
	/* Perėjimas skirtas pažymėjimui (žr. `.is-lit` žemiau), ne krovimuisi. */
	transition: background var(--duration-fast, 150ms) var(--ease-default, ease-out);
	cursor: default;
}

.live-table__person-avatar {
	position: relative;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--color-bg-primary, #0f0f1f);
	border: 1px solid rgba(255, 255, 255, 0.1);
	/* Monograma centruojama tada, kai nuotraukos nėra. */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--color-accent-gold, #fbbf24);
}

.live-table__person-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.live-table__person-name {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-primary, #f5f5fa);
	/* Ilgas slapyvardis neturi stumti juostos pločio. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.live-table__person-when {
	grid-column: 2;
	font-size: 10px;
	line-height: 1.2;
	color: var(--color-text-secondary, #adadc9);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* DABAR ČIA — žalias taškas ant avataro krašto. Dydis 8 px su 2 px rėmeliu
   kortelės fono spalva: taip taškas atrodo „iškirptas" iš avataro, o ne
   uždėtas ant jo. */
.live-table__person--live .live-table__person-avatar::after {
	content: '';
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--panel-green, #6fb692);
	box-shadow: 0 0 0 2px var(--color-bg-secondary, #1a1a2e);
}

.live-table__person--live .live-table__person-when {
	color: var(--panel-green, #6fb692);
}

/* NESENIAI BUVO — prislopinamas tik avataras. Vardas ir laikas lieka
   skaitomi (žr. failo pradžios paaiškinimą apie kontrastą). */
.live-table__person--past .live-table__person-avatar {
	filter: grayscale(1);
	opacity: 0.55;
}

/* Juosta be nė vieno vardo. Pasitaiko tik tada, kai ir pokalbio istorija
   tuščia — tokiu atveju sąžiningiau pasakyti, kad tylu, nei rodyti nulį. */
.live-table__people-empty {
	font-size: 11px;
	line-height: 1.4;
	color: var(--color-text-secondary, #adadc9);
	padding: 2px 6px;
}

/* ─── DEŠINĖ: POKALBIS ───────────────────────────────────────────────────── */

.live-table__chat {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs, 0.375rem);
	min-width: 0;
	padding: var(--spacing-md, 1rem);
	border-left: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}

/* Plačioje kortelėje laukas nebeturi persisukti į kelias eilutes — emoji
   juosta ir skaitiklis telpa greta lauko. Panelėje (telefone) `flex-wrap`
   yra būtinas, tad perrašoma tik čia. */
.live-table__bar {
	flex-wrap: nowrap;
}

.live-table__bar .live-panel__form {
	flex: 1 1 auto;
	flex-wrap: wrap;
	min-width: 0;
}

/* Pokalbio sąrašas. Aukštis fiksuotas, nes kortelė stovi tarp citatos ir
   poraštės: augdamas su turiniu jis stumdytų puslapio galą kas žinutę. */
.live-table__list {
	max-height: 300px;
	min-height: 140px;
	overflow-y: auto;
}

/* Svečio kvietimas — tekstas su mygtuku, ne mygtukas su tekstu.

   Telefone šis blokas gula po skaitikliu ir sodrus auksinis mygtukas ten
   proporcingas. Plačioje kortelėje viskas išsitiesia į vieną eilutę, ir tas
   pats mygtukas atsiduria pokalbio viršuje kaip ryškiausias daiktas visame
   ekrane — nors pokalbis, dėl kurio čia atėjai, yra po juo. Tai ta pati klaida,
   dėl kurios 2026-09-11 buvo pašalintas didelis „Mano profilis" mygtukas
   nepatvirtinusiems (žr. chat.css, `.live-panel__field--locked`).

   Keičiamas tik dydis ir sodrumas — ne spalva ir ne vieta: veiksmas lieka
   atpažįstamas, tik nustoja rėkti. */
.live-table .live-panel__guest {
	flex: 1 1 auto;
	justify-content: flex-start;
	gap: var(--spacing-sm, 0.5rem);
}

.live-table .live-panel__guest .guest-btn {
	padding: 6px 14px;
	font-size: 0.85rem;
	white-space: nowrap;
}

/* ─── PAŽYMĖJIMAS: ŽMOGUS ↔ JO ŽINUTĖS ───────────────────────────────────
   Užvedus pelę ant vardo kairėje, jo eilutės pokalbyje lieka ryškios, o
   likusios prislopsta. Tai darbalaukio dalykas tiesiogine prasme — remiasi
   pele, kurios telefone nėra, todėl panelėje šito ir nėra.

   Prislopinama iki 0,45: mažiau ir aplinkinės eilutės taptų neįskaitomos,
   o pažymėjimas turi padėti skaityti, ne uždengti. */
.live-table__person:hover,
.live-table__person.is-lit {
	background: rgba(255, 255, 255, 0.05);
}

.live-table__list.is-dimmed .chat-row {
	opacity: 0.45;
	transition: opacity var(--duration-fast, 150ms) var(--ease-default, ease-out);
}

.live-table__list.is-dimmed .chat-row.is-lit {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.live-table__person,
	.live-table__list.is-dimmed .chat-row {
		transition: none;
	}
}