:root{
  --bg:#0f172a;
  --panel:#0b1223;
  --card:#0b1223;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --line:#1f2a44;
  --accent:#3b82f6;
  --bubble:#111c33;
  --bubble2:#0d2a42;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--text);
}

a{color:var(--accent);text-decoration:none}
.muted{color:var(--muted)}
.small{font-size:12px}

.auth{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.card{
  width:min(420px, 100%);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
}
.card h1{margin:0 0 12px 0;font-size:20px}
.card input, .card button{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0a1020;
  color:var(--text);
  outline:none;
  margin:8px 0;
}
.card button{background:var(--accent);border:none;font-weight:600;cursor:pointer}
.links{display:flex;justify-content:space-between;margin-top:10px}
.err{background:#3b0d14;border:1px solid #7f1d1d;padding:10px;border-radius:12px}
.ok{background:#0b2a18;border:1px solid #14532d;padding:10px;border-radius:12px}

/* App layout */
.app{
  height: 100dvh;        /* mobile-safe viewport */
  min-height: 100dvh;
  display:flex;
  flex-direction:column;
}
.topbar{
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  border-bottom:1px solid var(--line);
  background:rgba(11,18,35,.9);
  backdrop-filter: blur(10px);
}
.topbar-title{font-weight:700}
.btn{
  display:inline-block;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  color:var(--text);
  margin-left:8px;
}

.content{flex:1;min-height:0}
.content.split{display:grid;grid-template-columns: 340px 1fr}
/* Sidebar scroll fix */
.content.split{
  min-height: 0; /* важно для grid */
}
.content.single{display:block}

.sidebar{
  border-right:1px solid var(--line);
  background:var(--panel);
  min-height:0;
  display:flex;
  flex-direction:column;
}
.sidebar{
  min-height: 0;   /* важно */
  height: 100%;
  display:flex;
  flex-direction:column;
  overflow:hidden; /* чтобы скролл был внутри .chatlist */
}
.sidebar-head{padding:10px;border-bottom:1px solid var(--line)}
.search{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0a1020;
  color:var(--text);
}
.chatlist{overflow:auto}
.chatlist{
  flex: 1 1 auto;
  min-height: 0;     /* критично */
  overflow-y: auto;  /* скролл */
  -webkit-overflow-scrolling: touch;
}
/* чтобы на iOS/Android нормально скроллилось пальцем */
.chatlist::-webkit-scrollbar{ width: 10px; }
.chatlist::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.25); border-radius: 999px; }
.chatitem{
  width:100%;
  display:flex;
  gap:10px;
  padding:10px;
  border:none;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  text-align:left;
  border-bottom:1px solid rgba(31,42,68,.5);
}
.chatitem:hover{background:#0a1020}
.chatmeta .row{display:flex;align-items:center;justify-content:space-between}
.name{font-weight:650}
.statusdot{width:8px;height:8px;border-radius:999px;background:#334155}
.statusdot.on{background:#22c55e}

.avatar{width:42px;height:42px;border-radius:999px;overflow:hidden;background:#0a1020;border:1px solid var(--line);flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.avatar.big{width:72px;height:72px}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-fallback{font-weight:800;color:#cbd5e1}

.chat{
  position: relative;
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
}
.chat-head{
  height:56px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  background:rgba(11,18,35,.6);
}
.chat-head .title{font-weight:800}
.chat-head .subtitle{color:var(--muted);font-size:12px; margin-top:2px}
.back{display:none;border:1px solid var(--line);background:transparent;color:var(--text);border-radius:10px;padding:6px 10px}

.messages{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top: 10px;
  /* чтобы не прятались сообщения за composer */
  padding-bottom: calc(14px + 92px + env(safe-area-inset-bottom));
}

.msg{
  max-width:78%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--bubble);
  align-self:flex-start;
  word-wrap:break-word;
}
.msg.me{background:var(--bubble2)}
.msg .meta{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.msg .nick{font-weight:700;font-size:12px;color:#cbd5e1}
.msg .time{font-size:11px;color:var(--muted)}
.msg a.file{display:inline-block;color:#93c5fd;word-break:break-word}

/* attachments */
.media{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.thumb{
  border:1px solid rgba(31,42,68,.8);
  background: rgba(2,6,23,.3);
  padding:0;
  border-radius:12px;
  overflow:hidden;
  width:110px;
  height:110px;
  cursor:pointer;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb.video{ position:relative; }
.thumb.video video{ width:100%; height:100%; object-fit:cover; display:block; filter: brightness(.8); }
.thumb.video .play{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:28px;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.files{ display:flex; flex-direction:column; gap:6px; margin-top:8px; }

/* composer */
.composer{
  position: sticky;
  bottom: 0;
  z-index: 5;

  display:flex;
  align-items: center;
  gap:10px;
  padding:10px;
  border-top:1px solid var(--line);
  background:rgba(11,18,35,.92);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.iconbtn{
  width:44px;
  height:44px;
  padding:0;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}

.filebtn{
  border:1px solid var(--line);
  background:#0a1020;
  cursor:pointer;
  user-select:none;
}
.filebtn input{display:none}
.iconbtn .ico{
  width:22px;
  height:22px;
  fill: currentColor;
  color:#cbd5e1;
}
.filebtn:hover .ico{color:#e2e8f0}

.composer-mid{
  flex: 1 1 auto;
  min-width: 0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.text{
  width:100%;
  flex: 1 1 auto;
  min-width: 0;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0a1020;
  color:var(--text);
  outline:none;
}

/* Telegram-like send button */
.send{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--accent);
  border: none;
  color: #fff;
  cursor: pointer;
}
.send:disabled{opacity:.6;cursor:default}
.send-ico{
  width:22px;height:22px;
  fill: currentColor;
  transform: translateX(1px);
}

/* attach bar + progress */
.attachbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(31,42,68,.8);
  border-radius:12px;
  background: rgba(10,16,32,.7);
}
.attachinfo{ font-size:12px; color:#cbd5e1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.attachclear{
  flex:0 0 auto;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}

.progress{
  position: relative;
  height: 10px;
  border-radius:999px;
  background: rgba(148,163,184,.18);
  overflow:hidden;
  border:1px solid rgba(31,42,68,.8);
}
.progressbar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
}
.progresstxt{
  margin-top:6px;
  font-size:12px;
  color: var(--muted);
}

/* Drag & Drop overlay */
.drop-overlay{
  position:absolute;
  inset:0;
  background: rgba(2,6,23,.65);
  backdrop-filter: blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index: 20;
}
.drop-overlay.show{ display:flex; }
.drop-card{
  padding:18px 16px;
  border-radius:16px;
  border:1px dashed rgba(148,163,184,.6);
  background: rgba(11,18,35,.9);
  text-align:center;
  width:min(320px, 90%);
  color: var(--text);
}

/* Lightbox gallery */
.lightbox{
  position:fixed;
  inset:0;
  background: rgba(2,6,23,.92);
  display:none;
  z-index: 999;
}
.lightbox.show{ display:block; }
.lb-content{
  position:absolute;
  inset:56px 14px 56px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lb-content img, .lb-content video{
  max-width: 100%;
  max-height: 100%;
  border-radius: 14px;
  border:1px solid rgba(31,42,68,.7);
  background:#000;
}
.lb-caption{
  position:absolute;
  left:14px; right:14px; bottom:12px;
  color: #cbd5e1;
  font-size: 13px;
  text-align:center;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lb-close, .lb-prev, .lb-next{
  position:absolute;
  top:10px;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid rgba(31,42,68,.8);
  background: rgba(11,18,35,.7);
  color: #e2e8f0;
  cursor:pointer;
  font-size: 24px;
  line-height: 42px;
}
.lb-close{ right:10px; }
.lb-prev{ left:10px; top: calc(50% - 22px); }
.lb-next{ right:10px; top: calc(50% - 22px); }

.panel{
  width:min(720px, 100%);
  margin:16px auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  padding:14px;
}
.profile-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.h2{font-size:18px;font-weight:800}
.form label{display:block;margin-top:10px;color:var(--muted);font-size:12px}
.form input, .form button{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0a1020;
  color:var(--text);
  outline:none;
  margin-top:6px;
}
.form button{background:var(--accent);border:none;font-weight:700;cursor:pointer}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* mobile */
@media (max-width: 860px){
  .content.split{grid-template-columns: 1fr}
  .sidebar{display:block}
  .chat{display:none}
  .back{display:inline-block}
  .app.show-chat .sidebar{display:none}
  .app.show-chat .chat{display:flex}
}

@media (max-width: 560px){
  .lb-prev, .lb-next{ display:none; }
}

@media (max-width: 420px){
  .send{ width: 42px; height: 42px; }
  .send-ico{ width: 21px; height: 21px; }
}

/* Prevent body scrolling, messages scroll instead */
html, body{
  height:100%;
  overflow:hidden;
}

.rec{
  flex:0 0 auto;
  width:44px;height:44px;
  border-radius:999px;
  border:1px solid rgba(31,42,68,.8);
  background:#0a1020;
  color:#e2e8f0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.rec-ico{width:22px;height:22px;fill:currentColor}

/* recording bar layout */
.recording{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(31,42,68,.9);
  border-radius:14px;
  background: rgba(11,18,35,.95);
}
.recording .rleft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}
.recording .rright{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.recording .dot{
  width:10px;height:10px;border-radius:999px;background:#ef4444;
  animation: pulse 1s infinite;
}
@keyframes pulse{
  0%{transform:scale(1);opacity:1}
  50%{transform:scale(1.4);opacity:.6}
  100%{transform:scale(1);opacity:1}
}
.recording .rtext{
  min-width:0;
  color:#e2e8f0;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.recording .rcancel,.recording .rstop{
  flex: 0 0 auto;
  white-space: nowrap;
}
.recording .rcancel{ display:none; }   /* на мобилках */
.recording .rstop{
  flex:0 0 auto;
  white-space:nowrap;
}
/* preview video */
.recording .rprev{
  width: 86px;
  height: 48px;
  border-radius: 10px;
  border: 1px solid rgba(31,42,68,.8);
  background:#000;
  object-fit: cover;
  display:none; /* по умолчанию скрыт */
}

/* показываем preview только когда добавим класс .video */
.recording.video .rprev{ display:block; }
@media (max-width: 420px){
  .recording .rprev{ width:72px; height:44px; }
  .recording .rcancel{ display:none; } /* чтобы "Стоп" не уезжал */
}

.voice{
  margin-top:8px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid rgba(31,42,68,.8);
  border-radius:14px;
  background: rgba(2,6,23,.18);
  width:100%;
  max-width: 560px;
}
@media (max-width:560px){
  .voice{ max-width:100%; }
}
.vbtn{
  width:38px;height:38px;border-radius:999px;
  background: var(--accent);
  border:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.vbar{flex:1;height:6px;border-radius:999px;background:rgba(148,163,184,.2);overflow:hidden;cursor:pointer}
.vbar > div{height:100%;width:0%;background:#93c5fd}
.vtime{font-size:12px;color:var(--muted);flex:0 0 auto}

/* ВАЖНО: hidden должен всегда скрывать */
[hidden] { display: none !important; }

.ticks{
  margin-left:6px;
  font-size:12px;
  color: rgba(148,163,184,.8);
  user-select:none;
}
.ticks.del{ color: rgba(148,163,184,.95); }
.ticks.read{ color: #60a5fa; } /* голубые как в Telegram */

/* Telegram-like voice */
/* Voice bubble wide */
.voice{
  margin-top:8px;
  width: 100%;
  max-width: 520px;         /* на десктопе выглядит как Telegram */
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(31,42,68,.75);
  border-radius:16px;
  background: rgba(2,6,23,.14);
}

.msg.me .voice{ margin-left:auto; }     /* мои – прижать вправо */
.msg:not(.me) .voice{ margin-right:auto; }

@media (max-width: 560px){
  .voice{ max-width: 100%; }            /* на телефоне на всю ширину пузыря */
}

.vbtn{
  width:42px;height:42px;border-radius:999px;
  background: var(--accent);
  border:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.vbtn svg{width:18px;height:18px;fill:currentColor;margin-left:2px}
.vbtn.pause svg{margin-left:0}

.vmid{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.vwave{
  position:relative;
  height:22px;
  border-radius:999px;
  background: rgba(148,163,184,.10);
  overflow:hidden;
  cursor:pointer;
}
.vwave .fill{
  position:absolute; inset:0;
  width:0%;
  background: rgba(96,165,250,.28);
}
.vwave .bars{
  position:absolute; inset:0;
  display:flex;
  gap:2px;
  align-items:center;
  padding:0 8px;
  pointer-events:none;
}
.vwave .bars span{
  width:3px;
  border-radius:999px;
  background: rgba(148,163,184,.55);
}
.vwave.playing .bars span{ background: rgba(226,232,240,.75); }

.vmeta{
  display:flex;
  gap:10px;
  font-size:12px;
  color: var(--muted);
  white-space:nowrap;
}
.vmeta .cur{ color:#cbd5e1; }
.vmeta .total{ opacity:.9; }

.replybar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid rgba(31,42,68,.8);
  border-radius:12px;
  background: rgba(10,16,32,.7);
}
.replytext{
  flex:1; min-width:0;
  font-size:12px;
  color:#cbd5e1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.replyclose{
  width:32px;height:32px;
  border-radius:10px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}

.quote{
  border-left:3px solid #60a5fa;
  padding-left:8px;
  margin:6px 0 8px;
  color:#cbd5e1;
}
.qfrom{font-size:12px;font-weight:700}
.qbody{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ctx{
  position:fixed;
  z-index:9999;
  background: rgba(11,18,35,.98);
  border:1px solid rgba(31,42,68,.9);
  border-radius:12px;
  padding:6px;
  min-width:180px;
}
.ctx button{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border:none;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  border-radius:10px;
}
.ctx button:hover{ background:#0a1020; }

.pinned{
  position: sticky;
  top: 56px;                 /* высота .chat-head */
  z-index: 6;

  min-height: 54px;          /* БОЛЬШЕ ВЫСОТА */
  padding: 12px 12px;        /* БОЛЬШЕ ПАДДИНГ */
  display:flex;
  align-items:center;

  background: rgba(15,23,42,.92);
  backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(31,42,68,.9);
  border-left: 3px solid #60a5fa;

  font-size: 13px;
  color: #e2e8f0;

  cursor: pointer;

  /* разрешаем 2 строки, чтобы было видно */
  white-space: normal;
  line-height: 1.25;

  /* ограничим максимумом, чтобы не съедало экран */
  max-height: 84px;
  overflow: hidden;
}

.pinned b{ color:#93c5fd; font-weight:800; }
.pinned small{ color:#94a3b8; font-size:12px; }

/* Reactions fixed size */
.reactions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
}

.react{
  display:inline-flex;
  align-items:center;
  gap:6px;

  height: 28px;                 /* фикс */
  padding: 0 10px;              /* фикс */
  border-radius: 999px;

  border: 1px solid rgba(31,42,68,.8);
  background: rgba(10,16,32,.6);
  color:#cbd5e1;
  cursor:pointer;
}

/* фиксируем “контейнер эмодзи” */
.react .emo{
  width: 18px;
  height: 18px;
  flex: 0 0 18px;

  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* фиксируем размер картинки независимо от исходного файла */
.react .emo img{
  width: 18px;
  height: 18px;
  display:block;
  object-fit: contain;          /* не растягивает, вписывает */
  image-rendering: auto;
}

.reaction{
  width: 18px;
  height: 18px;
  display:block;
  object-fit: contain;          /* не растягивает, вписывает */
  image-rendering: auto;
}

.react span{
  font-size: 12px;
  line-height: 1;
  min-width: 10px;
}

.msg.flash{
  outline: 2px solid rgba(96,165,250,.9);
  box-shadow: 0 0 0 6px rgba(96,165,250,.12);
  transition: outline .2s ease;
}

/* clickable peer area */
.peerbtn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  padding:6px 8px;
  border-radius:12px;
  border:1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor:pointer;
}
.peerbtn:hover{
  border-color: rgba(31,42,68,.8);
  background: rgba(10,16,32,.35);
}

/* modal */
.modal{ position:fixed; inset:0; z-index:10000; }
.modal[hidden]{ display:none !important; }
.modal-back{
  position:absolute; inset:0;
  background: rgba(2,6,23,.65);
  backdrop-filter: blur(6px);
}
.modal-card{
  position:relative;
  width:min(520px, calc(100% - 24px));
  margin: 72px auto 0;
  background: rgba(11,18,35,.96);
  border:1px solid rgba(31,42,68,.9);
  border-radius:16px;
  overflow:hidden;
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(31,42,68,.8);
}
.modal-title{ font-weight:800; }
.modal-close{
  width:36px;height:36px;
  border-radius:12px;
  border:1px solid rgba(31,42,68,.8);
  background: transparent;
  color: var(--text);
  cursor:pointer;
  font-size:18px;
}

/* profile box */
.pbox{ padding:14px; }
.phead{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.pavatar{ width:64px; height:64px; border-radius:999px; overflow:hidden; border:1px solid rgba(31,42,68,.8); background:#0a1020; display:flex; align-items:center; justify-content:center; }
.pavatar img{ width:100%; height:100%; object-fit:cover; }
.pfallback{ font-weight:900; color:#cbd5e1; font-size:22px; }
.pname{ font-weight:900; font-size:16px; }
.pmuted{ color: var(--muted); font-size:12px; margin-top:2px; }
.prow{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-top:1px solid rgba(31,42,68,.45); }
.prow .k{ color: var(--muted); font-size:12px; }
.prow .v{ color: var(--text); font-size:13px; text-align:right; word-break:break-word; }

/* Toasts */
.toasts{
  position: fixed;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 20000;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.toast{
  width: min(360px, calc(100vw - 28px));
  background: rgba(11,18,35,.96);
  border: 1px solid rgba(31,42,68,.9);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  pointer-events:auto;
}
.toast .t1{font-weight:800; font-size:13px; color:#e2e8f0;}
.toast .t2{margin-top:3px; font-size:12px; color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.toast .t3{margin-top:6px; font-size:11px; color:#64748b;}
.toast:hover{border-color: rgba(96,165,250,.55);}

.row-right{ display:flex; align-items:center; gap:8px; }

.badge{
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: #3b82f6;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.unread-divider{
  align-self:center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31,42,68,.9);
  background: rgba(10,16,32,.75);
  color: #cbd5e1;
  font-size: 12px;
}

/* contenteditable input */
.text.ce{ min-height:44px; }
.text.ce:empty:before{
  content: attr(data-placeholder);
  color: rgba(148,163,184,.65);
}

/* emoji inside input */
.text.ce img.emo{
  width: 20px;
  height: 20px;
  vertical-align: -4px;
  object-fit: contain;
}

/* panel like Telegram bottom sheet */
.emoji-panel{
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(62px + env(safe-area-inset-bottom));
  z-index: 40;

  background: rgba(11,18,35,.98);
  border: 1px solid rgba(31,42,68,.9);
  border-radius: 16px;
  padding: 10px;

  max-height: 320px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
}

.emoji-top{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}

.emoji-search{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  //border:1px solid rgba(31,42,68,.9);
  background:rgba(11,18,35,.98);
  color:var(--text);
  outline:none;
}

.emoji-close{
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid rgba(31,42,68,.9);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}

.emoji-grid{
  overflow:auto;
  max-height: 260px;
  display:grid;
  grid-template-columns: repeat(33, 1fr);
  gap: 8px;
}

@media (max-width: 560px){
  .emoji-grid{ grid-template-columns: repeat(7, 1fr); }
  .emoji-panel{ max-height: 360px; }
}



.emoji-item{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(31,42,68,.6);
  background: rgba(10,16,32,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.emoji-item:hover{ border-color: rgba(96,165,250,.6); }

.emoji-item img{
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* render emoji tokens in messages */
.msg .body img.emo{
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: -4px;
}

/* two-row composer */
.composer2{
  position: sticky;
  bottom: 0;
  z-index: 10;
  border-top: 1px solid var(--line);
  background: rgba(11,18,35,.92);
  padding: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:10px;
}

.composer-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
}

/* TOP row elements should occupy full width when visible */
.composer-row.top > *{
  width:100%;
}

/* bottom row */
.composer-row.bottom{
  align-items:flex-end;
}

.text.ce{
  flex:1 1 auto;
  min-width:0;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#0a1020;
  color:var(--text);
  outline:none;
  min-height:44px;
}
.text.ce:empty:before{
  content: attr(data-placeholder);
  color: rgba(148,163,184,.65);
}

/* make attachbar full width */
.attachbar{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(31,42,68,.8);
  border-radius:14px;
  background: rgba(10,16,32,.7);
}

/* recording full width */
.recording{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid rgba(31,42,68,.9);
  border-radius:14px;
  background: rgba(11,18,35,.95);
}

/* preview video inside recording */
.recording .rleft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1 1 auto;
}
.recording .rright{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}
.recording .rprev{
  width: 96px;
  height: 54px;
  border-radius: 10px;
  border: 1px solid rgba(31,42,68,.8);
  background:#000;
  object-fit: cover;
  display:none;
}
.recording.video .rprev{ display:block; }

@media (max-width: 420px){
  .recording .rcancel{ display:none; } /* чтобы "Стоп" всегда был виден */
  .recording .rprev{ width:76px; height:46px; }
}

/* Big emoji message (single emoji only) */
.msg .body.big-emoji{
  font-size: 0;          /* чтобы не было лишних пробелов */
  line-height: 1;
  padding-top: 2px;
}

.msg .body.big-emoji img.emo{
  width: 128px;
  height: 128px;
  object-fit: contain;
  vertical-align: middle;
}

/* === HARD FIX: sidebar chatlist scroll (mobile+desktop) === */

/* root containers must allow children to shrink */
.app,
.content,
.content.split,
.sidebar{
  min-height: 0 !important;
}

/* content must have bounded height */
.content{
  height: calc(100dvh - 56px) !important; /* 56px = topbar */
  min-height: 0 !important;
}

/* sidebar is a column with scrollable list */
.sidebar{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important; /* scroll only inside chatlist */
}

/* header fixed, list scroll */
.sidebar-head{
  flex: 0 0 auto !important;
}

.chatlist{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain;
}

/* optional: nicer scrollbar */
.chatlist::-webkit-scrollbar{ width: 10px; }
.chatlist::-webkit-scrollbar-thumb{ background: rgba(148,163,184,.25); border-radius: 999px; }

/* Big emoji rules */
.msg .body.big-emoji-1{ font-size:0; line-height:1; }
.msg .body.big-emoji-1 img.emo{ width:128px; height:128px; object-fit:contain; vertical-align:middle; }

.msg .body.big-emoji-2,
.msg .body.big-emoji-3{ font-size:0; line-height:1; }
.msg .body.big-emoji-2 img.emo,
.msg .body.big-emoji-3 img.emo{ width:64px; height:64px; object-fit:contain; vertical-align:middle; }

.msg .body.big-emoji-2 img.emo,
.msg .body.big-emoji-3 img.emo{ margin-right:6px; }
.msg .body.big-emoji-2 img.emo:last-child,
.msg .body.big-emoji-3 img.emo:last-child{ margin-right:0; }

/* === MOBILE: when chat opened, hide sidebar completely === */
@media (max-width: 860px){
  .app.show-chat .sidebar{
    display: none !important;
  }
  .app.show-chat .chat{
    display: flex !important;
  }
}

/* --- FIX: text wrapping in messages --- */
.msg, .msg *{
  min-width: 0; /* важнейшее для flex-вложенности, чтобы не раздвигало контейнер */
}

.msg .body{
  white-space: pre-wrap;            /* переносы строк сохраняем */
  overflow-wrap: anywhere;          /* ломаем длинные слова/URL */
  word-break: break-word;           /* fallback */
}

.msg .body a{
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* bubble must not exceed viewport */
.msg{
  max-width: min(78%, calc(100vw - 28px)); /* чтобы на мобильном не выходило за экран */
}

/* attachments/blocks must fit */
.voice,
.media,
.files,
.reactions,
.quote{
  max-width: 100%;
}

.voice{
  width: 100%;
  max-width: 100%;
}
/* --- FIX: messages area stays within screen --- */
.chat{
  min-height: 0 !important;
}

.messages{
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.quote, .replybar, .pinned{
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}


/* === HARD FIX: bubbles never go outside viewport === */

/* запрет горизонтального скролла/вылета */
.app, .content, .chat, .messages {
  max-width: 100%;
  overflow-x: hidden;
}

/* messages как flex-колонка: разрешаем детям сжиматься */
.messages{
  display: flex;
  flex-direction: column;
  align-items: stretch;     /* важно: не растягивать вправо */
}

/* каждый msg обязан помещаться */
.msg{
  width: fit-content;
  max-width: calc(100% - 18px) !important; /* всегда влезает на мобиле */
  min-width: 0 !important;
}

/* мои справа, но без выезда */
.msg.me{
  margin-left: auto;
  margin-right: 0;
}

/* чужие слева */
.msg:not(.me){
  margin-right: auto;
  margin-left: 0;
}

/* критично: все вложенные flex-элементы должны уметь сжиматься */
.msg, .msg *{
  min-width: 0 !important;
  max-width: 100%;
}

/* переносы текста/ссылок */
.msg .body{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.msg .body a{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* вложения тоже не должны распирать */
.voice, .media, .files, .reactions, .quote, .thumb {
  max-width: 100% !important;
}

.ctx{ position:fixed; z-index:9999; background:rgba(11,18,35,.98); border:1px solid rgba(31,42,68,.9); border-radius:12px; padding:6px; min-width:220px; }
.ctx button{ width:100%; text-align:left; padding:10px; border:none; background:transparent; color:var(--text); cursor:pointer; border-radius:10px; }
.ctx button:hover{ background:#0a1020; }

.ctx-reactions{ display:flex; gap:8px; padding:8px; border-bottom:1px solid rgba(31,42,68,.5); margin-bottom:6px; }
.rbtn{ width:34px; height:34px; border-radius:10px; border:1px solid rgba(31,42,68,.6); background:rgba(10,16,32,.6); display:flex; align-items:center; justify-content:center; }
.rbtn img{ width:22px; height:22px; object-fit:contain; }
.rmore{ width:34px; height:34px; border-radius:10px; border:1px solid rgba(31,42,68,.6); background:rgba(10,16,32,.6); text-align:center; }

.reactsheet{ position:fixed; inset:0; z-index:12000; }
.reactsheet[hidden]{ display:none !important; }
.reactsheet-back{ position:absolute; inset:0; background:rgba(2,6,23,.6); backdrop-filter: blur(6px); }
.reactsheet-card{ position:absolute; left:10px; right:10px; bottom:10px; background:rgba(11,18,35,.98); border:1px solid rgba(31,42,68,.9); border-radius:16px; padding:12px; max-height:55vh; overflow:auto; }
.reactgrid{ display:grid; grid-template-columns:repeat(8,1fr); gap:10px; }
.reactgrid button{ width:40px; height:40px; border-radius:12px; border:1px solid rgba(31,42,68,.6); background:rgba(10,16,32,.6); display:flex; align-items:center; justify-content:center; }
.reactgrid img{ width:24px; height:24px; object-fit:contain; }

.uprog{ margin-top:8px; }
.uprog .bar{ height:8px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden;border:1px solid rgba(31,42,68,.8); }
.uprog .bar > div{ height:100%; width:0%; background:linear-gradient(90deg,#3b82f6,#60a5fa); }
.uprog .utxt{ margin-top:6px;font-size:12px;color:var(--muted); }