/* =============================================================
   チャットボットウェルカム画面 - 新仕様(ヒーロー画面と統一)
   - トラストバッジ(登録不要・無料 / ICFコーチング)
   - 2ステップカード(状態でチェック切替)
   - メインCTA + 「または」+ セカンダリCTA
   - 「もう一度診断する」テキストリンク(診断済みのみ)
   ============================================================= */

/* ===== ウェルカムラッパー ===== */
.cb-welcome-wrap {
    padding: 0.4rem 0.2rem;
}

/* ===== トラストバッジ ===== */
.cb-welcome-trust {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    font-size: 0.68rem;
    color: var(--color-text-light, #6a6a6a);
    margin-bottom: 1rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    line-height: 1.5;
}
.cb-welcome-trust-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary, #1D9E75);
    flex-shrink: 0;
}
.cb-welcome-trust-item {
    color: var(--color-text-light, #6a6a6a);
}
.cb-welcome-trust-sep {
    color: rgba(0, 0, 0, 0.15);
    margin: 0 0.1rem;
}

/* ===== 2ステップ(約3分) リード文(ヒーローと統一) ===== */
.cb-welcome-steps-lead {
    font-size: 0.72rem;
    color: var(--color-text-muted, #999);
    letter-spacing: 0.1em;
    margin: 0 0 0.55rem 0.4rem;
    font-weight: 500;
}

/* ===== 2ステップカード(チャットボット内) ===== */
.cb-welcome-steps {
    background: rgba(29, 158, 117, 0.04);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    margin-bottom: 1.2rem;
    border: 1px solid rgba(29, 158, 117, 0.10);
}
.cb-welcome-step {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.25rem 0;
    transition: opacity 0.3s ease;
}
.cb-welcome-step-num {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary-dark, #0F6E56);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    transition: all 0.3s ease;
}
.cb-welcome-step-body {
    flex: 1;
    min-width: 0;
}
.cb-welcome-step-title-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.cb-welcome-step-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text, #2c2c2c);
    line-height: 1.5;
    transition: color 0.3s ease;
}
.cb-welcome-step-desc {
    font-size: 0.7rem;
    color: var(--color-text-muted, #999);
    line-height: 1.5;
    margin-top: 0.25rem;
    font-weight: 400;
}
.cb-welcome-step-arrow {
    text-align: center;
    color: rgba(29, 158, 117, 0.5);
    font-size: 0.75rem;
    margin: 0.05rem 0 0.05rem 7px;
    line-height: 1;
}

/* --- 完了状態(チェックマーク + 「何度でも」バッジ) --- */
.cb-welcome-step.is-done {
    opacity: 0.75;
}
.cb-welcome-step.is-done .cb-welcome-step-num {
    background: #fff;
    border: 1.5px solid var(--color-primary, #1D9E75);
    color: var(--color-primary, #1D9E75);
    font-size: 0;
    position: relative;
}
.cb-welcome-step.is-done .cb-welcome-step-num::before {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-primary, #1D9E75);
    line-height: 1;
}

/* --- 「何度でも」バッジ --- */
.cb-step-repeat-badge {
    font-size: 0.6rem;
    color: var(--color-primary-dark, #0F6E56);
    background: var(--color-primary-bg, #E1F5EE);
    padding: 0.1rem 0.5rem;
    border-radius: 8px;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.5;
    flex-shrink: 0;
}

/* --- 次にやるステップ(ハイライト) --- */
.cb-welcome-step.is-next .cb-welcome-step-num {
    background: var(--color-primary-dark, #0F6E56);
    box-shadow: 0 0 0 3px rgba(29, 158, 117, 0.15);
}
.cb-welcome-step.is-next .cb-welcome-step-title {
    color: var(--color-primary-dark, #0F6E56);
    font-weight: 600;
}

/* --- ステップカードをクリッカブルに --- */
.cb-welcome-step-clickable {
    cursor: pointer;
    border-radius: 8px;
    margin: 0 -0.4rem;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    transition: background-color 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.cb-welcome-step-clickable:hover {
    background-color: rgba(29, 158, 117, 0.07);
}
.cb-welcome-step-clickable:active {
    transform: scale(0.99);
}
.cb-welcome-step-clickable:focus-visible {
    outline: 2px solid var(--color-primary, #1D9E75);
    outline-offset: 2px;
}

/* ===== メインCTAボタン ===== */
.cb-welcome-cta {
    width: 100%;
    padding: 0.9rem 1.1rem;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    font-family: inherit;
    border: none;
    text-align: center;
    line-height: 1.4;
    -webkit-tap-highlight-color: transparent;
}
.cb-welcome-cta:active { transform: scale(0.98); }
.cb-welcome-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cb-welcome-cta-label {
    line-height: 1.4;
}

/* メイン(緑グラデーション) */
.cb-welcome-cta-primary {
    background: linear-gradient(135deg, var(--color-primary, #1D9E75), var(--color-primary-dark, #0F6E56));
    color: #fff;
    box-shadow: 0 3px 10px rgba(29, 158, 117, 0.22);
}
.cb-welcome-cta-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(29, 158, 117, 0.30);
}

/* セカンダリ(アウトライン) */
.cb-welcome-cta-secondary {
    background: #fff;
    color: var(--color-primary-dark, #0F6E56);
    border: 1.5px solid rgba(29, 158, 117, 0.5);
    font-weight: 500;
}
.cb-welcome-cta-secondary:hover {
    background: var(--color-primary-bg, #E1F5EE);
    border-color: var(--color-primary, #1D9E75);
    transform: translateY(-1px);
}

/* ===== 「または」区切り ===== */
.cb-welcome-divider {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.9rem 0;
    color: var(--color-text-muted, #aaa);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}
.cb-welcome-divider::before,
.cb-welcome-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
}
.cb-welcome-divider span {
    flex-shrink: 0;
}

/* ===== 「もう一度診断する」リンク(診断済みのみ表示・おしゃれ版) ===== */
.cb-welcome-redo-wrap {
    margin-top: 1.1rem;
}
.cb-welcome-redo-lead {
    font-size: 0.7rem;
    color: var(--color-text-muted, #999);
    text-align: center;
    margin-bottom: 0.4rem;
    letter-spacing: 0.05em;
    line-height: 1.4;
}
.cb-welcome-redo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: rgba(29, 158, 117, 0.04);
    border: 1px dashed rgba(29, 158, 117, 0.3);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--color-primary-dark, #0F6E56);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.4;
}
.cb-welcome-redo:hover {
    background: rgba(29, 158, 117, 0.08);
    border-color: rgba(29, 158, 117, 0.5);
    border-style: solid;
}
.cb-welcome-redo:active {
    transform: scale(0.98);
}
.cb-welcome-redo:focus-visible {
    outline: 2px solid var(--color-primary, #1D9E75);
    outline-offset: 2px;
}
.cb-welcome-redo-icon {
    flex-shrink: 0;
    color: var(--color-primary, #1D9E75);
    transition: transform 0.3s ease;
}
.cb-welcome-redo:hover .cb-welcome-redo-icon {
    transform: rotate(-8deg) scale(1.05);
}

/* =============================================================
   【統一CTAスタック】メイン1 + または + セカンダリ1
   各画面でこのコンポーネントを使えば、ヒーロー/ウェルカムと統一される
   ============================================================= */
.cb-cta-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0.6rem 0 0.8rem;
}

/* =============================================================
   【テキストリンク群】補助動作:メニューに戻る・閉じる など
   ============================================================= */
.cb-action-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.5rem;
    margin: 0.7rem 0 0.2rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.cb-action-link {
    background: transparent;
    border: none;
    color: var(--color-text-muted, #999);
    font-size: 0.72rem;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-family: inherit;
    line-height: 1.5;
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.12);
    text-underline-offset: 3px;
    transition: color 0.2s ease, background-color 0.2s ease, text-decoration-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.cb-action-link:hover {
    color: var(--color-primary-dark, #0F6E56);
    text-decoration-color: var(--color-primary, #1D9E75);
    background-color: rgba(29, 158, 117, 0.04);
}
.cb-action-link:active {
    transform: scale(0.98);
}
.cb-action-link:focus-visible {
    outline: 2px solid var(--color-primary, #1D9E75);
    outline-offset: 2px;
}
.cb-action-link-sep {
    color: rgba(0, 0, 0, 0.15);
    font-size: 0.7rem;
    user-select: none;
    line-height: 1.5;
}

/* =============================================================
   ★ 「キャラに話を聴いてもらう」=メインリンク(濃いめ・大きめ)
   ★ 「もう一度診断する」=サブリンク(薄め・小さめ)
   2026/05 追加: 診断済みウェルカム画面のリンク階層化
   ============================================================= */
.cb-action-links-main {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 0.9rem;
    margin-top: 0.9rem;
    margin-bottom: 0.2rem;
}
.cb-action-links-sub {
    border-top: none;
    padding-top: 0.1rem;
    margin-top: 0.1rem;
    margin-bottom: 0.2rem;
}

/* メインリンク: 濃いめ・大きめ */
.cb-action-link-primary {
    color: var(--color-text, #3d3832) !important;
    font-size: 0.86rem !important;
    font-weight: 500;
    text-decoration-color: rgba(29, 158, 117, 0.3) !important;
    padding: 0.5rem 0.8rem !important;
}
.cb-action-link-primary:hover {
    color: var(--color-primary-dark, #0F6E56) !important;
    text-decoration-color: var(--color-primary, #1D9E75) !important;
}

/* サブリンク(もう一度診断): さらっと存在・小さめ・薄め */
.cb-action-link-muted {
    color: rgba(0, 0, 0, 0.42) !important;
    font-size: 0.7rem !important;
    text-decoration-color: rgba(0, 0, 0, 0.08) !important;
    padding: 0.3rem 0.55rem !important;
}
.cb-action-link-muted:hover {
    color: var(--color-text-muted, #999) !important;
    text-decoration-color: rgba(0, 0, 0, 0.2) !important;
}

/* =============================================================
   【キャラ紹介カード】孵化後のキャラからのメッセージ
   既存の独自インラインCSSをこのクラスに置き換え
   ============================================================= */
.cb-char-intro {
    background: var(--color-primary-bg, #E1F5EE);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 0.5rem;
}
.cb-char-intro-phase {
    font-size: 0.72rem;
    color: var(--color-primary-dark, #0F6E56);
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.cb-char-intro-from {
    font-size: 0.85rem;
    color: var(--color-text, #2c2c2c);
    line-height: 1.9;
}
.cb-char-intro-from strong {
    color: var(--color-primary-dark, #0F6E56);
}
.cb-char-intro-msg {
    font-size: 0.82rem;
    color: var(--color-text-light, #6a6a6a);
    line-height: 1.9;
    margin-top: 0.4rem;
    font-style: italic;
}

/* =============================================================
   【レスポンシブ調整】
   ============================================================= */
@media (max-width: 480px) {
    .cb-action-links {
        gap: 0.25rem 0.4rem;
    }
    .cb-action-link {
        font-size: 0.7rem;
        padding: 0.35rem 0.5rem;
    }
}

/* =============================================================
   【緊急修正】.gift-card-simple の中央揃え
   pet.js の showRegisterPrompt 等で使われる「シンプル型」giftカードの
   中身が左寄せになる問題を修正。
   元々の giftCardStyles(chatbot.js内動的注入)は showWorkDelivery 経由でないと
   注入されないため、ここで static に定義しておく。
   ============================================================= */
.gift-card-simple {
    text-align: center;
}
.gift-card-simple .gift-emoji {
    display: block;
    margin: 0 auto 0.4rem;
    font-size: 2rem;
    line-height: 1.2;
}
.gift-card-simple .gift-label {
    text-align: center;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}
.gift-card-simple .gift-hint {
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.9;
    color: var(--color-text, #444);
}
.gift-card-simple .gift-hint strong {
    color: var(--color-primary-dark, #0F6E56);
}
/* gift-card自体の基本スタイル(showWorkDeliveryを経由しないケース用) */
.gift-card {
    border-radius: 16px;
    margin: 0.5rem 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #ede8e0;
}
.gift-card.gift-card-simple {
    padding: 1.1rem 1.3rem;
}

/* =============================================================
   【第2便】お土産セルフケアのヒントカード
   カウンセラーから「あなたへの贈り物」として届くスペシャルカード
   ============================================================= */
@keyframes lcGiftAppear {
    0%   { opacity: 0; transform: translateY(12px) scale(0.96); }
    60%  { opacity: 1; transform: translateY(-2px) scale(1.01); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lcGiftIconFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-4px) rotate(2deg); }
}
@keyframes lcGiftRibbonShine {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

.lc-gift-work-card {
    /* 既存の livechat-msg と同等のレイアウト */
}
.lc-gift-body {
    font-size: 0.85rem;
    line-height: 1.85;
    color: var(--color-text, #2c2c2c);
    margin-bottom: 0.7rem;
    padding: 0.1rem 0.2rem;
}
.lc-gift-card-wrap {
    background: linear-gradient(135deg, #fffaf2 0%, #fef5e7 50%, #fef1e0 100%);
    border: 1px solid rgba(212, 165, 116, 0.35);
    border-radius: 16px;
    padding: 1.2rem 1.1rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(212, 165, 116, 0.18);
    animation: lcGiftAppear 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.lc-gift-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(
        90deg,
        #d4a574 0%,
        #f0c896 25%,
        #d4a574 50%,
        #f0c896 75%,
        #d4a574 100%
    );
    background-size: 200% 100%;
    animation: lcGiftRibbonShine 4s linear infinite;
}
.lc-gift-icon {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    display: inline-block;
    animation: lcGiftIconFloat 2.8s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(212, 165, 116, 0.3));
}
.lc-gift-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #8b6f47;
    margin-bottom: 0.4rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
}
.lc-gift-sub {
    font-size: 0.76rem;
    color: #a08363;
    line-height: 1.7;
    margin-bottom: 0.9rem;
}
.lc-gift-receive-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8rem 1rem;
    background: linear-gradient(135deg, var(--color-primary, #1D9E75), var(--color-primary-dark, #0F6E56));
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(29, 158, 117, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
    line-height: 1.4;
    -webkit-tap-highlight-color: transparent;
}
.lc-gift-receive-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(29, 158, 117, 0.32);
}
.lc-gift-receive-btn:active {
    transform: scale(0.98);
}
.lc-gift-receive-icon {
    font-size: 1rem;
    line-height: 1;
}
.lc-gift-note {
    font-size: 0.68rem;
    color: #b89a73;
    margin-top: 0.6rem;
    line-height: 1.5;
}

/* =============================================================
   【第2便】診断推奨カード(未診断ユーザー向け)
   ============================================================= */
.lc-recommend-diag-card {
}
.lc-rec-body {
    font-size: 0.85rem;
    line-height: 1.85;
    color: var(--color-text, #2c2c2c);
    margin-bottom: 0.7rem;
    padding: 0.1rem 0.2rem;
}
.lc-rec-card-wrap {
    background: linear-gradient(135deg, var(--color-primary-bg, #E1F5EE) 0%, #f0faf6 100%);
    border: 1px solid rgba(29, 158, 117, 0.25);
    border-radius: 14px;
    padding: 1.1rem 1rem 0.9rem;
    text-align: center;
    box-shadow: 0 2px 12px rgba(29, 158, 117, 0.10);
    animation: lcGiftAppear 0.5s ease-out;
}
.lc-rec-icon {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 0.4rem;
    display: inline-block;
}
.lc-rec-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-primary-dark, #0F6E56);
    margin-bottom: 0.4rem;
    line-height: 1.5;
}
.lc-rec-sub {
    font-size: 0.75rem;
    color: var(--color-text-light, #6a6a6a);
    line-height: 1.7;
    margin-bottom: 0.9rem;
}
.lc-rec-start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #fff;
    color: var(--color-primary-dark, #0F6E56);
    border: 1.5px solid var(--color-primary, #1D9E75);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    font-family: inherit;
    line-height: 1.4;
    -webkit-tap-highlight-color: transparent;
}
.lc-rec-start-btn:hover {
    background: var(--color-primary-bg, #E1F5EE);
    transform: translateY(-1px);
}
.lc-rec-start-btn:active {
    transform: scale(0.98);
}
.lc-rec-start-arrow {
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.2s ease;
}
.lc-rec-start-btn:hover .lc-rec-start-arrow {
    transform: translateX(3px);
}
.lc-rec-note {
    font-size: 0.66rem;
    color: var(--color-text-muted, #999);
    margin-top: 0.55rem;
    line-height: 1.5;
}

/* =============================================================
   【第2便】登録促しカード(showRegisterPrompt用・統一CTA形式)
   優しいトーンで中央揃え。深澤さんの「シンプル+静かなトーン」思想に準拠。
   ============================================================= */
@keyframes cbRegCardAppear {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
.cb-register-card {
    background: linear-gradient(135deg, #fffaf2 0%, #fff5e9 100%);
    border: 1px solid rgba(212, 165, 116, 0.3);
    border-radius: 14px;
    padding: 1.2rem 1.3rem 1.1rem;
    text-align: center;
    box-shadow: 0 2px 12px rgba(212, 165, 116, 0.12);
    animation: cbRegCardAppear 0.4s ease-out;
}
.cb-register-icon {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 0.5rem;
    display: inline-block;
}
.cb-register-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: #8b6f47;
    margin-bottom: 0.5rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
}
.cb-register-hint {
    font-size: 0.8rem;
    color: var(--color-text-light, #6a6a6a);
    line-height: 1.85;
    margin-bottom: 0.7rem;
}
.cb-register-hint strong {
    color: var(--color-primary-dark, #0F6E56);
    font-weight: 600;
}
.cb-register-note {
    font-size: 0.66rem;
    color: var(--color-text-muted, #b89a73);
    line-height: 1.5;
    padding-top: 0.5rem;
    border-top: 1px dashed rgba(212, 165, 116, 0.25);
    margin-top: 0.5rem;
}

/* =============================================================
   CTAボタン: 改行制御 + サブテキスト追加 (2026/05 追記)
   ----------------------------------------------------------------
   気づき質問への回答後など、ウェルカム画面と同じデザイン言語で
   CTAを出す画面で使う。
   1. ラベルが不自然な位置で改行されないよう日本語の文節単位で折り返す
   2. ボタンに2行構造(メインラベル + 小さな説明文 .cb-welcome-cta-sub)
      を持たせる。例:
        [💬] 無料チャットで話を聴いてもらう
             経験者コーチが返信します・通常30分以内
   ============================================================= */

/* ----- 0. ボタン本体の保険(はみ出し防止) ----- */
/* 万が一テキストが flex の幅を超えても、ボタン枠から飛び出さない */
.cb-welcome-cta {
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

/* ----- 1. ラベル文字を「文節単位」で折り返す ----- */
/* word-break: keep-all は欧文単語を分けない設定だが、CJK にも効いて
   助詞(を・に・が等)の前で折り返すような自然な改行になる。
   ★ display:block + width:100% で flex 親の中で確実に折り返させる。 */
.cb-welcome-cta .cb-welcome-cta-label {
    display: block;
    width: 100%;
    max-width: 100%;
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: break-word;
    line-height: 1.4;
    box-sizing: border-box;
}

/* ----- 2. アイコン + テキスト群(label + sub) のフレックス構造 ----- */
/* ★ サブテキスト付きでも【ウェルカム画面と同じ中央寄せレイアウト】を維持。
   ラベルを1行に保ち、その下にサブテキストを配置する縦並び構造。
   :has() に対応していないブラウザのために .cb-welcome-cta--with-sub も併用。 */
.cb-welcome-cta:has(.cb-welcome-cta-sub),
.cb-welcome-cta.cb-welcome-cta--with-sub {
    justify-content: center;   /* ★ ウェルカム画面と同じ中央寄せ */
    text-align: center;
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    gap: 0.6rem;               /* アイコンとテキストの間 */
    align-items: center;       /* ★ アイコンとテキスト群を縦中央に */
}

/* ★ サブテキスト付きの時、アイコンを少し大きく(18→20)して、
   ラベル+サブの縦長テキストとバランスを取る。アイコンSVGはcurrentColor指定なので、
   親のwidth/heightで描画サイズが決まる(SVG自身のwidth属性は無視させる)。 */
.cb-welcome-cta:has(.cb-welcome-cta-sub) .cb-welcome-cta-icon,
.cb-welcome-cta.cb-welcome-cta--with-sub .cb-welcome-cta-icon {
    width: 22px;
    height: 22px;
}
.cb-welcome-cta:has(.cb-welcome-cta-sub) .cb-welcome-cta-icon svg,
.cb-welcome-cta.cb-welcome-cta--with-sub .cb-welcome-cta-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* テキスト群 (label + sub をまとめる縦並びの箱) */
.cb-welcome-cta-text {
    display: flex;
    flex-direction: column;
    align-items: center;       /* ★ 中央寄せ */
    justify-content: center;
    gap: 0.15rem;
    flex: 0 1 auto;            /* ★ 必要な分だけ使う、伸びすぎない */
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
/* サブテキストがない場合(従来通り中央寄せの単一ラベル)はテキスト群も中央寄せに */
.cb-welcome-cta:not(:has(.cb-welcome-cta-sub)):not(.cb-welcome-cta--with-sub) .cb-welcome-cta-text {
    align-items: center;
    text-align: center;
}

/* ----- 3. サブテキストのスタイル ----- */
.cb-welcome-cta-sub {
    display: block;
    width: 100%;
    max-width: 100%;
    text-align: center;        /* ★ 中央寄せでウェルカム画面と整合 */
    font-size: 0.7rem;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.02em;
    word-break: keep-all;
    line-break: strict;
    overflow-wrap: break-word;
    box-sizing: border-box;
}
/* メイン(緑グラデ)ボタンのサブテキスト:白の透明度を下げる */
.cb-welcome-cta-primary .cb-welcome-cta-sub {
    color: rgba(255, 255, 255, 0.88);
}
/* セカンダリ(白枠)ボタンのサブテキスト:本文色をくすませる */
.cb-welcome-cta-secondary .cb-welcome-cta-sub {
    color: var(--color-text-muted, #888);
}

/* ----- 4. レスポンシブ:狭い画面(390px以下)では文字をさらに小さく ----- */
@media (max-width: 390px) {
    .cb-welcome-cta .cb-welcome-cta-label {
        font-size: 0.85rem;
    }
    .cb-welcome-cta-sub {
        font-size: 0.64rem;
    }
}

/* =============================================================
   統一CTAブロック共通スタイル (2026/05 追加)
   _smAddBotWithCta が出力する CTAブロック全体の余白制御
   ============================================================= */

/* CTA本体ブロック(本文との間に余白) */
.cb-cta-block {
    margin-top: 0.9rem;
}

/* 任意の追加intro文(CTAボタンの直前に短いガイド文を入れたい場合用) */
.cb-cta-intro {
    font-size: 0.78rem;
    color: var(--color-text-light, #888);
    line-height: 1.7;
    margin-bottom: 0.7rem;
}