#eclar-webchat { --ew-blue:#1769e0; --ew-ink:#171719; color:var(--ew-ink); font-family:"Open Sans",Arial,sans-serif; font-size:14px; line-height:1.5; }
#eclar-webchat *, #eclar-webchat *::before, #eclar-webchat *::after { box-sizing:border-box; }
#eclar-webchat[hidden], #eclar-webchat [hidden] { display:none!important; }
#eclar-webchat button, #eclar-webchat textarea { font:inherit; }
#eclar-webchat button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
#eclar-webchat button:focus-visible, #eclar-webchat textarea:focus-visible, #eclar-webchat [tabindex]:focus-visible { outline:3px solid #72adff; outline-offset:3px; }
#eclar-webchat svg { display:block; width:24px; height:24px; flex-shrink:0; }
#eclar-webchat .ew-launcher { position:fixed; z-index:1001; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); min-height:56px; display:flex; align-items:center; gap:10px; padding:0 18px; color:#fff; background:var(--ew-ink); border:1px solid #343439; border-radius:30px; box-shadow:0 8px 28px #0a142433; font-weight:700; transition:transform .2s,background .2s; }
#eclar-webchat .ew-launcher:hover { background:#2b2b31; transform:translateY(-2px); }
#eclar-webchat .ew-launcher-dot { width:7px; height:7px; border-radius:50%; background:#8fbaff; }
#eclar-webchat .ew-panel { position:fixed; z-index:1002; right:max(12px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); display:flex; flex-direction:column; width:calc(100% - 24px); max-width:400px; height:580px; max-height:calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border:1px solid #e1e5eb; border-radius:22px; overflow:hidden; background:#fff; box-shadow:0 24px 80px #0b162d30,0 4px 16px #0b162d12; animation:ew-appear .18s ease-out; }
#eclar-webchat .ew-header { display:flex; align-items:center; gap:12px; padding:20px 16px; background:#fff; }
#eclar-webchat .ew-avatar { display:flex; align-items:center; justify-content:center; gap:3px; width:44px; height:44px; flex-shrink:0; border-radius:14px; background:var(--ew-ink); color:#fff; font-size:30px; line-height:1; font-weight:800; letter-spacing:0; }
#eclar-webchat .ew-avatar-dot { width:8px; height:8px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg,#1769e0,#48d4d7); transform:translateY(8px); }
#eclar-webchat .ew-heading { flex:1; min-width:0; }
#eclar-webchat .ew-heading h2 { margin:0; font-size:18px; letter-spacing:-.6px; }
#eclar-webchat .ew-heading p { margin:3px 0 0; color:#636b77; font-size:11px; }
#eclar-webchat .ew-close { display:grid; place-items:center; width:44px; height:44px; padding:0; flex-shrink:0; background:#f3f5f7; color:#555e69; border:0; border-radius:50%; }
#eclar-webchat .ew-disclaimer { display:flex; align-items:center; gap:7px; margin:0; padding:10px 14px; border-top:1px solid #e6edf7; border-bottom:1px solid #e6edf7; color:#375a8a; background:#f3f7fd; font-size:10px; }
#eclar-webchat .ew-disclaimer span { width:6px; height:6px; flex-shrink:0; border-radius:50%; background:var(--ew-blue); }
#eclar-webchat .ew-messages { flex:1; min-height:70px; overflow-y:auto; overscroll-behavior:contain; padding:20px 16px 12px; background:#fafbfc; }
#eclar-webchat .ew-message { width:fit-content; max-width:91%; margin:0 0 14px; padding:12px 14px; border:1px solid #e6e9ee; border-radius:3px 16px 16px; background:#fff; overflow-wrap:anywhere; }
#eclar-webchat .ew-message p { margin:5px 0 0; font-size:13px; line-height:1.7; white-space:pre-wrap; }
#eclar-webchat .ew-sender { color:#626b77; font-size:10px; font-weight:700; }
#eclar-webchat .ew-message-visitor { margin-left:auto; color:#fff; background:var(--ew-blue); border-color:var(--ew-blue); border-radius:16px 3px 16px 16px; }
#eclar-webchat .ew-message-visitor .ew-sender { color:#e2eeff; }
#eclar-webchat .ew-suggestions { display:flex; flex-wrap:wrap; gap:7px; padding:8px 16px 14px; background:#fafbfc; }
#eclar-webchat .ew-suggestions button { min-height:36px; padding:7px 11px; border:1px solid #d8e4f4; border-radius:18px; background:#fff; color:#185bb4; font-size:11px; }
#eclar-webchat .ew-suggestions button:hover { background:#edf4fe; }
#eclar-webchat .ew-form { display:flex; align-items:flex-end; gap:8px; margin:0; padding:14px 14px 8px; border-top:1px solid #e9edf2; }
#eclar-webchat textarea { flex:1; min-width:0; height:44px; max-height:96px; padding:11px 12px; resize:none; border:1px solid #e1e5eb; border-radius:12px; background:#fff; color:var(--ew-ink); font-size:16px; line-height:22px; }
#eclar-webchat textarea::placeholder { color:#787f88; }
#eclar-webchat .ew-send { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:12px; background:var(--ew-blue); color:#fff; }
#eclar-webchat .ew-send:disabled { cursor:default; background:#e8edf4; color:#8e99a9; }
#eclar-webchat .ew-footnote { margin:0; padding:0 16px 12px; text-align:center; color:#6e7682; font-size:9px; }
#eclar-webchat .ew-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(min-width:600px) {
  #eclar-webchat .ew-launcher { right:24px; bottom:24px; }
  #eclar-webchat .ew-panel { right:24px; bottom:94px; max-height:calc(100dvh - 118px); }
}
@keyframes ew-appear { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { #eclar-webchat .ew-panel { animation:none; } #eclar-webchat .ew-launcher { transition:none; } }

#eclar-webchat .ew-sound{font:inherit;font-size:11px;border:0;background:#f3f5f7;color:#555e69;border-radius:8px;padding:8px;min-height:44px;cursor:pointer;flex-shrink:0}

#eclar-webchat .ew-older{align-self:center;flex-shrink:0;margin:6px;border:1px solid #d8e4f4;border-radius:12px;padding:8px 12px;background:#fff;color:#185bb4;font-size:12px}

/* Keep the composer intact when the keyboard reduces available height. */
#eclar-webchat .ew-header,
#eclar-webchat .ew-disclaimer,
#eclar-webchat .ew-form,
#eclar-webchat .ew-footnote,
#eclar-webchat .ew-suggestions { flex-shrink:0; }
#eclar-webchat .ew-messages { min-height:0; }
#eclar-webchat textarea { min-height:44px; overflow-y:auto; }
#eclar-webchat .ew-send { flex:0 0 44px; }
@media(max-width:599px){
 #eclar-webchat .ew-panel {
  top:calc(var(--ew-visible-top,0px) + 12px + env(safe-area-inset-top));
  bottom:auto;
  height:calc(var(--ew-visible-height,100dvh) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  max-height:none;
 }
 #eclar-webchat .ew-header { padding:12px; }
 #eclar-webchat .ew-form { padding:10px 12px 12px; }
}

/* Opening the panel focuses its title for assistive technology, not interaction. */
#eclar-webchat #ew-title:focus { outline:none; }