/* ═══════════════════════════════════════════════════════
   PULSE — pulse-fix.css  v3
   Подключать ПОСЛЕДНИМ, после improvements.css
   ═══════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────
   1. СТИКЕР БЕЗ ЦИТАТЫ — прозрачный пузырь, время сверху
   ────────────────────────────────────────────────────── */

.msg-bubble:has(.msg-sticker):not(:has(.msg-reply)) {
  background:    transparent !important;
  box-shadow:    none !important;
  padding:       0 !important;
  border-radius: 0 !important;
  border:        none !important;
  position:      relative !important;
  display:       inline-block !important;
  line-height:   0 !important;
  overflow:      visible !important;
}
.msg-bubble:has(.msg-sticker):not(:has(.msg-reply)) .msg-meta {
  position:        absolute !important;
  bottom:          5px !important;
  right:           5px !important;
  float:           none !important;
  top:             auto !important;
  margin:          0 !important;
  padding:         2px 6px !important;
  background:      rgba(0,0,0,.55) !important;
  border-radius:   10px !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  line-height:     1.5 !important;
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             3px !important;
  z-index:         2 !important;
}
.msg-bubble:has(.msg-sticker):not(:has(.msg-reply)) .msg-meta .msg-time {
  color:     rgba(255,255,255,.92) !important;
  font-size: 10.5px !important;
}
.msg-bubble:has(.msg-sticker):not(:has(.msg-reply)) .msg-meta .msg-check svg {
  stroke: rgba(255,255,255,.85) !important;
}


/* ──────────────────────────────────────────────────────
   1b. СТИКЕР С ЦИТАТОЙ — пузырь виден, время внизу стикера
   ────────────────────────────────────────────────────── */

.msg-bubble:has(.msg-sticker):has(.msg-reply) {
  /* оставляем фон пузыря, убираем только лишний padding снизу */
  padding:       7px 10px 6px 10px !important;
  position:      relative !important;
  line-height:   normal !important;
  display:       inline-block !important;
}
/* Цитата внутри такого пузыря — всё нормально */
.msg-bubble:has(.msg-sticker):has(.msg-reply) .msg-reply {
  display:     block !important;
  line-height: normal !important;
  margin-bottom: 6px !important;
}
.msg-bubble:has(.msg-sticker):has(.msg-reply) .msg-reply-name {
  display:     block !important;
  line-height: 1.3 !important;
}
.msg-bubble:has(.msg-sticker):has(.msg-reply) .msg-reply-text {
  display:     block !important;
  line-height: 1.4 !important;
}
/* Стикер после цитаты */
.msg-bubble:has(.msg-sticker):has(.msg-reply) .msg-sticker {
  display:     block !important;
  line-height: 0 !important;
  margin-top:  4px !important;
}
/* Время — обычный float (не absolute) */
.msg-bubble:has(.msg-sticker):has(.msg-reply) .msg-meta {
  position:    relative !important;
  float:       right !important;
  top:         4px !important;
  margin-left: 8px !important;
  margin-bottom: -2px !important;
  padding:     0 !important;
  background:  transparent !important;
  backdrop-filter: none !important;
}


/* ──────────────────────────────────────────────────────
   1c. РАЗМЕР СТИКЕРА
   ────────────────────────────────────────────────────── */

.msg-sticker {
  display:     inline-block !important;
  position:    relative !important;
  cursor:      pointer !important;
}
.msg-sticker img {
  width:         120px !important;
  height:        120px !important;
  min-width:     120px !important;
  min-height:    120px !important;
  max-width:     120px !important;
  max-height:    120px !important;
  object-fit:    contain !important;
  border-radius: 4px !important;
  display:       block !important;
}
@media (max-width: 480px) {
  .msg-sticker img {
    width:      100px !important;
    height:     100px !important;
    min-width:  100px !important;
    min-height: 100px !important;
    max-width:  100px !important;
    max-height: 100px !important;
  }
}


/* ──────────────────────────────────────────────────────
   2. ФОТО БЕЗ ЦИТАТЫ — время поверх картинки
   ────────────────────────────────────────────────────── */

.msg-bubble:has(.msg-img):not(:has(.msg-reply)) {
  padding:  3px !important;
  position: relative !important;
}
.msg-img {
  border-radius: 13px !important;
  overflow:      hidden !important;
  display:       block !important;
  line-height:   0 !important;
  cursor:        zoom-in !important;
}
.msg-img img {
  display:       block !important;
  width:         100% !important;
  height:        auto !important;
  max-width:     260px !important;
  max-height:    300px !important;
  object-fit:    cover !important;
  border-radius: 11px !important;
}
@media (max-width: 480px) {
  .msg-img img { max-width: min(240px, calc(100vw - 90px)) !important; }
}
.msg-bubble:has(.msg-img):not(:has(.msg-reply)) .msg-meta {
  position:        absolute !important;
  bottom:          9px !important;
  right:           9px !important;
  float:           none !important;
  top:             auto !important;
  margin:          0 !important;
  padding:         2px 6px !important;
  background:      rgba(0,0,0,.55) !important;
  border-radius:   10px !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  line-height:     1.5 !important;
  display:         inline-flex !important;
  align-items:     center !important;
  gap:             3px !important;
  z-index:         2 !important;
}
.msg-bubble:has(.msg-img):not(:has(.msg-reply)) .msg-meta .msg-time {
  color:     rgba(255,255,255,.92) !important;
  font-size: 10.5px !important;
}


/* ──────────────────────────────────────────────────────
   3. ШАПКА ЧАТА — safe-area сверху
   ────────────────────────────────────────────────────── */

.dlg-hdr {
  height:         auto !important;
  min-height:     calc(56px + env(safe-area-inset-top, 0px)) !important;
  padding-top:    env(safe-area-inset-top, 0px) !important;
  padding-bottom: 0 !important;
  padding-left:   4px !important;
  padding-right:  6px !important;
  align-items:    flex-end !important;
  box-sizing:     border-box !important;
}
.dlg-hdr-btn, .dlg-hdr-right { margin-bottom: 8px !important; }
.dlg-hdr-center { margin-bottom: 6px !important; }

.hdr {
  height:         auto !important;
  min-height:     calc(var(--hdr, 56px) + env(safe-area-inset-top, 0px)) !important;
  padding-top:    env(safe-area-inset-top, 0px) !important;
  padding-bottom: 0 !important;
  box-sizing:     border-box !important;
  align-items:    flex-end !important;
}
.hdr > * { margin-bottom: 8px !important; }
#s-dialog .hdr {
  padding-top: env(safe-area-inset-top, 0px) !important;
  min-height:  calc(52px + env(safe-area-inset-top, 0px)) !important;
}


/* ──────────────────────────────────────────────────────
   4. НИЖНЯЯ НАВИГАЦИЯ — safe-area снизу
   ────────────────────────────────────────────────────── */

.bnav {
  height:         auto !important;
  min-height:     calc(var(--nav, 56px) + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  padding-top:    4px !important;
  box-sizing:     border-box !important;
  align-items:    flex-start !important;
}


/* ──────────────────────────────────────────────────────
   5. ДИАЛОГ + ОБЛАСТЬ СООБЩЕНИЙ
   ────────────────────────────────────────────────────── */

#s-dialog {
  height:         100dvh !important;
  max-height:     100dvh !important;
  display:        flex !important;
  flex-direction: column !important;
  overflow:       hidden !important;
}
#s-dialog .msgs-area, .msgs-area {
  flex:                       1 1 0 !important;
  min-height:                 0 !important;
  overflow-y:                 auto !important;
  overscroll-behavior-y:      contain !important;
  -webkit-overflow-scrolling: touch !important;
}
.scr:not(#s-dialog) {
  padding-bottom: calc(var(--nav, 56px) + env(safe-area-inset-bottom, 0px)) !important;
  box-sizing:     border-box !important;
}


/* ──────────────────────────────────────────────────────
   6. ИНПУТ — safe-area снизу
   ────────────────────────────────────────────────────── */

.chat-input-wrap {
  flex-shrink:    0 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  box-sizing:     border-box !important;
}
.chat-row-inp {
  padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
}


/* ──────────────────────────────────────────────────────
   7. iOS LANDSCAPE
   ────────────────────────────────────────────────────── */

@media (max-height: 450px) and (orientation: landscape) {
  .dlg-hdr, .hdr { min-height: calc(44px + env(safe-area-inset-top, 0px)) !important; }
  .dlg-hdr-btn, .dlg-hdr-right { margin-bottom: 4px !important; }
  .dlg-hdr-center { margin-bottom: 3px !important; }
}


/* ──────────────────────────────────────────────────────
   8. БАЗОВЫЕ ПЕРЕМЕННЫЕ
   ────────────────────────────────────────────────────── */

:root {
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe:        env(safe-area-inset-bottom, 0px);
}
#app { height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; }
html, body { height: 100% !important; overflow: hidden !important; overscroll-behavior: none !important; }