{{-- ステップ配信情報 --}}
<div class="fd-card" v-if="selectedOption.value === 'step'">
    <h2 class="fd-card-title">ステップ配信情報</h2>
    <div style="position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:9999;min-width:360px;">
        <lme-alert v-model="showStopScenarioAlert" type="success" title="成功" message="ステップが停止になりました"></lme-alert>
    </div>

    {{-- ステップ名 --}}
    <div class="fd-card-section">
        <div class="fd-card-section-header">
            <span class="fd-card-section-title">ステップ名</span>
            <a v-if="stepInfo.scenarioRunning" class="fd-card-section-link" @click="openTriggerModal">ステップ開始のトリガー</a>
        </div>
        <div class="fd-card-section-row">
            <span class="fd-card-section-value" v-if="!stepInfo.scenarioRunning">停止中</span>
            <span class="fd-card-section-value" v-else>@{{ stepInfo.scenarioRunning.name_scenario }}</span>
            <lme-button-default type="secondary" size="md" @click="openManualChangeModal">手動変更</lme-button-default>
        </div>
    </div>

    {{-- 配信ステータス --}}
    <div class="fd-card-section" v-if="stepInfo.is_following === 1">
        <div class="fd-card-section-header">
            <span class="fd-card-section-title">配信ステータス</span>
        </div>
        <div class="fd-card-section-row">
            <lme-tag text="配信中" type="primary" size="md"></lme-tag>
            <lme-button-flat type="primary" size="md" @click="openForceStopModal">強制停止</lme-button-flat>
        </div>
    </div>

    {{-- 配信済み通数 --}}
    <div class="fd-card-section" v-if="stepInfo.is_following === 1">
        <div class="fd-card-section-header">
            <span class="fd-card-section-title">配信済み通数</span>
        </div>
        <div class="fd-card-section-row">
            <span class="fd-card-section-value">@{{ stepInfo.current_step ? stepInfo.current_step + '通目' : '-' }}</span>
{{--            <span v-if="stepInfo.nextStepMessage && stepInfo.nextStepMessage.order">@{{ stepInfo.nextStepMessage.order }}通目</span>--}}
            <lme-button-default v-if="stepInfo.current_step" type="secondary" size="md" @click="openStepPreview">プレビュー</lme-button-default>
        </div>
    </div>

    {{-- 次回配信予定日時 --}}
    <div class="fd-card-section" v-if="stepInfo.is_following === 1">
        <div class="fd-card-section-header">
            <span class="fd-card-section-title">次回配信予定日時</span>
        </div>
        <div class="fd-card-section-row">
            <span class="fd-card-section-value" v-if="!stepInfo.nextStepMessage">停止中</span>
            <span class="fd-card-section-value" v-else>@{{ formatTriggerDate(stepInfo.nextStepMessage.send_time) }}</span>
        </div>
{{--        <div class="fd-card-section-row" v-if="stepInfo.nextStepMessage">--}}
{{--            <span class="fd-card-section-value">--}}
{{--                <span v-if="stepInfo.nextStepMessage.order">@{{ stepInfo.nextStepMessage.order }}通目</span>--}}
{{--                <span v-if="stepInfo.nextStepMessage.is_last_step == 1">最終</span>--}}
{{--                <span style="margin-left: 10px" v-if="stepInfo.templateNextStep">--}}
{{--                    @{{ getContentTemplate(stepInfo.templateNextStep) }}--}}
{{--                </span>--}}
{{--            </span>--}}
{{--        </div>--}}
    </div>
</div>

{{-- 配信履歴 --}}
<div class="fd-card" v-if="selectedOption.value === 'step'" style="padding: 24px 24px 0; margin-top: 24px;">
    <h2 class="fd-card-title" style="font-weight: 500;">配信履歴</h2>

    <div class="fd-history-list">
        <template v-for="item in broadcastHistoryItems">
            {{-- Row header --}}
            <div
                class="fd-history-item"
                :key="'row-' + item.id"
                @click="onBroadcastHistoryToggle(item)"
            >
                <span class="fd-history-name">@{{ item.name }}</span>
                <div class="fd-history-tags">
                    <lme-tag :text="'配信開始　' + item.start_date" type="default" size="md"></lme-tag>
                    <lme-tag :text="'配信終了　' + item.end_date" type="default" size="md"></lme-tag>
                    <lme-tag
                        :text="item.status === 'sending' ? '配信中' : (item.stop_status_label || '配信済み')"
                        :type="item.status === 'sending' ? 'primary' : 'default'"
                        size="md"
                        :class="{ 'fd-tag-done': item.status !== 'sending', 'fd-tag-clickable': isStopBadge(item) }"
                        style="min-width: 80px; justify-content: center;"
                        @clicked="isStopBadge(item) && openStopTriggerModal(item)"
                    ></lme-tag>
                    <span class="fd-history-caret" :class="{ 'is-expanded': expandedHistoryId === item.id }">
                        <lme-icon size="16" file_name="caret-down-filled" color="#878A92"></lme-icon>
                    </span>
                </div>
            </div>

            {{-- Expanded detail --}}
            <div
                v-if="expandedHistoryId === item.id"
                class="fd-history-detail"
                :key="'detail-' + item.id"
            >
                <a class="fd-history-trigger-link" @click.stop="openTriggerModalHistory(item)">ステップ開始のトリガー</a>

                <div class="fd-history-table">
                    {{-- Header row --}}
                    <div class="fd-history-row fd-history-row--head">
                        <div class="fd-history-col fd-history-col--date">配信日時</div>
                        <div class="fd-history-col fd-history-col--count">通数</div>
                        <div class="fd-history-col fd-history-col--message">メッセージ</div>
                        {{-- <div class="fd-history-col fd-history-col--status">
                            開封情報
                            <svg width="14" height="14" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="flex-shrink: 0;">
                                <circle cx="8" cy="8" r="7" stroke="#878A92" stroke-width="1.2"/>
                                <path d="M6.5 6a1.5 1.5 0 1 1 2.3 1.3c-.5.3-.8.6-.8 1.2M8 11v.01" stroke="#878A92" stroke-width="1.2" stroke-linecap="round"/>
                            </svg>
                        </div> --}}
                        <div class="fd-history-col fd-history-col--action">ステータス</div>
                    </div>

                    {{-- Data rows --}}
                    <div
                        v-for="(row, idx) in (broadcastHistoryDetails[item.id] || [])"
                        :key="idx"
                        class="fd-history-row"
                        :class="{ 'is-highlighted': row.highlighted }"
                    >
                        <div class="fd-history-col fd-history-col--date">
                            <span>@{{ row.date }}</span>
                            <span>(@{{ row.day }})</span>
                            <span>@{{ row.time }}</span>
                        </div>
                        <div class="fd-history-col fd-history-col--count">@{{ row.count }}</div>
                        <div class="fd-history-col fd-history-col--message">
                            <a v-if="row.is_action_preview" class="fd-action-preview-link" style="color: #878A92" @click.stop="onBroadcastPlayAction(row)">
                                <span style="color: #878A92; font-size: 12px;">アクションプレビュー</span>
                            </a>
                            <span v-else style="display: block; line-height: 16px; max-height: 32px; overflow: hidden; text-overflow: ellipsis;">@{{ row.message }}</span>
                        </div>
                        {{-- <div class="fd-history-col fd-history-col--status">
                            <span>@{{ row.open_info }}</span>
                        </div> --}}
                        <div class="fd-history-col fd-history-col--action">
                            <button v-if="row.status_type !== 'error' && row.status_type !== 'target_no'" type="button" class="fd-history-play-btn" @click.stop="onBroadcastPlay(row)">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="9" cy="9" r="8" stroke="#1677FF" stroke-width="1.2"/>
                                    <path d="M7.5 6L12 9L7.5 12V6Z" fill="#1677FF"/>
                                </svg>
                            </button>
                            <span class="fd-action-label" :class="{ 'is-primary': row.action_status === 'scheduled' }">
                                @{{ row.status_label }}
                            </span>
                        </div>
                    </div>
                </div>

                <div class="fd-history-more" v-if="broadcastHistoryMeta[item.id] && broadcastHistoryMeta[item.id].has_more">
                    <lme-button-ghost size="sm" @click="onBroadcastHistoryLoadMore(item)">もっと見る</lme-button-ghost>
                </div>
            </div>
        </template>

        <div v-if="!broadcastHistoryItems.length" class="fd-event-history-empty">まだデータがありません</div>
    </div>

    <div class="fd-card-pagination" style="margin: 0 -24px;">
        <pagination
            :pagination="broadcastHistoryPagination"
            :is_limit="true"
            :arr_limit="[10, 50, 100]"
            end_text_limit="件表示"
            @change_page="onBroadcastHistoryPageChange"
            @change_limit="onBroadcastHistoryLimitChange"
        ></pagination>
    </div>
</div>

{{-- Step message preview drawer (for scheduled scenario_step_time rows) --}}
<lme-drawer
    v-if="selectedOption.value === 'step'"
    v-model="showStepMsgPreviewDrawer"
    width="420px"
    title="プレビュー"
>
    <div class="lme-drawer-content fd-action-capture-preview">
        <lme-tab-horizontal
            v-model="stepMsgPreviewItem.preview_tab_id"
            :tabs="[{ id: 'message', label: 'メッセージ' }, { id: 'action', label: 'アクション' }]"
            size="md"
        ></lme-tab-horizontal>

        {{-- メッセージ tab --}}
        <div v-if="stepMsgPreviewItem.preview_tab_id === 'message'"
             class="fd-action-capture-preview-pane fd-acp-messages scrollable">
            <div v-if="stepMsgPreviewItem.preview_loading" class="fd-acp-empty">読み込み中…</div>
            <template v-else-if="stepMsgPreviewItem.preview.messages.length">
                <template v-for="(msg, mIdx) in stepMsgPreviewItem.preview.messages">
                    <div v-if="msg.type == 1" :key="'sm-' + mIdx" class="fd-acp-bubble">
                        <span style="white-space: pre-wrap; word-break: break-word;">@{{ msg.content }}</span>
                    </div>
                    <div v-else-if="msg.type == 3 || msg.type == 7" :key="'sm-' + mIdx" class="fd-acp-image">
                        <img :src="(typeof msg.content === 'string' && msg.content.startsWith('http')) ? msg.content : ((msg.image_server || '{{ env('URL_SERVER_MEDIA') }}') + msg.content)" alt=""/>
                    </div>
                    <div v-else-if="msg.type == 6" :key="'sm-' + mIdx" class="fd-acp-sticker">
                        <img v-if="msg.content && msg.content.stickerId"
                             :src="'https://stickershop.line-scdn.net/stickershop/v1/sticker/' + msg.content.stickerId + '/ANDROID/sticker.png'" alt=""/>
                    </div>
                    <div v-else-if="msg.type == 4" :key="'sm-' + mIdx" class="fd-acp-video">
                        <video controls preload="metadata">
                            <source :src="(typeof msg.content === 'string' && msg.content.startsWith('http')) ? msg.content : ('{{ env('URL_SERVER_MEDIA_B2', env('URL_SERVER_MEDIA')) }}' + msg.content)">
                        </video>
                    </div>
                    <div v-else-if="msg.type == 5" :key="'sm-' + mIdx" class="fd-acp-audio">
                        <audio controls preload="metadata" v-if="msg.content && msg.content.filePath">
                            <source :src="msg.content.filePath.startsWith('http') ? msg.content.filePath : ('{{ env('URL_SERVER_MEDIA') }}' + msg.content.filePath)">
                        </audio>
                    </div>
                    <div v-else-if="msg.type == 2" :key="'sm-' + mIdx" class="fd-acp-buttons mess-button">
                        <div class="box-scl-button">
                            <div v-if="msg.content && msg.content.type_button == 1"
                                 v-for="(carousel, k) in msg.content.data" :key="'b1-' + mIdx + '-' + k" class="carousel">
                                <div class="question_wap">
                                    <div class="head_buttons">
                                        <p v-if="carousel.thumbnail_path">
                                            <img :src="carousel.thumbnail_path.startsWith('http') ? carousel.thumbnail_path : ((carousel.image_server || '{{ env('URL_SERVER_MEDIA') }}') + carousel.thumbnail_path)" alt=""/>
                                        </p>
                                        <p class="buttons_title text-left" style="white-space: pre-wrap; font-weight: 300;">@{{ carousel.title }}</p>
                                        <p class="buttons_content text-left" style="white-space: pre-wrap; font-weight: bold;">@{{ carousel.text }}</p>
                                    </div>
                                    <div class="answer_button">
                                        <p v-for="(btn, bi) in carousel.buttons" :key="'b1b-' + bi" class="btn_modal_preview">@{{ btn.label }}</p>
                                    </div>
                                </div>
                            </div>
                            <div v-if="msg.content && msg.content.type_button == 2"
                                 v-for="(carousel, k) in msg.content.data" :key="'b2-' + mIdx + '-' + k" class="carousel">
                                <div class="question_wap btn-type2-preview">
                                    <div class="head_buttons" style="padding: 10px 10px 0 10px; border: 0;">
                                        <p v-if="carousel.thumbnail_path" style="width: 100%; margin-bottom: 10px; overflow: hidden; border: 1px solid #dddddd; border-radius: 5px;">
                                            <img :src="carousel.thumbnail_path.startsWith('http') ? carousel.thumbnail_path : ((carousel.image_server || '{{ env('URL_SERVER_MEDIA') }}') + carousel.thumbnail_path)" alt="" style="width: 100%;"/>
                                        </p>
                                        <div v-if="carousel.title || carousel.text" style="border: 1px solid #E0E0E0; border-radius: 5px; padding: 10px; text-align: center;">
                                            <p v-if="carousel.title" style="white-space: pre-wrap;" :style="[{ color: carousel.title_color }, carousel.is_title_bold == 1 ? {'font-weight':'bold'} : {'font-weight':'normal'}]">@{{ carousel.title }}</p>
                                            <div v-if="carousel.title && carousel.text" style="border-bottom: 1px solid #707070; margin: 8px 0; height: 1px;"></div>
                                            <p v-if="carousel.text" style="white-space: pre-wrap;" :style="[{ color: carousel.text_color }, carousel.is_text_bold == 1 ? {'font-weight':'bold'} : {'font-weight':'normal'}]">@{{ carousel.text }}</p>
                                        </div>
                                    </div>
                                    <div class="answer_button" style="padding: 0 10px 10px 10px; text-align: center;">
                                        <p v-for="(btn, bi) in carousel.buttons" :key="'b2b-' + bi" class="btn_modal_preview"
                                           style="border-radius: 3px; font-weight: bold; margin-top: 10px;"
                                           :style="{ color: btn.label_color, backgroundColor: btn.label_bg }">@{{ btn.label }}</p>
                                    </div>
                                </div>
                            </div>
                            <div v-if="msg.content && msg.content.type_button == 3"
                                 v-for="(carousel, k) in msg.content.data" :key="'b3-' + mIdx + '-' + k" class="carousel">
                                <div class="question_wap" style="width: 100%; background: #FFFFFF; box-shadow: 0 0 5px #0000001A; border-radius: 10px;">
                                    <div v-if="carousel.thumbnail_path" style="margin: auto; width: 100%; overflow: hidden; position: relative;">
                                        <img :src="carousel.thumbnail_path.startsWith('http') ? carousel.thumbnail_path : ((carousel.image_server || '{{ env('URL_SERVER_MEDIA') }}') + carousel.thumbnail_path)" alt="" style="width: 100%;"/>
                                    </div>
                                </div>
                            </div>
                            <div v-if="msg.content && msg.content.type_button == 4" :key="'b4-' + mIdx" class="carousel">
                                <div class="question_wap" style="width: 100%; box-shadow: 0 0 5px #0000001A; border-radius: 10px; background: #D9DBE7; padding: 3px;">
                                    <div style="background: #FFFFFF; border-radius: 5px; margin: 7px;">
                                        <div v-if="msg.content.flag_type_content_quick_reply == 1" style="margin: 0 auto; overflow: auto; border-radius: 5px;">
                                            <div class="text-left" style="white-space: pre-line; word-wrap: break-word;">@{{ msg.content.text }}</div>
                                        </div>
                                        <div v-if="msg.content.flag_type_content_quick_reply == 2">
                                            <img class="w-full" :src="(msg.content.content && msg.content.content.startsWith('http')) ? msg.content.content : ((msg.content.image_server || '{{ env('URL_SERVER_MEDIA') }}') + msg.content.content)" alt=""/>
                                        </div>
                                    </div>
                                    <div class="container-btn-quick-reply">
                                        <div v-for="(btn, bi) in msg.content.buttons" :key="'b4b-' + bi">@{{ btn.label.length > 8 ? btn.label.substring(0, 5) + '...' : btn.label }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-else-if="msg.type == 8" :key="'sm-' + mIdx" class="fd-acp-bubble fd-acp-location">
                        <p class="temp_name"><i class="fas fa-flag"></i> @{{ msg.content.title }}</p>
                        <p class="location_address">@{{ msg.content.address }}</p>
                    </div>
                    <div v-else-if="msg.type == 9" :key="'sm-' + mIdx" class="fd-acp-introduction">
                        <div class="message-intro">
                            <div class="content-btn font-semibold">@{{ msg.content && msg.content.content }}</div>
                            <div class="text-center p-3" style="background: #F8F8F8;">
                                <a class="text-[14px] text-[#5799DB] font-light" :href="msg.content && msg.content.url_addfriend" target="_blank">友だちに追加する</a>
                            </div>
                        </div>
                    </div>
                    <div v-else :key="'sm-' + mIdx" class="fd-acp-bubble fd-acp-bubble-other">
                        <span>[その他のメッセージ]</span>
                    </div>
                </template>
            </template>
            <div v-else class="fd-acp-empty">メッセージなし</div>
        </div>

        {{-- アクション tab --}}
        <div v-if="stepMsgPreviewItem.preview_tab_id === 'action'"
             class="fd-action-capture-preview-pane fd-acp-actions scrollable">
            <template v-if="stepMsgPreviewItem.preview.actions.length">
                <template v-if="item.type != 'text' && item.type != 'template'" v-for="(item, aIdx) in stepMsgPreviewItem.preview.actions">
                    <div :key="'sma-' + aIdx" class="wrap-item-action-herme">
                        <template v-if="item.type === 'richmenu'">
                            <div class="type"><div>リッチメニュー</div></div>
                            <div class="content-preview-action">
                                <div><span v-if="item.data.action != 1">@{{ item.display_name }}</span><span v-else>表示を停止</span></div>
                                <div><span v-if="item.data.action != 1">を表示</span></div>
                            </div>
                        </template>
                        <template v-else-if="item.type === 'scenario'">
                            <div class="type"><div>ステップ</div></div>
                            <div class="content-preview-action">
                                <div><span v-if="item.data.action == 1">停止</span><span v-else>@{{ item.display_name }}</span></div>
                                <div><span v-if="item.data.action == 2">を開始</span><span v-else-if="item.data.action == 3">を@{{ item.data.start_day }}日目から再開</span></div>
                            </div>
                        </template>
                        <template v-else-if="item.type === 'remind'">
                            <div class="type"><div>リマインド</div></div>
                            <div class="content-preview-action">
                                <div>@{{ item.data.remind_name }}</div>
                                <div><span v-if="item.data.type == 1">を開始</span><span v-else>を停止</span></div>
                            </div>
                        </template>
                        <template v-else-if="item.type === 'tag'">
                            <div class="type"><div>タグ</div></div>
                            <div class="content-preview-action">
                                <div><span v-for="(t, tIdx) in item.name_list" :key="'t-' + aIdx + '-' + tIdx">@{{ tIdx == 0 ? '' : '・' }}@{{ t.name }}</span></div>
                                <div><span v-if="item.data.action == 1">をつける</span><span v-else>をはずす</span></div>
                            </div>
                        </template>
                        <template v-else-if="item.type === 'bookmark'">
                            <div class="type"><div>ブックマーク</div></div>
                            <div class="content-preview-action">
                                <div><span v-if="item.data.action == 1">つける</span><span v-else>外す</span></div>
                                <div></div>
                            </div>
                        </template>
                        <template v-else-if="item.type === 'friend_info'">
                            <div class="type"><div>友だち情報<span v-if="item.data.type == 1">（選択肢）</span><span v-else-if="item.data.type == 2">（記述）</span><span v-else-if="item.data.type == 3">（年月日）</span><span v-else-if="item.data.type == 6">（ポイント）</span></div></div>
                            <div class="content-preview-action">
                                <div>@{{ item.display_name }}</div>
                                <div>
                                    <span v-if="item.data.type == 2 || item.data.type == 1"><span v-if="item.data.action == 1">の登録情報を削除</span><span v-else>に@{{ item.data.content }}を登録</span></span>
                                    <span v-else-if="item.data.type == 3"><span v-if="item.data.action == 1">の登録情報を削除</span><span v-else-if="item.data.action == 2">に@{{ item.data.content }}を登録</span><span v-else>に当日日付を登録</span></span>
                                </div>
                            </div>
                        </template>
                        <template v-else-if="item.type === 'compliant_status'">
                            <div class="type"><div>対応ステータス</div></div>
                            <div class="content-preview-action">
                                <div>@{{ item.data.action == 1 ? item.data.content : '外す' }}</div>
                                <div><span v-if="item.data.action == 1">をつける</span></div>
                            </div>
                        </template>
                        <template v-else-if="item.type === 'block'">
                            <div class="type"><div>ブロック・非表示</div></div>
                            <div class="content-preview-action">
                                <div><span v-if="item.data.action == 1">ブロックする</span><span v-else-if="item.data.action == 2">ブロック解除</span><span v-else-if="item.data.action == 3">再表示する</span><span v-else-if="item.data.action == 4">非表示にする</span></div>
                                <div></div>
                            </div>
                        </template>
                    </div>
                </template>
            </template>
            <div v-else class="fd-acp-empty">アクションなし</div>
        </div>

        <div class="fd-action-capture-preview-footer">
            <lme-button-flat size="md" @click="showStepMsgPreviewDrawer = false">閉じる</lme-button-flat>
        </div>
    </div>
</lme-drawer>

{{-- Trigger modal --}}
<div class="fd-trigger-modal-wrap" v-if="selectedOption.value === 'step'">
<lme-modal
    v-model="showTriggerModal"
    title="このステップの開始トリガー"
    :width="600"
    :mask-closable="true"
>
    <div class="content-action-md fd-trigger-content">
        <div class="fd-trigger-label">機能名</div>
        <div class="fd-trigger-value">@{{ triggerModalData.type_name }}</div>
        <div class="fd-trigger-divider"></div>
        <div class="fd-trigger-label">管理名</div>
        <div class="fd-trigger-value">@{{ triggerModalData.management_name || '-' }}</div>
        <div class="fd-trigger-divider"></div>
        <div class="fd-trigger-label">詳細</div>
        <div class="fd-trigger-value">@{{ triggerModalData.detail || '-' }}</div>
        <div class="fd-trigger-divider"></div>
        <div class="fd-trigger-label">トリガー稼働日時</div>
        <div class="fd-trigger-value">@{{ formatTriggerDate(triggerModalData.triggered_at) }}</div>
        <div class="fd-trigger-divider"></div>
    </div>
    <div class="fd-trigger-close-wrap">
        <button class="fd-trigger-close-btn" @click="showTriggerModal = false">閉じる</button>
    </div>
</lme-modal>
</div>

{{-- Stop trigger modal --}}
<div class="fd-trigger-modal-wrap" v-if="selectedOption.value === 'step'">
<lme-modal
    v-model="showStopTriggerModal"
    title="このステップの停止トリガー"
    :width="600"
    :mask-closable="true"
>
    <div class="content-action-md fd-trigger-content">
        <div class="fd-trigger-label">種類名</div>
        <div class="fd-trigger-value">@{{ stopTriggerModalData.stop_type_name || '-' }}</div>
        <div class="fd-trigger-divider"></div>
        <div class="fd-trigger-label">管理名</div>
        <div class="fd-trigger-value">@{{ stopTriggerModalData.stop_management_name || '-' }}</div>
        <div class="fd-trigger-divider"></div>
        <div class="fd-trigger-label">詳細</div>
        <div class="fd-trigger-value">@{{ stopTriggerModalData.stop_detail || '-' }}</div>
        <div class="fd-trigger-divider"></div>
        <div class="fd-trigger-label">トリガー稼働日時</div>
        <div class="fd-trigger-value">@{{ formatTriggerDate(stopTriggerModalData.stop_triggered_at) }}</div>
        <div class="fd-trigger-divider"></div>
    </div>
    <div class="fd-trigger-close-wrap">
        <button class="fd-trigger-close-btn" @click="showStopTriggerModal = false">閉じる</button>
    </div>
</lme-modal>
</div>

{{-- Manual stop history modal --}}
<lme-modal
    v-if="selectedOption.value === 'step'"
    v-model="showManualStopHistoryModal"
    :header="false"
    :width="800"
    :mask-closable="true"
>
    <div class="fd-manual-stop-modal">
        <div class="fd-manual-stop-header">
            <div class="fd-manual-stop-title-wrap">
                <span class="fd-manual-stop-title">手動停止履歴</span>
                <lme-tag
                    v-if="manualStopHistoryScenarioName"
                    :text="manualStopHistoryScenarioName"
                    type="default"
                    size="md"
                ></lme-tag>
            </div>
            <lme-button-ghost type="secondary" size="sm" icon @click="showManualStopHistoryModal = false">
                <lme-icon file_name="close-outlined"></lme-icon>
            </lme-button-ghost>
        </div>

        <div class="fd-manual-stop-body">
            <lme-table
                :columns="manualStopHistoryColumns"
                :data-source="manualStopHistoryRows"
                row-key="id"
                empty-text="まだデータがありません"
                max-height="320px"
            ></lme-table>
        </div>

        <div class="fd-manual-stop-footer">
            <lme-button-flat size="md" @click="showManualStopHistoryModal = false">閉じる</lme-button-flat>
        </div>
    </div>
</lme-modal>

{{-- Manual change modal --}}
<lme-modal
    v-if="selectedOption.value === 'step'"
    v-model="showManualChangeModal"
    title="ステップ配信の手動変更"
    :width="520"
    :mask-closable="false"
>
    <div class="fd-manual-modal">
        <p class="fd-manual-description">
            同時に配信できるステップは1つのみです。<br>
            ステップ配信中に別のステップ配信が開始されると、もともと流れていたステップが自動で停止します。
        </p>

        <div class="fd-manual-form">
            {{-- ステップ選択 (select) --}}
            <lme-select
                v-model="manualChangeForm.step_id"
                label="ステップ選択"
                :required="true"
                direction="vertical"
                placeholder="選択してください"
                :options="stepOptions"
                width="100%"
                @change="onManualStepChange"
            ></lme-select>

            {{-- 配信タイミング (radio — disabled until step selected) --}}
            <div class="fd-manual-field" :class="{ 'is-disabled': !manualChangeForm.step_id }">
                <label class="fd-manual-label">
                    ステップ選択 <span class="lme-text-danger">*</span>
                </label>
                <div class="lme-radio-list lme-radio-with-bg">
                    <lme-radio
                            v-model="manualChangeForm.timing"
                            :radio-value="'now'"
                            name="manual-timing"
                            label="今すぐ配信する"
                            :disabled="!manualChangeForm.step_id"
                    ></lme-radio>
                </div>
                <div class="lme-radio-list lme-radio-with-bg">
                    <lme-radio
                        v-model="manualChangeForm.timing"
                        :radio-value="'scheduled'"
                        name="manual-timing"
                        label="登録された時刻、経過時間で配信する"
                        :disabled="!manualChangeForm.step_id"
                    ></lme-radio>
                </div>
            </div>

            {{-- 配信日数 (input number — enabled only when timing='scheduled') --}}
            <div class="fd-manual-field" :class="{ 'is-disabled': !manualChangeForm.step_id || manualChangeForm.timing !== 'scheduled' }">
                <label class="fd-manual-label">
                    配信日数 <span class="lme-text-danger">*</span>
                </label>
                <div class="lme-flex lme-items-center" style="gap: 8px;">
                    <lme-input-number
                        v-model="manualChangeForm.days"
                        :min="0"
                        :disabled="!manualChangeForm.step_id || manualChangeForm.timing !== 'scheduled'"
                        placeholder="00"
                        width="80px"
                        size="lg"
                    ></lme-input-number>
                    <span class="fd-manual-suffix">日目から配信</span>
                </div>
            </div>
        </div>

        <div class="fd-manual-footer">
            <lme-button-flat size="lg" @click="showManualChangeModal = false">キャンセル</lme-button-flat>
            <lme-button-default
                type="primary"
                size="lg"
                :disabled="!manualChangeSubmittable"
                @click="onManualChangeSubmit"
            >配信登録</lme-button-default>
        </div>
    </div>
</lme-modal>

{{-- Force stop confirmation modal --}}
<lme-modal
    v-if="selectedOption.value === 'step'"
    v-model="showForceStopModal"
    :header="false"
    :width="480"
    :mask-closable="true"
>
    <div class="fd-force-stop-modal">
        <div class="fd-force-stop-header">
            <div class="fd-force-stop-title-wrap">
                <lme-icon size="24">
                    <svg preserveAspectRatio="none" overflow="visible" style="display: block;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g id="Icon/Warning">
                            <rect opacity="0" width="24" height="24" fill="var(--fill-0, black)"/>
                            <path d="M12.0003 22.4997C6.21041 22.4997 1.5 17.7897 1.5 12.0003C1.5 6.21041 6.21041 1.5 12.0003 1.5C17.7897 1.5 22.4997 6.21041 22.4997 12.0003C22.4997 17.7897 17.7897 22.4997 12.0003 22.4997ZM12.0003 15C11.38 15 10.8753 15.5047 10.8753 16.125C10.8753 16.7453 11.38 17.25 12.0003 17.25C12.6206 17.25 13.1253 16.7453 13.1253 16.125C13.1253 15.5047 12.6206 15 12.0003 15ZM11.4378 6.7497C11.3341 6.7497 11.2497 6.83408 11.2497 6.9378V13.3125C11.2497 13.4157 11.3341 13.4997 11.4378 13.4997H12.5628C12.666 13.4997 12.75 13.4157 12.75 13.3125V6.9378C12.75 6.83408 12.666 6.7497 12.5628 6.7497H11.4378Z" fill="var(--fill-0, black)"/>
                        </g>
                    </svg>
                </lme-icon>
                <span class="fd-force-stop-title">ステップを停止しますか？</span>
            </div>
            <lme-button-ghost type="secondary" size="sm" icon @click="showForceStopModal = false">
                <lme-icon>
                    <svg preserveAspectRatio="none" overflow="visible" style="display: block;" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g id="close-outlined">
                            <rect opacity="0" width="16" height="16" fill="var(--fill-0, #1F1F1F)"/>
                            <path d="M12.4978 2.59872C12.4982 2.59883 12.4985 2.599 12.4991 2.59964L13.4005 3.50104C13.4012 3.50168 13.4014 3.50198 13.4015 3.50236C13.4016 3.50271 13.4016 3.50308 13.4015 3.50343C13.4014 3.50379 13.4012 3.50409 13.4005 3.50473L8.90518 8.00009L13.4005 12.4955C13.4012 12.4961 13.4014 12.4964 13.4015 12.4967C13.4016 12.4971 13.4016 12.4975 13.4015 12.4978C13.4014 12.4982 13.4012 12.4985 13.4005 12.4991L12.4991 13.4005C12.4985 13.4012 12.4982 13.4014 12.4978 13.4015C12.4975 13.4016 12.4971 13.4016 12.4967 13.4015C12.4964 13.4014 12.4961 13.4012 12.4955 13.4005L8.00009 8.90518L3.50473 13.4005C3.50411 13.4012 3.50379 13.4014 3.50343 13.4015C3.50308 13.4016 3.5027 13.4016 3.50234 13.4015C3.502 13.4014 3.50168 13.4012 3.50104 13.4005L2.59964 12.4991C2.599 12.4985 2.59883 12.4982 2.59872 12.4978C2.59861 12.4975 2.59861 12.4971 2.59872 12.4967C2.59883 12.4964 2.599 12.4961 2.59964 12.4955L7.09498 8.00009L2.59964 3.50473C2.599 3.50411 2.59883 3.50379 2.59872 3.50343C2.59861 3.50308 2.59861 3.5027 2.59872 3.50234C2.59883 3.502 2.599 3.50168 2.59964 3.50104L3.50104 2.59964C3.50168 2.599 3.50198 2.59883 3.50236 2.59872C3.50271 2.59861 3.50308 2.59861 3.50343 2.59872C3.50379 2.59883 3.50409 2.599 3.50473 2.59964L8.00009 7.09498L12.4955 2.59964C12.4961 2.599 12.4964 2.59883 12.4967 2.59872C12.4971 2.59861 12.4975 2.59861 12.4978 2.59872Z" fill="var(--fill-0, #1F1F1F)"/>
                        </g>
                    </svg>
                </lme-icon>
            </lme-button-ghost>
        </div>

        <p class="fd-force-stop-message">配信中のステップが停止されますがよろしいですか？</p>

        <div class="fd-force-stop-footer">
            <lme-button-flat size="md" @click="showForceStopModal = false">キャンセル</lme-button-flat>
            <lme-button-risk type="primary" size="md" @click="onForceStopConfirm">停止する</lme-button-risk>
        </div>
    </div>
</lme-modal>