@extends('layout.v2.basic.main')
@section('title', '1:1チャット設定')

@push('css')
    <link rel="stylesheet" href="/lme-ui/src/css/reset.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/base.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/icon/icon.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/button/button.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/tab/tab.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/input/input.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/input/input-number.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/input/select.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/switch/switch.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/checkbox/checkbox.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/radio/radio.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/pagination/pagination.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/modal/modal.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/toast/toast.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/date-picker/date-picker.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/table/table.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/drawer/drawer.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/popover/popover.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/tooltip/tooltip.css?v={{ config('sns-line.version') }}">
    <link rel="stylesheet" href="/lme-ui/src/css/tag/tag.css?v={{ config('sns-line.version') }}">
    <style>
        /* ===== Page layout ===== */
        #chat-setting-v2 {
            display: flex;
            flex-direction: column;
            gap: var(--lme-pd-l);
            /* Fit gọn trong viewport: trừ chiều cao header cố định + padding trên/dưới (24px*2) của .layout-v2-content */
            height: calc(100vh - var(--lv2-header-height) - 48px);
            overflow: hidden;
            font-family: 'Noto Sans JP', sans-serif;
            font-size: var(--lme-text-md);
            color: var(--lme-text-default);
        }
        /* Modal wrapper (lme-modal) luôn nằm trong DOM với height 0 nhưng vẫn là flex item,
           khiến gap của #chat-setting-v2 tạo khoảng trống thừa ở dưới. Đưa ra khỏi flex flow.
           Modal khi mở dùng .lme-modal-root position:fixed nên không bị ảnh hưởng. */
        #chat-setting-v2 > .lme-modal-wrapper {
            position: absolute;
        }

        /* ===== Page header ===== */
        .cs-page-header {
            display: flex;
            align-items: center;
            gap: var(--lme-pd-m);
            flex-shrink: 0;
        }
        .cs-page-title {
            font-size: var(--lme-text-xl);
            font-weight: var(--lme-fw-medium);
            color: var(--lme-text-default);
            line-height: normal;
            margin: 0;
        }

        /* ===== Body: vertical tabs wrapper ===== */
        .cs-body {
            display: flex;
            flex: 1;
            min-height: 0;
            gap: var(--lme-pd-l);
        }

        /* ===== Right content panel ===== */
        .cs-content-panel {
            flex: 1;
            min-width: 0;
            min-height: 0;
            background: var(--lme-white);
            border-radius: var(--lme-radius-m);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .cs-content-inner {
            flex: 1;
            padding: var(--lme-pd-l);
            display: flex;
            flex-direction: column;
            gap: var(--lme-pd-m);
            overflow-y: auto;
        }
        .cs-section-title {
            font-size: var(--lme-text-lg);
            font-weight: var(--lme-fw-medium);
            color: var(--lme-text-secondary);
            margin: 0;
            line-height: normal;
        }
        .cs-section-desc {
            font-size: var(--lme-text-md);
            color: var(--lme-text-default);
            margin: 0;
            font-weight: var(--lme-fw-regular);
        }

        /* ===== Status row ===== */
        .cs-status-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: var(--lme-pd-m);
        }
        .cs-status-row {
            display: flex;
            align-items: center;
            gap: var(--lme-pd-m);
            position: relative;
        }
        .cs-drag-handle {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
            cursor: grab;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--lme-text-supplement);
        }
        .cs-drag-handle:active { cursor: grabbing; }
        .cs-drag-handle.disabled { opacity: 0.3; cursor: default; }
        .cs-status-input-wrap {
            width: 360px;
            flex-shrink: 0;
        }
        .cs-status-input-wrap .lme-input-wrapper { width: 100%; }
        .cs-status-input-wrap .lme-input {
            border-color: var(--status-color, var(--lme-border)) !important;
        }
        .cs-status-input-wrap .lme-counter { display: none; }
        /* Hiệu ứng kéo sort (SortableJS): placeholder mờ + item bay theo chuột.
           Hiệu ứng đẩy item ra do option animation: 150 lo. */
        .cs-status-ghost { opacity: 0.4; }
        .cs-status-chosen { cursor: grabbing; }
        .cs-status-drag { opacity: 0.95; }

        .cs-inline-row {
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
        }
        .cs-inline-controls {
            display: flex;
            align-items: center;
            gap: var(--lme-pd-m);
            width: 100%;
        }
        .cs-inline-counter {
            font-size: 12px;
            color: var(--lme-text-supplement);
            text-align: right;
            /* indent to align under the input (drag handle width + gap) */
            padding-left: calc(14px + var(--lme-pd-m));
            width: calc(14px + var(--lme-pd-m) + 360px);
        }
        #chat-setting-v2 .cs-status-delete:hover,
        #chat-setting-v2 .cs-inline-delete:hover {
            color: var(--lme-danger) !important;
            background-color: #fff1f0 !important;
        }
        #chat-setting-v2 .cs-inline-delete {
            color: var(--lme-text-default) !important;
        }

        /* ===== Color picker ===== */
        .cs-color-picker-wrap {
            position: relative;
            display: inline-flex;
            align-items: center;
        }
        .cs-color-circle {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: none;
            padding: 0;
            cursor: pointer;
            flex-shrink: 0;
        }
        .cs-color-picker-popover {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
            background: var(--lme-white);
            border: 1px solid var(--lme-divider);
            border-radius: var(--lme-radius-m);
            padding: var(--lme-pd-s);
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
            z-index: 200;
            display: flex;
            flex-wrap: wrap;
            gap: var(--lme-pd-xs);
            width: 180px;
        }
        .cs-color-swatch {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 2px solid transparent;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color 0.15s;
        }
        .cs-color-swatch:hover,
        .cs-color-swatch.selected {
            border-color: var(--lme-white);
            box-shadow: 0 0 0 2px currentColor;
        }

        /* ===== Content footer ===== */
        .cs-content-footer {
            border-top: 1px solid var(--lme-divider);
            padding: var(--lme-pd-m) var(--lme-pd-l);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-shrink: 0;
        }

        /* ===== Modal desc ===== */
        .cs-modal-desc {
            font-size: var(--lme-text-md);
            color: var(--lme-text-default);
            line-height: 22px;
            margin: 0;
            font-weight: var(--lme-fw-regular);
        }

        /* ===== Other tab content ===== */
        .cs-tab-pane { display: none; }
        .cs-tab-pane.active { display: flex; flex-direction: column; }

        /* Remove focus outline on date range picker */
        #chat-setting-v2 .lme-dp-range-trigger.lme-dp-input-focused input:focus {
            border-color: var(--lme-border) !important;
            box-shadow: none !important;
            outline: unset;
        }

        /* Restore lme-number-input height overridden by global CSS */
        #chat-setting-v2 .lme-number-input {
            height: 100% !important;
            box-sizing: border-box !important;
        }

        /* Restore lme-radio-box overridden by global CSS (bootstrap box-sizing + appearance) */
        #chat-setting-v2 .lme-radio-box {
            -webkit-appearance: none !important;
            appearance: none !important;
            width: 20px !important;
            height: 20px !important;
            min-width: 20px !important;
            max-width: 20px !important;
            flex-shrink: 0 !important;
            border-radius: 50% !important;
            box-sizing: border-box !important;
            margin: 0;
        }

        /* ===== Fade transition ===== */
        .fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; }
        .fade-enter, .fade-leave-to { opacity: 0; }

        /* ===== Q&A card (既読情報の表示 tab) ===== */
        .cs-qa-card {
            background: #F7F7F7;
            border-radius: var(--lme-radius-m);
            padding: var(--lme-pd-l);
            display: flex;
            flex-direction: column;
            gap: var(--lme-pd-m);
        }
        .cs-qa-row {
            display: flex;
            gap: var(--lme-pd-xs);
            align-items: flex-start;
        }
        .cs-qa-badge {
            width: 24px;
            height: 24px;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: var(--lme-text-md);
            font-weight: var(--lme-fw-regular);
            color: #fff;
            line-height: 1;
        }
        .cs-qa-badge--q { background: var(--lme-primary); }
        .cs-qa-badge--a { background: var(--lme-danger); }
        .cs-qa-text {
            flex: 1;
            font-size: var(--lme-text-md);
            font-weight: var(--lme-fw-regular);
            color: var(--lme-text-default);
            line-height: 1.6;
            margin: 0;
        }
        .cs-qa-answer {
            flex: 1;
            font-size: var(--lme-text-md);
            font-weight: var(--lme-fw-regular);
            color: var(--lme-text-default);
            line-height: 1.6;
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        .cs-qa-link {
            color: var(--lme-primary);
            text-decoration: underline;
        }

        [type='checkbox']:focus, [type='radio']:focus {
            box-shadow: none !important; outline: none !important;
        }


        /* ===== CSV Export Section ===== */
        @keyframes csv-spin {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }
        .csv-spinner {
            width: 80px;
            height: 80px;
            border: 6px solid var(--lme-divider);
            border-top-color: var(--lme-primary);
            border-radius: 50%;
            animation: csv-spin 1s linear infinite;
            flex-shrink: 0;
        }
        .csv-progress-wrap {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
        }
        .csv-progress-track {
            height: 2px;
            background: var(--lme-divider);
            border-radius: 1px;
            position: relative;
            width: 100%;
        }
        .csv-progress-bar {
            height: 2px;
            background: var(--lme-primary);
            border-radius: 32px;
            position: absolute;
            left: 0;
            top: 0;
            transition: width 0.3s ease;
        }
        .csv-progress-pct {
            font-size: var(--lme-text-md);
            font-weight: var(--lme-fw-regular);
            color: #878A92;
            text-align: center;
            width: 100%;
            margin: 0;
        }
        .csv-params-card {
            background: #F7F7F7;
            border-radius: var(--lme-radius-m);
            padding: var(--lme-pd-l);
            display: flex;
            flex-direction: column;
            gap: var(--lme-pd-m);
            /*width: 260px;*/
        }
        .csv-cancel-link {
            color: var(--lme-danger);
            font-size: var(--lme-text-md);
            font-weight: var(--lme-fw-regular);
            text-decoration: underline;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
            font-family: inherit;
            text-align: left;
            line-height: normal;
        }
        .csv-cancel-link:hover { opacity: 0.75; }

        /* ===== Pagination font-weight override ===== */
        #chat-setting-v2 .lme-pagination-select .lme-selected-option,
        #chat-setting-v2 .lme-pagination-select .lme-pageDropdown li,
        #chat-setting-v2 .lme-pagination .lme-pg-btn {
            font-weight: 400 !important;
        }

        /* ===== CSV 作成履歴 table: ellipsis on col 1 & 2 ===== */
        /* Bảng lịch sử co lại vừa chỗ trống còn lại của panel, để CHỈ còn scroll bên trong
           bảng (.lme-table-wrapper đã có overflow-y:auto + thead sticky). Nếu không có
           min-height:0 thì flex item lấy min-height:auto = full chiều cao bảng, đẩy dài
           .cs-content-inner sinh thêm scroll NGOÀI làm trôi luôn title/tab phía trên. */
        .csv-history-tbl {
            display: flex;
            flex-direction: column;
            min-height: 0;
        }
        .csv-history-tbl .lme-table-wrapper {
            flex: 1 1 auto;
            min-height: 0;
        }
        .csv-history-tbl .lme-table {
            table-layout: fixed;
        }
        .csv-history-tbl .lme-table-cell-ellipsis {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: var(--lme-text-default);
            font-size: 0.875rem;
            font-weight: 400;
            line-height: 1.375rem;
        }

        /* ===== CSV Step 1: Form layout ===== */
        .csv-step-header {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #F7F7F7;
            border-radius: var(--lme-radius-m);
            padding: 12px var(--lme-pd-m);
            width: 432px;
        }
        .csv-step-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            background: var(--lme-primary);
            border-radius: 50%;
            color: #fff;
            font-size: var(--lme-text-md);
            font-weight: var(--lme-fw-bold);
            flex-shrink: 0;
        }
        .csv-step-title {
            font-size: var(--lme-text-lg);
            font-weight: var(--lme-fw-medium);
            color: #222;
            line-height: normal;
        }
        .csv-step-block {
            display: flex;
            flex-direction: column;
            gap: var(--lme-pd-m);
            max-width: 432px;
            width: 432px;
        }
        .csv-filter-card {
            border: 1px solid var(--lme-divider);
            border-radius: var(--lme-radius-m);
            width: 100%;
        }
        .csv-filter-card-top {
            border-radius: var(--lme-radius-m) var(--lme-radius-m) 0 0;
            padding: var(--lme-pd-l);
            display: flex;
            flex-direction: column;
            gap: var(--lme-pd-m);
        }
        .csv-filter-card-bottom {
            border-top: 1px solid var(--lme-divider);
            border-radius: 0 0 var(--lme-radius-m) var(--lme-radius-m);
            padding: var(--lme-pd-l);
            /*display: flex;*/
        }
        .csv-filter-empty {
            flex: 1;
            background: #F7F7F7;
            border-radius: var(--lme-radius-xs);
            padding: var(--lme-pd-xs);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--lme-text-md);
            color: var(--lme-text-supplement);
        }
        .csv-target-card {
            border: 1px solid var(--lme-divider);
            border-radius: var(--lme-radius-m);
            padding: var(--lme-pd-l);
            display: flex;
            flex-direction: column;
            gap: var(--lme-pd-m);
            width: 100%;
        }
        /* History table — cột CSVデータ: mỗi action có 1 slot cố định trong grid.
           Dùng grid + grid-column tường minh (không phải flex) để khi 1 action bị ẩn
           (vd キャンセル済み không có nút プレビュー) thì các action còn lại vẫn giữ
           nguyên vị trí, thẳng hàng dọc với các dòng khác.
           Slot 1 = プレビュー (icon 24px), slot 2 = xoá (icon 24px), slot 3 = nút trạng thái. */
        .csv-action-cell {
            display: grid;
            grid-template-columns: 24px 24px auto;
            align-items: center;
            justify-items: start;
            justify-content: start;
            gap: var(--lme-pd-xs);
        }
        .csv-action-cell .csv-act-preview { grid-column: 1; }
        .csv-action-cell .csv-act-delete  { grid-column: 2; }
        /* Nút trạng thái (ダウンロード / キャンセル済み / 作成中) dùng chung 1 bề rộng
           để mọi dòng có nút bằng nhau, không nhảy theo độ dài chữ.
           .lme-button đã là flex + justify-content:center nên nội dung tự căn giữa. */
        .csv-action-cell .csv-act-main    { grid-column: 3; min-width: 130px; }

        /* History table: force circular shape on ghost button inside icon wrappers */
        .csv-preview-icon-btn > * { border-radius: 50% !important; }
        .csv-delete-icon-btn > * { border-radius: 50% !important; border: none !important; }

        /* History table: preview icon — blue fill */
        .csv-preview-icon-btn svg path,
        .csv-preview-icon-btn svg use,
        .csv-preview-icon-btn svg circle,
        .csv-preview-icon-btn svg rect { fill: #1677FF !important; }

        /* History table: delete icon — gray default, red circular hover */
        .csv-delete-icon-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
        }
        .csv-delete-icon-btn svg path,
        .csv-delete-icon-btn svg use,
        .csv-delete-icon-btn svg circle,
        .csv-delete-icon-btn svg rect { fill: var(--lme-text-supplement) !important; }
        .csv-delete-icon-btn:hover { background: #FFF1F0; }
        /* Cancel ghost button's own gray hover bg so only the red circle shows */
        .csv-delete-icon-btn:hover > * { background: transparent !important; }
        .csv-delete-icon-btn:hover svg path,
        .csv-delete-icon-btn:hover svg use,
        .csv-delete-icon-btn:hover svg circle,
        .csv-delete-icon-btn:hover svg rect { fill: #FF4D4F !important; }
        /* 作成中: nút xóa disabled — không pointer, không hover đỏ */
        .csv-delete-icon-btn.is-disabled { cursor: not-allowed; }
        .csv-delete-icon-btn.is-disabled:hover { background: transparent; }
        .csv-delete-icon-btn.is-disabled:hover svg path,
        .csv-delete-icon-btn.is-disabled:hover svg use,
        .csv-delete-icon-btn.is-disabled:hover svg circle,
        .csv-delete-icon-btn.is-disabled:hover svg rect { fill: var(--lme-text-supplement) !important; }

        /* プレビュー hover tooltip — handled by lme-tooltip component */

        /* Custom delete confirmation dropdown */
        /* Delete confirm — position:fixed escapes table stacking context */
        .csv-del-confirm-fixed {
            position: fixed;
            transform: translateX(-50%);
            background: #fff;
            border: 1px solid var(--lme-divider);
            border-radius: var(--lme-radius-m);
            padding: var(--lme-pd-m);
            box-shadow: 0 5px 5px rgba(0,0,0,0.2);
            z-index: 9999;
            white-space: nowrap;
            min-width: 180px;
        }
        .csv-del-confirm-fixed::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            width: 0; height: 0;
            border: 7px solid transparent;
            border-top-color: var(--lme-divider);
        }
        .csv-del-confirm-fixed::after {
            content: '';
            position: absolute;
            top: calc(100% - 1px);
            left: 50%;
            transform: translateX(-50%);
            width: 0; height: 0;
            border: 6px solid transparent;
            border-top-color: #fff;
        }

        .csv-step1-footer {
            border-top: 1px solid var(--lme-divider);
            padding: var(--lme-pd-m) var(--lme-pd-l);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
    </style>
@endpush

@section('content')
<div id="chat-setting-v2" v-cloak style="background-color: #F5F7FA;">

    {{-- ===== Page header ===== --}}
    <div class="cs-page-header">
        <h1 class="cs-page-title">1:1チャット設定</h1>
        <lme-button-flat size="sm" @click="openHowTo">
            <lme-icon file_name="book1"></lme-icon>
            使い方を見る
        </lme-button-flat>
    </div>

    {{-- ===== Body: sidenav + content ===== --}}
    <div class="cs-body">

        {{-- Left vertical sub-nav --}}
        <div style="width: 240px;background-color: #FFFFFF">
            <lme-tab-vertical v-model="activeTab" :tabs="settingTabs"></lme-tab-vertical>
        </div>

        {{-- Right content panel --}}
        {{-- LƯU Ý khi thêm/sửa tab: mỗi khối tab dưới đây là một v-if RIÊNG (không phải chuỗi
             v-if/v-else-if), nên phần tử gốc của mọi panel PHẢI có :key riêng. Thiếu key thì Vue
             coi các div cùng vị trí là một (sameVnode) và tái dùng thẻ DOM của tab trước, kéo theo
             style/thuộc tính cũ dính sang tab sau — xem #39105 (2 lựa chọn ở tab 送信ショートカット
             bị chuyển thành nằm ngang sau khi ghé tab 短縮URL / 送信プレビュー). --}}
        <div class="cs-content-panel">

            {{-- ===== TAB: 対応ステータス編集 ===== --}}
            <template v-if="activeTab === 1">
                <div class="cs-content-inner lme-scroll-custom" :key="'cs-tab-status'">
                    <p class="cs-section-title">対応ステータス編集</p>
                    <p class="cs-section-desc">対応ステータスのテキストとカラーが変更できます</p>

                    <draggable element="ul"
                               class="cs-status-list"
                               id="cs-status-list"
                               v-model="statusList"
                               :move="onSortMove"
                               :options="{ animation: 150, handle: '.cs-drag-handle', draggable: '.cs-sortable-item', ghostClass: 'cs-status-ghost', chosenClass: 'cs-status-chosen', dragClass: 'cs-status-drag' }"
                               @change="onSortChange">
                        <li v-for="(item, index) in statusList"
                            :key="item.id"
                            class="cs-status-row cs-inline-row cs-sortable-item">

                            <div class="cs-inline-controls">
                                <span class="cs-drag-handle" title="ドラッグして並び替え">
                                    <svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="4"  cy="4"  r="1.5" fill="#9a9ead"/>
                                        <circle cx="4"  cy="10" r="1.5" fill="#9a9ead"/>
                                        <circle cx="4"  cy="16" r="1.5" fill="#9a9ead"/>
                                        <circle cx="10" cy="4"  r="1.5" fill="#9a9ead"/>
                                        <circle cx="10" cy="10" r="1.5" fill="#9a9ead"/>
                                        <circle cx="10" cy="16" r="1.5" fill="#9a9ead"/>
                                    </svg>
                                </span>

                                <div class="cs-status-input-wrap" :data-status-id="item.id" :style="{ '--status-color': item.color }">
                                    <lme-input v-model="item.name_status"
                                               size="lg"
                                               width="360px"
                                               :max-count="20"
                                               :error-message="item.nameError"
                                               @focusin.native="onStatusNameFocusIn(index)"
                                               @input.native="clearItemNameError(index)"
                                               @focusout.native="focusedItemIndex = null"
                                               @keydown.native.enter.prevent="autoSave(index)">
                                    </lme-input>
                                </div>

                                <div class="cs-color-picker-wrap">
                                    <button class="cs-color-circle"
                                            :style="{ backgroundColor: item.color }"
                                            @click.stop="toggleColorPicker(index)"
                                            title="カラーを変更">
                                    </button>
                                    <div class="cs-color-picker-popover"
                                         v-if="colorPickerIndex === index"
                                         @click.stop>
                                        <button v-for="c in defaultColors"
                                                :key="c.color"
                                                class="cs-color-swatch"
                                                :class="{ selected: item.color === c.color }"
                                                :style="{ backgroundColor: c.color, color: c.color }"
                                                @click="selectColor(index, c)">
                                            <svg v-if="item.color === c.color" width="14" height="10" viewBox="0 0 14 10" fill="none">
                                                <path d="M1 5l4 4 8-8" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </button>
                                    </div>
                                </div>

                                <lme-button-ghost type="secondary" size="sm" icon class="cs-status-delete" @click="showDeleteConfirm(index)" title="削除">
                                    <lme-icon file_name="delete-outlined"></lme-icon>
                                </lme-button-ghost>
                            </div>

                            {{-- Counter: chỉ hiện khi đang focus edit item này --}}
                            <div class="cs-inline-counter" v-if="focusedItemIndex === index">
                                @{{ (item.name_status || '').length }}/20
                            </div>
                        </li>

                        {{-- Inline new status rows: footer slot → nằm trong cùng <ul>
                             nhưng KHÔNG nằm trong vùng sort (option draggable chỉ nhận
                             .cs-sortable-item). --}}
                        <template slot="footer">
                        <li v-for="(row, ri) in newInlines"
                            :key="row._uid"
                            class="cs-status-row cs-inline-row"
                            ref="inlineNewRow">
                            {{-- Row 1: controls --}}
                            <div class="cs-inline-controls">
                                <span class="cs-drag-handle disabled">
                                    <svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <circle cx="4"  cy="4"  r="1.5" fill="#9a9ead"/>
                                        <circle cx="4"  cy="10" r="1.5" fill="#9a9ead"/>
                                        <circle cx="4"  cy="16" r="1.5" fill="#9a9ead"/>
                                        <circle cx="10" cy="4"  r="1.5" fill="#9a9ead"/>
                                        <circle cx="10" cy="10" r="1.5" fill="#9a9ead"/>
                                        <circle cx="10" cy="16" r="1.5" fill="#9a9ead"/>
                                    </svg>
                                </span>

                                <div class="cs-status-input-wrap"
                                     :style="row.name_status.length ? { '--status-color': row.color } : {}">
                                    <lme-input v-model="row.name_status"
                                               size="lg"
                                               width="360px"
                                               placeholder="対応ステータス（Enterで保存）"
                                               :error-message="row.error"
                                               @input.native="onInlineNameInput($event, ri)"
                                               @keydown.native.enter.prevent="addInlineStatus(ri)">
                                    </lme-input>
                                </div>

                                <div class="cs-color-picker-wrap">
                                    <button class="cs-color-circle"
                                            :style="{ backgroundColor: row.color }"
                                            @click.stop="toggleInlinePicker(ri)"
                                            title="カラーを変更">
                                    </button>
                                    <div class="cs-color-picker-popover"
                                         v-if="row.pickerOpen"
                                         @click.stop>
                                        <button v-for="c in defaultColors"
                                                :key="c.color"
                                                class="cs-color-swatch"
                                                :class="{ selected: row.color === c.color }"
                                                :style="{ backgroundColor: c.color, color: c.color }"
                                                @click="selectInlineColor(ri, c)">
                                            <svg v-if="row.color === c.color" width="14" height="10" viewBox="0 0 14 10" fill="none">
                                                <path d="M1 5l4 4 8-8" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                            </svg>
                                        </button>
                                    </div>
                                </div>

                                <lme-button-ghost type="secondary" size="sm" icon class="cs-inline-delete" @click="clearInlineRow(ri)" title="クリア">
                                    <lme-icon file_name="delete-outlined"></lme-icon>
                                </lme-button-ghost>
                            </div>

                            {{-- Row 2: counter --}}
                            <div class="cs-inline-counter">
                                @{{ row.name_status.length }}/20
                            </div>
                        </li>
                        </template>
                    </draggable>

                    <div style="align-self: flex-start;">
                        <lme-button-default type="secondary" size="lg" @click="addNewInlineRow">
                            <lme-icon file_name="plus-outlined"></lme-icon>
                            新規追加
                        </lme-button-default>
                    </div>
                </div>

                <div class="cs-content-footer" :key="'cs-tab-status-ft'">
                    <lme-pagination
                        :pagination="pagination"
                        :is_limit="true"
                        :arr_limit="[10, 20, 50, 100]"
                        end_text_limit="件表示"
                        position="top"
                        @change_page="changePage"
                        @change_limit="changeLimit">
                    </lme-pagination>
                </div>
            </template>

            {{-- ===== TAB: チャットのCSVエクスポート ===== --}}
            <template v-if="activeTab === 2">
                <div class="cs-content-inner lme-scroll-custom" style="gap: var(--lme-pd-m);" :key="'cs-tab-csv'">
                    <p class="cs-section-title">チャットのCSVエクスポート</p>
                    <p class="cs-section-desc">1:1チャットのCSVデータがダウンロードできます。データ容量によって、作成に最⼤4時間程度かかる場合があります。</p>

                    {{-- Inner tab navigation (データ作成 / 作成履歴) --}}
                    <lme-tab-horizontal v-model="csvActiveTab" :tabs="csvTabs"></lme-tab-horizontal>

                    {{-- ===== Sub-tab: データ作成 ===== --}}
                    <template v-if="csvActiveTab === 1">

                        {{-- Step 1: Export form (design node 2001:4376) --}}
                        <template v-if="csvStep === 1">
                            {{-- Section 1: エクスポート対象期間の選択 --}}
                            <div class="csv-step-block">
                                <div class="csv-step-header">
                                    <span class="csv-step-badge">1</span>
                                    <span class="csv-step-title">エクスポート対象期間の選択</span>
                                </div>
                                <p style="font-size:var(--lme-text-md);color:var(--lme-text-default);margin:0; font-weight: var(--lme-fw-regular)">フリープランの場合、選択できるのは180日前までとなります。</p>
                                <lme-range-picker
                                    width="85%"
                                    v-model="csvDateRange"
                                    :min-date="csvMinDate"
                                    :max-date="today"
                                    :error-message="csvDateRangeError"
                                    placeholder="日付を選択"
                                    placeholder-end="日付を選択"
                                    size="lg">
                                </lme-range-picker>
                            </div>

                            {{-- Section 2: エクスポート対象の絞り込み --}}
                            <div class="csv-step-block" style="padding-top:var(--lme-pd-l);">
                                <div class="csv-step-header">
                                    <span class="csv-step-badge">2</span>
                                    <span class="csv-step-title">エクスポート対象の絞り込み</span>
                                </div>
                                <div class="csv-filter-card">
                                    <div class="csv-filter-card-top">
                                        <div style="display:flex;align-items:center;gap:var(--lme-pd-m);">
                                            <lme-tag text="対象人数" type="default" size="md"></lme-tag>
                                            <span style="font-size:var(--lme-text-md);color:#222;font-weight: var(--lme-fw-regular)">@{{ csvFilterCount }}人</span>
                                        </div>
                                        <div style="display:flex;align-items:center;gap:var(--lme-pd-m);">
                                            <lme-button-default type="secondary" size="lg" @click="openFilterEditor">
                                                <lme-icon file_name="filter-outlined"></lme-icon>
                                                絞り込み条件 登録・編集
                                            </lme-button-default>
                                            <lme-tooltip content="履歴を表示" position="top" v-if="false">
                                                <lme-button-default type="secondary" size="lg" icon @click="openFilterHistory">
                                                    <lme-icon file_name="time-circle-outlined"></lme-icon>
                                                </lme-button-default>
                                            </lme-tooltip>
                                        </div>
                                    </div>
                                    <div class="csv-filter-card-bottom">
                                        <div v-if="list_preview_filter.length === 0" class="csv-filter-empty">絞り込み条件が登録されていません</div>
                                        <div v-for="(preview, idx) in list_preview_filter" :key="idx"
                                             v-html="preview"
                                             style="font-size:var(--lme-text-md);font-weight:600;color:var(--lme-text-default);">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Section 3: エクスポート対象の選択 --}}
                            <div class="csv-step-block">
                                <div class="csv-step-header">
                                    <span class="csv-step-badge">3</span>
                                    <span class="csv-step-title">エクスポート対象の選択</span>
                                </div>
                                <div class="csv-target-card">
                                    <lme-checkbox :disabled="true" v-model="csvExportTargets.allChats" label="全ての1:1チャット"></lme-checkbox>
                                    <lme-checkbox v-model="csvExportTargets.excludeBroadcast" label="一斉配信を除く"></lme-checkbox>
                                    <lme-checkbox v-model="csvExportTargets.excludeStep" label="ステップ配信を除く"></lme-checkbox>
                                </div>
                            </div>
                        </template>

                        {{-- Step 2: Loading / in-progress state (design node 2003:2541) --}}
                        <template v-else>
                            <template v-if="csvCreating">
                                <div style="display:flex;flex-direction:column;gap:var(--lme-pd-m);">
                                    <p style="font-size:24px;font-weight:500;color:#222;line-height:normal;">CSVデータを作成中です。</p>

                                    <div style="display:flex;flex-direction:column;align-items:center;gap:var(--lme-pd-m);padding:var(--lme-pd-l) 0;">
                                        <div class="csv-spinner"></div>
                                        <div class="csv-progress-wrap">
                                            <div class="csv-progress-track">
                                                <div class="csv-progress-bar" :style="{ width: csvProgress + '%' }"></div>
                                            </div>
                                            <p class="csv-progress-pct">@{{ csvProgress }}%</p>
                                        </div>
                                    </div>

                                    <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);">
                                        <span style="font-size:var(--lme-text-md);font-weight:var(--lme-fw-regular);color:var(--lme-text-default);">作成が完了したら</span>
                                        <lme-button-ghost color="blue" size="sm" style="background-color: var(--lme-primary-bg);" @click="csvActiveTab = 2">作成履歴</lme-button-ghost>
                                        <span style="font-size:var(--lme-text-md);font-weight:var(--lme-fw-regular);color:var(--lme-text-default);">よりダウンロードできます。</span>
                                    </div>

                                    <div class="csv-params-card">
                                        <div style="display:flex;flex-direction:column;gap:var(--lme-pd-xs);">
                                            <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);">
                                                <lme-icon size="24">
                                                    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M13.7497 14.2501H2.2504C1.97448 14.2501 1.75 14.0256 1.75 13.7497V3.3754C1.75 3.09948 1.97448 2.875 2.2504 2.875H4.8748V1.8751C4.8748 1.80612 4.93092 1.75 4.9999 1.75H5.8747C5.94368 1.75 5.9998 1.80612 5.9998 1.8751V2.875H10.0003V1.8751C10.0003 1.80612 10.0564 1.75 10.1254 1.75H11.0002C11.0692 1.75 11.1253 1.80612 11.1253 1.8751V2.875H13.7497C14.0256 2.875 14.2501 3.09948 14.2501 3.3754V13.7497C14.2501 14.0256 14.0256 14.2501 13.7497 14.2501ZM2.875 7.1878V13.1251H13.1251V7.1878H2.875ZM2.875 4V6.1249H13.1251V4H11.1253V4.7497C11.1253 4.81868 11.0692 4.8748 11.0002 4.8748H10.1254C10.0564 4.8748 10.0003 4.81868 10.0003 4.7497V4H5.9998V4.7497C5.9998 4.81868 5.94368 4.8748 5.8747 4.8748H4.9999C4.93092 4.8748 4.8748 4.81868 4.8748 4.7497V4H2.875Z" fill="currentColor"/>
                                                    </svg>
                                                </lme-icon>
                                                <span style="font-size:var(--lme-text-md);font-weight:var(--lme-fw-medium);color:#222;">期間</span>
                                            </div>
                                            <p style="font-size:var(--lme-text-md);font-weight:var(--lme-fw-regular);color:#222;margin:0;">@{{ csvDateRange[0] || csvParams.dateFrom }} から @{{ csvDateRange[1] || csvParams.dateTo }} まで</p>
                                        </div>
                                        <div style="height:1px;background:var(--lme-divider);width:100%;"></div>
                                        <div style="display:flex;flex-direction:column;gap:var(--lme-pd-xs);">
                                            <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);">
                                                <lme-icon size="24">
                                                    <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                        <path d="M8.00208 15.0004H7.96878C6.88711 14.995 5.8072 14.7355 4.84578 14.2498H2.46888C2.07286 14.2498 1.75068 13.9276 1.75068 13.5316V11.1565C1.26415 10.1925 1.00456 9.11208 1.00008 8.0326C0.995582 7.08636 1.17605 6.16704 1.53648 5.3002C1.88153 4.46759 2.38177 3.71694 3.02328 3.0691C3.66227 2.42472 4.40899 1.91722 5.24268 1.5607C6.10357 1.19316 7.02076 1.00451 7.96878 1H8.00028C8.94119 1 9.85384 1.18289 10.7129 1.5436C11.5511 1.89449 12.3045 2.40078 12.9521 3.0484C13.5966 3.69471 14.1029 4.44808 14.4569 5.2876C14.8221 6.15988 15.005 7.08283 15.0005 8.0308C14.996 8.98011 14.807 9.89761 14.4389 10.7578C14.0841 11.5906 13.5769 12.337 12.9314 12.9763C12.2887 13.6145 11.5381 14.115 10.7003 14.464C9.84206 14.8199 8.93425 15.0004 8.00208 15.0004ZM7.97508 2.1871C6.41677 2.1934 4.95863 2.80325 3.86928 3.9043C2.77884 5.00372 2.18178 6.4676 2.18808 8.0263C2.19259 8.97123 2.42756 9.90643 2.86758 10.7308L2.93778 10.8622V13.0627H5.13738L5.26878 13.1329C6.09573 13.5729 7.03093 13.8079 7.97328 13.8124H8.00028C9.54605 13.8124 11.0004 13.2153 12.0953 12.1312C13.1951 11.0413 13.8062 9.58352 13.8161 8.0263C13.8188 7.23471 13.6668 6.46831 13.3643 5.7484C13.0716 5.05146 12.6511 4.42586 12.1142 3.889C11.5773 3.35213 10.9517 2.93154 10.2548 2.6389C9.54087 2.33911 8.78295 2.1871 8.00208 2.1871H7.97508ZM11.1251 8.7499C10.7117 8.7499 10.3754 8.41359 10.3754 8.0002C10.3754 7.58632 10.7117 7.2496 11.1251 7.2496C11.539 7.2496 11.8757 7.58632 11.8757 8.0002C11.8757 8.41359 11.539 8.7499 11.1251 8.7499ZM8.00028 8.7499C7.58689 8.7499 7.25058 8.41359 7.25058 8.0002C7.25058 7.58632 7.58689 7.2496 8.00028 7.2496C8.41367 7.2496 8.74998 7.58632 8.74998 8.0002C8.74998 8.41359 8.41367 8.7499 8.00028 8.7499ZM4.87548 8.7499C4.4616 8.7499 4.12488 8.41359 4.12488 8.0002C4.12488 7.58632 4.4616 7.2496 4.87548 7.2496C5.28887 7.2496 5.62518 7.58632 5.62518 8.0002C5.62518 8.41359 5.28887 8.7499 4.87548 8.7499Z" fill="currentColor"/>
                                                    </svg>
                                                </lme-icon>
                                                <span style="font-size:var(--lme-text-md);font-weight:var(--lme-fw-medium);color:#222;">対象</span>
                                            </div>
                                            <div v-for="target in selectedCsvTargets" :key="target"
                                                 style="display:flex;align-items:center;font-size:var(--lme-text-md);font-weight:var(--lme-fw-regular);">
                                                <span style="color:#222;">・</span>
                                                <span style="color:var(--lme-text-default);">@{{ target }}</span>
                                            </div>
                                        </div>
                                    </div>

                                    <p style="font-size:var(--lme-text-md);font-weight:var(--lme-fw-regular);color:#222;margin:0;">同時に作成できるCSVデータは1つまでです。</p>
                                    <button class="csv-cancel-link" @click="showCancelModal = true">進行中のCSVデータ作成をキャンセルする</button>
                                </div>
                            </template>
                        </template>

                    </template>

                    {{-- ===== Sub-tab: 作成履歴 (design node 2003:3501) ===== --}}
                    <template v-if="csvActiveTab === 2">
                        <p style="font-size:var(--lme-text-md);font-weight:500;color:#222;margin:0;">CSV作成履歴</p>
                        <div class="csv-history-tbl">
                        <lme-table
                            :columns="csvHistoryColumns"
                            :data-source="csvHistoryList"
                            row-key="id">
                            {{-- Custom cell: CSVデータ column --}}
                            <template slot="cell-csv_data" slot-scope="{ record }">
                                {{-- 完了 state --}}
                                <div v-if="record.status === 2" class="csv-action-cell">
                                    <lme-tooltip class="csv-act-preview" content="プレビュー" position="top">
                                        <span class="csv-preview-icon-btn">
                                            <lme-button-ghost type="secondary" size="sm" icon @click="openPreviewModal(record)">
                                                <lme-icon file_name="play-circle-outlined"></lme-icon>
                                            </lme-button-ghost>
                                        </span>
                                    </lme-tooltip>
                                    <span class="csv-delete-icon-btn csv-act-delete" @click.stop="showDelConfirm(record, $event)">
                                        <lme-button-ghost color="red" size="sm" icon>
                                            <lme-icon file_name="delete-outlined"></lme-icon>
                                        </lme-button-ghost>
                                    </span>
                                    <lme-button-default class="csv-act-main" v-if="record.status === 2 && record.file_csv" type="secondary" size="sm" @click="downloadCsv(record)">
                                        <lme-icon file_name="download-outlined"></lme-icon>
                                        ダウンロード
                                    </lme-button-default>
                                </div>

                                {{-- キャンセル済み state (status = 4: hủy khi đang tạo) --}}
                                <div v-else-if="record.status === 4" class="csv-action-cell">
                                    <span class="csv-delete-icon-btn csv-act-delete" @click.stop="showDelConfirm(record, $event)">
                                        <lme-button-ghost color="red" size="sm" icon>
                                            <lme-icon file_name="delete-outlined"></lme-icon>
                                        </lme-button-ghost>
                                    </span>
                                    <lme-button-flat class="csv-act-main" size="sm">キャンセル済み</lme-button-flat>
                                </div>

                                {{-- 作成中 state --}}
                                <div v-else class="csv-action-cell">
                                    <lme-tooltip class="csv-act-preview" content="プレビュー" position="top">
                                        <span class="csv-preview-icon-btn">
                                            <lme-button-ghost type="secondary" size="sm" icon @click="openPreviewModal(record)">
                                                <lme-icon file_name="play-circle-outlined"></lme-icon>
                                            </lme-button-ghost>
                                        </span>
                                    </lme-tooltip>
                                    {{-- 作成中: nút xóa hiện nhưng disabled (không ấn được) --}}
                                    <span class="csv-delete-icon-btn is-disabled csv-act-delete">
                                        <lme-button-ghost color="red" size="sm" icon :disabled="true">
                                            <lme-icon file_name="delete-outlined"></lme-icon>
                                        </lme-button-ghost>
                                    </span>
                                    <lme-button-flat class="csv-act-main" size="sm">作成中</lme-button-flat>
                                </div>
                            </template>
                        </lme-table>
                        </div>
                    </template>
                </div>

                {{-- Footer: Step 1 proceed button --}}
                <div class="csv-step1-footer" v-if="csvActiveTab === 1 && csvStep === 1">
                    <lme-button-default type="primary" size="lg" @click="proceedToConfirmCreate">エクスポート条件の確認に進む</lme-button-default>
                </div>

                {{-- Pagination footer (history tab only) --}}
                <div class="cs-content-footer" v-if="csvActiveTab === 2" :key="'cs-tab-csv-ft'">
                    <lme-pagination
                        :pagination="csvPagination"
                        :is_limit="true"
                        :arr_limit="[10, 20, 50, 100]"
                        end_text_limit="件表示"
                        @change_page="changeCsvPage"
                        @change_limit="changeCsvLimit">
                    </lme-pagination>
                </div>
            </template>

            {{-- ===== TAB: メッセージの自動確認済み変更 (design node 2011:1868) ===== --}}
            <template v-if="activeTab === 3">
                <div class="cs-content-inner lme-scroll-custom" style="gap: var(--lme-pd-l);" :key="'cs-tab-autoconfirm'">

                    {{-- Section 1: 受信メッセージの自動確認済み設定 --}}
                    <div style="display:flex;flex-direction:column;gap:var(--lme-pd-m);">
                        <p style="font-size:var(--lme-text-lg);font-weight:500;color:#222;line-height:normal;margin:0;">メッセージの自動確認済み変更</p>
                        <div style="font-size:var(--lme-text-md);color:var(--lme-text-default);line-height:1.6;font-weight: var(--lme-fw-regular)">
                            <p style="margin:0;">設定した受信メッセージを⾃動的に確認済みに変更します。</p>
                            <p style="margin:0;">確認済みに変更されたメッセージは通知されません。</p>
                        </div>
                        <div style="border:1px solid var(--lme-divider);border-radius:var(--lme-radius-m);padding:var(--lme-pd-l);display:flex;flex-direction:column;gap:var(--lme-pd-m);">
                            <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);">
                                <lme-checkbox v-model="dataSetting.confirm_message_button" label="【○○】メッセージ"></lme-checkbox>
                                <lme-popover type_popover="bc" trigger="hover" v-if="false">
                                    <lme-icon file_name="question-circle-outlined" size="16" style="cursor:pointer;color:var(--lme-text-supplement);"></lme-icon>
                                    <template v-slot:popover-content>
                                        <div style="display:flex;flex-direction:column;gap:var(--lme-pd-m);width:278px;">
                                            <p style="font-size:var(--lme-text-md);color:var(--lme-text-default);line-height:20px;margin:0;">文章を決めて頂けませんか</p>
                                            <div style="display:flex;justify-content:flex-end;">
                                                <lme-button-default type="secondary" size="sm">詳細記事を見る</lme-button-default>
                                            </div>
                                        </div>
                                    </template>
                                </lme-popover>
                            </div>
                            <lme-checkbox v-model="dataSetting.confirm_message_stamp" label="スタンプ"></lme-checkbox>
                            <lme-checkbox v-model="dataSetting.auto_confirm_message_media" label="メディア（画像・動画・音声・その他ファイル）"></lme-checkbox>
                            <lme-checkbox v-model="dataSetting.confirm_message_autoreply_all" label="自動応答 [すべてのメッセージに反応] のメッセージ"></lme-checkbox>
                            <lme-checkbox v-model="dataSetting.confirm_message_autoreply_specified" label="自動応答 [設定したキーワードに反応] のメッセージ"></lme-checkbox>
                        </div>
                    </div>

                    {{-- Section 2: 返信時の自動確認済み変更 --}}
                    <div style="display:flex;flex-direction:column;gap:var(--lme-pd-m);">
                        <p style="font-size:var(--lme-text-md);font-weight:500;color:#222;margin:0;">返信時の自動確認済み変更</p>
                        <p style="font-size:var(--lme-text-md);color:var(--lme-text-default);font-weight:var(--lme-fw-regular); margin:0;">未確認のメッセージがある場合に、メッセージの返信と同時に自動で確認済みに変更します。</p>
                        <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);">
                            <span style="font-size:var(--lme-text-md);"
                                  :style="dataSetting.confirm_message_user_send ? 'font-weight:400;color:var(--lme-text-supplement)' : 'font-weight:500;color:var(--lme-text-default)'">利用しない</span>
                            <lme-switch v-model="dataSetting.confirm_message_user_send" theme="lgram"></lme-switch>
                            <span style="font-size:var(--lme-text-md);"
                                  :style="dataSetting.confirm_message_user_send ? 'font-weight:500;color:var(--lme-primary)' : 'font-weight:400;color:var(--lme-text-supplement)'">利用する</span>
                        </div>
                    </div>

                    {{-- Section 3: ブロックされた友だちの自動確認済み変更 --}}
                    <div style="display:flex;flex-direction:column;gap:var(--lme-pd-m);">
                        <p style="font-size:var(--lme-text-md);font-weight:500;color:#222;margin:0;">ブロックされた友だちの自動確認済み変更</p>
                        <p style="font-size:var(--lme-text-md);color:var(--lme-text-default);margin:0;font-weight: var(--lme-fw-regular)">未確認のメッセージがある状態で、友だちからブロックされた際に自動で確認済みに変更します。</p>
                        <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);">
                            <span style="font-size:var(--lme-text-md);"
                                  :style="dataSetting.confirm_message_user_block_bot ? 'font-weight:400;color:var(--lme-text-supplement)' : 'font-weight:500;color:var(--lme-text-default)'">利用しない</span>
                            <lme-switch v-model="dataSetting.confirm_message_user_block_bot" theme="lgram"></lme-switch>
                            <span style="font-size:var(--lme-text-md);"
                                  :style="dataSetting.confirm_message_user_block_bot ? 'font-weight:500;color:var(--lme-primary)' : 'font-weight:400;color:var(--lme-text-supplement)'">利用する</span>
                        </div>
                    </div>

                </div>

                {{-- Footer: centered Save button --}}
                <div class="cs-content-footer" style="justify-content:center;" :key="'cs-tab-autoconfirm-ft'">
                    <lme-button-default type="primary" size="lg" :disabled="!confirmMsgDirty" @click="saveDataSetting(1)">保存</lme-button-default>
                </div>
            </template>

            {{-- ===== TAB: 送信ショートカット (design node 2011:2438) ===== --}}
            <template v-if="activeTab === 4">
                <div class="cs-content-inner lme-scroll-custom" style="gap: var(--lme-pd-m);" :key="'cs-tab-shortcut'">
                    <p style="font-size:var(--lme-text-lg);font-weight:var(--lme-fw-medium);color:#222;margin:0;">送信ショートカット</p>
                    <p style="font-size:var(--lme-text-md);color:var(--lme-text-default);margin:0; font-weight: var(--lme-fw-regular)">送信時のショートカットを変更します。</p>
                    {{-- Khai display/flex-direction TƯỜNG MINH: 2 lựa chọn luôn xếp dọc, không phụ
                         thuộc giá trị display mặc định hay style còn sót từ tab khác. --}}
                    <div style="border:1px solid var(--lme-divider);border-radius:var(--lme-radius-m);padding:var(--lme-pd-10); width: fit-content; display:flex; flex-direction:column;">
                        <lme-radio v-model="dataSetting.setting_shortcut" :radio-value="0" name="shortcut" label="送信：Shift + Enter　改行：Enter"></lme-radio>
                        <lme-radio v-model="dataSetting.setting_shortcut" :radio-value="1" name="shortcut" label="送信：Enter　改行：Shift + Enter"></lme-radio>
                    </div>
                </div>
                <div class="cs-content-footer" style="justify-content:center;" :key="'cs-tab-shortcut-ft'">
                    <lme-button-default type="primary" size="lg" @click="saveDataSetting(2)">保存</lme-button-default>
                </div>
            </template>

            {{-- ===== TAB: 短縮URLの利用 (design node 2011:2157) ===== --}}
            <template v-if="activeTab === 5">
                <div class="cs-content-inner lme-scroll-custom" style="gap: var(--lme-pd-m);" :key="'cs-tab-shorturl'">
                    <p style="font-size:var(--lme-text-lg);font-weight:var(--lme-fw-medium);color:#222;margin:0;">短縮URLの利用</p>
                    <div style="font-size:var(--lme-text-md);font-weight:var(--lme-fw-regular);color:var(--lme-text-default);line-height:1.6;margin:0;">
                        <p style="margin:0;">1:1チャットでURLを送信する際に短縮リンクを利⽤します。</p>
                        <p style="margin:0;">（URL分析が利⽤できます）</p>
                    </div>
                    <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);">
                        <span style="font-size:var(--lme-text-md);"
                              :style="dataSetting.is_shorten_url ? 'color:var(--lme-text-supplement);font-weight:var(--lme-fw-regular)' : 'color:var(--lme-text-default);font-weight:var(--lme-fw-medium)'">利用しない</span>
                        <lme-switch v-model="dataSetting.is_shorten_url" theme="lgram"></lme-switch>
                        <span style="font-size:var(--lme-text-md);"
                              :style="dataSetting.is_shorten_url ? 'color:var(--lme-text-default);font-weight:var(--lme-fw-medium)' : 'color:var(--lme-text-supplement);font-weight:var(--lme-fw-regular)'">利用する</span>
                    </div>

                    {{-- Info card --}}
                    <div style="background:#F7F7F7;border:1px solid var(--lme-border);border-radius:var(--lme-radius-m);padding:var(--lme-pd-m);display:flex;flex-direction:column;gap:var(--lme-pd-m);">
                        <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);">
                            <lme-icon size="18" style="color:#1677FF;flex-shrink:0;">
                                <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8.0002 15.0004C4.14028 15.0004 1 11.8601 1 8.0002C1 4.14028 4.14028 1 8.0002 1C11.8601 1 15.0004 4.14028 15.0004 8.0002C15.0004 11.8601 11.8601 15.0004 8.0002 15.0004ZM7.6249 7.0003C7.55592 7.0003 7.4998 7.05642 7.4998 7.1254V11.3752C7.4998 11.4442 7.55592 11.5003 7.6249 11.5003H8.3746C8.44358 11.5003 8.4997 11.4442 8.4997 11.3752V7.1254C8.4997 7.05642 8.44358 7.0003 8.3746 7.0003H7.6249ZM8.0002 4.5001C7.58632 4.5001 7.2496 4.83641 7.2496 5.2498C7.2496 5.66368 7.58632 6.0004 8.0002 6.0004C8.41359 6.0004 8.7499 5.66368 8.7499 5.2498C8.7499 4.83641 8.41359 4.5001 8.0002 4.5001Z" fill="currentColor"/>
                                </svg>
                            </lme-icon>
                            <span style="font-size:var(--lme-text-md);font-weight:var(--lme-fw-medium);color:var(--lme-text-default);">短縮リンクの例</span>
                        </div>
                        <lme-input :value="dataSetting.shorten_url" :disabled="true" style="width:256px;"></lme-input>
                    </div>
                </div>
                <div class="cs-content-footer" style="justify-content:center;" :key="'cs-tab-shorturl-ft'">
                    <lme-button-default type="primary" size="lg" @click="saveDataSetting(3)">保存</lme-button-default>
                </div>
            </template>

            {{-- ===== TAB: 送信プレビュー (design node 2011:2580) ===== --}}
            <template v-if="activeTab === 6">
                <div class="cs-content-inner lme-scroll-custom" style="gap: var(--lme-pd-m);" :key="'cs-tab-preview'">
                    <p style="font-size:var(--lme-text-lg);font-weight:var(--lme-fw-medium);color:#222;margin:0;">送信プレビュー</p>
                    <p style="font-size:var(--lme-text-md);font-weight:var(--lme-fw-regular);color:var(--lme-text-default);line-height:1.6;margin:0;">1:1チャットでの送信時にプレビューを表示します。</p>
                    <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);">
                        <span style="font-size:var(--lme-text-md);"
                              :style="dataSetting.preview_after_send ? 'color:var(--lme-text-supplement);font-weight:var(--lme-fw-regular)' : 'color:var(--lme-text-default);font-weight:var(--lme-fw-medium)'">利用しない</span>
                        <lme-switch v-model="dataSetting.preview_after_send" theme="lgram"></lme-switch>
                        <span style="font-size:var(--lme-text-md);"
                              :style="dataSetting.preview_after_send ? 'color:var(--lme-primary);font-weight:var(--lme-fw-medium)' : 'color:var(--lme-text-supplement);font-weight:var(--lme-fw-regular)'">利用する</span>
                    </div>
                    {{-- Warning card --}}
                    <div style="background:#FFF1F0;border:1px solid #FFCCC7;border-radius:var(--lme-radius-m);padding:var(--lme-pd-m);display:flex;flex-direction:column;gap:var(--lme-pd-m);">
                        <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);">
                            <lme-icon size="18" style="color:#FF4D4F;flex-shrink:0;">
                                <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M8.0002 15.0004C4.14028 15.0004 1 11.8601 1 8.0002C1 4.14028 4.14028 1 8.0002 1C11.8601 1 15.0004 4.14028 15.0004 8.0002C15.0004 11.8601 11.8601 15.0004 8.0002 15.0004ZM8.0002 10C7.58632 10 7.2496 10.3363 7.2496 10.7497C7.2496 11.1636 7.58632 11.5003 8.0002 11.5003C8.41359 11.5003 8.7499 11.1636 8.7499 10.7497C8.7499 10.3363 8.41359 10 8.0002 10ZM7.6249 4.5001C7.55592 4.5001 7.4998 4.55622 7.4998 4.6252V8.875C7.4998 8.94398 7.55592 9.0001 7.6249 9.0001H8.3746C8.44358 9.0001 8.4997 8.94398 8.4997 8.875V4.6252C8.4997 4.55622 8.44358 4.5001 8.3746 4.5001H7.6249Z" fill="currentColor"/>
                                </svg>
                            </lme-icon>
                            <span style="font-size:var(--lme-text-md);font-weight:var(--lme-fw-medium);color:var(--lme-text-default);">ご注意</span>
                        </div>
                        <div style="font-size:var(--lme-text-md);font-weight:var(--lme-fw-regular);color:var(--lme-text-default);line-height:1.6;">
                            <p style="margin:0;">LINE公式アカウントの仕様上、エルメからの送信取り消しはできません。</p>
                            <p style="margin:0;">送信から24時間以内のメッセージのみ、LINE公式アカウント管理画面のチャットから送信取り消しが可能です。</p>
                        </div>
                        <div style="display:flex;justify-content:flex-end;">
                            <lme-button-default type="secondary" size="sm" @click="openPreviewDetail">詳細を見る</lme-button-default>
                        </div>
                    </div>
                </div>
                <div class="cs-content-footer" style="justify-content:center;" :key="'cs-tab-preview-ft'">
                    <lme-button-default type="primary" size="lg" @click="saveDataSetting(4)">保存</lme-button-default>
                </div>
            </template>

            {{-- ===== TAB: 既読情報の表示 (design node 2011:3021) ===== --}}
            <template v-if="activeTab === 7">
                <div class="cs-content-inner lme-scroll-custom" style="gap: var(--lme-pd-m);" :key="'cs-tab-readinfo'">
                    <p style="font-size:var(--lme-text-lg);font-weight:var(--lme-fw-medium);color:#222;margin:0;">既読情報の表示</p>

                    {{-- Q&A Card 1 --}}
                    <div class="cs-qa-card">
                        <div class="cs-qa-row">
                            <div class="cs-qa-badge cs-qa-badge--q">Q</div>
                            <p class="cs-qa-text">エルメから友だちがメッセージを開いたか（既読か）はわかりますか？</p>
                        </div>
                        <div class="cs-qa-row">
                            <div class="cs-qa-badge cs-qa-badge--a">A</div>
                            <div class="cs-qa-answer">
                                <p style="font-weight:var(--lme-fw-bold);margin:0;">エルメから友だちが既読したかどうかの情報は確認できません。</p>
                                <p style="margin:0;">これはLINE公式アカウント側の仕様のため、LINE公式アカウントの仕様が変更されない限り、エルメ側では既読情報の確認はできません。</p>
                                <p style="margin:0;">詳細は<a href="https://tayori.com/faq/d4e42fc0c7a75019a78315d4cf48cfe2404b4727/detail/2428a5bc23663bf2b0480f4736914b500a651929/" target="_blank" class="cs-qa-link">こちら</a></p>
                            </div>
                        </div>
                    </div>

                    {{-- Q&A Card 2 --}}
                    <div class="cs-qa-card">
                        <div class="cs-qa-row">
                            <div class="cs-qa-badge cs-qa-badge--q">Q</div>
                            <p class="cs-qa-text">友だちがメッセージを送信してすぐに既読マークをつけないようにできますか？</p>
                        </div>
                        <div class="cs-qa-row">
                            <div class="cs-qa-badge cs-qa-badge--a">A</div>
                            <div class="cs-qa-answer">
                                <p style="font-weight:var(--lme-fw-bold);margin:0;">LINE公式アカウントの設定変更で対応可能です。</p>
                                <p style="margin:0;">LINE公式アカウント管理画面の「応答設定」のチャットがオンかオフかによって表示が異なります。</p>
                                <p style="margin:0;">詳細は<a href="https://tayori.com/faq/d4e42fc0c7a75019a78315d4cf48cfe2404b4727/detail/42526ee2955b317d4877e250bbb714cf57b974aa/" target="_blank" class="cs-qa-link">こちら</a></p>
                            </div>
                        </div>
                    </div>

                    {{-- Q&A Card 3 --}}
                    <div class="cs-qa-card">
                        <div class="cs-qa-row">
                            <div class="cs-qa-badge cs-qa-badge--q">Q</div>
                            <p class="cs-qa-text">友だちからのメッセージを確認しても、相手のライン上で「既読」がつかないのですがエラーですか？</p>
                        </div>
                        <div class="cs-qa-row">
                            <div class="cs-qa-badge cs-qa-badge--a">A</div>
                            <div class="cs-qa-answer">
                                <p style="font-weight:var(--lme-fw-bold);margin:0;">LINE公式アカウント管理画面のチャット機能がオンになっている場合はLINE公式アカウント側でチャットを確認しない限りは既読は付きません。</p>
                                <p style="margin:0;">オフの場合は、友だちがメッセージを送信した時点で既読になります。</p>
                                <p style="margin:0;">詳細は<a href="https://tayori.com/faq/d4e42fc0c7a75019a78315d4cf48cfe2404b4727/detail/83730f1da300fb8945775099760c320054b054cf/" target="_blank" class="cs-qa-link">こちら</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </template>

            {{-- ===== TAB: 重複送信防止機能 (design node 2044:1712) ===== --}}
            <template v-if="activeTab === 8">
                <div class="cs-content-inner lme-scroll-custom" style="gap: var(--lme-pd-l);" :key="'cs-tab-dupprevent'">
                    {{-- Section 1: title + description + switch --}}
                    <div style="display:flex;flex-direction:column;gap:var(--lme-pd-m);">
                        <p style="font-size:var(--lme-text-lg);font-weight:var(--lme-fw-medium);color:#222;margin:0;">重複送信防止機能</p>
                        <p style="font-size:var(--lme-text-md);font-weight:var(--lme-fw-regular);color:var(--lme-text-default);line-height:1.6;margin:0;">1:1チャットでメッセージを送信後に、他のスタッフが同じ友だちに一定時間メッセージを送れないようにします。</p>
                        <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);">
                            <span style="font-size:var(--lme-text-md);"
                                  :style="dataSetting.duplicate_prevention ? 'color:var(--lme-text-supplement);font-weight:var(--lme-fw-regular)' : 'color:var(--lme-text-default);font-weight:var(--lme-fw-medium)'">利用しない</span>
                            <lme-switch v-model="dataSetting.duplicate_prevention" theme="lgram" @change="saveDuplicatePrevention"></lme-switch>
                            <span style="font-size:var(--lme-text-md);"
                                  :style="dataSetting.duplicate_prevention ? 'color:var(--lme-primary);font-weight:var(--lme-fw-medium)' : 'color:var(--lme-text-supplement);font-weight:var(--lme-fw-regular)'">利用する</span>
                        </div>
                    </div>
                    {{-- Section 2: 送信停止時間 — chỉ hiện khi bật 重複送信防止 --}}
                    <div v-show="dataSetting.duplicate_prevention" style="display:flex;flex-direction:column;gap:var(--lme-pd-m);">
                        <p style="font-size:var(--lme-text-md);font-weight:var(--lme-fw-medium);color:#222;margin:0;">送信停止時間</p>
                        <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);">
                            <lme-input-number v-model="dataSetting.duplicate_prevention_time" :min="1" :max="60" :error-message="duplicatePreventionTimeError" width="80px" size="lg" @focusout.native="saveDuplicatePreventionTime" @keyup.native.enter="$event.target.blur()"></lme-input-number>
                            <span style="font-size:var(--lme-text-md);color:var(--lme-text-default); font-weight: var(--lme-fw-regular)">分</span>
                        </div>
                    </div>
                </div>
            </template>

        </div>
        {{-- /Right content panel --}}

    </div>
    {{-- /cs-body --}}

    {{-- ===== 重複送信防止 WARNING MODAL (design node 2044:1873) ===== --}}
    <lme-modal v-model="showDuplicateWarningModal" :header="false" :width="600" @close="showDuplicateWarningModal = false">
        <div style="display:flex;flex-direction:column;gap:var(--lme-pd-m);">
            {{-- Header: warning icon + title + close --}}
            <div style="display:flex;align-items:center;justify-content:space-between;">
                <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);">
                    <lme-icon size="24" style="color:#FF4D4F;flex-shrink:0;">
                        <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8.0002 15.0004C4.14028 15.0004 1 11.8601 1 8.0002C1 4.14028 4.14028 1 8.0002 1C11.8601 1 15.0004 4.14028 15.0004 8.0002C15.0004 11.8601 11.8601 15.0004 8.0002 15.0004ZM8.0002 10C7.58632 10 7.2496 10.3363 7.2496 10.7497C7.2496 11.1636 7.58632 11.5003 8.0002 11.5003C8.41359 11.5003 8.7499 11.1636 8.7499 10.7497C8.7499 10.3363 8.41359 10 8.0002 10ZM7.6249 4.5001C7.55592 4.5001 7.4998 4.55622 7.4998 4.6252V8.875C7.4998 8.94398 7.55592 9.0001 7.6249 9.0001H8.3746C8.44358 9.0001 8.4997 8.94398 8.4997 8.875V4.6252C8.4997 4.55622 8.44358 4.5001 8.3746 4.5001H7.6249Z" fill="currentColor"/>
                        </svg>
                    </lme-icon>
                    <span style="font-size:var(--lme-text-lg);font-weight:var(--lme-fw-bold);color:var(--lme-text-default);line-height:24px;">現在、メッセージの送信ができません。</span>
                </div>
                <lme-button-ghost type="secondary" size="sm" icon @click="showDuplicateWarningModal = false">
                    <lme-icon>
                        <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <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="currentColor"/>
                        </svg>
                    </lme-icon>
                </lme-button-ghost>
            </div>
            {{-- Body --}}
            <p style="font-size:var(--lme-text-md);font-weight:var(--lme-fw-regular);color:var(--lme-text-default);line-height:22px;margin:0;">@{{ duplicateBlockedByStaff }} さんが直前にメッセージを送信したため、この友たちには@{{ dataSetting.duplicate_prevention_time }}分間メッセージの送信ができません。</p>
            {{-- Footer --}}
            <div style="display:flex;justify-content:flex-end;">
                <lme-button-flat size="md" @click="showDuplicateWarningModal = false">閉じる</lme-button-flat>
            </div>
        </div>
    </lme-modal>

    {{-- ===== CSV HISTORY DELETE CONFIRM (fixed position, outside table) ===== --}}
    <div v-if="deleteConfirmId !== null"
         class="csv-del-confirm-fixed"
         :style="{ bottom: delConfirmPos.bottom + 'px', left: delConfirmPos.left + 'px' }"
         @click.stop>
        <p style="font-size:var(--lme-text-md);color:var(--lme-text-default);margin:0 0 var(--lme-pd-m);font-weight:500;">本当に削除しますか？</p>
        <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);justify-content:flex-end;">
            <lme-button-flat size="sm" @click="deleteConfirmId = null">閉じる</lme-button-flat>
            <lme-button-risk type="secondary" size="sm" @click="confirmDeleteHistoryItem(currentDeleteRecord)">削除する</lme-button-risk>
        </div>
    </div>

    {{-- ===== DELETE CONFIRMATION MODAL ===== --}}
    <lme-modal v-model="showDeleteModal" :header="false" :width="600" @close="closeDeleteModal">
        <div class="lme-flex lme-flex-col" style="gap: var(--lme-pd-m);">
            <div class="lme-flex lme-items-center lme-justify-between">
                <div class="lme-flex lme-items-center" style="gap: var(--lme-pd-xs); flex: 1; min-width: 0;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="flex-shrink:0;">
                        <circle cx="12" cy="12" r="12" fill="#FF4D4F"/>
                        <path d="M12 7v5.5" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
                        <circle cx="12" cy="16.5" r="1.25" fill="#fff"/>
                    </svg>
                    <span style="font-size: var(--lme-text-lg); font-weight: var(--lme-fw-bold); color: var(--lme-text-default); line-height: 24px;">
                        対応ステータス「@{{ pendingDeleteItem ? pendingDeleteItem.name_status : '' }}」を削除しますがよろしいですか？
                    </span>
                </div>
                <lme-button-ghost type="secondary" size="sm" icon @click="closeDeleteModal">
                    <lme-icon file_name="close-outlined"></lme-icon>
                </lme-button-ghost>
            </div>

            <p class="cs-modal-desc">
                削除する場合、友だちに登録されているこの対応ステータスに関する情報が全て削除されますのでご注意ください。
            </p>

            <div class="lme-flex lme-items-center lme-justify-between">
                <lme-checkbox v-model="skipDeleteConfirm" label="次から表示しない"></lme-checkbox>
                <div class="lme-flex lme-items-center lme-gap-xs">
                    <lme-button-flat size="md" @click="closeDeleteModal">キャンセル</lme-button-flat>
                    <lme-button-risk type="primary" size="md" @click="confirmDelete">削除する</lme-button-risk>
                </div>
            </div>
        </div>
    </lme-modal>

    @include('basic.chat_setting.modals.setting_color_create')

    {{-- ===== CSV CANCEL CONFIRMATION MODAL (design node 2144:1860) ===== --}}
    <lme-modal v-model="showCancelModal" :header="false" :width="600" @close="showCancelModal = false">
        <div class="lme-flex lme-flex-col" style="gap: var(--lme-pd-m);">
            <div class="lme-flex lme-items-center lme-justify-between">
                <div class="lme-flex lme-items-center" style="gap: var(--lme-pd-xs);">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="flex-shrink:0;">
                        <circle cx="12" cy="12" r="12" fill="#FF4D4F"/>
                        <path d="M12 7v5.5" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
                        <circle cx="12" cy="16.5" r="1.25" fill="#fff"/>
                    </svg>
                    <span style="font-size: var(--lme-text-lg); font-weight: var(--lme-fw-bold); color: var(--lme-text-default); line-height: 24px;">CSVデータの作成をキャンセルしてよろしいですか？</span>
                </div>
                <lme-button-ghost type="secondary" size="sm" icon @click="showCancelModal = false">
                    <lme-icon file_name="close-outlined"></lme-icon>
                </lme-button-ghost>
            </div>
            <div class="lme-flex lme-items-center lme-justify-end" style="gap: var(--lme-pd-xs);">
                <lme-button-flat size="md" @click="showCancelModal = false">戻る</lme-button-flat>
                <lme-button-risk type="primary" size="md" @click="confirmCancelCsv">キャンセルする</lme-button-risk>
            </div>
        </div>
    </lme-modal>

    {{-- ===== CSV 作成確認 MODAL (design node 2050:1803) ===== --}}
    <lme-modal v-model="showConfirmCreateModal" title="CSVデータの作成確認" :width="479" @close="showConfirmCreateModal = false">
        <div style="display:flex;flex-direction:column;gap:var(--lme-pd-m);">
            <div class="csv-params-card">
                <div style="display:flex;flex-direction:column;gap:var(--lme-pd-xs);">
                    <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);background:#fff;padding:4px 8px;border-radius:var(--lme-radius-xs);width: fit-content">
                        <lme-icon file_name="calendar-outlined" size="24"></lme-icon>
                        <span style="font-size:var(--lme-text-md);font-weight:500;color:#222;">期間</span>
                    </div>
                    <p style="font-size:var(--lme-text-md);color:#222;margin:0;font-weight: var(--lme-fw-regular)">
                        @{{ csvDateRange[0] || csvParams.dateFrom }} から @{{ csvDateRange[1] || csvParams.dateTo }} まで
                    </p>
                </div>
                <div style="height:1px;background:var(--lme-divider);width:100%;"></div>
                <div style="display:flex;flex-direction:column;gap:var(--lme-pd-xs);">
                    <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);background:#fff;padding:4px 8px;border-radius:var(--lme-radius-xs);width: fit-content">
                        <lme-icon file_name="message-outlined" size="24"></lme-icon>
                        <span style="font-size:var(--lme-text-md);font-weight:500;color:#222;">対象</span>
                    </div>
                    <div v-for="target in selectedCsvTargets" :key="target"
                         style="display:flex;align-items:center;font-size:var(--lme-text-md);">
                        <span style="color:#222;">・</span>
                        <span style="color:var(--lme-text-default);font-weight: var(--lme-fw-regular)">@{{ target }}</span>
                    </div>
                </div>
            </div>
            <p style="font-size:var(--lme-text-md);color:#222;margin:0;font-weight: var(--lme-fw-regular)">データ容量によって、作成に最大4時間程度かかる場合があります。</p>
            <div style="display:flex;justify-content:flex-end;">
                <lme-button-default type="primary" size="lg" @click="startCsvCreation">作業開始</lme-button-default>
            </div>
        </div>
    </lme-modal>

    {{-- ===== CSV EXPORT CONDITIONS PREVIEW MODAL (design node 2008:1642) ===== --}}
    <lme-modal v-model="showPreviewModal" title="CSVエクスポート条件" :width="356" @close="closePreviewModal">
        <template v-if="previewItem">
            <div class="csv-params-card">
                <div style="display:flex;flex-direction:column;gap:var(--lme-pd-xs);">
                    <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);background:#fff;padding:4px 8px;border-radius:var(--lme-radius-xs);width: fit-content">
                        <lme-icon file_name="calendar-outlined" size="24"></lme-icon>
                        <span style="font-size:var(--lme-text-md);font-weight:500;color:#222;">期間</span>
                    </div>
                    <p style="font-size:var(--lme-text-md);color:#222;margin:0;font-weight: var(--lme-fw-regular)">@{{ previewItem.export_from }} から @{{ previewItem.export_to }} まで</p>
                </div>
                <div style="height:1px;background:var(--lme-divider);width:100%;"></div>
                <div style="display:flex;flex-direction:column;gap:var(--lme-pd-xs);">
                    <div style="display:flex;align-items:center;gap:var(--lme-pd-xs);background:#fff;padding:4px 8px;border-radius:var(--lme-radius-xs); width: fit-content">
                        <lme-icon file_name="message-outlined" size="24"></lme-icon>
                        <span style="font-size:var(--lme-text-md);font-weight:500;color:#222;">対象</span>
                    </div>
                    <div v-if="previewItem.all_conversation_chat11 === 1"
                         style="display:flex;align-items:center;font-size:var(--lme-text-md);">
                        <span style="color:#222;">・</span>
                        <span style="color:var(--lme-text-default);font-weight: var(--lme-fw-regular)">全ての1:1チャット</span>
                    </div>
                    <div v-if="previewItem.not_include_sendall === 1"
                         style="display:flex;align-items:center;font-size:var(--lme-text-md);">
                        <span style="color:#222;">・</span>
                        <span style="color:var(--lme-text-default);font-weight: var(--lme-fw-regular)">一斉配信を除く</span>
                    </div>
                    <div v-if="previewItem.not_include_scenario === 1"
                         style="display:flex;align-items:center;font-size:var(--lme-text-md);">
                        <span style="color:#222;">・</span>
                        <span style="color:var(--lme-text-default);font-weight: var(--lme-fw-regular)">ステップ配信を除く</span>
                    </div>
                </div>
            </div>
            <div class="lme-flex lme-justify-end" style="margin-top: var(--lme-pd-m);">
                <lme-button-flat size="md" @click="closePreviewModal">閉じる</lme-button-flat>
            </div>
        </template>
    </lme-modal>

    {{-- ===== FILTER HISTORY DRAWER (design node 2055:2240) ===== --}}
    <lme-drawer v-model="showFilterDrawer" width="300px" title="絞り込み履歴">
        <div class="lme-drawer-content">
            <p style="font-size:var(--lme-text-md);color:var(--lme-text-default);margin-bottom:var(--lme-pd-xs);">直近10件の履歴を表示中</p>
            <div style="display:flex;flex-direction:column;gap:var(--lme-pd-xs);">
                <div v-for="(item, idx) in filterHistory" :key="idx"
                     style="background:#F7F7F7;border-radius:var(--lme-radius-s);padding:var(--lme-pd-xs);display:flex;align-items:center;justify-content:space-between;">
                    <span style="font-size:var(--lme-text-md);color:#222;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">@{{ item.date }}</span>
                    <lme-button-default type="primary" size="sm" @click="applyFilter(item)">確認</lme-button-default>
                </div>
            </div>
        </div>
    </lme-drawer>

</div>

@include('layout.modal_filter_v2')

@endsection

@push('js')
<script>
    var statusDefaultColor = {!! json_encode(\Illuminate\Support\Facades\Config::get('sns-line.color_default_v2', [])) !!};
</script>
<script src="/lme-ui/vendor/vue.js?v={{ config('sns-line.version') }}"></script>
<script src="/js/my_page/Sortable.min.js?v={{ config('sns-line.version') }}"></script>
<script src="/js/my_page/vuedraggable.min.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/icon/lme-icon.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/input/lme-input.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/input/lme-input-number.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/button/lme-button.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/button/lme-button-default.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/button/lme-button-flat.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/button/lme-button-ghost.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/button/lme-button-risk.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/button/lme-button-lgram.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/switch/lme-switch.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/checkbox/lme-checkbox.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/radio/lme-radio.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/radio/lme-radio-group.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/pagination/lme-pagination.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/modal/lme-modal.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/date-picker/lme-date-picker.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/date-picker/lme-range-picker.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/drawer/lme-drawer.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/tooltip/lme-tooltip.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/table/lme-table.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/tab/lme-tab-horizontal.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/tab/lme-tab-vertical.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/popover/popover.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/toast/lme-toast.js?v={{ config('sns-line.version') }}"></script>
<script src="/lme-ui/src/js/tag/lme-tag.js?v={{ config('sns-line.version') }}"></script>
<script src="/js/tailwindcss.js"></script>
<script>
    window.chatSettingV2Config = {
        defaultColors: @json(\Illuminate\Support\Facades\Config::get('sns-line.color_default_v2') ?? [])
    };
    var domainMediaSettingCsv = '{{ env('URL_SERVER_MEDIA') }}';
</script>
{{-- [#41226] Bộ đọc message lỗi dùng chung: các endpoint lưu trạng thái trả 422 kèm khoá
     `errors`, phải nạp TRƯỚC index_v2.js để nhánh error đọc được lý do bị từ chối. --}}
<script src="/js/chats/ajax-error.js?v={{ config('sns-line.version') }}"></script>
<script src="/js/chat_setting/index_v2.js?v={{ config('sns-line.version') }}"></script>
<script src="/js/form_answer/vee-validate.rc7.min.js"></script>
<script src="/js/form_answer/vee-validate_ja.min.js"></script>
<script>
    var basic_home_new = [];
    var params = [];
</script>
<script src="/js/friendlist/modal_filter_v2.js?v={{ config('sns-line.version') }}"></script>
<script>
    window.csv_create_download_file = chatSettingV2;
</script>
@endpush