/* demo.css — 「和食 さくら」customer-response demo (inbox style)
   Reuses tokens & components from styles.css */

/* CJK-friendly stack so 한글 / 简体中文 render crisply without extra web fonts */
.cjk{font-family:"Noto Sans JP","Hiragino Sans","Apple SD Gothic Neo","PingFang SC",system-ui,sans-serif}

/* ── demo notice banner ──────────────────────────────────── */
.demo-banner{background:var(--ink);color:#fff}
.demo-banner .wrap{display:flex;align-items:center;justify-content:center;gap:10px;
  padding-block:11px;font-size:13px;letter-spacing:.06em;color:rgba(255,255,255,.86)}
.demo-banner .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px var(--accent-tint);flex-shrink:0}

/* ── intro ───────────────────────────────────────────────── */
.demo-intro{text-align:center;max-width:720px;margin-inline:auto}
.demo-intro .shop{font-family:var(--serif);font-weight:700;letter-spacing:.08em}
.demo-intro .sect-lead{margin-inline:auto;margin-top:14px}

/* ── thread (one inquiry → reply pair) ───────────────────── */
.threads{display:flex;flex-direction:column;gap:clamp(28px,4vw,44px);max-width:780px;
  margin-inline:auto}
.thread{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden}
.thread-hd{display:flex;align-items:center;gap:12px;padding:18px 24px;
  border-bottom:1px solid var(--line-soft);background:var(--paper)}
.thread-hd .who{font-weight:700;font-size:15px;color:var(--ink)}
.thread-hd .lang-chip{margin-left:auto}
.thread-body{padding:24px clamp(18px,3vw,28px) 22px}

/* chat bubbles */
.bubble{max-width:86%;border-radius:16px;padding:15px 18px;line-height:1.75;
  font-size:15.5px;position:relative}
.bubble .who-sm{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:6px;opacity:.6}
.bubble + .bubble{margin-top:16px}
/* incoming (customer) — left, neutral */
.bubble.in{background:var(--paper-2);color:var(--ink-2);border-bottom-left-radius:5px;
  margin-right:auto}
/* reply (us) — right, accent-edged card */
.bubble.out{background:var(--card);color:var(--ink);border:1px solid var(--accent-tint-2);
  border-bottom-right-radius:5px;margin-left:auto;box-shadow:var(--shadow-sm)}
.bubble.out .who-sm{color:var(--accent-deep);opacity:1}
/* small Japanese gloss under a foreign bubble */
.gloss{font-size:12.5px;color:var(--muted);line-height:1.7;margin-top:7px;
  padding-left:14px;border-left:2px solid var(--line)}
.bubble.in .gloss{margin-top:10px}

/* in-reply booking pill (placeholder for the prepay link) */
.book-pill{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  background:var(--accent);color:#fff;font-size:13px;font-weight:700;letter-spacing:.04em;
  padding:9px 16px;border-radius:999px;box-shadow:var(--shadow-sm);transition:background .2s}
.book-pill:hover{background:var(--accent-deep)}
.book-pill svg{flex-shrink:0}

/* ── owner-note strip — the relief framing ───────────────── */
.owner-note{display:flex;gap:14px;align-items:flex-start;
  background:var(--accent-tint);border-top:1px solid var(--accent-tint-2);
  padding:16px clamp(18px,3vw,28px)}
.owner-note .tag{flex-shrink:0;font-family:var(--serif);font-weight:700;font-size:12px;
  letter-spacing:.1em;color:var(--accent-deep);background:var(--card);
  padding:5px 12px;border-radius:999px;border:1px solid var(--accent-tint-2);white-space:nowrap}
.owner-note p{font-size:14px;line-height:1.8;color:var(--ink-2)}

/* ── money-shot highlight (item ④) ───────────────────────── */
.thread.spotlight{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint),var(--shadow)}
.spotlight-badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  padding:8px 16px;border-radius:999px;box-shadow:var(--shadow-sm)}
.spotlight-badge .star{color:var(--accent)}
.spotlight-wrap{max-width:780px;margin-inline:auto;text-align:center}

/* ── translated menu card (⑤) ────────────────────────────── */
.menu-card{max-width:600px;margin-inline:auto;background:var(--card);
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:clamp(28px,5vw,44px)}
.menu-card .menu-hd{text-align:center;margin-bottom:26px;padding-bottom:20px;
  border-bottom:1px solid var(--line-soft)}
.menu-card .menu-hd .ja{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:.1em}
.menu-card .menu-hd .en{font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-deep);font-weight:700;margin-top:8px}
.menu-row{padding:16px 0;border-bottom:1px solid var(--line-soft)}
.menu-row:last-child{border-bottom:0}
.menu-row .ja{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink)}
.menu-row .en{font-size:14.5px;color:var(--ink-2);line-height:1.7;margin-top:4px}

/* ── closing CTA ─────────────────────────────────────────── */
.demo-cta{text-align:center}
.demo-cta h3{font-size:clamp(23px,3.8vw,32px);line-height:1.5;margin-bottom:24px}
.demo-cta .actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:center}
.demo-back{display:block;text-align:center;margin-top:26px}
.demo-back a{font-size:14px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.demo-back a:hover{color:var(--ink)}

@media (max-width:560px){
  .bubble{max-width:100%}
  .owner-note{flex-direction:column;gap:9px}
}