/* =========================================================
 * style.css - Edge Base の UI
 * =======================================================*/
:root {
  --bg: #0d1117;
  --bg-2: #131a26;
  --panel: #161e2b;
  --panel-2: #1b2434;
  --line: #26314480;
  --line-solid: #263144;
  --text: #e6edf6;
  --text-dim: #93a3b8;
  --accent: #60a5fa;
  --accent-2: #7c9cf5;
  --radius: 12px;
  --shadow: 0 8px 28px rgba(0, 0, 0, .45);

  /* すりガラス調のパネル */
  --glass: rgba(21, 28, 42, .78);
  --glass-strong: rgba(17, 23, 36, .9);
  --glass-line: rgba(255, 255, 255, .07);
  --glass-hi: rgba(255, 255, 255, .05);
  --blur: blur(16px) saturate(1.25);
  --ease: cubic-bezier(.22, .8, .3, 1);
}

/* 明るいテーマ（マップは暗いままのため、周囲のUIだけを明るくします） */
:root[data-theme="light"] {
  --bg: #eef1f6;
  --bg-2: #e5e9f0;
  --panel: #ffffff;
  --panel-2: #f4f6fa;
  --line: #d7dde7;
  --line-solid: #dbe1ea;
  --text: #1e2836;
  --text-dim: #6b7789;
  --accent: #2563eb;
  --shadow: 0 8px 24px rgba(23, 37, 63, .12);
  --glass: rgba(255, 255, 255, .82);
  --glass-strong: rgba(255, 255, 255, .93);
  --glass-line: rgba(20, 32, 54, .10);
  --glass-hi: rgba(255, 255, 255, .7);
}

* { box-sizing: border-box; }

/* ---- アイコン ---- */
.icon {
  width: 16px; height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -3px;
}
.icon > use { pointer-events: none; }

:root[data-theme="light"] .theme-light-only { display: none; }
:root:not([data-theme="light"]) .theme-dark-only { display: none; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Yu Gothic UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  overflow: hidden;
}

.hidden { display: none !important; }

kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 1px;
  font-size: 11px;
  font-family: inherit;
  color: var(--text);
  background: #202b3d;
  border: 1px solid #33405a;
  border-bottom-width: 2px;
  border-radius: 5px;
}

/* ================= 入室画面 ================= */
.login-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;          /* 画面が低いときはスクロールできるように */
  padding: 24px 12px;
  background:
    radial-gradient(1000px 600px at 30% 20%, #1c2740 0%, transparent 60%),
    radial-gradient(900px 500px at 80% 80%, #1e2b3f 0%, transparent 55%),
    var(--bg);
  z-index: 50;
}

.login-card {
  width: min(420px, calc(100vw - 40px));
  margin: auto;              /* はみ出したときも上が切れない */
  flex: none;
  padding: 30px 28px 24px;
  background: linear-gradient(180deg, #18212f, #141b27);
  border: 1px solid var(--line-solid);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.login-brand { display: flex; align-items: center; gap: 10px; }
.login-brand h1 { margin: 0; font-size: 22px; letter-spacing: .02em; }

/* Edge Base の印（画面の中の山）。
   色は index.html の <linearGradient id="brand-grad"> が持っているので、
   ここでは大きさと光彩だけを決めます。
   光彩に box-shadow を使うと四角く光ってしまうため drop-shadow にしています。 */
.brand-mark {
  width: 24px; height: 24px;
  flex: none;
  filter: drop-shadow(0 0 7px #60a5fa88);
}
.topbar .brand-mark { width: 17px; height: 17px; }

.login-lead { margin: 12px 0 22px; color: var(--text-dim); font-size: 13.5px; }

.field { display: block; margin-bottom: 18px; }
.field-label {
  display: block; margin-bottom: 8px;
  font-size: 12px; color: var(--text-dim); letter-spacing: .04em;
}

.login-card input[type="text"] {
  width: 100%;
  padding: 11px 13px;
  font-size: 14px;
  color: var(--text);
  background: #0f1520;
  border: 1px solid var(--line-solid);
  border-radius: 10px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.login-card input[type="text"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #60a5fa22;
}

/* --- ログイン画面 --- */
.login-error {
  margin-bottom: 16px;
  padding: 10px 13px;
  font-size: 12.5px; line-height: 1.6;
  color: #fecaca;
  background: #7f1d1d33;
  border: 1px solid #b91c1c66;
  border-left-width: 3px;
  border-radius: 9px;
}

.google-area { display: flex; justify-content: center; min-height: 44px; }

.login-profile {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 18px;
  padding: 10px 12px;
  background: #0f1520;
  border: 1px solid var(--line-solid);
  border-radius: 12px;
}
.profile-pic {
  width: 38px; height: 38px; flex: none;
  border-radius: 50%;
  background: #1e2635;
  object-fit: cover;
}
.profile-info { min-width: 0; flex: 1; display: block; }
.profile-name {
  display: block; font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-mail {
  display: block; font-size: 11.5px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.link-btn {
  flex: none;
  padding: 4px 10px;
  font-size: 11.5px; font-family: inherit; color: var(--text-dim);
  background: none;
  border: 1px solid var(--line-solid); border-radius: 7px;
  cursor: pointer;
}
.link-btn:hover { color: var(--text); border-color: #3c4a63; }

.primary-btn:disabled {
  background: #26314480;
  color: #64748b;
  cursor: not-allowed;
}

.color-picker { display: flex; gap: 9px; flex-wrap: wrap; }
.color-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.color-swatch:hover { transform: scale(1.12); }
.color-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 3px #ffffff22;
}

/* ---------- アバターづくり ---------- */
.avatar-row { display: flex; gap: 14px; align-items: flex-start; }
.avatar-row-side { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.avatar-preview {
  background: linear-gradient(180deg, #16202f, #0f1622);
  border: 1px solid #2a3446;
  border-radius: 12px;
  flex: none;
}
.avatar-preview.big { width: 132px; height: 164px; }

.av-editor { display: flex; gap: 18px; align-items: flex-start; }
.av-preview-box { display: flex; flex-direction: column; gap: 8px; align-items: center; flex: none; }
.av-turn { display: flex; justify-content: center; }
.av-options { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.av-row { display: flex; gap: 10px; align-items: flex-start; }
.av-label {
  width: 62px; flex: none;
  font-size: 12px; color: var(--text-dim); padding-top: 7px;
}
.av-choices { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.av-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 5px 9px;
  font-size: 11.5px; color: var(--text-dim);
  background: #0f1520;
  border: 1px solid #2a3446;
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .12s, color .12s, transform .12s;
}
.av-chip:hover { transform: translateY(-1px); color: var(--text); }
.av-chip.selected { border-color: #7aa2f7; color: #dbeafe; background: #16233a; }
.av-chip.swatch {
  width: 26px; height: 26px; padding: 0;
  border-radius: 50%;
  border-width: 2px;
}
.av-chip.swatch.selected { border-color: #fff; box-shadow: 0 0 0 3px #ffffff22; }
.av-chip-canvas { display: block; }

/* ---------- アバターをつくる画面（2026-08-17） ----------
   左に分類、中央に大きな姿、その下に色と一覧。
   一覧の絵は「その項目だけ差し替えた本人の姿」なので、
   選ぶ前にどう変わるかが分かります。 */
.av2 { display: grid; grid-template-columns: 148px 1fr; gap: 14px; align-items: stretch; }
.av2-side {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 460px; overflow-y: auto; scrollbar-width: thin;
  padding-right: 4px;
}
.av2-cat {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 9px 5px 5px;
  font-size: 12.5px; color: var(--text-dim); font-family: inherit;
  background: none; border: 1px solid transparent; border-radius: 10px;
  cursor: pointer; text-align: left;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.av2-cat canvas { display: block; flex: none; }
.av2-cat:hover { color: var(--text); background: var(--panel-2); }
.av2-cat.on { color: #dbeafe; background: #1b2c4a; border-color: #3b5c94; }

.av2-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.av2-stage { position: relative; display: grid; place-items: center; padding: 6px 0 14px; }
.av2-preview { display: block; position: relative; z-index: 1; }
/* 足元の白い台。参考にした作りに合わせて、姿を浮き立たせます */
.av2-plate {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 140px; height: 26px;
  background: radial-gradient(closest-side, #ffffff 68%, #ffffff00);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #34d39955;
}
.av2-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.av2-colors { display: flex; gap: 8px; flex-wrap: wrap; }
.av2-color {
  width: 30px; height: 30px; padding: 0;
  border: 2px solid #2a3446; border-radius: 8px;
  cursor: pointer;
  transition: transform .12s var(--ease), border-color .15s var(--ease);
}
.av2-color:hover { transform: translateY(-1px); }
.av2-color.on { border-color: #fff; box-shadow: 0 0 0 3px #ffffff22; }

.av2-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  max-height: 260px; overflow-y: auto; scrollbar-width: thin;
  padding: 2px 4px 2px 2px;
}
.av2-item {
  display: grid; place-items: center;
  aspect-ratio: 1 / 1;
  padding: 0;
  background: var(--panel-2);
  border: 1px solid var(--line-solid); border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .12s var(--ease);
}
.av2-item canvas { display: block; }
.av2-item:hover { transform: translateY(-1px); border-color: #3c4a63; }
.av2-item.on { border-color: #7aa2f7; border-width: 2px; background: #16233a; }
.av2-x { font-size: 22px; color: #7aa2f7; line-height: 1; }

@media (max-width: 700px) {
  .av2 { grid-template-columns: 1fr; }
  .av2-side { flex-direction: row; overflow-x: auto; max-height: none; }
  .av2-cat span { display: none; }
}

/* ステータスの選択（アプリ内）と、部屋の選択（ログイン画面）は同じ見た目にします。
   ログイン画面のステータス選択は 2026-08-20 に廃止し、部屋の選択に置き換えました。 */
.status-picker, .office-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.office-opt .icon { width: 14px; height: 14px; opacity: .85; }
.status-opt, .office-opt {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  font-size: 12.5px; color: var(--text-dim);
  background: #0f1520;
  border: 1px solid var(--line-solid);
  border-radius: 999px;
  cursor: pointer;
  transition: all .12s;
}
.status-opt:hover, .office-opt:hover { border-color: #3c4a63; color: var(--text); }
.status-opt.selected, .office-opt.selected {
  color: var(--text); background: #1b2436; border-color: var(--accent);
}

.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }

.primary-btn {
  width: 100%;
  padding: 12px;
  margin-top: 4px;
  font-size: 14.5px; font-weight: 600; font-family: inherit;
  color: #04121f;
  background: linear-gradient(135deg, #7dd3fc, #60a5fa);
  border: none; border-radius: 10px;
  cursor: pointer;
  transition: filter .15s, transform .1s;
}
.primary-btn:hover { filter: brightness(1.08); }
.primary-btn:active { transform: translateY(1px); }

.login-hint { margin: 16px 0 0; font-size: 11.5px; line-height: 1.9; color: #6b7c93; }

/* --- スマートフォン・タブレットからの入室を止める画面 --- */
.mobile-block {
  margin-top: 10px;
  padding: 18px 16px;
  background: #1b2131;
  border: 1px solid #3a4459;
  border-radius: 12px;
  text-align: center;
}
.mobile-block-title {
  margin: 0 0 10px;
  font-size: 16px; font-weight: 700; color: #fcd9a8;
}
.mobile-block-body {
  margin: 0 0 10px;
  font-size: 13px; line-height: 1.85; color: var(--text-dim);
  text-align: left;
}
.mobile-block-note { margin: 0; font-size: 12px; color: #8fa3c8; }

/* ================= レイアウト ================= */
.app { display: flex; flex-direction: column; height: 100%; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  height: 54px;
  padding: 0 16px;
  background: var(--glass);
  backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 6px 20px rgba(0, 0, 0, .18);
  flex: none;
  overflow: hidden;
  z-index: 20;
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; }
/* 右側（手を挙げる・マイク・カメラ・サイドバーの開閉）を優先して残し、
   足りない分は左側（アプリ名・時間帯）から削る。
   以前は横スクロールにしていたため、狭い窓ではボタンが画面の外へ出ていました。 */
.topbar-left  { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.topbar-right { flex: 0 0 auto; }
/* 幅が狭くても文字が縦に折れないようにする */
.topbar-left > *, .topbar-right > *,
.status-btn, .media-btn, .ghost-btn, .leave-btn, .area-chip, .net-chip, .time-chip, .me-name {
  white-space: nowrap;
  flex: none;
}
.brand-name { font-weight: 600; font-size: 14.5px; letter-spacing: .02em; }
/* 離席理由が長くてもバーが伸びないように省略する */
.status-btn { max-width: 210px; }
#statusLabel { overflow: hidden; text-overflow: ellipsis; }

/* --- オフィス切り替え --- */
.office-menu { position: relative; }
.office-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  font-size: 13px; font-family: inherit; font-weight: 600; color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line-solid); border-radius: 8px;
  cursor: pointer;
  max-width: 190px;
}
.office-btn:hover { border-color: #3c4a63; }
.office-btn #officeName { overflow: hidden; text-overflow: ellipsis; }
.office-icon { font-size: 12px; }

/* トップバーが横スクロール領域のため、はみ出せるよう fixed で配置する */
.office-list {
  position: fixed;
  width: 250px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow);
  z-index: 55;
  animation: panelIn .16s var(--ease);
}
.office-item { display: flex; align-items: center; gap: 2px; border-radius: 7px; }
.office-item:hover { background: #223047; }
.office-go {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
  padding: 9px 10px;
  font-size: 13px; font-family: inherit; color: var(--text);
  background: none; border: none; border-radius: 7px;
  text-align: left; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.office-go small { margin-left: auto; font-size: 10.5px; color: #6ee7b7; flex: none; }
.office-dot {
  width: 7px; height: 7px; flex: none;
  background: #475569; border-radius: 50%;
}
.office-item.current .office-dot { background: #34d399; box-shadow: 0 0 8px #34d39999; }
.office-admin-actions { display: flex; gap: 2px; padding-right: 6px; opacity: 0; transition: opacity .12s; }
.office-item:hover .office-admin-actions { opacity: 1; }
.mini-btn {
  display: grid; place-items: center;
  width: 25px; height: 25px;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--line-solid); border-radius: 7px; cursor: pointer;
  transition: color .14s var(--ease), border-color .14s var(--ease), transform .12s var(--ease);
}
.mini-btn .icon { width: 13px; height: 13px; }
.mini-btn:active { transform: scale(.92); }
.mini-btn:hover { color: var(--text); border-color: #3c4a63; }
.mini-btn.del:hover { color: #fca5a5; border-color: #b91c1c88; }
.office-add {
  width: 100%;
  margin-top: 4px;
  padding: 9px 10px;
  font-size: 12.5px; font-family: inherit; color: #9ec5ff;
  background: #1d2942;
  border: 1px dashed #3b5075; border-radius: 7px;
  cursor: pointer;
}
.office-add:hover { background: #223354; }

.modal-field select {
  width: 100%;
  padding: 9px 11px;
  font-size: 13px; font-family: inherit; color: var(--text);
  background: #0f1520;
  border: 1px solid var(--line-solid); border-radius: 8px;
  outline: none;
}

/* いまどこにいるか。サイドバーの中で1行を占めます */
.area-chip {
  padding: 6px 12px;
  font-size: 12px;
  color: #cfe0ff;
  background: #1d2942;
  border: 1px solid #2e3f60;
  border-radius: 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- 時間帯の札 --- */
.time-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px;
  font-size: 12px;
  color: #e5d9bd;
  background: #2a2416;
  border: 1px solid #4a3f24;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.time-chip .time-icon { font-size: 13px; line-height: 1; }
/* 時刻を固定して確認しているとき */
.time-chip.preview { color: #fde68a; border-color: #a16207; background: #3a2f10; }

.me-box { display: flex; align-items: center; gap: 8px; }
.mini-avatar {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  font-size: 12px; font-weight: 700; color: #0b1220;
  background: var(--accent);
  border-radius: 50%;
}
.me-name { font-size: 13px; color: var(--text-dim); }

.status-menu { position: relative; }
.status-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  font-size: 12.5px; font-family: inherit; color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line-solid);
  border-radius: 8px;
  cursor: pointer;
}
.status-btn:hover { border-color: #3c4a63; }
.caret { color: var(--text-dim); font-size: 10px; }

.status-list {
  position: fixed;
  width: 230px;
  /* 窓が低いと js が maxHeight を付けます。中をスクロールできないと、
     はみ出した離席理由のボタンが押せません（実際にそうなりました）。 */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow);
  z-index: 55;
  animation: panelIn .16s var(--ease);
}
.status-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  padding: 9px 10px;
  font-size: 13px; font-family: inherit; color: var(--text);
  background: none; border: none; border-radius: 7px;
  text-align: left; cursor: pointer;
}
.status-item:hover { background: #223047; }
.status-item.current { background: #1d2942; }
.status-item small { margin-left: auto; color: var(--text-dim); font-size: 11px; }

/* 離席理由の入力 */
.away-note-box {
  margin-top: 6px;
  padding: 10px;
  background: #0f1520;
  border: 1px solid var(--line-solid);
  border-radius: 8px;
}
.away-note-label { display: block; margin-bottom: 6px; font-size: 11px; color: var(--text-dim); }
.field-label .required,
.away-note-label .required {
  margin-left: 4px; padding: 1px 6px;
  font-size: 10px; font-weight: 700; color: #fecaca;
  background: #7f1d1d55; border: 1px solid #b91c1c66; border-radius: 999px;
}
/* 理由が空のまま決定を押したときだけ出す注意 */
.away-note-warn { display: none; margin-top: 7px; font-size: 11px; color: #fca5a5; }
.away-note-box.needs-note .away-note-warn,
#loginAwayField.needs-note .away-note-warn { display: block; }
.away-note-box.needs-note .away-note-row input,
#loginAwayField.needs-note input {
  border-color: #dc2626;
  animation: note-shake .3s;
}
@keyframes note-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.away-note-row { display: flex; gap: 6px; }
.away-note-row input {
  flex: 1; min-width: 0;
  padding: 7px 9px;
  font-size: 12.5px; font-family: inherit; color: var(--text);
  background: #131a26;
  border: 1px solid var(--line-solid); border-radius: 7px;
  outline: none;
}
.away-note-row input:focus { border-color: var(--accent); }
.away-note-ok {
  flex: none;
  padding: 7px 12px;
  font-size: 12px; font-family: inherit; font-weight: 600; color: #04121f;
  background: linear-gradient(135deg, #7dd3fc, #60a5fa);
  border: none; border-radius: 7px; cursor: pointer;
}
.away-note-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.preset-chip {
  padding: 4px 9px;
  font-size: 11px; font-family: inherit; color: var(--text-dim);
  background: #1a2231;
  border: 1px solid var(--line-solid); border-radius: 999px;
  cursor: pointer;
}
.preset-chip:hover { color: var(--text); border-color: #3c4a63; }

/* 個別チャットを開くボタン */
.dm-btn {
  display: grid; place-items: center;
  flex: none;
  width: 27px; height: 27px;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--line-solid); border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s var(--ease), border-color .14s var(--ease),
              color .14s var(--ease), transform .12s var(--ease);
}
.dm-btn .icon { width: 14px; height: 14px; }
.member:hover .dm-btn { opacity: 1; }
.dm-btn:hover { border-color: var(--accent); color: var(--accent); transform: scale(1.06); }

.layout { display: flex; flex: 1; min-height: 0; }

/* ================= ステージ（マップ） ================= */
.stage {
  position: relative;
  flex: 1;
  min-width: 0;
  background: #0a0f18;
  overflow: hidden;
}
#scene { display: block; width: 100%; height: 100%; cursor: crosshair; }

.area-banner {
  position: absolute; top: 22px; left: 50%;
  padding: 9px 22px;
  font-size: 14px; font-weight: 600; letter-spacing: .03em;
  color: #eaf2ff;
  background: rgba(16, 24, 39, .82);
  border: 1px solid #33456a;
  border-radius: 999px;
  backdrop-filter: blur(6px);
  transform: translate(-50%, -14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.area-banner.show { opacity: 1; transform: translate(-50%, 0); }

.toasts {
  position: absolute; bottom: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-end;
  pointer-events: none;
  z-index: 6;
}
.toast {
  padding: 9px 14px;
  font-size: 12.5px;
  color: #dbe7f7;
  background: rgba(18, 26, 40, .92);
  border: 1px solid #2c3a54;
  border-left: 3px solid var(--accent);
  border-radius: 9px;
  box-shadow: var(--shadow);
  animation: toastIn .25s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(14px); } }

.hud {
  position: absolute;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 13px;
  font-size: 11.5px;
  color: #b7c6db;
  background: rgba(13, 19, 30, .72);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 10px;
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset;
  pointer-events: none;
}
.hud .icon { width: 14px; height: 14px; opacity: .85; }
.hud-bottom-left { left: 14px; bottom: 14px; }
.hud-bottom-center {
  left: 50%; bottom: 14px;
  transform: translateX(-50%);
  display: none;
}
.hud-bottom-center.show { display: block; }
.hud .sep { margin: 0 6px; color: #4d5d78; }
.hud-keys { line-height: 1.7; }

/* ================= サイドバー ================= */
.sidebar {
  width: 310px;
  flex: none;
  display: flex; flex-direction: column;
  gap: 1px;
  background: var(--glass-line);
  border-left: 1px solid var(--glass-line);
  backdrop-filter: var(--blur);
}

.panel {
  background: var(--glass);
  backdrop-filter: var(--blur);
  display: flex; flex-direction: column; min-height: 0;
}
.members-panel { flex: 0 1 auto; max-height: 38%; }
.chat-panel { flex: 1; min-height: 0; }

/* ---- 場所の欄（サイドバーの一番上） ----
   どのオフィスの、どこにいるか。その場でする操作（画面共有・全体放送・編集）もここ。 */
/* 場所の欄は 174px あります。ここを縮まないままにすると、窓が低いときに
   サイドバーの一番下（在席状態・退出）が画面の外へ押し出され、
   スクロールもできないので二度と押せなくなります（実際にそうなりました）。
   縮められるようにして、あふれるぶんはこの欄の中でスクロールさせます。 */
.place-panel {
  flex: 0 1 auto; min-height: 0; overflow-y: auto;
  gap: 8px; padding: 12px 12px 13px;
}
.place-row { display: flex; align-items: center; gap: 8px; }
.place-row .office-menu { flex: 1; min-width: 0; }
.place-row .office-btn { width: 100%; }
.place-row #officeName {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
}
.place-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.place-actions .media-btn, .place-actions .ghost-btn { flex: 1 1 calc(50% - 4px); justify-content: center; }

/* ---- 自分の欄（サイドバーの一番下） ---- */
.me-panel { flex: none; gap: 9px; padding: 11px 12px 12px; border-top: 1px solid var(--glass-line); }
.me-panel .me-box { gap: 9px; }
.me-panel .me-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 600;
}
.me-panel .icon-only-btn { width: 28px; height: 28px; flex: none; }
.me-actions { display: flex; align-items: center; gap: 8px; }
.me-actions .status-menu { flex: 1; min-width: 0; }
.me-actions .status-btn { width: 100%; }
.me-actions .leave-btn { flex: none; }

/* ---- サイドバーの開閉 ---- */
.app.sidebar-off .sidebar { display: none; }
#sidebarBtn.on { color: var(--text); border-color: #3c4a63; }

.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 8px;
}
.panel-head h2 {
  margin: 0;
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  color: var(--text-dim); text-transform: uppercase;
}
.count {
  margin-left: 4px; padding: 1px 7px;
  font-size: 11px; color: #cfe0ff;
  background: #1d2942; border-radius: 999px;
}

.member-list {
  margin: 0; padding: 0 8px 10px;
  list-style: none;
  overflow-y: auto;
}
.member {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .12s;
}
.member:hover { background: #1c2534; }
.member-avatar {
  position: relative;
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  font-size: 12.5px; font-weight: 700; color: #0b1220;
  border-radius: 50%;
}
.member-avatar .dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px;
  border: 2px solid var(--panel);
  border-radius: 50%;
}
.member-info { min-width: 0; flex: 1; }
.member-name {
  font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.member-name .me-tag, .member-name .admin-tag { vertical-align: middle; }
.member-name .me-tag {
  margin-left: 5px; padding: 0 5px;
  font-size: 10px; color: #9ec5ff;
  background: #1d2942; border-radius: 4px;
}
.member-sub {
  font-size: 11px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.member-near {
  font-size: 10px; color: #6ee7b7;
  border: 1px solid #10b98155;
  background: #10b9811a;
  padding: 1px 6px; border-radius: 999px;
  flex: none;
}

/* ================= チャット ================= */
/* タブと検索ボタンを1行に並べる */
.chat-head {
  display: flex; align-items: center; gap: 4px;
  padding-right: 8px;
  border-bottom: 1px solid var(--line-solid);
}
.chat-head .chat-tabs { flex: 1; min-width: 0; border-bottom: none; }
.search-btn { flex: none; }
.search-btn.on { color: var(--accent); background: #1d2942; }

/* --- 履歴の検索 --- */
.search-panel {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-solid);
  background: #131a26;
  max-height: 60%;
  display: flex; flex-direction: column; min-height: 0;
}
.search-row { display: flex; gap: 6px; align-items: center; }
.search-row input {
  flex: 1; min-width: 0;
  padding: 7px 9px;
  font-size: 12.5px; font-family: inherit; color: var(--text);
  background: #0e141f;
  border: 1px solid var(--line-solid); border-radius: 7px;
  outline: none;
}
.search-row input:focus { border-color: var(--accent); }
/* 絞り込み（誰の発言か・いつか） */
.search-filters { display: flex; gap: 6px; margin-top: 6px; }
.search-filters select {
  flex: 1; min-width: 0;
  padding: 5px 7px;
  font-size: 11.5px; font-family: inherit; color: var(--text-dim);
  background: #0e141f;
  border: 1px solid var(--line-solid); border-radius: 7px;
  outline: none; cursor: pointer;
}
.search-filters select:focus { border-color: var(--accent); }
.search-filters select:hover { color: var(--text); }

.search-info { margin-top: 7px; font-size: 11px; color: var(--text-dim); }
.search-results { margin-top: 7px; overflow-y: auto; min-height: 0; }
.search-hit {
  padding: 8px 9px;
  margin-bottom: 6px;
  background: #18202e;
  border: 1px solid var(--line-solid); border-radius: 8px;
  cursor: pointer;
}
.search-hit:hover { border-color: #3c4a63; }
.search-where {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 10.5px; color: #8fa3c8; margin-bottom: 4px;
}
.search-time { flex: none; color: #6b7c93; }
.search-main { font-size: 12.5px; line-height: 1.6; color: var(--text); }
.search-main b, .search-ctx b { color: #9fb6de; font-weight: 600; }
/* 前後の発言は、話の流れを見るための添え物なので控えめに */
.search-ctx { font-size: 11.5px; line-height: 1.55; color: #6b7c93; }
.search-hit mark { color: #04121f; background: #7dd3fc; border-radius: 2px; padding: 0 1px; }

.chat-tabs {
  display: flex; gap: 4px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--line-solid);
  overflow-x: auto;
  scrollbar-width: none;
}
.chat-tabs::-webkit-scrollbar { display: none; }
.chat-tab {
  position: relative;
  display: flex; align-items: center; gap: 4px;
  flex: none;
  max-width: 150px;
  padding: 6px 12px;
  font-size: 12.5px; font-family: inherit; color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent; border-radius: 999px;
  cursor: pointer;
}
.chat-tab .tab-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-tab .dm-mark { width: 13px; height: 13px; opacity: .8; }
.chat-tab .tab-close {
  margin-left: 2px; padding: 0 3px;
  font-size: 13px; color: #64748b; border-radius: 4px;
}
.chat-tab .tab-close:hover { color: #f87171; background: #ffffff12; }
.chat-tab:hover { color: var(--text); background: #1c2534; }
.chat-tab.active {
  color: #cfe0ff;
  background: #1d2942;
  border-color: #2e3f60;
}
.badge {
  display: inline-grid; place-items: center;
  min-width: 16px; height: 16px;
  margin-left: 6px; padding: 0 4px;
  font-size: 10px; color: #fff;
  background: #ef4444; border-radius: 999px;
}

.messages {
  flex: 1;
  min-height: 0;
  padding: 12px 14px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 11px;
  scroll-behavior: smooth;
}
.msg {
  display: flex; gap: 9px;
  animation: msgIn .22s var(--ease);
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
}
.msg-avatar {
  display: grid; place-items: center;
  width: 26px; height: 26px; flex: none;
  font-size: 11.5px; font-weight: 700; color: #0b1220;
  border-radius: 50%;
}
.msg-body { min-width: 0; }
.msg-head { display: flex; align-items: baseline; gap: 7px; }
.msg-name { font-size: 12.5px; font-weight: 600; }
.msg-time { font-size: 10.5px; color: #61728b; }
.msg-text {
  margin-top: 2px;
  font-size: 13px; line-height: 1.55; color: #d5dfec;
  word-break: break-word;
}
.msg-system {
  align-self: center;
  padding: 3px 12px;
  font-size: 11.5px; color: #8fa3bd;
  background: #18202e; border-radius: 999px;
}
.msg-empty { margin: auto; font-size: 12px; color: #5d6d85; text-align: center; line-height: 1.8; }

.chat-form {
  display: flex; gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--line-solid);
}
.chat-form input {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  font-size: 13px; font-family: inherit; color: var(--text);
  background: #0f1520;
  border: 1px solid var(--line-solid); border-radius: 9px;
  outline: none;
}
.chat-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #60a5fa1f; }
.send-btn {
  display: grid; place-items: center;
  width: 40px; flex: none;
  color: #04121f;
  background: linear-gradient(135deg, #7dd3fc, #60a5fa);
  border: none; border-radius: 9px;
  cursor: pointer;
  transition: filter .16s var(--ease), transform .12s var(--ease);
}
.send-btn .icon { stroke-width: 2; }
.send-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.send-btn:active { transform: scale(.94); }

/* スクロールバー */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #273348; border-radius: 9px; border: 2px solid var(--panel); }
::-webkit-scrollbar-thumb:hover { background: #34435e; }

/* ================= 通話まわり ================= */
.net-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  font-size: 11.5px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.net-chip::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
}
.net-chip.online { color: #a7f3d0; background: #10b9811a; border-color: #10b98155; }
.net-chip.online::before { background: #34d399; box-shadow: 0 0 8px #34d399; }
.net-chip.offline { color: #cbd5e1; background: #1e2635; border-color: #33405a; }
.net-chip.offline::before { background: #94a3b8; }

.media-bar { display: flex; gap: 8px; }
.media-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  font-size: 12.5px; font-family: inherit; color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--line-solid);
  border-radius: 9px;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease),
              background .2s var(--ease), transform .12s var(--ease);
}
.media-btn:hover:not(:disabled) { color: var(--text); border-color: #3c4a63; transform: translateY(-1px); }
.media-btn:active:not(:disabled) { transform: scale(.97); }
.media-btn:disabled { opacity: .45; cursor: not-allowed; }
.media-btn.on {
  color: #052e1b;
  background: linear-gradient(135deg, #6ee7b7, #34d399);
  border-color: #34d399;
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .16);
}

/* ================= 共有された画面 ================= */
.screen-stage {
  position: absolute; left: 14px; top: 14px;
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: 58%;
  z-index: 5;
}
.screen-box {
  position: relative;
  width: 380px;
  background: #05070c;
  border: 1px solid #3a4a68;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: zoom-in;
  transition: width .18s var(--ease);
}
/* クリックで大きく（資料を読むとき用） */
.screen-box.big { width: min(74vw, 1100px); cursor: zoom-out; }
.screen-box video {
  width: 100%; display: block;
  /* 画面共有は縦横比がまちまちなので、切らずに全体を映す */
  object-fit: contain;
  background: #05070c;
}
.screen-name {
  position: absolute; left: 0; bottom: 0;
  padding: 3px 9px;
  font-size: 11.5px; color: #e2e8f0;
  background: linear-gradient(to top, rgba(5, 8, 14, .85), rgba(5, 8, 14, 0));
  pointer-events: none;
}
/* 自分の画面は「送れているか」の確認用なので小さく、控えめに */
.screen-box.self { width: 200px; opacity: .72; }
.screen-box.self.big { width: min(74vw, 1100px); opacity: 1; }

.video-tiles {
  position: absolute; right: 14px; top: 14px;
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: flex-end;
  max-width: 62%;
  /* 会議室で人数が増えても画面からはみ出さないようにする */
  max-height: calc(100% - 28px);
  overflow-y: auto;
  scrollbar-width: thin;
  z-index: 5;
}
/* タイルの大きさは人数に合わせて JS が --tile-w を書き換えます */
.video-tile {
  position: relative;
  width: var(--tile-w, 216px);
  height: calc(var(--tile-w, 216px) * 0.75);
  background: #0b111b;
  border: 1px solid #2c3a54;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.video-tile video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scaleX(-1);   /* 鏡のように見せる */
}
.video-tile .tile-name {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 4px 8px;
  font-size: 11px; color: #e2e8f0;
  background: linear-gradient(transparent, rgba(3, 7, 14, .85));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.video-tile.self { border-color: #3b82f6aa; }

.member-media { display: flex; align-items: center; gap: 4px; font-size: 11px; flex: none; color: var(--text-dim); }
.member-media .icon { width: 14px; height: 14px; }
/* ON は色を付けて、OFF は薄く。OFF も必ず出して「切っている」ことが分かるようにします */
.member-media .m-on { display: inline-flex; color: #6ee7b7; }
.member-media .m-off { display: inline-flex; color: #55617a; opacity: .75; }
.member-media .vol {
  display: inline-block;
  width: 22px; height: 4px;
  margin-left: 2px;
  background: #24314a;
  border-radius: 2px;
  overflow: hidden;
  align-self: center;
}
.member-media .vol i { display: block; height: 100%; background: #34d399; }

/* ================= 管理者の編集UI ================= */
.ghost-btn, .leave-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  font-size: 12.5px; font-family: inherit; color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--line-solid); border-radius: 9px;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease),
              background .16s var(--ease), transform .12s var(--ease);
}
.ghost-btn:hover { color: var(--text); border-color: #3c4a63; transform: translateY(-1px); }
.ghost-btn:active, .leave-btn:active { transform: translateY(0) scale(.97); }

.icon-only-btn {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--line-solid); border-radius: 9px;
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease);
}
.icon-only-btn:hover { color: var(--text); border-color: #3c4a63; transform: translateY(-1px); }
.icon-only-btn:active { transform: scale(.94); }
.ghost-btn.on {
  color: #1b1206; font-weight: 600;
  background: linear-gradient(135deg, #fcd34d, #fbbf24);
  border-color: #fbbf24;
}
.leave-btn:hover { color: #fecaca; border-color: #b91c1c88; background: #7f1d1d33; }

.icon-btn {
  width: 26px; height: 26px;
  font-size: 15px; line-height: 1; color: var(--text-dim);
  background: none; border: none; border-radius: 6px; cursor: pointer;
}
.icon-btn:hover { color: var(--text); background: #ffffff10; }

.edit-panel {
  position: absolute; left: 14px; top: 14px;
  width: 250px;
  max-height: calc(100% - 28px);
  overflow-y: auto;
  padding: 12px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  box-shadow: 0 1px 0 var(--glass-hi) inset, var(--shadow);
  backdrop-filter: var(--blur);
  z-index: 7;
  animation: panelIn .2s var(--ease);
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
}
/* 見出しは掴み手。パネルの下にある什器を触れるように動かせます
   （掴むのは見出しだけ。中身まで掴めると道具のボタンが押せなくなります） */
.edit-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;
  cursor: grab;
  user-select: none;
  touch-action: none;               /* ペン・タッチでも掴める（画面のスクロールに取られない） */
}
.edit-head .icon-btn { cursor: pointer; }   /* × は掴む対象ではない */
.edit-panel.dragging { animation: none; }   /* 掴んでいる間は出現アニメを掛けない */
.edit-panel.dragging .edit-head { cursor: grabbing; }
.edit-title { font-size: 13px; font-weight: 600; color: #fcd34d; }
.edit-group { margin-bottom: 10px; }
.edit-label {
  display: block; margin-bottom: 6px;
  font-size: 11px; color: var(--text-dim); letter-spacing: .04em;
}
.tool-buttons { display: flex; flex-wrap: wrap; gap: 5px; }
/* 什器が増えたので、用途ごとに見出しで区切る（見出しの前で行を折り返す） */
.tool-group {
  flex: 0 0 100%;
  margin-top: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: #7d8ca6;
}
.tool-group:first-child { margin-top: 0; }
.tool-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  font-size: 11.5px; font-family: inherit; color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--line-solid); border-radius: 8px;
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease),
              background .18s var(--ease), transform .12s var(--ease);
}
.tool-btn .icon { width: 14px; height: 14px; }
.tool-btn:hover { color: var(--text); border-color: #3c4a63; transform: translateY(-1px); }
.tool-btn:active { transform: scale(.96); }
.tool-btn.active {
  color: #04121f; font-weight: 600;
  background: linear-gradient(135deg, #7dd3fc, #60a5fa);
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, .18);
}

.edit-selection {
  padding: 9px 10px;
  background: #0f1520;
  border: 1px solid var(--line-solid); border-radius: 8px;
}
.edit-hint { font-size: 11px; line-height: 1.7; color: #6b7c93; }
.sel-name { display: block; margin-bottom: 8px; font-size: 12.5px; font-weight: 600; }
.sel-size {
  display: flex; flex-direction: column; gap: 5px;
  margin-bottom: 9px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-solid);
}
.sel-size-label { font-size: 11px; color: var(--text-dim); }
.sel-size-label b { color: var(--text); font-size: 11.5px; }
.sel-size-btns { display: flex; gap: 4px; }
.sel-size-btns .mini-btn {
  width: auto; height: 24px;
  padding: 0 8px;
  font-size: 11px; font-family: inherit;
}
.sel-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.sel-btn {
  padding: 5px 10px;
  font-size: 11.5px; font-family: inherit; color: var(--text);
  background: #1c2534;
  border: 1px solid var(--line-solid); border-radius: 6px; cursor: pointer;
}
.sel-btn:hover { border-color: #3c4a63; }
.sel-btn.danger { color: #fecaca; border-color: #b91c1c66; }
.sel-btn.danger:hover { background: #7f1d1d33; }

#scene.editing { cursor: cell; }

.admin-tag {
  margin-left: 5px; padding: 0 5px;
  font-size: 10px; color: #fde68a;
  background: #78350f55; border: 1px solid #b4530933; border-radius: 4px;
}
.admin-btn {
  display: grid; place-items: center;
  flex: none;
  width: 27px; height: 27px;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--line-solid); border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s var(--ease), color .14s var(--ease),
              border-color .14s var(--ease), transform .14s var(--ease);
}
.admin-btn .icon { width: 14px; height: 14px; }
.member:hover .admin-btn { opacity: 1; }
.admin-btn.on { opacity: 1; color: #fcd34d; border-color: #b4530966; }
.admin-btn:hover { color: #fcd34d; border-color: #b45309; transform: rotate(35deg); }

/* ================= モーダル ================= */
.modal-overlay {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 12px;
  background: rgba(4, 8, 15, .62);
  backdrop-filter: blur(3px);
  overflow-y: auto;
  z-index: 60;
}
.modal-card {
  width: min(480px, calc(100vw - 32px));
  margin: auto;
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 20px 50px rgba(0, 0, 0, .4);
  animation: modalIn .22s var(--ease);
}
/* アバターをつくる画面だけ広く使います（分類・姿・一覧を横に並べるため） */
.modal-card.wide { width: min(780px, calc(100vw - 32px)); }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
}
.modal-head h3 { margin: 0; font-size: 15px; }
.modal-body { padding: 0 16px 4px; }
.modal-field { display: block; margin-bottom: 14px; }
.modal-field span { display: block; margin-bottom: 6px; font-size: 11.5px; color: var(--text-dim); }
.modal-field input, .modal-field textarea {
  width: 100%;
  padding: 9px 11px;
  font-size: 13px; font-family: inherit; color: var(--text);
  background: #0f1520;
  border: 1px solid var(--line-solid); border-radius: 8px;
  outline: none; resize: vertical;
}
.modal-field input:focus, .modal-field textarea:focus { border-color: var(--accent); }
.board-text {
  padding: 4px 2px 10px;
  font-size: 13.5px; line-height: 1.85; color: #dbe4f0;
  white-space: pre-wrap; word-break: break-word;
}
.board-text.empty { color: #64748b; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 10px 16px 16px;
}
.modal-btn {
  padding: 8px 16px;
  font-size: 13px; font-family: inherit; color: var(--text);
  background: #1c2534;
  border: 1px solid var(--line-solid); border-radius: 8px; cursor: pointer;
}
.modal-btn:hover { border-color: #3c4a63; }
.modal-btn.primary {
  color: #04121f; font-weight: 600;
  background: linear-gradient(135deg, #7dd3fc, #60a5fa); border-color: transparent;
}
.modal-btn.danger { color: #fecaca; border-color: #b91c1c66; }

/* ================= 掲示板（マップ上に重ねる本物の文字） ================= */
.board-layer {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
}
.board-panel {
  position: absolute; left: 0; top: 0;
  display: flex; flex-direction: column;
  pointer-events: auto;
  background: linear-gradient(180deg, #fffdf6, #eef1f6);
  border: 1px solid rgba(90, 74, 48, .55);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .7) inset;
  overflow: hidden;
  will-change: transform;
  transition: opacity .18s var(--ease);
}
/* 掲示板の下にアバターが入っているあいだは透かして、隠れないようにする */
.board-panel.see-through { opacity: .28; }
.board-panel.see-through:hover { opacity: .92; }

.board-title {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 7px;
  font-size: 11px; font-weight: 700; color: #422f16;
  background: linear-gradient(180deg, #f3d9a4, #e3c489);
  border-bottom: 1px solid rgba(90, 74, 48, .35);
  flex: none;
}
.board-title-text {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.board-open {
  width: 17px; height: 17px; flex: none;
  font-size: 10px; line-height: 1; color: #6b5537;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(90, 74, 48, .3); border-radius: 4px;
  cursor: pointer;
}
.board-open:hover { background: #fff; color: #2b1d0a; }
.board-body {
  flex: 1; min-height: 0;
  padding: 6px 8px 7px;
  font-size: 11.5px; line-height: 1.65; color: #1f2937;
  overflow-y: auto;
  overflow-wrap: anywhere;
  user-select: text;
  cursor: text;
}
.board-body a {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.board-body a:hover { color: #1e40af; background: #dbeafe; }
.board-empty { color: #9aa4b2; }
.board-body::-webkit-scrollbar { width: 6px; }
.board-body::-webkit-scrollbar-thumb { background: #c3ccd9; border: none; border-radius: 6px; }

/* 編集中はマップ側の操作を優先する */
body.editing .board-panel { pointer-events: none; }

/* ================= 呼び出し・挙手・全体放送 ================= */
.media-btn.pa-btn.on {
  color: #3b0764;
  background: linear-gradient(135deg, #fda4f5, #e879f9);
  border-color: #e879f9;
  box-shadow: 0 0 0 3px rgba(232, 121, 249, .18);
}
#handBtn.on {
  color: #422006;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  border-color: #fbbf24;
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, .18);
}

/* 手を挙げている人。
   以前は名前の前に13pxのアイコンを置くだけで、20人並ぶと埋もれていました。
   いまは「行ごと色を変える」＋「顔アイコンに重ねた丸いバッジ」で示します。 */
.member.hand-up {
  background: rgba(251, 191, 36, 0.10);
  box-shadow: inset 3px 0 0 #fbbf24;
}
.member.hand-up:hover { background: rgba(251, 191, 36, 0.17); }

.hand-badge {
  position: absolute; left: -8px; top: -8px;
  display: grid; place-items: center;
  width: 22px; height: 22px;
  color: #3b2606;
  background: linear-gradient(135deg, #fde68a, #fbbf24);
  border: 2px solid var(--panel);
  border-radius: 50%;
  animation: handPulse 1.6s ease-in-out infinite;
}
.hand-badge .icon { width: 13px; height: 13px; }
@keyframes handPulse {
  0%, 100% { transform: rotate(-7deg) scale(1); box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.55); }
  50%      { transform: rotate(9deg) scale(1.08); box-shadow: 0 0 0 5px rgba(251, 191, 36, 0); }
}

.call-btn {
  display: grid; place-items: center;
  flex: none;
  width: 27px; height: 27px;
  color: var(--text-dim);
  background: var(--panel-2);
  border: 1px solid var(--line-solid); border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s var(--ease), color .14s var(--ease),
              border-color .14s var(--ease), transform .12s var(--ease);
}
.call-btn .icon { width: 14px; height: 14px; }
.member:hover .call-btn { opacity: 1; }
.call-btn:hover { color: #fbbf24; border-color: #b45309; transform: scale(1.08); }
.call-btn:active { transform: scale(.92); }

/* 全体放送の帯 */
.pa-banner {
  position: absolute; left: 50%; top: 14px;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 20px;
  font-size: 13px; font-weight: 600; color: #fdf4ff;
  background: linear-gradient(135deg, rgba(192, 38, 211, .92), rgba(147, 51, 234, .92));
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  box-shadow: 0 8px 26px rgba(147, 51, 234, .38);
  transform: translateX(-50%);
  z-index: 12;
  animation: paIn .28s var(--ease);
}
.pa-banner .icon { width: 17px; height: 17px; }
@keyframes paIn {
  from { opacity: 0; transform: translate(-50%, -12px); }
}
/* 放送中は画面のふちがほんのり光る */
body.pa-active .stage::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px rgba(217, 70, 239, .5);
  animation: paGlow 2s ease-in-out infinite;
  z-index: 11;
}
@keyframes paGlow {
  0%, 100% { opacity: .45; }
  50% { opacity: .9; }
}

/* 呼び出しカード */
.call-card {
  position: absolute; right: 16px; bottom: 16px;
  width: 290px;
  padding: 14px;
  background: var(--glass-strong);
  backdrop-filter: var(--blur);
  border: 1px solid rgba(251, 191, 36, .45);
  border-radius: 14px;
  box-shadow: 0 1px 0 var(--glass-hi) inset, 0 16px 40px rgba(0, 0, 0, .45);
  z-index: 14;
  animation: callIn .3s var(--ease);
}
@keyframes callIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
}
.call-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.call-head .call-bell {
  width: 18px; height: 18px; color: #fbbf24;
  animation: bellShake 1s ease-in-out infinite;
}
@keyframes bellShake {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}
#callTitle { flex: 1; font-size: 13.5px; font-weight: 600; }
.call-body { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.call-avatar {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  font-size: 15px; font-weight: 700; color: #0b1220;
  border-radius: 50%;
  background-position: center;
}
.call-where { font-size: 12px; color: var(--text-dim); line-height: 1.6; }
.call-foot { display: flex; gap: 8px; }
.call-foot .modal-btn { flex: 1; padding: 8px 10px; font-size: 12.5px; }

/* ================= 明るいテーマの個別調整 ================= */
:root[data-theme="light"] .brand-mark { filter: drop-shadow(0 0 5px #60a5fa55); }
:root[data-theme="light"] .area-chip {
  color: #1d4ed8; background: #e5edff; border-color: #c5d6fb;
}
:root[data-theme="light"] .time-chip {
  color: #92400e; background: #fef6e0; border-color: #f2ddb0;
}
:root[data-theme="light"] .time-chip.preview {
  color: #7c2d12; background: #fde8c8; border-color: #e0a94a;
}
:root[data-theme="light"] .count { color: #1d4ed8; background: #e5edff; }
:root[data-theme="light"] .chat-tab.active {
  color: #1d4ed8; background: #e5edff; border-color: #c5d6fb;
}
:root[data-theme="light"] .chat-tab:hover { background: #eef1f6; }
:root[data-theme="light"] .member:hover { background: #eef1f6; }
/* 明るいテーマでは、OFF の薄い灰色が白地に沈むので少し濃くする */
:root[data-theme="light"] .member-media .m-off { color: #97a1b5; }
:root[data-theme="light"] .member-media .m-on { color: #0f9d6b; }
:root[data-theme="light"] .member.hand-up { background: rgba(251, 191, 36, 0.20); }
:root[data-theme="light"] .member.hand-up:hover { background: rgba(251, 191, 36, 0.30); }
:root[data-theme="light"] .status-item:hover,
:root[data-theme="light"] .office-item:hover { background: #eef1f6; }
:root[data-theme="light"] .status-item.current { background: #e5edff; }
:root[data-theme="light"] .msg-text { color: #2b3648; }
:root[data-theme="light"] .msg-system { color: #6b7789; background: #eef1f6; }
:root[data-theme="light"] .me-tag { color: #1d4ed8; background: #e5edff; }
:root[data-theme="light"] .admin-tag { color: #92400e; background: #fef3c7; border-color: #fcd34d; }
:root[data-theme="light"] .modal-field input,
:root[data-theme="light"] .modal-field textarea,
:root[data-theme="light"] .modal-field select,
:root[data-theme="light"] .chat-form input,
:root[data-theme="light"] .login-card input[type="text"],
:root[data-theme="light"] .away-note-row input { background: #f8fafc; }
:root[data-theme="light"] .modal-btn,
:root[data-theme="light"] .sel-btn,
:root[data-theme="light"] .preset-chip,
:root[data-theme="light"] .tool-btn,
:root[data-theme="light"] .mini-btn,
:root[data-theme="light"] .dm-btn,
:root[data-theme="light"] .call-btn,
:root[data-theme="light"] .admin-btn,
:root[data-theme="light"] .media-btn,
:root[data-theme="light"] .ghost-btn,
:root[data-theme="light"] .icon-only-btn,
:root[data-theme="light"] .leave-btn,
:root[data-theme="light"] .status-btn,
:root[data-theme="light"] .office-btn { background: #f4f6fa; }
:root[data-theme="light"] .office-add { color: #1d4ed8; background: #e9efff; border-color: #b9cdf8; }
:root[data-theme="light"] .away-note-box,
:root[data-theme="light"] .edit-selection,
:root[data-theme="light"] .login-profile { background: #f4f6fa; }
:root[data-theme="light"] ::-webkit-scrollbar-thumb { background: #c8d0dc; border-color: transparent; }
:root[data-theme="light"] .login-overlay {
  background:
    radial-gradient(900px 520px at 30% 20%, #dbe6ff 0%, transparent 60%),
    radial-gradient(800px 460px at 80% 80%, #e2ecff 0%, transparent 55%),
    var(--bg);
}
:root[data-theme="light"] .login-card { background: #ffffff; }
:root[data-theme="light"] .login-hint { color: #7c8798; }
:root[data-theme="light"] kbd { color: #33405a; background: #eef1f6; border-color: #cfd7e3; }

/* ================= 画面幅に応じた省略 =================
 * 上部バーに置くのは「いつでもすぐ押したいもの」だけです
 * （アプリ名・時間帯・手を挙げる・マイク・カメラ・サイドバーの開閉）。
 * 場所と自分に関するものはサイドバーへ移したので、以前のように
 * 上部バーが横に溢れることはありません。
 *
 * サイドバーは幅が固定（310px）です。狭い窓ではマップが潰れてしまうため、
 * 一定より狭くなったら自動で畳みます（開閉ボタンでいつでも出せます）。
 * ====================================================== */
@media (max-width: 1200px) {
  .media-btn .media-label { display: none; }       /* マイク・カメラ・手を挙げるの文字 */
}
@media (max-width: 900px) {
  .time-chip .time-clock { display: none; }        /* 時刻を省き、時間帯だけ残す */
  .sidebar { width: 270px; }
}
@media (max-width: 760px) {
  /* ここから下はマップが狭くなりすぎるので、サイドバーは畳んだ状態で始めます
     （js/ui.js が起動時に判断します。開閉ボタンはいつでも使えます） */
  .sidebar { width: 250px; }
}
@media (max-width: 700px) {
  #timeChipText { display: none; }                 /* 時間帯は絵文字だけに */
  .topbar .brand-mark { display: none; }
}
@media (max-width: 620px) {
  .time-chip { display: none; }                    /* 時間帯は画面の色で分かる */
}
@media (max-width: 540px) {
  .topbar { padding: 0 8px; gap: 8px; }
  .topbar-right { gap: 6px; }
  .media-btn, .icon-only-btn { padding: 6px 8px; }
  .brand-name { display: none; }                   /* アプリ名（マイク・カメラを優先） */
}

@media (max-width: 900px) {
  .video-tiles { --tile-w: 132px !important; }
  .edit-panel { width: 200px; }
  /* メンバー欄が狭くなるため、重なりやすい表示を省く */
  .member-near { display: none; }
  .member { gap: 7px; padding: 8px 6px; }
  /* 以前はここでサイドバーを画面の下辺に横並びで置いていました。
     場所・自分の欄が加わって4つになり横並びが成り立たなくなったのと、
     開閉できるようになって畳めば済むため、右側の縦置きのまま通します。 */
  .hud-bottom-left { display: none; }
}