/* =========================================================
   Easycomm AI Chat – card + popup
   Mobile-first. Selectors are doubled up (.ec-ai-card .ec-chip etc.)
   so the Astra theme's global button / input styles can't override them.
   Breakpoints: ≤380 small phones · ≤600 phones (full-screen popup)
                · 601–1024 tablets · >1024 desktop · short landscape screens
   ========================================================= */
.ec-ai-card, .ec-chat-overlay {
  --ec-heading:#00081a; --ec-blue-900:#0e2087; --ec-blue-800:#1328a0;
  --ec-blue-300:#7084f2; --ec-blue-200:#98a6f9; --ec-blue-100:#c5cefd;
  --ec-blue-0:#f5f6ff; --ec-bg-light:#f2f7fd; --ec-link:#327afa; --ec-muted:#5a6176;
  --ec-font:'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.ec-ai-card *, .ec-ai-card *::before, .ec-ai-card *::after,
.ec-chat-overlay *, .ec-chat-overlay *::before, .ec-chat-overlay *::after { box-sizing:border-box; }

/* ---------------------------------------------------------
   CARD (hero)
   --------------------------------------------------------- */
.ec-ai-card {
  position:relative; isolation:isolate; overflow:hidden;
  width:100%; max-width:800px; min-width:0; box-sizing:border-box;
  padding:clamp(18px, 4.5vw, 32px) clamp(14px, 4vw, 25px);
  border-radius:clamp(12px, 2.5vw, 16px);
  display:flex; flex-direction:column; gap:clamp(12px, 2.5vw, 16px);
  background:#000; font-family:var(--ec-font); text-align:left;
}
.ec-ai-card::before {
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background-color:#0a1f7a;
  background-image:url("https://easycomm.io/wp-content/uploads/2026/10/Container_1_1.webp");
  background-position:center; background-repeat:no-repeat; background-size:cover;
}
.ec-ai-card .ec-ai-card__title { display:flex; align-items:center; gap:8px; margin:0; padding:0;
  color:#fff; font-family:var(--ec-font); font-size:16px; font-weight:600; line-height:20px; }
.ec-ai-card .ec-ai-card__title svg { width:22px; height:22px; flex:0 0 22px; }

.ec-ai-card .ec-ai-field,
.ec-ai-card .ec-ai-field:hover,
.ec-ai-card .ec-ai-field:focus {
  all:unset; box-sizing:border-box; cursor:text;
  width:100%; min-height:clamp(84px, 18vw, 102px); padding:clamp(12px, 3vw, 16px);
  display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; gap:10px;
  background:#fff; border:1px solid var(--ec-blue-100); border-radius:10px;
  transition:box-shadow .2s, border-color .2s;
}
.ec-ai-card .ec-ai-field:hover,
.ec-ai-card .ec-ai-field:focus-visible { border-color:var(--ec-blue-200); box-shadow:0 0 0 4px rgba(152,166,249,.35); }
.ec-ai-card .ec-ai-field__placeholder { align-self:stretch; text-align:left; color:var(--ec-heading);
  font-family:var(--ec-font); font-size:clamp(15px, 3.6vw, 16px); font-weight:600; line-height:22px; letter-spacing:-.1px; }

.ec-send { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center;
  background:var(--ec-blue-800); border-radius:6px; color:#fff; }
.ec-send svg { width:18px; height:18px; }

.ec-ai-card .ec-ai-chips { display:flex; flex-wrap:wrap; gap:clamp(8px, 2vw, 16px); }
.ec-ai-card .ec-chip,
.ec-ai-card .ec-chip:focus,
.ec-ai-card .ec-chip:hover {
  all:unset; cursor:pointer; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; min-height:40px;
  padding:9px 14px; border-radius:51px; background:#fff; border:1px solid var(--ec-blue-200);
  color:var(--ec-heading); font-family:var(--ec-font); font-size:14px; font-weight:600; line-height:20px;
  white-space:nowrap; transition:background .2s, transform .2s;
}
.ec-ai-card .ec-chip:hover { background:var(--ec-blue-0); transform:translateY(-1px); }
.ec-ai-card .ec-chip:focus-visible { outline:2px solid #fff; outline-offset:2px; }

/* spacing inside the Easycomm hero */
.hero .ec-ai-card { margin:clamp(28px, 6vw, 48px) auto 0; }

/* ---------------------------------------------------------
   POPUP – desktop / tablet: centred dialog
   --------------------------------------------------------- */
.ec-chat-overlay {
  position:fixed; inset:0; z-index:100005;   /* above the sticky banner + header */
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(3,10,42,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
  font-family:var(--ec-font);
}
.ec-chat-overlay.is-open { opacity:1; visibility:visible; }

.ec-chat {
  width:85%;
  height:min(720px, calc(100vh - 48px));
  height:min(720px, calc(100dvh - 48px));
  display:flex; flex-direction:column; overflow:hidden; min-height:0;
  background:#fff; border-radius:0; box-shadow:0 30px 80px rgba(0,0,0,.35);
  font-family:var(--ec-font); text-align:left;
  transform:translateY(24px) scale(.98); transition:transform .25s ease;
}
.ec-chat-overlay.is-open .ec-chat { transform:none; }

/* header */
.ec-chat .ec-chat__head { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 10px 8px 14px; background:var(--ec-bg-light); flex:0 0 auto; }
.ec-chat .ec-chat__actions { display:flex; align-items:center; gap:6px; }
.ec-chat .ec-close, .ec-chat .ec-close:hover, .ec-chat .ec-close:focus {
  all:unset; box-sizing:border-box; cursor:pointer; width:36px; height:36px; display:grid; place-items:center;
  color:var(--ec-heading); border-radius:8px; }
.ec-chat .ec-close:hover { background:rgba(14,32,135,.08); }
.ec-chat .ec-close:focus-visible { outline:2px solid var(--ec-blue-300); }
.ec-chat .ec-close svg { width:20px; height:20px; }
.ec-chat .ec-newchat, .ec-chat .ec-newchat:hover, .ec-chat .ec-newchat:focus {
  all:unset; box-sizing:border-box; cursor:pointer; display:inline-flex; align-items:center; min-height:32px;
  padding:4px 12px; border-radius:51px; border:1px solid var(--ec-blue-200);
  background:#fff; color:var(--ec-heading); font-family:var(--ec-font); font-size:13px; font-weight:600; line-height:18px; white-space:nowrap; }
.ec-chat .ec-newchat:hover { background:var(--ec-blue-0); }
.ec-chat .ec-newchat:focus-visible { outline:2px solid var(--ec-blue-300); outline-offset:2px; }

.ec-logo { display:inline-grid; place-items:center; border-radius:50%; background:var(--ec-blue-900); color:#fff; flex:0 0 auto; }
.ec-logo svg { width:72%; height:72%; }
.ec-logo { overflow:hidden; }
.ec-logo img { width:100%; height:100%; max-width:none; object-fit:cover; border-radius:50%; display:block; }
.ec-logo--22 { width:28px; height:28px; }
.ec-logo--28 { width:28px; height:28px; }

/* messages */
.ec-chat .ec-chat__body { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch; touch-action:pan-y;
  padding:28px 80px 24px; display:flex; flex-direction:column; gap:22px; }
.ec-chat .ec-msg { display:flex; gap:12px; align-items:flex-start; min-width:0; color:var(--ec-heading);
  font-family:var(--ec-font); font-size:16px; font-weight:500; line-height:24px; letter-spacing:.2px; }
.ec-chat .ec-msg--user { gap:8px; align-items:flex-start; line-height:26px; }
.ec-chat .ec-msg--user > span:last-child { min-width:0; padding-top:1px; overflow-wrap:anywhere; }
.ec-msg__user-ic { width:28px; height:28px; flex:0 0 28px; border-radius:7px;
  background:var(--ec-bg-light); display:grid; place-items:center; color:var(--ec-heading); }
.ec-msg__user-ic svg { width:18px; height:18px; }
.ec-chat .ec-msg__text { flex:1; min-width:0; display:flex; flex-direction:column; gap:14px; overflow-wrap:anywhere; }
.ec-chat .ec-msg__text p { margin:0; padding:0; font-size:inherit; line-height:inherit; }
.ec-chat .ec-msg__text a, .ec-chat .ec-msg__text a:hover { color:var(--ec-link); font-weight:700; text-decoration:underline; word-break:break-word; }
.ec-chat .ec-msg__text ul, .ec-chat .ec-msg__text ol { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.ec-chat .ec-msg__text li { margin:0; font-size:inherit; }
.ec-chat .ec-sources { display:flex; flex-direction:column; gap:6px; padding-top:12px; border-top:1px solid var(--ec-blue-100); }
.ec-chat .ec-sources > span { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--ec-muted); }
.ec-chat .ec-sources ul { list-style:none; padding:0; gap:4px; }
.ec-chat .ec-sources li { font-size:14px; line-height:20px; }

.ec-typing { display:inline-flex; gap:5px; padding-top:9px; }
.ec-typing span { width:7px; height:7px; border-radius:50%; background:var(--ec-blue-300); animation:ec-dot 1s infinite; }
.ec-typing span:nth-child(2){ animation-delay:.15s; } .ec-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes ec-dot { 0%,80%,100%{opacity:.3;transform:translateY(0)} 40%{opacity:1;transform:translateY(-3px)} }

/* footer + input */
.ec-chat .ec-chat__foot {
  position:relative; overflow:hidden; flex:0 0 auto; padding:28px 80px;
  background-color:var(--ec-blue-900);
  background-image:url("https://easycomm.io/wp-content/uploads/2026/10/Frame-2147238054.png");
  background-position:center; background-repeat:no-repeat; background-size:cover;
}

.ec-chat .ec-chat__form { position:relative; z-index:1; display:flex; align-items:center; gap:12px;
  margin:0; padding:8px 8px 8px 14px; background:#fff; border:1px solid var(--ec-blue-100); border-radius:10px; }
.ec-chat .ec-chat__form input.ec-chat__input,
.ec-chat .ec-chat__form input.ec-chat__input:focus {
  -webkit-appearance:none; appearance:none;
  flex:1 1 auto; min-width:0; width:auto; height:auto; min-height:32px; margin:0; padding:0;
  border:0; outline:0; box-shadow:none; border-radius:0; background:transparent;
  /* 16px minimum stops iPhone Safari zooming the page when the input is focused */
  font-family:var(--ec-font); font-size:16px; font-weight:600; line-height:22px; letter-spacing:-.1px; color:var(--ec-heading); }
.ec-chat .ec-chat__input::placeholder { color:var(--ec-heading); opacity:.75; }
.ec-chat .ec-chat__form button, .ec-chat .ec-chat__form button:hover, .ec-chat .ec-chat__form button:focus {
  all:unset; box-sizing:border-box; cursor:pointer; flex:0 0 auto; display:grid; place-items:center; }
.ec-chat .ec-chat__form .ec-send { width:36px; height:36px; flex-basis:36px; border-radius:8px; }
.ec-chat .ec-chat__form button:focus-visible .ec-send { outline:2px solid var(--ec-blue-300); outline-offset:2px; }
.ec-chat .ec-chat__form input.ec-chat__input:disabled { opacity:.55; }
.ec-chat .ec-chat__form button:disabled { cursor:wait; opacity:.55; }

.ec-sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* page behind the popup can't scroll (set by JS) */
html.ec-chat-locked, html.ec-chat-locked body { overflow:hidden !important; }
/* themes / Lenis sometimes set touch-action:none or pointer rules on the page — restore them inside the chat */
.ec-chat-overlay, .ec-chat-overlay * { touch-action:auto; }
.ec-chat .ec-chat__body { touch-action:pan-y !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; }

/* ---------------------------------------------------------
   TABLETS (601–1024px): a little roomier dialog
   --------------------------------------------------------- */
@media (min-width:601px) and (max-width:1024px) {
  .ec-chat { max-width:600px; height:min(760px, calc(100dvh - 64px)); }
  .ec-chat-overlay { padding:32px; }
}

/* ---------------------------------------------------------
   PHONES (≤600px): popup becomes a full-screen sheet
   --------------------------------------------------------- */
@media (max-width:600px) {
  .ec-chat-overlay { padding:0; align-items:stretch; background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none; }
  /* JS sets --ec-vh to the visible height so the keyboard never covers the input */
  .ec-chat {
    max-width:none; width:100%; border-radius:0; box-shadow:none;
    height:100vh; height:100dvh; height:var(--ec-vh, 100dvh);
    transform:translateY(16px);
  }
  .ec-chat .ec-chat__head { padding:calc(6px + env(safe-area-inset-top, 0px)) 8px 6px 12px; }
  .ec-chat .ec-chat__body { padding:20px 14px 18px; gap:18px; }
  .ec-chat .ec-msg { font-size:15px; line-height:23px; gap:10px; letter-spacing:.1px; }
  .ec-chat .ec-msg--user { line-height:24px; }
  .ec-logo--28, .ec-msg__user-ic { width:26px; height:26px; flex-basis:26px; }
  .ec-chat .ec-chat__foot { padding:12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .ec-chat .ec-chat__foot::before { opacity:.35; }
  .ec-chat .ec-chat__foot::after { display:none; }
  .ec-chat .ec-chat__form { padding:6px 6px 6px 12px; gap:8px; }

  .ec-ai-card .ec-chip, .ec-ai-card .ec-chip:hover, .ec-ai-card .ec-chip:focus { padding:8px 12px; font-size:13.5px; min-height:38px; }
}

/* small phones (≤380px, e.g. iPhone SE / older Androids) */
@media (max-width:380px) {
  .ec-ai-card .ec-ai-card__title { font-size:15px; }
  .ec-ai-card .ec-chip, .ec-ai-card .ec-chip:hover, .ec-ai-card .ec-chip:focus { padding:7px 10px; font-size:13px; min-height:36px; }
  .ec-chat .ec-newchat { padding:4px 10px; font-size:12px; }
  .ec-chat .ec-chat__body { padding:16px 12px; }
}

/* short screens (phones in landscape, small laptop windows) */
@media (max-height:520px) {
  .ec-chat-overlay { padding:0; }
  .ec-chat { width:100%; height:var(--ec-vh, 100dvh); max-width:none; border-radius:0; }
  .ec-chat .ec-chat__body { padding-top:14px; padding-bottom:14px; gap:14px; }
  .ec-chat .ec-chat__foot { padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .ec-chat .ec-chat__foot::before, .ec-chat .ec-chat__foot::after { display:none; }
  .ec-chat .ec-chat__head { padding-left:calc(12px + env(safe-area-inset-left, 0px)); padding-right:calc(8px + env(safe-area-inset-right, 0px)); }
}

@media (prefers-reduced-motion:reduce) {
  .ec-chat, .ec-chat-overlay, .ec-ai-card .ec-chip, .ec-typing span { transition:none; animation:none; }
}

/* ---------------------------------------------------------
   FLOATING "ASK AI AGENT" BUTTON (bottom left / right)
   --------------------------------------------------------- */
.ec-launcher {
  all:unset; box-sizing:border-box; cursor:pointer;
  position:fixed; z-index:100004;               /* just under the popup */
  bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  display:inline-flex; align-items:center; gap:10px;
  height:48px; padding:0 22px 0 18px; border-radius:999px;
  color:#fff; font-family:'Urbanist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size:16px; font-weight:500; line-height:1; letter-spacing:-.1px; white-space:nowrap;
  /* blue body fading to light cyan at the bottom edge, as in the design */
  background:linear-gradient(180deg, #4b94ff 0%, #2e82fe 10%, #2b88ff 46%, #4fa6ff 62%, #8fd2ff 80%, #c4f4ff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 0 12px rgba(110,190,255,.55),
    0 10px 24px -6px rgba(30,100,255,.55),
    0 2px 6px rgba(5,24,63,.18);
  -webkit-tap-highlight-color:transparent;
  transition:transform .2s ease, box-shadow .2s ease, opacity .25s ease, visibility .25s ease;
  animation:ec-launcher-in .45s cubic-bezier(.22,1,.36,1) .4s backwards;
}
.ec-launcher--left  { left:calc(24px + env(safe-area-inset-left, 0px)); }
.ec-launcher--right { right:calc(24px + env(safe-area-inset-right, 0px)); }
.ec-launcher svg { width:20px; height:20px; flex:0 0 20px; display:block; }
.ec-launcher__text { display:block; color:#fff; text-shadow:0 1px 1px rgba(0,40,140,.25); }

.ec-launcher:hover {
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 0 16px rgba(110,190,255,.7),
    0 14px 30px -6px rgba(30,100,255,.65),
    0 3px 8px rgba(5,24,63,.2);
}
.ec-launcher:active { transform:translateY(0) scale(.98); }
.ec-launcher:focus-visible { outline:2px solid #fff; outline-offset:3px; box-shadow:0 0 0 5px rgba(46,130,254,.6); }
.ec-launcher:hover svg { animation:ec-spark 1.2s ease-in-out infinite; }

/* hide while the chat is open */
html.ec-chat-locked .ec-launcher { opacity:0; visibility:hidden; transform:translateY(12px); pointer-events:none; }

@keyframes ec-launcher-in { from { opacity:0; transform:translateY(16px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes ec-spark { 0%,100% { transform:rotate(0) scale(1); } 50% { transform:rotate(18deg) scale(1.12); } }

/* phones: a little smaller, closer to the edge */
@media (max-width:600px) {
  .ec-launcher, .ec-launcher:hover, .ec-launcher:focus, .ec-launcher:active {
    height:44px; padding:0 18px 0 15px; gap:8px; font-size:15px;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .ec-launcher--left  { left:calc(16px + env(safe-area-inset-left, 0px)); }
  .ec-launcher--right { right:calc(16px + env(safe-area-inset-right, 0px)); }
  .ec-launcher svg { width:18px; height:18px; flex-basis:18px; }
}
/* very small phones: icon-only circle so it never covers content */
@media (max-width:340px) {
  .ec-launcher, .ec-launcher:hover, .ec-launcher:focus, .ec-launcher:active { width:48px; height:48px; padding:0; justify-content:center; }
  .ec-launcher__text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
}
@media print { .ec-launcher { display:none !important; } }
@media (prefers-reduced-motion:reduce) {
  .ec-launcher { animation:none; transition:none; }
  .ec-launcher:hover svg { animation:none; }
}