/* Copyright (c) 2026 Bc. Jan Krejčí. All rights reserved.                   */
/* Proprietary and confidential. See LICENSE in the project root.             */

/* ==========================================================================
 *  KOMUNITNÍ CHAT (/app/chat)
 *
 *  Bubliny, skladatel a moderace. Všechny barvy jdou ze značkových `--kp-*`
 *  tokenů, takže chat drží světlý i tmavý motiv i panel Vzhled — žádný
 *  natvrdo zadaný povrch (pravidlo „každá sekce následuje motiv").
 * ========================================================================== */

/* Chat roluje CELOU STRÁNKOU, ne uvnitř sebe.
   Dřív měl pevnou výšku a vlastní vnitřní scroller, takže měl posuvník
   zanořený uprostřed obrazovky a pod ním kus prázdné stránky. Teď je to
   stejné zařízení jako Agátina obrazovka: jeden sloupec přes celou plochu,
   systémový posuvník u pravého okraje okna a skladatel ukotvený `sticky`
   dole. Sloupec (`flex`) je kvůli lepivosti povinný — lepivý prvek uvnitř
   mřížky se drží ve své buňce a nemá kam cestovat. */
.kpc {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* `cqb`, ne `%` — stejný důvod jako u Agáty: `.kp-lite__inner` mezi tímhle
       a scrollportem je blok bez vlastní výšky, přes který procenta neprojdou.
       Na `/prototype/chat` (jiný layout, žádný `container-type` předek)
       jednotka spadne na iniciální `0`, což je totéž jako dřívější chování
       bez cíleného natažení — nic se tam nezhorší.
       Odečtená `--kp-lite-content-top` (viz `kp-lite.css`): bez ní `.kpc`
       počítal 100 % scrollportu NAVRCH toho, co už zabrala lišta a její
       odsazení — obsah tak byl vždycky o kus vyšší, než kolik se vejde,
       a stránka měla trvalý svislý posuvník i se čtyřmi krátkými zprávami. */
    min-height: calc(100cqb - var(--kp-lite-content-top, 0px));
}

/* ---- lišta ztlumených ---------------------------------------------------- */
.kpc__muted {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--kp-ink-soft);
}

.kpc__mutedlabel { font-weight: 600; }

.kpc__mutedchip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--kp-line);
    background: color-mix(in oklab, var(--kp-ink) 5%, transparent);
    color: var(--kp-ink-soft);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.kpc__mutedchip:hover { color: var(--kp-ink); border-color: var(--kp-green-2, #54A046); }
.kpc__mutedchip svg { width: 12px; height: 12px; }

/* ---- seznam zpráv -------------------------------------------------------- */
.kpc__list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 2px 10px;
}

.kpc__msg { display: flex; align-items: flex-end; gap: 10px; }
.kpc__msg--mine { justify-content: flex-end; }

/* Avatar odesílatele vedle bubliny (jen u cizích zpráv). Koruna je zapečená
   v portrétu — žádný SVG overlay navrch. */
.kpc__ava { margin-bottom: 2px; }

.kpc__bubble {
    max-width: min(78%, 560px);
    padding: 10px 14px;
    border-radius: 16px;
    background: var(--kp-surface);
    border: 1px solid var(--kp-line);
    box-shadow: var(--kp-shadow-sm);
}

/* Vlastní zprávy vpravo a laděné do OSOBNÍHO akcentu (panel Vzhled,
   posuvník „Odstín akcentu") — je to jediná bublina v místnosti, která
   je „moje", takže je to přesně to místo, kde má osobní barva smysl;
   cizí zprávy zůstávají neutrální povrch. */
.kpc__msg--mine .kpc__bubble {
    background: color-mix(in oklab, var(--accent) 16%, var(--kp-surface));
    border-color: color-mix(in oklab, var(--accent) 30%, var(--kp-line));
    border-bottom-right-radius: 5px;
}

.kpc__msg:not(.kpc__msg--mine) .kpc__bubble { border-bottom-left-radius: 5px; }

.kpc__author { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }

.kpc__nick {
    font-family: var(--kp-font-display);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--kp-green, #3C7A34);
}

.kpc__text {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--kp-ink);
    word-break: break-word;
    white-space: pre-wrap;
}

.kpc__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 5px;
    font-size: 11.5px;
    color: var(--kp-ink-faint);
}

.kpc__time { white-space: nowrap; }

.kpc__act {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 11.5px;
    color: var(--kp-ink-soft);
    cursor: pointer;
}

.kpc__act:hover { color: var(--kp-terracotta, #C1502E); text-decoration: underline; }
.kpc__done { font-size: 11.5px; color: var(--kp-green-2, #54A046); }

/* Vlastní zprávy nesou jméno „Vy" v akcentu — vpravo × vlevo je samo o sobě
   slabý signál, a na telefonu, kde je bublina skoro přes celou šířku, mizí. */
.kpc__msg--mine .kpc__nick { color: var(--accent-dim); }

/* ---- ukotvený skladatel -------------------------------------------------- */

/* Dok je skleněná karta — stejný recept jako u Agáty (`kp-agata.css`),
   ať oba doky v aplikaci vypadají jako jedna rodina, ne dva různé nápady.
   Dvě vrstvy schválně — obranný vzor proti sdílené kompozitní vrstvě
   `position: sticky` + `backdrop-filter` na jednom prvku. Podrobnosti
   a poznámka, že se to tady nepodařilo spolehlivě reprodukovat (jen
   naměřit artefakt vlastního měřicího nástroje), jsou u `.kp-ag__dockwrap`
   v `kp-agata.css`. */
.kpc__dockwrap {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 12px;
}

.kpc__dock {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 12px 12px 14px;
    border-radius: 22px;
    background: var(--kp-glass-light, var(--lite-card, var(--kp-cream-2)));
    backdrop-filter: blur(var(--kp-glass-blur, 18px)) saturate(1.1);
    -webkit-backdrop-filter: blur(var(--kp-glass-blur, 18px)) saturate(1.1);
    border: 1px solid var(--kp-glass-edge, var(--kp-line));
    box-shadow: 0 -6px 24px -18px color-mix(in oklab, var(--kp-ink) 60%, transparent),
                var(--kp-shadow-sm);
    overflow: hidden;
    contain: paint;
}

:root[data-effects="minimal"] .kpc__dock {
    background: var(--lite-card, var(--kp-cream-2));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--kp-line);
}

/* Drobné rozmazání těsně nad dokem — stejný recept jako u Agáty, ať oba
   doky zůstanou jedna rodina. */
/* Přechod „do ztracena" nad dokem se ZKUSIL jako samostatná rozmazaná
   vrstva — na živé obrazovce z toho byla šmouha (viz `kp-agata.css`).
   Komunitní chat na rozdíl od Agáty nemá pod bublinami desku (leží rovnou
   na fotce), takže tu není do čeho barevně zahnout — bez desky by závoj
   ve stylu Agáty vypadal jako neopodstatněná skvrna. Zůstává bez přechodu.
   Poslední bublina pod dokem mizí, jak ji dok sám (sklo, `backdrop-filter`)
   ztlumí. */

.kpc__compose { display: flex; gap: 10px; align-items: center; }

.kpc__input {
    flex: 1;
    min-width: 0;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--kp-line);
    background: var(--kp-cream, #FBF3E4);
    color: var(--kp-ink);
    font: inherit;
    font-size: 14.5px;
}

.kpc__input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: transparent;
}

.kpc__send {
    flex: 0 0 auto;
    padding: 12px 22px;
    border-radius: 14px;
    border: 0;
    background: var(--accent);
    color: #FFFFFF;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.kpc__send:hover:not(:disabled) { background: var(--accent-hover); }
.kpc__send:disabled { opacity: 0.5; cursor: not-allowed; }

.kpc__error { margin: 0; font-size: 13px; color: var(--kp-terracotta, #C1502E); }

/* ---- gate pro nečleny ---------------------------------------------------- */
.kpc__gate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid var(--kp-line);
    background: color-mix(in oklab, var(--kp-gold, #D9A441) 10%, var(--kp-surface));
}

.kpc__gate b { display: block; color: var(--kp-ink); }
.kpc__gate span { font-size: 13.5px; color: var(--kp-ink-soft); }

.kpc__cta {
    flex: 0 0 auto;
    padding: 11px 20px;
    border-radius: 12px;
    background: var(--accent);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.kpc__cta:hover { background: var(--accent-hover); }

@media (max-width: 560px) {
    .kpc__bubble { max-width: 88%; }
    .kpc__send { padding-inline: 16px; }
}

@media (max-width: 640px) {
    /* Stejný důvod jako u `.kp-ag__dockwrap` v `kp-agata.css`: na týhle
       šířce roluje samo okno a spodní navigace appky je taky lepivá u
       spodku stránky — dok potřebuje odstup, ať obě lepivé vrstvy nesedí
       na stejné hraně. */
    .kpc__dockwrap { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}