/* =====================================================================
   ShotGram v101 — chat box, DM video viewer, message banner, edit profile.
   ===================================================================== */

/* ---- chat: the message box grows with the text (up to ~5 lines) ------- */
.room-bar .msg-input {
  resize: none; display: block;
  min-height: 40px; line-height: 20px;
  padding-top: 10px; padding-bottom: 10px;
  overflow-y: hidden; white-space: pre-wrap; word-break: break-word;
  font-size: 16px;                         /* ≥16px: iPhone never zooms on focus */
  -webkit-user-select: text; user-select: text;
}
.room-bar { align-items: flex-end; }
.room-bar > button, .room-bar .icon-btn { align-self: flex-end; margin-bottom: 2px; }

/* ---- chat: video in a bubble = thumbnail + play button ---------------- */
.dm-video-thumb { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.dm-video-thumb .bubble-video { pointer-events: none; display: block; }
.dm-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(10, 11, 22, .55); border: 1.5px solid rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}
.dm-play svg { width: 24px; height: 24px; margin-inline-start: 3px; }
[dir="rtl"] .dm-play svg { margin-inline-start: 0; margin-inline-end: 3px; }
.dm-video-thumb:active .dm-play { transform: translate(-50%, -50%) scale(.94); }

/* ---- full-screen DM video viewer (same look as the photo viewer) ------ */
.video-viewer {
  position: fixed; inset: 0; z-index: 1500;
  display: grid; place-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 56px) 12px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: rgba(4, 5, 12, .96);
  opacity: 0; transition: opacity .18s ease;
}
.video-viewer.open { opacity: 1; }
.video-viewer video {
  max-width: 100%; max-height: 100%; border-radius: 16px; background: #000;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.video-viewer .photo-lightbox-close { z-index: 2; }

/* ---- in-app new-message banner --------------------------------------- */
.msg-banner {
  position: fixed; z-index: 1800;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 50%; width: min(440px, calc(100% - 20px));
  transform: translate(-50%, -140%);
  display: flex; align-items: center; gap: 11px;
  padding: 10px 14px; border-radius: 18px; text-align: start; color: #fff; cursor: pointer;
  background: rgba(22, 23, 38, .94);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .26s cubic-bezier(.2, .9, .25, 1);
}
.msg-banner.show { transform: translate(-50%, 0); }
.msg-banner .mb-text { display: grid; min-width: 0; line-height: 1.3; }
.msg-banner .mb-text b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-banner .mb-text span { font-size: 13.5px; color: #c9cce8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .msg-banner { transition: none; } }
@media (min-width: 1024px) { html.sg-web .msg-banner { left: calc(50% + var(--side-w, 0px) / 2); } }

/* ---- edit profile: grouped, cleaner ---------------------------------- */
.edit-form { gap: 0; padding-top: 4px; }
.edit-group-title {
  margin: 18px 4px 8px; font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #8a8fa3);
}
.edit-group {
  display: grid; gap: 14px;
  padding: 14px; border-radius: 18px;
  background: var(--surface, rgba(255, 255, 255, .04));
  border: 1px solid var(--line, rgba(255, 255, 255, .08));
}
.edit-group + .edit-group { margin-top: 12px; }
.edit-group .field { margin: 0; }
.edit-group .field label { font-size: 12.5px; font-weight: 700; color: var(--muted, #9aa0bd); margin-bottom: 6px; display: block; }
.edit-group .input { border-radius: 12px; font-size: 16px; }
.edit-group .field-hint { font-size: 12px; line-height: 1.45; margin-top: 6px; }
.edit-group .editor-section-title { display: grid; gap: 2px; margin-bottom: 2px; }
.edit-group .editor-section-title span { font-size: 12.5px; color: var(--muted, #8a8fa3); }
.edit-group .switch-row { margin: 0 !important; padding: 6px 2px; }
.edit-cover { border-radius: 0 0 22px 22px; overflow: hidden; }
.edit-avatar { margin-top: -46px; position: relative; z-index: 2; padding-top: 0 !important; }
.edit-avatar-button .avatar.xl { box-shadow: 0 0 0 4px var(--bg, #06070f), 0 10px 26px rgba(0, 0, 0, .4); }
#editMsg:empty { display: none; }
#editMsg { margin-top: 12px; }