/* Tenant editor follows the light workspace theme; public chat uses its own tenant color. */
.chat-design-layout { display: grid; gap: 16px; align-items: start; }
.chat-design-fields { display: grid; gap: 16px; min-width: 0; }
.chat-design-fields .card { padding: 16px; }
.chat-design-heading { font-size: 14px; font-weight: 650; margin-bottom: 12px; }
.chat-design-fields .field-hint { line-height: 1.65; }
.chat-design-color { display: flex; align-items: center; gap: 12px; }
.chat-design-color input[type="color"] { width: 40px; height: var(--ui-control-h); flex-shrink: 0; padding: 3px; border: 1px solid var(--tenant-line-strong); border-radius: var(--ui-radius-control); background: white; cursor: pointer; }
.chat-design-color .field-input { max-width: 180px; font-variant-numeric: tabular-nums; }
.chat-design-languages { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.chat-design-languages button[hidden] { display: none; }
.chat-design-preview .chat-language-option[hidden] { display: none; }
.chat-design-language-fields[hidden] { display: none; }
.chat-design-language-fields { display: grid; gap: 16px; }
.chat-design-language-fields textarea { min-height: 132px; resize: vertical; }
.chat-design-save { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; }
.chat-design-preview-wrap { min-width: 0; }
.chat-design-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.chat-design-preview-head h2 { font-size: 14px; font-weight: 650; }
.chat-design-preview-head span { font-size: 14px; color: var(--tenant-muted); }
/* Dimensions, launcher shape and elevation mirror the installed widget loader. */
.chat-design-preview { --chat-accent: #0f766e; --chat-on-accent: #ffffff; position: relative; padding: 20px; border-radius: 20px; background: var(--tenant-tint); border: 1px solid var(--tenant-line); min-height: min(748px, 100vh); display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: 12px; }
.chat-design-preview[data-position="left"] { align-items: flex-start; }
.chat-design-preview-window { width: 380px; max-width: 100%; height: min(640px, calc(100vh - 108px)); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.chat-design-preview-window[hidden], .chat-design-preview-launcher [hidden] { display: none; }
.chat-design-preview-launcher { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; max-width: 100%; padding: 14px 18px; border: none; border-radius: 999px; background: var(--chat-accent); color: var(--chat-on-accent); font: 600 14px/1.4 system-ui, sans-serif; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer; }
.chat-design-preview-launcher span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-design-preview-launcher svg { flex-shrink: 0; width: 24px; height: 24px; }
.chat-design-preview-launcher[data-open] span { display: none; }
.chat-design-preview .chat-design-preview-launcher:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #111412; }
.chat-design-preview-note { font-size: 14px; color: var(--tenant-muted); line-height: 1.7; margin-top: 12px; }
@media (min-width: 1100px) {
  .chat-design-layout { grid-template-columns: minmax(0, 1fr) minmax(404px, .85fr); }
  .chat-design-preview-wrap { position: sticky; top: 24px; }
}
@media (max-width: 767px) {
  .chat-design-fields .card { padding: 20px; }
  .chat-design-preview { padding: 20px 16px; }
}

/* Shared by the public chatbot and the editor preview, independent of console controls. */
.chat-theme { --chat-accent: #0f766e; --chat-on-accent: #ffffff; }
/* 웹챗 색 토큰. 테마 속성이 없는 곳(랜딩 시연, 웹전화)은 밝은 값을 그대로 쓴다. */
:where(.chat-theme, .chat-surface) {
  --chat-bg: #ffffff; --chat-fg: #1c1b19; --chat-muted: #6b6860; --chat-line: #e4e2dc; --chat-soft: #f5f5f4; --chat-subtle: #fafaf9;
  --chat-field-border: #8a928b; --chat-focus: #111412; --chat-canvas: #f6f5f2; --chat-accent-ink: var(--chat-accent);
}
/* data-chat-theme(light/dark/system)가 color-scheme 을 정하고 light-dark() 가 그에 맞는 색을 고른다. */
:where([data-chat-theme], [data-chat-theme] .chat-surface) {
  --chat-bg: light-dark(#ffffff, #1b1c1d); --chat-fg: light-dark(#1c1b19, #ecebe7); --chat-muted: light-dark(#6b6860, #aaa79f);
  --chat-line: light-dark(#e4e2dc, #36383b); --chat-soft: light-dark(#f5f5f4, #2a2c2e); --chat-subtle: light-dark(#fafaf9, #222325);
  --chat-field-border: light-dark(#8a928b, #70756f); --chat-focus: light-dark(#111412, #f2f2ef); --chat-canvas: light-dark(#f6f5f2, #121314);
  /* 강조색을 글자로 쓸 때, 어두운 화면에서는 강조색이 배경에 묻힐 수 있어 본문 색을 쓴다. */
  --chat-accent-ink: light-dark(var(--chat-accent), var(--chat-fg));
}
.chat-theme, .chat-surface { color-scheme: light; }
:is([data-chat-theme="dark"], [data-chat-theme="dark"] .chat-surface) { color-scheme: dark; }
:is([data-chat-theme="system"], [data-chat-theme="system"] .chat-surface) { color-scheme: light dark; }
/* 웹챗 안에서 쓰는 공통 유틸리티(입력칸, 연락처 폼)도 같은 토큰을 따른다. 버튼의 흰 글자는 그대로 둔다. */
[data-chat-theme] {
  --color-canvas: var(--chat-canvas); --color-ink: var(--chat-fg); --color-muted: var(--chat-muted); --color-line: var(--chat-line);
  --color-brand-50: light-dark(#effaf8, #12302c); --color-brand-100: light-dark(#d5f2ed, #1c4640);
}
[data-chat-theme] :is(.bg-white, .btn-secondary) { background-color: var(--chat-bg); }
[data-chat-theme] :is(.btn-secondary, .btn-ghost):hover:not(:disabled) { background-color: var(--chat-soft); }
.chat-surface { display: flex; flex-direction: column; min-width: 0; background: var(--chat-bg); color: var(--chat-fg); font-family: var(--font-sans); font-size: 14px; line-height: 20px; }
.chat-page { height: 100dvh; max-width: 672px; margin-inline: auto; }
.chat-surface .chat-header { flex-shrink: 0; border-bottom: 1px solid var(--chat-line); padding: 12px 16px 8px; }
.chat-surface .chat-heading { display: flex; align-items: center; gap: 12px; }
.chat-surface .chat-heading-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.chat-surface .chat-avatar { display: grid; width: 36px; height: 36px; flex-shrink: 0; place-items: center; border-radius: 999px; font-size: 14px; font-weight: 600; }
.chat-surface .chat-identity { flex: 1; min-width: 0; }
.chat-surface .chat-title { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-surface .chat-status { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--chat-muted); font-size: 12px; line-height: 16px; }
.chat-surface .chat-status-dot { width: 6px; height: 6px; border-radius: 999px; background: #10b981; flex-shrink: 0; }
.chat-surface .chat-language-options { display: grid; grid-template-columns: repeat(var(--chat-language-count, 3), minmax(0, 1fr)); gap: 4px; margin-top: 8px; padding: 4px; border-radius: 10px; background: var(--chat-soft); }
.chat-surface .chat-language-options[hidden] { display: none; }
.chat-surface .chat-language-option { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 8px 4px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--chat-muted); font-family: inherit; font-size: 16px; font-weight: 500; line-height: 24px; text-decoration: none; white-space: nowrap; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.chat-surface .chat-language-option:is([aria-current="true"], [aria-pressed="true"]) { background: var(--chat-accent); color: var(--chat-on-accent); border-color: currentColor; font-weight: 600; }
.chat-surface .chat-language-option:active { box-shadow: inset 0 0 0 2px currentColor; }
.chat-surface .chat-icon-button { display: inline-flex; width: 44px; height: 44px; flex-shrink: 0; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--chat-muted); cursor: pointer; }
.chat-surface .chat-icon-button:disabled { opacity: 1; cursor: default; }
.chat-surface .chat-scroller { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 16px; scrollbar-color: #a8a29e var(--chat-subtle); scrollbar-width: thin; }
.chat-surface .chat-notice { max-width: 384px; margin: 0 auto 20px; border-radius: 8px; background: var(--chat-subtle); padding: 8px 12px; text-align: center; color: var(--chat-muted); font-size: 12px; line-height: 16px; }
.chat-surface .chat-message { display: flex; min-width: 0; align-items: flex-end; gap: 6px; }
.chat-surface .chat-time { flex-shrink: 0; padding-bottom: 2px; color: var(--chat-muted); font-size: 11px; line-height: 14px; white-space: nowrap; }
.chat-surface .chat-message-user { justify-content: flex-end; }
.chat-surface .chat-message-assistant { justify-content: flex-start; }
.chat-surface .chat-bubble { max-width: 85%; padding: 8px 14px; border-radius: 16px; font-size: 14px; line-height: 20px; white-space: pre-line; overflow-wrap: anywhere; }
/* AI 답변의 **글자**(BoldTextHelper, bold_text.js). 가변 글꼴(Pretendard, Pretendard JP)의 실제 굵은 두께를 쓴다. */
.chat-surface .chat-bubble strong { font-weight: 700; }
.chat-surface .chat-message-user .chat-bubble { border-bottom-right-radius: 6px; }
.chat-surface .chat-message-assistant .chat-bubble { border-bottom-left-radius: 6px; background: var(--chat-soft); color: var(--chat-fg); }
.chat-surface .chat-brand { background-color: var(--chat-accent); color: var(--chat-on-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chat-on-accent) 25%, transparent); }
.chat-surface .chat-composer { display: flex; align-items: flex-end; gap: 8px; flex-shrink: 0; border-top: 1px solid var(--chat-line); padding: 12px; }
.chat-surface .chat-input { display: block; width: 100%; min-width: 0; flex: 1; min-height: 40px; max-height: 128px; resize: none; border: 1px solid var(--chat-field-border); border-radius: 8px; padding: 9px 12px; background: var(--chat-bg); color: var(--chat-fg); font: inherit; font-size: 16px; box-shadow: none; caret-color: var(--chat-accent); }
.chat-surface .chat-input::placeholder { color: var(--chat-muted); opacity: 1; }
.chat-surface .chat-input:focus { border-color: var(--chat-focus); outline: 2px solid var(--chat-focus); outline-offset: 2px; }
.chat-surface .chat-submit { display: inline-flex; width: 40px; height: 40px; flex-shrink: 0; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--chat-on-accent); border-radius: 8px; background-color: var(--chat-accent); color: var(--chat-on-accent); cursor: pointer; }
.chat-surface .chat-submit:hover:not(:disabled) { box-shadow: inset 0 0 0 2px currentColor; }
.chat-page .chat-submit:disabled { opacity: .5; cursor: not-allowed; }
.chat-design-preview .chat-submit:disabled { opacity: 1; cursor: default; }
.chat-surface :is(.chat-input, .chat-icon-button, .chat-submit, .chat-language-option):focus-visible { outline: 2px solid var(--chat-focus); outline-offset: 3px; }
.chat-surface ::selection { background: var(--chat-accent); color: var(--chat-on-accent); }
@media (hover: hover) and (pointer: fine) {
  .chat-surface .chat-language-option:not([aria-current="true"]):not([aria-pressed="true"]):hover { background: var(--chat-bg); color: var(--chat-fg); }
  .chat-surface .chat-icon-button:hover:not(:disabled) { background: var(--chat-soft); color: var(--chat-fg); }
}
@media (min-width: 640px) { .chat-page-standalone { border-inline: 1px solid var(--chat-line); box-shadow: 0 1px 3px rgb(0 0 0 / .08); } }

/* 상담원 연결 상태는 대화 스크롤 밖에서 항상 확인한다. */
.chat-handoff { flex: none; padding: .65rem 1rem; border-bottom: 1px solid var(--chat-border, var(--chat-line)); font-size: .8125rem; line-height: 1.6; }
.chat-handoff-state { display: flex; align-items: center; gap: .5rem; overflow-wrap: anywhere; }
.chat-handoff[data-state="waiting"], .chat-handoff[data-state="active"] { background: color-mix(in srgb, var(--chat-accent, #44766e) 9%, var(--chat-bg)); }
.chat-handoff-request { margin-top: .25rem; color: var(--chat-accent-ink, #44766e); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.chat-handoff-spinner { flex: none; width: .9rem; height: .9rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: chat-handoff-spin 1s linear infinite; }
.chat-message-sender { font-size: .75rem; color: var(--chat-muted); margin-bottom: .25rem; }
.chat-sync-error { font-size: .75rem; padding: .5rem 1rem; color: #92400e; background: #fffbeb; }
@keyframes chat-handoff-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .chat-handoff-spinner { animation: none; } }

/* 응대 주체는 헤더와 고정 상태 안내에서 함께 확인한다. */
.chat-handoff { padding: .8rem 1rem; background: var(--chat-subtle); }
.chat-handoff-top, .chat-handoff-heading { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.chat-handoff-top { justify-content: space-between; flex-wrap: wrap; }
.chat-handoff-heading strong { font-size: .875rem; line-height: 1.5; }
.chat-handoff-description { margin: .35rem 0 0 1rem; color: var(--chat-muted); font-size: .75rem; line-height: 1.6; }
.chat-handoff-indicator { display: block; width: .5rem; height: .5rem; border-radius: 50%; background: #90978e; flex: none; }
.chat-handoff[data-state="active"] .chat-handoff-indicator, .chat-status[data-state="active"] .chat-status-dot { background: #15803d; }
.chat-handoff[data-state="waiting"] .chat-handoff-indicator { width: .875rem; height: .875rem; background: transparent; color: #a16207; }
.chat-status[data-state="waiting"] .chat-status-dot { background: #ca8a04; }
.chat-status[data-state="ended"] .chat-status-dot, .chat-status[data-state="expired"] .chat-status-dot, .chat-status[data-state="cancelled"] .chat-status-dot { background: #92998f; }
.chat-handoff-request { margin: 0; padding: .3rem .65rem; border: 1px solid var(--chat-line); border-radius: 999px; font-size: .75rem; text-decoration: none; background: var(--chat-bg); white-space: nowrap; }
.chat-handoff-request:disabled { opacity: .5; cursor: wait; }
.chat-typing { flex: none; display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem; color: var(--chat-muted); font-size: .75rem; border-top: 1px solid var(--chat-line); }
.chat-typing[hidden] { display: none; }
.chat-typing-dots { display: inline-flex; gap: 3px; }
.chat-typing-dots span { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: chat-typing-pulse 1s ease-in-out infinite; }
.chat-typing-dots span:nth-child(2) { animation-delay: .15s; }
.chat-typing-dots span:nth-child(3) { animation-delay: .3s; }
.chat-event { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; color: var(--chat-muted); font-size: .75rem; text-align: center; }
.chat-event::before, .chat-event::after { content: ""; height: 1px; flex: 1; background: var(--chat-line); }
.chat-staff-message .chat-message-sender { color: var(--chat-accent-ink); font-weight: 600; }
.chat-staff-message .chat-bubble { background: color-mix(in srgb, var(--chat-accent) 7%, var(--chat-bg)); border: 1px solid color-mix(in srgb, var(--chat-accent) 18%, var(--chat-bg)); }
@keyframes chat-typing-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* 답을 기다리는 글자 위로 밝은 띠가 지난다. 움직임을 줄인 설정에서는 멈춘 글자만 보인다. */
.chat-shimmer { background: linear-gradient(90deg, var(--chat-muted) 0%, var(--chat-muted) 40%, var(--chat-fg) 50%, var(--chat-muted) 60%, var(--chat-muted) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: chat-shimmer 1.8s linear infinite; }
@keyframes chat-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .chat-typing-dots span { animation: none; } .chat-shimmer { animation: none; background: none; color: var(--chat-muted); } }

/* 첫 화면 추천 질문(chat/conversations/_quick_replies). 강조색이 배경과 비슷해도 보이도록 입력칸 테두리 색을 섞는다. */
.chat-quick-replies { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chat-quick-replies[hidden] { display: none; }
.chat-quick-reply { max-width: 100%; min-height: 36px; padding: 6px 14px; border: 1px solid color-mix(in srgb, var(--chat-accent) 30%, var(--chat-field-border)); border-radius: 999px; background: var(--chat-bg); color: var(--chat-fg); font: inherit; font-size: 13px; line-height: 20px; text-align: left; overflow-wrap: anywhere; cursor: pointer; touch-action: manipulation; }
.chat-quick-reply:hover:not(:disabled) { background: color-mix(in srgb, var(--chat-accent) 10%, var(--chat-bg)); }
.chat-quick-reply:focus-visible { outline: 2px solid var(--chat-focus); outline-offset: 2px; }
.chat-design-preview .chat-quick-reply:disabled { cursor: default; }