/* ===== SOVMESTNYE SPISKI: kartochka spiska v soobschenii + modalka sozdaniya ===== */
/* Ispolzuem realnye peremennye base.css: --accent, --text, --text-secondary, --border, --bubble-other. */

/* ===== GEOLOKACIYA: kartochka [[loc:LAT,LNG]] s mini-kartoj (OSM-tajly) ===== */
.aya-loc-card{ display:block; width:300px; max-width:78vw; text-decoration:none; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 2px 8px rgba(0,40,48,.12); }
.aya-loc-map{ position:relative; width:100%; height:160px; overflow:hidden; background:#e6ecec; }
.aya-loc-tile{ position:absolute; width:256px; height:256px; user-select:none; pointer-events:none; }
.aya-loc-pin{ position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); font-size:34px; line-height:1; z-index:2; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.aya-loc-cap{ padding:10px 14px; display:flex; flex-direction:column; gap:2px; }
.aya-loc-title{ font-weight:700; font-size:14.5px; color:#0b1620; }
.aya-loc-coords{ font-size:12px; color:#6a7b83; font-variant-numeric:tabular-nums; }
.aya-loc-open{ font-size:12.5px; color:#0e7e89; font-weight:600; margin-top:4px; }
body.dark-theme .aya-loc-card{ background:#1a242a; }
body.dark-theme .aya-loc-title{ color:#eef4f5; }
body.dark-theme .aya-loc-coords{ color:#9fb0b7; }

/* ===== PIKER LOKACII: modalka .aya-loc-modal-ov s INTERAKTIVNOJ kartoj (peretaskivanie/zum) ===== */
.aya-loc-modal-ov{ position:fixed; inset:0; z-index:4000; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; justify-content:center; padding:0; }
.aya-locpick{ width:100%; max-width:560px; background:var(--panel,#fff); border-radius:20px 20px 0 0; box-shadow:0 -8px 44px rgba(0,16,34,.32); display:flex; flex-direction:column; max-height:86vh; overflow:hidden; animation:attachUp .26s cubic-bezier(.22,1,.36,1); }
.aya-locpick-head{ padding:13px 16px 6px; display:flex; align-items:center; gap:10px; }
.aya-locpick-title{ flex:1; font-weight:700; font-size:16px; color:var(--text,#0b1620); }
.aya-locpick-close{ border:none; background:transparent; font-size:20px; line-height:1; color:var(--text-secondary,#6a7b83); cursor:pointer; padding:4px 6px; }
.aya-locpick-map{ position:relative; width:100%; height:min(46vh,360px); overflow:hidden; background:#e6ecec; touch-action:none; cursor:grab; -webkit-user-select:none; user-select:none; }
.aya-locpick-map:active{ cursor:grabbing; }
.aya-locpick-layer{ position:absolute; inset:0; }
.aya-locpick-tile{ position:absolute; width:256px; height:256px; user-select:none; pointer-events:none; }
.aya-locpick-pin{ position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); font-size:40px; line-height:1; z-index:3; pointer-events:none; filter:drop-shadow(0 3px 3px rgba(0,0,0,.45)); }
.aya-locpick-zoom{ position:absolute; right:10px; bottom:56px; z-index:4; display:flex; flex-direction:column; gap:7px; }
.aya-locpick-zbtn{ width:40px; height:40px; border-radius:11px; border:none; background:rgba(255,255,255,.95); box-shadow:0 2px 7px rgba(0,0,0,.28); font-size:23px; font-weight:700; color:#0b1620; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.aya-locpick-me{ position:absolute; left:10px; bottom:10px; z-index:4; border:none; border-radius:22px; background:rgba(255,255,255,.95); box-shadow:0 2px 7px rgba(0,0,0,.28); padding:10px 14px; font-size:13.5px; font-weight:600; color:#0e7e89; cursor:pointer; }
.aya-locpick-attr{ position:absolute; right:6px; bottom:4px; z-index:2; font-size:9px; color:#33434c; background:rgba(255,255,255,.7); padding:1px 5px; border-radius:4px; pointer-events:none; }
.aya-locpick-hint{ padding:8px 16px 2px; font-size:12px; color:var(--text-secondary,#6a7b83); text-align:center; }
.aya-locpick-acts{ padding:10px 14px calc(14px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:9px; }
.aya-locpick-btn{ width:100%; border:none; border-radius:14px; padding:14px; font-size:15px; font-weight:700; cursor:pointer; text-align:center; }
.aya-locpick-btn.primary{ background:#0e7e89; color:#fff; }
.aya-locpick-btn.secondary{ background:var(--soft,#eef2f6); color:#0e7e89; }
.aya-locpick-dur-title{ font-size:13.5px; font-weight:600; color:var(--text-secondary,#6a7b83); text-align:center; margin-bottom:2px; }
.aya-locpick-durs{ display:flex; gap:8px; }
.aya-locpick-dur{ flex:1 1 0; border:none; border-radius:13px; padding:14px 6px; font-size:14px; font-weight:700; cursor:pointer; background:#0e7e89; color:#fff; }
body.dark-theme .aya-locpick{ background:#161d27; }
body.dark-theme .aya-locpick-title{ color:#eef4f5; }
body.dark-theme .aya-locpick-btn.secondary{ background:#232d38; color:#4fc3d4; }
body.dark-theme .aya-locpick-zbtn{ background:rgba(30,38,48,.95); color:#eef4f5; }
body.dark-theme .aya-locpick-me{ background:rgba(30,38,48,.95); color:#4fc3d4; }
/* Kontent pikera otkryvaetsya iz-pod ryada ikonok skrepki (tab-bar ~96px) — dayom zapas, chtoby knopki ne pryatalis. */
body.attach-menu-open .aya-loc-modal-ov{ padding-bottom:96px; }

/* ===== LIVE-LOKACIYA: kartochka [[liveloc:ID]] (karta+pin+tajmer, obnovlyaetsya po socket) ===== */
.aya-liveloc-card{ display:block; width:300px; max-width:78vw; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 2px 8px rgba(0,40,48,.12); }
.aya-liveloc-card.is-ended{ opacity:.86; }
.aya-liveloc-map{ position:relative; display:block; width:100%; height:150px; overflow:hidden; background:#e6ecec; text-decoration:none; }
.aya-liveloc-badge{ position:absolute; left:10px; top:10px; z-index:3; background:#e23b3b; color:#fff; font-size:11px; font-weight:800; letter-spacing:.03em; padding:3px 8px; border-radius:20px; box-shadow:0 1px 4px rgba(0,0,0,.3); animation:ayaLiveBlink 1.6s ease-in-out infinite; }
@keyframes ayaLiveBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
.aya-liveloc-cap{ padding:10px 14px 12px; display:flex; flex-direction:column; gap:3px; }
.aya-liveloc-title{ font-weight:700; font-size:14.5px; color:#0b1620; }
.aya-liveloc-who{ font-size:12.5px; color:#6a7b83; }
.aya-liveloc-meta{ font-size:12px; color:#6a7b83; font-variant-numeric:tabular-nums; }
.aya-liveloc-stop{ margin-top:8px; border:none; border-radius:11px; padding:10px; font-size:13.5px; font-weight:700; cursor:pointer; background:#fdecec; color:#c62f2f; }
.aya-liveloc-loading{ padding:22px 14px; text-align:center; color:#6a7b83; font-size:13px; }
body.dark-theme .aya-liveloc-card{ background:#1a242a; }
body.dark-theme .aya-liveloc-title{ color:#eef4f5; }
body.dark-theme .aya-liveloc-who,
body.dark-theme .aya-liveloc-meta{ color:#9fb0b7; }
body.dark-theme .aya-liveloc-stop{ background:#3a2323; color:#ff8a8a; }

.aya-list-host { display: block; margin: 2px 0; }
.aya-list {
    box-sizing: border-box;
    max-width: min(340px, 84vw);
    background: var(--bubble-other, #fff);
    border: 1px solid var(--border, rgba(0,56,65,.1));
    border-radius: 16px;
    padding: 12px 12px 12px;
    color: var(--text, #1A1D21);
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.aya-list-loading { color: var(--text-secondary, #65676B); font-size: 14px; text-align: center; padding: 16px 8px; min-height: 120px; box-sizing: border-box; }

.aya-list-title { font-weight: 700; font-size: 15px; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.aya-list-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--text-secondary, #65676B); }

.aya-list-items { display: flex; flex-direction: column; gap: 2px; }
.aya-list-empty { color: var(--text-secondary, #65676B); font-size: 13px; text-align: center; padding: 10px 4px; }

.aya-list-item { display: flex; align-items: flex-start; gap: 8px; padding: 5px 2px; border-radius: 8px; }
.aya-list-item:active { background: var(--border, rgba(0,0,0,.05)); }

.aya-list-check {
    appearance: none; border: none; background: transparent; cursor: pointer;
    font-size: 19px; line-height: 1; padding: 0; flex: 0 0 auto; color: var(--accent, #ff8c42);
}
.aya-list-check:active { transform: scale(.9); }

.aya-list-text { flex: 1 1 auto; font-size: 14px; line-height: 1.35; word-break: break-word; }
.aya-list-who { display: block; font-size: 11px; color: var(--text-secondary, #65676B); margin-top: 1px; }

.aya-list-item.done .aya-list-text { text-decoration: line-through; color: var(--text-secondary, #65676B); opacity: .75; }

.aya-list-del {
    appearance: none; border: none; background: transparent; cursor: pointer;
    font-size: 14px; line-height: 1; padding: 2px 4px; flex: 0 0 auto;
    color: var(--text-secondary, #65676B); opacity: .55;
}
.aya-list-del:active { opacity: 1; }

.aya-list-add { display: flex; gap: 6px; margin-top: 10px; }
.aya-list-add-input {
    flex: 1 1 auto; min-width: 0; box-sizing: border-box;
    border: 1px solid var(--border, rgba(0,56,65,.14)); border-radius: 10px;
    padding: 8px 10px; font-size: 14px; font-family: inherit;
    background: var(--bg, #fff); color: var(--text, #1A1D21);
}
.aya-list-add-input:focus { outline: none; border-color: var(--accent, #ff8c42); }
.aya-list-add-btn {
    appearance: none; border: none; border-radius: 10px; padding: 8px 12px;
    font-size: 13px; font-weight: 600; cursor: pointer; flex: 0 0 auto;
    background: var(--accent, #ff8c42); color: #fff; line-height: 1;
}
.aya-list-add-btn:active { transform: scale(.97); }

/* --- knopka «Списки» v kompozere (kak game-btn-mobile) --- */
.list-btn-mobile {
    flex: 0 0 auto; width: 38px; height: 38px; border: none; background: transparent;
    font-size: 20px; line-height: 1; cursor: pointer; padding: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: var(--text, #1A1D21);
}
.list-btn-mobile:active { background: var(--border, rgba(0,0,0,.06)); }

/* --- modalka vybora tipa spiska (v duhe aya-game-modal) --- */
.aya-list-modal-ov { position: fixed; inset: 0; z-index: 4000; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.aya-list-modal { width: 100%; max-width: 480px; background: var(--bg, #fff); color: var(--text, #1A1D21); border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 24px rgba(0,0,0,.2); }
.aya-list-modal-title { font-weight: 700; font-size: 16px; text-align: center; margin-bottom: 14px; }
.aya-list-modal-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.aya-list-pick { display: flex; align-items: center; gap: 12px; padding: 14px 14px; border: 1px solid var(--border, rgba(0,56,65,.1)); border-radius: 14px; background: var(--bubble-other, #fff); color: var(--text, #1A1D21); font-size: 15px; font-weight: 600; cursor: pointer; }
.aya-list-pick:active { transform: scale(.98); }
.aya-list-pick .lpick-ic { font-size: 24px; }
.aya-list-modal-close { width: 100%; }

/* --- tyomnaya tema --- */
body.dark-theme .aya-list-modal { background: #161D27; }
body.dark-theme .aya-list-pick { background: #222b35; }
body.dark-theme .aya-list-add-input { background: #1c2530; }

/* === Menyu «skrepki» (attach menu): bottom-sheet v TG-stile — SETKA krupnyh kruzhkov-ikonok s podpisyami === */
.attach-menu-ov {
    /* Ryad ikonok skrepki — POVERH otkrytogo kontenta punkta (tab-bar). Overlay prozrachnyj i ne lovit
       kliki -> kontent punkta pod nim interaktiven; kliki lovit tolko sam sheet/galereya. */
    position: fixed; inset: 0; z-index: 100200;
    background: transparent; pointer-events: none;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    animation: attachFade .16s ease;
}
.attach-menu-sheet, .attach-gallery { pointer-events: auto; }
/* Kontent punkta skrepki otkryvaetsya POD ryadom ikonok (tab-bar ~96px). Vse eti overlei — flex
   (flex-end libo center), poetomu padding-bottom na SAMOM overlee podnimaet shtorku/modalku vverh
   (u flex-end — priamo na 96px; u center — soderzhimoe recentriruetsya vyshe bara). Zapas pod bar.
   Podъem NAD KLAVIATUROJ delaetsya NADYOZHNO v JS (chat-view.js: _onKb / visualViewport) — pri
   klaviature JS obnulyaet etot padding (inline) i dvigaet kartochku transform:translateY(-kb).
   CSS-mehanizm body.kb-visible/--kb-height dlya etih modalok NE ispolzuem (nenadyozhen v WKWebView). */
body.attach-menu-open .aya-list-modal-ov,
body.attach-menu-open .aya-poll-modal-ov,
body.attach-menu-open .aya-timer-modal-ov,
body.attach-menu-open .aya-game-modal-ov,
body.attach-menu-open .aya-chal-modal-ov,
body.attach-menu-open .aya-chores-modal-ov,
body.attach-menu-open .aya-chores-mgr-ov,
body.attach-menu-open .aya-inv-modal-ov,
body.attach-menu-open .aya-kudos-modal-ov,
body.attach-menu-open .aya-moments-modal-ov,
body.attach-menu-open .pf-modal-ov,
body.attach-menu-open .aya-tcap-modal-ov { padding-bottom: 96px; }
@keyframes attachFade { from { opacity: 0; } to { opacity: 1; } }
.attach-menu-sheet {
    width: calc(100% - 16px); max-width: 480px;
    margin: 0 8px 8px;
    background: var(--panel, #fff); border-radius: 22px;
    padding: 4px 6px 6px; box-shadow: 0 12px 44px rgba(0,16,34,.30);
    animation: attachUp .26s cubic-bezier(.22,1,.36,1);
}
@keyframes attachUp { from { transform: translateY(36px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }
.attach-menu-grabber {
    width: 46px; height: 5px; border-radius: 999px;
    background: var(--text-tertiary, #6E7177); opacity: .4;
    margin: 0 auto; box-sizing: content-box;
    padding: 9px 40px;                 /* rasshiryaem zonu tapa (zakrytie menyu) */
    background-clip: content-box; cursor: pointer;
}
/* setka dejstvij: 4 kolonki krupnyh kruzhkov */
/* Odna gorizontalnaya stroka s prokrutkoj vbok (kak v Telegram). */
.attach-menu-grid {
    display: flex; flex-wrap: nowrap; gap: 6px;
    padding: 8px 10px 10px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.attach-menu-grid::-webkit-scrollbar { display: none; }
.attach-menu-cell {
    flex: 0 0 auto; min-width: 62px;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    border: none; background: transparent; padding: 2px 2px 0; margin: 0;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* Punkt «Файл» — <label> s nativnym <input type=file>: tap otkryvaet dialog napryamu (iOS-nadyozhno).
   Input NE display:none (inache iOS inogda ne otkryvaet), a vizualno skryt (1x1, opacity:0). */
.attach-file-cell { position: relative; }
.attach-file-native {
    position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;
    left: 50%; bottom: 0; pointer-events: none; border: 0; padding: 0; margin: 0;
}
/* Lucide-ikonki (mono, seryj cvet) — edinyj stil kak v TG (bylo emodzi + grayscale-hak). */
.attach-menu-ic {
    width: 38px; height: 38px; border-radius: 0; background: transparent; box-shadow: none;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-secondary, #5a6b78); line-height: 1;
    transition: transform .12s ease, opacity .12s ease;
}
.attach-menu-ic .ic { width: 26px; height: 26px; }
body.dark-theme .attach-menu-ic { color: #aeb9c2; }
.attach-menu-cell:active .attach-menu-ic { transform: scale(.9); opacity: .8; }
.attach-menu-lbl {
    font-size: 11.5px; line-height: 1.25; font-weight: 500; letter-spacing: -.01em;
    color: var(--text-secondary, #5a6b78); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
/* «Otmena» — otdelnaya kartochka pod shtorkoj (iOS action sheet) */
.attach-menu-cancel {
    width: calc(100% - 16px); max-width: 480px;
    margin: 0 8px calc(8px + env(safe-area-inset-bottom, 0px));
    border: none; border-radius: 20px; padding: 15px;
    background: var(--panel, #fff); color: var(--brand, #005f6d);
    font-size: 16px; font-weight: 700; cursor: pointer; text-align: center;
    box-shadow: 0 8px 32px rgba(0,16,34,.22);
    animation: attachUp .26s cubic-bezier(.22,1,.36,1);
    transition: background .12s ease;
}
.attach-menu-cancel:active { background: var(--soft, #eef2f6); }
/* tyomnaya tema: plotnyj tyomnyj sheet, kruzhki te zhe (nasyshchennye cveta chitayutsya i v tyomnoj) */
body.dark-theme .attach-menu-sheet,
body.dark-theme .attach-menu-cancel { background: #1c232b; }
body.dark-theme .attach-menu-cancel { color: #4fc3d4; }
body.dark-theme .attach-menu-lbl { color: #aab6c2; }
body.dark-theme .attach-menu-cancel:active { background: #262f39; }

/* === Variant B: nativnaya setka poslednih foto v shtorke skrepki (kak v Telegram) === */
.attach-gallery {
    padding: 10px 8px 2px;
    border-bottom: 1px solid rgba(0,20,40,.08);
    margin-bottom: 2px;
}
.attach-gallery-loading {
    padding: 22px 8px; text-align: center;
    color: var(--text-secondary, #5a6b78); font-size: 14px;
}
/* Lenta chipov albomov (iPhone: Vse foto / Izbrannoe / Selfi / polzovatelskie) */
.attach-gallery-albums {
    display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 0 0 8px; margin: 0 0 2px;
}
.attach-gallery-albums::-webkit-scrollbar { display: none; }
.attach-album-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    border: none; border-radius: 16px; padding: 6px 11px;
    background: var(--soft, #eef2f6); color: var(--text-primary, #1c2a35);
    font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer;
    white-space: nowrap; -webkit-tap-highlight-color: transparent;
    transition: background .12s ease, color .12s ease;
}
.attach-album-chip .attach-album-count {
    font-size: 11px; font-weight: 700; opacity: .6;
}
.attach-album-chip.active {
    background: var(--brand, #0a7c88); color: #fff;
}
.attach-album-chip.active .attach-album-count { opacity: .85; }
.attach-album-chip:active { filter: brightness(.96); }
body.dark-theme .attach-album-chip { background: #262f39; color: #e6edf3; }
body.dark-theme .attach-album-chip.active { background: var(--brand, #0a7c88); color: #fff; }
/* Setka ROVNO 3 kolonki, prokrutka po vertikali (kompaktno, kak v TG) */
.attach-gallery-grid {
    display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 4px;
    max-height: 44vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.attach-gallery-cell {
    position: relative; border: none; padding: 0; margin: 0;
    background: var(--soft, #eef2f6); border-radius: 10px; overflow: hidden;
    aspect-ratio: 1 / 1; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.attach-gallery-cell img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .12s ease;
}
/* Pervaya yachejka — «zhivaya» kamera (kak v TG) */
.attach-cam-cell { background: #11161c; }
.attach-cam-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-cam-cell:not(.cam-live) .attach-cam-video { display: none; }   /* poka net live-potoka — tolko ikonka */
.attach-cam-ic {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #fff; pointer-events: none;
    text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.attach-cam-cell.cam-live .attach-cam-ic {
    inset: auto 6px 6px auto; font-size: 18px;   /* pri live — malenkaya ikonka v uglu (znak «snyat») */
}
.attach-gallery-cell.sel img { transform: scale(.86); border-radius: 10px; }
.attach-gallery-check {
    position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.9); background: rgba(0,0,0,.18);
    box-shadow: 0 1px 4px rgba(0,0,0,.28);
    transition: background .12s ease, border-color .12s ease;
}
/* Kruzhok — otdelnyj tap-target (vybor foto): rasshiryaem zonu nazhatiya do ~40px, chtoby palcem popadat legko.
   Tap po samomu foto (mimo kruzhka) otkryvaet prosmotr. (audit §1.2) */
.attach-gallery-check::before {
    content: ''; position: absolute; inset: -9px; border-radius: 50%;
}
.attach-gallery-cell.sel .attach-gallery-check {
    background: var(--brand, #0a7c88); border-color: #fff;
}
.attach-gallery-cell.sel .attach-gallery-check::after {
    content: '✓'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 800; line-height: 1;
}
.attach-gallery-send, .attach-gallery-perm {
    display: block; width: 100%; margin: 10px 0 4px;
    border: none; border-radius: 14px; padding: 13px;
    background: var(--brand, #0a7c88); color: #fff;
    font-size: 15px; font-weight: 700; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: filter .12s ease;
}
.attach-gallery-perm { background: var(--soft, #eef2f6); color: var(--brand, #005f6d); }
.attach-gallery-send:active, .attach-gallery-perm:active { filter: brightness(.94); }
/* §1.2-8: pole podpisi pryamo v shtorke nad «Отправить N» */
.attach-gallery-cap {
    display: block; width: 100%; box-sizing: border-box; margin: 10px 0 0;
    border: 1px solid var(--border, #e2e8ee); border-radius: 12px; padding: 11px 13px;
    font-size: 16px; font-family: inherit; background: var(--bg, #fff); color: var(--text);
    line-height: 1.3; resize: none; max-height: 116px; overflow-y: auto;   /* textarea: mnogostrochno, avtorost do ~5 strok, viden ves tekst */
}
.attach-gallery-cap:focus { outline: none; border-color: var(--brand, #0a7c88); }
.attach-gallery-send { margin-top: 8px; }
body.dark-theme .attach-gallery-cap { background: #1c242c; border-color: rgba(255,255,255,.12); color: #e8eef3; }
/* Podpis v razvyornutom prosmotre (poverh foto): plotnyj fon + zametnyj placeholder */
.gsp-cap::placeholder { color: rgba(255,255,255,.6); }
/* tyomnaya tema */
body.dark-theme .attach-gallery { border-bottom-color: rgba(255,255,255,.08); }
body.dark-theme .attach-gallery-cell { background: #262f39; }
body.dark-theme .attach-gallery-perm { background: #262f39; color: #4fc3d4; }
body.dark-theme .attach-gallery-loading { color: #aab6c2; }

/* === Reakcii na frazu (partial-text reactions) === */
.msg-phrase-reactions { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 0; }
.msg-phrase-reaction { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.msg-phrase-quote {
    font-size: 12px; color: var(--text-secondary, #667); opacity: .85;
    border-left: 2px solid var(--brand, #0a7c88); padding-left: 5px; font-style: italic;
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.msg-phrase-chip {
    display: inline-flex; align-items: center; gap: 3px;
    border: 1px solid transparent; background: rgba(10,124,136,.10);
    border-radius: 12px; padding: 1px 7px; font-size: 13px; cursor: pointer; line-height: 1.5;
}
.msg-phrase-chip.mine { border-color: var(--brand, #0a7c88); background: rgba(10,124,136,.20); }
.msg-phrase-chip .msg-reaction-count { font-size: 11px; opacity: .8; }
body.dark-theme .msg-phrase-chip { background: rgba(26,170,180,.16); }

/* Plavayuschaya panel emodzi pri vydelenii teksta */
.msg-phrase-bar {
    position: fixed; z-index: 5000; display: flex; gap: 2px;
    background: #1f2933; border-radius: 22px; padding: 5px 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,.32); animation: attachFade .12s ease;
}
.msg-phrase-bar-em {
    border: none; background: transparent; font-size: 22px; line-height: 1;
    padding: 3px 4px; cursor: pointer; border-radius: 50%;
}
.msg-phrase-bar-em:active { transform: scale(.85); background: rgba(255,255,255,.12); }

/* === F5.1: edinyj prevyu-shit puti «Fajl» (miniatyury + kachestvo + podpis inline) === */
.file-pick-modal .fpp-strip {
    display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding: 2px 0 6px;
}
.file-pick-modal .fpp-strip::-webkit-scrollbar { display: none; }
.fpp-cell {
    position: relative; flex: 0 0 auto;
    width: 92px; height: 92px; border-radius: 12px; overflow: hidden;
    background: var(--soft, #eef2f6);
}
.fpp-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fpp-doc {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 6px; box-sizing: border-box; color: var(--text-primary, #1c2a35);
}
.fpp-doc-name {
    max-width: 100%; font-size: 11px; font-weight: 600; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fpp-doc-size { font-size: 10px; opacity: .6; }
.fpp-rm {
    position: absolute; top: 4px; right: 4px;
    width: 22px; height: 22px; border: none; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff; font-size: 15px; line-height: 22px;
    padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.fpp-quality { display: flex; gap: 6px; margin: 6px 0 0; }
.fpp-chip {
    flex: 1 1 auto; border: none; border-radius: 16px; padding: 10px 11px;
    background: var(--soft, #eef2f6); color: var(--text-primary, #1c2a35);
    font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer;
    white-space: nowrap; -webkit-tap-highlight-color: transparent;
    transition: background .12s ease, color .12s ease;
}
.fpp-chip.sel { background: var(--brand, #0a7c88); color: #fff; }
.file-pick-modal .attach-gallery-cap { margin: 10px 0 0; }
.file-pick-modal .modal-btn { display: block; width: 100%; margin-top: 10px; box-sizing: border-box; }
body.dark-theme .fpp-cell { background: #262f39; }
body.dark-theme .fpp-doc { color: #e6edf3; }
body.dark-theme .fpp-chip { background: #262f39; color: #e6edf3; }
body.dark-theme .fpp-chip.sel { background: var(--brand, #0a7c88); color: #fff; }