:root {
  /* ページ全体 */
  --bg:       #f1f7fc;   /* 外側：明るい水色グレー */

  /* チャットパネル（会話背景） */
  --panel:    #b5d5f2;   /* 明るめブルー（水色寄りで軽やか） */
  --ink:      #0f1419;   /* 文字色：黒に近い濃グレー */
  --muted:    #022b4e;   /* 補助文字：背景となじむ淡いブルー */

  /* 自分（me） */
  --me-bg:     #d8f9c2;  /* 吹き出し：やさしいライトグリーン */
  --me-border: #b8e6a2;  /* 枠線：低彩度のグリーン */
  --me-name:   #2e7d32;  /* 名前色：濃い緑 */

  /* 相手（other） */
  --other-bg:  #ffffff;  /* 吹き出し：白 */
  --other-border: #d6e0ea;  /* 枠線：淡いブルーグレー */
  --other-name:#1a73e8;  /* 名前色：明るめブルー */

  /* 共通 */
  --border:    #9fc3e1;  /* 区切り線：薄いブルー */
  --accent:    #00c853;  /* ボタンや強調：LINEらしい緑 */
}


*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP",sans-serif;
  color:var(--ink);
  background:var(--bg);
}

.container{
  max-width:560px;
  margin:0 auto;
  height:100%;
  display:flex;
  flex-direction:column;
}

/* ====== 上部バー ====== */
.topbar{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  padding:8px 12px;
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
.title{ font-size:18px; margin:0; }
.clock{
  font-variant-numeric:tabular-nums;
  background:var(--panel);
  border:1px solid var(--border);
  padding:4px 8px;
  border-radius:999px;
  color:var(--muted);
}

/* ====== ステージ本体 ====== */
#stage{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:12px;
  overflow-y:auto;
  scrollbar-gutter:stable;
  scroll-behavior:smooth;
  overscroll-behavior:contain;
  background:var(--panel);
}
#stage::before{ content:""; flex:1 0 auto; }

/* ====== 導入部 ====== */
#intro{ padding:24px 12px; text-align:center; }
.hidden{ display:none !important; }
.narration{ margin:0 0 12px; color:var(--muted); }

/* ★ 名前入力 */
.namebox{
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px;
  margin:12px auto 16px;
  text-align:left;
  max-width:420px;
}
.namebox label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:6px;
}
.namebox input{
  width:100%;
  font-size:16px;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  outline:none;
}
.namebox input:focus{ border-color:#b9cbe0; }
.namebox .help{
  margin:6px 0 0;
  font-size:11px;
  color:var(--muted);
}

/* ====== ログ表示 (LINE風) ====== */
#log{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.log-item{ display:flex; gap:8px; align-items:flex-end; }
.log-item.me{ justify-content:flex-end; }
.log-item.other{ justify-content:flex-start; }
.log-item.narrator{ justify-content:center; }

.avatar{
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--border); background:#fff; color:#777;
  font-size:12px; font-weight:700; flex:0 0 auto; overflow:hidden;
}
.avatar:not(img){ display:inline-grid; place-items:center; }
.avatar.other{ display:block; object-fit:cover; }
.log-item.me .avatar{ display:none; }

.bubble{
  max-width:78%;
  padding:8px 10px; border-radius:14px; border:1px solid var(--border);
  position:relative; background:var(--other-bg); box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.me .bubble{ background:var(--me-bg); border-color:var(--me-border); }
.other .bubble{ background:var(--other-bg); }

.name{ font-size:11px; margin:0 0 2px; line-height:1; color:var(--other-name); }
.me .name{ color:var(--me-name); }

.text{ margin:0; line-height:1.7; word-break:break-word; }
.timechip{ font-size:10px; color:var(--muted); margin-top:4px; text-align:right; }

/* しっぽ（三角）— 位置は bottom を調整 */
.other .bubble::after{
  content:""; position:absolute; left:-6px; bottom:10px;
  width:10px; height:8px; background:var(--other-bg);
  border-left:1px solid var(--border); border-bottom:1px solid var(--border);
  transform:rotate(45deg);
}
.me .bubble::after{
  content:""; position:absolute; right:-6px; bottom:10px;
  width:10px; height:8px; background:var(--me-bg);
  border-right:1px solid var(--me-border); border-bottom:1px solid var(--me-border);
  transform:rotate(-45deg);
}

.bubble.pop{ animation:pop-in .16s ease-out; will-change:transform,opacity; }
@keyframes pop-in{
  0%{ transform:translateY(6px) scale(.98); opacity:0; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}

/* ====== スタンプ（フキダシの外に出す） ====== */
.stamp-block{
  display:flex;
  flex-direction:column;
  max-width:78%;
  margin-top:6px; /* バブルとスタンプの間隔 */
}
.log-item.me .stamp-block{ align-self:flex-end; }
.log-item.other .stamp-block{ align-self:flex-start; }
.log-item.narrator .stamp-block{ align-self:center; }

.stamp-img{
  display:block;
  width:auto;
  max-width:220px;   /* お好みで調整 */
  height:auto;
  border:none;
  background:transparent;
}

.stamp-time{
  font-size:10px;
  color:var(--muted);
  margin-top:4px;
  text-align:right;
}

/* ====== 選択肢 ====== */
#choices{
  position:static; background:transparent; border:none;
  padding:8px 0 12px; margin-top:8px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}

.btn{
  appearance:none; border:1px solid var(--border); background:#fff;
  border-radius:12px; padding:10px 12px; cursor:pointer;
}
.btn:hover{ filter:brightness(0.98); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn.primary{ background:var(--accent); border-color:transparent; color:#fff; }
.btn.ghost{ background:#fff; }

.toolbar{ margin-top:8px; display:flex; justify-content:flex-end; }

/* 選択肢を自分の発言風（ピンク＆同サイズ、中央寄せ） */
#choices .btn{
  background:var(--me-bg);
  border-color:var(--me-border);
  color:var(--ink);
  font-size:14px;
  max-width:78%;
  text-align:center;
}
/* えむすてーしょんリンク */
.link-mstation {
  display: block;
  margin: 4px auto 0;
  font-size: 12px;
  color: #555;
  text-align: center;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.link-mstation:hover {
  opacity: 1;
  color: #222;
  text-decoration: underline;
}