/* 会議の画面の見た目。決まりの出どころは design/sheet.html。
   骨組みは Daily Prebuilt（暗い舞台・相手が大きい・操作は下の板1枚）、質感と動きは Mac の FaceTime に寄せる
   （操作の板と小窓は映像の上に浮く半透明の素材／押した瞬間に応える／動きは行き過ぎずに収まる）。 */
:root {
  --stage: #0e0f12;                    /* 舞台（画面の地） */
  --tile: #1c1e24;                     /* 映像の枠の地 */
  --ink: #f5f5f7;                      /* 文字・決めるボタン */
  --sub: #a1a1a6;                      /* 控えめな文字 */
  --hair: rgba(255, 255, 255, .1);     /* 素材のふちに当たる光 */
  --stop: #ff453a;                     /* 切っている・退出（色が付くのはこれだけ） */
  --material: rgba(44, 46, 54, .62);   /* 浮く板の素材 */
  --settle: cubic-bezier(.22, 1, .36, 1);   /* 行き過ぎずに収まる動き */
  --r-tile: 18px;
  --r-ui: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
/* スマホで2回続けて触っても拡大しない（会議の画面は拡大して読むものが無く、ボタンの連打で画面が寄ってしまう） */
html { touch-action: manipulation; }
body {
  background: var(--stage); color: var(--ink); font-size: 16px; line-height: 1.6;
  -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }

/* 浮く板の素材（操作の板・知らせ・名前の札） */
.tray, #callNotice, .tile .name {
  background: var(--material);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 0 0 .5px var(--hair), 0 8px 32px rgba(0, 0, 0, .28);
}

/* 操作の板: アイコンの下に短い札。切っているものはアイコンの地が赤 */
.tray { display: inline-flex; gap: 2px; padding: 10px 12px 8px; border-radius: 24px; }
.tray button {
  all: unset; box-sizing: border-box; display: grid; justify-items: center; gap: 5px; min-width: 64px; padding: 0 4px;
  color: var(--ink); font-size: 11px; line-height: 1.4; letter-spacing: .01em; cursor: pointer; white-space: nowrap; user-select: none; -webkit-user-select: none;
}
.tray .ic {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .12);
  transition: scale .28s var(--settle), background-color .2s ease, color .2s ease;
}
.tray svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tray button:hover .ic { background: rgba(255, 255, 255, .2); }
.tray button:active .ic { scale: .9; transition-duration: .08s; }          /* 押した瞬間に応える */
.tray button:focus-visible .ic { outline: 2px solid var(--ink); outline-offset: 2px; }
.tray .off .ic, .tray .leave .ic { background: var(--stop); }
.tray .off:hover .ic, .tray .leave:hover .ic { background: #ff6259; }
.tray .on .ic { background: var(--ink); color: var(--stage); }
.tray button:disabled { opacity: .38; cursor: default; }
.tray .leave { margin-left: 10px; }                                          /* 退出だけ少し離す（切っている赤と見分ける） */

/* 映像の枠 */
.tile { position: relative; overflow: hidden; border-radius: var(--r-tile); background: var(--tile); min-height: 0; animation: tile-in .42s var(--settle) both; }
@keyframes tile-in { from { opacity: 0; scale: .96; } }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile.mirror video { transform: scaleX(-1); }
.tile.screen video { object-fit: contain; background: #000; }
.tile.nocam video { visibility: hidden; }
.tile .avatar {
  position: absolute; inset: 0; margin: auto; width: min(32%, 128px); aspect-ratio: 1; border-radius: 50%;
  display: none; place-items: center; background: linear-gradient(180deg, #4a4d58, #33353d); font-size: clamp(16px, 5vmin, 44px); font-weight: 500;
}
.tile.nocam .avatar { display: grid; }
.tile .name {
  position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; box-shadow: inset 0 0 0 .5px var(--hair);
}
.tile .name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .name svg { display: none; flex: none; width: 12px; height: 12px; fill: none; stroke: var(--stop); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tile.muted .name svg { display: block; }
.tile.waiting::after {
  content: "つないでいます"; position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(14, 15, 18, .84); color: var(--sub); font-size: 13px;
}
.tile.failed::after { content: "つながりませんでした"; }

/* 入力・決めるボタン・知らせ */
.field { display: grid; gap: 6px; }
.field label { font-size: 12px; color: var(--sub); padding-left: 2px; }
.field input {
  width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: var(--r-ui); background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--hair); font-size: 16px; outline: none; transition: box-shadow .2s ease;
}
.field input:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink); }
.go {
  width: 100%; height: 48px; padding: 0 20px; border: 0; border-radius: var(--r-ui); background: var(--ink); color: var(--stage);
  font-size: 15px; font-weight: 500; cursor: pointer; transition: scale .28s var(--settle), opacity .2s ease;
}
.go:active { scale: .97; transition-duration: .08s; }
.go:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.notice { margin: 0; padding: 10px 14px; border-radius: var(--r-ui); background: #2b2518; color: #f3dfa8; font-size: 13px; }

/* 入る前・出たあと・入口 */
body.entry { display: grid; place-items: center; padding: 24px 16px; min-height: 100dvh; }
.card { width: min(100%, 420px); display: grid; gap: 16px; animation: tile-in .5s var(--settle) both; }
.card h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; text-align: center; }
.card p { margin: 0; color: var(--sub); font-size: 14px; text-align: center; }
.card form { display: grid; gap: 12px; }
.card .recnote { font-size: 13px; text-align: center; margin: 2px 0 0; }
#preview { aspect-ratio: 4 / 3; border-radius: 24px; animation: none; }
#preview .tray { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; }

/* 会議中: 映像が画面いっぱい、操作の板と小窓がその上に浮く */
body.incall { overflow: hidden; }
#call { position: fixed; inset: 0; }
#grid { position: absolute; inset: 0; display: grid; gap: 8px; }
#bar {
  position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); translate: -50% 0;
  animation: bar-in .5s var(--settle) both;
}
@keyframes bar-in { from { opacity: 0; translate: -50% 16px; } }
#callNotice {
  position: absolute; z-index: 3; left: 50%; top: calc(16px + env(safe-area-inset-top)); translate: -50% 0;
  width: max-content; max-width: calc(100% - 32px); padding: 8px 16px; border-radius: 999px; color: var(--ink); font-size: 13px;
}

/* 1人・2人: 大きい枠は画面いっぱい。名前の札は板に隠れないよう左上 */
#grid[data-count="1"] .tile, #grid[data-count="2"] .tile:not(.pip) { position: absolute; inset: 0; border-radius: 0; }
#grid[data-count="1"] .tile .name, #grid[data-count="2"] .tile:not(.pip) .name {
  left: calc(16px + env(safe-area-inset-left)); top: calc(16px + env(safe-area-inset-top)); bottom: auto;
}
#grid[data-count="1"] .tile.self .name { display: none; }

/* 小窓: 四隅のどこへでも投げて置ける（置き場所は pip.js が決める） */
.tile.pip {
  position: absolute; z-index: 2; left: 0; top: 0; width: clamp(104px, 22vmin, 220px); aspect-ratio: 4 / 3; border-radius: 16px;
  box-shadow: inset 0 0 0 .5px var(--hair), 0 12px 40px rgba(0, 0, 0, .45); cursor: grab; touch-action: none; will-change: transform;
}
.tile.pip.held { cursor: grabbing; }
.tile.pip::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); pointer-events: none; }
.tile.pip.self .name { display: none; }
.tile.pip .name { left: 6px; bottom: 6px; padding: 1px 8px; font-size: 11px; }
@media (orientation: portrait) { .tile.pip { aspect-ratio: 3 / 4; width: clamp(88px, 26vmin, 150px); } }

/* 3人以上: 同じ大きさで並べ、板の分だけ下をあける（3〜4人は2列、5人からは3列） */
#grid:not([data-count="1"]):not([data-count="2"]) {
  grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr);
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(112px + env(safe-area-inset-bottom));
}
@media (min-width: 701px), (orientation: landscape) {
  #grid[data-count="5"], #grid[data-count="6"], #grid[data-count="7"], #grid[data-count="8"] { grid-template-columns: 1fr 1fr 1fr; }
  #grid[data-count="7"], #grid[data-count="8"] { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 420px) {
  .tray button { min-width: 56px; }
  .tray .leave { margin-left: 4px; }
}

/* 動きを減らす設定・透明を減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  .tile, .card, #bar { animation: none; }
  .tray .ic, .go { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .tray, #callNotice, .tile .name { background: #2a2c33; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── 議事録 ─────────────────────────────────────────── */
:root { --panel-w: 400px; }

/* 録音しているあいだ、全員の画面の上に出る印 */
#recNotice {
  position: absolute; z-index: 3; left: 50%; top: calc(16px + env(safe-area-inset-top)); translate: -50% 0; margin: 0;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: 13px;
  background: var(--material); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: inset 0 0 0 .5px var(--hair), 0 8px 32px rgba(0, 0, 0, .28);
}
#recNotice i { width: 8px; height: 8px; border-radius: 50%; background: var(--stop); }
#recNotice:not([hidden]) ~ #callNotice, #callNotice:has(~ #recNotice:not([hidden])) { top: calc(56px + env(safe-area-inset-top)); }

/* 板を開いているあいだ、映像と操作の板は左に寄る */
#call.with-panel #grid { right: var(--panel-w); }
#call.with-panel #bar, #call.with-panel #recNotice, #call.with-panel #callNotice { left: calc((100% - var(--panel-w)) / 2); }

#panel {
  position: absolute; z-index: 4; top: 0; right: 0; bottom: 0; width: var(--panel-w); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  background: #15161a; box-shadow: inset .5px 0 0 var(--hair); padding: calc(16px + env(safe-area-inset-top)) 0 env(safe-area-inset-bottom);
}
#panel > * { margin-left: 16px; margin-right: 16px; }
#panel > header { display: grid; gap: 12px; padding-bottom: 14px; }
#panel .sub { margin-top: 0; margin-bottom: 8px; color: var(--sub); font-size: 12px; }
#panel .notice { margin-bottom: 10px; }
#recToggle.stop { background: var(--stop); color: #fff; }
.go:disabled, #extract:disabled { opacity: .45; cursor: default; }

/* 入り切りのつまみ */
.sw { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.sw input { appearance: none; -webkit-appearance: none; flex: none; width: 38px; height: 22px; margin: 0; border-radius: 999px; background: #3a3d46; position: relative; cursor: pointer; transition: background-color .2s ease; }
.sw input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: translate .28s var(--settle); }
.sw input:checked { background: #34c759; }
.sw input:checked::after { translate: 16px 0; }
.sw input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* 発言が流れる欄: 相手は左、自分は右 */
#lines { grid-row: 4; overflow-y: auto; margin: 0 6px 0 16px; padding: 6px 10px 12px 0; display: grid; align-content: start; gap: 10px; overscroll-behavior: contain; }
#linesEmpty { grid-row: 4; align-self: start; }
#lines:not(:empty) + #linesEmpty { display: none; }
.ln { max-width: 88%; justify-self: start; animation: tile-in .32s var(--settle) both; }
.ln.mine { justify-self: end; }
.ln .meta { display: flex; gap: 8px; align-items: baseline; margin: 0 4px 3px; font-size: 11px; color: var(--sub); }
.ln.mine .meta { justify-content: flex-end; }
.ln p { margin: 0; padding: 8px 12px; border-radius: 14px; background: var(--tile); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.ln.mine p { background: #2b3a55; }

/* 要点とタスク */
#taskBox { grid-row: 5; margin-top: 12px; padding-top: 12px; box-shadow: inset 0 .5px 0 var(--hair); max-height: 42dvh; overflow-y: auto; }
#taskBox > header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
#taskBox h2, .notes h2 { margin: 0; font-size: 13px; font-weight: 600; flex: 1; }
#extract, .chip { font: inherit; font-size: 12px; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--ink); cursor: pointer; }
#extract:hover:not(:disabled), .chip:hover { background: rgba(255, 255, 255, .2); }
#openNotes { font-size: 12px; color: var(--sub); }
#summary, .notes .summary { margin: 0 0 10px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; }
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
#tasks { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 2px; }
#tasks li, .tasks li { display: grid; gap: 1px; padding: 6px 0; }
#tasks label, .tasks label { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; cursor: pointer; }
#tasks input, .tasks input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: #34c759; }
#tasks .sub, .tasks .sub { margin: 0 0 0 28px; font-size: 12px; color: var(--sub); }
#tasks li.done .tx, .tasks li.done .tx { color: var(--sub); text-decoration: line-through; }

/* 狭い画面: 板は下から重ねる */
@media (max-width: 860px) {
  #call.with-panel #grid { right: 0; }
  #call.with-panel #bar, #call.with-panel #recNotice, #call.with-panel #callNotice { left: 50%; }
  #panel { top: 38dvh; left: 0; width: auto; border-radius: 20px 20px 0 0; padding-top: 16px; box-shadow: 0 -12px 40px rgba(0, 0, 0, .5); }
  #call.with-panel #bar { bottom: calc(62dvh + 12px); }
}

/* あとから読むページ（/notes） */
body.notes { padding: 0; }
.notes main { max-width: 1040px; margin: 0 auto; padding: 32px 20px 80px; display: grid; gap: 28px; }
.notes h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.notes .back { font-size: 13px; color: var(--sub); text-decoration: none; }
.notes section { display: grid; gap: 10px; }
.notes .cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .notes .cols { grid-template-columns: 1fr; } }
.notes .box { background: #15161a; border-radius: 16px; padding: 16px 18px; box-shadow: inset 0 0 0 .5px var(--hair); }
.notes .rows { display: grid; }
.notes .rows a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0; color: inherit; text-decoration: none; box-shadow: inset 0 -.5px 0 var(--hair); }
.notes .rows a:last-child { box-shadow: none; }
.notes .rows .t { font-size: 15px; }
.notes .rows .s { font-size: 12px; color: var(--sub); }
.notes .rows .n { font-size: 12px; color: var(--sub); align-self: center; }
.notes .script { display: grid; gap: 10px; }
.notes .ln { max-width: 92%; }
.notes .empty { color: var(--sub); font-size: 13px; margin: 0; }
.notes .tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.notes .task-from { font-size: 12px; color: var(--sub); margin-left: 28px; text-decoration: none; }
.notes ul.plain { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.8; }

/* 3人以上で誰かが画面を共有しているとき: 共有の画面を一番大きく、ほかの人は右に小さく縦に並べる */
#grid.staged:not([data-count="1"]):not([data-count="2"]) {
  grid-template-columns: minmax(0, 1fr) clamp(120px, 17vw, 220px); grid-template-rows: repeat(var(--others, 3), minmax(0, 1fr)); grid-auto-rows: unset;
}
#grid.staged .tile.stage { grid-column: 1; grid-row: 1 / -1; }
#grid.staged .tile:not(.stage) { grid-column: 2; }
@media (max-width: 700px) and (orientation: portrait) {
  /* スマホの縦: ほかの人は上に横一列、共有の画面はその下いっぱい */
  #grid.staged:not([data-count="1"]):not([data-count="2"]) { grid-template-columns: repeat(var(--others, 3), minmax(0, 1fr)); grid-template-rows: 16dvh minmax(0, 1fr); }
  #grid.staged .tile.stage { grid-column: 1 / -1; grid-row: 2; }
  #grid.staged .tile:not(.stage) { grid-column: auto; grid-row: 1; }
}