/* ============================================================
   UVLIS — Chat glass overlay. Loaded ONLY on /chat, after
   styles.css, so it reskins the chat without touching the
   shared stylesheet. Apple-style premium: translucent
   surfaces, backdrop blur, quiet color, system typography.

   Room backgrounds are now admin-set (color / gradient / image)
   and applied inline on .chat-messages by chat.js — see the
   .has-room-bg rules near the end of this file.
   ============================================================ */

.chat-shell {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI', sans-serif;
}

/* ── Canvas: same calm glow as the landing / home ─────────── */
.chat-page {
  background:
    radial-gradient(1100px 620px at 80% -10%, rgba(124, 58, 237, 0.10), transparent 62%),
    radial-gradient(900px 540px at 6% 0%, rgba(6, 182, 212, 0.05), transparent 55%),
    #050507;
}
.chat-messages {
  background: transparent;
  background-image: none;
}

/* ── Header: floating glass bar ───────────────────────────── */
.chat-header {
  background: rgba(8, 8, 13, 0.6);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.chat-header-room {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.chat-header-online {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.09);
  font-weight: 600;
}
button.chat-header-online:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
}

/* Online dropdown */
.online-pop {
  background: rgba(18, 18, 26, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
}

/* ── Bubbles — minimalist, like the landing mockup ────────────
   Flat translucent surface + a hairline border, generous radius,
   and a soft violet tint for your own messages (not a bold fill). */
.message-body {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
  border-radius: 16px;
  padding: 8px 13px 7px;
}
.message.own .message-body {
  background: rgba(124, 58, 237, 0.16);
  border-color: rgba(167, 139, 250, 0.26);
}
.message.own .message-content { color: #f3f1fb; }
.message.own .message-time { color: rgba(255, 255, 255, 0.55); }

/* Media bubbles (stickers / images) stay chrome-free */
.message-body:has(.message-sticker),
.message-body:has(.chat-img-grid) { border-color: transparent; }

/* Name in a quiet white (no per-user color), time as a muted caption
   sitting next to the name — "Sofi  ahora" — like the landing mockup. */
.message-username { color: #eceaf3; font-weight: 600; letter-spacing: -0.01em; }
.message-time { color: rgba(255, 255, 255, 0.34); font-weight: 500; }
.message-time-inline { display: inline; text-align: left; margin: 0 0 0 2px; font-size: 0.62rem; }
/* When the header shows (first bubble of a group), the timestamp lives up
   there — hide the in-bubble copy. Own & grouped bubbles (no header) keep it. */
.message:not(.own):not(.grouped) .message-time-bubble { display: none; }

/* Reactions — quiet rounded pills */
.reaction-badge {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
}
.reaction-badge.active {
  background: rgba(124, 58, 237, 0.18);
  border-color: rgba(167, 139, 250, 0.4);
}

/* Hover toolbar (reply + reactions) */
.message-actions {
  background: rgba(18, 18, 26, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

/* ── Welcome banner: plain premium type, no gradient text ─── */
.welcome-banner h2 {
  background: none;
  -webkit-text-fill-color: #f5f5f7;
  color: #f5f5f7;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.welcome-banner p { color: #a6a6b0; }

/* ── Composer: glass pill + white send button ─────────────── */
.chat-input-container {
  background: linear-gradient(180deg, transparent, rgba(5, 5, 7, 0.88) 30%);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.chat-input-wrapper {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: none;
}
.chat-input-wrapper:focus-within {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}
.send-btn {
  background: #fff;
  color: #050507;
  box-shadow: 0 8px 20px -8px rgba(255, 255, 255, 0.35);
}
.send-btn:hover {
  background: #e9e9ef;
  filter: none;
  box-shadow: 0 10px 24px -8px rgba(255, 255, 255, 0.4);
}

/* Voice recording bar mirrors the composer pill */
.voice-record-bar {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 26px;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}

/* ── Pickers (emoji / stickers) ───────────────────────────── */
.emoji-picker,
.sticker-picker {
  background: rgba(18, 18, 26, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 20px;
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
}

/* ── Modals (create room / theme / video note) ────────────── */
.modal-overlay {
  background: rgba(4, 4, 7, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.modal {
  background: rgba(22, 22, 30, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 26px;
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
}
.videonote-modal {
  background: rgba(22, 22, 30, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.09);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}

/* Reply-compose bar above the composer */
.reply-bar {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── "+" attach button & menu (WhatsApp-style) ────────────── */
.chat-input-wrapper { padding: 5px 6px; }
.plus-anchor { align-self: flex-end; }
.plus-btn svg { width: 22px; height: 22px; }
.plus-btn.active svg { transform: rotate(45deg); }
.plus-btn svg { transition: transform 0.2s ease; }

.plus-menu {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 0;
  min-width: 210px;
  padding: 6px;
  display: none;
  z-index: 60;
  background: rgba(18, 18, 26, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.85);
}
.plus-menu.active { display: block; animation: plusMenuIn 0.16s ease both; }
@keyframes plusMenuIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.plus-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #f5f5f7;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.14s ease;
}
.plus-item:hover { background: rgba(255, 255, 255, 0.06); }
.plus-item svg { width: 19px; height: 19px; flex-shrink: 0; color: #a78bfa; }
.plus-item:disabled { opacity: 0.5; cursor: wait; }

/* ── Mic ↔ send swap (only when recording is supported) ───── */
.chat-input-wrapper.has-voice .send-btn { display: none; }
.chat-input-wrapper.has-voice.has-text .send-btn { display: flex; }
.chat-input-wrapper.has-voice.has-text .voice-btn { display: none; }
.voice-btn { align-self: flex-end; }

/* ── Mobile: ONE clean row like WhatsApp ──────────────────────
   styles.css used to lift the whole action row above the textarea;
   with the "+" menu that toolbar is gone: [+] [input · stickers] [mic/send]. */
@media (max-width: 768px) {
  .chat-actions {
    order: 0;
    width: auto;
    justify-content: flex-start;
    gap: 0;
    padding: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
  .chat-input { order: 0; }
  .send-btn { order: 0; }
  /* The keyboard already has emojis on the phone — keep just stickers */
  #emoji-btn { display: none; }
  .plus-menu { left: -2px; }
}

/* ============================================================
   EMBED MODE — chat rendered inside the /mensajes messenger
   (iframe, ?embed=1). We drop our own sidebar + chrome so it
   slots cleanly into the right pane as a pure DM thread.
   ============================================================ */
.chat-embed .sidebar,
.chat-embed .sidebar-backdrop,
.chat-embed .mobile-menu-btn,
.chat-embed #room-theme-btn,
.chat-embed .chat-room-theme-badge { display: none !important; }

/* Fill the iframe; no rounded page frame, the parent owns the corners. */
.chat-embed .chat-page { height: 100vh; height: 100dvh; }
.chat-embed .chat-main { width: 100%; }

/* Slim, Instagram-style header: peer identity only. */
.chat-embed .chat-header {
  padding-left: 20px;
  border-radius: 0;
}
.chat-embed .chat-header-desc { color: var(--text-muted, #8b90a0); }

/* ── Admin-set room background (color / gradient / image wallpaper) ──
   Applied inline on .chat-main by chat.js so it spans the FULL height —
   behind the header, messages and composer. For image backgrounds the
   readability tint is baked in as a gradient LAYER (fixed wallpaper, no
   scrolling scrim; colour is admin-configurable per room).
   The header & composer go frosted-transparent so the image shows through
   top to bottom, while keeping their blur for legibility. */
.chat-main.has-room-bg .chat-messages { background: transparent; }
/* Floating header: out of the flex flow so messages scroll behind it too. */
.chat-main.has-room-bg .chat-header {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 6;
  background: rgba(8, 8, 13, 0.32);
}
.chat-main.has-room-bg .typing-indicator { background: transparent; position: absolute; left: 0; right: 0; bottom: 84px; z-index: 5; }
/* Floating composer: out of the flex flow + transparent, so messages scroll
   behind the input pill (only the pill sits over the wallpaper). */
.chat-main.has-room-bg .chat-input-container {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 6;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top-color: transparent;
}
.chat-main.has-room-bg .chat-messages { padding-top: 72px; padding-bottom: 92px; }
/* Composer pill: lighter frosted glass so it reads over the wallpaper too. */
.chat-main.has-room-bg .chat-input-wrapper {
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}