/* ==========================================================================
   リアルなスマホ（2026-09-25）— iPhone 型の本体＋LINE のトーク画面
   クラスは全部 rp- 接頭辞（既存の .phone / .line-* とぶつけない）
   大きさは --rp-w（本体の幅）だけで決まる。中身は em 単位＝幅に比例して縮む
   ========================================================================== */
.rp{--rp-w:280px;--rp-talk:#8caad3;--rp-me:#86dd7a;--rp-accent:#06c755;
  position:relative;width:var(--rp-w);aspect-ratio:9/19.5;flex:0 0 auto;margin:0 auto;
  font-size:calc(var(--rp-w) / 30);
  border-radius:calc(var(--rp-w) * .165);
  padding:calc(var(--rp-w) * .034);
  background:linear-gradient(150deg,#5b5b60 0%,#26262a 18%,#3a3a3f 48%,#18181b 78%,#48484d 100%);
  box-shadow:0 0 0 1px #0a0a0b, inset 0 0 0 1px rgba(255,255,255,.22), inset 0 0 0 calc(var(--rp-w) * .012) #0b0b0c,
    0 2.6em 5em -2em rgba(6,46,28,.42), 0 1.2em 2.4em -1.2em rgba(0,0,0,.35)}
/* 側面のボタン（左＝消音・音量2つ／右＝電源） */
.rp::before,.rp::after{content:"";position:absolute;width:.34em;background:linear-gradient(90deg,#1c1c1f,#4a4a50);border-radius:.2em}
.rp::before{left:-.3em;top:19%;height:7.6%;box-shadow:0 5.2em 0 0 #2e2e33,0 10.4em 0 0 #2e2e33}
.rp::after{right:-.3em;top:27%;height:11%;background:linear-gradient(270deg,#1c1c1f,#4a4a50)}
.rp-scr{position:relative;width:100%;height:100%;overflow:hidden;background:#fff;
  border-radius:calc(var(--rp-w) * .131);display:flex;flex-direction:column;color:#111;
  font-family:-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;line-height:1.5;letter-spacing:0}
.rp-island{position:absolute;z-index:6;top:1.05em;left:50%;translate:-50% 0;width:31%;height:2.75em;border-radius:2em;background:#000}
.rp-glass{position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06) 100%)}
/* 状態バー */
.rp-sbar{flex:0 0 auto;height:4.9em;display:flex;align-items:flex-end;justify-content:space-between;padding:0 2.3em .75em 2.9em;background:#fff;font-weight:600;font-size:1em}
.rp-time{font-size:1.45em;letter-spacing:-.01em;line-height:1;font-variant-numeric:tabular-nums}
.rp-ind{display:flex;align-items:center;gap:.45em}
.rp-ind svg{display:block;height:1.15em;width:auto}
/* LINE の見出し */
.rp-head{flex:0 0 auto;display:flex;align-items:center;gap:.5em;padding:.5em 1.1em .85em .8em;background:#fff;border-bottom:1px solid #e6e8eb}
.rp-back{display:flex;align-items:center;gap:.1em;font-size:1.3em;color:#111}
.rp-back svg{height:1.25em;width:auto}
.rp-back b{font-weight:500;font-size:.85em}
.rp-name{flex:1;min-width:0;display:flex;align-items:center;gap:.35em;font-weight:700;font-size:1.5em;white-space:nowrap;overflow:hidden}
.rp-badge{flex:0 0 auto;width:.8em;height:.8em;border-radius:50%;background:var(--rp-accent);position:relative}
.rp-badge::after{content:"";position:absolute;left:.26em;top:.15em;width:.22em;height:.4em;border:solid #fff;border-width:0 .09em .09em 0;transform:rotate(45deg)}
.rp-hic{display:flex;gap:1.1em;color:#111}
.rp-hic svg{height:1.75em;width:auto;display:block}
/* トーク */
.rp-talk{flex:1 1 auto;min-height:0;overflow:hidden;position:relative;background:var(--rp-talk);padding:1.1em .9em .6em}
.rp-stack{display:flex;flex-direction:column;gap:.85em;transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.rp-day{align-self:center;font-size:1.02em;color:#fff;background:rgba(18,30,50,.28);padding:.1em .95em;border-radius:1em;line-height:1.7}
.rp-m{display:flex;gap:.55em;align-items:flex-end;max-width:100%;opacity:0;transform:translateY(.8em);transition:opacity .26s ease,transform .26s ease}
.rp-m.on{opacity:1;transform:none}
.rp-m.me{align-self:flex-end;flex-direction:row-reverse}
.rp-ava{flex:0 0 3.2em;width:3.2em;height:3.2em;border-radius:50%;background:#06c755;color:#fff;align-self:flex-start;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1em;letter-spacing:.02em;box-shadow:0 0 0 .12em rgba(255,255,255,.7)}
.rp-b{position:relative;max-width:17.2em;padding:.75em 1.05em;border-radius:1.55em;background:#fff;font-size:1.36em;line-height:1.55;color:#111;word-break:auto-phrase;overflow-wrap:anywhere}
.rp-m.me .rp-b{background:var(--rp-me)}
.rp-m.bot .rp-b::before,.rp-m.me .rp-b::before{content:"";position:absolute;top:.55em;width:.7em;height:.7em;background:inherit}
.rp-m.bot .rp-b::before{left:-.28em;clip-path:polygon(100% 0,0 25%,100% 100%)}
.rp-m.me .rp-b::before{right:-.28em;clip-path:polygon(0 0,100% 25%,0 100%)}
.rp-meta{flex:0 0 auto;font-size:.88em;line-height:1.35;color:rgba(255,255,255,.92);text-align:right;white-space:nowrap}
.rp-m.bot .rp-meta{text-align:left}
.rp-dots .rp-b{display:flex;gap:.4em;padding:1em 1.2em}
.rp-dots .rp-b i{width:.5em;height:.5em;border-radius:50%;background:#8a94a3;animation:rpblink 1.1s infinite}
.rp-dots .rp-b i:nth-child(2){animation-delay:.15s}.rp-dots .rp-b i:nth-child(3){animation-delay:.3s}
@keyframes rpblink{0%,80%,100%{opacity:.25}40%{opacity:1}}
/* Flex（予約の確認カード） */
.rp-flex{width:17.6em;border-radius:1.4em;overflow:hidden;background:#fff;font-size:1.2em;line-height:1.55;color:#111;box-shadow:0 .1em .2em rgba(0,0,0,.08)}
.rp-flex-h{background:#06c755;color:#fff;font-weight:700;padding:.65em 1em;font-size:.98em}
.rp-flex-b{padding:.75em 1em .85em}
.rp-flex-b small{display:block;color:#6a7280;font-size:.84em}
.rp-flex-b strong{display:block;font-size:1.22em;font-weight:800;letter-spacing:.01em;margin-top:.15em}
.rp-flex-btn{margin:0 .8em .8em;border-radius:.6em;background:#06c755;color:#fff;font-weight:700;text-align:center;padding:.55em 0;font-size:.95em}
/* クイックリプライ（空き枠の候補） */
.rp-qr{flex:0 0 auto;display:flex;gap:.55em;padding:.6em .9em;background:var(--rp-talk);overflow:hidden;
  max-height:5em;transition:max-height .28s ease,opacity .2s ease,padding .28s ease}
.rp-qr.off{max-height:0;opacity:0;padding-top:0;padding-bottom:0}
.rp-qr span{flex:0 0 auto;border:1px solid rgba(0,0,0,.14);background:#fff;color:#1f2a37;border-radius:2em;padding:.35em 1.15em;font-size:1.25em;font-weight:600;
  transition:background .2s ease,color .2s ease,transform .2s ease}
.rp-qr span.on{background:#06c755;border-color:#06c755;color:#fff;transform:scale(1.05)}
/* 入力欄 */
.rp-dock{flex:0 0 auto;display:flex;align-items:center;gap:.95em;padding:.75em 1.15em .6em;background:#fff;border-top:1px solid #e6e8eb;color:#3a3f47}
.rp-dock svg{height:1.95em;width:auto;display:block;flex:0 0 auto}
.rp-inp{flex:1;min-width:0;height:2.9em;border-radius:1.5em;background:#f1f3f5;display:flex;align-items:center;justify-content:space-between;padding:0 .9em;font-size:1.2em;color:#9aa1ab}
.rp-inp svg{height:1.4em}
/* リッチメニュー */
.rp-rm{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d9dde2;border-top:1px solid #d9dde2}
.rp-rm span{background:#fff;min-height:4.6em;display:flex;align-items:center;justify-content:center;font-size:1.2em;font-weight:700;color:#1f2a37;padding:.3em}
.rp-rm .main{grid-column:1 / -1;background:#06c755;color:#fff;min-height:3.9em;font-size:1.35em}
.rp-rmbar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:.3em;height:3.3em;background:#fff;border-top:1px solid #e6e8eb;font-size:1.15em;font-weight:600;color:#1f2a37}
.rp-home{flex:0 0 auto;height:2.4em;background:#fff;display:flex;align-items:center;justify-content:center}
.rp-home i{width:34%;height:.45em;border-radius:1em;background:#111}
.rp-rm + .rp-rmbar + .rp-home,.rp-dock + .rp-home{background:#fff}
/* ミニアプリの見出し（右上のカプセル） */
.rp-mhead{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:.6em 1em .8em 1.3em;background:#fff;border-bottom:1px solid #e6e8eb}
.rp-mhead b{font-size:1.45em}
.rp-cap{display:flex;align-items:center;gap:.9em;border:1px solid #d9dde2;border-radius:2em;padding:.3em .9em;color:#111;font-size:1.1em;line-height:1}
.rp-scr .mini-ui{flex:1 1 auto;min-height:0;border:0;border-radius:0}
/* スクロールの案内 */
.rp-hint{position:absolute;z-index:8;left:50%;bottom:15%;translate:-50% 0;white-space:nowrap;font-size:1.15em;font-weight:700;color:#fff;
  background:rgba(12,24,40,.72);padding:.5em 1em;border-radius:2em;transition:opacity .25s ease;pointer-events:none}
.rp-hint.off{opacity:0}
/* 止めて進める区間の位置は JS が付ける（sticky と高さ） */
@media(prefers-reduced-motion:reduce){
  .rp-m{opacity:1;transform:none;transition:none}
  .rp-dots{display:none}
  .rp-hint{display:none}
}
/* 置き場所ごとの大きさと殻 */
.rp-hero{--rp-w:272px}
.hero .rp-track-n{display:contents}          /* 2列のときは殻が無いのと同じ（.hero-visual がそのまま列になる） */
@media(max-width:900px){
  .hero .rp-track-n{display:block;order:-1}  /* 1列のときは殻が先頭（旧 .hero-visual の order:-1 を殻へ） */
  .rp-hero{--rp-w:min(262px,68vw)}
}
.split > .rp-track-n{min-width:0}
.mode-mock .rp,.miniapp-split .rp{margin:0 auto}
.rp-m.me .rp-meta{order:1}                   /* 送った側の「既読・時刻」は吹き出しの左（本物の LINE と同じ） */
.rp-dots:not(.on){display:none}               /* 「入力中…」は出ている間だけ場所を取る */
/* ミニアプリ：本物の縦横比でも空きが出ないよう、中身を縦に広げてボタンを下端へ（実際のアプリと同じ置き方） */
.rp-scr .mini-ui{display:flex;flex-direction:column}
.rp-scr .mini-ui .mu-body{flex:1 1 auto;gap:1.3em;padding:1.4em 1.4em 1.6em}
.rp-scr .mini-ui .mu-btn{margin-top:auto}
/* 画面の低いノートパソコンでは、ヒーローのスマホを少し小さくして、区間ごと画面に収めて止める */
@media(min-width:901px) and (max-height:880px){ .rp-hero{--rp-w:236px} }
@media(min-width:901px) and (max-height:760px){ .rp-hero{--rp-w:212px} }