/* ===== RYD Chat – Mobile-Only Shell (sheet model) ===== */
/* Always render as a phone UI, even on desktop */
:root{
  --bg: #0f0b0b;
  --panel: #1b1414;
  --panel-2: #221919;
  --border: #372a2a;
  --text: #eee7e7;
  --muted: #b2a1a1;
  --accent: #ea0c0c;
  --shadow: 0 10px 25px rgb(0, 0, 0);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-nav-h: 56px;
  --mobile-w: 420px;
  --mobile-h: 740px;
}

html, body{ height:100%; background: var(--bg); color: var(--text); }

/* Force a phone-sized frame on desktop so it always looks mobile */
body.force-mobile .chat-shell{
  width: min(var(--mobile-w), 100vw);
  height: min(var(--mobile-h), 100dvh);
  margin: 10px auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
  background: var(--bg);
  padding-bottom: calc(var(--mobile-nav-h) + var(--safe-bottom));
}

/* Thin header bar */
.chat-header{
  height:40px; display:flex; align-items:center; gap:.5rem;
  padding:0 .75rem; background: linear-gradient(180deg, #140e0e, #0f0a0a);
  border-bottom:1px solid var(--border);
}
.chat-header .spacer{ flex:1; }
.chat-header .btn{
  height:26px; padding:0 .6rem; border:1px solid var(--border);
  border-radius:8px; background: var(--panel); color: var(--text); font-size:.84rem;
}
.chat-header .btn.primary{ background: var(--accent); border-color:#b54708; color:white; }
.chat-header .user{ font-size:.86rem; color: var(--muted); }

/* Center chat view occupies full area behind sheets */
.pane-center, #messages{ height:100%; }
.pane-center{ display:flex; flex-direction:column; }
.room-head{ display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border-bottom:1px solid var(--border); background: var(--panel-2); }
.room-head .meta{ color:var(--muted); font-size:.84rem; }
#messages{ flex:1; overflow:auto; padding:.5rem .5rem 1rem; }
.msg{ border-radius:10px; padding:.4rem .5rem; }
.msg:hover{ background:#ffffff0d; }

/* Bottom nav – the only visible controls until a sheet is opened */
.mobile-nav{
  position: absolute; left:0; right:0; bottom:0;
  height: var(--mobile-nav-h); padding-bottom: var(--safe-bottom);
  display:flex; align-items:stretch; justify-content:space-around;
  background: linear-gradient(180deg, #140e0e, #0f0a0a);
  border-top: 1px solid var(--border);
  z-index: 50;
}
.mobile-nav button{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:.85rem; color: var(--muted);
  background: transparent; border:0;
}
.mobile-nav button.active{ color: var(--text); font-weight:600; }
.mobile-nav .dot{ width:6px; height:6px; border-radius:999px; background: var(--accent); margin-top:2px; display:none; }
.mobile-nav button.active .dot{ display:inline-block; }
.mobile-nav #nav-dms.has-new::after{
  content:""; width:8px; height:8px; border-radius:999px; background: var(--accent);
  position:absolute; margin-top:-18px;
  animation: blink 1s infinite;
}
@keyframes blink{ 50%{ opacity:.3 } }

/* Full-screen bottom sheets (Channels, Users, DMs) */
.sheet{
  position:absolute; left:0; right:0; bottom:0; top:0;
  background: var(--panel);
  border-top-left-radius: 16px; border-top-right-radius:16px;
  box-shadow: var(--shadow);
  transform: translateY(100%);
  transition: transform .25s ease;
  z-index: 60;
  display:flex; flex-direction:column;
}
.sheet.show{ transform: translateY(0); }
.sheet .head{
  height:44px; display:flex; align-items:center; gap:.5rem; padding:0 .75rem;
  background: var(--panel-2); border-bottom:1px solid var(--border);
  border-top-left-radius: 16px; border-top-right-radius:16px;
  font-weight:600;
}
.sheet .body{ flex:1; overflow:auto; padding:.5rem; }
.sheet .foot{ padding:.5rem .75rem; border-top:1px solid var(--border); display:flex; gap:.5rem; justify-content:flex-end; }

/* Lists inside sheets */
.sheet ul{ list-style:none; margin:0; padding:0; }
.sheet li{ padding:.6rem .6rem; border-radius:12px; }
.sheet li:hover{ background:#ffffff12; }

/* Hide original side panes on mobile-only mode */
body.force-mobile .pane-left, body.force-mobile .pane-right{ display:none !important; }

/* Composer padding so it doesn't overlap with nav */
.send-dock{ padding:.5rem .75rem; border-top:1px solid var(--border); background: var(--panel); }

/* Reactions visibility */
.reaction-bar{ display:flex; gap:.35rem; align-items:center; }
.reaction-bar .counts{ display:flex; gap:.25rem; }
.reaction-bar .add-row{ display:none; margin-left:.35rem; }
.msg.show-reactions .reaction-bar .add-row{ display:flex; }
.reaction-chip{ display:inline-flex; align-items:center; gap:.25rem; border:1px solid var(--border); background:#262633;
  border-radius:999px; padding:.1rem .45rem; font-size:.75rem; }

/* Avatars (small on mobile) */
:root{ --avatar: 26px; --avatar-msg: 22px; }
.avatar{ width: var(--avatar); height: var(--avatar); border-radius: 9999px; overflow:hidden; flex: 0 0 auto; background:#2a2a37; }
img.avatar{ width:100%; height:100%; object-fit:cover; }
.msg .avatar{ --avatar: var(--avatar-msg); }


/* === RC1: viewport lock and in-shell modals/windows === */
html, body{ margin:0; height:100%; overflow:hidden; }
body.force-mobile{ touch-action: manipulation; overscroll-behavior: none; }

/* Keep everything inside the phone frame */
body.force-mobile .chat-shell{ position: relative; overflow: hidden; }
body.force-mobile .modal{ position:absolute; inset:0; z-index:70; align-items:flex-start; justify-content:center; }
body.force-mobile .modal .overlay{ position:absolute; inset:0; }
body.force-mobile .modal .panel{ margin-top: 10vh; max-height: 80vh; overflow:auto; }

/* Profile as a sheet on mobile */
body.force-mobile #profile-modal{ display:none !important; } /* we re-render as a sheet */
body.force-mobile .sheet.profile-sheet{ z-index: 70; }

/* DM windows behave like a sheet on mobile */
body.force-mobile .dm-window.glass{
  position:absolute;
  left:0; right:0;
  bottom: calc(var(--mobile-nav-h) + var(--safe-bottom));
  top: 44px; /* below header */
  border-radius: 16px 16px 0 0;
  background: var(--panel);
  border: 1px solid var(--border);
  z-index: 65;
  display:flex; flex-direction:column;
}
body.force-mobile .dm-window.glass[hidden]{ display:none !important; }

/* DM dock lives above the bottom bar, inside the frame */
body.force-mobile #dm-dock{
  position:absolute !important;
  right: 8px; bottom: calc(var(--mobile-nav-h) + var(--safe-bottom) + 8px) !important;
  z-index:66 !important;
}

/* Make sure nothing can expand outside the frame horizontally */
body.force-mobile, body.force-mobile *{ max-width:100%; box-sizing:border-box; }


/* === RC1.1: DM floater icon (draggable) and minimize button === */
body.force-mobile #dm-floaters{
  position:absolute;
  left:0; right:0;
  top: 44px; /* below header */
  bottom: calc(var(--mobile-nav-h) + var(--safe-bottom));
  pointer-events:none;
  z-index: 67;
}
.dm-floater{
  position:absolute;
  width: 44px; height: 44px;
  border-radius: 9999px;
  background: var(--accent);
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow);
  pointer-events:auto;
  border:1px solid var(--border);
  cursor: grab;
  user-select: none;
}
.dm-floater img{ width:100%; height:100%; object-fit:cover; border-radius:9999px; }
.dm-floater .initials{ font-weight:700; }

/* Inline minimize control for DM window if your template lacks one */
.dm-window .dm-mini-btn{
  position:absolute; top:6px; right:6px;
  border:1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius:8px; padding:2px 10px; height:28px; line-height:24px;
}
.dm-window .dm-mini-btn:hover{ background:#372a2a; }