/* ================= Theme / Base ================= */
:root{
  --bg:#0b1220; --panel:#0f172a; --muted:#94a3b8; --card:#0f172a; --border:#334155;
  --mine:#0ea5e9; --theirs:#1f2937;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; height:100dvh; background:var(--bg); color:#e2e8f0;
  font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",sans-serif;
  display:grid; grid-template-rows:auto 1fr;
}
.wrap{width:min(1600px,100%); margin:0 auto; padding-inline:0}

/* ================= Header ================= */
header{background:var(--panel); border-bottom:1px solid var(--border)}
.headbar{
  display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; padding:8px 16px;
}
.title{display:flex; align-items:center; gap:10px; min-width:0}
h1{font-size:clamp(16px,2.2vw,20px); margin:0; font-weight:600; white-space:nowrap}
.pill{color:var(--muted); font-size:12px; border:1px solid var(--border); padding:2px 8px; border-radius:999px; white-space:nowrap}

/* Brand link (image + text centered vertically) */
.brand{line-height:1}
.brand-link{display:inline-flex; align-items:center; gap:.5rem; color:inherit; text-decoration:none}
.brand-link:hover{text-decoration:underline}
.brand-icon{display:block; height:1.25em; width:auto; border-radius:8px}

/* Top controls */
.top-controls{display:grid; grid-auto-flow:column; grid-auto-columns:max-content; gap:8px; align-items:center}
input,button{
  background:#0f172a; color:#e2e8f0; border:1px solid var(--border);
  border-radius:10px; padding:8px 10px;
}
input#username{width:clamp(140px,22vw,260px)}
button{cursor:pointer}
button.primary{background:var(--mine); border-color:#075985; color:#081018; font-weight:600}
button.ghost{background:transparent}
#status{font-size:12px}
.top-controls button:disabled{opacity:.5; cursor:not-allowed; pointer-events:none}

/* ================= Main layout ================= */
main{padding:12px 16px; display:flex; min-height:0}
.shell{
  display:grid; grid-template-columns:260px 1fr; gap:16px;
  width:100%; min-height:0;
}

/* Sidebar (users) */
.sidebar{
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:12px; min-height:0; overflow:auto; max-height:100%;
}
.sidehead{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
#userList{list-style:none; padding:0; margin:0}
#userList li{padding:8px 10px; border-radius:8px; border:1px solid transparent; display:flex; align-items:center; gap:8px}
#userList li:hover{background:#101a30; border-color:#1c2945}
#userList .name{font-weight:600}

/* Presence dots */
.status-dot{width:10px; height:10px; border-radius:999px; display:inline-block; box-shadow:0 0 0 2px rgba(0,0,0,.15) inset}
.status-dot.green{background:#22c55e}
.status-dot.yellow{background:#facc15}
.status-dot.gray{background:#9ca3af}

/* Chat column */
section#chat{display:flex; flex-direction:column; min-height:0}
#log{
  flex:1 1 auto; min-height:0; overflow:auto; padding:8px; scroll-behavior:smooth;
  background:#091026; border:1px solid var(--border); border-radius:12px;
}
.row-msg{margin:8px 6px; display:flex; gap:8px; align-items:flex-end}
.bubble{
  max-width:78%; padding:10px 12px; border:1px solid var(--border); border-radius:14px;
  word-wrap:break-word; white-space:pre-wrap; box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.mine{margin-left:auto; background:color-mix(in oklab, var(--mine) 22%, #0b1220); border-color:#0ea5e966}
.theirs{margin-right:auto; background:var(--theirs)}
.meta{display:flex; gap:8px; align-items:baseline; margin-bottom:4px}
.name{font-weight:600}
.time{color:var(--muted); font-size:12px}
.sys{color:var(--muted); font-style:italic; text-align:center; margin:8px 0}

/* Send bar fixed at bottom of chat column */
.sendbar{display:grid; grid-template-columns:auto 1fr auto; gap:8px; padding-top:12px; flex:0 0 auto}
.emoji-wrap{position:relative}

/* Emoji panel */
#emojiPanel{
  position:absolute; bottom:48px; left:0; background:var(--card); border:1px solid var(--border); border-radius:12px;
  width:min(380px,94vw); max-height:240px; overflow:auto; padding:6px; display:none; box-shadow:0 10px 30px rgba(0,0,0,.35);
}
#emojiPanel.open{display:grid; grid-template-columns:repeat(10,1fr); gap:6px; padding:10px}
.emoji{font-size:22px; line-height:1; background:transparent; border:none; padding:8px; cursor:pointer; border-radius:8px}
.emoji:hover{background:#172036}

/* ================= Responsive media (YouTube) ================= */
.bubble.media{max-width:100%}
#log .bubble.media{margin-left:-12px; margin-right:-12px}
.yt-embed{
  position:relative; width:100%; aspect-ratio:16/9;
  min-height:clamp(200px, 52vw, 360px); /* phones: 200–360px high */
  border:1px solid var(--border); border-radius:12px; overflow:hidden; background:#000;
}
.yt-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}

/* ================= Mobile / Tablet tweaks ONLY ================= */
/* Collapse sidebar into an overlay */
@media (max-width: 900px){
  .shell{grid-template-columns:1fr}
  .sidebar{display:none}
  body.show-sidebar .sidebar{
    display:block; position:fixed; inset:64px 16px 88px 16px; z-index:50; overflow:auto;
  }
  #log .bubble{max-width:92%}
}

/* Stack header controls and push Reset to its own row (when connected) */
@media (max-width: 760px){
  .headbar{grid-template-columns:1fr; row-gap:8px}
  .top-controls{
    display:grid; grid-auto-flow:row; grid-template-columns:1fr auto auto auto auto;
    gap:8px; align-items:stretch;
  }
  input#username{width:100%}
  .wrap{padding-inline:8px}

  /* Full-width Reset row when connected */
  body.connected .ctrl-reset{
    grid-column:1 / -1; justify-self:stretch; margin-top:4px;
  }
  /* Keep it inline when not connected */
  body.not-connected .ctrl-reset{
    grid-column:auto; justify-self:auto; margin-top:0;
  }

  /* Slightly larger tap targets on mobile */
  input,button{padding:10px 12px}
}

/* Landscape phones (short viewports) */
@media (orientation:landscape) and (max-height: 480px){
  .yt-embed{ min-height:clamp(180px, 60vw, 320px) }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
}

/* A11y helper */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Small utility badges/buttons used in header */
.iconbtn{display:inline-flex; align-items:center; gap:.4rem}
.countpill{font-size:.75rem; padding:.1rem .35rem; border:1px solid var(--border); border-radius:.5rem}