.chat-widget{position:fixed;right:20px;bottom:20px;z-index:89;font-family:Arial,sans-serif;color:#283027}.chat-widget.is-admin{right:84px}.chat-fab{position:relative;display:grid;place-items:center;width:52px;height:52px;border:1px solid #aab7a3;border-radius:50%;background:#fffefa;color:#3d593a;box-shadow:0 6px 24px #292d2626;cursor:pointer}.chat-fab svg{width:25px;height:25px}.chat-fab.is-new svg{animation:chat-nudge .65s ease both}.chat-badge{position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;padding:0 4px;display:grid;place-items:center;border:2px solid #fffefa;border-radius:20px;background:#b73d32;color:white;font-size:11px;font-weight:bold}.chat-badge[hidden],.chat-panel[hidden],.chat-widget[hidden],.chat-app [hidden]{display:none!important}.chat-panel{position:absolute;right:0;bottom:64px;width:min(430px,calc(100vw - 32px));height:min(690px,calc(100dvh - 100px));border:1px solid #d3ddcc;border-radius:12px;background:#fffefa;box-shadow:0 18px 50px #292d2633;overflow:hidden;animation:chat-enter .25s ease both}.chat-widget.is-admin .chat-panel{right:-64px}.chat-app{height:100%;min-height:0;display:flex;flex-direction:column}.chat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;background:#f0f4eb;border-bottom:1px solid #dce5d6;flex:none}.chat-head p{margin:0;color:#62765a;font-size:10px;letter-spacing:.12em;font-weight:bold}.chat-head h2{margin:3px 0 0;font:24px/1.15 Georgia,serif;color:#293328}.chat-head-actions{display:flex;align-items:center;gap:7px}.chat-head button,.chat-link-button{border:0;background:transparent;color:#48643f;cursor:pointer;padding:8px;font:inherit}.chat-close{font-size:25px!important}.chat-admin-layout{display:flex;flex:1;min-height:0}.chat-list-pane{display:flex;flex-direction:column;width:100%;min-width:0}.chat-toolbar{display:flex;gap:6px;padding:10px;border-bottom:1px solid #e4e9e0;flex-wrap:wrap}.chat-toolbar select,.chat-toolbar input,.chat-start input,.chat-start textarea,.chat-compose textarea{min-width:0;border:1px solid #ccd7c6;border-radius:6px;background:#fbfcf8;color:#253025;font:inherit}.chat-toolbar input{flex:1;min-width:120px;padding:8px}.chat-toolbar select{padding:8px}.chat-list{overflow:auto;flex:1}.chat-list-item{display:block;width:100%;border:0;border-bottom:1px solid #eef0ea;background:transparent;padding:13px 15px;text-align:left;cursor:pointer;color:#273028}.chat-list-item:hover,.chat-list-item.is-selected{background:#edf3e8}.chat-list-top{display:flex;justify-content:space-between;gap:8px;font-size:14px}.chat-list-preview{display:block;margin-top:5px;color:#6c7568;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-count{color:#a1372e;font-weight:bold}.chat-thread{display:flex;flex:1;flex-direction:column;min-width:0;min-height:0}.chat-thread-header{padding:10px 13px;border-bottom:1px solid #e6eae2;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.chat-thread-header strong{flex:1;min-width:120px}.chat-thread-header button{border:1px solid #d4ddd0;background:#fffefa;border-radius:5px;color:#48643f;padding:8px;cursor:pointer}.chat-thread-header .chat-danger{color:#a4483d}.chat-details{width:100%;margin:0;color:#687563;font-size:12px;overflow-wrap:anywhere}.chat-messages{flex:1;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:16px;background:#faf9f5}.chat-message{max-width:88%;align-self:flex-start;padding:10px 12px;border:1px solid #e6e9e0;border-radius:12px 12px 12px 3px;background:#fffefa;animation:chat-message-in .2s ease both}.chat-message.is-mine{align-self:flex-end;background:#e8f0e2;border-color:#d1dfc9;border-radius:12px 12px 3px 12px}.chat-message p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;line-height:1.4;font-size:14px}.chat-message time{display:block;margin-top:5px;text-align:right;color:#788274;font-size:11px}.chat-empty{margin:auto;padding:18px;color:#758070;text-align:center;line-height:1.5;font-size:14px}.chat-compose{display:flex;gap:8px;padding:12px;border-top:1px solid #e5eadf;background:#fffefa}.chat-compose textarea{flex:1;resize:none;padding:10px;min-height:48px;max-height:120px}.chat-send,.chat-primary{padding:10px 14px;border:0;border-radius:6px;background:#354b32;color:#fff;font:inherit;font-weight:bold;cursor:pointer}.chat-send:disabled,.chat-primary:disabled{opacity:.5;cursor:not-allowed}.chat-start{overflow:auto;padding:20px;display:grid;gap:12px}.chat-start p{margin:0;color:#65715f;font-size:14px;line-height:1.5}.chat-start label{display:grid;gap:5px;font-size:13px;font-weight:bold;color:#40513d}.chat-start input,.chat-start textarea{width:100%;padding:11px;min-height:46px;transition:border-color .2s,box-shadow .2s}.chat-start input:focus,.chat-start textarea:focus{outline:none;border-color:#6b8461;box-shadow:0 0 0 3px #8ba68433}.chat-start .chat-consent{display:flex;align-items:flex-start;font-weight:normal;line-height:1.4}.chat-start .chat-consent input{width:18px;min-height:18px;flex:none}.chat-error{padding:0 12px;color:#a13d35;font-size:13px;overflow-wrap:anywhere}.chat-error:empty{display:none}.chat-history{align-self:center;border:0;background:transparent;text-decoration:underline;color:#52694b;padding:8px;cursor:pointer}.chat-page-heading{margin:28px 0 18px}.chat-page-heading h2{font:38px/1.15 Georgia,serif;margin:5px 0}.chat-page-heading h2 em{color:#566c50}.chat-page-heading p:last-child{color:#65715f}.chat-full{height:min(760px,75vh);min-height:530px;border:1px solid #d3ddcc;border-radius:10px;background:#fffefa;overflow:hidden}.chat-full .chat-list-pane{width:34%;max-width:340px;border-right:1px solid #e4e9e0}.chat-full .chat-thread{display:flex!important}.chat-full .chat-back{display:none}.chat-full .chat-head .chat-close{display:none}.chat-full .chat-head{padding:20px 22px}.chat-widget button:focus-visible,.chat-full button:focus-visible,.chat-app input:focus-visible,.chat-app textarea:focus-visible{outline:2px solid #657d5b;outline-offset:2px}@keyframes chat-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes chat-message-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes chat-nudge{0%,100%{transform:rotate(0) scale(1)}30%{transform:rotate(-9deg) scale(1.12)}65%{transform:rotate(7deg)}}
@media(max-width:700px){.chat-widget{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}.chat-widget.is-admin{right:80px}.chat-widget.is-admin .chat-panel{right:-64px}.chat-full{height:75dvh;min-height:540px}.chat-full .chat-list-pane{width:100%;max-width:none;border:0}.chat-full .chat-thread{display:none!important}.chat-full.has-thread .chat-list-pane{display:none}.chat-full.has-thread .chat-thread{display:flex!important}.chat-full .chat-back{display:inline-block}.chat-panel.has-thread .chat-list-pane{display:none}.chat-panel:not(.has-thread) .chat-thread{display:none}.chat-full:not(.has-thread) .chat-thread{display:none!important}}
@media(min-width:701px){.chat-panel.has-thread .chat-list-pane{display:none}.chat-panel:not(.has-thread) .chat-thread{display:none}.chat-full:not(.has-thread) .chat-thread{display:flex!important}}
@media(prefers-reduced-motion:reduce){.chat-widget *,.chat-full *{animation:none!important;transition:none!important}}html.motion-disabled .chat-widget *,html.motion-disabled .chat-full *{animation:none!important;transition:none!important}
.chat-body,.chat-visitor-content,.chat-visitor-thread{display:flex;flex:1;flex-direction:column;min-height:0}.chat-start-form{display:grid;gap:12px}.chat-start-form .chat-primary{min-height:46px}.chat-start label span{font-weight:normal}.chat-widget.is-admin .chat-start{display:none}.chat-full .chat-body{overflow:hidden}

/* A brief, silent hint on hover; incoming messages also trigger this animation. */
@media (hover:hover) { .chat-fab:hover svg { animation: chat-nudge .65s ease-in-out; } }
@media (prefers-reduced-motion:reduce) { .chat-fab:hover svg, .chat-fab.is-new svg { animation:none!important; } }
html.motion-disabled .chat-fab:hover svg, html.motion-disabled .chat-fab.is-new svg { animation:none!important; }

.chat-settings { flex:0 1 auto; max-height:72%; overflow:auto; padding:16px; border-bottom:1px solid #d5e0cf; background:#f8faf5; animation:chat-enter .22s ease both; }
.chat-settings[hidden] { display:none; }
.chat-settings-form { display:grid; gap:10px; }
.chat-settings-title { display:flex; justify-content:space-between; gap:12px; }
.chat-settings-title p, .chat-settings-hint, .chat-settings-status { margin:4px 0 0; font-size:13px; line-height:1.45; color:#5a6d55; }
.chat-settings-form label:not(.chat-settings-check) { display:grid; gap:5px; color:#40513d; font-size:14px; font-weight:700; }
.chat-settings-form textarea { width:100%; resize:vertical; padding:10px; border:1px solid #ccd7c6; border-radius:6px; background:#fffefa; color:#253025; font:inherit; }
.chat-settings-check { display:flex; align-items:center; gap:8px; font-size:14px; }
.chat-settings-close { align-self:start; border:0; background:transparent; font-size:23px; color:#48643f; cursor:pointer; }
.chat-settings-open,.chat-quick-replies { min-height:40px; padding:8px 10px; border:1px solid #ccd7c6; border-radius:6px; color:#40573a; background:#f8faf5; font:inherit; cursor:pointer; }
.chat-quick-replies { margin:8px 12px 0; max-width:calc(100% - 24px); }
.chat-quick-replies[hidden] { display:none; }
@media(prefers-reduced-motion:reduce){.chat-settings{animation:none!important}}
html.motion-disabled .chat-settings{animation:none!important}

.chat-confirm { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 13px; background:#fffaf0; color:#554a38; border-bottom:1px solid #e7dcc9; font-size:13px; animation:chat-enter .2s ease both; }
.chat-confirm span { flex:1 1 100%; }
.chat-confirm button { min-height:38px; padding:6px 10px; border:1px solid #c7d4c1; border-radius:5px; background:#fffefa; color:#354b32; cursor:pointer; }
@media(prefers-reduced-motion:reduce){.chat-confirm{animation:none!important}}html.motion-disabled .chat-confirm{animation:none!important}

/* Compact floating chat; the start form fits its content and can scroll on short screens. */
.chat-panel { width:min(380px,calc(100vw - 32px)); height:min(580px,calc(100dvh - 100px)); }
.chat-panel:has(.chat-start:not([hidden])) { height:auto; max-height:min(580px,calc(100dvh - 100px)); }
.chat-panel:has(.chat-start:not([hidden])) .chat-app { height:auto; max-height:min(580px,calc(100dvh - 100px)); }
.chat-head { padding:12px 15px; } .chat-head h2 { font-size:22px; }
.chat-start { padding:15px; gap:10px; } .chat-start-form { gap:9px; }
.chat-start input,.chat-start textarea { min-height:44px; padding:9px; }
.chat-start .chat-cookie-hint { font-size:12px; line-height:1.4; color:#687665; }
.chat-sound { position:relative; } .chat-sound::after { content:attr(data-hint); position:absolute; z-index:4; top:calc(100% + 4px); right:0; width:max-content; max-width:210px; padding:7px 9px; border:1px solid #cbd7c6; border-radius:6px; background:#fffefa; color:#40513d; box-shadow:0 4px 14px #29362922; font-size:12px; font-weight:400; line-height:1.3; opacity:0; visibility:hidden; transform:translateY(-4px); pointer-events:none; transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s; }
.chat-sound:focus-visible::after { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
@media(hover:hover){.chat-sound:hover::after{opacity:1;visibility:visible;transform:none;transition-delay:0s}}
@media(prefers-reduced-motion:reduce){.chat-sound::after{transition:none!important}}html.motion-disabled .chat-sound::after{transition:none!important}
/* Subtle interaction cues throughout the messenger. */
.chat-fab, .chat-send, .chat-primary, .chat-settings-open, .chat-thread-header button, .chat-settings-close { transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease; }
@media(hover:hover){ .chat-fab:hover { box-shadow:0 8px 25px #29402d35; transform:translateY(-2px); } .chat-send:hover:not(:disabled),.chat-primary:hover:not(:disabled){background:#486443;transform:translateY(-1px)} .chat-settings-open:hover,.chat-thread-header button:hover{background:#edf3e8} }
.chat-fab:active, .chat-send:active:not(:disabled), .chat-primary:active:not(:disabled), .chat-thread-header button:active { transform:scale(.97); }
.chat-list-item { transition:background-color .2s ease,box-shadow .2s ease; }
.chat-list-item.is-selected { box-shadow:inset 3px 0 #829a79; }
.chat-compose textarea,.chat-start input,.chat-settings textarea { transition:border-color .2s ease,box-shadow .2s ease; }
.chat-compose textarea:focus,.chat-settings textarea:focus { border-color:#78926e; box-shadow:0 0 0 3px #8ba68433; outline:0; }
.chat-thread-header,.chat-list-pane,.chat-visitor-thread { animation:chat-enter .2s ease both; }
@media(prefers-reduced-motion:reduce){.chat-widget *,.chat-full *{animation:none!important;transition:none!important}}
html.motion-disabled .chat-widget *,html.motion-disabled .chat-full *{animation:none!important;transition:none!important}

/* Непрочитанные обращения и индикатор собеседника */
.chat-count { display:inline-grid; place-items:center; flex:none; min-width:23px; height:23px; padding:0 5px; border-radius:999px; background:#b74438; color:#fff; font-size:12px; line-height:1; font-weight:700; }
.chat-typing { display:flex; flex:none; align-items:center; gap:7px; padding:5px 14px; background:#faf9f5; color:#697b63; font-size:12px; }
.typing-dots { display:inline-flex; gap:3px; align-items:center; }
.typing-dots i { display:block; width:4px; height:4px; border-radius:50%; background:#77916c; animation:typing-pulse 1s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay:.15s; }.typing-dots i:nth-child(3) { animation-delay:.3s; }
@keyframes typing-pulse { 0%,60%,100% { opacity:.45; transform:translateY(0) } 30% { opacity:1; transform:translateY(-3px) } }
@media(prefers-reduced-motion:reduce) { .typing-dots i { animation:none!important; opacity:1; } }
html.motion-disabled .typing-dots i { animation:none!important; opacity:1; }

.chat-list-preview b { font-size:11px; font-weight:600; color:#788475; }
.chat-list-latest { margin-top:3px; }
.chat-widget .chat-toolbar { gap:6px; padding:8px; }
.chat-widget .chat-toolbar input,.chat-widget .chat-toolbar select,.chat-widget .chat-settings-open { font-size:13px; min-height:38px; padding:7px 9px; }
.chat-widget .chat-list-item { padding:11px 12px; }
@media(max-width:600px) { .chat-widget .chat-toolbar input,.chat-widget .chat-toolbar select { font-size:16px; min-height:42px; } }
/* Круглые действия в единой вертикальной колонке. */
.chat-widget.is-admin { right:20px; bottom:84px; }
.chat-widget.is-admin .chat-panel { right:0; max-height:calc(100dvh - 164px); }
@media(max-width:680px) {
  .chat-widget.is-admin { right:16px; bottom:calc(max(16px,env(safe-area-inset-bottom)) + 64px); }
}

.chat-message a { color:#385c3a; text-decoration:underline; overflow-wrap:anywhere; }

.chat-thread,.chat-visitor-thread { position:relative; }
.chat-compose { align-items:flex-end; gap:5px; padding:8px; }
.chat-tool { display:grid; place-items:center; flex:none; width:38px; height:42px; padding:0; border:1px solid #d4ddd0; border-radius:9px; background:#fffefa; color:#48643f; font-size:18px; cursor:pointer; transition:background .2s,transform .2s; }
.chat-tool:disabled { opacity:.45; cursor:not-allowed; }
@media(hover:hover){.chat-tool:hover:not(:disabled){background:#eaf1e5;transform:translateY(-2px)}}
.chat-tool.is-recording { color:#a52f26; background:#f9e4df; border-color:#c95e52; animation:record-pulse 1.2s ease-in-out infinite; }
@keyframes record-pulse { 50% { box-shadow:0 0 0 5px #d9685033; } }
.chat-attachment-preview { display:flex; align-items:center; gap:8px; flex:none; padding:8px 12px; background:#edf4e8; color:#3f5a3b; font-size:12px; overflow-wrap:anywhere; }
.chat-attachment-preview span { flex:1; min-width:0; } .chat-attachment-preview button { border:0; background:transparent; font-size:20px; color:#5e7259; cursor:pointer; }
.chat-drop { position:absolute; z-index:5; inset:6px; display:grid; place-items:center; pointer-events:none; padding:18px; border:2px dashed #729369; border-radius:12px; background:#f0f7ebee; color:#375631; text-align:center; animation:chat-enter .2s ease both; }
.chat-drop p { margin:8px 0; font-size:13px; }.chat-drop small{font-size:12px;}
.chat-media { display:block; max-width:100%; max-height:240px; border-radius:8px; } audio.chat-media { width:240px; max-width:100%; height:38px; }
.chat-file-name { display:block; margin:5px 0; font-size:11px; color:#687763; overflow-wrap:anywhere; }
@media(max-width:600px) { .chat-tool { width:34px; min-height:42px; } .chat-compose { gap:4px; } .chat-send { padding:10px; } }
@media(prefers-reduced-motion:reduce) { .chat-tool,.chat-tool.is-recording,.chat-drop { animation:none!important;transition:none!important; } }
html.motion-disabled .chat-tool,html.motion-disabled .chat-drop{animation:none!important;transition:none!important}

.chat-tools { display:flex; flex:none; gap:4px; } .chat-tool svg { width:19px; height:19px; }
.chat-widget .chat-compose { flex-wrap:wrap; } .chat-widget .chat-tools { width:100%; }
@media(max-width:600px) { .chat-full .chat-compose { flex-wrap:wrap; } .chat-full .chat-tools { width:100%; } }

.chat-deleted { margin:auto; max-width:300px; padding:24px; text-align:center; color:#52684d; animation:chat-enter .35s ease both; }
.chat-deleted-icon { display:grid; place-items:center; width:48px; height:48px; margin:0 auto 12px; border-radius:50%; background:#e4f0de; color:#537f49; font-size:24px; }
.chat-deleted strong { display:block; color:#2c3e2b; font:22px Georgia,serif; }.chat-deleted p { font-size:14px; line-height:1.5; }.chat-deleted small { display:block; font-size:12px; line-height:1.5; color:#74806f; }.chat-countdown { font-variant-numeric:tabular-nums; font-weight:700; }
@media(prefers-reduced-motion:reduce){.chat-deleted{animation:none!important}}html.motion-disabled .chat-deleted{animation:none!important}

.chat-browser-notice { min-height:38px; padding:7px 10px; border:1px solid #ccd7c6; border-radius:8px; background:#f8faf5; color:#40573a; font:inherit; font-size:13px; cursor:pointer; transition:background-color .2s ease, border-color .2s ease; }
.chat-browser-notice[aria-pressed=true] { background:#e8f2e3; border-color:#a6c19b; }
@media(hover:hover){.chat-browser-notice:hover{background:#eaf1e5}}
/* Compact header controls and gentle movement of the chat launcher only. */
.chat-head .chat-browser-notice { min-height:36px; padding:6px 8px; border:1px solid #ccd7c6; border-radius:9px; background:#f8faf5; font-size:12px; white-space:nowrap; }
.chat-head .chat-browser-notice[aria-pressed=true] { background:#e8f2e3; }
.chat-head .chat-close,.chat-settings-close,.chat-thread-header .chat-back { display:inline-grid; place-items:center; flex:none; width:36px; height:36px; min-width:36px; padding:0; border:1px solid #b7c8b0; border-radius:50%; background:#fffefa; color:#48643f; font:20px/1 Arial,sans-serif!important; cursor:pointer; transition:background-color .25s ease,border-color .25s ease; }
.chat-head .chat-close:hover,.chat-settings-close:hover,.chat-thread-header .chat-back:hover { background:#e6efe2; border-color:#789171; }
.chat-full .chat-head .chat-close { display:none; }
.chat-full .chat-toolbar .chat-search { flex:0 0 100%; width:100%; }
.chat-list-state { margin-left:auto; font-size:11px; color:#8c5a47; white-space:nowrap; }
.chat-label-line { display:block; }
.chat-label-line small { font-size:.83em; font-weight:400; color:#6b7a66; }
.chat-panel { max-height:min(580px,calc(100dvh - 175px)); height:min(580px,calc(100dvh - 175px)); }
.chat-panel:has(.chat-start:not([hidden])),.chat-panel:has(.chat-start:not([hidden])) .chat-app { max-height:min(580px,calc(100dvh - 175px)); }
.chat-widget.is-admin .chat-panel { max-height:min(580px,calc(100dvh - 240px)); }
.chat-widget .chat-fab { transition:transform .32s cubic-bezier(.2,.7,.2,1),background-color .25s ease,box-shadow .25s ease; }
.chat-widget.is-open .chat-fab,.chat-widget.is-open .chat-fab:hover { transform:translateY(calc(-1 * (var(--chat-panel-height, 0px) + 74px))); }
.chat-panel.is-closing { animation:chat-panel-out .21s ease both; pointer-events:none; }
@keyframes chat-panel-out { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(7px); } }
@media(max-width:400px){.chat-head {gap:4px;padding:10px 11px}.chat-head h2{font-size:20px}.chat-head-actions{gap:3px}.chat-head .chat-browser-notice{font-size:11px;padding:5px}.chat-head .chat-close{width:34px;height:34px;min-width:34px}.chat-sound{font-size:13px!important;padding:5px!important}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .chat-widget .chat-fab,html:not(.motion-enabled) .chat-head .chat-close,html:not(.motion-enabled) .chat-panel.is-closing{animation:none!important;transition:none!important}}
html.motion-disabled .chat-widget .chat-fab,html.motion-disabled .chat-head .chat-close,html.motion-disabled .chat-panel.is-closing{animation:none!important;transition:none!important}
.chat-head .chat-sound { border:1px solid #c3d2bd; border-radius:9px; padding:7px 9px; background:#f8faf5; color:#405a3b; font:600 12px/1.25 Arial,sans-serif; white-space:nowrap; transition:background-color .25s ease,border-color .25s ease,color .25s ease; }
.chat-head .chat-sound[aria-pressed=true] { background:#e7f0e2; border-color:#a9c19f; }
@media(hover:hover){.chat-head .chat-sound:hover {background:#dfeada;border-color:#8aa582;}}
@media(max-width:400px){.chat-head .chat-sound{font-size:12px!important;padding:6px!important}}
.chat-start label .chat-label-line { font-weight:700; }
.chat-start label .chat-label-line small { font-weight:400; }

.chat-settings-form textarea { font-weight:400; }

/* Align the panel with its launcher; the admin bell remains below it. */
.chat-panel { bottom:0;height:min(580px,calc(100dvh - 110px));max-height:min(580px,calc(100dvh - 110px)); }
.chat-panel:has(.chat-start:not([hidden])),.chat-panel:has(.chat-start:not([hidden])) .chat-app { max-height:min(580px,calc(100dvh - 110px)); }
.chat-widget.is-admin .chat-panel,.chat-widget.is-admin .chat-panel:has(.chat-start:not([hidden])) .chat-app { max-height:min(580px,calc(100dvh - 175px)); }
.chat-widget.is-open .chat-fab,.chat-widget.is-open .chat-fab:hover { transform:translateY(calc(-1 * (var(--chat-panel-height, 0px) + 10px))); }

/* Clearer messenger boundaries and compact one-line conversation actions. */
.chat-panel,.chat-full { border:1px solid #9faf98; box-shadow:0 12px 36px #283d2924; }
.chat-head,.chat-thread-header,.chat-toolbar { border-color:#b9c8b3; }
.chat-full .chat-list-pane { border-color:#b9c8b3; }
.chat-message { border-color:#c4d0bd; }
.chat-thread-header { flex-wrap:wrap;gap:5px;padding:9px 10px; }
.chat-thread-header .chat-client-name { flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25; }
.chat-thread-header button:not(.chat-back) { flex:none;white-space:nowrap;min-height:36px;padding:6px 8px;font-size:12px;border-radius:8px; }
.chat-thread-header .chat-details { flex:0 0 100%; }
.chat-thread-header .chat-back { width:32px;height:32px;min-width:32px; }
.chat-media-open { cursor:pointer;color:inherit; }
.chat-image-link,.chat-video-preview { padding:0;border:0;background:transparent;display:block;position:relative;text-align:left;border-radius:8px; }
.chat-video-preview > span { position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:white;background:#213323cc;font-size:17px; }
.chat-media-open:focus-visible,.chat-viewer button:focus-visible,.chat-viewer select:focus-visible { outline:2px solid #597b52;outline-offset:3px; }
.chat-media-text { display:block;border:0;padding:5px 0;background:transparent;text-decoration:underline;font:inherit;font-size:12px;color:#405c39; }
.chat-map-link { display:inline-flex;align-items:center;gap:5px; }
.chat-map-link span { display:inline-block;transition:transform .25s ease; }
.chat-map-link:hover span,.chat-map-link:focus-visible span { transform:translate(3px,-3px); }
.chat-media-dialog { position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:16px;border:0;background:transparent;overflow:auto;color:#293328; }
.chat-media-dialog::backdrop { background:#182219bd; }
.chat-viewer { display:flex;flex-direction:column;width:min(900px,100%);max-height:calc(100dvh - 32px);margin:auto;border:1px solid #a5b79d;border-radius:14px;background:#fafbf6;box-shadow:0 20px 65px #0005;overflow:hidden;animation:chat-viewer-in .2s ease both; }
.chat-media-dialog[open] { display:flex; }
.chat-viewer-head { display:flex;align-items:center;gap:12px;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #c5d2bf;background:#edf3e8; }
.chat-viewer-head strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.chat-viewer-close { flex:none;display:grid;place-items:center;width:38px;height:38px;border:1px solid #aabda4;border-radius:50%;background:#fff;color:#405c39;font-size:24px;cursor:pointer; }
.chat-viewer-content { display:grid;place-items:center;min-height:90px;overflow:auto;background:#1c241e;padding:12px; }
.chat-viewer-content img,.chat-viewer-content video { max-width:100%;max-height:calc(100dvh - 175px);object-fit:contain; }
.chat-viewer-content audio { width:min(500px,100%); }
.chat-viewer-bar { display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 14px;font-size:13px; }
.chat-viewer-bar select { border:1px solid #a9bca3;border-radius:7px;padding:6px;background:#fff;color:#344b32; }
.chat-quality-status { color:#5f705a; }
.chat-map-viewer { width:min(650px,100%); }
.chat-map-body { overflow:auto;padding:14px;display:grid;gap:10px; }
.chat-map-body p { margin:0;font:14px/1.4 Arial,sans-serif;color:#52624e; }
.chat-map-body small { color:#6b7966;font:12px/1.4 Arial,sans-serif; }
.chat-map-canvas { height:min(42dvh,340px);min-height:180px;border:1px solid #aabca5;border-radius:8px;overflow:hidden;background:#e9efe5; }
.chat-map-actions button,.chat-map-insert { border:1px solid #a5b99f;border-radius:8px;padding:10px 12px;background:#f5f8f1;color:#354d32;font:600 13px Arial,sans-serif;cursor:pointer; }
.chat-map-insert { background:#354b32;color:white; }
.chat-map-insert:disabled { opacity:.45;cursor:not-allowed; }
.chat-media-dialog.is-closing .chat-viewer { animation:chat-viewer-out .18s ease both; }
@keyframes chat-viewer-in { from { opacity:0;transform:translateY(9px) scale(.98); } to { opacity:1;transform:none; } }
@keyframes chat-viewer-out { from { opacity:1;transform:none; } to { opacity:0;transform:translateY(7px) scale(.98); } }
@media(max-width:400px){.chat-thread-header button:not(.chat-back){padding:5px;font-size:11px}.chat-thread-header{gap:4px}.chat-media-dialog{padding:8px}.chat-viewer{max-height:calc(100dvh - 16px)}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .chat-viewer,html:not(.motion-enabled) .chat-map-link span{animation:none!important;transition:none!important}}
html.motion-disabled .chat-viewer,html.motion-disabled .chat-map-link span{animation:none!important;transition:none!important}
.chat-tab-count { display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 4px;border-radius:999px;background:#b94338;color:#fff;font:700 11px/1 Arial,sans-serif;vertical-align:middle; }
.chat-tab-count[hidden] { display:none!important; }
@media(max-width:500px){.chat-widget.is-admin .chat-head,.chat-full .chat-head{flex-wrap:wrap}.chat-widget.is-admin .chat-head-actions,.chat-full .chat-head-actions{margin-left:auto;flex-wrap:wrap;justify-content:flex-end}}

/* In admin mode both launchers sit above the open panel, side by side. */
.chat-widget.is-admin { transition:bottom .32s cubic-bezier(.2,.7,.2,1); }
.chat-widget.is-admin.is-open { bottom:20px; }
.chat-widget.is-admin.is-open .chat-fab,.chat-widget.is-admin.is-open .chat-fab:hover { transform:translate(-64px,calc(-1 * (var(--chat-panel-height, 0px) + 10px))); }
@media(max-width:680px){.chat-widget.is-admin.is-open{bottom:max(16px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .chat-widget.is-admin{transition:none!important}}
html.motion-disabled .chat-widget.is-admin{transition:none!important}

.chat-compose.is-unavailable { display:block; padding:12px; background:#f7f3ed; }
.chat-compose.is-unavailable .chat-tools,.chat-compose.is-unavailable textarea,.chat-compose.is-unavailable .chat-send { display:none; }
.chat-unavailable { margin:0; padding:11px 12px; border:1px solid #d8bcb4; border-radius:9px; background:#faeae7; color:#8c4036; font:600 13px/1.4 Arial,sans-serif; text-align:center; }
.chat-receipt { display:inline-block; color:#839183; font:700 12px/1 Arial,sans-serif; letter-spacing:-3px; padding-right:3px; vertical-align:baseline; transition:color .2s ease; }
.chat-receipt.is-read { color:#43874c; }

.chat-list-date { display:block; margin:0 0 5px; color:#748370; font:500 11px/1.3 Arial,sans-serif; }
/* Desktop: a floating or pinned mailbox sidebar, with an animated workspace. */
.chat-sidebar-toggle{white-space:nowrap;border:1px solid #b9cbb1!important;border-radius:9px!important;background:#fffefa!important;padding:7px 10px!important;font-size:13px!important}
.chat-sidebar-toggle:hover,.chat-sidebar-pin:hover{background:#e3eddd!important}
.chat-sidebar-title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid #d9e3d3;color:#435a3d;font-size:13px}
.chat-sidebar-pin{border:1px solid #bdceb7;border-radius:8px;background:#f6faf3;color:#435a3d;padding:6px 8px;font:12px Arial,sans-serif;cursor:pointer;transition:background .2s,border-color .2s}
@media(min-width:701px){
 .chat-full .chat-admin-layout{position:relative;overflow:hidden}
 .chat-full .chat-sidebar-rail{position:relative;z-index:3;flex:0 0 0;min-width:0;transition:flex-basis .32s cubic-bezier(.2,.7,.2,1)}
 .chat-full .chat-admin-layout.sidebar-pinned .chat-sidebar-rail{flex-basis:min(340px,34vw)}
 .chat-full .chat-sidebar-rail .chat-list-pane{position:absolute;left:0;top:0;bottom:0;width:min(340px,34vw);max-width:none;background:#fffefa;border-right:1px solid #b9c8b3;transform:translateX(-100%);visibility:hidden;transition:transform .32s cubic-bezier(.2,.7,.2,1),visibility 0s linear .32s;box-shadow:0 12px 26px #263b241a;animation:none}
 .chat-full .chat-admin-layout.sidebar-open .chat-list-pane{transform:translateX(0);visibility:visible;transition-delay:0s}
 .chat-full .chat-admin-layout.sidebar-pinned .chat-list-pane{box-shadow:none}
}
@media(max-width:700px){.chat-full .chat-sidebar-rail{display:contents}.chat-full .chat-sidebar-toggle,.chat-full .chat-sidebar-title{display:none}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .chat-full .chat-sidebar-rail,html:not(.motion-enabled) .chat-full .chat-list-pane{transition:none!important}}
html.motion-disabled .chat-full .chat-sidebar-rail,html.motion-disabled .chat-full .chat-list-pane{transition:none!important}

/* Keep floating admin header controls inside the window at all scales. */
.chat-widget.is-admin .chat-head{flex-wrap:wrap;gap:8px}
.chat-widget.is-admin .chat-head>div:first-child{flex:1 1 112px;min-width:0}
.chat-widget.is-admin .chat-head-actions{flex:0 1 auto;min-width:0;max-width:100%;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}

/* Animated chat filters and quick replies. */
.chat-select{position:relative;min-width:0;flex:1 1 135px;z-index:2}
.chat-select[hidden]{display:none!important}.chat-select-native{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;opacity:0!important;pointer-events:none!important}
.chat-select-toggle{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:38px;padding:7px 9px;border:1px solid #ccd7c6;border-radius:7px;background:#fbfcf8;color:#253025;text-align:left;font:13px/1.3 Arial,sans-serif;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s}
.chat-select-toggle>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-select-arrow{width:8px;height:8px;flex:none;border-right:1.5px solid #52674b;border-bottom:1.5px solid #52674b;transform:rotate(45deg) translateY(-2px);transition:transform .22s}
.chat-select.is-open{z-index:15}.chat-select.is-open .chat-select-toggle{border-color:#829a79;box-shadow:0 0 0 3px #9fb89a33}.chat-select.is-open .chat-select-arrow{transform:rotate(225deg) translateY(-2px)}
.chat-select-list{position:absolute;top:calc(100% + 4px);left:0;right:0;max-height:200px;overflow:auto;padding:4px;border:1px solid #cbd7c6;border-radius:8px;background:#fffefa;box-shadow:0 8px 24px #29362922;opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;transition:opacity .2s,transform .2s,visibility 0s linear .2s}
.chat-select.opens-up .chat-select-list{top:auto;bottom:calc(100% + 4px);transform:translateY(6px)}.chat-select.is-open .chat-select-list{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.chat-select-option{display:block;width:100%;min-height:36px;padding:7px 9px;border:0;border-radius:5px;background:transparent;color:#344c31;text-align:left;font:13px/1.35 Arial,sans-serif;cursor:pointer}.chat-select-option:hover,.chat-select-option:focus-visible{background:#edf3e8}.chat-select-option[aria-selected=true]{background:#e4eddf;font-weight:700}
.chat-thread>.chat-select{flex:0 0 auto;margin:6px 10px}.chat-thread>.chat-select .chat-select-toggle{min-height:34px}
.chat-full .chat-head .chat-browser-notice,.chat-full .chat-head .chat-sound{display:inline-flex;align-items:center;justify-content:center;width:132px;height:36px;min-height:36px;padding:6px;font:600 12px/1.25 Arial,sans-serif}
@media(max-width:400px){.chat-full .chat-head .chat-browser-notice,.chat-full .chat-head .chat-sound{width:112px;font-size:11px!important}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .chat-select-list,html:not(.motion-enabled) .chat-select-arrow{transition:none!important}}html.motion-disabled .chat-select-list,html.motion-disabled .chat-select-arrow{transition:none!important}

@media(min-width:701px){
 .chat-full .chat-admin-layout.sidebar-pinned .chat-sidebar-rail{flex-basis:var(--chat-sidebar-width,min(340px,34vw))}
 .chat-full .chat-sidebar-rail .chat-list-pane{width:var(--chat-sidebar-width,min(340px,34vw));overflow:visible}
 .chat-sidebar-resize{position:absolute;top:0;bottom:0;right:-5px;width:10px;cursor:col-resize;touch-action:none;z-index:16}
 .chat-sidebar-resize::after{content:"";position:absolute;top:45%;left:4px;height:36px;width:2px;border-radius:2px;background:#a8bba1;opacity:.45;transition:opacity .2s,background .2s}
 .chat-sidebar-resize:hover::after,.chat-sidebar-resize:focus-visible::after{opacity:1;background:#63815b}
 .chat-full .chat-admin-layout.is-resizing .chat-sidebar-rail,.chat-full .chat-admin-layout.is-resizing .chat-list-pane{transition:none}
}
@media(max-width:700px){.chat-sidebar-resize{display:none}}

/* Return to a simple two-column layout, with compact sidebar controls. */
.chat-full .chat-head{justify-content:flex-start;gap:12px}.chat-full .chat-head-actions{margin-left:auto}.chat-full .chat-sidebar-toggle{padding:6px 9px!important;font-size:12px!important}
.chat-full .chat-toolbar{gap:6px;padding:10px}.chat-full .chat-toolbar .chat-select{flex:1 1 110px}.chat-full .chat-toolbar .chat-select-toggle,.chat-full .chat-toolbar .chat-select-option{font-size:12px}.chat-full .chat-settings-open{min-height:34px;padding:6px 8px;font-size:12px}.chat-full .chat-sidebar-pin{min-width:34px;min-height:34px;padding:5px;font-size:13px}
@media(max-width:700px){.chat-full .chat-sidebar-pin{display:none}}

.chat-quality-control{display:flex;align-items:center;gap:8px}.chat-quality-control .chat-select{width:150px;flex:0 0 150px}.chat-quality-control .chat-select-toggle{min-height:34px}

/* Settings slide over the conversation; the workspace keeps its dimensions. */
.chat-body{position:relative}
.chat-settings{position:absolute;z-index:30;inset:0 auto 0 0;width:min(390px,100%);max-height:none;overflow:auto;border:0;border-right:1px solid #b9cbb3;box-shadow:8px 0 30px #263b2422;background:#f8faf5;animation:chat-settings-in .22s ease both}
.chat-settings.is-closing{animation:chat-settings-out .22s ease both;pointer-events:none}
@keyframes chat-settings-in{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
@keyframes chat-settings-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-18px)}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .chat-settings{animation:none!important}}html.motion-disabled .chat-settings{animation:none!important}
/* Align the name, actions and reason in the conversation header. */
.chat-thread-header{align-items:center;gap:6px;padding:10px 12px}
.chat-thread-header .chat-back{width:34px;height:34px;min-width:34px}
.chat-thread-header button:not(.chat-back){min-height:34px;height:34px;display:inline-flex;align-items:center;justify-content:center}
.chat-thread-header .chat-details{margin:0;padding:2px 0 0;line-height:1.35}
.chat-thread-header:has(>.chat-back) .chat-details{padding-left:40px}
@media(max-width:400px){.chat-thread-header{gap:4px;padding:9px}.chat-thread-header:has(>.chat-back) .chat-details{padding-left:38px}}

/* The floating administrator header always uses two compact rows, so the back button never clips. */
.chat-widget.is-admin .chat-head{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px}
.chat-widget.is-admin .chat-head>div:first-child{flex:1 1 100%;min-width:0}
.chat-widget.is-admin .chat-head-actions{flex:1 1 100%;width:100%;max-width:100%;display:flex;flex-wrap:nowrap;justify-content:flex-end;gap:5px;margin:0}
.chat-widget.is-admin .chat-head-actions .chat-browser-notice,.chat-widget.is-admin .chat-head-actions .chat-sound{width:auto;min-width:0;min-height:34px;padding:6px 8px;font-size:11px!important;white-space:nowrap}
.chat-widget.is-admin .chat-head-actions .chat-close{width:34px;height:34px;min-width:34px;flex:0 0 34px}
.chat-widget.is-admin .chat-toolbar .chat-search{flex:0 0 100%;width:100%;font-size:13px}
.chat-widget.is-admin .chat-toolbar .chat-select{flex:1 1 125px}
.chat-widget.is-admin .chat-toolbar .chat-select-toggle,.chat-widget.is-admin .chat-settings-open{font-size:12px;min-height:36px}
.chat-record{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}

/* Visible while the microphone is actually recording, without blocking touch. */
.chat-tool.chat-record.is-recording{position:relative;border-radius:50%;background:#fff1ef;color:#a52f26;border-color:#c13b31;animation:none;z-index:2}
.chat-tool.chat-record.is-recording::after{content:"";position:absolute;inset:-10px;border:3px solid #c13b31;border-radius:50%;background:#e04a3517;pointer-events:none;animation:voice-record-ring 1.4s ease-in-out infinite}
@keyframes voice-record-ring{50%{border-color:#e47668;box-shadow:0 0 0 4px #cf47352c}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) .chat-tool.chat-record.is-recording::after{animation:none}}
html.motion-disabled .chat-tool.chat-record.is-recording::after{animation:none}
.chat-full .chat-toolbar .chat-search{font-size:14px;min-height:40px}
.chat-full .chat-toolbar .chat-select-toggle,.chat-full .chat-toolbar .chat-settings-open{font-size:13px}
@media(max-width:700px){.chat-full .chat-toolbar .chat-search{font-size:16px}}
.chat-head,.chat-thread-header,.chat-toolbar,.chat-full .chat-list-pane{border-color:#afc0aa}
.chat-list-item{border-bottom-color:#d5ded0}
.chat-full .chat-toolbar .chat-search,.chat-select-toggle{border-color:#c3d1bd}

/* A little more readable without oversized controls. */
.chat-full .chat-toolbar .chat-search{font-size:15px}
.chat-full .chat-toolbar .chat-select-toggle,.chat-full .chat-toolbar .chat-select-option,.chat-full .chat-settings-open{font-size:14px}
.chat-full .chat-list-date,.chat-full .chat-list-preview b,.chat-full .chat-list-state{font-size:12px}
.chat-full .chat-head .chat-browser-notice,.chat-full .chat-head .chat-sound{font-size:13px}
.chat-message p{font-size:15px}.chat-message time,.chat-details{font-size:12px}
@media(max-width:700px){.chat-full .chat-toolbar .chat-search{font-size:16px}}