/* =========================================================
   0) Base / Reset
   ========================================================= */
:root { color-scheme: light dark; }
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; margin: 0; line-height: 1.5; }

/* Basic building blocks used across modals/panels */
.card { border: 1px solid #e5e7eb; border-radius: 14px; padding: 1rem; box-shadow: 0 2px 12px rgba(0,0,0,.06); margin-bottom: 1rem; }
button { padding: .6rem 1rem; border-radius: 12px; border: 0; cursor: pointer; font-weight: 600; }
.primary { background: #2563eb; color: #fff; }
.danger  { background: #ef4444; color: #fff; }
.ghost   { background: #5f5f5f; }
input, label, select, textarea { font: inherit; }
input[type=text], input[type=password], textarea {
  width: 100%; padding: .6rem .7rem; border: 1px solid #e5e7eb; border-radius: 10px; background: inherit;
}
select { padding: .45rem .55rem; border: 1px solid #e5e7eb; border-radius: 10px; background: inherit; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.col { flex: 1 1 280px; }

/* =========================================================
   1) App Shell (Fullscreen, no page scroll)
   ========================================================= */
#appRoot.app-shell { height: 100vh; width: 100vw; min-height: 0; }

/* Desktop grid: Options | Stage | Chat (LTR default) */
#appRoot.app-shell:not(.mobile) {
  display: grid;
  grid-template-columns: 280px 1fr 360px;
  grid-template-areas: "options stage chat";
  gap: 0;
}
#appRoot.app-shell:not(.mobile) > * { min-height: 0; }

/* RTL flips side panels */
#appRoot.app-shell.ltr { direction: ltr; }
#appRoot.app-shell.rtl {
  direction: rtl;
  grid-template-columns: 360px 1fr 280px;
  grid-template-areas: "chat stage options";
}

/* Panels */
.panel.options { grid-area: options; display:flex; flex-direction:column; padding:1rem; border-right:1px solid #e5e7eb; min-width:0; }
.panel.chat    { grid-area: chat;    display:flex; flex-direction:column; border-left:1px solid #e5e7eb; min-width:0; }

/* Brand & stack menu */
.panel.options .brand { display:flex; align-items:center; gap:.6rem; margin-bottom: .75rem; }
.panel.options .brand h2 { margin:0; font-size:1.2rem }
.panel.options .menu { display:flex; flex-direction:column; gap:.5rem; }

/* Stage area */
.stage-wrap { grid-area: stage; display:flex; flex-direction:column; min-height:0; min-width:0; }
.stage { position:relative; border-radius:0; overflow:hidden; background:#000; width:100%; height:100%; min-height:0; }
.video-main { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.pip {
  position:absolute; width:30%; max-width:260px; aspect-ratio:16/9;
  right:1rem; bottom:1rem; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.35); touch-action:none; z-index:3;
}
.pip video { width:100%; height:100%; object-fit:contain; background:#000; }
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:2; }
.overlay canvas { position:absolute; inset:0; width:100%; height:100%; }
.overlay .msg {
  position:absolute; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8);
  font-size:clamp(14px,2.4vw,22px); padding:.4rem .8rem; background:rgba(15,23,42,.45); border-radius:10px;
}

/* Floating chat toggle (optional on desktop) */
.floating-chat-button { position:absolute; left:1rem; bottom:1rem; z-index:4; }
.floating-chat-button button { border-radius:999px; padding:.7rem 1rem; }

/* =========================================================
   2) Chat Panel (desktop) + Inputs
   ========================================================= */
.panel.chat .chatlog { flex:1; overflow:auto; padding:.6rem; max-height:unset; }
.panel.chat .chatinput { display:flex; gap:.5rem; padding:.5rem; border-top:1px solid #e5e7eb; }
.panel.chat .chatinput input { flex:1; padding:.5rem .6rem; border:1px solid #e5e7eb; border-radius:10px; }

/* =========================================================
   3) Chat Items (Indicator | [USER: content] | Action)
   ========================================================= */
.chatlog .item {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  gap: .5rem;
  align-items: center;
  padding: .15rem 0;
}
.chatlog .item .indicator { display:flex; align-items:center; justify-content:center; min-width:1.2rem; }
.chatlog .item .payload { min-width: 0; }
.chatlog .item .label { font-weight: 700; }
.chatlog .item .label.peer  { color:#2563eb; }
.chatlog .item .label.sys   { color:#64748b; }
.chatlog .item .label.admin { color:#ef4444; } /* red reserved for admins */
.chatlog .item .content { word-break: break-word; }
.chatlog .item .action .link { background:none; border:0; color:inherit; cursor:pointer; padding:.1rem .2rem; opacity:.8; }
.chatlog .item .action .link:hover { opacity:1; }

/* Queue / sending states */
.chatlog .item.queued   .content,
.chatlog .item.sending  .content { color:#6b7280; } /* gray-500 while pending */
.chatlog .item.blocked  .content { color:#6b7280; } /* local-only warning */
.chatlog .item.canceled .content { color:#9ca3af; text-decoration: line-through; }

/* Indicators */
.spinner {
  display:inline-block; width:14px; height:14px;
  border:2px solid currentColor; border-right-color:transparent;
  border-radius:999px; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.warn  { font-size:14px; line-height:1; }
.x     { font-size:12px; line-height:1; }
.check { font-size:14px; line-height:1; }

/* Simple legacy color tags still supported */
.chatlog .me   { color:#16a34a; }
.chatlog .peer { color:#2563eb; }
.chatlog .sys  { opacity:.8; font-style:italic; }

/* =========================================================
   4) Message Hover Menu (⋯), Reply refs, Mirror
   ========================================================= */
/* Kebab trigger + inline menu */
.chatlog .item .more { visibility:hidden; margin-left:.25rem; }
.chatlog .item:hover .more { visibility:visible; }
.more button.morebtn { background:none; border:0; cursor:pointer; font-size:18px; opacity:.7; }
.more button.morebtn:hover { opacity:1; }
.moremenu { display:inline-flex; gap:.35rem; align-items:center; }
.moremenu .link { background:none; border:0; cursor:pointer; padding:.1rem .25rem; opacity:.9; }
.moremenu .link:hover { opacity:1; text-decoration: underline; }

/* Reply reference above message */
.item .ref {
  display:flex; align-items:center; gap:.35rem;
  font-size:.9em; color:#64748b; margin-bottom:.15rem; cursor:pointer;
}
.item .ref::before { content:"↩︎"; }
.item .ref .ref-snippet { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Mirror (expanded original) */
.item .mirror {
  border-left:3px solid #e5e7eb; padding-left:.5rem; margin:.25rem 0 .15rem 0;
  font-size:.92em; color:#334155; background:rgba(148,163,184,.06); border-radius:6px;
}
.item .mirror .mirror-tag { font-size:.8em; opacity:.8; margin-left:.35rem; }

/* =========================================================
   5) Modals (Chat / Report)
   ========================================================= */
.chat-modal {
  position:fixed; left:0; right:0; bottom:0; top:10%;
  background:rgba(15,23,42,.92); display:none; z-index:10;
}
.chat-card {
  background:#fff; color:#000; border-radius:14px 14px 0 0;
  height:100%; padding:.5rem; display:flex; flex-direction:column;
}
.chat-card .chatlog { flex:1; overflow:auto; }
.chat-card .chatinput { display:flex; gap:.5rem; padding:.5rem 0; }

/* Mobile chat overlay variant (30% height) */
.chat-modal.chat-overlay { top:auto; height:30vh; background:rgba(15,23,42,.75); }
.chat-modal.chat-overlay .chat-card { height:100%; border-radius:14px 14px 0 0; background:#ffffffee; }

/* =========================================================
   6) Mobile Shell
   ========================================================= */
#appRoot.app-shell.mobile { display:flex; flex-direction:column; height:100vh; width:100vw; }
#appRoot.app-shell.mobile .stage-wrap { flex:1 1 auto; min-height:0; }
.mobile-bar {
  flex:0 0 56px; display:flex; align-items:center; justify-content:space-around;
  border-top:1px solid #e5e7eb; padding:.25rem .4rem; background:var(--bg,#fff); z-index:5;
}

/* Optional sticky controls container (if you inject buttons there on mobile) */
.sticky-controls { }

/* =========================================================
   7) Accessibility helpers
   ========================================================= */
:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* --- Mobile control bar --- */
@media (max-width: 900px){
  html, body, #mount, #appRoot, main { height: 100%; }
  .stage { height: 100%; }

  .mobile-bar{
    position: fixed;
    left: 0; right: 0;
    bottom: env(safe-area-inset-bottom, 0);
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .55rem .75rem calc(.55rem + env(safe-area-inset-bottom, 0));
    background: rgba(15,23,42,.92);
    backdrop-filter: blur(8px);
    color: #fff;
    z-index: 7;             /* above overlay (2) and pip (3) */
  }
  .mobile-bar .spacer{ flex: 1 }
  .mobile-bar button{ border-radius: 999px; padding: .55rem .9rem }
}

/* Phone chat modal layout (already in your CSS; keep these if present) */
@media (max-width: 900px){
  .chat-modal{position:fixed; left:0; right:0; bottom:0; top:20%; background:rgba(15,23,42,.92); display:none; z-index:10}
  .chat-card{background:#fff; color:#000; border-radius:14px 14px 0 0; height:100%; padding:0.5rem; display:flex; flex-direction:column}
  .chat-card .chatlog{flex:1; overflow:auto}
}
.modal{ position:fixed; inset:0; display:none; z-index: 20; background: rgba(0,0,0,.45); }
.modal .card{ max-width:520px; margin:8vh auto; }
@media (max-width:900px){
  .modal .card{ margin: 0.75rem; border-radius: 14px; }
}
.flag{ height:20px; width:auto; vertical-align:text-bottom; border-radius:3px; margin-inline-start:.35rem }
/* The main dimmed backdrop should accept clicks */
.modal{ position:fixed; inset:0; background:rgba(15,23,42,.72); display:none; z-index:9999; 
        padding:1rem; overflow:auto; pointer-events:auto; }
.modal-card{ max-width:520px; margin:8vh auto 4rem; background:#fff; color:#000; 
             border-radius:14px; padding:1rem; box-shadow:0 10px 28px rgba(0,0,0,.35);
             pointer-events:auto; }