/* --- 共通トーン（ダークUI前提。必要なら色は調整） --- */
:root{
  --hh-bg: linear-gradient(180deg, rgba(56,189,248,.18), rgba(56,189,248,.10));
  --hh-bd: rgba(125,211,252,.35);
  --hh-fg: #a5f3fc;
  --hh-text: #e2e8f0;
}

/* ===== パネル内（盤面横）: #historyList ===== */
.history-list.inline{
  list-style: none; margin: 0; padding: 0;
}
.history-list.inline li{
  display: flex; align-items: flex-start; gap: 8px;   /* ← ここでRと本文の間に余白 */
  line-height: 1.5; padding: 4px 0;
}
.history-list.inline .badge{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.1em; height: 1.6em; padding: 0 .6em;
  border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--hh-bg); border: 1px solid var(--hh-bd); color: var(--hh-fg);
  flex: 0 0 auto;
}
.history-list.inline li > span:nth-child(2){
  color: var(--hh-text); white-space: pre-wrap; word-break: break-word;
}

/* ===== ボトムシート: .hs-item / .hs-round / .hs-text ===== */
.hs-item{
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;
}
.hs-round{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.2em; height: 1.7em; padding: 0 .65em;
  border-radius: 999px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--hh-bg); border: 1px solid var(--hh-bd); color: var(--hh-fg);
  flex: 0 0 auto;
}
.hs-text{
  color: var(--hh-text); white-space: pre-wrap; word-break: break-word; flex: 1 1 auto;
}

/* （念のため）古いブラウザで gap が効かない時のフォールバック間隔 */
.history-list.inline .badge{ margin-right: 8px; }
.hs-round{ margin-right: 10px; }