:root {
  --ink: #1a1a1a;
  --muted: #666666;
  --paper: #ffffff;
  --canvas: #f3f3f3;
  --nav: #1a1a1a;
  --line: #dedede;
  --strong-line: #b7b7b7;
  --human: #1a1a1a;
  --human-soft: #f4f4f4;
  --agent: #e60012;
  --agent-soft: #fff1f2;
  --trial: #ededed;
  --trial-dark: #1a1a1a;
  --unknown: #666666;
  --unknown-soft: #eeeeee;
  --danger: #e60012;
  --lane-1: #e60012;
  --lane-2: #1a1a1a;
  --lane-3: #777777;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", sans-serif;
  color: var(--ink);
  background: var(--canvas);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--canvas);
}

button, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: 0.52; }
button:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(230, 0, 18, 0.28);
  outline-offset: 2px;
}

.trial-ribbon {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 5px 14px;
  color: var(--trial-dark);
  background: var(--trial);
  border-bottom: 1px solid #c8c8c8;
  border-top: 3px solid var(--agent);
  font-size: 12px;
}

.trial-ribbon strong {
  padding-right: 10px;
  border-right: 1px solid #a8a8a8;
  font-size: 13px;
}

.app-shell {
  min-height: calc(100vh - 32px);
  display: grid;
  grid-template-rows: 72px minmax(0, 1fr) auto;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 10px 20px;
  color: #fff;
  background: var(--nav);
  border-bottom: 3px solid var(--agent);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 255px; }
.brand img { width: 46px; height: 46px; object-fit: cover; border-radius: 2px; }
.brand h1 { margin: 0; font-size: 20px; letter-spacing: 0.04em; }
.brand p { margin: 4px 0 0; color: #c6c6c6; font-size: 11px; }

.system-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}

.summary-pill {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  color: #eeeeee;
  border: 1px solid #555555;
  border-radius: 2px;
  font-size: 11px;
  font-weight: 750;
}

.summary-trial { color: #ffffff; border-color: #777777; }
.summary-unknown { color: #d0d0d0; border-color: #686868; }
.summary-unknown i { width: 7px; height: 7px; border-radius: 50%; background: #9b9b9b; }

.top-actions { display: flex; gap: 7px; }
.button {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-weight: 750;
}
.button-secondary { color: #fff; background: transparent; border-color: #707070; }
.button-danger { color: #fff; background: #333333; border-color: #666666; }
.button-primary { min-width: 98px; color: #fff; background: var(--human); border-color: var(--human); }

.main-content {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 14px 16px 12px;
}

.guide-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  padding: 9px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--agent);
  border-radius: 2px;
}

.guide-bar div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.guide-bar strong { font-size: 13px; white-space: nowrap; }
.guide-bar span { color: var(--muted); font-size: 11px; }
.unknown-badge {
  flex: 0 0 auto;
  padding: 5px 8px;
  color: var(--unknown) !important;
  background: var(--unknown-soft);
  border-radius: 2px;
  font-weight: 750;
}

.fact-legend {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  padding: 7px 10px;
  background: #f9fafb;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 10px;
}
.fact-legend > strong { margin-right: 2px; font-size: 11px; }
.fact-state {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-weight: 800;
  white-space: nowrap;
}
.fact-state small { font-size: 8px; font-weight: 650; }
.fact-state.is-pending { color: #4f4f4f; background: #e7e7e7; border-color: #c6c6c6; }
.fact-state.is-unknown { color: var(--unknown); background: var(--unknown-soft); border-color: #d0d0d0; }
.fact-state.is-confirmed { color: #1a1a1a; background: #ffffff; border-color: #888888; }
.fact-state.is-failed { color: var(--agent); background: var(--agent-soft); border-color: #efb8bd; }
.fact-note { margin-left: auto; color: var(--muted); }

.lane-board {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(270px, 1fr));
  gap: 10px;
}

.lane {
  --lane-color: var(--lane-1);
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(180px, 1fr);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--lane-color);
  border-radius: 2px;
  overflow: hidden;
}
.lane-2 { --lane-color: var(--lane-2); }
.lane-3 { --lane-color: var(--lane-3); }
.lane.is-away { background: #f5f6f7; }

.lane-header {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
}
.lane-header > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lane-header h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.lane-number { color: var(--lane-color); font-size: 11px; font-weight: 850; letter-spacing: 0.08em; }

.presence-control {
  flex: 0 0 auto;
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  color: #1a1a1a;
  background: #ffffff;
  border: 1px solid #a0a0a0;
  border-radius: 16px;
  font-size: 10px;
  font-weight: 800;
}
.presence-control i { width: 7px; height: 7px; border-radius: 50%; background: var(--agent); }
.is-away .presence-control { color: #747e85; background: #eceff1; border-color: #d1d7da; }
.is-away .presence-control i { background: #929aa0; }

.members { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.member { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.member + .member { border-left: 1px solid var(--line); }
.avatar {
  width: 31px;
  height: 31px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: var(--human);
  border-radius: 2px;
  font-size: 10px;
  font-weight: 850;
}
.member-agent .avatar { background: var(--agent); }
.member-copy { min-width: 0; display: grid; gap: 2px; }
.member-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.member-copy small { color: var(--muted); font-size: 9px; }

.lane-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding: 6px 10px;
  background: #f7f8f9;
  border-bottom: 1px solid var(--line);
}
.lane-fact { min-width: 0; display: grid; gap: 3px; padding: 0 7px; }
.lane-fact:first-child { padding-left: 0; }
.lane-fact:last-child { padding-right: 0; }
.lane-fact + .lane-fact { border-left: 1px solid var(--line); }
.lane-fact > span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.lane-fact .fact-state { justify-self: start; padding: 3px 5px; font-size: 8px; }

.lane-messages { min-height: 0; overflow-y: auto; padding: 10px; }
.history-button {
  width: 100%;
  margin: 0 0 8px;
  padding: 6px;
  color: var(--muted);
  background: #f7f8f9;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 10px;
}

.message {
  margin-bottom: 9px;
  padding: 10px;
  background: var(--human-soft);
  border: 1px solid #d6d6d6;
  border-left: 4px solid var(--human);
  border-radius: 2px;
}
.message-agent { background: var(--agent-soft); border-color: #efc6c9; border-left-color: var(--agent); }
.message header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; }
.message header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.message time { color: var(--muted); font-size: 9px; }
.speaker-tag {
  padding: 3px 5px;
  color: #fff;
  background: var(--human);
  border-radius: 2px;
  font-size: 9px;
  font-weight: 850;
}
.message-agent .speaker-tag { background: var(--agent); }
.message-body { margin: 8px 0 0; line-height: 1.58; overflow-wrap: anywhere; font-size: 12px; }
.message-body.is-collapsed {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.text-button {
  margin-top: 6px;
  padding: 0;
  color: var(--lane-color);
  background: transparent;
  border: 0;
  font-size: 10px;
  font-weight: 750;
}

.composer {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(120px, 165px) minmax(260px, 1fr) auto;
  gap: 9px;
  align-items: end;
  padding: 11px 16px 14px;
  background: var(--paper);
  border-top: 1px solid var(--strong-line);
}
.composer-heading { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 9px; }
.composer-heading strong { font-size: 12px; }
.composer-heading span, .composer label > span { color: var(--muted); font-size: 10px; }
.composer label { min-width: 0; display: grid; gap: 4px; }
.composer select, .composer textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 9px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--strong-line);
  border-radius: 2px;
}
.composer textarea { height: 55px; resize: vertical; line-height: 1.4; }

.notice {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  max-width: min(360px, calc(100vw - 36px));
  padding: 10px 12px;
  color: #fff;
  background: var(--nav);
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  font-size: 12px;
}
.notice[data-kind="error"] { background: var(--danger); }
body[data-stopped="true"] .lane-board { filter: grayscale(0.45); }

@media (max-width: 1100px) {
  .system-summary { display: none; }
  .lane-board { overflow-x: auto; grid-template-columns: repeat(3, minmax(320px, 1fr)); }
}

@media (max-width: 760px) {
  .app-shell { grid-template-rows: auto minmax(0, 1fr) auto; }
  .topbar { flex-wrap: wrap; gap: 9px; padding: 9px 12px; }
  .brand { min-width: 0; flex: 1; }
  .brand p { display: none; }
  .top-actions { width: 100%; }
  .top-actions .button { flex: 1; }
  .main-content { padding: 10px; }
  .guide-bar { align-items: flex-start; }
  .guide-bar div { display: grid; gap: 3px; }
  .guide-bar div span { display: none; }
  .fact-legend { overflow-x: auto; }
  .fact-note { display: none; }
  .lane-board { grid-template-columns: repeat(3, minmax(290px, 88vw)); }
  .composer { grid-template-columns: 1fr 1fr; padding: 10px; }
  .composer-heading, .message-field { grid-column: 1 / -1; }
  .composer .button-primary { grid-column: 1 / -1; width: 100%; }
}


/* ★★2026-08-16 社長[2556][2577][2558]：★SUMMITと同じ形へ寄せます。
   ★★要素は【消さず隠します】（★JSが参照しており、消すと画面が動かなくなるため）。
   ★①「組」「発言者」を選ぶ欄＝自分が喋るので要らない
   ★②「最初から」「試験を終了」＝意味が分からない、本番に不要
   ★③各列の説明文＝要らない */
#lane-select, #speaker-select,
#lane-select ~ span, #speaker-select ~ span,
label:has(#lane-select), label:has(#speaker-select),
#reset-trial, #stop-trial { display: none !important; }
#composer .composer-field:has(select) { display: none !important; }


/* ★★2026-08-16 社長[2556][2577]：★選ぶ欄と試験ボタンは【見せない】。
   ★★消さずに隠します（★仕掛けが部品を探すため、消すと動かなくなります）。 */
.kakusu { display: none !important; }


/* ★★2026-08-16 社長[2620]：★「誰の発言か」を枠の色で一目で分かるように。
   ★★名前の札だけでなく、★発言の枠そのものへ薄く色を敷きます。
   ★色は崎永の範囲（赤・黒・グレー）に、★列ごとの薄い下地を1段だけ足します。
   ★文字が読みにくくならない濃さに固定（★背景はごく薄く、文字は黒のまま）。 */
.lane:nth-child(1) .message { background: #FAFAFA; }
.lane:nth-child(2) .message { background: #F4F4F4; }
.lane:nth-child(3) .message { background: #EFEFEF; }
/* ★AIの発言は、どの列でも赤系のまま（★人とAIの区別を優先） */
.lane .message-agent { background: var(--agent-soft) !important; }


/* ★★★2026-08-16 社長[2649][2651]：★★【1列】にします（★SUMMITと同じ並び）。
   ★横に3つ並べるのをやめ、★上から下へ1本にします。
   ★★消さずに【並べ方だけ】変えます（★仕掛けは無傷＝壊れません）。 */
.lane-board { display: block !important; }            /* ★横並びをやめる */
.lane { width: 100% !important; margin: 0 0 10px 0 !important; }
/* ★各列の見出しは小さく（★誰の列かは分かるまま・場所は取らない） */
.lane > header, .lane .lane-head { padding: 6px 10px !important; }
/* ★席ごとの下地はやめ、★SUMMITと同じ白地に（★人は黒・AIは赤の枠線で見分ける） */
.lane:nth-child(1) .message,
.lane:nth-child(2) .message,
.lane:nth-child(3) .message { background: var(--human-soft) !important; }
.lane .message-agent { background: var(--agent-soft) !important; }


/* ==== ICHIRETSU-2026-08-16 ====
   ★★社長[2649][2651]：★3つの横並びをやめ、★【上から下へ1本】にします（SUMMITと同じ）。
   ★消さずに並べ方だけ変えます（★仕掛けは無傷）。★画面の幅に関わらず1列に固定します。 */
.lane-board,
body .lane-board { display: block !important; grid-template-columns: none !important; overflow-x: visible !important; }
.lane, body .lane { width: 100% !important; max-width: 100% !important; margin: 0 0 10px 0 !important; }
.lane .message { background: var(--human-soft) !important; }
.lane .message-agent { background: var(--agent-soft) !important; }