/**
 * Delia chat widget — functional surface on Glando tokens.
 * Tokens: assets/css/glando-tokens.css (enqueued before this file).
 * Appearance admin colors override only when a valid hex is saved (empty = these defaults).
 * Custom CSS may set --chatbot-* (see comments below). No marketing decor.
 *
 * Positioning / size (Custom CSS :root or .delia-open-cbot):
 *   --chatbot-image-size              launcher diameter (default 80px)
 *   --chatbot-image-position-right    launcher right (default 3%)
 *   --chatbot-image-position-bottom   launcher bottom (default 5%)
 *   --chatbot-width                   panel width (default 450px)
 *   --chatbot-height                  panel height (default 60vh)
 *   --chatbot-position-right          panel right (default: same as launcher)
 *   --chatbot-position-bottom         panel bottom offset base (default: same as launcher bottom)
 *   --chatbot-launcher-gap            gap between launcher and panel (default 12px)
 *   --chatbot-primary-color           optional alias → send button bg (after Appearance)
 *
 * Color order (D-WIDGET-LAYER-COLOR):
 *   1. --delia-accent = saved main color, else saved send-button color, else ink #222222.
 *   2. Focus, icons, header MI mark, links, send button and card accents read --delia-accent.
 *   3. A saved specific field wins on that surface only: send button, send icon, link color,
 *      title, status, bubble colors, quick buttons.
 *   4. Hover is color-mix(88% accent, black) where supported, else the same color.
 *   5. Focus ring is --delia-accent-ring (PHP, at least 3:1 on white).
 *
 * Layer: the host is its own stacking context at 2147483000 (below the 2147483647
 * ceiling, above theme carts and sticky headers). While a recognized side cart
 * is open, the host drops below that drawer (the :has() rule). Launcher and
 * panel are siblings.
 * Mobile fullscreen stays at 768px: that is the existing chrome breakpoint. 600px
 * would leave 601–768 under a sticky header again.
 */

.delia-open-cbot{
  position: fixed;
  isolation: isolate;
  z-index: 2147483000;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
  --delia-accent: #222222;
  --delia-accent-hover: var(--delia-accent);
  --delia-accent-ring: var(--delia-accent);
  --delia-launcher-size: var(--chatbot-image-size, 80px);
  --delia-launcher-right: var(--chatbot-image-position-right, 3%);
  --delia-launcher-left: auto;
  --delia-launcher-bottom: var(--chatbot-image-position-bottom, 5%);
  --delia-launcher-gap: var(--chatbot-launcher-gap, 12px);
  --delia-panel-width: var(--chatbot-width, 450px);
  --delia-panel-height: var(--chatbot-height, 60vh);
  --delia-panel-right: var(--chatbot-position-right, var(--delia-launcher-right));
  --delia-panel-left: var(--delia-launcher-left);
  --delia-panel-bottom-base: var(--chatbot-position-bottom, var(--delia-launcher-bottom));
  --delia-vv-offset-bottom: 0px;
  /* Appearance inline overrides these. Fallbacks are tokens, not a brand accent. */
  --delia-avatar-size: 20px;
  --delia-user-msg-bg: var(--glando-neutral-100);
  --delia-bot-msg-bg: var(--glando-neutral-100);
  --delia-user-msg-fg: var(--glando-text-on-light);
  --delia-bot-msg-fg: var(--glando-text-on-light);
}

/*
 * #850 P2-2. Open side cart paints above the chat. Closed cart keeps 2147483000.
 * :has() is on body because the drawer is a body child, not inside this root.
 * No JS watcher. Chat open/conversation state is unchanged.
 * D-VERIFY 2026-10-12:
 * WooCommerce Mini-Cart 11.2.1 MiniCart.php render_mini_cart_overlay +
 * assets/client/blocks/woocommerce/mini-cart.js drawerOverlayClass: open sets
 * wc-block-components-drawer__screen-overlay--with-slide-in. Overlay z-index 9999
 * (assets/client/blocks/mini-cart-contents.css). Same cart as deliaShopCartOpener().
 * Elementor Menu Cart open class elementor-menu-cart--shown on
 * .elementor-menu-cart__container (https://github.com/elementor/elementor/issues/11731).
 * Same toggle as deliaShopCartOpener() (#elementor-menu-cart__toggle_button).
 */
body:has(.wc-block-components-drawer__screen-overlay--with-slide-in) .delia-open-cbot,
body:has(.elementor-menu-cart--shown) .delia-open-cbot{
  z-index: 9998;
}

/*
 * #850 P2-5. XootiX side cart. Class on body, so no :has().
 * D-VERIFY 2026-10-12, free Side Cart WooCommerce 2.8.2
 * (wordpress.org plugin side-cart-woocommerce):
 * assets/js/xoo-wsc-main.js toggle('show') adds xoo-wsc-cart-active
 * (container default "cart") on the modal, body, and html.
 * assets/css/xoo-wsc-style.css: .xoo-wsc-container and .xoo-wsc-slider
 * z-index 999999, .xoo-wsc-opac 999996. Free 2.8.2 has no .xoo-wsc-drawer rule.
 * Premium 4.9.0 (reviewer, same date, rimoczi-art.hu public asset) also sets
 * .xoo-wsc-drawer to 999999 and uses the same open class.
 * Free addedToCart calls openCart when autoOpenCart is yes (flyToCart is "no").
 * Premium 4.9.0 runs flyToCart, then the same openCart on an empty button.
 */
body.xoo-wsc-cart-active .delia-open-cbot{
  z-index: 9998;
}

@supports (color: color-mix(in srgb, black, white)){
  .delia-open-cbot{
    --delia-accent-hover: color-mix(in srgb, var(--delia-accent) 88%, black);
    --delia-submit-hover: color-mix(in srgb, var(--delia-submit, var(--delia-accent)) 88%, black);
  }
}

.delia-open-cbot .custom-chatbot__image{
  position: fixed;
  right: var(--delia-launcher-right);
  left: var(--delia-launcher-left);
  bottom: var(--delia-launcher-bottom);
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  line-height: 0;
  min-width: 44px;
  min-height: 44px;
  appearance: none;
  -webkit-appearance: none;
}

.delia-open-cbot .delia-fab-mi{
  position: absolute;
  top: -6px;
  right: -6px;
  font: 600 calc(var(--delia-launcher-size) * 0.18)/1 var(--glando-font-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--glando-neutral-900);
  color: var(--glando-text);
  border-radius: var(--glando-radius-pill);
  padding: 3px 5px;
  line-height: 1;
}

.delia-open-cbot .custom-chatbot__image img{
  display: block;
  width: var(--delia-launcher-size);
  height: var(--delia-launcher-size);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--glando-shadow-lg);
}

.delia-open-cbot .delia-launcher-fallback{
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--delia-launcher-size);
  height: var(--delia-launcher-size);
  border-radius: 50%;
  background: var(--delia-accent);
  color: var(--glando-text);
  /* Body font, not the Pacifico display token: the visitor path deliberately
     loads no webfont, so --glando-font-display would resolve to the system
     cursive. Per the surface matrix the chat is functional and carries no
     Glando wordmark, so this is a label, not a logo. */
  font-family: var(--glando-font-body);
  font-size: calc(var(--delia-launcher-size) * 0.22);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: var(--glando-shadow-lg);
}

.delia-open-cbot .custom-chatbot{
  position: fixed;
  right: var(--delia-panel-right);
  left: var(--delia-panel-left);
  bottom: calc(var(--delia-panel-bottom-base) + var(--delia-launcher-size) + var(--delia-launcher-gap));
  width: var(--delia-panel-width);
  height: var(--delia-panel-height);
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - (var(--delia-panel-bottom-base) + var(--delia-launcher-size) + var(--delia-launcher-gap) + 20px));
  z-index: 2;
  pointer-events: auto;
  display: none;
  overflow: hidden;
}

.delia-open-cbot .custom-chatbot.show{ display: block; }

.delia-open-cbot .chat{
  background: var(--glando-bg-light);
  border: 1px solid var(--glando-border-light);
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--glando-radius-lg);
  overflow: hidden;
  box-shadow: var(--glando-shadow-lg);
  position: relative;
  font-family: var(--chatbot-font-family, inherit);
}

/* Toolkit §08 chrome: title left · status + close right · no magenta top bar */
.delia-open-cbot .chat__header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--glando-space-2);
  padding: 12px 16px 12px 12px;
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
  padding-left: calc(12px + env(safe-area-inset-left, 0px));
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  background: var(--glando-bg-light);
  border-bottom: 1px solid var(--glando-border-light);
  position: relative;
  z-index: 5;
  overflow: visible;
  flex-shrink: 0;
}

.delia-open-cbot .chat__brand{
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  flex: 1;
}

.delia-open-cbot .chat__title-row{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.delia-open-cbot .chat__title{
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--glando-text-on-light);
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.delia-open-cbot .chat__ai-badge{
  flex-shrink: 0;
  font: 600 0.625rem/1 var(--glando-font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--delia-accent);
  border: 1px solid var(--glando-border-light);
  background: var(--glando-bg-light);
  border-radius: var(--glando-radius-pill);
  padding: 3px 6px;
}

.delia-open-cbot .chat__ai-badge[hidden]{ display: none !important; }

.delia-open-cbot .delia-ack{
  display: flex;
  align-items: center;
  gap: var(--glando-space-2);
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 var(--glando-space-1) 0 var(--glando-space-3);
  background: var(--glando-neutral-100);
  color: var(--glando-neutral-900);
  border-bottom: 1px solid var(--glando-neutral-300);
  border-left: var(--glando-space-1) solid var(--glando-neutral-600);
  box-shadow: var(--glando-shadow-sm);
}

.delia-open-cbot .delia-ack[hidden]{ display: none !important; }

.delia-open-cbot .delia-ack__ico{
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--glando-neutral-700);
}

.delia-open-cbot .delia-ack__ico svg{ width: 18px; height: 18px; display: block; }

.delia-open-cbot .delia-ack__text{
  margin: 0;
  flex: 1;
  min-width: 0;
  font: 600 0.75rem/1.2 var(--glando-font-body);
  color: var(--glando-neutral-900);
}

.delia-open-cbot .delia-ack__btn{
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--glando-neutral-700);
}

.delia-open-cbot .delia-ack__dot{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--glando-neutral-300);
  background: var(--glando-bg-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.delia-open-cbot .delia-ack__dot svg{ width: 12px; height: 12px; }

.delia-open-cbot .delia-how-modal__list{
  margin: 0 0 var(--glando-space-3);
  padding-left: 1.2em;
  font: var(--glando-text-small);
  color: var(--glando-text-on-light);
}

.delia-open-cbot .delia-how-modal__list li{ margin: 0 0 var(--glando-space-2); }

.delia-open-cbot .chat__header-actions{
  display: inline-flex;
  align-items: center;
  gap: var(--glando-space-1);
  flex-shrink: 0;
}

.delia-open-cbot .chat__expand-btn{
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--glando-radius-md);
  background: transparent;
  color: var(--glando-neutral-700);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.delia-open-cbot .chat__expand-btn svg[hidden]{
  display: none !important;
}

.delia-open-cbot .chat__expand-btn:hover,
.delia-open-cbot .chat__expand-btn[aria-pressed="true"]{
  background: var(--glando-neutral-300);
  color: var(--delia-accent);
}

.delia-open-cbot .chat__expand-btn:focus-visible{
  outline: 2px solid var(--delia-accent);
  outline-offset: 2px;
}

@media (min-width: 769px){
  .delia-open-cbot .chat__expand-btn{ display: inline-flex; }

  .delia-open-cbot .custom-chatbot.show.delia-panel--sidebar{
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(400px, 100vw);
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .delia-open-cbot .custom-chatbot.show.delia-panel--sidebar .chat{
    border-radius: 0;
    height: 100%;
  }

  html.delia-chat-open.delia-chat-sidebar .delia-open-cbot .custom-chatbot__image{
    display: none;
  }
}

/* SoT .dw__menu — relative anchor so dropdown top:100% is the button, not .chat */
.delia-open-cbot .chat__menu{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.delia-open-cbot .chat__menu-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--glando-radius-md);
  background: transparent;
  color: var(--glando-neutral-700);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.delia-open-cbot .chat__menu-btn:hover,
.delia-open-cbot .chat__menu-btn[aria-expanded="true"]{
  background: var(--glando-neutral-300);
  color: var(--delia-accent);
}

.delia-open-cbot .chat__dropdown{
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 228px;
  z-index: 20;
  background: var(--glando-bg-light);
  border: 1px solid var(--glando-border-light);
  border-radius: var(--glando-radius-md);
  box-shadow: var(--glando-shadow-lg);
  padding: 4px;
}

.delia-open-cbot .chat__dropdown[hidden]{ display: none !important; }

.delia-open-cbot .chat__dropdown-item{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: var(--glando-radius-sm);
  font-size: 0.8125rem;
  color: var(--glando-text-on-light);
  cursor: pointer;
  text-align: left;
}

.delia-open-cbot .chat__dropdown-item:hover{
  background: var(--glando-neutral-100);
  color: var(--delia-accent);
}

.delia-open-cbot .chat__dropdown-item.is-sent{ color: var(--glando-success); }

.delia-open-cbot .chat__dropdown-item svg{ flex-shrink: 0; }

.delia-open-cbot .chat__close-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--glando-radius-md);
  background: transparent;
  color: var(--glando-neutral-700);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background var(--glando-motion-fast) var(--glando-ease-out);
}

.delia-open-cbot .chat__close-icon:hover{
  background: var(--glando-neutral-300);
  color: var(--glando-dark);
}

.delia-open-cbot .popup{
  display: none;
  position: absolute;
  left: var(--glando-space-3);
  right: var(--glando-space-3);
  top: 56px;
  z-index: 2;
  padding: var(--glando-space-2) var(--glando-space-3);
  border-radius: var(--glando-radius-md);
  background: var(--glando-notify-bg);
  border: 1px solid var(--glando-notify);
  color: var(--glando-text-on-light);
  font-size: 13px;
  box-shadow: var(--glando-shadow-sm);
}

.delia-open-cbot .popup.is-visible{ display: block; }

.delia-open-cbot .chat__status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--glando-text-on-light);
}

.delia-open-cbot .chat__status span,
.delia-open-cbot .chat__status-dot{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--glando-status-error);
  flex-shrink: 0;
}

.delia-open-cbot .chat__status--online .chat__status-dot,
.delia-open-cbot .chat__status--online span{
  background: var(--glando-success);
}

.delia-open-cbot .chat__status--offline .chat__status-dot,
.delia-open-cbot .chat__status--offline span{
  background: var(--glando-status-error);
}

.delia-open-cbot .chat__status--closed .chat__status-dot,
.delia-open-cbot .chat__status--closed span{
  background: var(--glando-neutral-500);
}

.delia-open-cbot .chat__thread{
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.delia-open-cbot .chat__messages{
  flex: 1;
  overflow: auto;
  padding: var(--glando-space-3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.delia-open-cbot .chat__jump-latest{
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 4;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--glando-border-light);
  border-radius: 50%;
  background: var(--glando-bg-light);
  color: var(--delia-accent);
  box-shadow: var(--glando-shadow-lg);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.delia-open-cbot .chat__jump-latest.is-visible{
  display: inline-flex;
}

.delia-open-cbot .chat__jump-latest:hover{
  background: var(--glando-neutral-100);
  color: var(--delia-accent);
}

.delia-open-cbot .chat__jump-latest:focus-visible{
  outline: 2px solid var(--delia-accent);
  outline-offset: 2px;
}

.delia-open-cbot .delia-stream-retry{
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 4;
  height: 36px;
  width: auto;
  margin: 0;
  padding: 0 12px 0 14px;
  border: 1px solid var(--glando-border-light);
  border-radius: var(--glando-radius-pill);
  background: var(--glando-bg-light);
  color: var(--delia-accent);
  box-shadow: var(--glando-shadow-lg);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font: 600 0.75rem/1 var(--glando-font-body);
  cursor: pointer;
}

.delia-open-cbot .delia-stream-retry svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Rows are full pane width so max-width: 75% on the stack is 75% of the chat,
   not 75% of a content-sized flex item (that circular % → min-content wrap). */
.delia-open-cbot .chat__messages__ai,
.delia-open-cbot .chat__messages__user{
  width: 100%;
  box-sizing: border-box;
}

.delia-open-cbot .chat__messages__ai > div,
.delia-open-cbot .chat__messages__user > div{
  display: flex;
  gap: var(--glando-space-2);
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.delia-open-cbot .delia-msg-stack{
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
  width: max-content;
  max-width: 75%;
  min-width: 0;
  box-sizing: border-box;
}

.delia-open-cbot .chat__messages__user .delia-msg-stack{
  align-items: flex-end;
}

/* W08 service-card (SoT .dw__card) — beside the AI sentence */
.delia-open-cbot .delia-service-card{
  width: min(100%, 320px);
  border: 1px solid var(--glando-border-light);
  border-radius: var(--glando-radius-md);
  background: var(--glando-bg-light);
  overflow: hidden;
  margin-top: 2px;
}
.delia-open-cbot .delia-service-card__body{
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.delia-open-cbot .delia-service-card__eyebrow{
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--delia-accent);
}
.delia-open-cbot .delia-service-card__title{
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--glando-neutral-900);
}
.delia-open-cbot .delia-service-card__text{
  margin: 0;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--glando-neutral-700);
  max-width: none;
  width: auto;
}
.delia-open-cbot .delia-service-card__meta{
  font-size: 0.6875rem;
  color: var(--glando-neutral-600);
  white-space: pre-line; /* Forrás + frissítve: two lines (#197) */
}
.delia-open-cbot .delia-service-card__link{
  display: inline-flex;
  margin-top: 4px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--delia-accent);
  text-decoration: none;
}
.delia-open-cbot .delia-service-card__link:hover{
  text-decoration: underline;
}
.delia-open-cbot .delia-recap-card__list{
  margin: 4px 0 0;
  padding-left: 1.1rem;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--glando-neutral-700);
}
.delia-open-cbot .delia-recap-card__list li{
  margin: 0.15em 0;
}
.delia-open-cbot .delia-recap-card__list strong{
  font-weight: 600;
  color: var(--glando-neutral-900);
}

/* W07 success pecsét (SoT .dw__card--success) — beside the AI sentence */
.delia-open-cbot .delia-success-card{
  border-color: var(--glando-success);
  background: var(--glando-success-bg);
}
.delia-open-cbot .delia-success-card__title{
  display: flex;
  align-items: center;
  gap: 8px;
}
.delia-open-cbot .delia-success-card__check{
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--glando-success);
  color: var(--glando-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.delia-open-cbot .delia-success-card__check svg{
  width: 12px;
  height: 12px;
}

/* Bot: Appearance delia_cb_bot_msg_bg / font (inline). Do not SoT-paint. */
.delia-open-cbot .chat__messages__ai p{
  background: var(--delia-bot-msg-bg);
  color: var(--delia-bot-msg-fg);
  padding: var(--glando-space-2) var(--glando-space-3) var(--glando-space-3);
  border-radius: var(--glando-radius-md) var(--glando-radius-md) var(--glando-radius-md) var(--glando-radius-sm);
  margin: 0;
  width: auto;
  max-width: 100%;
  border: 1px solid var(--glando-border-light);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  box-sizing: border-box;
  line-height: 1.4;
}

/* User: Appearance delia_cb_user_msg_bg (inline default sand-tint). Avatars from options. */
.delia-open-cbot .chat__messages__user p{
  background: var(--delia-user-msg-bg);
  color: var(--delia-user-msg-fg);
  padding: var(--glando-space-2) var(--glando-space-3) var(--glando-space-3);
  border-radius: var(--glando-radius-md) var(--glando-radius-md) var(--glando-radius-sm) var(--glando-radius-md);
  margin: 0;
  width: auto;
  max-width: 100%;
  border: 1px solid var(--glando-border-light);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
  box-sizing: border-box;
  line-height: 1.4;
}

.delia-open-cbot .chat__messages__user{
  display: flex;
  justify-content: flex-end;
}

.delia-open-cbot .chat__messages__user > div{
  justify-content: flex-end;
}

.delia-open-cbot img.bot-image,
.delia-open-cbot img.avatar-image{
  width: var(--delia-avatar-size);
  height: var(--delia-avatar-size);
  min-width: var(--delia-avatar-size);
  min-height: var(--delia-avatar-size);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  max-width: none;
  flex: none;
  border-radius: 50%;
}

.delia-open-cbot img.bot-image[src=""],
.delia-open-cbot img.avatar-image[src=""],
.delia-open-cbot img.bot-image:not([src]),
.delia-open-cbot img.avatar-image:not([src]){
  display: none;
}

.delia-open-cbot .delia-avatar--empty{
  width: var(--delia-avatar-size);
  height: var(--delia-avatar-size);
  min-width: var(--delia-avatar-size);
  min-height: var(--delia-avatar-size);
  border-radius: 50%;
  background: var(--glando-neutral-300);
  flex: none;
}

.delia-open-cbot .chat__input-area{
  padding: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px) + var(--delia-vv-offset-bottom, 0px));
  border-top: 1px solid var(--glando-border-light);
  display: flex;
  flex-direction: column;
  gap: var(--glando-space-2);
  flex-shrink: 0;
}

.delia-open-cbot .delia-status-banner{
  margin: 0;
  padding: var(--glando-space-2) var(--glando-space-3);
  border-radius: var(--glando-radius-md);
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid transparent;
}

.delia-open-cbot .delia-status-banner--error{
  background: var(--glando-error-bg);
  border-color: rgba(221, 51, 51, 0.35);
  color: #8a1f1f;
}

.delia-open-cbot .delia-status-banner__retry{
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.delia-open-cbot .delia-status-banner__retry svg{
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.delia-open-cbot .delia-status-banner--notify{
  background: var(--glando-notify-bg);
  border-color: var(--glando-notify);
  color: var(--glando-text-on-light);
}

.delia-open-cbot .delia-status-banner--success{
  background: var(--glando-success-bg);
  border-color: rgba(46, 125, 74, 0.35);
  color: var(--glando-success);
}

.delia-open-cbot .input{
  display: flex;
  gap: var(--glando-space-2);
  align-items: flex-end;
}

.delia-open-cbot .input[hidden],
.delia-open-cbot .chat__input-area.is-recording form#messageForm .input,
.delia-open-cbot .chat__input-area.is-recording .delia-limits,
.delia-open-cbot .chat__input-area.is-recording .delia-pending{
  display: none !important;
}

.delia-open-cbot .delia-field{
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 40px;
  border: 1px solid var(--glando-border-light);
  border-radius: var(--glando-radius-md);
  background: var(--glando-bg-light);
  padding: 0 var(--glando-space-1) 0 var(--glando-space-3);
  transition: border-color var(--glando-motion-fast) var(--glando-ease-out);
}

.delia-open-cbot .delia-field:focus-within{
  border-color: var(--delia-accent);
}

.delia-open-cbot #message{
  flex: 1;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding: 10px 40px 10px var(--glando-space-1);
  border: none;
  border-radius: 0;
  resize: none;
  overflow-y: hidden;
  line-height: 1.4;
  min-height: 40px;
  max-height: calc(1.4em * 6 + 20px);
  font: var(--glando-text-small);
  box-sizing: border-box;
  color: var(--glando-text-on-light);
  background: transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--glando-neutral-500) var(--glando-neutral-100);
  transition:
    border-color var(--glando-motion-fast) var(--glando-ease-out),
    box-shadow var(--glando-motion-fast) var(--glando-ease-out);
}

.delia-open-cbot .delia-field:has(#delia-attach-btn:not([hidden])) #message{
  padding-right: 72px;
}

.delia-open-cbot #message.delia-message--scrollable{
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.delia-open-cbot #message.delia-message--scrollable::-webkit-scrollbar{ width: 5px; }
.delia-open-cbot #message.delia-message--scrollable::-webkit-scrollbar-track{
  background: var(--glando-neutral-100);
  border-radius: var(--glando-radius-sm);
}
.delia-open-cbot #message.delia-message--scrollable::-webkit-scrollbar-thumb{
  background: var(--glando-neutral-500);
  border-radius: var(--glando-radius-sm);
}

/* neutral-500 as text is normally forbidden (2.6:1), but WCAG 1.4.3 exempts
   text in an inactive control — the low contrast is the disabled signal here. */
.delia-open-cbot #message:disabled{
  background: var(--glando-neutral-100);
  color: var(--glando-neutral-500);
  cursor: not-allowed;
}

/* Primary CTA = magenta (toolkit §08 .chat-send); Appearance may override */
.delia-open-cbot #submit-btn{
  border: none;
  border-radius: var(--glando-radius-md);
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--delia-submit, var(--chatbot-primary-color, var(--delia-accent)));
  color: var(--glando-text);
  transition:
    filter var(--glando-motion-fast) var(--glando-ease-out),
    box-shadow var(--glando-motion-fast) var(--glando-ease-out),
    opacity var(--glando-motion-fast) var(--glando-ease-out);
}

.delia-open-cbot #submit-btn i,
.delia-open-cbot #submit-btn .delia-icon-send{
  color: inherit;
}

/* Inline send icon: stroke follows the button colour, sits on the text baseline */
.delia-open-cbot #submit-btn .delia-icon-send{
  display: block;
  stroke: currentColor;
}

.delia-open-cbot #submit-btn:hover:not(:disabled){
  background: var(--delia-submit-hover, var(--delia-accent-hover, var(--delia-accent)));
  filter: none;
}

.delia-open-cbot #submit-btn:disabled,
.delia-open-cbot #submit-btn.disabled{
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

.delia-open-cbot .delia-dictate-status{
  margin: 0 0 var(--glando-space-2) 0;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--delia-accent);
}

.delia-open-cbot .delia-dictate-status[hidden]{
  display: none !important;
}

.delia-open-cbot .delia-dictate-btn{
  position: absolute;
  right: 4px;
  bottom: 4px;
  z-index: 1;
  border: none;
  border-radius: var(--glando-radius-md);
  padding: 0;
  width: 32px;
  height: 32px;
  min-height: 32px;
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--delia-accent);
  font-size: 16px;
  font-weight: 600;
  transition:
    background var(--glando-motion-fast) var(--glando-ease-out),
    color var(--glando-motion-fast) var(--glando-ease-out),
    opacity var(--glando-motion-fast) var(--glando-ease-out);
}

.delia-open-cbot .delia-dictate-btn[hidden]{
  display: none !important;
}

.delia-open-cbot .delia-dictate-btn svg{
  display: block;
  stroke: currentColor;
}

.delia-open-cbot .delia-dictate-btn:hover:not(:disabled){
  background: var(--glando-neutral-100);
  color: var(--delia-accent);
}

.delia-open-cbot .delia-dictate-btn.is-on{
  color: var(--delia-accent);
  background: var(--glando-neutral-100);
}

.delia-open-cbot .delia-dictate-btn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}

.delia-open-cbot .startup-btns{
  display: flex;
  flex-wrap: wrap;
  gap: var(--glando-space-2);
  margin: 0 0 var(--glando-space-1) 0;
}

/* Secondary / quick actions stay sand-family (Appearance may override).
   The deep sand fill carries the contrast so the label stays white: 5.30:1,
   where plain --glando-sand would be 2.28:1 at any size. */
.delia-open-cbot .startup-btns .delia-startup-btn,
.delia-open-cbot .delia-handoff-choice .delia-startup-btn{
  background: var(--glando-sand-deep);
  color: var(--glando-text);
  border: 1px solid transparent;
  border-radius: var(--glando-radius-pill);
  box-sizing: border-box;
  padding: 6px var(--glando-space-3);
  cursor: pointer;
  margin: 0;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  appearance: none;
  -webkit-appearance: none;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    filter var(--glando-motion-fast) var(--glando-ease-out),
    border-color var(--glando-motion-fast) var(--glando-ease-out);
}

.delia-open-cbot .startup-btns .delia-startup-btn:hover,
.delia-open-cbot .delia-handoff-choice .delia-startup-btn:hover{
  filter: brightness(0.95);
  border-color: var(--delia-accent);
}

/* "Start new conversation" CTA — same pill visual as .delia-startup-btn, but a
   standalone full-width block above the composer while the conversation is
   closed (composer stays writable for closed_stay). Not a row of scenario chips. */
.delia-open-cbot .delia-restart-btn{
  display: block;
  width: 100%;
  background: var(--glando-sand-deep);
  color: var(--glando-text);
  border: none;
  border-radius: var(--glando-radius-pill);
  padding: 8px var(--glando-space-3);
  cursor: pointer;
  margin: 0 0 var(--glando-space-1) 0;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  transition:
    filter var(--glando-motion-fast) var(--glando-ease-out),
    box-shadow var(--glando-motion-fast) var(--glando-ease-out);
}

.delia-open-cbot .delia-restart-btn:hover{ filter: brightness(0.95); }

/* W27 post-handoff (mock d5672471, #650 / #651) — existing families only: the chip (handoff
   choice), the restart pill (inline «Új beszélgetés»), the status dot. The two new rows are plain
   text, no button. All in the thread, never above the composer (mobile keeps a compact composer). */
.delia-open-cbot .delia-handoff-choice{
  display: flex;
  flex-wrap: wrap;
  gap: var(--glando-space-1);
  margin: var(--glando-space-1) 0 0 0;
}
.delia-open-cbot .delia-post-handoff-saved{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 0 0 0;
  font: var(--glando-text-caption);
  color: var(--glando-neutral-600);
}
.delia-open-cbot .delia-post-handoff-saved__check{ flex-shrink: 0; width: 12px; height: 12px; }
/* B1.27 T17 (mock 7b4706f6 W27b): frameless faint text — the AI-bubble <p> background / border / padding
   do not reach the row. */
.delia-open-cbot .chat__messages__ai p.delia-post-handoff-saved{
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  width: auto;
  color: var(--glando-neutral-600);
}
/* B1.28 S7 (mock W28): the security close — the existing error banner, at the end of the thread. */
.delia-open-cbot .delia-conversation-end.delia-conversation-end--security .delia-status-banner{
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}
/* B1.27 T18 (mock W27c): the visitor closed — the existing disabled field state, faint. */
.delia-open-cbot .chat__input-area .input.is-disabled{
  opacity: 0.55;
}
.delia-open-cbot .delia-conversation-end{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--glando-space-2);
  margin: 6px 0 2px;
}
.delia-open-cbot .delia-conversation-end__rule{
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  font: var(--glando-text-caption);
  color: var(--glando-neutral-700);
  text-align: center;
}
.delia-open-cbot .delia-conversation-end__rule::before,
.delia-open-cbot .delia-conversation-end__rule::after{
  content: "";
  flex: 1 1 16px;
  min-width: 16px;
  height: 1px;
  background: var(--glando-border-light);
}
.delia-open-cbot .delia-restart-btn.delia-restart-btn--inline{
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 8px var(--glando-space-3);
}

/* Touch targets — a11y checklist #7 (min. 44×44 mobil gombok). Scoped to
   coarse pointers: the approved desktop chrome keeps its compact 32px close
   icon and 28px chips, and on a finger the same controls reach the full
   target without a change in type size or fill.

   The close icon grows its hit area with a pseudo-element rather than its box,
   because the header is 12px padding + 32px icon = 56px and `.popup` is
   anchored to that exact `top: 56px`. The in-flow controls below carry no such
   offset, so those take min-height directly. */
@media (pointer: coarse){
  .delia-open-cbot .chat__close-icon,
  .delia-open-cbot .chat__menu-btn{ position: relative; }

  .delia-open-cbot .chat__close-icon::after,
  .delia-open-cbot .chat__menu-btn::after,
  .delia-open-cbot .delia-rate button::after{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }

  .delia-open-cbot .delia-restart-btn{
    min-height: 44px;
  }

  .delia-open-cbot .startup-btns .delia-startup-btn{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.delia-open-cbot .startup-btns .delia-startup-btn:focus,
.delia-open-cbot .startup-btns .delia-startup-btn:focus-visible,
.delia-open-cbot .startup-btns .delia-startup-btn.is-on,
.delia-open-cbot .startup-btns .delia-startup-btn[aria-pressed="true"]{
  outline: none;
  box-shadow: none;
  border-color: var(--delia-accent);
}

.delia-open-cbot #message:focus,
.delia-open-cbot #message:focus-visible{
  outline: none;
  box-shadow: none;
}

.delia-open-cbot #submit-btn:focus-visible,
.delia-open-cbot .delia-attach-btn:focus-visible,
.delia-open-cbot .delia-dictate-btn:focus-visible,
.delia-open-cbot .delia-restart-btn:focus-visible,
.delia-open-cbot .custom-chatbot__image:focus-visible,
.delia-open-cbot .chat__close-icon:focus-visible,
.delia-open-cbot .chat__menu-btn:focus-visible,
.delia-open-cbot .delia-rate button:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px var(--delia-accent-ring, var(--delia-accent));
}

.delia-open-cbot .loading{
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--glando-space-2);
  padding: 10px;
}

@media (max-width: 768px){
  html.delia-chat-open,
  html.delia-chat-open body{
    overflow: hidden;
    height: 100%;
  }

  .delia-open-cbot .custom-chatbot.show{
    position: fixed;
    inset: 0;
    right: 0;
    left: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    z-index: 2;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
  }

  .delia-open-cbot .custom-chatbot.show .chat{
    border-radius: 0;
  }

  html.delia-chat-open .delia-open-cbot .custom-chatbot__image{
    display: none;
  }

  .delia-open-cbot .chat__input-area.is-recording .delia-lift{
    flex-shrink: 0;
  }
  .delia-open-cbot .delia-lift__field{
    min-height: 64px;
  }
  .delia-open-cbot .delia-lift__text{
    font-size: inherit;
    line-height: 1.4;
  }
}

.delia-open-cbot .delia-dots{
  display: inline-flex;
  gap: var(--glando-space-1);
  vertical-align: middle;
}

.delia-open-cbot .delia-dots span{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glando-neutral-500);
  display: inline-block;
  animation: delia-bounce 1.2s infinite ease-in-out;
}

.delia-open-cbot .delia-dots span:nth-child(2){ animation-delay: .2s; }
.delia-open-cbot .delia-dots span:nth-child(3){ animation-delay: .4s; }

@keyframes delia-bounce{
  0%, 80%, 100%{ transform: scale(0.6); opacity: .6; }
  40%{ transform: scale(1); opacity: 1; }
}

.delia-open-cbot .delia-rate{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.delia-open-cbot .delia-rate button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--glando-radius-md);
  background: transparent;
  color: var(--glando-neutral-600);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex-shrink: 0;
  line-height: 0;
  position: relative;
}

.delia-open-cbot .delia-rate svg{
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  overflow: visible;
  max-width: none;
}

.delia-open-cbot .delia-rate button:hover{
  background: var(--glando-neutral-100);
  color: var(--delia-accent);
}

.delia-open-cbot .delia-rate button.is-on{
  color: var(--delia-accent);
  background: var(--glando-neutral-100);
}

.delia-open-cbot .delia-rate button.is-down{
  color: var(--glando-status-error);
  background: var(--glando-error-bg);
}

.delia-open-cbot .delia-reason{
  display: none;
  width: min(280px, 100%);
  align-items: center;
  gap: 4px;
}

.delia-open-cbot .delia-reason.is-open{ display: flex; }

.delia-open-cbot .delia-reason.is-saved{
  display: block;
}

.delia-open-cbot .delia-reason input{
  flex: 1;
  min-width: 0;
  width: auto;
  font-size: 0.75rem;
  padding: 6px 8px;
  border: 1px solid var(--glando-border-light);
  border-radius: var(--glando-radius-sm);
  color: var(--glando-text-on-light);
  background: var(--glando-bg-light);
  box-sizing: border-box;
}

.delia-open-cbot .delia-reason__send{
  flex-shrink: 0;
  border: none;
  border-radius: var(--glando-radius-md);
  padding: 6px 10px;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--delia-accent);
  color: var(--glando-text);
}

.delia-open-cbot .delia-reason__ack{
  margin: 0;
  font-size: 0.75rem;
  color: var(--glando-neutral-700);
}

.delia-open-cbot .delia-copy-modal{
  position: absolute;
  inset: 0;
  z-index: 12;
  background: var(--glando-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--glando-space-4);
}

.delia-open-cbot .delia-copy-modal[hidden]{ display: none !important; }

.delia-open-cbot .delia-copy-modal__dialog{
  width: min(360px, 100%);
  background: var(--glando-bg-light);
  border: 1px solid var(--glando-border-light);
  border-radius: var(--glando-radius-lg);
  box-shadow: var(--glando-shadow-lg);
  padding: var(--glando-space-4);
}

.delia-open-cbot .delia-copy-modal__title{
  margin: 0 0 var(--glando-space-2);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--glando-neutral-900);
}

.delia-open-cbot .delia-copy-modal__lead{
  margin: 0 0 var(--glando-space-4);
  font-size: 0.8125rem;
  color: var(--glando-neutral-700);
}

.delia-open-cbot .delia-copy-modal__label{
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--glando-neutral-900);
  margin-bottom: 6px;
}

.delia-open-cbot .delia-copy-modal__input{
  width: 100%;
  margin-bottom: var(--glando-space-4);
  padding: 8px 10px;
  border: 1px solid var(--glando-border-light);
  border-radius: var(--glando-radius-md);
  color: var(--glando-text-on-light);
  background: var(--glando-bg-light);
  box-sizing: border-box;
}

.delia-open-cbot .delia-copy-modal__error{
  margin: 0 0 var(--glando-space-3);
  font-size: 0.75rem;
  color: var(--glando-status-error);
}

.delia-open-cbot .delia-copy-modal__actions{
  display: flex;
  gap: var(--glando-space-2);
  justify-content: flex-end;
}

.delia-open-cbot .delia-copy-modal__cancel,
.delia-open-cbot .delia-copy-modal__send{
  border: none;
  border-radius: var(--glando-radius-md);
  padding: 8px 14px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.delia-open-cbot .delia-copy-modal__cancel{
  background: transparent;
  color: var(--glando-neutral-700);
}

.delia-open-cbot .delia-copy-modal__send{
  background: var(--delia-accent);
  color: var(--glando-text);
}

.delia-open-cbot .delia-lift{
  flex-shrink: 0;
  background: var(--glando-bg-light);
  padding: 8px 12px 10px;
}
.delia-open-cbot .delia-lift[hidden]{ display: none !important; }
.delia-open-cbot .delia-lift__cap{
  margin: 0 0 6px;
  font: var(--glando-text-caption);
  font-weight: 600;
  color: var(--glando-neutral-700);
}
.delia-open-cbot .delia-lift__field{
  border: 1px solid var(--glando-border-light);
  border-radius: var(--glando-radius-md);
  background: var(--glando-bg-light);
  padding: 10px 12px;
  min-height: 64px;
  max-height: calc(1.4em * 6 + 20px);
  overflow-x: hidden;
  overflow-y: auto;
  font: var(--glando-text-small);
  color: var(--glando-text-on-light);
  margin-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--glando-neutral-500) var(--glando-neutral-100);
}
.delia-open-cbot .delia-lift__text{
  margin: 0;
  font: inherit;
  color: inherit;
  overflow-wrap: break-word;
}
.delia-open-cbot .delia-lift__text.is-interim{
  color: var(--glando-neutral-700);
  font-weight: 300;
}
.delia-open-cbot .delia-lift__text.is-hint{
  color: var(--glando-neutral-600);
  font-weight: 400;
}
.delia-open-cbot .delia-lift__caret{
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 1px;
  background: var(--delia-accent);
  vertical-align: text-bottom;
  animation: delia-lift-caret var(--glando-motion-slow) steps(1) infinite;
}
@keyframes delia-lift-caret{
  50% { opacity: 0; }
}
.delia-open-cbot .delia-recbar{
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 6px 6px 6px 4px;
  background: var(--glando-neutral-100);
  border: 1px solid var(--glando-border-light);
  border-radius: var(--glando-radius-md);
  box-shadow: var(--glando-shadow-sm);
}
.delia-open-cbot .delia-recbar__x,
.delia-open-cbot .delia-recbar__stop{
  position: relative;
  z-index: var(--glando-z-base);
  flex-shrink: 0;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.delia-open-cbot .delia-recbar__x{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--glando-neutral-700);
}
.delia-open-cbot .delia-recbar__wave{
  flex: 1;
  min-width: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  pointer-events: none;
}
.delia-open-cbot .delia-recbar__wave span{
  display: block;
  width: 2px;
  flex: 1 1 2px;
  max-width: 3px;
  height: 4px;
  border-radius: 1px;
  background: var(--glando-neutral-700);
}
.delia-open-cbot .delia-lift.is-quiet .delia-recbar__wave span{ opacity: 0.45; }
.delia-open-cbot .delia-recbar__stop{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--glando-bg-light);
  color: var(--glando-neutral-900);
  border: 1px solid var(--glando-border-light);
  box-shadow: var(--glando-shadow-lg);
}
.delia-open-cbot .delia-recbar__stop-mark{
  display: block;
  width: var(--glando-space-3);
  height: var(--glando-space-3);
  border-radius: var(--glando-radius-sm);
  background: var(--glando-neutral-900);
}

.delia-open-cbot .delia-attach-btn{
  position: absolute;
  right: 36px;
  bottom: 4px;
  z-index: 1;
  border: none;
  border-radius: var(--glando-radius-md);
  padding: 0;
  width: 32px;
  height: 32px;
  min-height: 32px;
  flex-shrink: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--glando-neutral-700);
}

.delia-open-cbot .delia-attach-btn[hidden]{
  display: none !important;
}

.delia-open-cbot .delia-attach-btn svg{
  display: block;
  stroke: currentColor;
}

.delia-open-cbot .delia-attach-btn:hover:not(:disabled){
  background: var(--glando-neutral-100);
  color: var(--delia-accent);
}

.delia-open-cbot .delia-attach-btn:disabled{
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--glando-neutral-600);
}

.delia-open-cbot .delia-pending{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 var(--glando-space-2);
}

.delia-open-cbot .delia-pending[hidden]{
  display: none !important;
}

.delia-open-cbot .delia-filechip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--glando-border-light);
  border-radius: var(--glando-radius-md);
  font: var(--glando-text-caption);
  color: var(--glando-neutral-900);
  background: var(--glando-neutral-100);
}

.delia-open-cbot .delia-filechip__thumb{
  width: 28px;
  height: 28px;
  border-radius: var(--glando-radius-sm);
  background: var(--glando-gray) center/cover no-repeat;
  flex-shrink: 0;
}

.delia-open-cbot .delia-filechip__x{
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--glando-neutral-700);
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
}

.delia-open-cbot .delia-limits{
  margin: var(--glando-space-2) 0 0;
  padding: 0;
  font: var(--glando-text-caption);
  color: var(--glando-neutral-700);
}

.delia-open-cbot .delia-limits[hidden]{
  display: none !important;
}

/* Privacy: two steps down from --glando-text-body (body → small → caption); centered. */
.delia-open-cbot .delia-composer-foot{
  display: block;
  text-align: center;
  margin: 0;
  padding: var(--glando-space-1) 0 0;
}

.delia-open-cbot .delia-composer-foot[hidden]{
  display: none !important;
}

.delia-open-cbot .delia-privacy-link,
.delia-open-cbot .delia-privacy-link:visited{
  font: var(--glando-text-caption);
  font-weight: 600;
  color: var(--delia-link-color, var(--delia-accent));
  text-decoration: underline;
}

.delia-open-cbot .chat__messages p a,
.delia-open-cbot .chat__messages p a:visited{
  color: var(--delia-link-color, var(--delia-accent));
  font-weight: 600;
  /* #644 (SoT .dw__bubble a): the configured legal link in a bot bubble — underlined, long URLs wrap. */
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.delia-open-cbot .delia-att{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.delia-open-cbot .delia-att__tile{
  width: 88px;
  height: 88px;
  border: 1px solid var(--glando-border-light);
  border-radius: var(--glando-radius-md);
  overflow: hidden;
  background: var(--glando-neutral-100);
}

.delia-open-cbot .delia-att__tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.delia-open-cbot .delia-att__file{
  min-width: 132px;
  padding: 8px 10px;
  border: 1px solid var(--glando-border-light);
  border-radius: var(--glando-radius-md);
  background: var(--glando-neutral-100);
  font: var(--glando-text-caption);
  color: var(--glando-neutral-900);
}

.delia-open-cbot .delia-att__file strong{
  display: block;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce){
  .delia-open-cbot .delia-dots span{
    animation: none;
    opacity: .85;
  }
  .delia-open-cbot #message,
  .delia-open-cbot #submit-btn,
  .delia-open-cbot .delia-dictate-btn,
  .delia-open-cbot .delia-attach-btn,
  .delia-open-cbot .startup-btns .delia-startup-btn,
  .delia-open-cbot .delia-restart-btn,
  .delia-open-cbot .chat__close-icon{
    transition: none;
  }
}

/* W-SHOP S6 (#698): product grid (W11), product detail card (W12), allergen block (W29), cart
   button states (W12b). Mock SoT: docs/brand/widget-ui-client.html .dw__sku / .dw__card__*.
   Token-only: sizes derive from --glando-space-* (hairline = space-1 / 4). */
.delia-open-cbot .delia-sku-grid,
.delia-open-cbot .delia-product-card{
  --delia-hairline: calc(var(--glando-space-1) / 4);
  --delia-sku-img: calc(var(--glando-space-16) + var(--glando-space-2));
}
.delia-open-cbot .delia-sku-grid{
  display: flex;
  flex-direction: column;
  gap: var(--glando-space-2);
  width: min(100%, calc(var(--glando-space-16) * 5));
  margin-top: var(--glando-space-1);
}
.delia-open-cbot .delia-sku{
  display: grid;
  grid-template-columns: var(--delia-sku-img) 1fr;
  gap: calc(var(--glando-space-2) + var(--glando-space-1) / 2);
  width: 100%;
  padding: var(--glando-space-2);
  border: var(--delia-hairline) solid var(--glando-border-light);
  border-radius: var(--glando-radius-md);
  background: var(--glando-bg-light);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--glando-motion-fast) var(--glando-ease-out);
}
.delia-open-cbot .delia-sku:hover,
.delia-open-cbot .delia-sku:focus-visible,
.delia-open-cbot .delia-sku[aria-expanded="true"]{
  border-color: var(--delia-accent);
}
.delia-open-cbot .delia-sku__img{
  width: var(--delia-sku-img);
  height: var(--delia-sku-img);
  border-radius: var(--glando-radius-sm);
  border: var(--delia-hairline) solid var(--glando-border-light);
  background: linear-gradient(145deg, var(--glando-neutral-100), var(--glando-gray));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.delia-open-cbot .delia-sku__img img,
.delia-open-cbot .delia-product-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.delia-open-cbot .delia-sku__name{
  display: block;
  font: 600 0.8125rem/1.3 var(--glando-font-body);
  color: var(--glando-neutral-900);
}
.delia-open-cbot .delia-sku__price{
  display: block;
  margin-top: calc(var(--glando-space-1) / 2);
  font: 600 0.875rem/1.2 var(--glando-font-body);
  color: var(--delia-accent);
}
.delia-open-cbot .delia-sku__meta{
  display: block;
  margin-top: calc(var(--glando-space-1) / 2);
  font: var(--glando-text-caption);
  color: var(--glando-neutral-600);
}
/* W12: the product card follows the mock .dw__card__* type scale (the service card keeps its own). */
.delia-open-cbot .delia-product-card .delia-service-card__eyebrow{
  font: var(--glando-text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--delia-accent);
}
.delia-open-cbot .delia-product-card .delia-service-card__text{
  font: var(--glando-text-small);
  color: var(--glando-neutral-700);
}
.delia-open-cbot .delia-product-card .delia-service-card__link{
  font: 600 0.8125rem/1.3 var(--glando-font-body);
  color: var(--delia-accent);
  text-decoration: underline;
}
.delia-open-cbot .delia-product-card__media{
  aspect-ratio: 16 / 10;
  background: linear-gradient(145deg, var(--glando-neutral-100) 0%, var(--glando-gray) 100%);
  border-bottom: var(--delia-hairline) solid var(--glando-border-light);
  overflow: hidden;
}
.delia-open-cbot .delia-product-card__note{
  margin: calc(var(--glando-space-1) / 2) 0 0;
  padding: var(--glando-space-2) calc(var(--glando-space-2) + var(--glando-space-1) / 2);
  border-radius: var(--glando-radius-sm);
  background: var(--glando-notify-bg);
  border: var(--delia-hairline) solid var(--glando-notify);
  font: var(--glando-text-small);
  color: var(--glando-neutral-900);
}
.delia-open-cbot .delia-product-card__note-label{
  display: block;
  font: var(--glando-text-caption);
  font-weight: 600;
  color: var(--glando-neutral-700);
}
.delia-open-cbot .delia-product-card__note--empty{
  background: var(--glando-neutral-100);
  border-color: var(--glando-border-light);
  color: var(--glando-neutral-700);
}
.delia-open-cbot .delia-product-card__actions{
  display: flex;
  flex-direction: column;
  gap: var(--glando-space-2);
  margin-top: var(--glando-space-2);
}
.delia-open-cbot .delia-product-card__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--glando-space-2);
  width: 100%;
  padding: calc(var(--glando-space-2) + var(--glando-space-1) / 2) var(--glando-space-3);
  border-radius: var(--glando-radius-md);
  border: var(--delia-hairline) solid var(--glando-border-light);
  background: var(--glando-bg-light);
  color: var(--glando-neutral-900);
  font: 600 0.8125rem/1.2 var(--glando-font-body);
  text-decoration: none;
  cursor: pointer;
}
.delia-open-cbot .delia-product-card__btn--primary{
  background: var(--delia-accent);
  border-color: var(--delia-accent);
  color: var(--glando-text);
}
.delia-open-cbot .delia-product-card__btn--done{
  background: var(--glando-success-bg);
  border-color: var(--glando-success);
  color: var(--glando-success);
  cursor: default;
}
.delia-open-cbot .delia-product-card__btn--done svg{
  width: calc(var(--glando-space-3) + var(--glando-space-1) / 2);
  height: calc(var(--glando-space-3) + var(--glando-space-1) / 2);
}
.delia-open-cbot .delia-product-card__btn.is-busy{
  opacity: 0.6;
  cursor: progress;
}
.delia-open-cbot .delia-product-card__status{
  margin: 0;
  font: var(--glando-text-caption);
  color: var(--glando-neutral-600);
}
.delia-open-cbot .delia-product-card__status--error{
  color: var(--glando-status-error);
}

/* W-SHOP S7 (#699, mock W30): order card lines (date, shipping) one per line. */
.delia-open-cbot .delia-service-card__text--lines{
  white-space: pre-line;
}
/* W30: the order card follows the mock .dw__card__* scale (caption lines, underlined link). */
.delia-open-cbot .delia-service-card[data-component="order-status-card"] .delia-service-card__eyebrow{
  font: var(--glando-text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--delia-accent);
}
.delia-open-cbot .delia-service-card[data-component="order-status-card"] .delia-service-card__text{
  font: var(--glando-text-caption);
  color: var(--glando-neutral-600);
}
.delia-open-cbot .delia-service-card[data-component="order-status-card"] .delia-service-card__link{
  font: 600 0.8125rem/1.3 var(--glando-font-body);
  text-decoration: underline;
}