/* lp-voice-demo を lp.delne.jp/trial のデザインに寄せる上書き。
   .voice-demo-page-lp スコープ限定のため /voice-demo/(public) には影響しない。
   browser_voice_demo.css の後に読み込むこと（上書きのため）。 */

.voice-demo-page-lp {
    /* LP配色: ネイビー基調 + オレンジアクセント。背景は白一色（二段階表示にしない） */
    --voice-demo-public-navy: #0e2f54;
    --voice-demo-public-ink: #1f3a5f;
    --voice-demo-public-page: #ffffff;
    --lp-navy: #0e2f54;
    --lp-orange-top: #efab46;
    --lp-orange-bottom: #df8f1f;
    --lp-orange-strong: #d6862a;

    /* ヘッダを最上部に積むため縦並びへ */
    flex-direction: column;
    align-items: center;
    /* 旧固定ヘッダ(64px)は撤去済み。iframe フィットのため上余白なし */
    box-sizing: border-box;
    padding-top: 0;
}

/* ===== 上部ヘッダ（/auth/portal/ と同一。サブタイトル「音声デモ体験」のみ追加） ===== */
.portal-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: 64px; background: #002c5b;
    display: flex; align-items: center; padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
/* LP の `container mx-auto px-4`（中央寄せ・レスポンシブ最大幅＋左右16px）を再現 */
.portal-topbar-inner {
    width: 100%; margin: 0 auto; padding: 0 16px;
    display: flex; align-items: center; gap: 10px;
}
@media (min-width: 640px)  { .portal-topbar-inner { max-width: 640px;  } }
@media (min-width: 768px)  { .portal-topbar-inner { max-width: 768px;  } }
@media (min-width: 1024px) { .portal-topbar-inner { max-width: 1024px; } }
@media (min-width: 1280px) { .portal-topbar-inner { max-width: 1280px; } }
@media (min-width: 1536px) { .portal-topbar-inner { max-width: 1536px; } }
.portal-topbar .portal-topbar-logo {
    height: 48px; width: auto; display: block;
}
/* ロゴ右隣のサブタイトル（音声デモ体験） */
.portal-topbar .lp-demo-subtitle {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

/* 固定ヘッダ分だけ phone の最小高さを調整 */
.voice-demo-page-lp .voice-demo-public-phone {
    min-height: calc(100vh - 64px);
}

/* PC: カード(phone)を800pxに広げて余裕を持たせる（モバイルは従来どおり） */
@media (min-width: 768px) {
    .voice-demo-page-lp .voice-demo-public-phone {
        max-width: 800px;
    }

    /* PC版: 終了画面のrecap表示幅を画面(カード)の7割に */
    .voice-demo-page-lp .voice-demo-public-recap {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ボタン幅は現状維持: カードが広がっても伸ばさず、中央寄せでキャップ */
.voice-demo-page-lp .voice-demo-public-button {
    max-width: 372px;
    margin-left: auto;
    margin-right: auto;
}

/* カード内の重複ロゴは非表示（ヘッダにロゴがあるため） */
.voice-demo-page-lp .voice-demo-public-intro-logo {
    display: none;
}

/* lead の margin-top:auto（下寄せ）と基底の margin-bottom:40px を解除し、
   全ステージ共通のカード余白（24px）に完全一致させる（遷移時の上端ずれ防止） */
.voice-demo-page-lp .voice-demo-public-screen[data-public-stage="intro"] .voice-demo-public-lead {
    margin-top: 0;
    margin-bottom: 0; /* 全ステージ共通の余白なし（iframe フィット）に一致させる */
}

/* タイトル(電話に出られない…)を中央寄せ */
.voice-demo-page-lp #voice-demo-title {
    text-align: center;
}

/* リード文も中央寄せ */
.voice-demo-page-lp .voice-demo-public-sub {
    text-align: center;
}

/* 特徴リストの横幅を画面幅の70%にして中央寄せ */
.voice-demo-page-lp .voice-demo-public-facts {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

/* マイク許可画面: mic-stage の縦中央寄せを解除（ボタン位置は cta-full の auto margin で制御） */
.voice-demo-page-lp .voice-demo-public-screen[data-public-stage="mic"] .voice-demo-public-mic-stage {
    justify-content: flex-start;
}

/* カード外形（高さ540px）と上端位置（margin 24px）を全ステージで完全固定。
   基底CSSのステージ個別 margin / flex:1（伸長）をここで一括無効化し、
   画面遷移でカードの位置・サイズが一切動かないことを保証する */
.voice-demo-page-lp .voice-demo-public-screen .lp-demo-card {
    flex: 0 0 auto;
    margin: 0 auto; /* iframe 埋め込みでカードが枠いっぱいに出るよう余白なし（全ステージ共通） */
    position: relative; /* 開始ボタンの絶対配置の基準 */
}

/* マイク許可画面: 戻るボタンと「マイクを許可して始める」ボタンの間を30px空ける */
.voice-demo-page-lp .voice-demo-public-screen[data-public-stage="mic"] .voice-demo-public-backlink {
    padding-top: 30px;
}

/* 開始ボタンをイントロ／マイク許可の両画面で同一Y座標に固定（絶対配置）。
   カード高は540px固定のため、遷移してもボタンが1pxも動かない */
.voice-demo-page-lp .voice-demo-public-screen[data-public-stage="intro"] .voice-demo-public-cta,
.voice-demo-page-lp .voice-demo-public-screen[data-public-stage="mic"] .voice-demo-public-cta-full {
    position: absolute;
    top: 356px;
    left: 22px;
    right: 22px;
    width: auto; /* cta-full の width:100% を打ち消す（left/right で幅決定＝カード中心に一致） */
    margin: 0;
}

/* マイク拒否時は通常の開始ボタンを警告欄内の再試行ボタンとして共用する */
.voice-demo-page-lp .voice-demo-public-permission-help {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.voice-demo-page-lp .voice-demo-public-permission-help > p {
    display: none;
}

.voice-demo-page-lp .voice-demo-public-permission-help.is-visible {
    display: block;
}

.voice-demo-page-lp .voice-demo-public-permission-help.is-visible::before {
    content: "";
    position: absolute;
    top: 220px;
    right: 3px;
    bottom: 98px;
    left: 3px;
    border: 1px solid #f6c9c7;
    border-radius: 14px;
    background: #fdecec;
    box-sizing: border-box;
}

.voice-demo-page-lp .voice-demo-public-permission-help.is-visible > p {
    display: block;
    position: absolute;
    top: 236px;
    right: 19px;
    left: 19px;
    z-index: 1;
    max-width: none;
    margin: 0;
    text-align: center;
}

.voice-demo-page-lp .voice-demo-public-permission-help.is-visible .voice-demo-public-cta-full {
    z-index: 1;
}

/* マイク画面の「戻る」はカード内下端に係留（CTAが絶対配置になったため明示） */
.voice-demo-page-lp .voice-demo-public-screen[data-public-stage="mic"] .voice-demo-public-backlink {
    margin-top: auto;
}

/* ===== アクセントをオレンジへ ===== */
.voice-demo-page-lp .voice-demo-public-eyebrow,
.voice-demo-page-lp .voice-demo-public-lead em,
.voice-demo-page-lp .voice-demo-public-ended em {
    color: var(--lp-orange-strong);
}

.voice-demo-page-lp .voice-demo-public-fact span {
    background: rgba(232, 155, 52, 0.16);
}

.voice-demo-page-lp .voice-demo-public-fact span::after {
    border-left-color: var(--lp-orange-strong);
    border-bottom-color: var(--lp-orange-strong);
}

/* 特徴は入れ子ボックスにせずフラットに（カードと同じ白一色＝二段階表示にしない） */
.voice-demo-page-lp .voice-demo-public-fact {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 6px 0;
    box-shadow: none;
}

/* ===== 全フェーズ共通カード（切替時に枠を動かさず連続表示） ===== */
/* 各ステージの内側コンテナを同一カードに揃える。max-width / min-height / margin / padding を
   固定し、フェーズ切替で枠がぶれず中身だけ差し替わるようにする。 */
.voice-demo-page-lp .lp-demo-card {
    /* 幅・高さ・位置をフェーズ間で固定（min-height ではなく固定 height）。
       内容がはみ出す場合はカード内スクロールにして枠サイズを変えない。 */
    width: 100%;
    max-width: 560px;
    height: 540px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 24px auto;
    box-sizing: border-box;
    /* 縦flex: 操作ボタン群を margin-top:auto でカード下部に固定し、位置をフェーズ間で一定に */
    display: flex;
    flex-direction: column;
    /* カード背景は添付（lp.delne.jp の体験カード）と同系の淡いブルー（上が明るい微グラデーション） */
    background: linear-gradient(180deg, #e9f1fa 0%, #dce8f4 100%);
    border: 1px solid #d7e4f1;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
    padding: 28px 22px 26px;
}

/* フェーズ切替を連続的に見せる: せり上がりアニメ無効化＋カードを上寄せ・中央に統一 */
.voice-demo-page-lp .voice-demo-public-screen {
    justify-content: flex-start;
    align-items: center;
    animation: none;
}

/* 各フェーズの操作ボタン群をカード下部に固定（位置をフェーズ間で一定に）。
   intro/mic は .voice-demo-public-cta、active は .voice-demo-public-endbar。 */
.voice-demo-page-lp .lp-demo-card .voice-demo-public-cta,
.voice-demo-page-lp .lp-demo-card .voice-demo-public-endbar {
    margin-top: auto;
}

/* カードタイトル「1分でわかる無料体験デモ」（eyebrow → 見出しへ昇格） */
.voice-demo-page-lp .lp-demo-card-title {
    margin: 0 0 16px;
    color: var(--lp-navy);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: center;
}

/* カード内では特徴リストを全幅にして余白を最適化（外側の70%指定を上書き） */
.voice-demo-page-lp .lp-demo-card .voice-demo-public-facts {
    width: 100%;
}

/* ===== CTA(primary) を LP のオレンジ・ピル・矢印＋立体プレス演出に ===== */
.voice-demo-page-lp .voice-demo-public-button-primary {
    background: linear-gradient(180deg, var(--lp-orange-top) 0%, var(--lp-orange-bottom) 100%);
    color: #ffffff;
    border-radius: 999px;
    /* 下方向の濃いオレンジで立体的な厚み + ソフトな影 */
    box-shadow: 0 6px 0 #b86f1f, 0 12px 18px -7px rgba(214, 134, 42, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.voice-demo-page-lp .voice-demo-public-button-primary::after {
    content: "\2192"; /* → */
    margin-left: 10px;
    font-weight: 800;
}

/* ホバー: 厚みを縮めて沈み込ませる（押し込む演出） */
.voice-demo-page-lp .voice-demo-public-button-primary:hover:not(:disabled),
.voice-demo-page-lp .voice-demo-public-button-primary:focus-visible:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 3px 0 #b86f1f, 0 6px 12px -6px rgba(214, 134, 42, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.voice-demo-page-lp .voice-demo-public-button-primary:active:not(:disabled) {
    transform: translateY(6px);
    box-shadow: 0 0 0 #b86f1f, inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ===== 戻るボタン: 青の立体ボタン（スクリーンショット準拠）＋押し込み演出 ===== */
.voice-demo-page-lp .voice-demo-public-backlink {
    /* 戻るボタンと「AIと会話を始める」ボタンの間の余白を従来(24px)の1/3に */
    margin-top: 0;
    padding-top: 8px;
}

.voice-demo-page-lp .voice-demo-public-backlink a,
.voice-demo-page-lp .voice-demo-public-backlink button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 30px;
    border: 0;
    border-bottom: 0;
    border-radius: 999px;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    background: linear-gradient(180deg, #5ea0e6 0%, #3f86d6 100%);
    box-shadow: 0 5px 0 #2e6cb0, 0 8px 14px rgba(47, 108, 176, 0.35);
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.voice-demo-page-lp .voice-demo-public-backlink a::before,
.voice-demo-page-lp .voice-demo-public-backlink button::before {
    content: "\2190"; /* ← */
    font-weight: 800;
}

.voice-demo-page-lp .voice-demo-public-backlink a:hover,
.voice-demo-page-lp .voice-demo-public-backlink a:focus-visible,
.voice-demo-page-lp .voice-demo-public-backlink button:hover,
.voice-demo-page-lp .voice-demo-public-backlink button:focus-visible {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #2e6cb0, 0 4px 8px rgba(47, 108, 176, 0.3);
}

.voice-demo-page-lp .voice-demo-public-backlink a:active,
.voice-demo-page-lp .voice-demo-public-backlink button:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 #2e6cb0, 0 2px 5px rgba(47, 108, 176, 0.3);
}

/* 見出し（ネイビー）はベースの --voice-demo-public-ink 上書きで反映 */


/* ===== 通話中画面の調整（2026-07-27） ===== */
/* 顔アイコンを従来比8割へ縮小し、タイマーリングをアイコンに密着するサイズへ揃える */
.voice-demo-page-lp .voice-demo-public-ring {
    width: 150px;
    height: 150px;
    min-height: 150px;
    flex: 0 0 auto; /* カードのflex圧縮で潰れると中の SVG(150px) と中心がズレるため固定 */
}
.voice-demo-page-lp .voice-demo-public-call-logo {
    width: 126px;
    height: 126px;
}
.voice-demo-page-lp .voice-demo-public-ring.is-speaking::before,
.voice-demo-page-lp .voice-demo-public-ring.is-speaking::after {
    width: 140px;
    height: 140px;
}

/* 「あなた（傾聴中）」等の話者名表示は出さない */
.voice-demo-page-lp .voice-demo-public-call-status p {
    display: none;
}

/* 発話テキストは横方向に広げ、高さは固定（3行分）。
   長文はエリア内スクロールにして停止ボタンの位置を動かさない */
.voice-demo-page-lp .voice-demo-public-call-status h2 {
    width: min(100%, 460px);
    max-width: 460px;
    min-height: 5.2em;
    max-height: 5.2em;
    overflow-y: auto;
}

/* 「停止」ラベルは出さない（ボタンのみ。aria-label で読み上げは維持） */
.voice-demo-page-lp .voice-demo-public-endbar > span {
    display: none;
}


/* アバターとリングの中心を厳密一致させる（2026-07-27）。
   グリッド配置・枠線の box-sizing 差・拡縮アニメの影響を全て排除し、
   アバターをリング容器の幾何中心へ絶対配置で固定する */
.voice-demo-page-lp .voice-demo-public-ring .voice-demo-public-call-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    box-sizing: border-box;
    animation: none;
}
.voice-demo-page-lp .voice-demo-public-ring.is-speaking::before,
.voice-demo-page-lp .voice-demo-public-ring.is-speaking::after {
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -70px;
}


/* 開始ボタンの左右センタリングを明示（絶対配置コンテナ内でも常に中央） */
.voice-demo-page-lp .voice-demo-public-screen[data-public-stage="intro"] .voice-demo-public-cta .voice-demo-public-button,
.voice-demo-page-lp .voice-demo-public-screen[data-public-stage="mic"] .voice-demo-public-cta-full .voice-demo-public-button {
    width: 100%;
    max-width: 372px;
    margin-left: auto;
    margin-right: auto;
}


/* 通話中画面の余白圧縮（リング150px固定化に伴いカード内スクロールを出さない） */
.voice-demo-page-lp .voice-demo-public-timer {
    margin-top: 8px;
}
.voice-demo-page-lp .voice-demo-public-call-status {
    margin-top: 10px;
}
.voice-demo-page-lp .voice-demo-public-endbar {
    padding-top: 8px;
}


/* ===== iframe フィット化（2026-07-27）: LP 側の枠 = カード(560x540)ぴったりにする ===== */
/* ページ側の余白を全廃し、カードが iframe ビューポートを満たすようにする */
.voice-demo-page-lp {
    justify-content: flex-start; /* 縦flex化した body の垂直センタリング(上下32px)を解除 */
}
.voice-demo-page-lp .voice-demo-public-phone {
    padding: 0;
    max-width: none;
    min-height: 0;
}
.voice-demo-page-lp .voice-demo-public-screen {
    min-height: 0;
}
/* ステータスバー（絶対配置・カードに重なる）と mic/connecting 時の下部余白 88px は
   埋め込みでは 540px 固定枠を壊すため無効化する */
.voice-demo-page-lp .voice-demo-public-statusbar {
    display: none;
}
.voice-demo-page-lp .voice-demo-public-phone[data-public-current-stage="mic"] .voice-demo-public-screen.is-on,
.voice-demo-page-lp .voice-demo-public-phone[data-public-current-stage="connecting"] .voice-demo-public-screen.is-on {
    padding-bottom: 0;
}