/* Ekol Glass AI assistant widget. Builds on the .wa-support position/launcher rules in the public
   bundle; colours follow the brand tokens in ekol-modern.css (fallbacks for pages without them). */
.ai-assistant {
  --ai-blue: var(--ekol-blue, #087fdd);
  --ai-blue-dark: var(--ekol-blue-dark, #045a9e);
  --ai-cyan: var(--ekol-cyan, #44c8ff);
  --ai-ink: var(--ekol-ink, #0c1720);
  --ai-graphite: var(--ekol-graphite, #2c3338);
  --ai-soft: var(--ekol-soft, #f4f7f9);
  --ai-radius: var(--ekol-radius, 8px);
  --ai-line: #d9e4ec;
}
.ai-assistant .ai-launcher { background: linear-gradient(135deg, var(--ai-blue), var(--ai-blue-dark)); }
.ai-assistant .ai-launcher:focus-visible,
.ai-assistant button:focus-visible,
.ai-assistant a:focus-visible,
.ai-assistant .ai-log:focus-visible { outline: 3px solid var(--ai-cyan); outline-offset: 2px; }
.ai-assistant .wa-support-pulse { background: var(--ai-cyan); box-shadow: 0 0 0 5px rgba(68, 200, 255, .25); }
.ai-assistant.is-open .wa-support-pulse { display: none; }

.ai-assistant .ai-panel {
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 28px));
  max-height: min(640px, calc(100vh - 120px));
  border: 1px solid var(--ai-line);
  border-radius: calc(var(--ai-radius) * 2);
  background: #fff;
  box-shadow: 0 28px 80px rgba(8, 31, 52, .28);
  color: var(--ai-graphite);
}
.ai-assistant .ai-panel[hidden] { display: none; }
.ai-assistant .ai-panel > * { flex-shrink: 0; }
.ai-assistant .ai-panel > .ai-log { flex: 1 1 auto; }
.ai-assistant .ai-head {
  grid-template-columns: 42px minmax(0, 1fr) 34px 34px;
  gap: 8px;
  padding: 13px 12px 13px 14px;
  background: linear-gradient(135deg, var(--ai-ink), var(--ai-blue-dark) 62%, var(--ai-blue));
}
.ai-assistant .ai-head .wa-support-avatar { width: 42px; height: 42px; background: rgba(255, 255, 255, .12); }
.ai-assistant .ai-head > div > span i { background: var(--ai-cyan); }
.ai-assistant .ai-head .ai-icon-button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: #fff;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  font-size: 15px;
}
.ai-assistant .ai-head .ai-icon-button:hover { background: rgba(255, 255, 255, .22); }

.ai-assistant .ai-notice {
  margin: 0;
  padding: 7px 14px;
  color: #45535d;
  border-bottom: 1px solid var(--ai-line);
  background: var(--ai-soft);
  font-size: 11px;
  line-height: 1.45;
}
.ai-assistant .ai-log {
  flex: 1 1 auto;
  min-height: 96px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  background: var(--ai-soft);
}
.ai-assistant .ai-msg { max-width: 88%; margin: 0 0 12px; }
.ai-assistant .ai-msg-name { display: block; margin: 0 2px 3px; color: #64727c; font-size: 10.5px; font-weight: 700; }
.ai-assistant .ai-msg-body {
  padding: 10px 12px;
  border: 1px solid var(--ai-line);
  border-radius: 4px var(--ai-radius) var(--ai-radius) var(--ai-radius);
  background: #fff;
  font-size: 13.5px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.ai-assistant .ai-msg-body p { margin: 0 0 .55em; }
.ai-assistant .ai-msg-body p:last-child,
.ai-assistant .ai-msg-body ul:last-child,
.ai-assistant .ai-msg-body ol:last-child { margin-bottom: 0; }
.ai-assistant .ai-msg-body ul,
.ai-assistant .ai-msg-body ol { margin: 0 0 .55em; padding-inline-start: 1.2em; }
.ai-assistant .ai-msg-body li { margin: .15em 0; }
.ai-assistant .ai-msg-body a { color: var(--ai-blue-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ai-assistant .ai-msg-visitor { margin-inline-start: auto; }
.ai-assistant .ai-msg-visitor .ai-msg-name { text-align: end; }
.ai-assistant .ai-msg-visitor .ai-msg-body {
  color: #fff;
  border-color: var(--ai-blue);
  border-radius: var(--ai-radius) 4px var(--ai-radius) var(--ai-radius);
  background: var(--ai-blue);
}
.ai-assistant .ai-msg-fallback .ai-msg-body { border-color: #f0c676; background: #fffaf0; }
.ai-assistant .ai-msg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.ai-assistant .ai-msg-actions a {
  padding: 5px 10px;
  color: var(--ai-blue-dark);
  border: 1px solid #b9d3e5;
  border-radius: 999px;
  background: #eef7ff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.ai-assistant .ai-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 8px;
  color: #64727c;
  background: var(--ai-soft);
  font-size: 11.5px;
}
.ai-assistant .ai-typing[hidden] { display: none; }
.ai-assistant .ai-dots { display: inline-flex; gap: 3px; }
.ai-assistant .ai-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ai-blue); animation: ai-dot 1.1s ease-in-out infinite; }
.ai-assistant .ai-dots i:nth-child(2) { animation-delay: .15s; }
.ai-assistant .ai-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.ai-assistant .ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--ai-line);
  background: #fff;
}
.ai-assistant .ai-chips[hidden] { display: none; }
.ai-assistant .ai-chip {
  max-width: 100%;
  padding: 6px 10px;
  color: var(--ai-blue-dark);
  border: 1px solid #b9d3e5;
  border-radius: 999px;
  background: #eef7ff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: start;
}
.ai-assistant .ai-chip:hover { border-color: var(--ai-blue); background: #e0f1fc; }

.ai-assistant .ai-compose { border-top: 1px solid var(--ai-line); }
.ai-assistant .ai-compose textarea { overflow-y: hidden; font-size: 14px; }
.ai-assistant .ai-compose textarea:focus { border-color: var(--ai-blue); box-shadow: 0 0 0 3px rgba(8, 127, 221, .14); }
.ai-assistant .ai-compose button { background: var(--ai-blue); }
.ai-assistant .ai-compose button:hover { background: var(--ai-blue-dark); }
.ai-assistant .ai-compose button[disabled] { opacity: .55; }
.ai-assistant .ai-status { margin: 0; padding: 0 14px; color: #a2410c; background: #fff; font-size: 11.5px; }
.ai-assistant .ai-status:empty { display: none; }
.ai-assistant .ai-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 8px 12px 12px;
  background: #fff;
}
.ai-assistant .ai-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 8px;
  color: var(--ai-ink);
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-radius);
  background: var(--ai-soft);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}
.ai-assistant .ai-actions a:first-child { color: #fff; border-color: var(--ai-blue); background: var(--ai-blue); }
.ai-assistant .ai-actions a:hover { border-color: var(--ai-blue); }
.ai-assistant .ai-actions span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

[dir="rtl"] .ai-assistant { right: auto; left: 24px; }
[dir="rtl"] .ai-assistant .ai-panel { transform-origin: bottom left; }
[dir="rtl"] .ai-assistant .ai-msg-body { border-radius: var(--ai-radius) 4px var(--ai-radius) var(--ai-radius); }
[dir="rtl"] .ai-assistant .ai-msg-visitor .ai-msg-body { border-radius: 4px var(--ai-radius) var(--ai-radius) var(--ai-radius); }

@media (max-width: 767px) {
  .ai-assistant .ai-panel { max-height: calc(100vh - 170px); }
  .ai-assistant .ai-chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .ai-assistant .ai-chip { flex: 0 0 auto; white-space: nowrap; }
  .ai-assistant .ai-notice { padding-block: 5px; font-size: 10.5px; }
  [dir="rtl"] .ai-assistant { right: auto; left: 12px; }
}
@supports (height: 100dvh) {
  .ai-assistant .ai-panel { max-height: min(640px, calc(100dvh - 120px)); }
  @media (max-width: 767px) { .ai-assistant .ai-panel { max-height: calc(100dvh - 170px); } }
}
@media (max-width: 380px) {
  .ai-assistant .ai-panel { width: calc(100vw - 24px); }
  .ai-assistant .ai-actions { gap: 4px; padding-inline: 8px; }
  .ai-assistant .ai-actions a { gap: 4px; padding-inline: 4px; font-size: 11.5px; }
  .ai-assistant .ai-actions a i { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-assistant .ai-panel { animation: none; }
  .ai-assistant .ai-launcher { transition: none; }
  .ai-assistant .ai-launcher:hover { transform: none; }
  .ai-assistant .ai-dots i { animation: none; opacity: .7; }
}

/* Cookie consent coordination: until a choice is made (body.consent-pending) the mobile consent
   sheet owns the bottom of the screen, so the floating assistant button is hidden there. On
   desktop the consent card sits bottom-left (bottom-right in RTL), opposite the assistant. */
@media (max-width: 767px) {
  body.consent-pending .wa-support { display: none; }
}
.ai-assistant .ai-notice a { color: var(--ai-blue-dark); font-weight: 700; text-decoration: underline; }
.ai-assistant .ai-hint { margin: -4px 0 12px; padding: 6px 10px; color: #704200; border-radius: var(--ai-radius); background: #fff0d1; font-size: 11.5px; line-height: 1.4; }
.ai-assistant [hidden] { display: none !important; }
.ai-contact-only .ai-panel { width: min(340px, calc(100vw - 28px)); }
.ai-contact-only .ai-head-contact { grid-template-columns: 42px minmax(0, 1fr) 34px; }
.ai-assistant .ai-contact-lead { margin: 0; padding: 14px 16px 6px; color: var(--ai-graphite); font-size: 13.5px; line-height: 1.55; }
.ai-assistant .ai-actions-stacked { grid-template-columns: 1fr; padding: 10px 16px 16px; }
.ai-assistant .ai-actions-stacked a { justify-content: flex-start; min-height: 44px; padding-inline: 14px; font-size: 13.5px; }
@media (max-width: 380px) { .ai-assistant .ai-actions-stacked a i { display: inline-block; } }
.ai-assistant .ai-actions a[data-track="whatsapp"] { color: #0b6b3a; border-color: #b9e3c9; background: #eefaf2; }
.ai-assistant .ai-actions-stacked a[data-track="whatsapp"] { color: #0b6b3a; }