@charset "UTF-8";
/**
 * GCC Chat Mode - Conversational UI for card creation
 * Deps: gcc-tokens  — mọi màu/spacing/radius/motion dùng var(--gcc-*)
 * @since 1.2.0 — redesigned for modern UX
 * @since 1.3.0 — migrated to gcc-tokens (no local :root)
 */

/* ══════════════════════════════════════════════════════════════════════════
   Local aliases — ánh xạ token cũ (--gcc-c-*) → gcc-tokens
   Giữ lại để JS-generated inline styles (nếu có) vẫn hoạt động.
   CSS bên dưới sử dụng trực tiếp var(--gcc-*) — không qua alias.
   ════════════════════════════════════════════════════════════════════════ */
:root {
    /* Surface */
    --gcc-c-bg:        var(--gcc-surface);        /* #ffffff */
    --gcc-c-surface:   var(--gcc-surface-1);      /* #f9f9f9 */
    --gcc-c-surface-2: var(--gcc-surface-2);      /* #f4f4f4 */
    /* Line */
    --gcc-c-border:    var(--gcc-line-faint);     /* #EEEEEE */
    --gcc-c-border-2:  var(--gcc-line);           /* #CCCCCC */
    /* Ink */
    --gcc-c-text:      var(--gcc-ink-strong);     /* #1f1f1f */
    --gcc-c-text-2:    var(--gcc-ink-muted);      /* #525252 */
    --gcc-c-text-3:    var(--gcc-ink-faint);      /* #878787 */
    /* Accent */
    --gcc-c-accent:    var(--gcc-btn-black-bg);   /* #1f1f1f */
    --gcc-c-accent-h:  var(--gcc-btn-black-bg-hover); /* #000000 */
    /* Status */
    --gcc-c-error:     var(--gcc-error-text);     /* #b91c1c */
    --gcc-c-error-bg:  var(--gcc-error-bg);       /* #fef2f2 */
    --gcc-c-error-bd:  var(--gcc-error-border);   /* #fecaca */
    /* Motion — map sang gcc-tokens */
    --gcc-ease:        var(--gcc-ease-out);
    --gcc-ease-spring: var(--gcc-ease-spring);
    --gcc-t-fast:      var(--gcc-dur-fast);       /* 120ms */
    --gcc-t-base:      var(--gcc-dur-base);       /* 200ms */
    --gcc-t-slow:      var(--gcc-dur-slow);       /* 350ms */
    /* Radii — map sang gcc-tokens */
    --gcc-r-sm:   var(--gcc-radius-sm);           /* 4px */
    --gcc-r-md:   var(--gcc-radius-md);           /* 10px */
    --gcc-r-lg:   var(--gcc-radius-lg);           /* 12px */
    --gcc-r-xl:   var(--gcc-radius-xl);           /* 16px */
    --gcc-r-pill: var(--gcc-radius-full);         /* 9999px */
}

/* ══════════════════════════════════════════════════════════════════════════
   Utility
   ════════════════════════════════════════════════════════════════════════ */
.gcc-hidden,
.gcc-chat-input-area .gcc-hidden,
button.gcc-hidden { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Shell
   ─────────────────────────────────────────────────────────────────────────
   Hai trục thiết kế:
   1. Tỷ lệ: GIỮ 9:16 dọc trên mọi viewport — đẹp như thiệp portrait.
   2. Vị trí: căn GIỮA viewport theo chiều dọc, có padding 2 đầu để không
      dính top/bottom (mép menu, taskbar).

   Mobile (< 769px):
     - aspect-ratio 9:16 vẫn áp dụng (full color độ rộng → cao theo ratio)
     - margin: tự center khối shell trong viewport
     - height giới hạn để không vượt khung viewport (đảm bảo có padding top/bottom)

   Desktop (>= 769px):
     - aspect-ratio 9:16
     - max-height: viewport - padding để không tràn cao
     - margin auto: tự center
   ════════════════════════════════════════════════════════════════════════ */
.gcc-chat-shell {
    display: flex;
    flex-direction: column;
    width: 100%;

    /* ─── KÍCH THƯỚC: 9:16 dọc trên mọi viewport ───
       Logic: dùng aspect-ratio 9/16. Trình duyệt sẽ tính height từ width.
       Nếu height theo ratio > max-height → max-height thắng, width sẽ tự
       co lại (vì aspect-ratio buộc giữ tỷ lệ). */
    aspect-ratio: 9 / 16;
    max-width: 440px;                              /* upper bound trên desktop */
    max-height: calc(100vh - 48px);                /* desktop padding 24px×2 */
    max-height: calc(100dvh - 48px);
    min-height: 480px;                             /* safety minimum */

    /* ─── CĂN GIỮA: shell tự center trong parent column ───
       margin auto theo cả 4 hướng để center cả vertical lẫn horizontal.
       Yêu cầu parent column có display: flex; align-items: stretch
       — nhưng vì shell có max-height, vùng dư trên/dưới sẽ là margin. */
    margin: auto;

    background: var(--gcc-c-bg);
    border: 1px solid var(--gcc-c-border);
    border-radius: var(--gcc-r-xl) !important;
    /* overflow:hidden chỉ để giữ border-radius — KHÔNG scroll ở đây */
    overflow: hidden;
    box-shadow:
        0 2px 4px rgba(0,0,0,.04),
        0 8px 24px rgba(0,0,0,.06),
        0 0 0 1px rgba(0,0,0,.03);
}

/* ─── Wrapper / parent: cần là flex column để margin auto của shell hoạt động ───
   Nếu parent đã có sẵn layout flex thì giữ nguyên; còn không, hỗ trợ thêm
   selector phổ biến để center theo trục dọc. */
#tab-chat,
.gcc-creator-page #tab-chat,
.gcc-chat-shell-wrap {
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;        /* center theo trục dọc */
    align-items: center;            /* center theo trục ngang */
    padding: 24px 0;                /* padding top/bottom để shell không dính mép */
    box-sizing: border-box;
}

/* ─── Desktop: shell rộng hơn chút, padding lớn hơn ─── */
@media (min-width: 769px) {
    .gcc-chat-shell {
        max-width: 480px;                          /* desktop max width đẹp hơn */
        max-height: calc(100vh - 80px);            /* desktop padding 40px×2 */
        max-height: calc(100dvh - 80px);
        min-height: 560px;
    }

    #tab-chat,
    .gcc-creator-page #tab-chat,
    .gcc-chat-shell-wrap {
        padding: 40px 0;
    }
}

/* ─── Mobile (< 769px): full màn hình (gần như) nhưng vẫn 9:16 ───
   Trên mobile, width của parent đã = 100% viewport rồi → aspect-ratio sẽ
   tính height = width × 16/9. Nếu height > viewport thì max-height sẽ ép
   shell scale xuống tự nhiên (width auto co lại theo ratio). */
@media (max-width: 768px) {
    .gcc-chat-shell {
        max-width: 100%;                           /* full chiều ngang */
        max-height: calc(100vh - 24px);            /* mobile padding 12px×2 */
        max-height: calc(100dvh - 24px);
        min-height: 420px;
        border-radius: var(--gcc-r-lg) !important;
    }

    #tab-chat,
    .gcc-creator-page #tab-chat,
    .gcc-chat-shell-wrap {
        padding: 12px;                             /* mobile padding tất cả 4 mép */
    }
}

/* Scale-to-fit mobile: JS set transform:scale() — cần overflow:visible để không clip */
@media (max-width: 900px) {
    #gcc-chat-shell { overflow: visible; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Header
   ════════════════════════════════════════════════════════════════════════ */
.gcc-chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px;
    background: var(--gcc-c-bg);
    color: var(--gcc-c-text);
    border-bottom: 1px solid var(--gcc-c-border);
    flex-shrink: 0; /* cố định — không bao giờ co */
    /* position + z-index: cần thiết trên mobile chế độ chat-only, nơi sticky
       preview button (.gcc-sticky-btn-wrap, fixed z-index:1010) có thể đè
       lên header và nuốt click vào Reset / Switch buttons */
    position: relative;
    z-index: 1015;
}

.gcc-chat-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: -.01em;
}
.gcc-chat-avatar { display: none; }
.gcc-chat-name   { color: var(--gcc-c-text); letter-spacing: -.01em; }

.gcc-chat-progress {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--gcc-c-text-2);
    background: var(--gcc-c-surface-2);
    padding: 3px 10px;
    border-radius: var(--gcc-r-pill) !important;
    border: 1px solid var(--gcc-c-border);
    letter-spacing: .01em;
    transition: background var(--gcc-t-fast) var(--gcc-ease);
}

.gcc-chat-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    /* z-index cao + position relative để các nút Reset/Switch luôn click được,
       không bị sticky preview button (z-index 1010) đè lên trên mobile */
    position: relative;
    z-index: 1020;
}

.gcc-chat-header .gcc-chat-btn-icon,
.gcc-chat-header button.gcc-chat-btn-icon {
    width: 30px !important;
    height: 30px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    border: none !important;
    border-radius: var(--gcc-r-sm) !important;
    background: transparent !important;
    color: var(--gcc-c-text-3) !important;
    cursor: pointer;
    font-size: 15px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background var(--gcc-t-fast) var(--gcc-ease), color var(--gcc-t-fast) var(--gcc-ease) !important;
}
.gcc-chat-header .gcc-chat-btn-icon:hover,
.gcc-chat-header button.gcc-chat-btn-icon:hover {
    background: var(--gcc-c-surface-2) !important;
    color: var(--gcc-c-text) !important;
    border: none !important;
    box-shadow: none !important;
}
.gcc-chat-header .gcc-chat-btn-icon:focus,
.gcc-chat-header button.gcc-chat-btn-icon:focus {
    outline: none !important;
    border: none !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,.1) !important;
}
.gcc-chat-header .gcc-chat-btn-icon img.emoji { width: 14px; height: 14px; margin: 0; }

/* Back button in header — same compact look as icon buttons, no border */
.gcc-chat-header #gccChatBack {
    width: 30px !important;
    height: 30px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: var(--gcc-r-sm) !important;
    background: transparent !important;
    color: var(--gcc-c-text-3) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--gcc-t-fast) var(--gcc-ease), color var(--gcc-t-fast) var(--gcc-ease) !important;
}
.gcc-chat-header #gccChatBack:hover {
    background: var(--gcc-c-surface-2) !important;
    color: var(--gcc-c-text) !important;
    box-shadow: none !important;
    transform: none !important;
}
.gcc-chat-header #gccChatBack:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0,0,0,.1) !important;
}

/* ── Switch-to-Form button: hide default emoji, show SVG icon ──
   Icon: form/document with pen — mang nghĩa "chuyển sang chỉnh sửa ở chế độ form"
   ─────────────────────────────────────────────────────────────── */
#gccChatSwitchForm img.emoji { display: none !important; }
#gccChatSwitchForm::before { content: none !important; }

#gccChatSwitchForm {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='13' height='18' rx='2'/><line x1='8' y1='8' x2='14' y2='8'/><line x1='8' y1='12' x2='14' y2='12'/><line x1='8' y1='16' x2='12' y2='16'/><path d='M17 14l4 4-2 2-4-4z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 16px 16px !important;
}
#gccChatSwitchForm:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='3' width='13' height='18' rx='2'/><line x1='8' y1='8' x2='14' y2='8'/><line x1='8' y1='12' x2='14' y2='12'/><line x1='8' y1='16' x2='12' y2='16'/><path d='M17 14l4 4-2 2-4-4z'/></svg>") !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Stream
   ════════════════════════════════════════════════════════════════════════ */
.gcc-chat-stream {
    /* ── Scroll chuẩn trong flex container ──────────────────────────────
       flex: 1 1 0  →  chiếm toàn bộ không gian còn lại
       min-height: 0  →  BẮT BUỘC: flex item mặc định min-height:auto
                          nên không bao giờ nhỏ hơn content → overflow không hoạt động
       overflow-y: auto  →  scroll chỉ khi content vượt chiều cao
    ─────────────────────────────────────────────────────────────────── */
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 16px 28px;
    background: var(--gcc-c-surface);
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    /* Ẩn scrollbar — vẫn cuộn được bằng touch/wheel */
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE/Edge cũ */
}
.gcc-chat-stream > :last-child { margin-bottom: 2px; }
.gcc-chat-stream::-webkit-scrollbar { display: none; } /* Chrome/Safari */

/* ══════════════════════════════════════════════════════════════════════════
   Bubbles
   ════════════════════════════════════════════════════════════════════════ */
.gcc-chat-bubble {
    max-width: 82%;
    padding: 10px 14px;
    border-radius: var(--gcc-r-lg) !important;
    font-size: 14px;
    line-height: 1.55;
    word-wrap: break-word;
    animation: gccBubbleIn var(--gcc-t-base) var(--gcc-ease) both;
}

@keyframes gccBubbleIn {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.gcc-chat-bubble.bot {
    align-self: flex-start;
    background: var(--gcc-c-bg);
    color: var(--gcc-c-text);
    border: 1px solid var(--gcc-c-border);
    border-bottom-left-radius: var(--gcc-radius-xs);
    display: flex;
    gap: 9px;
    align-items: flex-start;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.gcc-chat-bubble.bot::before {
    content: '\1F916';
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1.5;
    margin-top: 1px;
}

.gcc-chat-bubble.user {
    align-self: flex-end;
    background: var(--gcc-c-accent);
    color: var(--gcc-ink-inverse);
    border: 1px solid var(--gcc-c-accent);
    border-bottom-right-radius: var(--gcc-radius-xs);
    cursor: pointer;
    transition:
        background var(--gcc-t-fast) var(--gcc-ease),
        transform var(--gcc-t-fast) var(--gcc-ease),
        box-shadow var(--gcc-t-fast) var(--gcc-ease);
}
.gcc-chat-bubble.user:hover {
    background: var(--gcc-c-accent-h);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.gcc-chat-bubble.user:active { transform: translateY(0); }
.gcc-chat-bubble.user .gcc-chat-edit-hint {
    display: block;
    font-size: 10.5px;
    opacity: .6;
    margin-top: 4px;
    font-style: normal;
    letter-spacing: .01em;
}

/* ── Inline-edit patch flash ─────────────────────────────────────────── */
/* Khi user chỉnh sửa text trực tiếp trên card, bubble được patch ngược   */
/* lại và flash nhẹ để user biết chat đã đồng bộ.                         */
@keyframes gcc-bubble-patch-flash {
    0%   { box-shadow: 0 0 0 0 rgba(var(--gcc-c-accent-rgb, 99,102,241), .55); }
    40%  { box-shadow: 0 0 0 6px rgba(var(--gcc-c-accent-rgb, 99,102,241), .20); }
    100% { box-shadow: 0 0 0 8px rgba(var(--gcc-c-accent-rgb, 99,102,241), 0); }
}
.gcc-chat-bubble.user.gcc-chat-bubble--patched {
    animation: gcc-bubble-patch-flash 1.2s var(--gcc-ease, ease) forwards;
}

.gcc-chat-bubble.error {
    align-self: flex-start;
    background: var(--gcc-c-error-bg);
    color: var(--gcc-c-error);
    border: 1px solid var(--gcc-c-error-bd);
    border-bottom-left-radius: var(--gcc-radius-xs);
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
/* Shake animation khi user lặp lại cùng 1 lỗi (vd: bấm Send nhiều lần với cùng input sai) */
@keyframes gccErrorShake {
    0%,100% { transform: translateX(0); }
    15%     { transform: translateX(-6px); }
    30%     { transform: translateX(6px); }
    45%     { transform: translateX(-4px); }
    60%     { transform: translateX(4px); }
    75%     { transform: translateX(-2px); }
}
.gcc-chat-bubble.error.gcc-shake {
    animation: gccErrorShake .42s ease-in-out;
}
.gcc-chat-bubble.error::before {
    content: '!';
    flex-shrink: 0;
    width: 18px; height: 18px;
    border-radius: 50% !important;
    background: var(--gcc-c-error);
    color: var(--gcc-ink-inverse);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.gcc-chat-bubble.stale { opacity: .45; }

/* ══════════════════════════════════════════════════════════════════════════
   Typing indicator
   ════════════════════════════════════════════════════════════════════════ */
.gcc-chat-typing {
    align-self: flex-start;
    background: var(--gcc-c-bg);
    border: 1px solid var(--gcc-c-border);
    padding: 11px 14px;
    border-radius: var(--gcc-r-lg) !important;
    border-bottom-left-radius: var(--gcc-radius-xs);
    display: inline-flex;
    gap: 5px;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.gcc-chat-typing span {
    width: 6px; height: 6px;
    border-radius: 50% !important;
    background: var(--gcc-c-text-3);
    animation: gccTypingDot 1.1s var(--gcc-ease) infinite;
}
.gcc-chat-typing span:nth-child(2) { animation-delay: .16s; }
.gcc-chat-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes gccTypingDot {
    0%, 75%, 100% { transform: translateY(0);    opacity: .35; }
    37%           { transform: translateY(-4px); opacity: 1;   }
}

/* ══════════════════════════════════════════════════════════════════════════
   Input area
   ════════════════════════════════════════════════════════════════════════ */
.gcc-chat-input-area {
    /* ── Input area KHÔNG scroll (default) ──────────────────────────────
       overflow: visible  →  content con tự scroll bên trong nó (captions-wrap)
    ─────────────────────────────────────────────────────────────────── */
    flex-shrink: 0;
    overflow: visible;
    padding: 14px 16px;
    background: var(--gcc-c-bg);
    border-top: 1px solid var(--gcc-c-border);
}

/* ── MWAC mode: input area scrolls to show all caption rows + action buttons ── */
.gcc-chat-input-mwac {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 62vh;
    flex-shrink: 1 !important;
    min-height: 0 !important;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--gcc-c-border, #e5e7eb) transparent;
}
.gcc-chat-input-mwac::-webkit-scrollbar { width: 4px; }
.gcc-chat-input-mwac::-webkit-scrollbar-thumb {
    background: var(--gcc-c-border, #e5e7eb);
    border-radius: var(--gcc-radius-xs) !important;
}
/* Captions wrap không cần max-height riêng khi parent đã scroll */
.gcc-chat-input-mwac .gcc-chat-mwac-captions-wrap {
    max-height: none !important;
    overflow: visible !important;
}
/* Action buttons sticky ở đáy khi scroll */
.gcc-chat-input-mwac .gcc-chat-actions-row {
    position: sticky;
    bottom: 0;
    background: var(--gcc-c-bg, #fff);
    padding-top: 8px;
    z-index: 2;
    border-top: 1px solid var(--gcc-c-border, #e5e7eb);
    margin-top: 8px;
}
.gcc-chat-input-row { display: flex; gap: 10px; align-items: flex-end; }

.gcc-chat-input-row input[type="text"],
.gcc-chat-input-row input[type="email"],
.gcc-chat-input-row input[type="url"],
.gcc-chat-input-row input[type="datetime-local"],
.gcc-chat-input-row textarea {
    flex: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 4px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1.5px solid var(--gcc-c-border-2, #d2d2d6) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--gcc-c-text, #111113) !important;
    font-size: 15px !important;
    font-family: inherit !important;
    line-height: 1.6 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    transition: border-color var(--gcc-t-fast) var(--gcc-ease) !important;
}
.gcc-chat-input-row input::placeholder,
.gcc-chat-input-row textarea::placeholder {
    color: var(--gcc-c-text-3, #a0a0ab) !important;
    font-size: 14.5px !important;
}
.gcc-chat-input-row input:focus,
.gcc-chat-input-row textarea:focus {
    border-bottom-color: var(--gcc-c-text, #111113) !important;
    box-shadow: none !important;
    outline: none !important;
}
.gcc-chat-input-row textarea {
    resize: vertical !important;
    min-height: 60px !important;
    max-height: 140px !important;
    overflow-y: auto !important;
}

.gcc-chat-counter {
    font-size: 11px;
    color: var(--gcc-c-text-3);
    text-align: right;
    margin-top: 5px;
    letter-spacing: .02em;
    transition: color var(--gcc-t-base) var(--gcc-ease);
}
.gcc-chat-counter.gcc-near { color: var(--gcc-c-text-2); font-weight: 600; }
.gcc-chat-counter.gcc-over { color: var(--gcc-c-error);  font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════════
   Buttons
   ════════════════════════════════════════════════════════════════════════ */
.gcc-chat-btn {
    padding: 9px 18px;
    border: 1.5px solid var(--gcc-c-accent);
    border-radius: var(--gcc-r-md) !important;
    background: var(--gcc-c-accent);
    color: var(--gcc-ink-inverse);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: -.01em;
    white-space: nowrap;
    transition:
        background var(--gcc-t-fast) var(--gcc-ease),
        border-color var(--gcc-t-fast) var(--gcc-ease),
        transform var(--gcc-t-fast) var(--gcc-ease-spring),
        box-shadow var(--gcc-t-fast) var(--gcc-ease);
}
.gcc-chat-btn:hover {
    background: var(--gcc-c-accent-h);
    border-color: var(--gcc-c-accent-h);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
    transform: translateY(-1px);
}
.gcc-chat-btn:active { transform: scale(.97) translateY(0); box-shadow: none; }
.gcc-chat-btn:disabled {
    background: var(--gcc-c-text-3);
    border-color: var(--gcc-c-text-3);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.gcc-chat-btn.secondary {
    background: var(--gcc-c-bg);
    color: var(--gcc-c-text);
    border: 1.5px solid var(--gcc-c-border-2);
}
.gcc-chat-btn.secondary:hover {
    background: var(--gcc-c-surface-2);
    border-color: var(--gcc-c-text-2);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.gcc-chat-btn.ghost {
    background: transparent;
    color: var(--gcc-c-text-2);
    border: 1.5px solid var(--gcc-c-border);
}
.gcc-chat-btn.ghost:hover {
    background: var(--gcc-c-surface-2);
    color: var(--gcc-c-text);
    border-color: var(--gcc-c-border-2);
}

.gcc-chat-actions-row {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
    flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Choice options
   ════════════════════════════════════════════════════════════════════════ */
.gcc-chat-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}
.gcc-chat-choices > .gcc-chat-choice:nth-child(odd):last-child { grid-column: 1 / -1; }

.gcc-chat-choice {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 14px 12px !important;
    background: var(--gcc-c-bg) !important;
    border: 1.5px solid var(--gcc-c-border) !important;
    border-radius: var(--gcc-r-md) !important;
    cursor: pointer !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition:
        border-color var(--gcc-t-fast) var(--gcc-ease),
        background var(--gcc-t-fast) var(--gcc-ease),
        transform var(--gcc-t-fast) var(--gcc-ease-spring),
        box-shadow var(--gcc-t-fast) var(--gcc-ease);
}
.gcc-chat-choice:hover {
    border-color: var(--gcc-c-text) !important;
    background: var(--gcc-c-surface) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
    transform: translateY(-1px) !important;
}
.gcc-chat-choice:active { transform: scale(.98) !important; }
.gcc-chat-choice.selected {
    border-color: var(--gcc-c-text) !important;
    background: var(--gcc-c-surface-2) !important;
    box-shadow: inset 0 0 0 1.5px var(--gcc-c-text) !important;
}
.gcc-chat-choice-label {
    font-weight: 600;
    color: var(--gcc-c-text);
    text-align: center;
    font-size: 13.5px;
    line-height: 1.3;
    letter-spacing: -.01em;
}
.gcc-chat-choice-desc {
    font-size: 11.5px;
    color: var(--gcc-c-text-2);
    margin-top: 2px;
    text-align: center;
    font-weight: 400;
    line-height: 1.35;
}

@media (max-width: 480px) {
    .gcc-chat-choice      { padding: 10px 8px !important; }
    .gcc-chat-choice-label { font-size: 12.5px; }
    .gcc-chat-choice-desc  { font-size: 11px;   }
}

/* ══════════════════════════════════════════════════════════════════════════
   Picker
   ════════════════════════════════════════════════════════════════════════ */
.gcc-chat-pick {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--gcc-c-surface-2);
    border: 1.5px solid var(--gcc-c-border);
    border-radius: var(--gcc-r-md) !important;
    transition: background var(--gcc-t-base) var(--gcc-ease), border-color var(--gcc-t-base) var(--gcc-ease);
}
.gcc-chat-pick.is-empty {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: stretch;
}
/* Khi is-empty có ≥ 2 button con: layout 2 cột cùng hàng */
.gcc-chat-pick.is-empty:has(> :nth-child(2)) {
    grid-template-columns: repeat(2, 1fr);
}
/* Shared reset cho TẤT CẢ button con trong is-empty — căn đều nhau */
.gcc-chat-pick.is-empty .gcc-chat-pick-primary,
.gcc-chat-pick.is-empty .gcc-ai-gen-btn {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    /* Override Flatsome: line-height:2.4em & min-height:2.5em làm button cao lệch */
    line-height: 1.3 !important;
    min-height: 0 !important;
    /* Override Flatsome: margin-bottom:1em & margin-right:1em */
    margin: 0 !important;
    vertical-align: middle !important;
}
.gcc-chat-pick-helper {
    margin: 0; font-size: 12.5px; color: var(--gcc-c-text-2); line-height: 1.45;
}
.gcc-chat-pick.is-picking { border-color: var(--gcc-c-border-2); }
.gcc-chat-pick.is-picking .gcc-chat-pick-primary {
    width: 100%; padding: 12px 16px; font-size: 14px;
    opacity: .7; cursor: wait;
    animation: gccPickPulse 1.4s var(--gcc-ease) infinite;
}
@keyframes gccPickPulse {
    0%, 100% { opacity: .75; }
    50%       { opacity: .45; }
}
.gcc-chat-pick.is-picked {
    background: var(--gcc-c-bg);
    border-color: var(--gcc-c-text);
    box-shadow: 0 0 0 4px rgba(0,0,0,.04);
}
.gcc-chat-pick-summary { display: flex; align-items: center; gap: 10px; padding: 4px 2px; }
.gcc-chat-pick-check {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50% !important;
    background: var(--gcc-c-text); color: var(--gcc-ink-inverse); font-size: 12px; font-weight: 700; line-height: 1;
}
.gcc-chat-pick-value {
    flex: 1 1 auto; font-size: 13.5px; font-weight: 600;
    color: var(--gcc-c-text); word-break: break-word; line-height: 1.35; letter-spacing: -.01em;
}
.gcc-chat-pick-buttons { display: flex; gap: 8px; }
.gcc-chat-pick-buttons > .gcc-chat-btn { flex: 1 1 0; min-width: 0; padding: 10px 14px; }

.gcc-chat-pick-clear {
    flex-shrink: 0; width: 28px; height: 28px;
    border: 1.5px solid var(--gcc-c-border-2); border-radius: 50% !important;
    background: transparent; color: var(--gcc-c-text-3);
    font-size: 17px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
    transition: background var(--gcc-t-fast) var(--gcc-ease), color var(--gcc-t-fast) var(--gcc-ease), border-color var(--gcc-t-fast) var(--gcc-ease);
}
.gcc-chat-pick-clear:hover { background: var(--gcc-c-error-bg); color: var(--gcc-c-error); border-color: var(--gcc-c-error); }

.gcc-chat-pick-confirm-clear {
    display: flex; flex-direction: column; gap: 10px; padding: 10px;
    background: var(--gcc-c-error-bg); border: 1.5px solid var(--gcc-c-error-bd);
    border-radius: var(--gcc-r-sm) !important;
    animation: gccBubbleIn var(--gcc-t-fast) var(--gcc-ease) both;
}
.gcc-chat-pick-confirm-msg { margin: 0; font-size: 13.5px; color: var(--gcc-c-text); font-weight: 600; }
.gcc-chat-pick-confirm-buttons { display: flex; gap: 8px; }
.gcc-chat-pick-confirm-buttons > .gcc-chat-btn { flex: 1 1 0; min-width: 0; }

.gcc-chat-pick-clear-confirm,
button.gcc-chat-pick-clear-confirm {
    background: var(--gcc-c-error) !important;
    border-color: var(--gcc-c-error) !important;
    color: var(--gcc-ink-inverse) !important;
}
.gcc-chat-pick-clear-confirm:hover,
button.gcc-chat-pick-clear-confirm:hover {
    background: var(--gcc-error-hover) !important;
    border-color: var(--gcc-error-hover) !important;
}

@media (max-width: 480px) {
    .gcc-chat-pick { padding: 10px; }
    .gcc-chat-pick.is-empty .gcc-chat-pick-primary,
    .gcc-chat-pick.is-picking .gcc-chat-pick-primary { padding: 14px 16px; min-height: 46px; }
    .gcc-chat-pick-buttons > .gcc-chat-btn,
    .gcc-chat-pick-confirm-buttons > .gcc-chat-btn { min-height: 44px; }
    .gcc-chat-pick-clear { width: 32px; height: 32px; font-size: 19px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Legacy media row
   ════════════════════════════════════════════════════════════════════════ */
.gcc-chat-media-row {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding: 8px 10px;
    background: var(--gcc-c-surface-2);
    border: 1.5px solid var(--gcc-c-border);
    border-radius: var(--gcc-r-sm) !important;
}
.gcc-chat-media-status { font-size: 13px; color: var(--gcc-c-text-2); }
.gcc-chat-media-status.picked { color: var(--gcc-c-text); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════════════════
   Final preview
   ════════════════════════════════════════════════════════════════════════ */
.gcc-chat-final { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.gcc-chat-final-summary {
    background: var(--gcc-c-surface-2);
    border: 1.5px solid var(--gcc-c-border);
    border-radius: var(--gcc-r-md) !important;
    padding: 10px 12px; font-size: 12.5px; color: var(--gcc-c-text);
    max-height: 120px; overflow-y: auto;
}
.gcc-chat-final-summary dt { font-weight: 600; color: var(--gcc-c-text); margin-top: 4px; }
.gcc-chat-final-summary dd { margin: 0 0 4px 0; color: var(--gcc-c-text-2); }

.gcc-chat-final-create {
    padding: 13px 20px; font-size: 15px; font-weight: 600;
    background: var(--gcc-c-accent);
    border: 1.5px solid var(--gcc-c-accent);
    border-radius: var(--gcc-r-md) !important; color: var(--gcc-ink-inverse); cursor: pointer;
    letter-spacing: -.01em;
    transition:
        background var(--gcc-t-fast) var(--gcc-ease),
        transform var(--gcc-t-fast) var(--gcc-ease-spring),
        box-shadow var(--gcc-t-fast) var(--gcc-ease);
}
.gcc-chat-final-create:hover {
    background: var(--gcc-c-accent-h);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.gcc-chat-final-create:active  { transform: scale(.98) translateY(0); box-shadow: none; }
.gcc-chat-final-create:disabled {
    background: var(--gcc-c-text-3); border-color: var(--gcc-c-text-3);
    cursor: not-allowed; transform: none; box-shadow: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Confirm modal (replaces native browser confirm())
   ════════════════════════════════════════════════════════════════════════ */
.gcc-confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 99998;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--gcc-t-base) var(--gcc-ease);
}
.gcc-confirm-backdrop.gcc-confirm--visible {
    opacity: 1;
}
.gcc-confirm-dialog {
    background: var(--gcc-c-bg);
    border-radius: var(--gcc-r-xl);
    padding: 24px 24px 20px;
    min-width: 280px;
    max-width: 360px;
    width: calc(100% - 48px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
    transform: translateY(8px) scale(.97);
    transition: transform var(--gcc-t-base) var(--gcc-ease);
}
.gcc-confirm-backdrop.gcc-confirm--visible .gcc-confirm-dialog {
    transform: translateY(0) scale(1);
}
.gcc-confirm-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--gcc-c-text);
    margin: 0 0 8px;
    line-height: 1.4;
}
.gcc-confirm-message {
    font-size: 13.5px;
    color: var(--gcc-c-text-2);
    margin: 0 0 20px;
    line-height: 1.55;
}
.gcc-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.gcc-confirm-actions .gcc-chat-btn {
    min-width: 72px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Responsive
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .gcc-chat-shell  { border-radius: var(--gcc-r-lg) !important; }
    .gcc-chat-header { padding: 11px 13px; gap: 8px; }
    .gcc-chat-title  { font-size: 14px; }
    .gcc-chat-progress { font-size: 11px; padding: 2px 8px; }

    .gcc-chat-header .gcc-chat-btn-icon,
    .gcc-chat-header button.gcc-chat-btn-icon {
        width: 36px !important; height: 36px !important; font-size: 16px !important;
    }

    .gcc-chat-stream { padding: 12px 13px 18px; gap: 10px; }
    .gcc-chat-bubble { max-width: 88%; font-size: 14px; padding: 9px 12px; }

    .gcc-chat-input-area { padding: 11px 13px; }
    .gcc-chat-input-row  { gap: 8px; }
    .gcc-chat-input-row input[type="text"],
    .gcc-chat-input-row input[type="email"],
    .gcc-chat-input-row input[type="url"],
    .gcc-chat-input-row input[type="datetime-local"],
    .gcc-chat-input-row textarea {
        font-size: 16px !important;
        padding: 10px 4px !important;
    }
    .gcc-chat-btn { padding: 9px 14px; font-size: 13.5px; min-height: 40px; }
    .gcc-chat-btn.ghost,
    .gcc-chat-btn.secondary { min-height: 38px; }
    .gcc-chat-final-create { font-size: 15px; padding: 14px 18px; min-height: 48px; }
}

@media (max-width: 480px) {
    .gcc-chat-shell {
        /* Aspect-ratio 9/16 + max-height đã handle ở khối Shell chính.
           Đây chỉ override radius nhỏ hơn cho phone screens. */
        min-height: 380px;
        border-radius: var(--gcc-r-md) !important;
    }
    .gcc-chat-header { padding: 9px 11px; }
    .gcc-chat-title  { font-size: 13.5px; gap: 6px; }
    .gcc-chat-stream { padding: 10px 11px 16px; }
    .gcc-chat-bubble { max-width: 90%; font-size: 13.5px; padding: 8px 11px; }
    .gcc-chat-input-area { padding: 9px 11px; }
    .gcc-chat-input-row  { gap: 6px; }
    .gcc-chat-final-summary { max-height: 90px; padding: 8px 10px; font-size: 12px; }
    .gcc-chat-final-create  { padding: 12px 16px; }
    .gcc-chat-actions-row   { gap: 6px; }
    .gcc-chat-actions-row .gcc-chat-btn { flex: 1 1 auto; min-width: 0; }
    .gcc-chat-choices { gap: 6px; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .gcc-chat-shell {
        height: calc(100vh - 40px); height: calc(100dvh - 40px);
        min-height: 0; max-height: none; aspect-ratio: auto;
    }
    .gcc-chat-stream { padding: 8px 10px 12px; }
    .gcc-chat-bubble { max-width: 75%; }
    .gcc-chat-final-summary { max-height: 60px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Preview column inside #tab-chat
   The .gcc-preview-toggle is moved into .gcc-col--preview when chat tab is
   active. Without explicit sizing, the column inherits nothing and the
   wedding card renders as a square (same as the general card).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Shared: constrain the toggle wrapper so it doesn't overflow ── */
#tab-chat .gcc-col--preview .gcc-preview-toggle {
    width: 100%;
    max-width: 100%;
}
#tab-chat .gcc-col--preview .gcc-preview-toggle__panel {
    width: 100%;
}

/* ── General preview inside chat tab — keep square card centred ── */
#tab-chat .gcc-col--preview #gccLivePreview {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* ── Wedding preview inside chat tab — enforce 9:16 portrait ratio ── */
#tab-chat .gcc-col--preview #gccWeddingPreview {
    /* Override any inherited square constraints */
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

#tab-chat .gcc-col--preview #gccWeddingPreview .gcc-preview-wedding-card {
    width: 100% !important;
    max-width: 360px !important;   /* cap on very wide columns */
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    min-height: 0 !important;
    /* Remove any square overrides from general-card styles */
    flex-shrink: 0;
}

/* ── Landscape orientation variant ── */
body.gcc-wedding-active
#tab-chat .gcc-col--preview
#gccWeddingPreview .gcc-preview-wedding-card[data-orientation="landscape"] {
    aspect-ratio: 16 / 9 !important;
    max-width: 100% !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Body class gcc-wedding-active: hide general, show wedding in chat col
   ════════════════════════════════════════════════════════════════════════ */
body.gcc-wedding-active #tab-chat .gcc-col--preview #gccLivePreview   { display: none !important; }
body.gcc-wedding-active #tab-chat .gcc-col--preview #gccWeddingPreview { display: flex !important; }

/* Without wedding-active: hide wedding, show general */
body:not(.gcc-wedding-active) #tab-chat .gcc-col--preview #gccWeddingPreview { display: none !important; }



/* ══════════════════════════════════════════════════════════════════════════
   Auto-theme inline UI
   ════════════════════════════════════════════════════════════════════════ */
.gcc-chat-autotheme { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.gcc-chat-autotheme-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gcc-chat-autotheme-select {
    flex: 1 1 160px; min-width: 140px; padding: 7px 10px;
    border: 1.5px solid var(--gcc-c-border-2); border-radius: var(--gcc-r-sm) !important;
    font-size: .9rem; background: var(--gcc-c-bg); color: var(--gcc-c-text); cursor: pointer;
    transition: border-color var(--gcc-t-fast) var(--gcc-ease);
}
.gcc-chat-autotheme-select:focus {
    outline: none; border-color: var(--gcc-c-text);
    box-shadow: 0 0 0 3px rgba(0,0,0,.07);
}
.gcc-chat-autotheme-go {
    flex: 0 0 auto; padding: 7px 14px; border-radius: var(--gcc-r-sm) !important;
    font-size: .87rem; font-weight: 600; background: var(--gcc-c-accent);
    color: var(--gcc-ink-inverse); border: none; cursor: pointer;
    transition: opacity var(--gcc-t-fast), background var(--gcc-t-fast);
}
.gcc-chat-autotheme-go:disabled { opacity: var(--gcc-opacity-disabled); cursor: not-allowed; }
.gcc-chat-autotheme-go:not(:disabled):hover { background: var(--gcc-c-accent-h); }

.gcc-chat-autotheme-status {
    font-size: .84rem; padding: 5px 10px; border-radius: var(--gcc-r-sm) !important;
    background: var(--gcc-c-surface-2); color: var(--gcc-c-text);
}
.gcc-chat-autotheme-status--loading { color: var(--gcc-info-text); }
.gcc-chat-autotheme-status--ok      { color: var(--gcc-success-text); }
.gcc-chat-autotheme-status--warn    { color: var(--gcc-warning-text); }
.gcc-chat-autotheme-status--error   { color: var(--gcc-c-error); }

@media (max-width: 480px) {
    .gcc-chat-autotheme-select { font-size: .85rem; }
    .gcc-chat-autotheme-go     { font-size: .82rem; padding: 7px 11px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Per-media captions step
   ════════════════════════════════════════════════════════════════════════ */
.gcc-chat-percaption { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.gcc-chat-percaption-fields {
    display: flex; flex-direction: column; gap: 10px;
    max-height: 300px; overflow-y: auto; padding-right: 2px;
}
.gcc-chat-caption-row {
    display: flex; align-items: flex-start; gap: 10px; padding: 8px;
    background: var(--gcc-c-surface-2);
    border-radius: var(--gcc-r-sm) !important; border: 1px solid var(--gcc-c-border);
    transition: background var(--gcc-t-fast) var(--gcc-ease);
}
.gcc-chat-caption-row:hover { background: var(--gcc-c-bg); }
.gcc-chat-caption-thumb {
    width: 52px; height: 52px; object-fit: cover;
    border-radius: var(--gcc-r-sm) !important; flex-shrink: 0;
    border: 1px solid var(--gcc-c-border); display: block;
}
.gcc-chat-caption-icon {
    width: 52px; height: 52px; border-radius: var(--gcc-r-sm) !important;
    border: 1px solid var(--gcc-c-border); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; background: var(--gcc-c-bg);
}
.gcc-chat-caption-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.gcc-chat-caption-label {
    font-size: .78rem; font-weight: 600; color: var(--gcc-c-text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gcc-chat-caption-ta {
    width: 100%; box-sizing: border-box; padding: .4rem .6rem;
    border: 1.5px solid var(--gcc-c-border); border-radius: var(--gcc-r-sm) !important;
    font-size: .85rem; resize: none; overflow: hidden; min-height: 36px;
    line-height: 1.45; background: var(--gcc-c-bg); color: var(--gcc-c-text);
    font-family: inherit; transition: border-color var(--gcc-t-fast) var(--gcc-ease);
}
.gcc-chat-caption-ta:focus {
    outline: none; border-color: var(--gcc-c-text);
    box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.gcc-chat-caption-ta::placeholder { color: var(--gcc-c-text-3); }

@media (max-width: 480px) {
    .gcc-chat-caption-thumb,
    .gcc-chat-caption-icon      { width: 44px; height: 44px; }
    .gcc-chat-percaption-fields { max-height: 240px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Caption toggle & captions wrap (mwac)
   ════════════════════════════════════════════════════════════════════════ */
.gcc-chat-mwac-caption-toggle {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 8px 0 4px; padding: 10px 12px;
    background: var(--gcc-c-surface-2); border: 1.5px solid var(--gcc-c-border);
    border-radius: var(--gcc-r-md) !important; cursor: pointer;
    transition: background var(--gcc-t-fast) var(--gcc-ease), border-color var(--gcc-t-fast) var(--gcc-ease);
}
.gcc-chat-mwac-caption-toggle:hover {
    background: var(--gcc-c-bg); border-color: var(--gcc-c-border-2);
}
/* Hàng 1: checkbox + label cùng hàng, align top */
.gcc-chat-mwac-caption-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.gcc-chat-mwac-caption-cbx {
    width: 15px; height: 15px; flex-shrink: 0; margin: 2px 0 0;
    cursor: pointer; accent-color: var(--gcc-c-accent);
}
.gcc-chat-mwac-caption-label {
    font-size: .88rem; font-weight: 600; color: var(--gcc-c-text); cursor: pointer; line-height: 1.35;
}
/* Hàng 2: description sát ngay dưới, thụt theo checkbox */
.gcc-chat-mwac-caption-desc {
    margin: 0;
    padding-left: 23px;
    font-size: .78rem; color: var(--gcc-c-text-2); line-height: 1.4;
}

.gcc-chat-mwac-captions-wrap {
    /* ── Scroll container duy nhất trong input area ─────────────────────
       max-height cứng → danh sách caption dài vẫn không đẩy shell vỡ
       min-height: 0  →  đảm bảo flex item con không block overflow
    ─────────────────────────────────────────────────────────────────── */
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 240px;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2px 4px 4px 0;
    margin-top: 4px;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    /* Ẩn scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.gcc-chat-mwac-captions-wrap::-webkit-scrollbar { display: none; }

.gcc-chat-mwac-cap-label {
    position: sticky; top: 0; z-index: 1; margin: 0;
    padding: 6px 4px 5px; background: var(--gcc-c-bg);
    font-size: .82rem; font-weight: 600; color: var(--gcc-c-text);
    line-height: 1.3; letter-spacing: .01em;
    border-bottom: 1px solid var(--gcc-c-border);
}

.gcc-chat-mwac-message-wrap {
    display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
    background: var(--gcc-c-bg); border: 1.5px solid var(--gcc-c-border);
    border-radius: var(--gcc-r-md) !important;
    transition: border-color var(--gcc-t-fast) var(--gcc-ease), box-shadow var(--gcc-t-fast) var(--gcc-ease);
}
.gcc-chat-mwac-message-wrap:focus-within {
    border-color: var(--gcc-c-text); box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

/* Mutex visual: khi user bật "Thêm lời nhắn riêng cho từng mục media"
   thì message textarea bị dim để báo content sẽ dùng captions thay thế.
   AI button KHÔNG bị dim — vẫn dùng được cho cả 2 mode. */
.gcc-mwac-disabled {
    opacity: .45;
    pointer-events: none;
    filter: grayscale(.3);
    transition: opacity var(--gcc-t-fast) var(--gcc-ease), filter var(--gcc-t-fast) var(--gcc-ease);
}
.gcc-chat-mwac-message-wrap.gcc-mwac-disabled::after {
    content: '🔒 Sử dụng caption cho từng slide thay vì tin nhắn chung';
    display: block;
    font-size: 11px;
    color: var(--gcc-c-text-muted, #888);
    margin-top: 4px;
    font-style: italic;
    pointer-events: none;
}
.gcc-chat-mwac-message-wrap .gcc-chat-caption-row {
    display: flex; align-items: flex-start; gap: 10px; padding: 8px;
    background: var(--gcc-c-surface-2); border: 1px solid var(--gcc-c-border);
    border-radius: var(--gcc-r-sm) !important; transition: background var(--gcc-t-fast) var(--gcc-ease);
}
.gcc-chat-mwac-message-wrap .gcc-chat-caption-row:hover { background: var(--gcc-c-bg); }
.gcc-chat-mwac-message-wrap .gcc-chat-caption-thumb,
.gcc-chat-mwac-message-wrap .gcc-chat-caption-icon {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: var(--gcc-r-sm) !important; border: 1px solid var(--gcc-c-border);
    object-fit: cover; display: block;
}
.gcc-chat-mwac-message-wrap .gcc-chat-caption-icon {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; background: var(--gcc-c-bg);
}
.gcc-chat-mwac-message-wrap .gcc-chat-caption-info {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px;
}
.gcc-chat-mwac-message-wrap .gcc-chat-caption-label {
    font-size: .78rem; font-weight: 600; color: var(--gcc-c-text-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gcc-chat-mwac-message-wrap .gcc-chat-caption-ta {
    width: 100%; box-sizing: border-box; padding: .4rem .6rem;
    border: 1.5px solid var(--gcc-c-border); border-radius: var(--gcc-r-sm) !important;
    font-size: .85rem; resize: none; overflow: hidden; min-height: 36px;
    line-height: 1.45; background: var(--gcc-c-bg); color: var(--gcc-c-text);
    font-family: inherit; transition: border-color var(--gcc-t-fast) var(--gcc-ease);
}
.gcc-chat-mwac-message-wrap .gcc-chat-caption-ta:focus {
    outline: none; border-color: var(--gcc-c-text); box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.gcc-chat-mwac-message-wrap .gcc-chat-caption-ta::placeholder { color: var(--gcc-c-text-3); }

@media (max-width: 480px) {
    .gcc-chat-mwac-captions-wrap  { max-height: 260px; }
    .gcc-chat-mwac-caption-toggle { padding: 9px 10px; }
    .gcc-chat-mwac-message-wrap   { padding: 8px 10px; }
    .gcc-chat-mwac-message-wrap .gcc-chat-caption-thumb,
    .gcc-chat-mwac-message-wrap .gcc-chat-caption-icon { width: 44px; height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AI inline button
   ════════════════════════════════════════════════════════════════════════ */
.gcc-chat-ai-inline-row { margin-top: 4px; }
.gcc-chat-ai-inline-btn {
    font-size: .84rem; padding: 6px 14px; border-radius: var(--gcc-r-sm) !important;
    background: var(--gcc-c-surface-2); border: 1.5px solid var(--gcc-c-border);
    color: var(--gcc-c-text); cursor: pointer; font-weight: 500;
    transition: background var(--gcc-t-fast) var(--gcc-ease), border-color var(--gcc-t-fast) var(--gcc-ease);
}
.gcc-chat-ai-inline-btn:hover { background: var(--gcc-c-border); border-color: var(--gcc-c-border-2); }

/* ══════════════════════════════════════════════════════════════════════════
   Message textarea (mwac-msg-ta) — Flatsome override
   ════════════════════════════════════════════════════════════════════════ */
.gcc-chat-mwac-msg-ta {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 120px !important;
    max-height: 340px !important;
    padding: 10px 4px !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: 1.5px solid var(--gcc-c-border, #e8e8ea) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--gcc-c-text, #111113) !important;
    font-size: 15px !important;
    font-family: inherit !important;
    line-height: 1.6 !important;
    resize: vertical !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color var(--gcc-t-fast) var(--gcc-ease) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--gcc-c-border-2, #d2d2d6) transparent;
}
.gcc-chat-mwac-msg-ta::-webkit-scrollbar { width: 4px; }
.gcc-chat-mwac-msg-ta::-webkit-scrollbar-thumb {
    background: var(--gcc-c-border-2, #d2d2d6); border-radius: var(--gcc-radius-xs) !important;
}
.gcc-chat-mwac-msg-ta::placeholder {
    color: var(--gcc-c-text-3, #a0a0ab) !important;
    font-size: 14.5px !important;
}
.gcc-chat-mwac-msg-ta:focus {
    border-bottom-color: var(--gcc-c-text, #111113) !important;
}

@media (max-width: 480px) {
    .gcc-chat-mwac-msg-ta { font-size: 16px !important; min-height: 100px !important; }
}