/* Общее оформление «Истории» (/app) и веб-панели админа (/): Liquid Glass,
   список переписок, шапка и сообщения. Своё у страниц — в их <style>. */
/* Liquid Glass: полупрозрачные панели с размытием и бликом по краю поверх
   мягкого цветного фона. Тёмная тема по умолчанию, светлая — body.light */
:root{
  --bg:#07090d; --text:#fff; --hint:rgba(235,240,255,.55); --link:#6db4ff;
  --accent:var(--tg-theme-button-color,#3a7bd5); --accent-t:var(--tg-theme-button-text-color,#fff);
  --glass:rgba(255,255,255,.075); --glass-2:rgba(255,255,255,.12);
  --edge:rgba(255,255,255,.16); --shine:rgba(255,255,255,.28); --drop:rgba(0,0,0,.35);
  --out:rgba(58,123,213,.62); --out-edge:rgba(160,205,255,.35);
  --red:#ff5a4e; --edit:#4aa3ff; --chip:rgba(255,255,255,.1); --bar:rgba(16,18,24,.62);
  --glow1:rgba(64,120,255,.33); --glow2:rgba(168,85,247,.24); --glow3:rgba(20,184,166,.18);
}
body.light{
  --bg:#eef1f7; --text:#0b0d12; --hint:rgba(20,28,45,.55); --link:#1a73e8;
  --glass:rgba(255,255,255,.55); --glass-2:rgba(255,255,255,.75);
  --edge:rgba(255,255,255,.85); --shine:rgba(255,255,255,.95); --drop:rgba(40,60,110,.14);
  --out:rgba(58,123,213,.85); --out-edge:rgba(255,255,255,.45); --chip:rgba(20,28,45,.07);
  --bar:rgba(255,255,255,.72);
  --glow1:rgba(80,140,255,.28); --glow2:rgba(190,120,255,.22); --glow3:rgba(40,200,180,.18);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--text);
     font:15px/1.4 -apple-system,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 35% at 15% 10%,var(--glow1),transparent 70%),
             radial-gradient(35% 30% at 90% 30%,var(--glow2),transparent 70%),
             radial-gradient(45% 35% at 40% 95%,var(--glow3),transparent 70%)}
.glass{background:var(--glass);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 var(--shine),0 8px 28px var(--drop)}
.wrap{max-width:760px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
.body{flex:1;padding:0 12px 28px}
.msg,.empty{padding:44px 20px;text-align:center;color:var(--hint);font-size:14px}

/* шапка списка */
.top{padding:max(14px,env(safe-area-inset-top)) 16px 8px}
h1{font-size:30px;margin:0;font-weight:800;letter-spacing:-.03em}
.sub{color:var(--hint);font-size:13px;margin-top:2px}
.trial{border-radius:16px;padding:9px 13px;font-size:14px;margin:10px 0 2px}

/* аватарка: фото профиля, пока не загрузилось или закрыто — инициалы */
.ava{position:relative;border-radius:50%;overflow:hidden;flex:none;display:flex;align-items:center;
     justify-content:center;color:#fff;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* список: все карточки одной высоты; справа вместо даты — что перехвачено */
.card{display:flex;align-items:center;gap:12px;height:64px;border-radius:22px;
      padding:0 12px;margin:9px 0;cursor:pointer;overflow:hidden}
.card:active{transform:scale(.985)}
.card .ava{width:44px;height:44px;font-size:16px}
.mid{flex:1;min-width:0}
.nm{font-weight:650;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv{color:var(--hint);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.marks{display:flex;gap:4px;align-self:flex-start;margin-top:10px;flex:none}
.mk{font-size:11px;line-height:17px;padding:0 6px;border-radius:9px;background:var(--chip);white-space:nowrap}
.mk.d{color:var(--red)} .mk.e{color:var(--edit)} .mk.f{color:var(--red)}

/* шапка переписки: «назад» слева, имя и @username по центру, аватар справа.
   Закреплена сверху (липкий — сам #head: у .bar внутри него прилипать не к
   чему), стекло — сообщения проезжают под ней размытыми */
#head.pin{position:sticky;top:0;z-index:10}
.bar{padding:max(8px,env(safe-area-inset-top)) 10px 6px}
.barin{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;
       border-radius:26px;padding:6px 6px}
.bar .barin{background:var(--bar)}         /* плотнее обычного стекла: имя читается поверх сообщений */
.back{width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;color:var(--text);
      font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center}
.ttl{text-align:center;min-width:0}
.ttl .cn{font-weight:650;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttl .cu{color:var(--hint);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .ava{width:40px;height:40px;font-size:15px;justify-self:end}

/* сообщения */
#mbody{padding:4px 4px 24px}
.day{text-align:center;margin:14px 0 10px}
.day span{font-size:12px;padding:4px 12px;border-radius:12px;color:var(--hint)}
.mrow{display:flex;flex-direction:column;align-items:flex-start;margin:5px 0}
.mrow.out{align-items:flex-end}
.b{max-width:min(520px,86%);padding:7px 12px;border-radius:20px;word-wrap:break-word;
   white-space:pre-wrap;position:relative;overflow:hidden}
.b.in{background:var(--glass-2);border:1px solid var(--edge);
      -webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);
      box-shadow:inset 0 1px 0 var(--shine)}
.b.out{background:var(--out);color:#fff;border:1px solid var(--out-edge);
       box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
/* перехват: контур по краю самого сообщения — удалённое красный, изменённое
   синий, одноразовое — огонёк бежит по контуру (.ring поверх края) */
.b.red{border-color:transparent;box-shadow:0 0 0 2px var(--red),inset 0 1px 0 var(--shine)}
.b.edt{border-color:transparent;box-shadow:0 0 0 1.5px var(--edit),inset 0 1px 0 var(--shine)}
.b.fly{border-color:transparent}
@property --fa{syntax:"<angle>";inherits:false;initial-value:0deg}
.ring{position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;
      background:conic-gradient(from var(--fa),rgba(255,90,78,.3) 0deg 200deg,#ff5a4e 285deg,
                 #ffc24b 340deg,rgba(255,90,78,.3) 360deg);
      -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
      -webkit-mask-composite:xor;mask-composite:exclude;animation:fly 2.2s linear infinite}
@keyframes fly{to{--fa:360deg}}
@media (prefers-reduced-motion:reduce){.ring{animation:none}}
.fw{position:relative;display:flex;border-radius:18px}
.was{border-left:2px solid var(--edit);padding:1px 0 1px 8px;margin:0 0 5px;color:var(--hint);font-size:13px}
.re{border-left:2px solid var(--link);padding:1px 0 1px 8px;margin-bottom:4px;color:var(--hint);
    font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{display:block;text-align:right;margin-top:3px;color:var(--hint);font-size:11px;white-space:nowrap}
/* время — в правом нижнем углу, на строке с концом текста (как в Telegram):
   в конце текста пустой «хвост» шириной со время (.sp), само время — поверх
   него; не влезло в строку — хвост уходит на новую, пузырь растёт. Отступы
   сверху и снизу одинаковые */
.sp{display:inline-block;width:34px;height:1px}
.sp.ed{width:58px}
.b.t>.meta,.b.v>.meta,.cap .meta{position:absolute;right:12px;bottom:7px;margin:0;line-height:1}
.b.v>.meta{bottom:9px}  .b.out .meta{color:rgba(255,255,255,.72)}
.media{color:var(--link);font-size:13px}
/* фото с подписью: снимок от края до края пузыря — контур пузыря = контур фото */
.b.pic{padding:0}
.b.pic .mph{border-radius:0}
.b.pic .cap{position:relative;padding:7px 12px}
.mph{display:block;max-width:100%;max-height:340px;cursor:pointer}
.mvid{display:block;max-width:100%;border-radius:16px}
.ph{width:230px;max-width:100%;height:150px;background:var(--chip)}
/* без пузыря: фото, кружок, стикер — контур прямо по их краю / силуэту */
.bare{display:flex;flex-direction:column;align-items:flex-start}
.mrow.out .bare{align-items:flex-end}
.bare .mph{border-radius:18px;max-width:min(300px,78vw)}
.bare.red .mph{box-shadow:0 0 0 2px var(--red)}
.bare.edt .mph{box-shadow:0 0 0 1.5px var(--edit)}
.bare .mstick{display:block;width:150px;height:150px;object-fit:contain}
.bare.red .mstick{filter:drop-shadow(1.5px 0 0 var(--red)) drop-shadow(-1.5px 0 0 var(--red))
                        drop-shadow(0 1.5px 0 var(--red)) drop-shadow(0 -1.5px 0 var(--red))}
.bare .meta{display:inline-block;margin-top:5px;padding:2px 9px;border-radius:10px;background:var(--chip)}
.vn{position:relative;width:216px;height:216px;border-radius:50%;overflow:hidden;background:#000;cursor:pointer}
.bare.red .vn{box-shadow:0 0 0 2.5px var(--red)}
.vn video{width:100%;height:100%;object-fit:cover;display:block}
.vn .pl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
        font-size:34px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6);pointer-events:none}
.vn.playing .pl{display:none}
.vn.ph{background:var(--chip)}
.bare.round{align-items:center}
.mrow .bare.round .meta{align-self:center}

/* голосовое: кнопка, «волна» с прогрессом, длительность */
/* голосовое: кнопка слева по центру, справа волна, под ней длительность;
   время — справа в строке длительности */
.vc{display:flex;align-items:center;gap:10px;min-width:220px;padding:2px 0}
.vc .vi{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.vc .pb{width:40px;height:40px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-t);
        flex:0 0 40px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.b.out .vc .pb{background:#fff;color:#2b5aa0}
.vc .wv{display:flex;align-items:center;gap:2px;height:26px;cursor:pointer}
.vc .wv i{flex:1;min-width:2px;border-radius:2px;background:rgba(128,128,128,.5)}
.vc .wv i.on{background:var(--link)}
.b.out .vc .wv i{background:rgba(255,255,255,.38)} .b.out .vc .wv i.on{background:#fff}
.vc .du{color:var(--hint);font-size:12px;line-height:1}
.b.out .vc .du{color:rgba(255,255,255,.78)}

.lb{position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:50;display:flex;align-items:center;justify-content:center}
.lb img{max-width:94vw;max-height:94vh;border-radius:12px}