/* A full-width conversation, a horizontal welcome banner, and readable type. */
.delivery-status{color:#776d88;font-size:12px}.delivery-status.is-read{color:#346e68;font-weight:600}
.recalled-message{display:flex;justify-content:center;align-items:center;gap:9px;margin:12px 0 18px;color:#6a6982;font-size:13px;line-height:1.7}.recalled-message time{font-size:11px;color:#77778c}.recall-button{border:0;background:transparent;color:#4d6087;text-decoration:underline;padding:4px 6px;margin-left:5px;font-size:12px;line-height:18px}.recall-button:disabled{opacity:.5}
.session-ended-notice{flex:none;padding:10px 16px;background:#e5dfec;color:#4f4269;border-top:1px solid #c7bfd7;font-size:13px;line-height:1.7;font-weight:500;overflow-wrap:anywhere}
@media(max-width:580px){.session-ended-notice{font-size:12px;padding:8px 11px}}
.admin-shell .message-sound-button{justify-content:center;flex:none;margin:8px 12px 12px;min-height:34px;font-size:12px}.admin-shell .message-sound-button[aria-pressed="true"]{color:#c3efdb;border-color:#a4d8bd55;background:#8ac8ac1c}
.software-url{min-height:78px}.admin-shell .chat-identity>div{min-width:0}.admin-shell .source-details{max-width:min(260px,40vw)}
.channel-filter{display:block;width:calc(100% - 22px);margin:10px 11px 0;padding:8px;border-radius:8px;border:1px solid #bac8e32b;background:#272f47;color:#d9e5f7;font:inherit;font-size:12px;outline:none}
.source-tag{display:inline-block;max-width:100%;margin-top:7px;padding:3px 7px;border-radius:5px;background:#8bbad427;color:#c6e6f2;font-size:10px;line-height:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.source-details{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;margin-top:5px;padding:2px 6px;border-radius:5px;border:1px solid #abd5eb2c;background:#7dafcf19;color:#c7e9f6;font-size:11px;line-height:16px}
.admin-shell .chat-header.has-source{height:84px;min-height:84px}.source-page-link{display:block;overflow-wrap:anywhere;color:#345d8d;text-decoration:underline}
dialog.channel-modal{width:680px;max-height:90dvh}.channels-panel{font-size:14px;line-height:1.7;color:#425975}.channel-toolbar{display:flex;justify-content:space-between;gap:10px;margin-bottom:17px}.channel-toolbar button,.channel-card-actions button{font-size:13px;padding:9px 12px}.channel-card{padding:16px;border:1px solid #bdc9dc;border-radius:13px;background:#f8f8fc8c;margin-bottom:13px}.channel-card-heading{display:flex;gap:12px;align-items:center;justify-content:space-between}.channel-card h3{font-size:17px;margin:0;overflow-wrap:anywhere;color:#304c6a}.channel-status{flex:none;font-size:11px;line-height:1.5;color:#287062;background:#d4e9e1;border-radius:5px;padding:4px 7px}.channel-status.disabled{background:#e4deeb;color:#7a6385}.channel-domains{font-size:12px;margin:10px 0!important;color:#576985;overflow-wrap:anywhere}.channel-counts{display:flex;gap:25px;font-size:12px;margin-bottom:14px}.channel-counts b{font-size:17px;color:#355d83;margin-left:6px}.channel-card-actions{display:flex;gap:8px;flex-wrap:wrap}.channel-empty{padding:28px 15px;text-align:center;background:#f2f3f9;border-radius:12px;color:#61718c}.channel-stat-note{margin-top:20px!important}.channel-form-actions{display:flex;justify-content:flex-end;gap:10px;margin:15px 0}.channel-code{display:block;width:100%;resize:vertical;border:1px solid #b5c5dc;border-radius:10px;background:#f7f9fd;color:#315375;padding:15px;font:13px/1.8 Consolas,monospace;min-height:135px;white-space:pre-wrap;overflow-wrap:anywhere;outline:none}.channel-code:focus{border-color:#6d9dcc}.channel-code-title{font-size:15px;color:#3b5472;margin:6px 0 12px!important}.channel-code-help{font-size:12px;color:#60718c;padding-top:12px;border-top:1px solid #c3ccdc}.channel-code-help summary{cursor:pointer;color:#3f6487}#channel-error{color:#a63454;line-height:1.5;font-size:13px}#channel-error:empty{display:none}
.embed-mode body{min-width:280px;background:#e6e3f0}.embed-mode .customer-shell{padding:0;width:100%;max-width:none;height:100dvh;min-height:0}.embed-mode .customer-shell .topbar,.embed-mode .customer-shell .care-banner,.embed-mode .customer-shell .site-footer{display:none!important}.embed-mode .customer-shell .customer-workspace{margin:0!important}.embed-mode .customer-shell .chat-panel{border-radius:0;box-shadow:none}.embed-mode .customer-shell .chat-header{height:62px;min-height:62px}.embed-mode .customer-shell .conversation-body{padding:12px}.embed-mode .customer-shell .welcome-block h3{font-size:21px}.embed-mode .customer-shell .welcome-block p{font-size:14px}.embed-mode .customer-shell .welcome-block p br{display:none}.embed-mode .customer-shell .session-label{display:none}
@media(max-width:580px){.admin-shell .settings-nav-button .icon{display:none}.admin-shell .settings-nav-button{padding:6px;font-size:12px}.admin-shell .chat-header.has-source{height:81px;min-height:81px}.source-details{max-width:205px;font-size:10px}dialog.channel-modal{padding:17px}.channel-toolbar button{font-size:12px;padding:8px 10px}.channels-panel .settings-textarea,.channels-panel .modal-input{font-size:16px}.channel-code{font-size:12px}.channel-card{padding:13px}}
.customer-shell .quick-reply-bar{flex:none;min-width:0;padding:8px 16px;background:linear-gradient(110deg,#edf0f8,#eee9f5);border-top:1px solid #fff9}
.customer-shell .quick-reply-bar .starter-topics{display:flex;flex-wrap:nowrap;gap:9px;margin:0;padding:0 0 2px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#aab5cd66 transparent}
.customer-shell .quick-reply-bar .starter-topics button{flex:none;max-width:none;white-space:nowrap;border-radius:999px;font-size:13px;line-height:20px;font-weight:500;color:#3b5270;background:#ffffffb8;border:1px solid #c4cddd88;padding:6px 12px;gap:6px}
.customer-shell .quick-reply-bar .starter-topics button>.icon{width:15px;height:15px}
.customer-shell .quick-reply-bar .starter-topics button>.icon:last-child{display:none}
@media(max-width:700px){.customer-shell .quick-reply-bar{padding:7px 10px}.customer-shell .quick-reply-bar .starter-topics{gap:7px}.customer-shell .quick-reply-bar .starter-topics button{font-size:13px;padding:6px 10px}}
.settings-nav-button{display:inline-flex;align-items:center;gap:6px;background:#90b4ce1c;border:1px solid #b6d4e938;border-radius:8px;color:#e2f0fc;padding:7px 10px;font-size:12px;white-space:nowrap}
.settings-nav-button .icon{width:15px;height:15px}
dialog.site-settings-modal{width:720px;max-width:calc(100vw - 24px);max-height:92dvh;padding:0;overflow:auto}
.site-settings-modal .modal-header{position:sticky;top:0;z-index:2;margin:0;padding:18px 22px;background:#e8e5f1;border-bottom:1px solid #c4cadb}
.site-settings-modal .modal-content{padding:0}
.settings-form{padding:18px 22px 0;color:#3d506c}
.settings-form fieldset{padding:0;border:0;min-width:0;margin:0}
.settings-section{margin-bottom:23px}
.settings-label,.settings-section h3,.settings-preview h3{display:block;margin:0 0 7px;font-size:16px;font-weight:650;line-height:1.5;color:#354965}
.settings-description{font-size:13px;line-height:1.7;color:#52647e;margin:0 0 12px!important}
.settings-textarea,.quick-reply-row input,.quick-reply-row textarea{display:block;width:100%;padding:11px 12px;font-size:15px;line-height:1.65;border:1px solid #adbcd1;border-radius:9px;background:#fff9;color:#2f4563;resize:vertical;min-height:44px;outline:none;color-scheme:light}
.settings-textarea:focus,.quick-reply-row input:focus,.quick-reply-row textarea:focus{border-color:#6c8bb6;box-shadow:0 0 0 3px #8cadd529}
.settings-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:6px}
.settings-section-heading .secondary-button{white-space:nowrap;font-size:13px;padding:8px 12px;flex:none}
.quick-reply-row{padding:12px 14px;margin-bottom:12px;background:#f6f7fc85;border:1px solid #c3cada;border-radius:12px}
.quick-reply-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}
.quick-reply-heading strong{font-size:14px}
.quick-reply-heading>div{display:flex;align-items:center;gap:3px}
.quick-reply-heading .icon-button{font-size:18px;width:32px;height:32px;color:#496187}
.remove-reply{background:none;color:#9e465e;padding:7px;font-size:13px}
.quick-reply-row label{display:block;font-size:13px;font-weight:600;margin:8px 0 5px;color:#4c5e79}
.quick-reply-row input{padding:8px 10px}
.quick-reply-row textarea{padding:8px 10px;min-height:60px}
.no-quick-replies{background:#f2f2fa;padding:14px;border-radius:9px;font-size:13px}
.settings-preview{padding:15px;border-radius:12px;background:linear-gradient(135deg,#dce5f1,#e4dcef);margin-bottom:20px;border:1px solid #bbc8dd}
.settings-preview-message{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px;line-height:1.75;padding:12px 15px;background:#fff9;border-radius:3px 13px 13px 13px}
.settings-preview-topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.settings-preview-topics>span{display:flex;align-items:center;gap:5px;font-size:13px;padding:6px 10px;background:#f6f6fc;border:1px solid #d1d8e4;border-radius:8px;overflow-wrap:anywhere;max-width:100%}
.settings-preview-topics .icon{width:15px;height:15px}
.settings-save-bar{position:sticky;bottom:0;background:#e8e5f1;padding:13px 0 17px;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:9px;border-top:1px solid #c2c9db}
.settings-save-bar>span{font-size:12px;margin-right:auto;color:#536782}
.settings-save-bar .primary-button,.settings-save-bar .secondary-button{font-size:14px;padding:10px 16px}
#settings-error{flex:0 0 100%;color:#a12e4d;white-space:pre-wrap;line-height:1.5;font-size:13px;margin:0!important}
#settings-error:empty{display:none}
.customer-shell .starter-topics{flex-wrap:wrap}
.customer-shell .starter-topics button{max-width:100%;text-align:left;overflow-wrap:anywhere;white-space:normal}
@media(max-width:580px){.admin-shell .topbar .nav-link{display:none}.settings-nav-button{font-size:12px;padding:6px 8px}.admin-shell .topbar nav{gap:7px}.site-settings-modal .modal-header{padding:14px 15px}.settings-form{padding:15px 14px 0}.settings-section-heading{gap:8px}.settings-section-heading .secondary-button{padding:7px 8px;font-size:12px}.settings-description{font-size:12px}.settings-textarea,.quick-reply-row input,.quick-reply-row textarea{font-size:16px}.settings-save-bar>span{flex-basis:100%}.quick-reply-row{padding:10px}.settings-save-bar{padding-bottom:calc(12px + env(safe-area-inset-bottom))}}
.new-message-tip{flex:none;background:#d0deed;color:#334d70;font-size:14px;font-weight:600;padding:10px;text-align:center;border-top:1px solid #fff9}
:root{font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC","Source Han Sans SC",system-ui,sans-serif;font-size:16px;-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
body{min-width:320px}button,input,textarea{font-family:inherit}button{font-weight:500}
.customer-shell{display:flex;flex-direction:column;max-width:1480px;padding:0 36px;height:100dvh;min-height:960px}
.customer-shell .topbar{height:86px;flex:none}.top-status,.nav-link{font-size:14px}.brand small{font-size:10px}.brand-light{font-weight:500}
.care-banner{display:flex;align-items:center;justify-content:space-between;position:relative;flex:none;height:182px;margin:22px 0;overflow:hidden;padding:26px 44px;border-radius:25px;border:1px solid #c9e9ff26;background:radial-gradient(ellipse at 87% 10%,#659aba55,transparent 48%),linear-gradient(115deg,#393e5e,#363c58 48%,#57536f);box-shadow:inset 0 1px 0 #edffff15,0 12px 35px #141b3026}
.banner-copy{z-index:1;min-width:0}.banner-eyebrow{display:flex;gap:9px;align-items:center;margin:0 0 13px;font-size:13px;letter-spacing:1px;color:#c6d8e9;font-weight:500}.banner-eyebrow .mini-dot{width:5px;height:5px;background:#bcf2ec;box-shadow:0 0 10px #b7ecee}
.care-banner h1{font-size:36px;letter-spacing:1px;line-height:1.35;font-weight:650;margin:0 0 13px;color:#f4f6ff}.banner-description{margin:0;font-size:15px;color:#d0d3e4;font-weight:500;line-height:1.8}.banner-description span{margin-left:10px}
.care-banner .orb-scene{flex:none;width:290px;height:180px;margin:0 13px 0 20px;transform:scale(1.12)}.care-banner .headset-orb{width:118px;height:118px;top:27px}.care-banner .headset-orb .icon{width:62px;height:62px}.care-banner .orbit-one{width:258px;height:100px}.care-banner .floating-bubble{left:35px;bottom:24px}.care-banner .star-one{left:21px}.care-banner .star-two{right:22px}.care-banner .orb-base{top:146px}
.customer-shell .customer-workspace{display:flex;width:100%;flex:1;min-height:0;gap:0}.customer-shell .chat-panel{width:100%;height:100%;min-height:0;max-height:none}
.customer-shell .site-footer{flex:none;height:25px;margin:12px 0 14px}.site-footer{font-size:12px;color:#b2b9d2}.site-footer>span:last-child{font-size:10px;color:#a4adc8}.site-footer button{font-size:12px;color:#c4c9db}
.chat-header{min-height:91px;padding:20px 28px;flex:none}.chat-identity h2{font-size:18px;font-weight:600;margin-bottom:8px}.chat-identity p{font-size:13px;color:#d3d9e9;font-weight:500}.session-label{font-size:12px;color:#d2d4e8;background:#7f86ab14}.agent-avatar{width:47px;height:47px}.icon-button{width:38px;height:38px}.chat-actions{gap:16px}
.conversation-body{padding:23px 30px}.date-divider{font-size:12px;color:#626987;font-weight:500;margin-bottom:24px}.date-divider:before,.date-divider:after{background:#b5b8cd}
.welcome-block{margin-bottom:25px}.welcome-tag{font-size:13px;color:#586480;font-weight:600;gap:7px;margin-bottom:10px}.welcome-tag .icon{width:16px;height:16px}.welcome-block h3{font-size:28px;font-weight:700;color:#283b57;line-height:1.5;margin-bottom:12px}.welcome-block p{font-size:16px;color:#455570;font-weight:500;line-height:1.9}
.message-row{gap:12px;margin-bottom:24px}.message-avatar{width:36px;height:36px;margin-top:28px;border-radius:12px}.message-avatar .icon{width:22px;height:22px}.message-content{max-width:min(84%,720px)}.message-author{font-size:13px;font-weight:600;color:#4d5e79;margin-bottom:8px;gap:10px}.message-author small{font-size:11px;color:#50617e;background:#bec9df66;padding:3px 6px}.message-author time{font-size:12px;font-weight:500;color:#65718a}.message-bubble,.welcome-message .message-bubble{font-size:16px;font-weight:500;color:#30435e;padding:15px 20px;line-height:1.8;background:linear-gradient(120deg,#ffffffcf,#faf8ffb8)}.outgoing .message-bubble{background:linear-gradient(135deg,#52648f,#6a6395);color:#fff}.message-delivery{font-size:12px;color:#5d6984;font-weight:500}.bubble-spark{font-size:20px;color:#78849f}.welcome-message .message-bubble{padding-right:38px}
.starter-topics{gap:12px;margin-left:48px;margin-bottom:25px}.starter-topics button{font-size:14px;color:#425570;background:#f8f8fd99;padding:11px 15px;font-weight:600;gap:9px}.starter-topics button>.icon{width:17px;height:17px}.starter-topics button>.icon:last-child{width:12px}.conversation-watermark{font-size:12px;color:#65718c;font-weight:500;margin:26px 0 4px}.conversation-watermark .icon{width:15px;height:15px}
.composer-area{flex:none;padding:0 24px 14px}.composer-hint{font-size:14px;color:#4d617e;font-weight:600;padding:13px 4px 11px;gap:7px;line-height:1.5}.composer-hint .icon{width:16px;height:16px;color:#5a7190}.composer{padding:13px 16px 11px}.composer textarea{font-size:16px;font-weight:500;color:#30415e;line-height:1.7;min-height:58px}.composer textarea::placeholder{color:#65738e}.composer-tools{gap:15px}.tool-button{color:#536686;min-width:28px;min-height:32px}.tool-button .icon{width:23px;height:23px}.paste-hint{font-size:12px;color:#566680;font-weight:500}.keyboard-hint{font-size:12px;color:#64718b}.send-button{font-size:15px;font-weight:600;padding:11px 21px;gap:12px;border-radius:10px}.send-button .icon{width:17px;height:17px}.composer-footnote{font-size:11px;color:#586680;font-weight:500;margin-top:10px;gap:6px}.composer-footnote .icon{width:13px;height:13px}
.attachment-preview strong{font-size:13px}.attachment-preview small{font-size:12px;color:#66718c}.attachment-preview img{width:64px;height:49px}.image-message img{max-width:min(350px,100%);max-height:330px;min-width:24px;min-height:24px}.connection-banner{font-size:13px;font-weight:600;padding:10px}.modal-content{font-size:15px;color:#485c77}.modal-header h2{font-size:20px}.modal-input{font-size:16px}.field-label{font-size:14px;color:#4b5a78}.primary-button,.secondary-button{font-size:15px}.modal-content kbd{color:#3f5272}#toast{font-size:14px;line-height:1.6}
.admin-shell{max-width:1480px;padding:0 36px}.admin-shell .workspace{grid-template-columns:330px minmax(0,1fr);gap:24px}.admin-shell .chat-panel,.admin-shell .inbox{height:calc(100dvh - 300px);min-height:540px}.inbox-title h2{font-size:18px}.inbox-title h2>span{font-size:13px}.live-label{font-size:12px}.search-box input{font-size:14px}.inbox-tabs button{font-size:14px}.inbox-tabs button span{font-size:12px}.conversation-summary strong{font-size:15px;max-width:150px}.conversation-summary p{font-size:13px;color:#c1c7dd;line-height:1.5}.conversation-summary time{font-size:11px;color:#b4bed5}.conversation-item{padding-top:18px;padding-bottom:18px}.visitor-avatar{font-size:16px;width:42px;height:42px}.inbox-footer{font-size:14px}.inbox-footer small{font-size:11px;color:#b5bfd6}.inbox-empty p{font-size:16px}.inbox-empty small{font-size:12px;color:#a9b5cf}.empty-chat h3{font-size:20px;color:#415775}.empty-chat p{font-size:15px;color:#556581}.empty-chat>span{font-size:13px;color:#65728b}.login-card label{font-size:14px}.login-card input{font-size:16px}.login-sub{font-size:14px;color:#c3c9dd}.login-footer{font-size:12px}.login-page>footer{font-size:12px}
@media(max-width:1100px){.customer-shell,.admin-shell{padding:0 24px}.care-banner{padding:24px 30px}.care-banner h1{font-size:32px}.banner-description span{display:block;margin-left:0}.care-banner .orb-scene{width:240px;margin-right:0;transform:scale(1)}.composer-hint{font-size:13px}.admin-shell .workspace{grid-template-columns:300px minmax(0,1fr);gap:18px}.message-content{max-width:84%}.admin-shell .paste-hint{display:none}.keyboard-hint{display:none}}
@media(max-width:900px){.admin-shell .workspace{display:block}.admin-shell .chat-panel{display:none}.admin-shell .workspace.show-chat .inbox{display:none}.admin-shell .workspace.show-chat .chat-panel{display:flex}.admin-shell .mobile-back{display:inline-grid}.admin-shell .conversation-summary strong{max-width:260px}.admin-shell .conversation-summary p{max-width:400px}.admin-shell .chat-header{padding:17px 20px}.admin-shell .message-row{gap:12px}.admin-shell .message-avatar{width:36px;height:36px}.admin-shell .message-bubble{font-size:16px;padding:15px 18px}.admin-shell .composer-hint{font-size:13px}.admin-shell .composer-footnote{font-size:11px}.admin-shell .paste-hint{display:inline}.admin-shell .conversation-body{padding:22px}.care-banner h1{font-size:30px}.care-banner .orb-scene{width:210px;transform:scale(.95)}.care-banner{height:177px}.welcome-block h3{font-size:26px}}
@media(max-width:580px){
  .customer-shell{padding:0 12px;height:100dvh;min-height:0}.customer-shell .topbar{height:66px}.brand{font-size:20px}.brand small{font-size:7px}.brand-mark{width:38px;height:39px}.nav-link{font-size:12px}.nav-link .icon{width:14px}.topbar nav{gap:10px}
  .care-banner{height:122px;margin:12px 0;padding:17px 16px;border-radius:19px}.banner-eyebrow{font-size:11px;letter-spacing:.4px;margin-bottom:8px}.care-banner h1{font-size:22px;letter-spacing:0;line-height:1.45;margin-bottom:7px;white-space:nowrap}.banner-description{font-size:12px;color:#d2d7e9}.banner-description span{display:none}.care-banner .orb-scene{position:absolute;width:160px;height:180px;right:-34px;top:-27px;transform:scale(.65);transform-origin:center;opacity:.8;margin:0}.banner-copy{max-width:calc(100% - 59px)}.care-banner .floating-bubble{left:-3px}.care-banner .orbit-one{width:215px}.care-banner .star-two{right:-8px}
  .customer-shell .chat-panel{height:100%;min-height:0;border-radius:19px}.customer-shell .site-footer{height:20px;margin:8px 0 calc(7px + env(safe-area-inset-bottom));font-size:11px}.chat-header,.admin-shell .chat-header{min-height:78px;padding:14px 15px}.chat-identity{gap:10px}.agent-avatar{width:40px;height:40px;border-radius:13px}.chat-identity h2{font-size:16px;margin-bottom:6px}.chat-identity p{font-size:11px}.session-label{display:none}.chat-actions{gap:0}.icon-button{width:34px;height:34px}.conversation-body,.admin-shell .conversation-body{padding:18px 15px}.date-divider{font-size:11px;margin-bottom:20px;gap:8px}.date-divider:before,.date-divider:after{width:17px}.welcome-tag{font-size:12px}.welcome-block{margin:0 0 22px}.welcome-block h3{font-size:22px;margin-bottom:9px}.welcome-block p{font-size:15px;line-height:1.85}.welcome-block p br{display:none}
  .message-row,.admin-shell .message-row{gap:8px;margin-bottom:20px}.message-avatar,.admin-shell .message-avatar{width:29px;height:29px;margin-top:28px;border-radius:10px}.message-avatar .icon{width:19px;height:19px}.message-author{font-size:12px;gap:6px;flex-wrap:wrap;line-height:1.4}.message-author time{font-size:11px;margin-left:0}.message-author small{font-size:10px;padding:2px 4px}.message-content,.admin-shell .message-content{max-width:calc(100% - 39px)}.message-bubble,.welcome-message .message-bubble,.admin-shell .message-bubble{font-size:16px;line-height:1.75;padding:12px 14px}.welcome-message .message-bubble{padding-right:22px}.message-delivery{font-size:11px}.starter-topics{margin:0 0 18px 37px;gap:8px;flex-wrap:wrap}.starter-topics button{font-size:13px;padding:10px 11px;gap:6px}.starter-topics button>.icon{width:15px;height:15px}.conversation-watermark{font-size:11px;line-height:1.6;margin-top:20px}.conversation-watermark .icon{width:13px;height:13px}
  .composer-area,.admin-shell .composer-area{padding:0 10px 10px}.composer-hint,.admin-shell .composer-hint{font-size:12px;padding:10px 1px 8px;line-height:1.5;font-weight:600;letter-spacing:0;gap:5px}.composer-hint .icon{width:13px;height:13px}.composer{padding:10px 11px}.composer textarea{font-size:16px;min-height:52px;line-height:1.6}.composer-tools{gap:8px}.tool-button{min-width:30px;min-height:36px}.tool-button .icon{width:22px;height:22px}.paste-hint,.admin-shell .paste-hint{display:none}.send-button{font-size:15px;padding:10px 17px;gap:9px}.send-button .icon{width:16px;height:16px}.composer-footnote,.admin-shell .composer-footnote{font-size:10px;margin-top:8px;gap:4px;flex-wrap:wrap;line-height:1.5}.composer-footnote .icon{width:12px;height:12px}.composer-footnote>span{padding:0 2px}.image-message img,.admin-shell .image-message img{max-width:100%;max-height:280px}.attachment-preview strong{font-size:12px}.attachment-preview small{font-size:11px}.connection-banner{font-size:12px;padding:8px}
  .admin-shell{padding:0 12px}.admin-shell .topbar{height:66px}.admin-shell .page-heading{padding:19px 0}.admin-shell .page-heading h1{font-size:22px}.admin-shell .heading-sub{font-size:12px}.admin-shell .inbox,.admin-shell .chat-panel{height:calc(100dvh - 226px);min-height:400px}.admin-shell .conversation-summary p{max-width:235px}.admin-shell .conversation-summary strong{max-width:180px}.admin-shell .site-footer{font-size:11px}.admin-shell .mobile-back{width:23px}.admin-shell .chat-identity{gap:7px}.modal-header h2{font-size:18px}.modal-content{font-size:15px}
  .keyboard-open .customer-shell{height:100svh}.keyboard-open .care-banner,.customer-shell:has(.composer textarea:focus) .care-banner{display:none}.customer-shell:has(.composer textarea:focus) .customer-workspace{margin-top:10px}.keyboard-open .customer-shell .site-footer{display:none}
}
@media(max-width:360px){.customer-shell{padding:0 8px}.care-banner{padding-left:13px}.care-banner h1{font-size:20px}.care-banner .orb-scene{right:-44px;transform:scale(.58)}.banner-description{font-size:11px}.composer-hint{font-size:11px}.starter-topics{margin-left:0}.welcome-block h3{font-size:20px}.chat-identity h2{font-size:15px}.chat-identity p{font-size:10px}.message-author small{display:none}}

/* Keep the entire chat frame on screen; give spare height to messages. */
body:has(.customer-shell){overflow:hidden}
.customer-shell{
  width:100%;max-width:1380px;height:100dvh;min-height:0;
  padding:0 24px;overflow:hidden;
}
.customer-shell .topbar{height:48px;border-bottom:0}
.customer-shell .brand{font-size:19px;gap:9px}
.customer-shell .brand-mark{width:32px;height:32px;border-radius:11px}
.customer-shell .brand-mark .icon{width:22px;height:22px}
.customer-shell .brand small{display:none}
.customer-shell .top-status,.customer-shell .nav-link{font-size:12px}
.customer-shell .care-banner{height:56px;margin:0 0 10px;padding:9px 22px;border-radius:16px}
.customer-shell .banner-copy{display:flex;align-items:center;gap:22px;max-width:calc(100% - 90px)}
.customer-shell .banner-eyebrow{display:none}
.customer-shell .care-banner h1{font-size:23px;line-height:1.4;letter-spacing:.4px;margin:0;white-space:nowrap}
.customer-shell .banner-description{font-size:13px;line-height:1.5;margin:0}
.customer-shell .banner-description span{display:none}
.customer-shell .care-banner .orb-scene{position:absolute;right:10px;top:-66px;width:180px;height:180px;transform:scale(.4);transform-origin:center;margin:0;opacity:.9}
.customer-shell .customer-workspace{flex:1 1 0;min-height:0;margin:0}
.customer-shell .chat-panel{flex:1;height:auto;min-height:0;max-height:none;border-radius:21px}
.customer-shell .chat-header{min-height:64px;height:64px;padding:10px 22px}
.customer-shell .agent-avatar{width:39px;height:39px;border-radius:13px}
.customer-shell .chat-identity h2{font-size:17px;margin-bottom:5px}
.customer-shell .chat-identity p{font-size:12px}
.customer-shell .conversation-body{flex:1 1 0;min-height:0;padding:13px 22px;overscroll-behavior:contain;scrollbar-gutter:stable}
.customer-shell .date-divider{font-size:12px;line-height:18px;margin-bottom:12px}
.customer-shell .welcome-block{margin:0 0 14px}
.customer-shell .welcome-tag{font-size:13px;line-height:18px;margin-bottom:4px}
.customer-shell .welcome-block h3{font-size:24px;line-height:1.4;margin-bottom:6px}
.customer-shell .welcome-block p{font-size:16px;line-height:1.65}
.customer-shell .message-row{margin-bottom:14px;gap:10px}
.customer-shell .message-author{margin-bottom:5px;line-height:18px}
.customer-shell .message-avatar{margin-top:23px}
.customer-shell .message-bubble{padding:10px 15px;font-size:16px;line-height:1.65}
.customer-shell .welcome-message .message-bubble{padding-right:30px}
.customer-shell .message-delivery{font-size:11px;margin-top:3px}
.customer-shell .starter-topics{margin:0 0 6px 46px;gap:9px}
.customer-shell .starter-topics button{font-size:14px;line-height:20px;padding:7px 12px}
.customer-shell .conversation-watermark{display:none}
.customer-shell .composer-area{padding:9px 16px 10px;background:linear-gradient(115deg,#dbe6f1,#e7e1f1)}
.customer-shell .composer-hint,.customer-shell .composer-footnote{display:none}
.customer-shell .composer{padding:8px 12px 7px}
.customer-shell .composer textarea{height:35px;min-height:35px;max-height:35px;padding:1px 0 4px;font-size:16px;line-height:26px}
.customer-shell .composer-bottom{min-height:35px}
.customer-shell .tool-button{min-width:34px;min-height:34px}
.customer-shell .send-button{font-size:14px;line-height:20px;padding:8px 18px}
.customer-shell .attachment-preview{margin-bottom:6px;padding:5px}
.customer-shell .attachment-preview img{height:40px;width:54px}
.customer-shell .site-footer{height:24px;margin:0;font-size:11px}
.customer-shell .site-footer>span:last-child{font-size:9px}
.customer-shell .site-footer button{font-size:11px}
@media(max-width:700px){
  .customer-shell{padding:0 10px;height:100dvh;min-height:0}
  .customer-shell .topbar{height:43px}
  .customer-shell .brand{font-size:18px}.customer-shell .brand-mark{width:29px;height:29px}
  .customer-shell .top-status{display:none}
  .customer-shell .care-banner{height:46px;margin:0 0 8px;padding:8px 14px;border-radius:13px}
  .customer-shell .banner-copy{display:block;max-width:calc(100% - 52px)}
  .customer-shell .care-banner h1{font-size:20px;line-height:28px}
  .customer-shell .banner-description{display:none}
  .customer-shell .care-banner .orb-scene{right:-35px;top:-71px;transform:scale(.32)}
  .customer-shell .chat-panel{border-radius:17px}
  .customer-shell .chat-header{height:60px;min-height:60px;padding:9px 14px}
  .customer-shell .chat-identity h2{font-size:16px;margin-bottom:4px}
  .customer-shell .chat-identity p{font-size:11px}
  .customer-shell .agent-avatar{width:37px;height:37px}
  .customer-shell .conversation-body{padding:12px}
  .customer-shell .date-divider{font-size:11px;margin-bottom:12px}
  .customer-shell .welcome-block{margin-bottom:12px}
  .customer-shell .welcome-block h3{font-size:22px;line-height:1.4;margin-bottom:6px}
  .customer-shell .welcome-block p{font-size:15px;line-height:1.7}
  .customer-shell .welcome-tag{font-size:12px}
  .customer-shell .message-row{gap:8px;margin-bottom:13px}
  .customer-shell .message-bubble{font-size:16px;padding:10px 12px;line-height:1.65}
  .customer-shell .message-content{max-width:calc(100% - 37px)}
  .customer-shell .message-author{font-size:12px;line-height:18px}
  .customer-shell .message-author time{font-size:11px}
  .customer-shell .message-avatar{margin-top:23px}
  .customer-shell .starter-topics{margin-left:37px;gap:7px}
  .customer-shell .starter-topics button{font-size:12px;padding:6px 9px;line-height:20px}
  .customer-shell .composer-area{padding:7px 9px calc(8px + env(safe-area-inset-bottom))}
  .customer-shell .composer{padding:7px 10px 6px}
  .customer-shell .composer textarea{height:33px;min-height:33px;max-height:33px}
  .customer-shell .send-button{font-size:14px;padding:8px 15px}
  .customer-shell .site-footer{height:21px;margin:0;font-size:10px}
  .customer-shell:has(.composer textarea:focus) .care-banner{display:flex}
  .customer-shell:has(.composer textarea:focus) .customer-workspace{margin:0}
  .keyboard-open .customer-shell{height:100dvh}
  .keyboard-open .customer-shell .care-banner,.keyboard-open .customer-shell .site-footer{display:none}
}
@media(max-height:600px){
  .customer-shell .topbar{height:38px}
  .customer-shell .care-banner{display:none!important}
  .customer-shell .chat-header{height:56px;min-height:56px}
  .customer-shell .site-footer{display:none}
}

/* A narrow inbox and a full-height transcript for the agent workspace. */
body:has(.admin-shell){overflow:hidden}
.admin-shell{display:flex;flex-direction:column;width:100%;max-width:1600px;height:100dvh;min-height:0;padding:0 22px;overflow:hidden}
.admin-shell .topbar{height:48px;flex:none;border-bottom:0}
.admin-shell .brand{font-size:19px;gap:9px}
.admin-shell .brand-mark{width:32px;height:32px;border-radius:11px}
.admin-shell .brand-mark .icon{width:22px;height:22px}
.admin-shell .brand small{display:none}
.admin-shell .top-status,.admin-shell .nav-link{font-size:12px}
.admin-shell .page-heading{height:40px;flex:none;align-items:center;padding:3px 0 11px}
.admin-shell .page-heading h1{font-size:20px;line-height:26px;letter-spacing:.5px;margin:0}
.admin-shell .page-heading .eyebrow,.admin-shell .heading-sub{display:none}
.admin-shell .workspace{display:grid;grid-template-columns:clamp(210px,21vw,240px) minmax(0,1fr);gap:14px;flex:1 1 0;min-height:0;align-items:stretch}
.admin-shell .inbox,.admin-shell .chat-panel{height:100%;min-height:0;max-height:none;border-radius:19px}
.admin-shell .inbox-title{padding:17px 13px 13px;gap:6px}
.admin-shell .inbox-title h2{font-size:16px;letter-spacing:0;gap:6px}
.admin-shell .inbox-title h2>span{font-size:12px;padding:2px 5px}
.admin-shell .live-label{font-size:11px;gap:4px}
.admin-shell .search-box{margin:0 11px;padding:9px 8px;gap:6px}
.admin-shell .search-box input{font-size:13px}
.admin-shell .inbox-tabs{margin:8px 13px 0;gap:18px}
.admin-shell .inbox-tabs button{font-size:13px;padding:11px 0}
.admin-shell .inbox-tabs button span{font-size:11px}
.admin-shell .conversation-list{padding:8px}
.admin-shell .conversation-item{padding:12px 7px;gap:8px}
.admin-shell .visitor-avatar{width:32px;height:34px;border-radius:10px;font-size:14px}
.admin-shell .conversation-summary>span{gap:5px}
.admin-shell .conversation-summary strong{font-size:13px;flex:1;min-width:0;max-width:none}
.admin-shell .conversation-summary time{font-size:10px;flex:none}
.admin-shell .conversation-summary p{font-size:12px;max-width:100%;margin-top:5px}
.admin-shell .unread{left:29px;top:7px}
.admin-shell .inbox-footer{padding:11px 12px;gap:9px;font-size:13px}
.admin-shell .inbox-footer small{font-size:10px}
.admin-shell .chat-header{height:64px;min-height:64px;padding:10px 20px}
.admin-shell .agent-avatar{width:39px;height:39px;border-radius:13px}
.admin-shell .chat-identity h2{font-size:17px;margin-bottom:5px}
.admin-shell .chat-identity p{font-size:12px}
.admin-shell .conversation-body{flex:1 1 0;min-height:0;padding:13px 20px;overscroll-behavior:contain;scrollbar-gutter:stable}
.admin-shell .date-divider{font-size:12px;line-height:18px;margin-bottom:12px}
.admin-shell .message-row{margin-bottom:14px;gap:10px}
.admin-shell .message-content{max-width:min(88%,900px)}
.admin-shell .message-author{font-size:13px;line-height:18px;margin-bottom:5px}
.admin-shell .message-avatar{margin-top:23px}
.admin-shell .message-bubble{font-size:16px;line-height:1.65;padding:10px 15px}
.admin-shell .message-delivery{font-size:11px;line-height:16px;margin-top:3px}
.admin-shell .composer-area{padding:9px 14px 10px;background:linear-gradient(115deg,#dbe6f1,#e7e1f1)}
.admin-shell .composer-hint,.admin-shell .composer-footnote{display:none}
.admin-shell .composer{padding:8px 12px 7px}
.admin-shell .composer textarea{height:35px;min-height:35px;max-height:35px;padding:1px 0 4px;font-size:16px;line-height:26px}
.admin-shell .composer-bottom{min-height:35px}
.admin-shell .tool-button{min-width:34px;min-height:34px}
.admin-shell .send-button{font-size:14px;line-height:20px;padding:8px 18px}
.admin-shell .attachment-preview{margin-bottom:6px;padding:5px}
.admin-shell .attachment-preview img{width:54px;height:40px}
.admin-shell .site-footer{height:24px;flex:none;margin:0;font-size:11px}
.admin-shell .site-footer>span:last-child{font-size:9px}
.admin-shell .site-footer button{font-size:11px}
@media(max-width:900px){
  .admin-shell .workspace{display:block}
  .admin-shell .chat-panel{display:none}
  .admin-shell .workspace.show-chat .inbox{display:none}
  .admin-shell .workspace.show-chat .chat-panel{display:flex}
  .admin-shell .conversation-item{padding:14px 10px}
  .admin-shell .conversation-summary strong{font-size:15px}
  .admin-shell .conversation-summary p{font-size:13px}
  .admin-shell .conversation-summary time{font-size:12px}
}
@media(max-width:580px){
  .admin-shell{padding:0 10px}
  .admin-shell .topbar{height:44px}
  .admin-shell .topbar nav{gap:9px}
  .admin-shell .brand{font-size:18px;gap:7px}
  .admin-shell .brand-mark{width:29px;height:29px}
  .admin-shell .page-heading{height:36px;padding:2px 0 8px}
  .admin-shell .page-heading h1{font-size:18px}
  .admin-shell .chat-header{height:60px;min-height:60px;padding:9px 12px}
  .admin-shell .chat-identity h2{font-size:16px;margin-bottom:4px}
  .admin-shell .chat-identity p{font-size:11px}
  .admin-shell .agent-avatar{width:37px;height:37px}
  .admin-shell .conversation-body{padding:12px}
  .admin-shell .message-row{gap:8px;margin-bottom:13px}
  .admin-shell .message-content{max-width:calc(100% - 37px)}
  .admin-shell .message-author{font-size:12px}
  .admin-shell .message-bubble{padding:10px 12px}
  .admin-shell .composer-area{padding:7px 9px calc(8px + env(safe-area-inset-bottom))}
  .admin-shell .composer{padding:7px 10px 6px}
  .admin-shell .composer textarea{height:33px;min-height:33px;max-height:33px}
  .admin-shell .send-button{padding:8px 15px}
  .admin-shell .paste-hint{display:none}
  .admin-shell .site-footer{height:21px;font-size:10px}
  .keyboard-open .admin-shell .page-heading,.keyboard-open .admin-shell .site-footer{display:none}
}
@media(max-height:600px){
  .admin-shell .topbar{height:38px}
  .admin-shell .page-heading,.admin-shell .site-footer{display:none}
  .admin-shell .chat-header{height:56px;min-height:56px}
}