/* NÜXGROW · สัญญาณจากห้องถึงแอป v0.1.0 — คู่กับ /qp/sim/sim-devlink.js · สีจาก --qp-* + --sim-spec-* ของหน้า · ตัวอักษร --qp-t-* / --dt-fs-*
   แถบเวลา/ปุ่มเน็ตหลุด → ภาพ 2 ฝั่ง (ห้อง ↔ แอป) → ค่าที่แอปได้รับ + คำสั่ง/ใบตอบรับ (จอกว้าง 2 คอลัมน์ · จอแคบซ้อน) · สูงรวม ≈ 60–70svh */
.sim-dl { position: relative; display: flex; flex-direction: column; gap: var(--qp-s-2, 8px); color: var(--qp-ink); font-family: var(--qp-font-sans); font-size: var(--qp-t-13, 13px); line-height: 1.5; }
.sim-dl *, .sim-dl *::before, .sim-dl *::after { box-sizing: border-box; }
.sim-dl:empty { min-height: 320px; background: radial-gradient(ellipse 70% 60% at 50% 50%, color-mix(in srgb, var(--qp-green) 14%, transparent), transparent 70%); }
.sim-dl b { font-family: var(--qp-font-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--qp-ink); }
.sim-dl p, .sim-dl h4 { margin: 0; }
.sim-dl__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--qp-s-2, 8px) var(--qp-s-3, 12px); color: var(--qp-ink-2); }
.sim-dl__btn { font: inherit; font-size: var(--qp-t-13, 13px); min-height: 34px; padding: 4px 14px; border-radius: var(--qp-r-pill, 999px); border: 1px solid var(--qp-line-strong); background: transparent; color: var(--qp-ink); cursor: pointer; }
.sim-dl__btn:hover { border-color: var(--qp-ink-2); }
.sim-dl__btn[aria-pressed="true"] { border-color: var(--qp-warn); }
.sim-dl button:focus-visible { outline: 2px solid var(--qp-green); outline-offset: 2px; }
.sim-dl__pill { margin-left: auto; font-size: var(--qp-t-12, 12px); line-height: 1.5; padding: 0 9px; border-radius: var(--qp-r-pill, 999px); color: var(--qp-ink-2); border: 1px solid var(--qp-src-sim, var(--qp-line-strong)); white-space: nowrap; }
.sim-dl__stage { position: relative; min-height: 220px; height: clamp(220px, calc(38svh - 40px), 300px); }
.sim-dl__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sim-dl__tag { position: absolute; top: 4px; font-size: var(--qp-t-12, 12px); line-height: 1.3; color: var(--qp-ink); font-weight: 600; white-space: nowrap; }
.sim-dl__tag small { display: block; font-weight: 400; color: var(--qp-ink-2); font-size: 11px; }
.sim-dl__tag--room { left: 12px; }
.sim-dl__tag--app { right: 12px; text-align: right; }
.sim-dl__tag--net { left: 50%; transform: translateX(-50%); top: 6px; font-weight: 500; padding: 0 8px; border-radius: var(--qp-r-pill, 999px); border: 1px solid var(--qp-warn); background: var(--qp-bg); }
.sim-dl__tag[hidden] { display: none; }
.sim-dl__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--qp-s-3, 12px); }
.sim-dl__box { border: 1px solid var(--qp-line); border-radius: 14px; padding: 10px 12px; display: grid; gap: 6px; align-content: start; color: var(--qp-ink-2); }
.sim-dl__box h4 { font-size: var(--qp-t-13, 13px); font-weight: 600; color: var(--qp-ink); }
.sim-dl__box h4 span { font-weight: 400; color: var(--qp-ink-2); }
.sim-dl__vals { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.sim-dl__vals li { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.sim-dl__vals span { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sim-dl__vals b { font-size: var(--qp-t-15, 15px); }
.sim-dl__vals small { font-size: 11px; }
.sim-dl__vals li.is-stale b { color: var(--qp-ink-2); }
.sim-dl__st { font-size: var(--qp-t-12, 12px); }
.sim-dl__st.is-warn { color: var(--qp-ink); padding-left: 14px; position: relative; }
.sim-dl__st.is-warn::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--qp-warn); }
.sim-dl__cmds { display: flex; flex-wrap: wrap; gap: 6px; }
.sim-dl__log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-height: 3.2em; font-size: var(--qp-t-12, 12px); }
.sim-dl__log li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding-top: 4px; border-top: 1px solid var(--qp-line); }
.sim-dl__log li:first-child { border-top: 0; padding-top: 0; }
.sim-dl__log time { font-family: var(--qp-font-mono); font-variant-numeric: tabular-nums; }
.sim-dl__cmd { color: var(--qp-ink); }
.sim-dl__steps { display: inline-flex; gap: 3px; }
.sim-dl__steps i { font-style: normal; padding: 0 6px; border-radius: var(--qp-r-pill, 999px); border: 1px solid var(--qp-line); color: var(--qp-ink-2); }
.sim-dl__steps i.is-on { border-color: var(--qp-green); color: var(--qp-ink); }
.sim-dl__res { flex: 1 1 100%; }
.sim-dl__log li.is-fail .sim-dl__res { color: var(--qp-ink); padding-left: 14px; position: relative; }
.sim-dl__log li.is-fail .sim-dl__res::before { content: ""; position: absolute; left: 2px; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--qp-warn); }
.sim-dl__note { font-size: var(--qp-t-12, 12px); color: var(--qp-ink-2); }
@media (pointer: coarse) { .sim-dl__btn { min-height: var(--dt-tap, 44px); } }
@media (max-width: 760px) {
  .sim-dl__cols { grid-template-columns: 1fr; gap: var(--qp-s-2, 8px); }
  .sim-dl__stage { height: clamp(200px, 56vw, 250px); min-height: 200px; }
  .sim-dl__log li:nth-child(n+3) { display: none; }   /* จอแคบ: ใบตอบรับล่าสุด 2 ใบ */
}