/* cs - AI counselor on the visitor site (open window rises over the push ask bar, z 9998): launcher that turns into a close button, home with four cards, chat, faq, inquiry and history views; --cs-c is the owner's point color set by counsel.js */
.cs-root{--cs-c:#4f46e5;--cs-off:20px;--cs-lift:0px;position:fixed;z-index:9990;right:20px;bottom:calc(var(--cs-off) + var(--cs-lift) + env(safe-area-inset-bottom, 0px));font-family:inherit;font-size:14px;line-height:1.55;color:#1f2330;text-align:left;}
.cs-root [hidden]{display:none !important;}
.cs-root.is-open{z-index:10001;}
.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
/* cs lift - the app bottom tab bar sits under the launcher, so it rises above it */
html.is-app.has-apptab .cs-root{--cs-lift:64px;}
/* cs-fab - round launcher with the owner's logo or the default chat mark, a close cross while open */
.cs-fab{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:var(--cs-c);color:#fff;box-shadow:0 8px 24px color-mix(in srgb, var(--cs-c) 45%, transparent);cursor:pointer;overflow:hidden;transition:transform .15s ease;}
.cs-fab:hover{transform:scale(1.05);}
.cs-fab:focus-visible{outline:3px solid #111;outline-offset:3px;}
.cs-fab span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.cs-fab svg{width:28px;height:28px;}
.cs-fab img{width:100%;height:100%;object-fit:cover;}
.cs-fab__off{display:none !important;}
.cs-root.is-open .cs-fab__on{display:none;}
.cs-root.is-open .cs-fab__off{display:flex !important;}
/* cs-panel - the window above the launcher */
.cs-panel{position:absolute;right:0;bottom:72px;display:flex;flex-direction:column;width:370px;height:min(620px, calc(100vh - 120px));border-radius:20px;background:#f7f8fb;box-shadow:0 18px 50px rgba(17,24,39,.22);overflow:hidden;}
.cs-view{display:flex;flex-direction:column;flex:1;min-height:0;}
/* cs home - the window is as tall as its cards and links, so a site with fewer cards gets no empty tail; other views keep the full height */
.cs-panel[data-on=home]{height:auto;max-height:min(620px, calc(100vh - 120px));}
/* cs-hero - home header in a soft gradient of the point color */
.cs-hero{flex:none;padding:22px 22px 52px;background:linear-gradient(160deg, var(--cs-c) 0%, color-mix(in srgb, var(--cs-c) 55%, #fff) 100%);color:#fff;}
.cs-hero__brand{display:flex;align-items:center;gap:8px;font-size:14px;}
.cs-hero__logo{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.22);overflow:hidden;}
.cs-hero__logo svg{width:15px;height:15px;}
.cs-hero__logo img{width:100%;height:100%;object-fit:cover;}
.cs-hero__t{margin:14px 0 4px;font-size:21px;font-weight:800;line-height:1.35;word-break:keep-all;}
.cs-hero__s{margin:0;font-size:12.5px;opacity:.88;word-break:keep-all;}
/* cs-cards - the four entry cards overlapping the hero; cs-links - the call and chat-channel pills under them, each with its own icon */
.cs-view.is-home{overflow-y:auto;}
.cs-cards{display:flex;flex-direction:column;gap:10px;margin:-36px 14px 14px;}
.cs-card{display:flex;flex-direction:column;border:1px solid #e9ebf2;border-radius:14px;background:#fff;box-shadow:0 2px 8px rgba(17,24,39,.05);}
.cs-card__btn{display:flex;align-items:center;gap:12px;width:100%;padding:16px;border:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;}
button.cs-card{flex-direction:row;border:1px solid #e9ebf2;background:#fff;}
.cs-card__btn:hover .cs-card__go{transform:translateX(2px);color:var(--cs-c);}
.cs-card__ic{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:50%;background:color-mix(in srgb, var(--cs-c) 12%, #fff);color:var(--cs-c);}
.cs-card__ic svg{width:19px;height:19px;}
.cs-card__tx{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.cs-card__tx b{font-size:14.5px;font-weight:700;color:#1f2330;}
.cs-card__tx small{font-size:12px;color:#7a7f91;word-break:keep-all;}
.cs-card__go{flex:none;width:18px;height:18px;color:#b5b9c7;transition:transform .15s ease;}
.cs-card__chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 14px 64px;}
.cs-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0 14px 16px;}
.cs-links__a{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border:1px solid #e6e8ef;border-radius:999px;background:#fff;color:#3b4052;font-size:12.5px;font-weight:600;text-decoration:none;}
.cs-links__a:hover{border-color:#d4d7e2;background:#fafbfd;}
.cs-links__a:focus-visible{outline:2px solid var(--cs-c);outline-offset:2px;}
.cs-links__ic{display:flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--cs-c);color:#fff;}
.cs-links__ic svg{width:14px;height:14px;}
.cs-links__a.is-kakao .cs-links__ic{background:#fee500;color:#191919;}
.cs-links__a.is-naver .cs-links__ic{background:#03c75a;color:#fff;}
/* cs-bar - sub view header with back arrow in the point color */
.cs-bar{display:flex;align-items:center;gap:8px;flex:none;padding:14px 12px;background:var(--cs-c);color:#fff;}
.cs-bar b{flex:1;min-width:0;font-size:15px;font-weight:700;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cs-back{display:flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;padding:0;border:0;border-radius:8px;background:transparent;color:#fff;cursor:pointer;}
.cs-back:hover{background:rgba(255,255,255,.16);}
.cs-back svg{width:20px;height:20px;}
.cs-ai{margin:0;padding:6px 14px;background:#fff;border-bottom:1px solid #eceef4;font-size:11.5px;color:#7a7f91;}
/* cs-body - message list */
.cs-body{flex:1;display:flex;flex-direction:column;gap:8px;min-height:0;padding:14px;overflow-y:auto;background:#fff;}
/* scrollbar - hidden in every counsel scroller (home, chat, faq, lead, history, input) but wheel/touch scrolling still works (user request 2026-10-06) */
.cs-view.is-home,.cs-body,.cs-in textarea{scrollbar-width:none;-ms-overflow-style:none;}
.cs-view.is-home::-webkit-scrollbar,.cs-body::-webkit-scrollbar,.cs-in textarea::-webkit-scrollbar{display:none;}
.cs-row{display:flex;}
.cs-row.is-me{justify-content:flex-end;}
.cs-row.is-ai{gap:8px;align-items:flex-start;}
.cs-b{max-width:84%;padding:9px 12px;border-radius:14px;word-break:keep-all;overflow-wrap:anywhere;}
/* cs-av - the counselor thumbnail beside its first message, the owner's logo or the default mark */
.cs-av{display:flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--cs-c);color:#fff;overflow:hidden;box-shadow:0 0 0 1px rgba(17,24,39,.06);}
.cs-av svg{width:16px;height:16px;}
.cs-av img{width:100%;height:100%;object-fit:cover;background:#fff;}
.cs-av.is-blank{background:transparent;box-shadow:none;}
.cs-col{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;max-width:calc(100% - 38px);}
.cs-col .cs-b{max-width:100%;}
.cs-nm{font-size:11.5px;font-weight:600;color:var(--cs-c);}
.cs-row.is-ai .cs-b{background:#f3f4f8;border-top-left-radius:4px;}
.cs-row.is-me .cs-b{background:var(--cs-c);color:#fff;border-top-right-radius:4px;}
.cs-b a{color:var(--cs-c);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.cs-row.is-wait .cs-b{display:flex;gap:4px;padding:12px 14px;}
.cs-row.is-wait i{width:6px;height:6px;border-radius:50%;background:#b8bccb;animation:cs-dot 1s infinite ease-in-out;}
.cs-row.is-wait i:nth-child(2){animation-delay:.15s;}
.cs-row.is-wait i:nth-child(3){animation-delay:.3s;}
@keyframes cs-dot{0%,80%,100%{opacity:.3;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}}
/* cs-chips - quick questions, faq topics and inquiry answers; in a message list they start where the counselor's bubble starts (thumbnail 30 + gap 8) */
.cs-chips{display:flex;flex-wrap:wrap;gap:6px;}
.cs-body > .cs-chips{padding-left:38px;}
.cs-chip{padding:6px 12px;border:1px solid #dfe2eb;border-radius:999px;background:#fff;color:#3b4052;font-size:12.5px;font-family:inherit;cursor:pointer;}
.cs-chip:hover{border-color:var(--cs-c);color:var(--cs-c);}
.cs-chip.is-lead{border-color:var(--cs-c);color:var(--cs-c);font-weight:600;}
.cs-chip.is-q{text-align:left;}
.cs-chip[aria-pressed=true]{border-color:var(--cs-c);background:var(--cs-c);color:#fff;}
/* cs-in - message input, also the one-field answer box of the inquiry talk */
.cs-in{display:flex;align-items:flex-end;gap:8px;flex:none;padding:10px 12px;border-top:1px solid #eceef4;background:#fff;}
.cs-in textarea,.cs-in input{flex:1;min-width:0;min-height:40px;max-height:110px;padding:9px 14px;border:1px solid #dfe2ea;border-radius:20px;font:inherit;font-size:14px;resize:none;outline:none;}
.cs-in textarea:focus,.cs-in input:focus{border-color:var(--cs-c);}
.cs-send{flex:none;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--cs-c);color:#fff;cursor:pointer;}
.cs-send:disabled{opacity:.5;cursor:default;}
.cs-send svg{width:17px;height:17px;}
/* cs-hist - previous conversations of this device, each row with its own remove button (hides it on this device only) */
.cs-hist{display:flex;flex-direction:column;gap:8px;}
.cs-hist__row{position:relative;}
.cs-hist__it{width:100%;min-width:0;display:flex;flex-direction:column;gap:2px;padding:12px 48px 12px 14px;border:1px solid #e9ebf2;border-radius:12px;background:#fff;font:inherit;text-align:left;cursor:pointer;}
.cs-hist__it:hover{border-color:var(--cs-c);}
.cs-hist__del{position:absolute;top:50%;right:8px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:8px;background:transparent;color:#9aa0b2;cursor:pointer;transform:translateY(-50%);}
.cs-hist__del:hover{background:#fdecec;color:#e5484d;}
.cs-hist__del:focus-visible{outline:2px solid var(--cs-c);outline-offset:1px;}
.cs-hist__del svg{width:17px;height:17px;}
.cs-hist__it b{font-size:13.5px;color:#1f2330;}
.cs-hist__it small{font-size:12px;color:#7a7f91;}
/* cs phone layout and device filter - the panel fills the screen above the close button, 15px clear of each side */
@media (max-width:767px){
.cs-root.is-pc{display:none;}
.cs-root{right:16px;}
.cs-panel{position:fixed;top:0;left:15px;right:15px;bottom:calc(var(--cs-off) + var(--cs-lift) + 72px + env(safe-area-inset-bottom, 0px));width:auto;height:auto;border-radius:0 0 20px 20px;}
.cs-panel[data-on=home]{top:auto;max-height:calc(100vh - var(--cs-off) - var(--cs-lift) - 72px);border-radius:20px;}
}
@media (min-width:768px){
.cs-root.is-mo{display:none;}
}
@media (prefers-reduced-motion:reduce){
.cs-fab,.cs-card__go,.cs-row.is-wait i{transition:none;animation:none;}
}