/*
 * Bela customer chat deliberately follows only the supplied Abela.Shop UX.
 * Rules are scoped to the widget so a shop theme cannot inherit this surface.
 */
.bela-chat-widget,
.bela-chat-widget *,
.bela-chat-widget *::before,
.bela-chat-widget *::after { box-sizing: border-box; }

.bela-chat-widget {
  --abela-red: #e30613;
  --abela-red-dark: #bd0010;
  --abela-red-soft: #fff0f2;
  --abela-red-soft-2: #fff7f8;
  --abela-ink: #1d1d1f;
  --abela-muted: #74747a;
  --abela-line: #e7e7e9;
  --abela-success: #24a36a;
  --abela-shadow-widget: 0 28px 80px rgba(23, 23, 28, .22), 0 8px 24px rgba(23, 23, 28, .10);
  position: fixed;
  z-index: 99999;
  inset: 0;
  color: var(--abela-ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  pointer-events: none;
}

.bela-chat-widget button,
.bela-chat-widget input,
.bela-chat-widget textarea { margin: 0; min-width: 0; min-height: 0; font: inherit; letter-spacing: normal; text-transform: none; appearance: none; -webkit-appearance: none; }
.bela-chat-widget button { border: 0; color: inherit; }
.bela-chat-widget img { display: block; max-width: 100%; }
.bela-chat-widget button:focus-visible,
.bela-chat-widget input:focus-visible,
.bela-chat-widget textarea:focus-visible { outline: 3px solid rgba(227, 6, 19, .25); outline-offset: 2px; }

/* Source launcher. It remains available on desktop as the open/close toggle. */
.bela-chat-widget .chat-launcher {
  position: fixed;
  z-index: 60;
  right: 28px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 7px 8px 7px 17px;
  border-radius: 999px;
  color: #fff;
  background: var(--abela-red);
  box-shadow: 0 15px 36px rgba(227, 6, 19, .32);
  cursor: pointer;
  pointer-events: auto;
  text-align: left;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.bela-chat-widget.is-left .chat-launcher { right: auto; left: 28px; }
.bela-chat-widget .chat-launcher:hover { transform: translateY(-2px); background: var(--abela-red-dark); box-shadow: 0 18px 44px rgba(227, 6, 19, .38); }
.bela-chat-widget .launcher-label { display: grid; min-width: 71px; gap: 1px; }
.bela-chat-widget .launcher-label strong { font-size: 12px; font-weight: 800; }
.bela-chat-widget .launcher-label small { color: rgba(255, 255, 255, .74); font-size: 9px; font-weight: 600; }
.bela-chat-widget .launcher-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--abela-red); background: #fff; }
.bela-chat-widget .launcher-icon svg { grid-area: 1 / 1; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity .15s ease, transform .15s ease; }
.bela-chat-widget .launcher-icon .icon-close { opacity: 0; transform: rotate(-45deg) scale(.65); }
.bela-chat-widget .chat-launcher[aria-expanded="true"] .icon-chat { opacity: 0; transform: rotate(45deg) scale(.65); }
.bela-chat-widget .chat-launcher[aria-expanded="true"] .icon-close { opacity: 1; transform: rotate(0) scale(1); }
.bela-chat-widget .launcher-pulse { position: absolute; top: 7px; right: 8px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: var(--abela-success); }

/* Source panel geometry. */
.bela-chat-widget .chat-widget {
  position: fixed;
  z-index: 55;
  right: 28px;
  bottom: 98px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(var(--bela-chat-width, 416px), calc(100vw - 32px));
  height: min(var(--bela-chat-max-height, 720px), calc(100dvh - 126px));
  overflow: hidden;
  border: 1px solid rgba(23, 23, 28, .08);
  border-top: 4px solid var(--abela-red);
  border-radius: 23px;
  background: #fff;
  box-shadow: var(--abela-shadow-widget);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(.97);
  transform-origin: bottom right;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.bela-chat-widget.is-left .chat-widget { right: auto; left: 28px; transform-origin: bottom left; }
.bela-chat-widget.is-open .chat-widget { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); }
.bela-chat-widget.is-minimized .chat-widget { height: 84px; grid-template-rows: 80px 0 0; }
.bela-chat-widget.is-minimized .chat-body,
.bela-chat-widget.is-minimized .composer-area { display: none; }

.bela-chat-widget [hidden] { display: none !important; }

.bela-chat-widget .chat-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 78px; padding: 13px 14px 13px 16px; background: #fff; }
.bela-chat-widget .assistant-identity { display: flex; align-items: center; min-width: 0; gap: 11px; }
.bela-chat-widget .avatar-wrap { position: relative; width: 47px; height: 47px; flex: 0 0 auto; }
.bela-chat-widget .bela-chat-head-avatar { display: grid; width: 47px; height: 47px; overflow: hidden; place-items: center; border-radius: 50%; color: var(--abela-red); background: var(--abela-red-soft); }
.bela-chat-widget .bela-chat-head-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bela-chat-widget .status-dot { position: absolute; right: -1px; bottom: 2px; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: var(--abela-success); }
.bela-chat-widget .bela-chat-head-copy { min-width: 0; }
.bela-chat-widget .assistant-title { display: flex; align-items: center; gap: 6px; }
.bela-chat-widget .assistant-title h2 { margin: 0; color: var(--abela-ink); font-size: 15px; font-weight: 800; letter-spacing: -.015em; }
.bela-chat-widget .verified-badge { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--abela-red); font-size: 10px; font-weight: 900; }
.bela-chat-widget .bela-chat__subtitle { overflow: hidden; margin: 3px 0 0; color: #808086; font-size: 10.5px; white-space: nowrap; text-overflow: ellipsis; }
.bela-chat-widget .chat-header-actions { display: flex; flex: 0 0 auto; gap: 3px; }
.bela-chat-widget .chat-header-actions button { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--abela-muted); background: transparent; cursor: pointer; }
.bela-chat-widget .chat-header-actions button:hover { color: var(--abela-red); background: var(--abela-red-soft); }
.bela-chat-widget .chat-header-actions svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.bela-chat-widget .chat-body { min-height: 0; padding: 14px 14px 18px; overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(180deg, #fafafa 0%, #f6f6f7 100%); scrollbar-width: thin; scrollbar-color: #d1d1d4 transparent; }
.bela-chat-widget .bela-chat-list { min-height: 100%; }
.bela-chat-widget .day-divider { display: flex; align-items: center; gap: 10px; margin: 2px 0 15px; color: #99999e; font-size: 8.5px; }
.bela-chat-widget .day-divider::before,
.bela-chat-widget .day-divider::after { height: 1px; flex: 1; background: #dfdfe2; content: ""; }

/* Assistant and customer bubbles use the exact reference hierarchy. */
.bela-chat-widget .message { display: flex; align-items: flex-end; gap: 7px; margin-top: 12px; }
.bela-chat-widget .message-avatar { width: 25px; height: 25px; display: grid; overflow: hidden; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--abela-red); background: var(--abela-red-soft); }
.bela-chat-widget .message-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bela-chat-widget .message-content { max-width: 82%; min-width: 0; }
.bela-chat-widget .message-content.wide { max-width: 91%; }
.bela-chat-widget .bubble { padding: 11px 12px; border: 1px solid #e1e1e4; border-radius: 15px 15px 15px 5px; color: #3a3a3f; background: #fff; box-shadow: 0 5px 16px rgba(30, 30, 35, .045); font-size: 12px; line-height: 1.48; }
.bela-chat-widget .bubble p { margin: 0; }
.bela-chat-widget .bela-chat-message-meta { display: block; margin-top: 5px; color: #aaaab0; font-size: 8px; font-style: normal; }
.bela-chat-widget .user-message { justify-content: flex-end; }
.bela-chat-widget .user-message .message-content { max-width: 82%; }
.bela-chat-widget .user-message .bubble { border: 0; border-radius: 15px 15px 5px 15px; color: #fff; background: linear-gradient(135deg, #ef1321, #d70010); box-shadow: 0 7px 18px rgba(227, 6, 19, .18); }
.bela-chat-widget .user-message .bela-chat-message-meta { text-align: right; }
.bela-chat-widget .system-message { justify-content: center; }
.bela-chat-widget .system-message .message-content { max-width: 92%; }
.bela-chat-widget .system-message .bubble { border-color: #f0cfd3; color: #84565d; background: #fff7f8; text-align: center; font-size: 10px; }
.bela-chat-widget .system-message .bela-chat-message-meta { display: none; }
.bela-chat-widget .is-operator .bubble { border-color: rgba(36, 163, 106, .25); }

.bela-chat-widget .quick-start { padding: 12px; }
.bela-chat-widget .quick-start-title { margin-bottom: 9px !important; color: #2d2d31; font-weight: 750; }
.bela-chat-widget .quick-actions { display: grid; gap: 7px; }
.bela-chat-widget .quick-actions button { min-height: 52px; display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid #e2e2e4; border-radius: 12px; color: var(--abela-ink); background: #fff; cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.bela-chat-widget .quick-actions button:hover { border-color: rgba(227, 6, 19, .30); background: var(--abela-red-soft-2); transform: translateX(2px); }
.bela-chat-widget .qa-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: var(--abela-red); background: var(--abela-red-soft); font-size: 11px; font-weight: 850; }
.bela-chat-widget .quick-actions strong,
.bela-chat-widget .quick-actions small { display: block; }
.bela-chat-widget .quick-actions strong { font-size: 10.5px; font-weight: 800; }
.bela-chat-widget .quick-actions small { margin-top: 2px; color: #8b8b91; font-size: 8.5px; }
.bela-chat-widget .quick-actions svg { width: 15px; height: 15px; fill: none; stroke: #b1b1b6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.bela-chat-widget .bela-chat-copy { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; padding: 4px 6px; border: 1px solid #e1e1e4; border-radius: 8px; color: #707076; background: #fff; font-size: 8px; cursor: pointer; }
.bela-chat-widget .bela-chat-copy:hover { color: var(--abela-red); border-color: rgba(227, 6, 19, .3); background: var(--abela-red-soft-2); }
.bela-chat-widget .bela-chat-copy svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.bela-chat-widget .bela-chat-file { display: inline-flex; align-items: center; max-width: 100%; margin-top: 7px; padding: 6px 8px; overflow: hidden; border-radius: 8px; color: var(--abela-red); background: var(--abela-red-soft); font-size: 9px; font-weight: 700; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }

/* Product and contact content reuse the reference card treatment. */
.bela-chat-widget .bela-chat-product-carousel { margin-top: 11px; }
.bela-chat-widget .bela-chat-product-heading { display: grid; gap: 2px; margin: 0 0 8px; }
.bela-chat-widget .bela-chat-product-heading strong { color: #2d2d31; font-size: 10.5px; }
.bela-chat-widget .bela-chat-product-heading span { color: #8b8b91; font-size: 8.5px; }
.bela-chat-widget .bela-chat-product-track { display: grid; gap: 9px; }
.bela-chat-widget .bela-chat-product-card { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 9px; overflow: hidden; border: 1px solid #e1e1e4; border-radius: 14px; background: #fff; }
.bela-chat-widget .bela-chat-product-media { position: relative; width: 74px; height: 74px; overflow: hidden; border-radius: 11px; background: var(--abela-red-soft-2); }
.bela-chat-widget .bela-chat-product-media img { width: 100%; height: 100%; object-fit: cover; }
.bela-chat-widget .bela-chat-product-badge { position: absolute; right: 4px; bottom: 4px; padding: 3px 5px; border-radius: 6px; color: #fff; background: var(--abela-red); font-size: 7px; font-weight: 800; }
.bela-chat-widget .bela-chat-product-body { min-width: 0; }
.bela-chat-widget .bela-chat-product-body h3 { margin: 1px 0 3px; color: #2d2d31; font-size: 10.8px; line-height: 1.25; }
.bela-chat-widget .bela-chat-product-body > p { display: -webkit-box; margin: 0; overflow: hidden; color: #8b8b91; font-size: 8.3px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.bela-chat-widget .bela-chat-product-facts { display: none; }
.bela-chat-widget .bela-chat-product-price { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.bela-chat-widget .bela-chat-product-price strong { color: #202024; font-size: 11px; font-weight: 850; }
.bela-chat-widget .bela-chat-product-price span { display: inline-flex; align-items: center; gap: 4px; color: #27865d; font-size: 8.3px; font-weight: 700; }
.bela-chat-widget .bela-chat-product-price span::before { width: 5px; height: 5px; border-radius: 50%; background: var(--abela-success); content: ""; }
.bela-chat-widget .bela-chat-product-action { width: 100%; min-height: 30px; margin-top: 8px; border-radius: 8px; color: #fff; background: var(--abela-red); font-size: 8.6px; font-weight: 800; cursor: pointer; }
.bela-chat-widget .bela-chat-product-action:hover { background: var(--abela-red-dark); }

.bela-chat-widget .bela-contact-card { display: grid; gap: 9px; margin-top: 11px; padding: 11px; border: 1px solid #e1e1e4; border-radius: 14px; background: #fff; box-shadow: 0 5px 16px rgba(30, 30, 35, .045); }
.bela-chat-widget .bela-chat-contact-heading { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: start; }
.bela-chat-widget .bela-chat-contact-heading > svg { width: 28px; height: 28px; padding: 6px; border-radius: 9px; color: var(--abela-red); background: var(--abela-red-soft); fill: none; stroke: currentColor; stroke-width: 1.8; }
.bela-chat-widget .bela-chat-contact-heading strong { display: block; color: #2d2d31; font-size: 10.5px; }
.bela-chat-widget .bela-chat-contact-heading p,
.bela-chat-widget .bela-chat-contact-note { margin: 2px 0 0; color: #8b8b91; font-size: 8.5px; line-height: 1.4; }
.bela-chat-widget .bela-chat-contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.bela-chat-widget .bela-chat-contact-fields input { width: 100%; min-height: 34px; padding: 7px 8px; border: 1px solid #dedee1; border-radius: 8px; color: var(--abela-ink); background: #fff; font-size: 9px; }
.bela-chat-widget .bela-chat-contact-submit { min-height: 34px; border-radius: 8px; color: #fff; background: var(--abela-red); font-size: 9px; font-weight: 800; cursor: pointer; }
.bela-chat-widget .bela-chat-contact-submit:hover { background: var(--abela-red-dark); }
.bela-chat-widget .bela-chat-contact-error { margin: 0; color: var(--abela-red); font-size: 8.5px; }

/* Source composer. Attachments remain absent unless the customer option enables them. */
.bela-chat-widget .composer-area { padding: 10px 12px 9px; border-top: 1px solid var(--abela-line); background: rgba(255, 255, 255, .98); }
.bela-chat-widget .suggestion-chips { display: flex; gap: 6px; padding: 0 1px 8px; overflow-x: auto; scrollbar-width: none; }
.bela-chat-widget .suggestion-chips::-webkit-scrollbar { display: none; }
.bela-chat-widget .suggestion-chips button { flex: 0 0 auto; padding: 7px 10px; border: 1px solid #e1e1e4; border-radius: 999px; color: #5e5e64; background: #fff; font-size: 8.8px; font-weight: 700; cursor: pointer; }
.bela-chat-widget .suggestion-chips button:hover { border-color: rgba(227, 6, 19, .3); color: var(--abela-red); background: var(--abela-red-soft-2); }
.bela-chat-widget .composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 5px; border: 1px solid #d8d8dc; border-radius: 16px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.bela-chat-widget .composer.has-attachments { grid-template-columns: auto minmax(0, 1fr) auto; }
.bela-chat-widget .composer:focus-within { border-color: rgba(227, 6, 19, .55); box-shadow: 0 0 0 4px rgba(227, 6, 19, .07); }
.bela-chat-widget .composer input.bela-chat__input { display: block; width: 100%; height: 38px; min-height: 38px; padding: 0 6px; overflow: hidden; border: 0; outline: 0; color: var(--abela-ink); background: transparent; font-size: 12px; line-height: 38px; white-space: nowrap; text-overflow: ellipsis; }
.bela-chat-widget .composer input.bela-chat__input::placeholder { color: #aaaab0; }
.bela-chat-widget .attachment-button,
.bela-chat-widget .send-button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; cursor: pointer; }
.bela-chat-widget .attachment-button { color: #737379; background: transparent; }
.bela-chat-widget .send-button { color: #fff; background: var(--abela-red); box-shadow: 0 6px 14px rgba(227, 6, 19, .22); transition: opacity .15s ease, transform .15s ease, background .15s ease; }
.bela-chat-widget .send-button:hover:not(:disabled) { background: var(--abela-red-dark); transform: translateY(-1px); }
.bela-chat-widget .send-button:disabled { box-shadow: none; cursor: default; opacity: .3; }
.bela-chat-widget .composer svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bela-chat-widget .bela-chat-attachment-label { max-width: 100%; margin: 0 0 8px; padding: 6px 9px; overflow: hidden; border: 1px solid #e1e1e4; border-radius: 9px; color: #5e5e64; background: #fff; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.bela-chat-widget .bela-chat-note { margin: 7px 3px 0; color: #a0a0a5; text-align: center; font-size: 7.8px; line-height: 1.35; }
.bela-chat-widget .bela-chat-gdpr { margin: 0 0 8px; padding: 9px; border-radius: 10px; color: #6e5b5d; background: var(--abela-red-soft-2); font-size: 8.8px; line-height: 1.42; }
.bela-chat-widget .bela-chat-gdpr p { margin: 0 0 6px; }
.bela-chat-widget .bela-chat-gdpr button { min-height: 28px; padding: 0 9px; border-radius: 8px; color: #fff; background: var(--abela-red); font-size: 8.5px; font-weight: 800; cursor: pointer; }

@media (max-width: 720px) {
  .bela-chat-widget .chat-launcher { right: 14px; bottom: 14px; width: 58px; height: 58px; min-height: 0; justify-content: center; padding: 5px; border-radius: 50%; }
  .bela-chat-widget.is-left .chat-launcher { right: 14px; left: auto; }
  .bela-chat-widget .launcher-label { display: none; }
  .bela-chat-widget .launcher-icon { width: 46px; height: 46px; }
  .bela-chat-widget.is-open .chat-launcher { opacity: 0; visibility: hidden; pointer-events: none; }
  .bela-chat-widget .chat-widget { inset: 0; width: 100vw; height: 100dvh; height: 100svh; border: 0; border-top: 3px solid var(--abela-red); border-radius: 0; box-shadow: none; transform: translateY(20px); transform-origin: center bottom; }
  .bela-chat-widget.is-left .chat-widget { right: 0; left: 0; transform-origin: center bottom; }
  .bela-chat-widget.is-open .chat-widget { transform: translateY(0); }
  .bela-chat-widget.is-minimized .chat-widget { inset: 0; height: 100dvh; border-radius: 0; }
  .bela-chat-widget .bela-chat-minimize { display: none; }
  .bela-chat-widget .chat-header { min-height: 68px; padding: max(13px, env(safe-area-inset-top)) 14px 13px 16px; }
  .bela-chat-widget .chat-body { padding-bottom: 18px; }
  .bela-chat-widget .composer-area { padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
  .bela-chat-widget .chat-body { padding-inline: 11px; }
  .bela-chat-widget .message-content.wide { max-width: 93%; }
  .bela-chat-widget .quick-actions button { min-height: 50px; }
  .bela-chat-widget .bela-chat-product-card { grid-template-columns: 66px minmax(0, 1fr); }
  .bela-chat-widget .bela-chat-product-media { width: 66px; height: 66px; }
  .bela-chat-widget .bela-chat-contact-fields { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bela-chat-widget,
  .bela-chat-widget *,
  .bela-chat-widget *::before,
  .bela-chat-widget *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}