/* voice.robaateq.top —— latentmint 风格的 Galene 客户端。
   色板与 latentmint-web/app/globals.css 同源，改那边记得同步。 */
:root {
  --ink: #050706;
  --ink-soft: #0a0f0c;
  --panel: rgba(13, 20, 16, 0.78);
  --panel-strong: #0f1712;
  --mint: #9af5c8;
  --mint-bright: #c4ffe0;
  --mint-dim: #59b886;
  --line: rgba(166, 255, 211, 0.16);
  --line-strong: rgba(166, 255, 211, 0.34);
  --text: #f2f8f4;
  --muted: #9aa9a0;
  --quiet: #69766e;
  --danger: #f5a09a;
}

* { box-sizing: border-box; }

/* Galene 自己发的 CSP 是 default-src 'self' 且没有 style-src，
   所以 HTML 里的 style="" 属性和内联 <script> 都会被浏览器丢弃。
   一切显隐和尺寸只能走这里的类，脚本只能走外部文件。 */
.hide { display: none !important; }
.wide { width: 100%; }
.mt6 { margin-top: 6px; }
.mt9 { margin-top: 9px; }
.mt16 { margin-top: 16px; }

html, body {
  margin: 0;
  height: 100%;
  background:
    radial-gradient(circle at 72% 12%, rgba(76, 190, 126, 0.12), transparent 24rem),
    radial-gradient(circle at 12% 58%, rgba(51, 116, 80, 0.08), transparent 30rem),
    var(--ink);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC",
               "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.6;
}

button {
  font: inherit;
  cursor: pointer;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--ink-soft);
  color: var(--text);
  padding: 9px 15px;
  transition: border-color .15s, background .15s;
}
button:hover:not(:disabled) { border-color: var(--line-strong); background: var(--panel-strong); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary {
  background: var(--mint); color: #06120c; border-color: var(--mint);
  font-weight: 500;
}
button.primary:hover:not(:disabled) { background: var(--mint-bright); border-color: var(--mint-bright); }
button.danger { color: var(--danger); }
button.on { border-color: var(--mint-dim); color: var(--mint); }

input, select {
  font: inherit;
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--text);
}
input:focus, select:focus { outline: none; border-color: var(--mint-dim); }
label { display: block; font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }

.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark { display: flex; gap: 3px; }
.brand-mark span {
  width: 7px; height: 15px; border-radius: 2px;
  background: var(--mint);
}
.brand-mark span:last-child { background: var(--mint-dim); height: 10px; align-self: flex-end; }
.brand-name { font-size: 15.5px; letter-spacing: .02em; }

/* ---------- 落地页：左边是已有权限的房间 ---------- */
.landing { display: flex; min-height: 100%; }
.landing-side {
  width: 268px; flex-shrink: 0; padding: 22px 18px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 16px;
}
.side-title { font-size: 12px; color: var(--quiet); }
.room-row { display: flex; gap: 6px; align-items: stretch; margin-bottom: 6px; }
.room-go {
  flex: 1; min-width: 0; text-align: left; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
.room-nm {
  font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.room-meta { font-size: 11.5px; color: var(--quiet); }
.room-x { flex-shrink: 0; padding: 0 10px; color: var(--quiet); }
.room-dead .room-nm { color: var(--quiet); text-decoration: line-through; }
.room-dead .room-meta { color: var(--danger); }
.room-x:hover { color: var(--danger); }

@media (max-width: 720px) {
  .landing { flex-direction: column; }
  .landing-side { width: auto; border-right: none; border-bottom: 1px solid var(--line); }
}

.acct { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.acct-who { font-size: 13px; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 加入前的门 ---------- */
.gate-wrap {
  min-height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.gate {
  width: 100%; max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
  backdrop-filter: blur(12px);
}
.gate h1 { font-size: 20px; font-weight: 500; margin: 18px 0 4px; }
.gate .sub { color: var(--muted); font-size: 13px; margin: 0 0 20px; }
.field { margin-bottom: 14px; }
.tabs { display: flex; gap: 6px; margin-bottom: 18px; }
.tabs button { flex: 1; padding: 8px; font-size: 13.5px; }
.tabs button.sel { border-color: var(--mint-dim); color: var(--mint); }
.nick-row { display: flex; gap: 8px; }
.nick-row button { flex-shrink: 0; padding: 10px 12px; }
.gate-note {
  margin-top: 16px; font-size: 12px; color: var(--quiet); line-height: 1.6;
}
.err {
  margin-top: 14px; padding: 9px 12px; border-radius: 9px;
  background: rgba(245, 160, 154, .1); border: 1px solid rgba(245, 160, 154, .3);
  color: var(--danger); font-size: 13px;
}

/* ---------- 房间 ---------- */
.room { display: none; height: 100%; flex-direction: column; }
.room.live { display: flex; }
.room-head {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 18px; border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.room-title { font-size: 14.5px; }
.room-title small { color: var(--quiet); margin-left: 8px; font-size: 12px; }
.spacer { flex: 1; }

.room-body { flex: 1; display: flex; min-height: 0; }
.stage { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.peers {
  display: flex; flex-wrap: wrap; gap: 10px; padding: 16px;
  align-content: flex-start; overflow-y: auto;
  /* flex-shrink 必须是 0：带了 overflow: auto 之后 flex 的自动最小尺寸保护就没了，
     视口一矮就会被下面 flex:1 的成员列表挤成 0 高 —— 画面收到了却看不见。 */
  flex: 0 0 auto;
  max-height: 62%;
}
.peers:empty { display: none; }
.peer {
  position: relative; background: #000; border-radius: 11px; overflow: hidden;
  border: 1px solid var(--line); width: min(560px, 100%);
}
/* 按可用高度缩放，矮视口下也能一眼看全，不用滚动。contain 保证不裁切内容 ——
   共享的是屏幕，裁掉边角就可能正好裁掉要看的东西。 */
.peer video {
  width: 100%; display: block; background: #000;
  max-height: 46vh; object-fit: contain;
}
.peer-zoom { cursor: zoom-in; }
/* 兜底放大：全屏 API 不可用时（某些 iOS/嵌入环境）铺满窗口 */
.peer.peer-big {
  position: fixed; inset: 0; z-index: 70; width: auto; border-radius: 0;
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.peer.peer-big video { max-height: 100vh; max-width: 100vw; }
/* 全屏时让视频吃满，否则原生全屏里只有中间一小块 */
.peer:fullscreen { display: flex; align-items: center; justify-content: center; }
.peer:fullscreen video { max-height: 100vh; max-width: 100vw; }
.peer .who {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: 5px 9px; font-size: 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.75));
}

/* 成员栏：左侧窄条。语音房里「谁在、谁在说」是常驻信息，
   但它不该占主区域 —— 主区域留给共享的画面。 */
.rail {
  width: 168px; flex-shrink: 0;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow-y: auto;
  padding: 12px 10px;
}
.rail-head {
  font-size: 11.5px; color: var(--quiet);
  padding: 0 4px 8px; flex-shrink: 0;
}
#roster { display: flex; flex-direction: column; gap: 3px; }
.person {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; border-radius: 8px;
  border: 1px solid transparent;
  min-width: 0; font-size: 13px;
}
.person:hover { background: var(--panel); }
/* 自己那一条可以点开改名 */
.person-me { cursor: pointer; }
.person-me:hover { border-color: var(--line-strong); }
.person.talking { border-color: var(--mint-dim); background: rgba(154, 245, 200, .05); }
.person .dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--quiet); transition: background .12s, box-shadow .12s;
}
.person.talking .dot { background: var(--mint); box-shadow: 0 0 0 4px rgba(154,245,200,.16); }
.person.muted .dot { background: transparent; border: 1.5px solid var(--quiet); }
.person .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .tag {
  font-size: 10px; padding: 0 5px; border-radius: 20px;
  border: 1px solid var(--line); color: var(--muted); flex-shrink: 0;
}
.person .ops { display: flex; gap: 5px; opacity: 0; transition: opacity .12s; }
.person:hover .ops { opacity: 1; }
.person .ops button { padding: 3px 9px; font-size: 11.5px; border-radius: 7px; }

.side {
  width: 300px; flex-shrink: 0; border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.side-head {
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  font-size: 12px; color: var(--quiet); flex-shrink: 0;
}
.chat-log { flex: 1; overflow-y: auto; padding: 12px 14px; }
.msg { margin-bottom: 11px; font-size: 13.5px; word-wrap: break-word; }
.msg .from { color: var(--mint-dim); font-size: 12px; }
.msg.sys { color: var(--quiet); font-size: 12px; font-style: italic; }
.chat-send { padding: 11px 14px; border-top: 1px solid var(--line); flex-shrink: 0; }

.bar {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  padding: 12px 18px; border-top: 1px solid var(--line); flex-shrink: 0;
}

.files { padding: 0 16px; }
.file {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  padding: 9px 12px; margin-bottom: 7px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel);
}
.file .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file button { padding: 3px 10px; font-size: 12px; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--panel-strong); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 11px 17px; font-size: 13.5px;
  max-width: 90vw; z-index: 50;
}

dialog {
  background: var(--panel-strong); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 14px;
  padding: 22px; max-width: 440px; width: 92vw;
}
dialog::backdrop { background: rgba(0,0,0,.6); }
dialog h2 { font-size: 16px; font-weight: 500; margin: 0 0 14px; }
.dur-row { display: flex; gap: 8px; }
.dur-row input { flex: 1; }
.dur-row select { width: 110px; flex-shrink: 0; }
.dur-hint { margin: 8px 0 0; font-size: 12px; color: var(--quiet); }
.check-row {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  margin: 16px 0 0; font-size: 13.5px; color: var(--text);
}
.check-row input { width: auto; flex-shrink: 0; accent-color: var(--mint); }
.link-btn {
  background: none; border: none; padding: 0; color: var(--mint-dim);
  font-size: 12px; text-decoration: underline; border-radius: 0;
}
.link-btn:hover { background: none; border: none; color: var(--mint); }
.link-box {
  word-break: break-all; font-size: 12.5px; padding: 11px;
  background: var(--ink); border: 1px solid var(--line); border-radius: 9px;
  margin-bottom: 14px; color: var(--mint);
}

@media (max-width: 860px) {
  .side { display: none; }
  .side.show {
    display: flex; position: fixed; inset: 0; width: auto; z-index: 40;
    background: var(--ink); border: none;
  }
  .peer { width: 100%; }
}

/* ---------- 手机 ----------
   375px 宽实测出来的三个问题：头部换行（66px）、底栏换行（68px）、
   成员卡片被 grid 的 240px 上限卡住、右边空一大片。 */
@media (max-width: 700px) {
  /* 头部：品牌标记让位给操作按钮，标题过长省略而不是换行 */
  .room-head { padding: 8px 12px; gap: 8px; }
  .room-head .brand { display: none; }
  .room-title {
    font-size: 13.5px; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .room-title small { display: block; margin: 0; }
  .room-head button { padding: 8px 11px; font-size: 13px; }

  /* 底栏：按钮等分铺满。够宽就一行，放不下就整齐地折成两行，
     不会出现「一个孤零零掉到第二行」那种像出 bug 的样子。 */
  .bar { padding: 10px 12px; gap: 6px; }
  .bar .spacer { display: none; }
  /* flex-basis 要小到「最多 4 个按钮」也能挤进一行，否则会变成 3+1，
     那一个孤零零掉到第二行的按钮看着像出了 bug。
     取 64px 是照最窄的 320px 屏算的：内容宽 296，4×64+18=274 能塞下；
     375px 上 flex-grow 会把它们撑到 83px。四字标签在 13px 下约 60px，够。 */
  .bar button { flex: 1 1 64px; min-width: 0; padding: 11px 4px; font-size: 13px; }

  /* 手机上竖着的窄条会吃掉本来就不多的宽度，改成顶部横向一条 */
  .room-body { flex-direction: column; }
  .rail {
    width: auto; border-right: none; border-bottom: 1px solid var(--line);
    flex-direction: row; align-items: center; gap: 8px;
    padding: 8px 12px; overflow-x: auto; overflow-y: hidden;
  }
  .rail-head { padding: 0; white-space: nowrap; }
  #roster { flex-direction: row; gap: 6px; }
  .person { flex-shrink: 0; border-color: var(--line); background: var(--panel); }

  .peers { padding: 12px; max-height: 50%; }
  .gate { padding: 20px; }
  .toast { left: 12px; right: 12px; transform: none; text-align: center; }
}