/* =====================================================================
   ハイライト式の部品 ― 相談の窓口（Instagram DM）を開くしくみ（予約担当）
   sections/booking/line/style.css
   - ここにあるのは「コピーしました」の知らせ（.line-toast）だけ。
     「DM で相談」のボタンの形は base.css の .btn .btn--dm を使う（作り直さない。design.md 2.・8.）。
   - 値は tokens.css の変数だけ（design.md「共通ルール」）。
   ===================================================================== */

/* 「コピーしました」の知らせ（design.md 23. 予約担当）
   地 --color-text・字 --color-bg・丸い形・--fs-sm・--shadow-2・--z-toast。下の「DM で相談」より上に出す。
   line/script.js が <div class="line-toast" data-line-toast role="status"> に文を入れる */
.line-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--cta-bar) + env(safe-area-inset-bottom, 0px) + var(--space-2));
  z-index: var(--z-toast);
  width: max-content;
  max-width: calc(100% - var(--gutter) * 2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-lg); /* 1行なら丸い形（高さの半分以上）、2行（コピーできなかったとき）は角の丸い四角 */
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-body);
  text-align: center;
  box-shadow: var(--shadow-2);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, var(--space-2));
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}
.line-toast:empty { padding: 0; }
.line-toast.is-shown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    visibility 0s;
}
/* 文ごとのまとまり（script が「。」の所で区切る）。文の切れ目で改行し、文の中で折れるのは1行に入らないときだけ */
.line-toast-part { display: inline-block; }