:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --text: #1c1f24;
  --muted: #5f6672;
  --line: #d9dde3;
  --accent: #2f6fed;
  --accent-text: #ffffff;
  --danger: #c93a3a;
  --ok: #1f8a4c;
  --warn-bg: #fff4d6;
  --warn-text: #6b4e00;
  --video-bg: #000000;
  --bubble: #eceef2;      /* チャットの吹き出し（ほかの人） */
  --bubble-mine: #d9e6ff; /* チャットの吹き出し（自分） */
  --who-l: 38%;           /* チャットの名前の色の明るさ */
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15171b;
    --panel: #1e2126;
    --text: #e6e8eb;
    --muted: #9aa1ac;
    --line: #333841;
    --accent: #5b8cff;
    --accent-text: #0b0d10;
    --danger: #ff6b6b;
    --ok: #4cc17f;
    --warn-bg: #3a3017;
    --warn-text: #f3d98b;
    --bubble: #2a2e35;
    --bubble-mine: #213760;
    --who-l: 72%;
  }
}

* { box-sizing: border-box; }

/* display を指定したクラスより hidden 属性を優先する（.overlay などが消えなくなるため） */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.6 system-ui, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
}

h1 { font-size: 18px; margin: 0; }
h2 { font-size: 15px; margin: 0 0 8px; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button, a.button {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
}
/* ボタンのように見せるリンク（別のページを開くもの） */
a.button { color: inherit; text-decoration: none; display: inline-block; }
button.primary, a.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
button.danger { color: var(--danger); }
button.on { background: var(--ok); border-color: var(--ok); color: #fff; }
/* 発言中でも、マイクの音を送っていない間（iPad で、相手の音が鳴っている間。web/echogate.js） */
button.on.held { background: var(--warn-bg); border-color: var(--ok); color: var(--warn-text); }
button:disabled { opacity: .5; cursor: default; }

input, select, textarea {
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 6px;
  padding: 5px 8px;
  min-width: 0;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.topbar .spacer { flex: 1; }
/* 参加の画面の再読み込み。右のペンとの間を、ほかのボタンの間より空ける */
.topbar .reload-btn { margin-right: 12px; }
.status { color: var(--muted); font-size: 13px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
}

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
label.stack { display: flex; flex-direction: column; } /* 見出しの下に入力の欄 */
.row .grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 8px; }
.muted { color: var(--muted); font-size: 13px; }
.warn { background: var(--warn-bg); color: var(--warn-text); border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.error { color: var(--danger); }

ul.list { list-style: none; margin: 0; padding: 0; }
ul.list li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-top: 1px solid var(--line);
}
ul.list li:first-child { border-top: 0; }
/* 欄が狭いときは、文字を 1 文字ずつ折り返さず、ボタンを次の行へ送る（文字は 10 文字分までは縮めない） */
ul.list li { flex-wrap: wrap; row-gap: 4px; }
ul.list li .grow { flex: 1 1 10em; min-width: 0; overflow-wrap: anywhere; }
/* ホストの画面の参加者（1 行目に名前と状態、2 行目にボタン） */
ul.list li.participant { flex-direction: column; align-items: stretch; gap: 4px; }
/* 参加者の受信の状態（遅延の目安など） */
.participant-net { font-size: 12px; overflow-wrap: anywhere; }
.participant-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
/* 名前の右の、マイク・チャットと書き込み・退出のアイコンのボタン（禁止しているものは赤） */
.participant-icons { display: inline-flex; gap: 4px; }
/* 名前のすぐ右の、マイク・スピーカーの状態のアイコン（押せない。話している間はマイクを緑にし、行の左に緑の線） */
.participant-status { display: inline-flex; align-items: center; gap: 2px; margin-right: 2px; }
.person-status { display: inline-flex; color: var(--muted); }
.person-status svg { width: 15px; height: 15px; }
.person-status.on { color: var(--text); }
.person-status.speaking { color: var(--ok); }
.person-status .icon-x { stroke: var(--danger); }
ul.list li.participant.speaking { box-shadow: inset 3px 0 0 var(--ok); }
.person-btn { padding: 3px; }
.person-btn svg { width: 16px; height: 16px; }
.person-btn.banned, .person-btn.danger { color: var(--danger); }
.participant-name { font-weight: 600; overflow-wrap: anywhere; }
.participant-state { font-size: 12px; }
/* 参加者に送っている映像（コーデック・解像度・fps）。灰色の文字では見つけにくいので、アクセントの色の札にする */
.participant-video {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-weight: 600; white-space: nowrap;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.participant-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.participant-actions button { padding: 3px 10px; font-size: 13px; }
.participant-actions select { padding: 2px 4px; font-size: 13px; max-width: 100%; }

dl.stats {
  display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px;
  margin: 0; font-size: 13px; font-variant-numeric: tabular-nums;
}
dl.stats dt { color: var(--muted); }
dl.stats dd { margin: 0; overflow-wrap: anywhere; }
/* 視聴者の画面の受信の統計: 右の欄は狭いので、表にせず、項目名（太字）の下に字下げして値を出す */
#decStats { display: block; }
#decStats dt { color: var(--text); font-weight: 700; margin-top: 6px; }
#decStats dt:first-child { margin-top: 0; }
#decStats dd { padding-left: 1em; color: var(--muted); }

/* 共有するもの（アプリの配信の欄）。縮小画像付きのカードを並べる */
.source-search { flex: 1; min-width: 200px; }
.sources {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px;
  max-height: 440px; overflow-y: auto; padding: 2px;
}
.source {
  display: flex; flex-direction: column; gap: 3px; padding: 6px; text-align: left;
  border: 2px solid var(--line); min-width: 0;
}
/* 今配信しているもの（配信中に、ほかのものを選んで切り替えられる） */
.source.live { position: relative; }
.source.live::after {
  content: "配信中"; position: absolute; top: 10px; left: 10px; padding: 1px 6px; border-radius: 4px;
  background: #d93025; color: #fff; font-size: 11px; font-weight: 600;
}
/* 選べないが、ダブルクリックで手前に出せるウィンドウ（最小化中・配信中） */
.source[aria-disabled="true"] { opacity: .5; cursor: default; }
.source[aria-selected="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
/* 検索の欄の ↑↓ で印を付けたカード（画面のタブを使い、配信していない間。Enter でそのタブを開く。選ぶのとは別） */
.source.cursor { outline: 2px dashed var(--accent); outline-offset: 2px; }
.source .thumb {
  aspect-ratio: 16 / 9; background: var(--video-bg); border-radius: 4px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: #9aa1ac; font-size: 12px;
}
.source .thumb img { width: 100%; height: 100%; object-fit: contain; }
.source .name, .source .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source .name { font-size: 13px; }
.source .sub { font-size: 12px; color: var(--muted); }
/* ウィンドウのカードを選ぶと、その下に出す吹き出し（ウィンドウを配信用の大きさに合わせる）。--arrow は矢印の位置 */
.sources-group { position: relative; }
.fit-popup {
  position: absolute; z-index: 20; width: min(340px, 100%); box-sizing: border-box; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px; font-size: 13px;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 8px; box-shadow: 0 6px 20px rgb(0 0 0 / .25);
}
.fit-popup::before {
  content: ""; position: absolute; top: -7px; left: calc(var(--arrow, 24px) - 6px); width: 12px; height: 12px;
  background: var(--panel); border-left: 1px solid var(--accent); border-top: 1px solid var(--accent); transform: rotate(45deg);
}
.fit-popup.above::before { top: auto; bottom: -7px; transform: rotate(225deg); }
.fit-popup p { margin: 0; }
.fit-popup .row { justify-content: flex-end; }
.fit-popup .fit-size { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }

/* 招待 URL の QR コード */
.qr-dialog {
  border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px;
  background: var(--panel); color: var(--text); max-width: min(92vw, 420px);
}
.qr-dialog::backdrop { background: rgb(0 0 0 / 50%); }
.qr-dialog canvas {
  display: block; width: min(80vw, 320px); height: auto; margin: 8px auto;
  image-rendering: pixelated; border-radius: 4px;
}
.qr-url { overflow-wrap: anywhere; text-align: center; margin: 4px 0 10px; }
/* QR コードの窓の「自動承認」（URL の下、ボタンの上） */
.qr-auto { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 12px; }
/* 招待 URL の QR コードをカメラで読む（参加の画面） */
.qr-scan-dialog { box-sizing: border-box; width: min(92vw, 440px); max-width: none; }
.qr-scan-dialog video {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin: 8px 0;
  background: #000; border-radius: 6px;
}
.invite-row { flex-wrap: nowrap; }
.qr-scan-btn { flex: none; width: 40px; height: 38px; padding: 0; }
.qr-scan-btn svg { width: 22px; height: 22px; }
/* パスキーの登録 URL の QR コード（「ログインとパスキー」の欄。行の下に出す） */
.setup-qr-row { flex-basis: 100%; }
/* 送っている映像（ホストの画面の配信の欄） */
.stream-on { color: var(--ok); }
/* ホストのアカウントの一覧の中の、そのホストの会議 */
ul.host-meetings { flex-basis: 100%; list-style: none; margin: 0; padding: 0 0 0 1em; }
ul.list ul.host-meetings li { padding: 2px 0; border-top: 0; }
/* パスキーの名前の欄（例まで読めるよう横長に。狭い画面では行いっぱい） */
#passkeyName, #setupName, #hostNewName { width: 26em; max-width: 100%; }
.setup-qr { display: block; width: min(60vw, 220px); height: auto; image-rendering: pixelated; border-radius: 4px; }

/* 視聴者の画面の参加者の一覧 */
/* 視聴者の画面の参加者: 名前・マイク・スピーカーを 1 人ずつ小さな札にして、折り返して並べる。話している人は緑の枠 */
.people { list-style: none; margin: 6px 0 0; padding: 0; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.people li {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; max-width: 100%;
  border: 2px solid var(--line); border-radius: 999px; overflow-wrap: anywhere;
}
.people li.speaking { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.people li .muted { font-size: 12px; }
.people .person-icon { display: inline-flex; flex: none; color: var(--muted); }
.people .person-icon.on { color: var(--text); }
.people .person-icon svg { width: 14px; height: 14px; display: block; }
.people .person-icon .icon-x { stroke: var(--danger); }

/* チャット */
.chat { display: flex; flex-direction: column; min-height: 0; }
.chat .log { flex: 1; overflow-y: auto; min-height: 120px; font-size: 14px; display: flex; flex-direction: column; padding: 2px 2px 4px; }
/* 吹き出し。自分は右、ほかの人は左。同じ人が続けて送ったもの（.cont）は、名前と時刻を省いて詰める */
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 88%; align-self: flex-start; margin-top: 8px; }
.chat-msg.cont { margin-top: 3px; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg-head { display: flex; align-items: baseline; gap: 6px; margin: 0 6px 2px; font-size: 12px; }
.chat-who { font-weight: 600; color: hsl(var(--who-hue, 210) 65% var(--who-l)); overflow-wrap: anywhere; }
.chat-time { color: var(--muted); font-size: 11px; }
.chat-bubble {
  max-width: 100%; padding: 6px 10px; border-radius: 12px; border-top-left-radius: 4px;
  background: var(--bubble); overflow-wrap: anywhere;
}
.chat-msg.cont .chat-bubble { border-top-left-radius: 12px; }
.chat-msg.mine .chat-bubble { background: var(--bubble-mine); border-top-left-radius: 12px; border-top-right-radius: 4px; }
.chat-msg.mine.cont .chat-bubble { border-top-right-radius: 12px; }
.chat-bubble .chat-image, .chat-bubble .chat-file { margin-top: 4px; }
.chat-bubble > :first-child { margin-top: 0; }
/* システムのお知らせ（吹き出しにしない） */
.chat-notice { align-self: center; max-width: 95%; margin: 8px 0 2px; color: var(--muted); font-size: 12px; text-align: center; overflow-wrap: anywhere; }
.chat form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.chat form textarea {
  flex: 1; min-width: 0; resize: none; line-height: 1.4; max-height: calc(1.4em * 6 + 12px); overflow-y: auto; align-self: flex-end;
}
/* メッセージの本文（改行と字下げをそのまま出す。複数行は名前の次の行から） */
.chat-text { white-space: pre-wrap; }
.chat-text.chat-multiline { display: block; margin-top: 2px; }
/* 「コピー用」のチェックボックス */
.chat form .chat-pick { flex: none; padding: 6px; }
.chat-copy-toggle { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.chat-copy-toggle input { margin: 0; }
/* 送る欄に付けた画像 */
.chat-attach { flex-basis: 100%; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.chat-attach img { max-width: 72px; max-height: 48px; border-radius: 4px; border: 1px solid var(--line); }
.chat-attach img:not([src]) { display: none; }
.chat-attach span { flex: 1; min-width: 0; }
.chat.chat-drop { outline: 2px dashed var(--accent); outline-offset: -2px; }
/* チャットの中の画像（ダブルクリックで大きく出す） */
.chat-image {
  display: block; max-width: min(100%, 240px); max-height: 160px; margin: 4px 0 2px; border-radius: 4px;
  border: 1px solid var(--line); cursor: zoom-in;
}
.chat-image:focus-visible { outline: 2px solid var(--accent); }
.chat-image-note { display: block; color: var(--muted); font-size: 12px; }
/* チャットの画像の下の「画面に出す」（ホストの画面だけ） */
.chat-share-btn { display: block; margin: 2px 0 4px; padding: 2px 10px; font-size: 12px; }
/* チャットのテキストのファイル（名前・大きさ・「開く」「保存」。ダブルクリックで中身を出す） */
.chat-file {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; width: fit-content; max-width: 100%;
  margin: 4px 0 2px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); cursor: default;
}
.chat-file:focus-visible { outline: 2px solid var(--accent); }
.chat-file-icon { font-size: 16px; line-height: 1; }
.chat-file-name { font-weight: 600; overflow-wrap: anywhere; }
.chat-file .muted { font-size: 12px; }
.chat-file button { padding: 2px 8px; font-size: 12px; }
/* サーバーに上げたファイル（「保存」と、開くと実行できるもの・圧縮ファイルの注意） */
.chat-upload { display: block; }
.chat-file-warn {
  display: block; width: fit-content; max-width: 100%; margin: 2px 0; padding: 3px 8px; border-radius: 4px; font-size: 12px;
  background: var(--warn-bg); color: var(--warn-text); overflow-wrap: anywhere;
}
.chat-file-warn.danger { font-weight: 600; border-left: 3px solid var(--danger); }
/* テキストのファイルの中身を出す窓 */
.text-popup {
  padding: 0; width: min(96vw, 1000px); max-height: 92vh; display: flex; flex-direction: column;
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
}
.text-popup:not([open]) { display: none; }
.text-popup::backdrop { background: rgb(0 0 0 / 60%); }
.text-popup-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.text-popup-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.text-popup pre {
  margin: 0; padding: 10px 12px; overflow: auto; font-family: ui-monospace, Consolas, monospace; font-size: 13px;
  white-space: pre; tab-size: 4;
}

/* コピー用のメッセージと、その横の「コピー」 */
.chat-copytext {
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; padding: 1px 4px; border-radius: 3px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}
.chat-copy-btn { margin-left: 6px; padding: 1px 8px; font-size: 12px; vertical-align: baseline; }
/* 画像を大きく出す窓 */
.image-popup { padding: 0; border: none; background: transparent; max-width: 96vw; max-height: 96vh; overflow: auto; }
.image-popup::backdrop { background: rgb(0 0 0 / 75%); }
.image-popup img { display: block; max-width: 96vw; max-height: 96vh; background: #fff; cursor: zoom-in; }
.image-popup.actual img { max-width: none; max-height: none; cursor: zoom-out; }
.image-popup-close { position: fixed; top: 12px; right: 12px; }
/* チャットの中の URL（押すと「ブラウザで開く」「URL をコピー」の小さな窓） */
.chat-link { color: var(--accent); text-decoration: underline; cursor: pointer; overflow-wrap: anywhere; border-radius: 3px; }
.chat-link:hover, .chat-link:focus-visible { background: color-mix(in srgb, var(--accent) 15%, transparent); outline: none; }
.link-menu {
  position: fixed; z-index: 100; display: grid; gap: 6px; padding: 10px; width: max-content; max-width: min(92vw, 380px);
  background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 4px 14px rgb(0 0 0 / 35%);
}
.link-menu-host { font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.link-menu-url { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-menu button { text-align: left; }

/* 待機室に人が入ったことの知らせ（ホストの画面の右上。メニューとショートカットバーの下。ブラウザで開いているとき） */
.waiting-toasts {
  position: fixed; top: 80px; right: 16px; z-index: 90; display: flex; flex-direction: column; gap: 8px;
  width: min(340px, calc(100vw - 32px));
}
.waiting-toast {
  position: relative; padding: 10px 12px 12px 16px; border: 1px solid var(--line); border-left: 4px solid #ff9500;
  border-radius: 8px; background: var(--panel); box-shadow: 0 4px 14px rgb(0 0 0 / 35%);
  animation: waiting-toast-in 0.25s ease-out;
}
@keyframes waiting-toast-in { from { transform: translateY(-8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .waiting-toast { animation: none; } }
.waiting-toast-head { color: var(--muted); font-size: 12px; padding-right: 28px; }
.waiting-toast-name { font-size: 17px; font-weight: 700; margin: 2px 0 10px; overflow-wrap: anywhere; }
.waiting-toast-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.waiting-toast-close { position: absolute; top: 6px; right: 6px; padding: 2px 8px; border: 0; background: transparent; color: var(--muted); }
/* 知らせから開いた待機室の行 */
ul.list li.highlight { background: color-mix(in srgb, #ff9500 22%, transparent); transition: background 0.3s; }

/* ===== ホストの画面（host.html の #main） =====
   上から、メインメニュー、よく使う操作のショートカットバー、知らせ、タブと中身（右に待機室・参加者・チャットの列）。
   画面の高さに収め、タブの中身と右の列の上の部分だけをスクロールする（チャットの送る欄は、右の列の下の端）。
   すばやく操作できるよう、余白は狭く、文字は少し小さくする。狭ければ 1 列にして、画面全体をスクロールする。
   ほかの決まり（.person-btn など）に負けるよう、全体に効かせるものは :where(#main) で弱くする */
#main:not([hidden]) { display: flex; flex-direction: column; height: 100vh; height: 100dvh; font-size: 14px; line-height: 1.5; }
#main > * { flex: none; }
:where(#main) h2 { font-size: 14px; margin: 0; }
:where(#main) h3 { font-size: 13px; margin: 0; }
:where(#main) button { padding: 4px 10px; border-radius: 5px; }
:where(#main) a.button { padding: 4px 10px; border-radius: 5px; }
:where(#main) :is(input, select, textarea) { padding: 3px 6px; border-radius: 5px; }
:where(#main) .row { gap: 6px; }
:where(#main) .stack > * + * { margin-top: 6px; }
:where(#main) .muted { font-size: 12.5px; }
:where(#main) .warn { padding: 6px 8px; font-size: 12.5px; }
:where(#main) ul.list li { padding: 4px 0; gap: 6px; }
/* アプリの中だけのもの・ブラウザ版だけのもの（host.js が <html> に in-app を付ける）と、会議が要るもの（会議が無い間は隠す） */
html.in-app #main .browser-only, html:not(.in-app) #main .app-only, #main.no-meeting .needs-meeting { display: none !important; }

/* 1. メインメニュー（web/menubar.js）。右に、接続の状態とログインしているホスト */
.menubar {
  display: flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px;
  background: var(--panel); border-bottom: 1px solid var(--line); font-size: 13px;
}
.menubar .app-name { font-weight: 700; margin-right: 6px; white-space: nowrap; }
.menubar .spacer { flex: 1; }
.menubar .status, #hostName { white-space: nowrap; }
.menus { display: flex; align-items: center; }
.menu { position: relative; }
.menu-top { padding: 3px 10px; border: 0; border-radius: 4px; background: transparent; }
.menu-top:hover, .menu-top[aria-expanded="true"] { background: color-mix(in srgb, var(--text) 10%, transparent); }
.menu-top:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.menu-pop {
  position: absolute; top: calc(100% + 2px); left: 0; z-index: 60; min-width: 250px; padding: 4px;
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 30%);
}
.menu-item {
  display: grid; grid-template-columns: 1.1em 1fr auto; align-items: center; gap: 6px; width: 100%;
  padding: 4px 8px; border: 0; border-radius: 4px; background: transparent; text-align: left; white-space: nowrap;
}
.menu-item:focus { outline: none; }
.menu-item:not(:disabled):is(:hover, :focus) { background: var(--accent); color: var(--accent-text); }
.menu-item:disabled { opacity: .45; }
.menu-mark { font-size: 11px; text-align: center; }
.menu-key { margin-left: 18px; color: var(--muted); font-size: 12px; }
.menu-item:not(:disabled):is(:hover, :focus) .menu-key { color: inherit; }
.menu-sep { height: 1px; margin: 4px 2px; background: var(--line); }
/* 接続の状態の印（緑: 接続中、橙: 接続・再接続しています、赤: 切断） */
.conn-state { display: inline-flex; align-items: center; gap: 5px; }
.conn-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.conn-state[data-state="connected"]::before { background: var(--ok); }
.conn-state:is([data-state="connecting"], [data-state="reconnecting"], [data-state="signalReconnecting"])::before { background: #ff9500; }
.conn-state[data-state="disconnected"]::before { background: var(--danger); }

/* 2. ショートカットバー。まとまりごとに縦の線で区切る。狭ければ折り返す。ボタンの高さはそろえる */
.toolbar {
  display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; padding: 4px 8px;
  background: var(--panel); border-bottom: 1px solid var(--line); font-size: 13px;
}
.tool-group { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0 8px; border-left: 1px solid var(--line); }
.tool-group:first-child { padding-left: 0; border-left: 0; }
/* 高さをそろえるのは並びのボタンだけ（ペンの色・スタンプの一覧の中のボタンは、そのまま） */
.tool-group > :is(button, select), .stage-head > button, .annot-tools > button { height: 30px; }
.toolbar select { max-width: 260px; }
/* アイコンと文字のボタン。アイコンは data-icon（文字を書き換えても消えないよう、::before に出す）。icon-only は文字なし */
.tb-btn { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tb-btn.icon-only { padding: 4px 7px; }
/* ショートカットバーの中のチェックボックス（「書込みも録画」） */
.tb-check { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
.tb-check[hidden] { display: none; }
/* 2 つを、ボタンと同じ角丸の枠にまとめ、間に縦の線を引く（参加の画面の上のバーとホストの画面のショートカットバーの、
   発言・マイクのボタンと「声をクリアに」、カメラのボタンと背景ぼかしのボタン）。中のボタンは枠を持たず、色（発言中・付けている間の緑など）は自分の所だけを塗る。
   隠したもの（カメラを付けていない間の、ぼかしと切り替えのボタン）は無いものとして、残ったボタンの角を丸める */
.btn-group {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}
.btn-group > button { border: 0; border-radius: 5px; }
.btn-group > :has(~ :not([hidden])) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > :not(:first-child) { position: relative; border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* 前との境の縦の線。両方とも色を塗っている間（カメラもぼかしも入れている）は、塗った上でも見えるよう文字の色で引く */
.btn-group > :not(:first-child)::before {
  content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 1px; background: var(--muted); opacity: .5;
}
.btn-group > .on + .on::before, .btn-group > .on + [hidden] + .on::before { background: currentColor; opacity: .6; }
/* ホストの画面のショートカットバー: 枠をほかのボタンと同じ高さ（30px）にし、中のボタン・チェックを枠いっぱいに伸ばす。
   アイコンを ::before で描くボタン（マイク）は 1 つ目に置くので、縦の線とは重ならない */
.tool-group > .btn-group { height: 30px; }
.tool-group .btn-group > button { padding-top: 0; padding-bottom: 0; }
.tool-group .btn-group > .tb-check { padding: 0 10px 0 9px; }
.tool-group .btn-group > .tb-btn.on:disabled { background: transparent; }
/* 「声をクリアに」は、外している間は文字を薄く出す。狭いとき（上のバーの題名を出さず、ボタンを小さくする幅。下の
   #room .topbar）は、上のバーが 1 行に収まるよう文字を出さず、チェックだけにする（title と aria-label がある） */
.voice-filter {
  display: inline-flex; align-items: center; gap: 4px; padding: 0 10px 0 9px;
  white-space: nowrap; cursor: pointer; font-size: 13px; color: var(--muted);
}
.voice-filter input { margin: 0; }
.voice-filter:has(input:checked) { color: inherit; }
@media (max-width: 1280px) {
  #room .voice-filter { padding: 0 8px 0 8px; }
  #room .voice-filter span { display: none; }
}
.tb-btn[data-icon]::before {
  content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.tb-btn.icon-btn svg { width: 17px; height: 17px; }
[data-icon="play"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E"); }
[data-icon="stop"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5.5' y='5.5' width='13' height='13' rx='2'/%3E%3C/svg%3E"); }
[data-icon="rec"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3C/svg%3E"); }
[data-icon="mic"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10v1a7 7 0 0 0 14 0v-1M12 18v4'/%3E%3C/svg%3E"); }
[data-icon="mic-off"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 10v1a7 7 0 0 0 14 0v-1M12 18v4M3 3l18 18'/%3E%3C/svg%3E"); }
[data-icon="memo"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V6a2 2 0 0 1 2-2h2M16 4h2a2 2 0 0 1 2 2v2M20 16v2a2 2 0 0 1-2 2h-2M8 20H6a2 2 0 0 1-2-2v-2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
[data-icon="link"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E"); }
[data-icon="plus"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
[data-icon="front"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h10a2 2 0 0 1 2 2v10'/%3E%3Crect x='4' y='8' width='12' height='12' rx='2'/%3E%3Cpath d='M10 17v-6M7.5 13.5L10 11l2.5 2.5'/%3E%3C/svg%3E"); }
[data-icon="layers"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'/%3E%3Cpath d='M3 13l9 5 9-5'/%3E%3C/svg%3E"); }
[data-icon="wait"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12M6 21h12M7 3c0 5 5 6 5 9s-5 4-5 9M17 3c0 5-5 6-5 9s5 4 5 9'/%3E%3C/svg%3E"); }
[data-icon="full"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M15 4h5v5M20 15v5h-5M9 20H4v-5'/%3E%3C/svg%3E"); }
[data-icon="folder"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
[data-icon="qr"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Cg fill='black' stroke='none'%3E%3Crect x='5.5' y='5.5' width='2' height='2'/%3E%3Crect x='16.5' y='5.5' width='2' height='2'/%3E%3Crect x='5.5' y='16.5' width='2' height='2'/%3E%3Crect x='14' y='14' width='3' height='3'/%3E%3Crect x='18' y='18' width='3' height='3'/%3E%3Crect x='18.5' y='14' width='2.5' height='2.5'/%3E%3Crect x='14' y='18.5' width='2.5' height='2.5'/%3E%3C/g%3E%3C/svg%3E"); }
[data-icon="refresh"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E"); }
/* 画面のタブ（ウェブサイト・ホワイトボード・モニター・ウィンドウ・参加者の画面共有・カメラ）と、ウェブのタブの戻る・進む・止める */
[data-icon="globe"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.4 2.6 3.7 5.6 3.7 9s-1.3 6.4-3.7 9M12 3C9.6 5.6 8.3 8.6 8.3 12s1.3 6.4 3.7 9'/%3E%3C/svg%3E"); }
[data-icon="monitor"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E"); }
[data-icon="window"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18M6.5 6.5h.01M9.5 6.5h.01'/%3E%3C/svg%3E"); }
[data-icon="board"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='13' rx='1.5'/%3E%3Cpath d='M7 8h10M7 11.5h6M12 16v5M8.5 21h7'/%3E%3C/svg%3E"); }
[data-icon="share"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M12 13V8M9.5 10.5L12 8l2.5 2.5M8 20h8'/%3E%3C/svg%3E"); }
[data-icon="camera"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='13' height='12' rx='2'/%3E%3Cpath d='M15.5 10.5l6-3.5v10l-6-3.5z'/%3E%3C/svg%3E"); }
[data-icon="crash"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L2.5 20h19z'/%3E%3Cpath d='M12 10v4.5M12 17.5v.01'/%3E%3C/svg%3E"); }
[data-icon="back"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
[data-icon="forward"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
[data-icon="site"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
[data-icon="cross"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
/* 録画中のボタンは赤。待機室に人がいるときのボタンは橙。押せない間は、ON の色を付けない（配信していない間の「マイク ON」など） */
.rec-btn.on { background: #d93025; border-color: #d93025; color: #fff; }
.tb-btn.on:disabled { background: var(--panel); border-color: var(--line); color: inherit; }
.tb-btn.attention { background: #ff9500; border-color: #ff9500; color: #1c1c1e; font-weight: 700; }
/* 画面共有の内容のおすすめ（押したときだけ切り替える。目立たせすぎない） */
.tb-btn.suggest { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); border-color: var(--accent); color: var(--accent); }
/* 映像の「自動」で送っている設定（変えた直後は、しばらく目立たせる） */
.auto-chip {
  display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--accent);
  color: var(--accent); font-size: 12px; white-space: nowrap; max-width: 28em; overflow: hidden; text-overflow: ellipsis;
}
.auto-chip.changed { background: var(--accent); color: var(--panel); }
@media (prefers-reduced-motion: no-preference) { .auto-chip { transition: background-color 0.4s, color 0.4s; } }
/* 配信中・録画中の印（録画中は点が点滅する） */
.live-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px;
  background: #d93025; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.live-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.live-chip.rec::before { animation: live-blink 1.2s steps(2, start) infinite; }
@keyframes live-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .live-chip.rec::before { animation: none; } }

/* 知らせ（画面の全体に関わるもの。出ているときだけ場所を取る） */
.notices .alerts { margin: 0 10px; }
.notices .alerts .alert { margin: 6px 0; padding: 6px 10px; }
.notices > .notice, .notices > .warn { margin: 6px 10px; }

/* 3. タブ（左の列の上）と中身。右の列は待機室・参加者・チャット。会議が無い間は右の列を隠して 1 列にする */
#main > .host-layout {
  flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 26vw, 420px);
}
#main.no-meeting > .host-layout { grid-template-columns: minmax(0, 1fr); }
.host-content { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.tabs {
  flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px; padding: 6px 8px 0;
  border-bottom: 1px solid var(--line);
}
.tabs [role="tab"] {
  margin-bottom: -1px; padding: 5px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0;
  background: transparent; color: var(--muted); white-space: nowrap;
}
.tabs [role="tab"]:hover:not([aria-selected="true"]) { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.tabs [role="tab"][aria-selected="true"] {
  background: var(--panel); border-color: var(--line); color: var(--text); box-shadow: inset 0 2px 0 var(--accent);
}
.tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* タブを開いていない間に、だれかが書き始めた・参加者が画面共有している（「画面と書き込み」のタブ） */
.tabs [role="tab"].attention:not([aria-selected="true"]) { color: var(--accent); font-weight: 600; }
.tab-badge {
  margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-text);
  font-size: 11px; font-weight: 700;
}
.host-main { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; padding: 10px; background: var(--panel); }
.tab-pane { min-width: 0; }
/* 囲み（設定のまとまりなど） */
.group { min-width: 0; margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; }
fieldset.group { padding-top: 2px; }
fieldset.group > legend { padding: 0 4px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
.fields { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.fields > label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; max-width: 100%; }
.fields select { max-width: 100%; min-width: 0; }
.fields .warn { margin: 0; }
.fields .muted { margin: 0; max-width: 46em; }
/* おすすめの設定（ブラウザ版のホストの「映像」）。選択肢の文が長いので、欄の幅に収めて縮める */
.video-preset-row { max-width: 100%; }
.video-preset-row > label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; max-width: 100%; }
#videoPreset { min-width: 0; max-width: 100%; }
.help-btn {
  flex: none; width: 22px; height: 22px; padding: 0; border-radius: 50%; color: var(--muted); font-size: 12px; line-height: 1;
}
.help summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.help[open] summary { margin-bottom: 4px; }
/* 会議が無いときの「配信」のタブ */
.empty-state { max-width: 560px; margin: 32px auto; padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
:where(#main) .empty-state h2 { font-size: 16px; }

/* 配信: 左に共有するもの、右に設定。どちらも中だけをスクロールする。ブラウザ版は設定だけを横に並べる */
#pane-stream:not([hidden]) { height: 100%; }
.stream-grid { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 10px; }
html:not(.in-app) .stream-grid { grid-template-columns: minmax(0, 1fr); }
.sources-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.sources-group > * { margin: 0; }
.sources-group .sources { flex: 0 1 auto; min-height: 120px; max-height: none; align-content: start; }
.settings { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; overflow-y: auto; }
html:not(.in-app) .settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-content: start; }
.status-box { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 10px; border-radius: 6px; background: var(--bg); }
.status-box p { margin: 0; overflow-wrap: anywhere; }

/* 画面と書き込み: 映像を中身の高さいっぱいに出し、右にレイヤーと表示の設定 */
#pane-stage:not([hidden]) { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 20vw, 300px); gap: 10px; }
.stage-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.stage-main h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 題名の右に、ペン・スタンプ・消しゴム・色と画面メモ。題名が長ければ（「○○ さんの画面共有」など）… で切る */
.stage-head h2 { flex: 0 1 auto; min-width: 4em; margin-right: 4px; }
.stage-head .annot-tools { gap: 4px; }
.stage-head .annot-color { padding: 4px 7px; }
/* 大きく出しているカメラが、背景をぼかしているので小さいまま送られているときの知らせ（題名の右） */
.stage-head .stage-cam-note { font-size: 12px; }
/* 「新しいレイヤー」とその右の ▼（レイヤーの切り替え）は、全画面で映像の上に浮かせている間と、右のレイヤーの一覧をしまっている
   間だけ（一覧を出している間は、そちらにある） */
#pane-stage:not(.layers-collapsed) .annot-tools:not(.floating) > :is(.annot-new-layer, .annot-layers) { display: none; }
/* レイヤーの一覧をしまうと、映像を横いっぱいに出す。三角は、一覧の出てくる向き（狭い画面では一覧は映像の下） */
#pane-stage.layers-collapsed:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
#pane-stage.layers-collapsed .stage-aside { display: none; }
.layer-panel-btn { min-width: 30px; font-size: 11px; }
.layer-panel-btn::before { content: "◀"; }
.layer-panel-btn[aria-expanded="true"]::before { content: "▶"; }
.annot-tools > .annot-layer-btn { min-width: 28px; padding: 4px 6px; font-size: 11px; }
.annot-layers { min-width: 220px; max-width: min(360px, 80vw); max-height: 50vh; overflow-y: auto; gap: 2px; padding: 6px; }
.annot-layer-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 8px; text-align: left; border-color: transparent; }
.annot-layer-item > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.annot-layer-item:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
/* 特別なレイヤー「参加者一覧」（押すと、参加者の人数分に区切ったレイヤーを作る）。ふつうのレイヤーと見分けるよう点線で囲む */
.people-layer {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1px dashed var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
.people-layer-name { flex: 1; min-width: 0; font-weight: 600; }
.annot-layer-item.people-item { border-bottom: 1px dashed var(--line); border-radius: 0; margin-bottom: 2px; }
.host-stage { flex: 1 1 auto; min-height: 200px; border-radius: 4px; }
.stage-aside { min-width: 0; min-height: 0; overflow-y: auto; }

/* 画面のタブ（「画面と書き込み」のいちばん上。ネイティブのホストアプリの Windows 版だけ。web/host.js の「画面のタブ」）。
   ブラウザのタブと同じく、選んでいるタブは枠で囲み、下の線を切って下とつなげる（下の線は並びの影で引き、選んでいるタブの
   背景がその上を覆う）。多ければ横にスクロールする（スクロールバーは出さず、ホイールでも動く）。右の＋で開く */
.stage-tabbar {
  position: relative; display: flex; align-items: flex-end; flex: none; min-width: 0; height: 32px;
  box-shadow: inset 0 -1px 0 var(--line);
}
.stage-tabs {
  position: relative; display: flex; align-items: flex-end; flex: 0 1 auto; min-width: 0; height: 100%;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
}
.stage-tabs::-webkit-scrollbar { display: none; }
/* 幅は 200px（並びに収まらなければ 92px まで縮め、それでも収まらなければスクロール。flex-basis でなく width にするのは、
   並びの幅（内容の幅）にも 200px を使わせるため） */
.stage-tab {
  position: relative; flex: 0 1 auto; width: 200px; min-width: 92px; height: 30px;
  display: flex; align-items: center; gap: 6px; padding: 0 4px 0 10px;
  border: 1px solid transparent; border-bottom: 0; border-radius: 7px 7px 0 0;
  color: var(--muted); font-size: 13px; cursor: default; user-select: none; -webkit-user-select: none;
}
/* 選んでいないタブの間の縦の線 */
.stage-tab:not([aria-selected="true"]) + .stage-tab:not([aria-selected="true"])::before {
  content: ""; position: absolute; left: -2px; top: 8px; bottom: 8px; width: 1px; background: var(--line);
}
.stage-tab:hover:not([aria-selected="true"]) { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.stage-tab[aria-selected="true"] {
  color: var(--text); background: var(--panel); border-color: var(--line); box-shadow: inset 0 2px 0 var(--accent);
}
.stage-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* 参加者の画面共有・大きく出したカメラ（閉じられない） */
.stage-tab.peer { color: var(--accent); }
.stage-tab.peer[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
/* ウィンドウが閉じたタブ */
.stage-tab.missing .stage-tab-title { font-style: italic; opacity: .7; }
.stage-tab-icon { position: relative; flex: none; display: grid; place-items: center; width: 16px; height: 16px; }
.stage-tab-icon img { display: block; width: 16px; height: 16px; object-fit: contain; }
.stage-tab-icon:not(.has-img)::before, .stage-tab-icon.loading::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
/* 読み込んでいる間は、アイコンの代わりに回る輪 */
.stage-tab-icon.loading img { display: none; }
.stage-tab-icon.loading::before {
  box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; background: none; -webkit-mask: none; mask: none;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: var(--accent);
  animation: stage-tab-spin .8s linear infinite;
}
@keyframes stage-tab-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .stage-tab-icon.loading::before { animation-duration: 2.4s; } }
.stage-tab-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 配信しているタブの赤い点 */
.stage-tab-live {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: #d93025;
  box-shadow: 0 0 0 2px color-mix(in srgb, #d93025 28%, transparent);
}
/* 音を出しているタブのスピーカー（押すと消音・戻す）と、閉じる × */
.stage-tab-btn {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0;
  border: 0; border-radius: 4px; background: transparent; color: inherit;
}
.stage-tab-btn:hover { background: color-mix(in srgb, var(--text) 14%, transparent); }
.stage-tab-btn svg { width: 14px; height: 14px; display: block; }
.stage-tab-audio.muted { color: var(--danger); }
.stage-tab-close { opacity: .65; }
.stage-tab[aria-selected="true"] .stage-tab-close, .stage-tab-close:hover { opacity: 1; }
.stage-tab-add {
  flex: none; display: grid; place-items: center; width: 28px; height: 26px; margin: 0 2px 3px 4px; padding: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted);
}
.stage-tab-add::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.stage-tab-add:hover, .stage-tab-add[aria-expanded="true"] { color: var(--text); background: color-mix(in srgb, var(--text) 10%, transparent); }
.stage-tab-add:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* タブの知らせ（開けなかった・切り替えられなかった、など。しばらくだけ） */
.stage-tab-note {
  flex: 0 1 auto; min-width: 4em; max-width: 45%; align-self: center; margin-left: 6px; padding: 1px 8px; border-radius: 4px;
  background: var(--warn-bg); color: var(--warn-text); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ＋のメニュー（ウェブサイト・ホワイトボード・モニター・ウィンドウ。開いているものには ✓） */
.stage-tab-menu {
  position: absolute; top: calc(100% + 2px); left: 0; z-index: 25; display: flex; flex-direction: column;
  width: max-content; min-width: 260px; max-width: min(440px, 92vw); max-height: min(70vh, 560px); overflow-y: auto; padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgb(0 0 0 / 30%);
}
.stage-menu-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%;
  padding: 3px 8px; border: 0; border-radius: 4px; background: transparent; text-align: left;
}
.stage-menu-item:focus { outline: none; }
.stage-menu-item:not(:disabled):is(:hover, :focus) { background: var(--accent); color: var(--accent-text); }
.stage-menu-item:disabled { opacity: .45; }
.stage-menu-icon {
  justify-self: center; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.stage-menu-thumb { display: block; width: 40px; height: 23px; object-fit: contain; border-radius: 3px; background: var(--video-bg); }
.stage-menu-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.stage-menu-label, .stage-menu-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-menu-sub { color: var(--muted); font-size: 11.5px; }
.stage-menu-mark { color: var(--muted); font-size: 12px; white-space: nowrap; }
.stage-menu-item:not(:disabled):is(:hover, :focus) :is(.stage-menu-sub, .stage-menu-mark) { color: inherit; opacity: .85; }
.stage-menu-head { padding: 6px 8px 2px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.stage-menu-sep { height: 1px; margin: 4px 2px; background: var(--line); }
/* ウェブのタブの、戻る・進む・読み込み直す・アドレスの欄（題名の代わり）。アドレスの欄が、空いている幅を使う */
.web-nav { display: flex; align-items: center; gap: 2px; flex: 4 1 0; min-width: 12em; }
.web-nav > .tb-btn { height: 30px; }
.web-url { flex: 1; min-width: 6em; height: 30px; margin-left: 4px; padding: 0 12px; border-radius: 15px; font-size: 13px; }
.web-url:focus { outline: 2px solid var(--accent); outline-offset: -1px; background: var(--panel); }
.web-nav > .web-zoom { height: 24px; margin-left: 2px; padding: 0 8px; border-radius: 12px; font-size: 12px; }
/* 配信の大きさを欄に合わせる（ページを配信している間に、欄の大きさが変わったときだけ） */
.web-nav > .web-refit {
  flex: none; height: 26px; margin-left: 4px; padding: 0 10px; border-radius: 13px; font-size: 12px; white-space: nowrap;
  background: var(--warn-bg); color: var(--warn-text); border-color: transparent;
}
/* 全画面の間は、同じボタンを浮かせたツールバーに出す（host.js の webRefitTool。全画面でない間は出さない） */
.annot-tools > .annot-web-refit {
  white-space: nowrap; background: var(--warn-bg); color: var(--warn-text); border-color: transparent;
}
.annot-tools:not(.floating) > .annot-web-refit { display: none; }
/* ウェブのタブの場所（アプリが、この上にページの窓を重ねる）。窓を出せない間は、黒地に理由を出す。配信中に窓をよけている
   間は見えなくし（behind）、下の、受けた配信の映像と書き込みを見せる。全画面の間は、浮かせたツールバーの下から（host.js） */
.web-view {
  position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 16px;
  background: var(--video-bg); color: #9aa1ac; font-size: 13px; text-align: center;
}
.web-view.behind { visibility: hidden; }
.web-view-note { margin: 0; max-width: 32em; }
/* ほかのタブのレイヤー（画面のタブを使っている間。レイヤーの一覧の下で、たたんでおく） */
.other-layers summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
.other-layers[open] summary { margin-bottom: 2px; }
.other-layer-list .other-layer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.other-layer-list .other-layer-tab {
  flex: 0 1 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;
}

/* 統計・アカウント */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 10px; align-items: start; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 10px; align-items: start; }
#encStats:empty::before { content: "画面共有をしていません"; color: var(--muted); }
.log-pre {
  margin: 0; max-height: 60vh; overflow-y: auto;
  font: 12px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--muted);
}

/* 新しい会議を始める窓 */
.form-dialog {
  width: min(92vw, 420px); padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--text);
}
.form-dialog::backdrop { background: rgb(0 0 0 / 50%); }
.form-dialog input { width: 100%; }

/* 映像のセット（アプリ。host.js の「映像のセット」）。セットで配信できるアプリでは、今までの映像の欄を隠す */
.video-sets .legacy-video { display: none !important; }
.set-box { display: flex; flex-direction: column; gap: 6px; }
.set-row select { max-width: 14em; }
.set-rows { margin: 0; padding-left: 1.6em; font-size: 13px; }
.set-rows li { padding: 2px 0; overflow-wrap: anywhere; }
.set-rows li.base { list-style-type: "◉ "; }
.set-rows .row-state { color: var(--muted); }
.set-rows .row-state.on { color: var(--ok); }
.set-rows .row-state.bad { color: var(--danger); }
.set-dialog { width: min(96vw, 940px); max-height: 92vh; overflow-y: auto; }
.set-dialog input { width: auto; }
.set-head { flex-wrap: wrap; }
.set-head input { width: 12em; }
.set-edit-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.set-edit-rows li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; }
.set-edit-rows li.off { opacity: 0.55; }
.set-edit-rows .base-mark { width: 1.4em; text-align: center; color: var(--accent); }
.set-edit-rows input.cond { flex: 1 1 12em; min-width: 8em; }
.set-edit-rows input.cond.bad { border-color: var(--danger); outline-color: var(--danger); }
.set-edit-rows .row-note { flex-basis: 100%; font-size: 12px; color: var(--muted); padding-left: 2em; }
.set-edit-rows .row-note.bad { color: var(--danger); }
.set-errors { margin: 0; padding-left: 1.2em; color: var(--danger); font-size: 13px; }
.set-help { margin: 4px 0; padding-left: 1.2em; }
@media (max-width: 600px) {
  .set-edit-rows li select { flex: 1 1 40%; }
}

/* 右の列: 上にカメラ・待機室・画面共有・参加者（長ければここだけをスクロール）、下にチャット。チャットはメッセージの分だけの
   高さで、増えたら列の 60% まで上へ伸びる（視聴者の画面の右の欄と同じ） */
.host-side { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--panel); }
.host-side-info { flex: 1 1 0; min-height: 100px; overflow-y: auto; }
.side-box { padding: 6px 10px 8px; border-bottom: 1px solid var(--line); }
.side-box > * + * { margin-top: 4px; }
/* 待機室（人がいるときだけ出る）は橙で目立たせる */
.side-box.attention { background: color-mix(in srgb, #ff9500 10%, var(--panel)); box-shadow: inset 3px 0 0 #ff9500; }
#participantsHead:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 会議の文字起こし（ホストアプリ。話している間の仮の文字は薄く出す） */
.transcript-log { max-height: 14em; overflow-y: auto; font-size: 13px; line-height: 1.5; }
.transcript-line { overflow-wrap: anywhere; }
.transcript-line + .transcript-line { margin-top: 2px; }
.transcript-time { color: var(--muted); font-size: 11px; margin-right: 4px; }
.transcript-who { font-weight: 600; margin-right: 4px; }
.transcript-line.partial .transcript-text { color: var(--muted); }
#appTranscribeLabel.unavailable { color: var(--muted); }
.host-side .chat { flex: 0 1 auto; min-height: 0; max-height: 60%; padding: 6px 10px 8px; border-top: 1px solid var(--line); }
:where(#main) .host-side .chat h2 { margin-bottom: 2px; }
.host-side .chat .log { flex: 0 1 auto; min-height: 72px; }
.host-side .chat form { flex: none; }

@media (max-width: 1100px) {
  #main:not([hidden]) { display: block; height: auto; }
  .menubar { position: sticky; top: 0; z-index: 30; }
  #main > .host-layout { display: block; }
  .host-main { overflow: visible; }
  #pane-stream:not([hidden]), .stream-grid { height: auto; }
  .stream-grid { grid-template-columns: minmax(0, 1fr); }
  .sources-group .sources { max-height: 360px; }
  .settings { overflow: visible; }
  #pane-stage:not([hidden]) { height: auto; grid-template-columns: minmax(0, 1fr); }
  .host-stage { flex: none; aspect-ratio: 16 / 9; max-height: 75vh; }
  .layer-panel-btn::before { content: "▼"; }
  .layer-panel-btn[aria-expanded="true"]::before { content: "▲"; }
  .host-side { border-left: 0; border-top: 1px solid var(--line); }
  .host-side-info { overflow: visible; }
  .host-side .chat { height: 360px; max-height: none; }
  .host-side .chat .log { flex: 1 1 auto; }
}

/* 視聴者。画面の上のバーが折り返しても、映像とチャットが画面の高さに収まるようにする。
   高さは、見えている範囲（dvh）に合わせる。iPad などの Safari の 100vh は、ツールバーを除いた高さより大きく、映像の
   下の端が画面の外に出て見切れていた（dvh の無い古いブラウザは 100vh のまま） */
#room { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
/* 上のバーは 1 行に収める。タブレットの横置き（幅 1080 など）では、ペン・消しゴムが出ると最後のボタンだけが 2 行目に
   回り、映像の高さを削っていた。狭いときは題名を出さず（ブラウザのタブに出ている）、ボタンを少し小さくする */
#room .topbar { gap: 8px; padding: 8px 12px; }
@media (max-width: 1280px) {
  #room .topbar h1 { display: none; }
  #room .topbar button, #room .topbar select { padding: 5px 9px; font-size: 13px; }
}
.viewer {
  display: grid;
  grid-template-columns: 1fr 320px;
  flex: 1;
  min-height: 0;
}
.stage { position: relative; background: var(--video-bg); min-height: 0; }
.stage video { width: 100%; height: 100%; object-fit: contain; display: block; }
.stage .overlay {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; text-align: center; padding: 16px;
}
.side { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-left: 1px solid var(--line); background: var(--panel); min-height: 0; overflow: hidden; }
/* 右の欄（チャットなど）を閉じて、映像を広く使う（上のバーの「チャットを隠す」） */
.viewer.side-hidden { grid-template-columns: 1fr; }
.viewer.side-hidden .side { display: none; }
/* 映像のズームとパン（web/zoom.js）。映像と書き込みを入れた .zoom-box を拡大して動かす */
.stage.zoomable { overflow: hidden; touch-action: none; }
.zoom-box { position: absolute; inset: 0; transform-origin: 0 0; }
/* 止まった画面の高画質の拡縮（web/stillscale.js）。映像の上、書き込みの下に重ねる */
.still-scale { position: absolute; pointer-events: none; }
/* 映像を作り直す間に出す、前の映像の最後のコマ（join.js の holdLastFrame）。映像と同じく、枠に縦横比を保って収める */
.hold-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.still-opt { display: flex; align-items: center; gap: 6px; margin: 6px 0; font-size: 12px; }
.still-opt select { flex: 1; min-width: 0; font-size: 12px; }
.stage.zoomed { cursor: grab; }
.stage.zoomed.panning { cursor: grabbing; }
.zoom-reset {
  position: absolute; right: 10px; bottom: 10px; z-index: 5;
  background: rgb(0 0 0 / 60%); color: #fff; border-color: rgb(255 255 255 / 35%); font-size: 12px;
}
/* 全画面の間の浮かせた並びの、スピーカー・マイク・カメラのボタン（視聴者の画面。上のバーのボタンの写し。web/join.js） */
.annot-full-media { display: inline-flex; align-items: center; gap: 4px; }
.annot-full-media > button { height: 30px; }
/* 全画面の間に届いたチャット（視聴者の画面。映像の右下のボタンの上）。ホストのアプリの重ねるチャットと同じく、白い文字を黒で
   縁取る（どんな画面の上でも読める）。押せない（下の映像・書き込みの操作を邪魔しない） */
.fs-chat {
  position: absolute; right: 14px; bottom: 60px; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: min(46%, 640px);
}
.stage:not(:fullscreen) .fs-chat { display: none; }
.fs-chat-item {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  text-align: right; overflow-wrap: anywhere; white-space: pre-wrap;
  font-size: clamp(15px, 1.5vw, 24px); font-weight: 700; line-height: 1.35; color: #fff;
  text-shadow: -1.5px -1.5px 0 #000, 0 -1.5px 0 #000, 1.5px -1.5px 0 #000, 1.5px 0 0 #000, 1.5px 1.5px 0 #000, 0 1.5px 0 #000,
    -1.5px 1.5px 0 #000, -1.5px 0 0 #000, 0 0 4px #000;
  transition: opacity .6s;
}
.fs-chat-item.gone { opacity: 0; }
.fs-chat-who { color: hsl(var(--who-hue, 200) 90% 72%); margin-right: .5em; }
.fs-chat-who::after { content: ":"; }
/* 映像の右下に重ねるボタン（視聴者の画面）: 拡大しているときの「全体に戻す」、等倍、全画面を横に並べる */
.stage-corner { position: absolute; right: 10px; bottom: 10px; z-index: 6; display: flex; gap: 8px; align-items: stretch; }
.stage-corner .zoom-reset { position: static; }
.stage-full, .stage-actual { background: rgb(0 0 0 / 60%); color: #fff; border-color: rgb(255 255 255 / 35%); }
.stage-full { padding: 7px; }
.stage-actual { padding: 0 10px; font-size: 13px; }
/* 字幕（ホストの文字起こし。映像の下の中央に直近の 2 行。押せるものを邪魔しない。話している間の仮の文字は薄く） */
.caption-band { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); z-index: 5; pointer-events: none;
  width: max-content; max-width: min(90%, 1100px); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.caption-line { background: rgb(0 0 0 / 72%); color: #fff; padding: 2px 10px; border-radius: 4px; font-size: clamp(14px, 2.2vw, 22px);
  line-height: 1.45; text-align: center; overflow-wrap: anywhere; }
.caption-line.partial { color: rgb(255 255 255 / 70%); }
.caption-who { color: #9fd3ff; font-weight: 600; margin-right: 0.5em; }
.caption-box .transcript-log { margin-top: 4px; }
.stage-actual[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
/* ホストが画面共有を許可したときの知らせ（視聴者の画面の、映像の上の中央）。押すと画面の選択を開く */
.share-offer {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 8;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: calc(100% - 24px);
  padding: 10px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--accent);
  box-shadow: 0 4px 18px rgb(0 0 0 / 45%); font-size: 14px;
}
.share-offer-text { font-weight: 600; }
/* 知らせの下に添える小さな文（背景ぼかしが重すぎたときの重さの内訳） */
.share-offer .offer-detail { flex-basis: 100%; text-align: center; font-size: 11px; color: var(--muted); }
/* 映像の左下に重ねる知らせ（視聴者の画面の、画質を自動で切り替えた理由）。コピーと × で閉じるボタン付き */
.note-popup {
  position: absolute; left: 10px; bottom: 10px; z-index: 7; max-width: min(480px, calc(100% - 80px));
  display: flex; align-items: flex-start; gap: 6px; padding: 8px 8px 8px 12px; border-radius: 8px;
  background: var(--warn-bg); color: var(--warn-text); border: 1px solid color-mix(in srgb, var(--warn-text) 35%, transparent);
  box-shadow: 0 4px 14px rgb(0 0 0 / 40%); font-size: 13px; line-height: 1.5;
}
.note-popup-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.note-popup-btn { flex: none; padding: 3px 6px; border: 0; background: transparent; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.note-popup-btn:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
.note-popup-btn svg { width: 16px; height: 16px; }
.note-popup-action { font-size: 13px; padding: 3px 8px; border: 1px solid color-mix(in srgb, currentColor 45%, transparent); border-radius: 4px; }
/* 右の欄は、上がお知らせ・参加者・受信の統計、下がチャット。チャットはメッセージの分だけの高さにし（無いうちは小さく）、
   残りはすべて上の欄に使う。メッセージが増えたらチャットが上へ伸び、欄の高さの 60% で止まって、その先はチャットの中を
   スクロールする（上の欄は縮み、長ければその中をスクロール）。チャットの送る欄はいつも欄の下の端に出す */
.side-info { flex: 1 1 0; min-height: 80px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.side .chat { flex: 0 1 auto; min-height: 0; max-height: 60%; }
.side .chat .log { flex: 0 1 auto; min-height: 72px; }
.side .chat form { flex: none; }
/* 低い画面（スマートフォンの横置き）では、上の欄が縮み、参加者の一覧が見えなくなりやすい。上の欄を少なくとも 60px 残す
   （開いたときは、開いた所まで欄をスクロールする。join.js） */
@media (max-height: 500px) and (min-width: 761px) {
  .side-info { min-height: 60px; }
  .side .chat .log { min-height: 48px; }
}

.center { max-width: 420px; margin: 12vh auto; padding: 0 16px; }

/* アイコンだけのボタン（視聴者の発言） */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; }
.icon-btn svg { width: 18px; height: 18px; display: block; }
.icon-btn .icon-x { stroke: var(--danger); } /* 消音中の × */
/* 画面メモの結果の吹き出し（ボタンの真下。common.js の memoTip） */
.memo-tip {
  position: fixed; z-index: 1000; padding: 5px 10px; border-radius: 6px; white-space: nowrap; pointer-events: none;
  font-size: 13px; background: var(--panel); border: 1px solid var(--accent); box-shadow: 0 2px 10px rgb(0 0 0 / 35%);
}
.memo-tip.failed { border-color: var(--danger); }

/* 入った直後に、発言のボタンの下に出す吹き出し（位置は join.js がボタンに合わせる）。発言の段落と「声をクリアに」の段落 */
.mic-tip {
  position: fixed; z-index: 50; max-width: min(360px, calc(100vw - 16px));
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 10px 10px 14px;
  background: var(--accent); color: var(--accent-text); border-radius: 10px;
  box-shadow: 0 4px 16px rgb(0 0 0 / 35%); font-size: 14px; line-height: 1.5;
}
/* 吹き出しのとがった所（ボタンを指す。左右の位置は --arrow-x） */
.mic-tip::before {
  content: ""; position: absolute; top: -7px; left: var(--arrow-x, 50%); margin-left: -7px;
  border: 7px solid transparent; border-top: 0; border-bottom-color: var(--accent);
}
.mic-tip-close {
  flex: none; padding: 0 6px; border: 0; background: transparent; color: inherit;
  font-size: 18px; line-height: 1.2; cursor: pointer;
}
.mic-tip p { margin: 0; }
.mic-tip p + p { margin-top: 6px; }

/* ブラウザが音声の再生を止めているとき（視聴者の画面の全体に出す。押すと鳴らし直す） */
.audio-blocked {
  position: fixed; inset: 0; z-index: 100; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; border: 0; border-radius: 0; background: rgb(0 0 0 / 72%); color: #fff; text-align: center;
}
.audio-blocked strong { font-size: 24px; }
.audio-blocked span { font-size: 16px; }

@media (max-width: 760px) {
  #room { height: auto; }
  .viewer { grid-template-columns: 1fr; }
  .stage { aspect-ratio: 16 / 9; }
  /* 狭い画面はページ全体がスクロールするので、拡大していない間は、映像の上の縦のスワイプをスクロールに使う */
  .stage.zoomable:not(.zoomed) { touch-action: pan-y; }
  .side { border-left: 0; overflow: visible; }
  .side-info { flex: none; min-height: 0; overflow: visible; }
  .side .chat { height: 320px; flex: none; max-height: none; }
  .side .chat .log { flex: 1 1 auto; }
  /* 狭い画面はページ全体がスクロールするので、送る欄は画面の下の端に固定する（スクロールしても隠れない） */
  #room { padding-bottom: 64px; }
  .side .chat form {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--panel); border-top: 1px solid var(--line);
  }
}

/* ホストアプリのマウスカーソル（web/cursor.js）。映像の中身の上に重ね、はみ出した分は切る。書き込みより下 */
.host-cursor { position: absolute; left: 0; top: 0; overflow: hidden; pointer-events: none; }
.host-cursor img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; }

/* 画面への書き込み（web/annot.js）。映像の中身の上に重ねる。線が無ければキャンバスは隠れている */
.annot { position: absolute; left: 0; top: 0; pointer-events: none; }
.annot-ink, .annot-cursors, .annot-input { position: absolute; inset: 0; width: 100%; height: 100%; }
.annot-cursors { overflow: hidden; }
.annot-input { pointer-events: auto; touch-action: none; cursor: crosshair; }
/* 書き込みの画像を動かす枠（ホストの画面だけ。web/annot.js の renderHandles）。ふだんは見えず、上に来ると白い点線の枠と、右下の
   大きさのつまみを出す。画像を消す × は別の層（ペン・消しゴムの入力の層の上）で、いつも画像の右上に出す（ペン・スタンプの間は
   隠す）。つまみと × は拡大しても同じ大きさ */
.annot-handles, .annot-dels { position: absolute; inset: 0; }
.annot-dels[hidden] { display: none; }
.annot-img { position: absolute; pointer-events: auto; touch-action: none; cursor: move; box-sizing: border-box; border: 2px dashed transparent; }
.annot-img:hover, .annot-img.dragging { border-color: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 60%), inset 0 0 0 1px rgb(0 0 0 / 60%); }
.annot-img-size {
  position: absolute; opacity: 0; right: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 3px; cursor: nwse-resize;
  background: #5b8cff; border: 2px solid #fff; transform: scale(var(--annot-unzoom, 1)); transform-origin: bottom right;
}
.annot-img:hover .annot-img-size, .annot-img.dragging .annot-img-size { opacity: 1; }
.annot-img-del {
  position: absolute; pointer-events: auto; width: 22px; height: 22px; padding: 0; border-radius: 50%; line-height: 18px; font-size: 14px;
  background: #e5484d; color: #fff; border: 2px solid #fff; cursor: pointer; box-shadow: 0 1px 4px rgb(0 0 0 / 50%);
  transform: translate(-50%, -50%) scale(var(--annot-unzoom, 1));
}
.annot-input.stamp { cursor: copy; }
.annot-input.eraser {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='11' fill='rgba(255,255,255,0.3)' stroke='black' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") 12 12, cell;
}
/* ほかの人の位置と名札 */
/* 位置は annot.js が translate で置く。映像をズームしている間も名札の大きさが変わらないよう、倍率の逆に縮める */
.annot-cursor {
  position: absolute; left: 0; top: 0; will-change: translate; --annot-color: #ff3b30;
  scale: var(--annot-unzoom, 1); transform-origin: 0 0;
}
.annot-cursor-dot {
  position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--annot-color); box-shadow: 0 0 0 2px rgb(0 0 0 / 55%);
}
.annot-cursor.eraser .annot-cursor-dot {
  left: -12px; top: -12px; width: 24px; height: 24px;
  background: rgb(255 255 255 / 25%); border: 2px solid var(--annot-color);
}
.annot-cursor-name {
  position: absolute; left: 10px; top: 8px; max-width: 16em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 1px 7px; border-radius: 4px; font-size: 12px; line-height: 1.5;
  background: var(--annot-color); color: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 40%);
}
.annot-cursor.light .annot-cursor-name { color: #111; }
/* ほかの人が置いている途中のスタンプ（押したまま動かしている間。名札と一緒に動き、離すと決まったスタンプに替わる）。
   大きさは決まったスタンプと同じ（--stamp-px は映像の上の大きさ。札は倍率の逆に縮めてあるので、倍率を掛け戻す） */
.annot-cursor-stamp {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: none; user-select: none;
  font: calc(var(--stamp-px, 40px) / var(--annot-unzoom, 1)) / 1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}
.annot-cursor:not(.stamping) .annot-cursor-stamp, .annot-cursor.stamping .annot-cursor-dot { display: none; }
.annot-cursor.stamping .annot-cursor-name { left: calc(var(--stamp-px, 40px) / var(--annot-unzoom, 1) / 2 + 4px); top: -0.8em; }
.annot-cursor.stamping.left .annot-cursor-name { left: auto; right: calc(var(--stamp-px, 40px) / var(--annot-unzoom, 1) / 2 + 4px); }
.annot-cursor.left .annot-cursor-name { left: auto; right: 10px; }
.annot-cursor.up .annot-cursor-name { top: auto; bottom: 8px; }
/* ペン・消しゴムなどのボタン（画面の上のバー。全画面の間は映像の上に浮かせる） */
.annot-tools { position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.annot-tools:empty { display: none; }
.annot-color { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; }
.annot-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); }
/* 色・太さ・自分の線の消去のメニュー */
.annot-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 10;
  display: grid; gap: 8px; padding: 10px; width: max-content;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 14px rgb(0 0 0 / 35%);
}
.annot-row { display: flex; gap: 6px; }
.annot-menu .swatch { width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--line); }
.annot-menu .annot-width { width: 50px; height: 30px; padding: 0; display: grid; place-items: center; }
.annot-menu .annot-width span { display: block; width: 30px; border-radius: 3px; background: currentColor; }
/* 絵文字のスタンプの一覧（先頭の 3 つは OK・いいね・よくない） */
.annot-stamps { grid-template-columns: repeat(6, 36px); gap: 4px; }
.annot-stamp { width: 36px; height: 36px; padding: 0; font-size: 22px; line-height: 1; display: grid; place-items: center; }
.annot-stamp:nth-child(-n+3) { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.annot-stamp:nth-child(4) { grid-column-start: 1; } /* 先頭の 3 つだけで 1 行目にする */
.annot-stamp-btn { min-width: 34px; font-size: 16px; line-height: 1; }
.annot-menu [aria-pressed="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 全画面の間の、ツールバーを動かすつまみ（並びの左端） */
.annot-grip {
  display: inline-flex; align-items: center; align-self: stretch; padding: 0 4px; margin-right: -2px;
  color: var(--muted); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none;
}
.annot-grip svg { width: 10px; height: 16px; fill: currentColor; }
.annot-grip:hover, .annot-grip.dragging { color: var(--text, currentColor); }
.annot-grip.dragging { cursor: grabbing; }
.annot-full-group:not(:has(> :not([hidden]))) { display: none; } /* 中身が出ていなければ、間も空けない */
.annot-full-group { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; white-space: nowrap; }
/* 全画面の間に届いたメッセージの「💬 新着 N」（押すと全画面を解除） */
.annot-new-msg {
  background: #ff9500; border-color: #ff9500; color: #1c1c1e; font-weight: 700; white-space: nowrap;
}
.annot-new-msg.pulse { animation: annot-new-msg 0.9s ease-out 3; }
@keyframes annot-new-msg {
  0% { box-shadow: 0 0 0 0 rgb(255 149 0 / 75%); }
  100% { box-shadow: 0 0 0 10px rgb(255 149 0 / 0%); }
}
@media (prefers-reduced-motion: reduce) { .annot-new-msg.pulse { animation: none; } }
.annot-tools.floating {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 2;
  max-width: calc(100% - 20px); padding: 6px 8px; border-radius: 8px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: 0 2px 10px rgb(0 0 0 / 35%);
}

/* 画面と書き込み（ホストの画面）のレイヤーの一覧 */
.layer-list li { flex-wrap: nowrap; gap: 4px; }
/* レイヤーの行のボタンはアイコンだけ（説明は title） */
.layer-list .layer-btn { flex: none; padding: 4px; }
.layer-list .layer-btn svg { width: 16px; height: 16px; }
.layer-list .layer-btn.danger { color: var(--danger); }
.layer-list .layer-count { flex: none; min-width: 1.5em; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; }
.sub-option { margin-left: 1.5em; }
.layer-list li.active { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.layer-list .layer-name { flex: 1; min-width: 4em; }

/* インストールしたアプリ（PWA）で、タイトルバーを隠したとき（Window Controls Overlay。Chrome・Edge）。
   画面の上のバー（ホストの画面はメインメニュー）をタイトルバーの代わりにする: つかんでウィンドウを動かせるようにし、
   ウィンドウのボタン（Windows は右上、macOS は左上。env(titlebar-area-*) がその残りの範囲）の所を空ける */
@media (display-mode: window-controls-overlay) {
  .topbar, .menubar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: env(titlebar-area-height, 33px);
    padding-left: calc(env(titlebar-area-x, 0px) + 12px);
    padding-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 12px);
    -webkit-app-region: drag;
    app-region: drag;
  }
  .topbar button, .topbar select, .topbar input, .topbar a, .topbar label, .annot-tools, .btn-group,
  .menubar button, .menu-pop {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }
  /* 上のバーが無い画面（参加の前・ログイン）も、上の端をつかんで動かせるようにする */
  body:has(> #entry:not([hidden]))::before,
  body:has(> #login:not([hidden]))::before {
    content: "";
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: env(titlebar-area-height, 33px);
    -webkit-app-region: drag;
    app-region: drag;
  }
}

/* ホストへの警告（自宅の IP が変わった、DNS が古い、など）。見逃さないよう、目立たせる */
.alerts { margin: 0 1rem; }
.alerts .alert {
  display: flex; gap: .75rem; align-items: center;
  margin: .5rem 0; padding: .75rem 1rem;
  background: #b00020; color: #fff; font-weight: bold; border-radius: 6px;
}
.alerts .alert button { flex: none; }

/* ホストのログイン（パスキー）。パスキーのボタンを大きく、パスワードは畳んで下に */
.passkey-btn { padding: 12px 16px; font-size: 16px; }
#login details summary { cursor: pointer; color: var(--muted); }
#login details[open] summary { margin-bottom: 8px; }
/* パスキーの登録を勧める知らせ */
.notice {
  flex-wrap: wrap; padding: 10px 12px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--accent);
}

/* カメラの映像の小窓（視聴者の画面の右の欄と、ホストの画面の右の列。web/common.js の syncCameraTiles） */
.camera-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.camera-tile { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; border: 2px solid transparent; }
.camera-tile.speaking { border-color: var(--ok); }
/* 画面共有の領域に大きく出しているカメラ（ホストの画面では、小窓を押して切り替える） */
.camera-tile.spotlight { box-shadow: 0 0 0 2px var(--accent); }
#hostCameraTiles .camera-tile { cursor: pointer; }
.camera-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.camera-tile.self:not(.rear) video { transform: scaleX(-1); } /* 自分の映像は鏡のように（背面のカメラは見たままの向き） */
/* カメラの一覧（参加者の画面。PC などで、カメラの切り替えのボタンの下に出す。今のカメラに ✓） */
.camera-menu {
  position: fixed; z-index: 40; display: flex; flex-direction: column;
  width: max-content; min-width: 200px; max-width: min(420px, calc(100vw - 16px)); padding: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px rgb(0 0 0 / 30%);
}
.camera-menu[hidden] { display: none; }
.camera-menu-head { padding: 4px 8px 2px; color: var(--muted); font-size: 11.5px; font-weight: 600; }
.camera-menu-item {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 6px; width: 100%;
  padding: 5px 8px; border: 0; border-radius: 4px; background: transparent; text-align: left;
}
.camera-menu-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.camera-menu-item:focus { outline: none; }
.camera-menu-item:not(:disabled):is(:hover, :focus) { background: var(--accent); color: var(--accent-text); }
.camera-name {
  position: absolute; left: 4px; bottom: 4px; max-width: calc(100% - 8px); padding: 1px 6px; border-radius: 4px;
  background: rgb(0 0 0 / 60%); color: #fff; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}