/* Ekrany H: czat (prefiks ch-). */

/* --- lista --- */
.ch-group-av { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--jc-soft); color: var(--jc); box-shadow: inset 0 0 0 2px var(--jc); }
.ch-prev { display: flex; align-items: center; gap: 4px; min-width: 0; color: var(--muted); }
.ch-prev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-prev .icon { flex: none; }
.ch-prev.is-unread { color: var(--ink); font-weight: 600; }
.ch-row.is-unread .li-title { font-weight: 800; }

/* --- watek --- */
.ch-view { gap: 8px !important; padding-bottom: 0 !important; }
.ch-head-card { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--surface-2); font-size: .82rem; color: var(--muted); }
.ch-head-card .avatar, .ch-head-card .ch-group-av { width: 36px; height: 36px; flex: none; }
.ch-head-card .ch-group-av .icon { width: 18px; height: 18px; }
.ch-msgs { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; min-height: 40vh; }
.ch-day { display: flex; justify-content: center; margin: 10px 0 6px; }
.ch-day span { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .74rem; font-weight: 700; }
.ch-msg { display: flex; align-items: flex-end; gap: 6px; max-width: 86%; margin-top: 6px; }
.ch-msg.is-cont { margin-top: 0; }
.ch-msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.ch-msg-av { width: 32px; flex: none; }
.ch-bubble { position: relative; min-width: 64px; max-width: 100%; padding: 8px 12px 18px; border-radius: 18px 18px 18px 6px; background: var(--surface); box-shadow: var(--hairline); color: var(--ink); }
.ch-msg.is-cont .ch-bubble { border-top-left-radius: 6px; }
.ch-msg.is-mine .ch-bubble { background: var(--accent); color: var(--accent-ink); border-radius: 18px 18px 6px 18px; box-shadow: none; }
.ch-msg.is-mine.is-cont .ch-bubble { border-top-right-radius: 6px; }
.ch-author { font-size: .74rem; font-weight: 800; color: var(--accent-text); margin-bottom: 2px; }
.ch-text { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.4; font-size: .98rem; }
.ch-caption { margin-top: 6px; font-size: .9rem; }
.ch-time { position: absolute; right: 10px; bottom: 4px; font-size: .66rem; opacity: .65; }
.ch-msg.is-photo .ch-bubble, .ch-msg.is-video .ch-bubble { padding: 4px 4px 18px; }
.ch-msg.is-photo .ch-text, .ch-msg.is-video .ch-text { padding: 0 8px; }
.ch-media { width: min(240px, 62vw); aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; }
.ch-media .media-thumb { width: 100%; height: 100%; border-radius: 0; }
.ch-msg.is-voice .ch-bubble { min-width: min(260px, 70vw); padding: 8px 10px 18px; }
.ch-msg.is-mine .voice { --voice-bg: color-mix(in srgb, var(--accent-ink) 12%, transparent); color: var(--accent-ink); }
.ch-msg.is-mine .voice-transcript, .ch-msg.is-mine .voice-tag { color: var(--accent-ink); }

/* karty systemowe */
.ch-sys { align-self: center; display: flex; align-items: center; gap: 8px; max-width: 94%; margin: 8px 0 2px; padding: 8px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--hairline); color: var(--ink-2); font-size: .84rem; text-decoration: none; }
.ch-sys-ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--t-soft); color: var(--t-ink); flex: none; }
.ch-sys-text { flex: 1; min-width: 0; }
.ch-sys-time { font-size: .7rem; color: var(--muted); }

/* pisze... */
.ch-typing { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .82rem; color: var(--muted); }
.ch-dots { display: inline-flex; gap: 3px; padding: 10px 12px; border-radius: 16px; background: var(--surface); box-shadow: var(--hairline); }
.ch-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ch-dot 1.2s infinite; }
.ch-dots i:nth-child(2) { animation-delay: .15s; }
.ch-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ch-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* --- pasek pisania (przyklejony na dole #view) --- */
.ch-composer { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: flex-end; gap: 6px; margin: 0 calc(var(--gutter) * -1); padding: 8px var(--gutter) calc(8px + var(--safe-b)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.ch-input { flex: 1; min-width: 0; min-height: 44px; max-height: 120px; padding: 11px 14px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 16px/1.3 var(--font-body); resize: none; outline: none; }
.ch-input:focus { border-color: var(--accent); }
.ch-cbtn { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); cursor: pointer; }
.ch-mic, .ch-send { background: var(--accent); color: var(--accent-ink); }
.ch-cbtn[hidden] { display: none; }