/* Local draft simulation; this panel never calls the customer service. */
.flow-live-preview {
  --flp-ink:#17243b;--flp-body:#243653;--flp-muted:#65748b;--flp-line:#dce6f4;--flp-blue:#1769e8;
  display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:440px;max-height:min(740px,calc(100dvh - 210px));
  border:1px solid var(--flp-line);border-radius:12px;background:#fff;color:var(--flp-body);
  overflow:hidden;font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
.flow-live-preview[hidden],.flow-live-preview [hidden] { display:none!important; }
.flow-live-preview button { font-family:inherit;cursor:pointer; }
.flow-live-preview button:focus-visible { outline:2px solid #8aafea;outline-offset:2px; }
.flow-live-preview button:disabled { cursor:default; }
.flp-button { display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:31px;border:1px solid var(--flp-line);border-radius:7px;background:#fff;color:var(--flp-body);font-size:13px; }
.flp-heading { display:flex;align-items:center;gap:7px;flex:none;padding:14px 14px 7px; }
.flp-heading>.flow-icon { width:17px;height:17px;color:var(--flp-blue); }
.flp-heading strong { color:var(--flp-ink);font-size:14px;font-weight:650;line-height:1.5; }
.flp-badge { margin-left:auto;padding:2px 6px;border:1px solid #dce6f4;border-radius:5px;background:#f7faff;color:var(--flp-muted);font-size:10px;line-height:1.5; }
.flp-note { margin:0;padding:0 14px 10px;color:var(--flp-muted);font-size:12px;line-height:1.6;flex:none; }
.flp-modes { display:flex;gap:3px;margin:0 12px 9px;padding:3px;border:1px solid #e6edf6;border-radius:9px;background:#f5f8fd;flex:none; }
.flp-modes button { display:flex;align-items:center;justify-content:center;gap:5px;flex:1;min-width:0;min-height:31px;padding:6px 7px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--flp-muted);font-size:12px;font-weight:550;line-height:1.4; }
.flp-modes button[aria-pressed="true"] { border-color:#dce6f4;background:#fff;color:var(--flp-blue);box-shadow:0 1px 3px #0b1c3b06; }
.flp-modes button:hover { color:var(--flp-blue); }
.flp-modes .flow-icon { width:14px;height:14px; }
.flp-step-bar { display:flex;align-items:center;gap:7px;min-height:29px;margin:0 12px 9px;flex:none; }
.flp-step-name { flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--flp-body);font-size:12px;font-weight:600;line-height:1.5; }
.flp-edit-current { display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:28px;padding:5px 7px;border:1px solid var(--flp-line);border-radius:7px;background:#fff;color:var(--flp-muted);font-size:11px;line-height:1.4;white-space:nowrap; }
.flp-edit-current:hover { background:#f7faff;color:var(--flp-blue); }
.flp-edit-current .flow-icon { width:13px;height:13px; }
.flp-phone { display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;margin:0 10px 9px;border:1px solid var(--flp-line);border-radius:19px;background:#fff;overflow:hidden; }
.flp-chat-header { display:flex;align-items:center;gap:9px;min-height:58px;padding:10px 12px;border-bottom:1px solid #edf1f6;flex:none;background:#fff; }
.flp-avatar { display:grid;place-items:center;flex:none;width:32px;height:32px;border:1px solid #e5ecf7;border-radius:50%;background:#fff;color:var(--flp-blue); }
.flp-avatar .flow-icon { width:18px;height:18px; }
.flp-chat-header>div { min-width:0; }
.flp-chat-title { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--flp-ink);font-size:15px;font-weight:700;line-height:1.4; }
.flp-chat-brand { margin:3px 0 0;color:var(--flp-muted);font-size:11px;line-height:1.4; }
.flp-error { flex:none;margin:0;padding:9px 12px;border-bottom:1px solid #f2d8dc;background:#fff7f8;color:#b23e4a;font-size:12px;line-height:1.6; }
.flp-contact-panel { flex:1;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:18px 15px;scrollbar-width:thin;scrollbar-color:var(--flp-line) transparent; }
.flp-contact-form { display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:0; }
.flp-contact-history { margin:0 0 17px;padding:0 0 4px;border-bottom:1px solid var(--flp-line); }
.flp-contact-history .flp-message { margin-bottom:12px; }.flp-contact-history .flp-bubble { font-size:13px; }
.flp-contact-title { margin:0 0 7px;color:var(--flp-ink);font-size:18px;font-weight:700;line-height:1.45;letter-spacing:-.035em;white-space:pre-line;overflow-wrap:anywhere; }
.flp-contact-description { margin:0 0 19px;color:var(--flp-muted);font-size:13px;line-height:1.7;white-space:pre-line;overflow-wrap:anywhere; }
.flp-contact-field { display:flex;flex-direction:column;gap:6px;margin:0 0 15px;min-width:0;color:var(--flp-body);font-size:12px;font-weight:600;line-height:1.6;overflow-wrap:anywhere; }
.flp-contact-field input { box-sizing:border-box;display:block;width:100%;min-width:0;min-height:42px;padding:10px 11px;border:1px solid var(--flp-line);border-radius:10px;background:#fbfcfe;color:var(--flp-body);font:inherit;font-size:13px;font-weight:400;line-height:1.5; }
.flp-contact-field input::placeholder { opacity:1;color:var(--flp-muted); }
.flp-contact-field input:focus-visible { outline:2px solid #91b5db;outline-offset:2px; }
.flp-contact-notice { margin:1px 0 0;padding-top:13px;border-top:1px solid var(--flp-line);color:var(--flp-body);font-size:11px;line-height:1.7; }
.flp-contact-notice p { margin:0; }.flp-contact-notice p+p { margin-top:7px; }.flp-contact-draft { color:var(--flp-muted); }
.flp-contact-submit { display:block;min-height:44px;flex:none;width:100%;margin-top:15px;padding:11px 12px;border:0;border-radius:11px;background:var(--flp-blue);color:#fff;font:inherit;font-size:13px;font-weight:650;line-height:1.5;white-space:normal;overflow-wrap:anywhere; }
.flp-contact-submit:hover { filter:brightness(.96); }
.flp-contact-test-note { margin:9px 0 0;color:var(--flp-muted);font-size:11px;line-height:1.65;text-align:center; }
.flp-messages { flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:15px 13px 7px;scrollbar-width:thin;scrollbar-color:#cbd9ef transparent; }
.flp-message { display:flex;flex-direction:column;align-items:flex-start;margin:0 0 15px; }
.flp-empty { margin:18px 0;color:var(--flp-muted);font-size:13px;line-height:1.7;text-align:center; }
.flp-author { margin:0 0 5px;color:var(--flp-muted);font-size:11px;line-height:1.4; }
.flp-bubble { max-width:100%;padding:0;color:#35435a;font-size:14px;line-height:1.65;letter-spacing:-.018em;white-space:pre-wrap;overflow-wrap:anywhere; }
.flp-message.customer { align-items:flex-end; }
.flp-message.customer .flp-bubble { max-width:85%;padding:9px 11px 8px;border:1px solid var(--flp-blue);border-radius:14px 14px 4px 14px;background:var(--flp-blue);color:#fff; }
.flp-message.system { align-items:center; }
.flp-message.system .flp-bubble { color:var(--flp-muted);font-size:12px;line-height:1.65;text-align:center; }
.flp-choices { display:grid;gap:7px;flex:none;min-width:0;max-height:160px;overflow:auto;padding:10px 12px;border-top:1px solid #edf1f6;scrollbar-width:thin;scrollbar-color:#cbd9ef transparent; }
.flp-choices:empty { display:none; }
.flp-choice { display:flex;align-items:center;justify-content:space-between;gap:7px;min-width:0;min-height:39px;padding:9px 11px;border:1px solid #dce6f4;border-radius:10px;background:#fff;color:var(--flp-body);font-size:13px;font-weight:550;line-height:1.5;text-align:left; }
.flp-choice>span { min-width:0;overflow-wrap:anywhere; }
.flp-choice>.flow-icon { flex:none;width:15px;height:15px;color:#8298b8; }
.flp-choice:hover { border-color:#b9d0f4;background:#eef4ff;color:var(--flp-blue); }
.flp-chat-footer { flex:none;padding:9px 12px 11px;border-top:1px solid #edf1f6;background:#fff; }
.flp-state-note { margin:0;color:var(--flp-muted);font-size:12px;line-height:1.6;overflow-wrap:anywhere; }
.flp-state-note:empty { display:none; }
.flp-continue { display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:38px;margin-top:7px;padding:9px 11px;border:0;border-radius:10px;background:var(--flp-blue);color:#fff;font-size:13px;font-weight:600;line-height:1.5; }
.flp-continue>.flow-icon { width:15px;height:15px; }
.flp-continue:hover { background:#155fd0; }
.flp-composer { display:flex;align-items:center;gap:6px;min-height:39px;margin-top:8px;padding:5px 5px 5px 10px;border:1px solid #dce5f1;border-radius:11px;background:#f8faff; }
.flp-composer-text { flex:1;min-width:0;color:#8290a4;font-size:12px;line-height:1.5; }
.flp-composer>button { min-height:28px;padding:5px 8px;border:0;border-radius:7px;background:#e6ebf3;color:#687993;font-size:11px;line-height:1.4;opacity:1; }
.flp-footnote { flex:none;margin:0;padding:0 10px 10px;color:var(--flp-muted);font-size:10px;line-height:1.5;text-align:center; }
@media(max-width:1199px) and (min-width:800px) {
 .flow-live-preview { min-height:420px;max-height:calc(100dvh - 210px); }
 .flp-heading { padding:12px 12px 6px; }
 .flp-note { padding:0 12px 8px;font-size:11px; }
 .flp-modes { margin-bottom:7px; }
 .flp-step-bar { margin-bottom:7px; }
 .flp-phone { margin-inline:8px; }
 .flp-choices { max-height:145px; }
}
@media(max-height:800px) and (min-width:800px) {
 .flp-heading { padding-top:10px;padding-bottom:6px; }
 .flp-modes { margin-bottom:6px; }
 .flp-modes button { min-height:28px;padding-block:5px; }
 .flp-step-bar { min-height:26px;margin-bottom:6px; }
 .flp-chat-header { min-height:54px;padding-block:8px; }
 .flp-choices { max-height:126px;gap:6px;padding:8px 10px; }
 .flp-chat-footer { padding:8px 10px 9px; }
 .flp-composer { min-height:36px;margin-top:6px; }
 .flp-composer>button { min-height:26px; }
}
@media(max-width:799px) {
 .flow-live-preview { width:min(100%,410px);height:660px;min-height:540px;max-height:none; }
 .flp-phone { margin-inline:12px; }
 .flp-messages { padding:18px 15px 8px; }
 .flp-choices { max-height:180px; }
 .flp-choice { min-height:44px; }
}
@media(prefers-reduced-motion:reduce) { .flow-live-preview button { transition:none; } }

/* The preview follows the same single reading surface as the customer chat. */
.flp-transcript { flex:1;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;overflow-anchor:none;padding:15px 13px 12px;scrollbar-width:thin;scrollbar-color:#dce4ed transparent;background:#fff; }
.flp-transcript>.flp-messages { flex:none;min-height:auto;overflow:visible;padding:0; }
.flp-transcript>.flp-contact-panel { flex:none;overflow:visible;padding:2px 0 6px; }
.flp-transcript>.flp-choices { max-height:none;overflow:visible;padding:2px 0 6px;border-top:0; }
.flp-message { margin-bottom:13px; }
.flp-message.assistant .flp-bubble { max-width:100%;padding:16px 18px;line-height:1.8;border:1px solid #edf0f3;border-radius:15px 15px 15px 5px;background:#f4f6f8;color:#35435a; }
.flp-message.customer .flp-bubble { max-width:87%;padding:9px 12px;border:1px solid #e0eaff;border-radius:15px 15px 5px 15px;background:#eaf2ff;color:#244774; }
.flp-contact-form { padding:14px 13px;border:1px solid #e8edf3;border-radius:15px;background:#fff;box-shadow:0 2px 5px #16213a03; }
.flp-contact-title { font-size:16px;line-height:1.5; }
.flp-contact-description { margin-bottom:15px;font-size:13px; }
.flp-arriving { animation:flp-message-arrive 180ms ease-out both; }
.flp-message.assistant .flp-typing-indicator { display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:11px 14px; }
.flp-typing-dot { width:5px;height:5px;border-radius:50%;background:#97a2af;animation:flp-typing-pulse 1s ease-in-out infinite; }
.flp-typing-dot:nth-child(2) { animation-delay:120ms; }
.flp-typing-dot:nth-child(3) { animation-delay:240ms; }
@keyframes flp-typing-pulse { 0%,60%,100% { opacity:.45;transform:translateY(0); } 30% { opacity:1;transform:translateY(-2px); } }
@keyframes flp-message-arrive { from { opacity:0;transform:translateY(4px); } to { opacity:1;transform:translateY(0); } }
@media(max-width:799px) { .flp-transcript { padding:18px 15px 12px; } }
@media(prefers-reduced-motion:reduce) { .flp-arriving,.flp-typing-dot { animation:none; } }

/* Local sample of the website card; no real routing or external navigation. */
.flp-link-preview{overflow:hidden;margin-top:12px;border:1px solid #dce6f1;border-radius:14px;background:#fff;white-space:normal}
.flp-link-media{position:relative;display:grid;place-items:center;height:auto;aspect-ratio:12/5;min-height:0;overflow:hidden;background:#fff;color:#65717e;font-size:28px}
.flp-link-media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background:#fff}
.flp-link-media>img[hidden]{display:none}
.flp-link-body{padding:13px}
.flp-link-title{display:block;color:#26374e;font-size:13px;font-weight:700;line-height:1.5}
.flp-link-description{margin:6px 0 12px;color:#78869a;font-size:11px;line-height:1.65}
.flp-link-button{display:block;width:100%;min-height:36px;border:0;border-radius:9px;background:#2775dd;color:#fff;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer}
.flp-link-button:hover{background:#1b68cb}


.flp-avatar,.flp-sender-logo{position:relative;overflow:hidden;display:inline-grid;place-items:center;flex:none;background:#fff;border:1px solid #e5ecf5;color:#71849c}
.flp-avatar img,.flp-sender-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:3px;background:#fff}
.flp-avatar .brand-logo-fallback[hidden],.flp-sender-logo .brand-logo-fallback[hidden]{display:none!important}
.flp-author{display:flex;align-items:center;gap:6px}.flp-sender-logo{width:25px;height:25px;border-radius:8px;font-size:9px}.flp-sender-logo img{padding:2px}
.flp-avatar,.flp-sender-logo{border:0;box-shadow:none}
.flp-avatar[data-logo-state=loading],.flp-avatar[data-logo-state=loaded],.flp-sender-logo[data-logo-state=loading],.flp-sender-logo[data-logo-state=loaded]{border-radius:0;background:transparent;overflow:visible}
.flp-avatar img,.flp-sender-logo img{padding:0;object-fit:contain;background:transparent;border:0;border-radius:0;box-shadow:none;mix-blend-mode:multiply}