*{box-sizing:border-box;font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial;}
html, body { height: 100%; }
body{margin:0;background:#0f172a;color:#e2e8f0;}
a{color:#93c5fd;text-decoration:none}
.center{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:16px;}
.card{width:100%;max-width:420px;background:#111c33;padding:16px;border-radius:12px;border:1px solid #223150}
.card input,.card button{width:100%;padding:12px;margin:8px 0;border-radius:10px;border:1px solid #2b3a5a;background:#0b1224;color:#e2e8f0}
.card button{background:#2563eb;border:none;cursor:pointer}
.err{background:#3b0a0a;padding:10px;border-radius:10px;border:1px solid #7f1d1d}
.ok{background:#062b1b;padding:10px;border-radius:10px;border:1px solid #14532d}
.links{display:flex;justify-content:space-between;margin-top:8px;font-size:14px}

body.app{
  min-height: 100vh;
  min-height: 100dvh;          /* мобильные браузеры */
  display: flex;
  flex-direction: column;
  overflow: hidden;            /* чтобы не скроллился body */
}
/* header всегда сверху */
.topbar{
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* messages = единственная скроллящаяся область */
.messages{
  flex: 1 1 auto;
  min-height: 0;               /* критично для flex+overflow */
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* composer всегда снизу */
.composer{
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* iPhone safe-area */
}

/* чтобы инпут не сжимался странно на мобиле */
.composer .row{
  display:flex;
  gap:8px;
  align-items:center;
}
.app{display:flex;flex-direction:column;min-height:100vh}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid #223150;background:#0b1224;gap:10px}
.topbar .me{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.status{opacity:.9;font-size:14px}

.messages{flex:1;overflow:auto;padding:12px;padding-bottom: 16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:85%;padding:10px;border-radius:12px;border:1px solid #223150;background:#0b1224}
.from-owner{align-self:flex-start}
.from-user{align-self:flex-end;background:#0a1b3a}
.meta{font-size:12px;opacity:.75;margin-bottom:6px}
.body img{max-width:100%;border-radius:10px}
.body video{max-width:100%;border-radius:10px}

.composer{padding:10px 12px;border-top:1px solid #223150;background:#0b1224}
.composer .row{display:flex;gap:8px;align-items:center;}
.composer input[type="text"]{flex:1;padding:12px;border-radius:10px;border:1px solid #2b3a5a;background:#0f172a;color:#e2e8f0}
.composer button{padding:12px 14px;border-radius:10px;border:none;background:#2563eb;color:#fff}
.composer input[type="file"]{max-width:140px}
.dropzone{margin-bottom:8px;padding:10px;border:1px dashed #2b3a5a;border-radius:10px;color:#9ca3af;font-size:13px}
.dropzone.on{border-color:#93c5fd;color:#e2e8f0}
.hint{min-height:18px;font-size:13px;opacity:.85;margin-top:6px}
@media (max-width:640px){
  .composer .row{flex-direction:column}
  .composer input[type="file"]{max-width:100%}
  .msg{max-width:92%}
}
.msg{display:flex; gap:10px; align-items:flex-end}
.msg .ava{width:34px;height:34px;border-radius:50%;flex:0 0 34px;object-fit:cover;border:1px solid #223150;background:#0f172a}
.msg .bubble{max-width:75%; padding:10px;border-radius:12px;border:1px solid #223150;background:#0b1224}

.from-owner{align-self:flex-start}
.from-user{align-self:flex-end; flex-direction:row-reverse}
.from-user .bubble{background:#0a1b3a}
.from-user .meta{text-align:right}

@media (max-width:640px){
  .msg .bubble{max-width:82%}
}

/* скрытый нативный file */
.file-input{ display:none; }

/* dropzone только на десктопе */
.only-desktop{ display:block; }
@media (max-width: 860px){
  .only-desktop{ display:none; }
}

/* toolbar как у мессенджеров */
.composer{ padding:10px 12px; }
.toolbar{
  display:flex;
  gap:8px;
  align-items:flex-end;
}

/* кнопки-иконки */
.icon-btn{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid #223150;
  background:#0f172a;
  color:#e2e8f0;
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.icon-btn:disabled{ opacity:.5; }
.icon-btn.danger{ border-color:#7f1d1d; }

/* textarea ввод */
.msg-input{
  flex:1;
  min-width:0;
  max-height: 140px;
  resize:none;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #2b3a5a;
  background:#0f172a;
  color:#e2e8f0;
  outline:none;
  line-height:1.25;
}

/* кнопка отправки */
.send-btn{
  width:46px;
  height:46px;
  border-radius:14px;
  border:none;
  background:#2563eb;
  color:#fff;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* На очень узких экранах делаем чуть меньше */
@media (max-width: 420px){
  .icon-btn{ width:38px; height:38px; border-radius:12px; }
  .send-btn{ width:42px; height:42px; }
  .msg-input{ padding:9px 10px; }
}

/* 1) Вся страница — колонка, без скролла body */
html, body { height: 100%; }
body.app{
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 2) messages — единственная скроллящаяся область */
.messages{
  flex: 1 1 auto;
  min-height: 0;          /* КРИТИЧНО для flex */
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  /* чтобы последнее сообщение не перекрывалось composer */
  padding-bottom: 110px;  /* подберите 90-140px под ваш composer */
}

/* 3) composer закреплён снизу */
.composer{
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.body video, .body img{
  max-width: 100%;
  height: auto;
  display:block;
}

/* видео часто ломает flex-скролл: ограничим высоту */
.body video{
  max-height: 52vh; /* можно 45-60vh */
}

/* Панель эмодзи НЕ sticky. Она занимает место в потоке между messages и composer */
.emoji-panel{
  flex: 0 0 auto;
  height: 200px;                 /* фиксированная высота */
  border-top: 1px solid #223150;
  border-bottom: 1px solid #223150;
  background: #0f172a;
  overflow: hidden;              /* скролл будет у grid */
}

.emoji-panel.hidden{ display:none; }

.emoji-head{
  height: 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:8px 10px;
  border-bottom:1px solid #223150;
  background:#0b1224;
}

.emoji-title{ font-size:13px; opacity:.9; }
.emoji-close{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid #223150;
  background:#0f172a;
  color:#e2e8f0;
}

.emoji-grid{
  height: calc(200px - 40px);    /* 160px */
  padding:10px;
  display:grid;
  grid-template-columns: repeat(50, 1fr);
  gap:8px;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

.emoji-item{
  width: 16px;
  height: 16px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  border:1px solid #223150;
  background:#0b1224;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

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

@media (max-width: 640px){
  .emoji-panel{ height: 200px; }
  .emoji-grid{ grid-template-columns: repeat(6, 1fr); }
}

.in-emoji{
  width: 22px;
  height: 22px;
  vertical-align: -4px;
  object-fit: contain;
}

.icon-btn.rec-on{
  border-color:#ef4444;
  background: rgba(239,68,68,.12);
  color:#fecaca;
}

.icon-btn.rec-on::after{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ef4444;
  display:inline-block;
  margin-left:6px;
  animation: recblink 1s infinite;
}

@keyframes recblink{
  0%,50%{ opacity: 1; }
  51%,100%{ opacity: .25; }
}

.replybar{
  display:flex;
  align-items:stretch;
  gap:10px;
  padding:8px 12px;
  border-top:1px solid #223150;
  background:#0b1224;
}
.replybar.hidden{ display:none; }

.replybar__line{
  width:4px;
  border-radius:4px;
  background:#2563eb;
  flex:0 0 4px;
}

.replybar__content{ flex:1; min-width:0; }
.replybar__title{ font-size:12px; opacity:.85; margin-bottom:2px; }
.replybar__text{
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.95;
}

.replybar__cancel{
  flex:0 0 auto;
  width:36px;
  border-radius:10px;
  border:1px solid #223150;
  background:#0f172a;
  color:#e2e8f0;
}