/* Dedicated fullscreen chat layout for /chat
   Goals:
   - Chat is full width + full height
   - Input bar is always pinned to bottom (desktop + mobile)
   - Messages are full width (no narrow bubbles/container constraints)
   - Users list is OPEN on desktop, OFF-CANVAS on mobile (toggle via tab + swipe)
*/

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Hide normal site chrome on this route */
header, footer {
  display: none !important;
}

/* Ensure any global container doesn't constrain width */
body .container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Root fullscreen area */
.chat-fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,.20);
}

/* Desktop: chat + users side-by-side */
.chat-layout {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 320px;
}

/* Main chat */
.chat-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: rgba(0,0,0,.14);
}

.chat-shell-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
}

.chat-shell-head .title .h {
  font-size: 18px;
  font-weight: 800;
}

.chat-shell-head .actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Hide the mobile tab on desktop (users panel is already visible) */
.users-tab {
  display: none;
}

/* Messages scroll area */
#chatMessages.chat-shell-body,
.chat-shell-body {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  overflow-y: auto;
  padding: 12px;
  box-sizing: border-box;
  /* reserve only what's needed for the input bar */
  padding-bottom: calc(64px + env(safe-area-inset-bottom));
}

/* main.css sets fixed heights for the homepage chat card. Override in fullscreen. */
.chat-messages{ height:auto !important; max-height:none !important; }

/* Make message rows/bubbles never exceed the container width */
#chatMessages .message,
#chatMessages .msg,
#chatMessages .chat-message,
#chatMessages .bubble,
#chatMessages .line {
  max-width: 100% !important;
  width: 100% !important;
}

/* Pinned input bar (absolute inside chat-shell) */
.chat-shell-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.30);
  box-sizing: border-box;
}

.chat-input input#chatInput {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  font-size: 16px;
  border-radius: 10px;
}

.chat-input button {
  height: 44px;
}

/* Emoji picker should float over content */
#emojiPicker {
  position: fixed;
  left: 12px;
  bottom: 70px;
  z-index: 50;
}

/* Users panel (desktop visible) */
.users-panel {
  height: 100%;
  width: 320px;
  background: rgba(0,0,0,.55);
  border-left: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.users-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Close button hidden on desktop */
.users-close {
  display: none;
}

.users-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

/* Make participant rows consistent + avoid weird oversized shapes */
#onlineList .online-chip{ border-radius:12px; }
#onlineList .online-chip .name{ line-height:1.1; }
#onlineList .online-chip .pill.tiny{ margin-left:auto; }

/* One user per line, full width */
#onlineList > * {
  display: block;
  width: 100%;
}

.users-overlay {
  display: none;
}

/* ---------- MOBILE (off-canvas users panel) ---------- */
@media (max-width: 900px) {
  .chat-layout {
    grid-template-columns: 1fr;
  }

  /* Show the users tab button */
  .users-tab {
    display: inline-flex;
  }

  /* Users panel becomes off-canvas */
  .users-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    transform: translateX(100%);
    transition: transform .22s ease;
    z-index: 60;
    /* More opaque drawer on mobile (readability) */
    background: rgba(0,0,0,.82);
  }

  .users-panel.open {
    transform: translateX(0);
  }

  /* Close button visible on mobile */
  .users-close {
    display: inline-flex;
  }

  .users-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: none;
    z-index: 55;
  }

  .users-overlay.show {
    display: block;
  }

  /* Slightly tighter spacing */
  .chat-shell-head {
    padding: 10px;
  }

  #chatMessages.chat-shell-body,
  .chat-shell-body {
    padding: 10px;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
}

/* Hide ticker on fullscreen chat */
.ticker{display:none !important;}


/* ---- Chat background webcam (chat-only) ---- */
#chatFullscreenRoot{
  position: relative;
  overflow: hidden;
}
#chatFullscreenRoot::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--chat-bg-image) center/cover no-repeat;
  filter: saturate(1.05) contrast(1.05);
  opacity: 0.18; /* visible but not killing readability */
  transform: scale(1.03);
  z-index: 0;
}
#chatFullscreenRoot .chat-layout{ position: relative; z-index: 1; }

/* ---- Mic button ---- */
.mic-btn.recording{
  background: rgba(220, 60, 60, .15);
  border-color: rgba(220, 60, 60, .55);
}
.mic-btn.recording::after{
  content:"●";
  margin-left:.35rem;
  font-size:.8rem;
}

/* ---- Typing indicator ---- */
.typing-indicator{
  min-height: 18px;
  padding: 6px 12px 10px;
  color: rgba(255,255,255,.85);
  font-size: 12px;
}
.typing-indicator .dot{
  display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background: rgba(255,255,255,.75);
  margin: 0 2px;
  animation: typDot 1.2s infinite ease-in-out;
}
.typing-indicator .dot:nth-child(2){ animation-delay:.15s; }
.typing-indicator .dot:nth-child(3){ animation-delay:.3s; }
@keyframes typDot{ 0%,80%,100%{ transform: translateY(0); opacity:.35;} 40%{ transform: translateY(-3px); opacity:1;}}

/* ---- User context menu ---- */
.user-context-menu{
  position: fixed;
  min-width: 220px;
  max-width: 280px;
  background: rgba(20, 24, 34, .92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  padding: 8px;
  z-index: 9999;
  backdrop-filter: blur(10px);
}
.user-context-menu.hidden{ display:none; }
.user-context-menu .uhead{
  display:flex; gap:10px; align-items:center;
  padding: 6px 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 6px;
}
.user-context-menu .uhead img{ width:34px;height:34px;border-radius:50%; object-fit:cover; }
.user-context-menu .uhead .name{ font-weight:700; color: rgba(255,255,255,.95); }
.user-context-menu .uhead .sub{ font-size:12px; color: rgba(255,255,255,.65); }
.user-context-menu button{
  width:100%;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap:10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.92);
  cursor:pointer;
  text-align:left;
}
.user-context-menu button:hover{ background: rgba(255,255,255,.07); }
.user-context-menu button.danger{ color: rgba(255,120,120,.98); }
.user-context-menu button small{ color: rgba(255,255,255,.55); font-size:11px; }

.user-context-menu .mini{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.user-context-menu .mini-line{
  display:flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px;
  font-size: 12px;
}

.user-context-menu .mini{
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: grid;
  gap: 6px;
}
.user-context-menu .mini-line{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
}

/* ---- Voice message bubble ---- */
.msg .voice-wrap{
  display:flex; gap:10px; align-items:center;
}
.msg audio{ width: 260px; max-width: 100%; }
.msg .voice-meta{ font-size: 12px; color: rgba(255,255,255,.65); }


/* hide chat title on mobile */
@media (max-width: 720px){
  .chat-shell-head .h{display:none}
}