/* VibeGuard Dock — 解析ベンチ (BENCH)
   計測器の前面パネル × 実験台のセッションログ。Slack の記号を排し、
   物理ドック(Spresense LED0-3 / BLEプロトコル)を画面の語彙にした独自UI。 */
:root {
  /* 面 */
  --bench: #f2f4f3;   /* アプリ背景（青緑がかった技術紙） */
  --paper: #ffffff;   /* ログ・カード面 */
  --panel: #101b24;   /* 計器パネル・ヘッダ（濃紺スレート） */
  --panel-2: #182732; /* パネル内セル */
  /* 線・テキスト */
  --line: #dde3e0;
  --line-dk: #24343f;
  --ink: #17211f;
  --ink-soft: #5a6763;
  --silk: #a8bcc9;     /* パネル上のシルク印刷風ラベル */
  --silk-hi: #ffffff;
  /* アクセント */
  --copper: #9c4f14;   /* 主アクション・リンク（白地用・PCBの銅） */
  --copper-hi: #7f400f;
  --copper-lt: #d98e4a; /* 暗面用の明るい銅（パネル上のラベル・busyメータ、約6:1） */
  --led-on: #3ddc97;
  /* severity（検証済み値を踏襲） */
  --sev-critical: #e01e5a;
  --sev-high: #c25e00;
  --sev-medium: #ecb22e;
  --sev-low: #2c7a3f;
  --sev-info: #616061;

  --mono: "Cascadia Code", "Cascadia Mono", "SF Mono", "Segoe UI Mono",
    Consolas, "Roboto Mono", ui-monospace, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--sans); color: var(--ink); background: var(--bench);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
b { font-weight: 600; }

.app {
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-rows: 48px 1fr;
  height: 100vh; overflow: hidden;
}

/* シルク印刷風ラベル（この等幅大文字が機器らしさの核） */
.panel__silk, .nameplate__silk {
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--silk);
}

/* ---------- 銘板ヘッダ ---------- */
.nameplate {
  grid-column: 1 / 3;
  background: var(--panel); color: var(--silk-hi);
  display: flex; align-items: center; gap: 16px; padding: 0 18px;
  border-bottom: 1px solid #000;
}
.nameplate__mark {
  font-family: var(--mono); font-weight: 700; letter-spacing: .14em;
  font-size: 15px; color: #fff; display: flex; align-items: center; gap: 10px;
}
.nameplate__silk { display: flex; align-items: center; gap: 8px; }
.nameplate__silk b { color: var(--silk-hi); font-weight: 600; }
.nameplate__silk .sep { opacity: .4; }
.nameplate__spacer { flex: 1; }
.nameplate__conn {
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--silk);
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-dk); border-radius: 4px; padding: 4px 10px;
}
.nameplate__conn--live { color: #cdEfe0; border-color: #1f5c47; background: #0d2a22; }
.lamp { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.lamp--demo { background: #4a5a63; }
.lamp--live { background: var(--led-on); box-shadow: 0 0 0 3px rgba(61,220,151,.2); }

/* ---------- ログ（中央） ---------- */
.log { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.feed { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 0 6px; }

/* 日付ディバイダ */
.divider { display: flex; align-items: center; padding: 8px 22px; position: sticky; top: 6px; z-index: 1; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.divider span {
  margin: 0 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  color: var(--ink-soft); background: var(--bench); padding: 0 6px;
}

/* ログエントリ */
.entry { padding: 8px 22px; }
.entry + .entry { border-top: 1px dashed transparent; }
.entry__head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.roletag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px;
}
.roletag--you { border: 1px solid var(--line); color: var(--ink-soft); background: var(--paper); }
.roletag--dock { background: var(--panel); color: #fff; }
.roletag--sys { color: var(--ink-soft); }
.entry__time { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.entry--system { color: var(--ink-soft); font-size: 13px; padding-left: 22px; }
.entry--system .roletag { margin-right: 8px; }

/* コード面（検体票 / スニペット共通） */
.code {
  position: relative; background: #0e1922; color: #d6e2ea; border-radius: 4px;
  border: 1px solid var(--line-dk); margin: 6px 0 0;
}
.code pre {
  margin: 0; padding: 10px 12px; overflow: auto; max-height: 340px;
  white-space: pre-wrap; word-break: break-word;
  font: 13px/1.6 var(--mono);
}
.code__copy {
  position: absolute; top: 6px; right: 6px; opacity: 0; transition: opacity .12s;
  background: rgba(255,255,255,.08); color: #cfe; border: 1px solid rgba(255,255,255,.14);
  border-radius: 4px; font: 11px var(--mono); padding: 2px 8px;
}
.code:hover .code__copy { opacity: 1; }
.specimen__label {
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft); letter-spacing: .04em;
}
.specimen__label b { color: var(--copper); }

/* 長コード折りたたみ */
.codewrap { position: relative; }
.codewrap.folded pre { max-height: 200px; }
.codewrap--long:not(.folded) pre { max-height: none; }
.codewrap.folded::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 30px; height: 42px;
  background: linear-gradient(transparent, #0e1922); pointer-events: none; border-radius: 0 0 4px 4px;
}
.codewrap__toggle {
  display: none; margin-top: 4px; font: 11px var(--mono); color: var(--copper);
  background: none; border: none; padding: 2px 0; letter-spacing: .04em;
}
.codewrap--long .codewrap__toggle { display: inline-block; }

/* サマリ行 */
.summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.summary__title { font-weight: 600; font-size: 15px; }
.pill {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #fff; padding: 2px 8px; border-radius: 3px;
}
.pill--critical { background: var(--sev-critical); }
.pill--high { background: var(--sev-high); }
.pill--medium { background: var(--sev-medium); color: #4a3400; }
.pill--low { background: var(--sev-low); }
.pill--info { background: var(--sev-info); }
.pill--clean { background: var(--sev-low); }
.summary__route {
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 3px; padding: 2px 8px;
}

/* 測定記録カード（finding） */
.rec {
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 12px; margin: 8px 0; max-width: 740px;
}
.rec__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rec__sev {
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #fff; padding: 1px 6px; border-radius: 3px;
}
.rec--critical .rec__sev { background: var(--sev-critical); }
.rec--high .rec__sev { background: var(--sev-high); }
.rec--medium .rec__sev { background: var(--sev-medium); color: #4a3400; }
.rec--low .rec__sev { background: var(--sev-low); }
.rec--info .rec__sev { background: var(--sev-info); }
.rec__rule { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .02em; }
.rec__loc { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.rec__title { font-size: 14px; margin: 5px 0 0; }
.rec__rem { margin-top: 8px; font-size: 13px; line-height: 1.7; }
.rec__rem b { color: var(--ink); font-weight: 600; }
.rec__conf {
  margin-top: 7px; font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  letter-spacing: .04em; text-transform: uppercase;
}
.rec .code { margin-top: 8px; }
.rec .code pre { white-space: pre; font-size: 12.5px; }
.rec .ln { color: #7d95a6; user-select: none; margin-right: 12px; }

/* ---------- LED（署名要素） ---------- */
.led {
  display: inline-block; border-radius: 50%;
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--led-ring, #33454f);
}
.led--lg { width: 15px; height: 15px; }
.led--sm { width: 9px; height: 9px; box-shadow: inset 0 0 0 1.25px var(--led-ring, #c3ccc8); }
.led.on {
  background: var(--led-color); box-shadow: 0 0 0 1px var(--led-color), 0 0 8px -1px var(--led-color);
}
.led--lg.on { box-shadow: 0 0 0 1px var(--led-color), 0 0 12px -1px var(--led-color); }
.ledbar { display: inline-flex; gap: 5px; align-items: center; }
.ledbar--sm { gap: 4px; }

/* ---------- デバイスパネル（右） ---------- */
.panel {
  grid-column: 2; grid-row: 2; background: var(--panel); color: var(--silk);
  display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 12px;
  border-left: 1px solid #000; overflow-y: auto; min-height: 0;
}
.panel .panel__silk { margin-bottom: 8px; }

.board { background: var(--panel-2); border: 1px solid var(--line-dk); border-radius: 6px; padding: 8px; }
.board__svg { width: 100%; height: auto; display: block; }
.board__edge { fill: #0c3a2e10; stroke: var(--copper); stroke-width: 1.5; }
.board__chip { fill: #0b141a; stroke: var(--line-dk); }
.board__usb { fill: #0b141a; stroke: var(--line-dk); }
.board__silk { fill: var(--silk); font-family: var(--mono); font-size: 7px; letter-spacing: .05em; }
.board__led { fill: #0b141a; stroke: #33454f; stroke-width: 1.25; }
.board__led.on { fill: var(--led-color); stroke: var(--led-color); filter: drop-shadow(0 0 4px var(--led-color)); }

.metric { background: var(--panel-2); border: 1px solid var(--line-dk); border-radius: 6px; padding: 12px; }
.metric--grow { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ledmeter { display: flex; gap: 8px; margin: 2px 0 8px; --led-ring: #33454f; }
.metric__label {
  font-family: var(--mono); font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--silk-hi); font-weight: 700;
}
.metric__hint { font-size: 11px; color: var(--silk); margin-top: 4px; line-height: 1.5; }
.metric__ms { display: flex; align-items: baseline; gap: 5px; }
.metric__ms b { font-family: var(--mono); font-size: 28px; color: var(--silk-hi); font-weight: 700; font-variant-numeric: tabular-nums; }
.metric__ms span { font-family: var(--mono); font-size: 12px; color: var(--silk); }
.metric__route { font-family: var(--mono); font-size: 12px; color: var(--silk); margin-top: 3px; letter-spacing: .03em; }

.activity { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.activity__line {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em; color: var(--silk);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.activity__line .tx { color: var(--copper-lt); }
.activity__line .tx--live { color: var(--led-on); }
.activity__line--dim { opacity: .45; }

.panel__foot { display: flex; gap: 8px; }
.btn-panel {
  flex: 1; background: var(--panel-2); color: var(--silk-hi); border: 1px solid var(--line-dk);
  border-radius: 5px; padding: 9px 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .04em;
}
.btn-panel:hover { border-color: var(--copper); color: #fff; }
.btn-panel--icon { flex: 0 0 44px; font-size: 15px; }
.btn-panel--live { background: #0d2a22; border-color: #1f5c47; color: #cdefe0; }

/* ---------- 検体ジェネレータ ---------- */
.tray {
  display: flex; gap: 12px; align-items: center; padding: 10px 22px;
  border-top: 1px solid var(--line);
}
.gen-btn {
  flex: none; background: var(--copper); border: 1px solid var(--copper); color: #fff;
  border-radius: 5px; padding: 8px 16px; font-family: var(--mono); font-weight: 700;
  font-size: 13px; letter-spacing: .04em;
}
.gen-btn:hover { background: var(--copper-hi); }
.gen-btn:active { transform: translateY(1px); }
.gen-info { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); letter-spacing: .02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- コンポーザ（検体投入口） ---------- */
.composer { padding: 8px 22px 16px; }
.composer__row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.composer__path {
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft); letter-spacing: .05em;
  display: flex; align-items: center; gap: 6px;
}
.composer__path input {
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 8px;
  font: 12px var(--mono); width: 190px; background: var(--paper); color: var(--ink);
}
.composer__lang {
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  background: #e7ebe9; border-radius: 3px; padding: 2px 8px; letter-spacing: .03em;
}
.composer__cap { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.composer__box {
  border: 1px solid #9aa8a2; border-radius: 5px; overflow: hidden; background: var(--paper);
}
.composer__box:focus-within { border-color: var(--copper); box-shadow: 0 0 0 1px var(--copper); }
#codeInput {
  width: 100%; border: none; resize: none; padding: 11px 13px; display: block;
  font: 13px/1.6 var(--mono); outline: none; min-height: 84px; max-height: 40vh; overflow-y: auto;
  color: var(--ink); background: transparent;
}
.gauge { height: 3px; background: #e7ebe9; }
.gauge__fill { display: block; height: 100%; width: 0; background: var(--copper); transition: width .12s; }
.composer__actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.composer__note { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); letter-spacing: .03em; }
.btn-scan {
  margin-left: auto; background: var(--copper); color: #fff; border: none; border-radius: 5px;
  padding: 9px 18px; font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .04em;
}
.btn-scan:hover { background: var(--copper-hi); }
.btn-scan:disabled { background: #c2a892; cursor: default; }

/* タイピング */
.typing { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-soft); font-size: 14px; }
.typing__dots span {
  width: 6px; height: 6px; background: var(--copper); border-radius: 50%; display: inline-block;
  animation: blink 1.2s infinite both;
}
.typing__dots span:nth-child(2) { animation-delay: .2s; }
.typing__dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* メータのスキャン中スイープ */
@keyframes sweep { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
.ledmeter.busy .led { background: var(--copper-lt); box-shadow: 0 0 6px -1px var(--copper-lt); animation: sweep 1s infinite; }
.ledmeter.busy .led:nth-child(2) { animation-delay: .15s; }
.ledmeter.busy .led:nth-child(3) { animation-delay: .3s; }
.ledmeter.busy .led:nth-child(4) { animation-delay: .45s; }
/* critical の緩いパルス */
@keyframes pulse { 0%,100% { filter: none; } 50% { filter: brightness(1.4); } }
.ledmeter.crit .led.on { animation: pulse 1.1s infinite; }
@media (prefers-reduced-motion: reduce) {
  .ledmeter.busy .led, .ledmeter.crit .led.on, .typing__dots span { animation: none; }
}

/* ---------- モーダル ---------- */
.modal { position: fixed; inset: 0; background: rgba(6,12,16,.55); display: grid; place-items: center; z-index: 20; }
.modal[hidden] { display: none; }
.modal__card { background: var(--paper); border-radius: 10px; padding: 22px; width: min(460px, 92vw); }
.modal__card h2 { margin: 0 0 4px; font-size: 18px; }
.modal__desc { color: var(--ink-soft); font-size: 13px; margin: 0 0 14px; line-height: 1.6; }
.modal__card label { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin-bottom: 10px; letter-spacing: .03em; }
.modal__card input {
  display: block; width: 100%; margin-top: 4px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 5px; font: 13px var(--mono); color: var(--ink);
}
.modal__actions { display: flex; justify-content: flex-end; margin-top: 4px; }
.modal__actions .btn-panel { flex: 0 0 auto; background: #eef1f0; color: var(--ink); border-color: var(--line); }

/* スクロールバー */
.feed::-webkit-scrollbar, .panel::-webkit-scrollbar, .activity::-webkit-scrollbar, .tray::-webkit-scrollbar { width: 8px; height: 8px; }
.feed::-webkit-scrollbar-thumb { background: #d3d9d6; border-radius: 4px; }
.panel::-webkit-scrollbar-thumb, .activity::-webkit-scrollbar-thumb { background: #2a3b45; border-radius: 4px; }

/* ---------- 狭幅 ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: 48px 1fr auto; }
  .panel {
    grid-column: 1; grid-row: 3; flex-direction: row; align-items: center; gap: 12px;
    overflow-x: auto; padding: 10px 14px; border-left: none; border-top: 1px solid #000;
  }
  .panel .panel__silk, .board, .metric__hint, .activity, .metric--grow { display: none; }
  .metric { flex: none; padding: 8px 12px; }
  /* 接続/設定は狭幅でも残す（Android Chrome が BLE のターゲット） */
  .panel__foot { flex: none; margin-left: auto; }
  .btn-panel { flex: none; }
}