/* シミュレーター画面。tokens.css / base.css の後に読む */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.h2 { font-size: var(--text-lg); margin: 0 0 var(--sp-3); }
.h3 { font-size: var(--text-base); margin: var(--sp-4) 0 var(--sp-2); }

.topbar { background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar-inner { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-3) var(--sp-4); }
.topbar-title { margin: 0; font-weight: 700; font-size: var(--text-lg); display: flex; align-items: center; gap: var(--sp-2); }
.topbar-sub { margin: var(--sp-1) 0 0; }

/* 列は minmax(0, …) にする。既定の auto だと在庫表の幅に引っぱられて横にはみ出す */
.sim { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 960px) {
  .sim { grid-template-columns: 400px minmax(0, 1fr); align-items: start; }
  .phone { position: sticky; top: var(--sp-4); }
}

/* ラジャーのチャンネル (イメージ)。高さは px で決め、中の一覧だけが流れる */
.phone { display: flex; flex-direction: column; height: 720px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
@media (max-width: 959px) { .phone { height: 640px; } }
.phone-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--accent); color: #fff; }
.phone-channel { margin: 0; font-weight: 700; }
.phone-meta { margin: 2px 0 0; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-xs); }
.phone-mode { color: #fff; }
.select-sm { min-height: var(--tap); width: auto; padding: 0 var(--sp-2); }

.timeline { flex: 1 1 0; min-height: 0; overflow-y: auto; margin: 0; padding: var(--sp-3); list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); background: var(--gray-100); }
.note { align-self: center; max-width: 92%; padding: var(--sp-1) var(--sp-3); border-radius: 999px; background: var(--gray-200); color: var(--gray-700); font-size: var(--text-xs); text-align: center; }
.msg { max-width: 86%; display: grid; gap: 2px; }
.msg-staff { align-self: flex-end; justify-items: end; }
.msg-bot { align-self: flex-start; }
.msg-who { font-size: var(--text-xs); color: var(--text-muted); display: flex; gap: var(--sp-2); align-items: center; }
.msg-body { padding: var(--sp-2) var(--sp-3); border-radius: 12px; background: var(--surface); border: 1px solid var(--border); white-space: pre-wrap; word-break: break-word; }
.msg-staff .msg-body { background: #e8f5ee; border-color: #bfe3cf; }
.msg-bot .msg-body { border-color: var(--accent); }
.msg-silent .msg-body { color: var(--text-muted); border-style: dashed; }

.ptt-area { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--border); background: var(--surface); }
.ptt-live { margin: 0; min-height: 1.6em; text-align: center; }
.ptt { justify-self: center; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-width: 200px; min-height: 64px; padding: 0 var(--sp-6); border-radius: 999px; border: 0; background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: var(--text-lg); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; }
.ptt[aria-pressed="true"] { background: var(--danger); }
.ptt[disabled] { background: var(--gray-400); cursor: not-allowed; }
.ptt-icon { font-size: 14px; }
.say { display: flex; gap: var(--sp-2); }
.say .input { flex: 1 1 auto; min-width: 0; }
.chips { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); }
.chip { flex: 0 0 auto; min-height: var(--tap); padding: 0 var(--sp-3); border-radius: 999px; border: 1px solid var(--gray-300); background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm); cursor: pointer; }

.inside { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); min-width: 0; }
.settings-grid { display: grid; gap: var(--sp-2); }
@media (min-width: 720px) { .settings-grid { grid-template-columns: 1fr 1fr; } }
.check { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
.check input { width: 20px; height: 20px; }
.field-inline { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); }
.settings-actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); flex-wrap: wrap; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.step-title { margin: 0 0 var(--sp-1); font-weight: 600; font-size: var(--text-sm); }
.code { margin: 0; padding: var(--sp-3); background: var(--gray-900); color: #f4f4f5; border-radius: var(--radius-control); font-family: var(--font-mono); font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: var(--sp-1) var(--sp-3); margin: 0; font-size: var(--text-sm); }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; word-break: break-word; }

.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.inv { overflow-x: auto; }
.inv .table td, .inv .table th { padding: var(--sp-2) var(--sp-3); white-space: nowrap; }
.inv .table tbody tr { cursor: default; }
.inv-flash { background: var(--warn-bg); }
.skeleton-block { height: 120px; }
.say .btn { flex: 0 0 auto; white-space: nowrap; }
.phone-meta .badge, .phone-mode { white-space: nowrap; }
.phone-meta { flex-wrap: wrap; }
.inv .table td:last-child { white-space: normal; min-width: 220px; }