/* Public chat additions: previous chats (history) and voice input. Shared by the hosted page, the installed widget
   and the builder preview; colours follow the neutral gray + forest tokens. */
.chat-window{position:relative}
.chat-history-pill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--bg-surface);color:var(--text-2);font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.chat-history-pill:hover{background:var(--bg-muted)}
.chat-history-pill .icon{width:15px;height:15px}
.preview-content{position:relative}
.resume-divider{display:flex;align-items:center;gap:10px;margin:6px 0 16px;font-size:12px;color:var(--text-3)}
.resume-divider::before,.resume-divider::after{content:'';flex:1;height:1px;background:var(--n-150)}

/* Previous chats panel: covers the chat window until the visitor goes back or opens one. */
.chat-history{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background:var(--bg-surface)}
.chat-history[hidden]{display:none}
.history-head{gap:8px}
.history-head strong{font-size:16px}
.history-head .chat-history-pill{margin-left:auto}
.history-back{display:grid;place-items:center;width:36px;height:36px;margin-left:-8px;border:0;background:none;color:var(--text-2);cursor:pointer}
.history-back .icon{width:18px;height:18px}
.history-list{flex:1;overflow:auto;padding:8px}
.history-day{padding:12px 12px 4px;font-size:12px;color:var(--text-3)}
.history-item{display:block;width:100%;padding:12px;border:0;border-radius:var(--r-sm);background:var(--bg-surface);text-align:left;font:inherit;cursor:pointer}
.history-item:hover,.history-item:focus-visible{background:var(--bg-muted)}
.history-top{display:flex;align-items:center;gap:8px}
.history-item strong{flex:1;min-width:0;overflow:hidden;font-size:14px;color:var(--text-1);text-overflow:ellipsis;white-space:nowrap}
.history-item time{flex:none;font-size:12px;color:var(--text-3)}
.history-item small{display:block;margin-top:4px;overflow:hidden;font-size:13px;color:var(--text-2);text-overflow:ellipsis;white-space:nowrap}
.history-tag{flex:none;padding:2px 8px;border-radius:999px;background:var(--bg-muted);font-size:12px;color:var(--text-2)}
.history-empty{flex:1;display:grid;place-content:center;gap:4px;padding:20px;text-align:center;font-size:13px;color:var(--text-3)}
.history-empty p{margin:0}
.history-empty .icon{width:28px;height:28px;margin:0 auto 6px;color:var(--line-1)}
.history-foot{padding:12px 20px 16px;border-top:1px solid var(--bg-muted);font-size:12px;line-height:1.5;color:var(--text-3)}
.history-foot p{margin:0}
.history-foot button{padding:6px 0 0;border:0;background:none;font:inherit;font-size:13px;color:var(--danger-text);text-decoration:underline;cursor:pointer}
.history-confirm{margin:0 12px 12px;padding:14px;border:1px solid var(--line-1);border-radius:var(--r-sm);background:var(--bg-app);font-size:13px;line-height:1.5;color:var(--text-1)}
.history-confirm p{margin:4px 0 0}
.history-confirm-buttons{display:flex;gap:8px;margin-top:12px}
.history-confirm-buttons button{flex:1;height:var(--h-md);border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg-surface);font:inherit;font-size:13px;color:var(--text-1);cursor:pointer}
.history-confirm-buttons .history-danger{border-color:var(--danger-text);background:var(--danger-text);color:var(--text-inverse)}

/* Voice input: mic left of send, a status bar above the composer (listening · sending soon · paused · warning). */
.chat-window form .voice-mic,#test-form.preview-input .voice-mic{border:1px solid var(--line-2);background:var(--bg-surface);color:var(--text-2)}
.chat-window form .voice-mic.on,#test-form.preview-input .voice-mic.on{border-color:var(--action-brand);color:var(--text-brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--forest-800) 12%,transparent)}
.chat-window form.listening,#test-form.preview-input.listening{border-color:var(--action-brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--forest-800) 8%,transparent)}
.voice-bar{margin:0 16px 8px;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg-app);font-size:13px;line-height:1.5;color:var(--text-1)}
.voice-bar[hidden]{display:none}
.voice-bar.warn{border-color:var(--line-1);background:var(--bg-app)}
.voice-bar.sheet{padding:14px;border-radius:var(--r-lg);background:var(--bg-surface);box-shadow:0 6px 24px color-mix(in srgb,var(--forest-800) 8%,transparent)}
.voice-bar.sheet strong{display:block;margin-bottom:4px;font-size:14px}
.voice-bar.sheet p{margin:0}
.voice-bar.sheet .voice-buttons{margin-top:12px}
.voice-bar.sheet .voice-buttons button{flex:1;height:40px}
.voice-row{display:flex;align-items:center;gap:8px}
.voice-grow{flex:1;min-width:0}
.voice-buttons{display:flex;gap:6px;flex-wrap:wrap}
.voice-row+.voice-progress+.voice-buttons{margin-top:0}
.voice-buttons button{height:32px;padding:0 10px;border:1px solid var(--forest-200);border-radius:var(--r-sm);background:var(--bg-surface);font:inherit;font-size:12px;color:var(--text-2);cursor:pointer}
.voice-buttons button.primary{border-color:var(--action-brand);background:var(--action-brand);color:var(--text-inverse)}
.voice-wave{display:inline-flex;align-items:center;gap:3px;height:16px}
.voice-wave i{display:block;width:3px;border-radius:2px;background:var(--action-brand);animation:voice-wave 1s ease-in-out infinite}
.voice-wave i:nth-child(1){height:6px}.voice-wave i:nth-child(2){height:14px;animation-delay:.15s}.voice-wave i:nth-child(3){height:9px;animation-delay:.3s}.voice-wave i:nth-child(4){height:15px;animation-delay:.45s}.voice-wave i:nth-child(5){height:7px;animation-delay:.6s}
@keyframes voice-wave{50%{transform:scaleY(.45)}}
.voice-progress{height:4px;margin:8px 0;overflow:hidden;border-radius:2px;background:var(--n-150)}
.voice-progress span{display:block;width:0;height:100%;background:var(--action-brand);transition-property:width;transition-timing-function:linear}
.voice-progress span.run{width:100%}
.voice-via{display:block;margin-top:4px;text-align:right;font-size:12px;color:var(--text-3)}
@media (prefers-reduced-motion:reduce){.voice-wave i{animation:none}}

/* Console: new-lead badge, lead tags in the log and the lead card above a conversation (doc/40 §3). */
.sidebar nav a .nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--action-brand);color:var(--text-inverse);font-size:12px;font-weight:700;line-height:20px;text-align:center}
.lead-tag{display:inline-block;margin-right:4px;padding:2px 8px;border-radius:999px;background:var(--bg-selected);color:var(--text-brand);font-size:12px;font-weight:600;white-space:nowrap;vertical-align:1px}
.lead-tag.new{background:var(--action-brand);color:var(--text-inverse)}
.lead-tag.done{background:var(--bg-muted);color:var(--text-2)}
.lead-card{margin:0 0 16px;padding:12px 14px;border:1px solid var(--forest-200);border-radius:var(--r-sm);background:var(--bg-app)}
.lead-card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.lead-card-head strong{font-size:14px}
.lead-status{display:flex;gap:4px}
.lead-status :is(button,span){height:32px;padding:0 12px;border:1px solid var(--forest-200);border-radius:999px;background:var(--bg-surface);color:var(--text-2);font:inherit;font-size:12px;line-height:30px;cursor:pointer}
.lead-status span{cursor:default}
.lead-status .active{border-color:var(--action-brand);background:var(--action-brand);color:var(--text-inverse)}
.lead-card .diag-grid{margin:12px 0 8px}
.lead-alert-row{margin:0 0 16px;padding:12px 14px;border:1px solid var(--line-1);border-radius:var(--r-sm)}
/* 2차: lead score tag, decision trace (inbox detail) and journey quality (reports) */
.score-tag{display:inline-block;margin-right:4px;padding:2px 8px;border-radius:999px;background:var(--bg-muted);color:var(--text-2);font-size:12px;font-weight:600;white-space:nowrap;vertical-align:1px}
.score-tag.high{background:var(--action-brand);color:var(--text-inverse)}
.score-tag.mid{background:var(--bg-selected);color:var(--text-brand)}
.trace-log{margin:16px 0;padding:12px 14px;border:1px solid var(--line-1);border-radius:var(--r-sm)}
.trace-log summary{cursor:pointer;font-size:14px;font-weight:600}
.trace-turn{padding:12px 0 0;margin-top:12px;border-top:1px solid var(--bg-muted)}
.trace-turn p{margin:0 0 8px;font-size:13px}
.journey-quality h3{margin:16px 0 8px;font-size:16px}
.journey-checks{margin:8px 0 12px;padding-left:18px;font-size:13px;line-height:1.7}
.journey-checks .fail{color:var(--danger-text)}
.journey-modes{margin:12px 0 0;padding-left:18px;font-size:13px;line-height:1.7}
.journey-modes b{color:var(--text-1)}
/* Public chat = builder preview (2026-10-15): no header bar, the previous-chats pill at the top right, a centred start
   screen (symbol · bot name · greeting · description · first questions as pills), handoff hours beside the handoff button. */
.chat-top{display:flex;justify-content:flex-end;align-items:center;gap:4px;min-height:52px;padding:12px 12px 0}
.chat-top .chat-new{display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:999px;color:var(--text-2)}
.chat-top .chat-new:hover{background:var(--bg-muted);color:var(--text-brand)}
.chat-top .chat-new[hidden]{display:none}
.chat-top .chat-new .icon{width:18px;height:18px}
.chat-window .chat-messages{padding-top:4px}
.chat-welcome,#preview-welcome{text-align:center;padding:0 6px 8px}
.chat-welcome .bot-avatar,#preview-welcome .bot-avatar{width:44px;height:44px;font-size:30px;border-radius:12px}
.chat-welcome>small,#preview-welcome>small{display:block;margin-top:8px;font-size:13px;color:var(--text-2)}
.chat-welcome h2,#preview-welcome h2{margin:12px 0 0;font-size:20px;line-height:1.5;color:var(--text-1);overflow-wrap:anywhere}
.chat-welcome>p,#preview-welcome>p{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--text-2)}
.chat-faq,.preview-faq{display:grid;gap:8px;margin:20px 0 0}
#faq-buttons button:not(.button),.preview-faq button:not(.button){display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-height:44px;margin:0;padding:8px 16px;border:1px solid var(--line-1);border-radius:999px;background:var(--bg-surface);color:var(--brand,var(--text-brand));font:inherit;font-size:13px;line-height:1.4;text-align:center;cursor:pointer}
#faq-buttons button:not(.button):hover,.preview-faq button:not(.button):hover{border-color:var(--brand,var(--action-brand));background:var(--bg-surface)}
#faq-buttons button span{color:inherit}
#faq-buttons>.button,.preview-faq>.button{justify-self:center;display:inline-flex;align-items:center;width:auto;min-height:32px;height:32px;margin:0 0 4px;padding:0 12px;border:0;border-radius:999px;background:none;box-shadow:none;color:var(--text-2);font-size:13px;font-weight:500}
#faq-buttons>.button:hover,.preview-faq>.button:hover{background:var(--bg-muted);color:var(--text-brand)}
.chat-tools{align-items:flex-start;flex-wrap:nowrap;gap:12px}
.chat-tools-main>button:not([hidden]),.chat-tools>button:not([hidden]){display:inline-flex;align-items:center;gap:6px}
.chat-tools-main{display:inline-flex;align-items:center;flex:1 1 auto;gap:2px 8px;min-width:0;flex-wrap:wrap}
.chat-tools>[data-action=chat-end],.chat-tools>[data-action=member-logout]{flex:none;white-space:nowrap}
.chat-tools .handoff-hours{margin:0;font-size:12px;color:var(--text-2)}
.chat-tools .handoff-hours[hidden]{display:none}
.preview-content .powered{padding:12px 0 0}
/* Builder preview laid out as the public chat window (2026-10-15): the button row stays above one scrolling message area
   (start screen included), so the previous-chats pill never covers a message; tools, composer and the AI line stay below. */
#preview-browser .preview-chat{display:flex;flex-direction:column;height:clamp(480px,calc(100dvh - 270px),760px);padding:0;text-align:left}
.preview-chat>.chat-top,.preview-chat>.chat-tools,.preview-chat>form,.preview-chat>.powered{flex:none}
.preview-messages{flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 20px 23px;scroll-behavior:smooth}
.chat-messages,.preview-messages{scrollbar-width:thin;scrollbar-color:var(--line-1) transparent}
.preview-chat .test-messages{max-height:none;overflow:visible;margin:0}
.preview-chat .chat-tools:has(.chat-tools-main:empty){display:none}
#test-form.preview-input{margin:0 16px 12px}
.preview-chat .powered{padding:0 0 12px}
/* The answer on its way (public chat, widget, home page demo, builder preview): a bot bubble with moving dots and a
   shimmering line, so a slow turn reads as work in progress. */
.message.typing{padding:0;font-size:inherit;animation:typing-in .25s ease-out}
.message.typing .message-bubble{display:inline-flex;align-items:center;gap:10px;color:var(--text-2)}
.typing-dots{display:inline-flex;align-items:center;gap:4px;flex:none;height:12px}
.typing-dots i{width:6px;height:6px;border-radius:50%;background:var(--brand,var(--action-brand));opacity:.3;animation:typing-dot 1.2s ease-in-out infinite}
.typing-dots i:nth-child(2){animation-delay:.15s}
.typing-dots i:nth-child(3){animation-delay:.3s}
.typing-text{background:linear-gradient(90deg,var(--n-400) 0%,var(--n-400) 35%,var(--brand,var(--action-brand)) 50%,var(--n-400) 65%,var(--n-400) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:typing-shine 1.8s linear infinite}
@keyframes typing-dot{0%,70%,100%{transform:translateY(0);opacity:.3}35%{transform:translateY(-4px);opacity:1}}
@keyframes typing-shine{from{background-position:100% 0}to{background-position:-120% 0}}
@keyframes typing-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.message.typing,.typing-dots i,.typing-text{animation:none}.typing-dots i{opacity:.6}.typing-text{background:none;color:var(--text-2)}}
/* Operator console for Sellday Chat's own bot (admin → 셀데이 챗 상담봇) */
.operator-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 24px;background:var(--bg-selected);color:var(--text-brand);font-size:13px}
.operator-bar .icon{width:16px;height:16px;flex:none}
.operator-bar span{flex:1 1 280px}
.operator-bar a{font-weight:600;color:var(--text-brand);white-space:nowrap}
.house-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-top:16px}
.house-menu a{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--line-1);border-radius:var(--r-sm);background:var(--bg-surface);color:inherit}
.house-menu a:hover{border-color:var(--action-brand)}
.house-menu .icon{width:20px;height:20px;flex:none;margin-top:2px;color:var(--text-brand)}
.house-menu b{display:block;font-size:14px}
.house-menu small{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--text-2)}
.house-link{margin-top:16px}
.house-points{margin:12px 0 16px;padding-left:18px;font-size:13px;line-height:1.8;color:var(--text-2)}
.house-panel .button{margin-top:4px}
/* The console sidebar's .user block (styles.css) also matched customer chat bubbles: a rule and padding above every one. */
.message.user{border-top:0;padding:0;margin-top:0;gap:7px}
/* Homepage 「실제 상담 체험」 modal (public/house-demo.js): the house bot framed like an installed widget */
.house-demo{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--forest-950) 55%,transparent);backdrop-filter:blur(4px)}
.house-demo-card{display:flex;flex-direction:column;width:min(440px,100%);height:min(760px,calc(100dvh - 48px));border-radius:24px;background:var(--bg-surface);box-shadow:0 30px 90px color-mix(in srgb,var(--forest-950) 35%,transparent);overflow:hidden}
.house-demo-card header{display:flex;align-items:center;gap:12px;padding:16px 16px 14px 20px;border-bottom:1px solid var(--line-2)}
.house-demo-card header>div{flex:1;min-width:0}
.house-demo-card strong{display:block;font-size:14px;color:var(--text-1)}
.house-demo-card small{display:block;margin-top:2px;font-size:12px;color:var(--text-2)}
.house-demo-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--forest-500)}
.house-demo-live i{width:7px;height:7px;border-radius:50%;background:var(--forest-500)}
.house-demo-close{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line-2);border-radius:10px;background:var(--bg-surface);color:var(--text-2);cursor:pointer}
.house-demo-close .icon{width:18px;height:18px}
.house-demo iframe{flex:1;width:100%;border:0;background:var(--bg-surface)}
[data-house-demo] .icon{width:16px;height:16px}
body.house-demo-open{overflow:hidden}
@media (max-width:760px){.house-demo{padding:0;place-items:end stretch}.house-demo-card{width:100%;height:calc(100dvh - 24px);border-radius:20px 20px 0 0}}

/* the site chat launcher steps aside while the trial modal is open (both open the same bot) */
body.house-demo-open [data-sellday-launcher],body.house-demo-open [data-sellday-greeting]{display:none!important}

/* Attachments (chat-attach.js): the + button sits left of the input as the same white square as the microphone; a
   picked file waits in a chip above the composer; a sent picture is a zoomable thumbnail, a document a named chip. */
.chat-window form .chat-attach,#test-form.preview-input .chat-attach{border:1px solid var(--line-2);background:var(--bg-surface);color:var(--text-2)}
.chat-window form:has(.chat-attach),#test-form.preview-input:has(.chat-attach){padding-left:6px}
.chat-file-chip{display:flex;align-items:center;gap:8px;margin:0 16px 8px;padding:6px 6px 6px 8px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg-app);font-size:13px;color:var(--text-1)}
.chat-file-chip[hidden]{display:none}
/* The native file input only opens the picker (+ button): design-system's input{display:block} beat its [hidden], so
   「파일 선택」 showed above the composer. Kept in the tree, not display:none, so click() opens it on every browser. */
input[data-attach-for]{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);opacity:0;pointer-events:none}
.chat-file-chip img{flex:none;width:40px;height:40px;border-radius:var(--r-sm);object-fit:cover}
.chat-file-chip small,.chat-file small{flex:none;font-size:12px;color:var(--text-3)}
.chat-file-chip .icon-button{flex:none;width:32px;height:32px;display:grid;place-items:center;font-size:18px;color:var(--text-2)}
.chat-file-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chat-file-icon{flex:none;display:grid;place-items:center;color:var(--text-brand)}
.chat-file-icon .icon{width:18px;height:18px}
.chat-attachment{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin:0 0 6px}
.chat-attachment .chat-picture img{max-width:min(220px,60vw);max-height:220px;border-radius:var(--r-lg);object-fit:cover}
.chat-file{display:inline-flex;align-items:center;gap:8px;max-width:min(260px,70vw);padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-surface);font-size:13px}
.chat-attachment .attachment-reading{max-width:320px;text-align:left;line-height:1.6}

/* Menu groups, sub-pages and the collapsed menu (plan §1.1): groups split by a line, sub-pages only under the open item,
   «/» folds the menu to 68px with icons, the badge, and names on hover or focus. */
.sidebar nav .nav-item{display:flex;flex-direction:column;gap:2px;position:relative}
.sidebar nav .nav-line{border:0;border-top:1px solid var(--n-100);margin:6px 4px;width:auto}
.sidebar nav .nav-caret{flex:none;width:12px;margin-left:auto;font-size:12px;text-align:center;color:var(--text-2);transition:transform .15s ease}
.sidebar nav .nav-badge+.nav-caret{margin-left:6px}
/* A count on an item without sub-menus keeps the caret's slot free (caret 12px + the link's 12px gap + 6px), so every count sits in one column (고객 관리 ↔ 회신함). */
@media (min-width:761px){.sidebar nav .nav-item:not(.has-subs) .nav-badge{margin-right:30px}}
.sidebar nav .nav-item.open .nav-caret{transform:rotate(180deg)}
.sidebar nav .nav-subs{display:none;flex-direction:column;gap:2px;padding-left:30px}
.sidebar nav .nav-item.open .nav-subs{display:flex}
.sidebar nav .nav-subs a{min-height:40px;padding:8px 12px;font-size:13px}
.sidebar nav a.current{color:var(--forest-950);font-weight:600}
@media (min-width:761px){.sidebar .nav-caption{display:flex;align-items:center;gap:8px}}
.sidebar .nav-collapse{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:0;padding:0 0 1px;border:1px solid var(--line-2);border-radius:6px;background:var(--bg-surface);color:var(--text-2);font-size:13px;line-height:1;letter-spacing:0;cursor:pointer}
.sidebar .nav-collapse:hover{background:var(--forest-50)}
@media (min-width:761px){
 .app-shell.nav-mini .sidebar{width:68px;padding-left:8px;padding-right:8px;overflow:visible}
 .app-shell.nav-mini .workspace-main{margin-left:68px}
 .app-shell.nav-mini .sidebar nav{padding:0}
 .app-shell.nav-mini .sidebar nav a{justify-content:center;padding-left:0;padding-right:0}
 .app-shell.nav-mini .nav-text,.app-shell.nav-mini .nav-caret,.app-shell.nav-mini .nav-caption>span,.app-shell.nav-mini .workspace-picker>div,.app-shell.nav-mini .user>div{display:none}
 .app-shell.nav-mini .sidebar-bottom>a{font-size:0;justify-content:center}
 .app-shell.nav-mini .sidebar-bottom>a svg{width:18px;height:18px}
 .app-shell.nav-mini .sidebar nav a .nav-badge{position:absolute;top:2px;right:2px;margin:0;min-width:18px;height:18px;line-height:18px;padding:0 4px}
 .app-shell.nav-mini .sidebar nav .nav-item .nav-subs{display:none}
 .app-shell.nav-mini .sidebar nav .nav-item.has-subs:hover .nav-subs,.app-shell.nav-mini .sidebar nav .nav-item.has-subs:focus-within .nav-subs{display:flex;position:absolute;left:56px;top:0;min-width:168px;padding:8px;background:var(--bg-surface);border:1px solid var(--line-2);border-radius:var(--r-sm);box-shadow:0 12px 32px color-mix(in srgb,var(--forest-950) 14%,transparent);z-index:40}
 .app-shell.nav-mini .sidebar nav .nav-subs a{justify-content:flex-start;padding:8px 12px}
 .app-shell.nav-mini .sidebar .nav-caption{justify-content:center;padding-left:0;margin-left:0;margin-right:0}
 /* Folded: the symbol instead of the cut-off wordmark, the company mark without its card, no scrollbar beside the icons. */
 .app-shell.nav-mini .sidebar>.logo{display:flex;justify-content:center;padding-left:0;padding-right:0}
 .app-shell.nav-mini .sidebar>.logo img{content:url('/assets/brand/sellday/Symbol.png');width:28px;height:28px}
 .app-shell.nav-mini .sidebar>.workspace-picker{justify-content:center;padding:0;border-color:transparent;background:none;margin-left:0;margin-right:0}
 .app-shell.nav-mini .sidebar>.workspace-picker .org-avatar{border:1px solid var(--line-2)}
 .app-shell.nav-mini .sidebar nav{scrollbar-width:none}
 .app-shell.nav-mini .sidebar nav::-webkit-scrollbar{display:none}
}
@media (max-width:760px){
 .sidebar nav .nav-line,.sidebar nav .nav-subs,.sidebar nav .nav-caret,.sidebar .nav-collapse{display:none}
 .sidebar nav .nav-item{flex:0 0 auto}
}
/* Centring inside small boxes (ink measured 2026-10-24): the ✳ mark on a 25.6px line hung 1.4px low in its 22px box, and
   icon + label buttons put the icon 1-1.6px below the label. Line height tied to the font size centres both. */
.message-avatar,.bot-avatar{line-height:1}
.chat-tools-main>button,.chat-tools>button,.chat-history-pill{line-height:1}
/* 상담창 v2 (doc/44 §5, doc/45 §3-6·§7-2) — 공개 상담·위젯·체험 모달·빌더 미리보기 공용. 강조색은 조직 브랜드에서 파생합니다. */
.chat-head{display:flex;align-items:center;gap:10px;min-height:60px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--n-150);background:var(--bg-surface);flex:none}
.chat-head .chat-head-mark{width:32px;height:32px;margin:0;border-radius:var(--chat-tile-r);font-size:16px;line-height:1;flex:none}
.chat-head .chat-head-mark img{width:100%;height:100%;object-fit:contain}
.chat-head-name{display:flex;flex-direction:column;min-width:0;flex:1}
.chat-head-name strong{font-size:15px;font-weight:700;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head-name small{font-size:12px;line-height:1.4;color:var(--text-3)}
.chat-head .chat-top{min-height:0;padding:0;gap:2px}
.chat-head .chat-close{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-2);cursor:pointer}
.chat-head .chat-close .icon{width:20px;height:20px}
.public-page.framed .public-layout{padding:0}
.chat-top .chat-status{margin-right:auto;display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--chat-brand-soft);color:var(--text-1);font-size:12px;font-weight:600}
.chat-top .chat-status::before,.chat-head-name small[data-mode=handoff_pending]::before,.chat-head-name small[data-mode=human]::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--warning-mark);display:inline-block;margin-right:4px;vertical-align:middle}
.chat-top .chat-status[data-mode=human]::before,.chat-head-name small[data-mode=human]::before{background:var(--success-mark)}
.chat-top .chat-status[hidden]{display:none}
/* 첫 질문: 주제는 왼쪽 정렬 목록 + 「›」, 끝 질문은 오른쪽 정렬 외곽선 알약 */
#faq-buttons button.faq-topic,.preview-faq button.faq-topic{justify-content:space-between;text-align:left;border-color:var(--chat-brand-line);border-radius:var(--r-lg);color:var(--text-1);font-size:14px}
#faq-buttons button.faq-leaf,.preview-faq button.faq-leaf{justify-self:end;width:auto;max-width:100%;border-color:var(--chat-brand-line);color:var(--chat-brand)}
#faq-buttons button.faq-topic:hover,.preview-faq button.faq-topic:hover,#faq-buttons button.faq-leaf:hover,.preview-faq button.faq-leaf:hover{border-color:var(--chat-brand)}
.faq-go{font-size:18px;line-height:1;color:var(--text-3)}
/* 답변 모양: 봇 답변은 말풍선 없이 본문, 고객 말만 브랜드 말풍선 */
.chat-window .message.assistant .message-bubble,.preview-chat .message.assistant .message-bubble{background:none;padding:2px 0 0;border-radius:0;color:var(--chat-text);font-size:15px;line-height:1.65}
.chat-window .message.user .message-bubble,.preview-chat .message.user .message-bubble{border-radius:var(--chat-bubble-r) var(--chat-bubble-r) var(--chat-tail-r) var(--chat-bubble-r);color:var(--chat-on-brand,var(--text-inverse))}
.chat-window .chat-cta,.preview-chat .chat-cta{min-height:44px;padding:10px 14px;border:1px solid var(--chat-brand);border-radius:var(--r-sm);background:var(--chat-brand);color:var(--chat-on-brand,var(--text-inverse));font-size:14px;font-weight:600}
.chat-window .chat-cta.soft,.preview-chat .chat-cta.soft{border-color:var(--chat-brand-line);background:var(--chat-brand-soft);color:var(--text-1)}
.chat-window .chat-cta svg,.preview-chat .chat-cta svg{width:14px;height:14px}
.chat-follow{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin:4px 0 8px}
.chat-follow small{font-size:12px;color:var(--text-3)}
.chat-follow button{min-height:36px;padding:6px 14px;border:1px solid var(--chat-brand-line);border-radius:var(--r-pill);background:var(--bg-surface);color:var(--text-1);font:inherit;font-size:13px;cursor:pointer;text-align:right}
.chat-follow button:hover{border-color:var(--chat-brand)}
.intake-roles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.intake-roles button{border-color:var(--chat-brand-line);color:var(--text-1)}
/* 그림·단계 도식 카드 한 규칙, 단계 번호는 브랜드 색 */
.chat-window .chat-illustration,.preview-chat .chat-illustration,.chat-window .chat-flow,.preview-chat .chat-flow{border:1px solid var(--n-150);border-radius:var(--r-lg)}
.chat-window .chat-flow .flow-index,.preview-chat .chat-flow .flow-index{background:var(--chat-brand);color:var(--chat-on-brand,var(--text-inverse))}
/* 작성창 두 줄: 입력 / 첨부 · 마이크 · 보내기 */
.chat-window form,#test-form.preview-input{flex-wrap:wrap;row-gap:4px;padding:8px 8px 8px 16px}
.chat-window form:has(.chat-attach),#test-form.preview-input:has(.chat-attach){padding-left:16px}
.chat-window form #chat-input,#test-form.preview-input #test-input{order:-1;flex:1 0 100%}
.chat-window form .chat-attach,#test-form.preview-input .chat-attach{margin-right:auto;margin-left:-8px}
.chat-window form>input+.voice-mic,.chat-window form>input+.chat-send,#test-form.preview-input>input+.voice-mic,#test-form.preview-input>input+.chat-send{margin-left:auto}
.chat-window form button.chat-send,#test-form.preview-input button.chat-send{border-radius:var(--r-pill);background:var(--chat-brand);color:var(--chat-on-brand,var(--text-inverse))}
/* 「›」 표시는 공개 상담과 빌더 미리보기에서 같은 모양(design-system.css의 예전 .preview-faq span 칸 규칙을 받지 않음) */
#faq-buttons .faq-go,.preview-faq .faq-go{display:inline;padding:0;border:0;background:none;font-size:18px;line-height:1;color:var(--text-3)}
/* The reply points at the way on (2026-10-24): the agent button or the reply's own button rings once, then keeps an outline. */
.chat-tools-main>button.nudge,.chat-cta.nudge,[data-action=test-handoff].nudge{position:relative;border-radius:10px;box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 55%,transparent)}
.nudge-pulse{animation:nudge-ring 1.6s ease-out 3}
@keyframes nudge-ring{0%{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 60%,transparent)}70%{box-shadow:0 0 0 10px color-mix(in srgb,var(--brand) 0%,transparent)}100%{box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 55%,transparent)}}
@media (prefers-reduced-motion:reduce){.nudge-pulse{animation:none}}