/* Delacco AI Guide — discreet storefront widget. Brand black/orange. */
:root {
    --aig-orange: #f7651b;
    --aig-ink: #15171a;
    --aig-line: #e4e6ea;
}

#aiguide-root {
    position: fixed;
    z-index: 2147482000;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
/* Docked (collapsed): a small square tab glued to the right screen edge.
   !important beats any inline left/top a drag may have left behind. */
#aiguide-root[data-aig-collapsed="true"] {
    right: 0 !important;
    left: auto !important;
    top: 40vh !important;
    bottom: auto !important;
}
/* When the admin pricing widget (320px, bottom-right) is also OPEN — i.e.
   for staff — sit the open guide to its left so the two are side by side, but
   ONLY when the viewport is wide enough. On split-screen / tiled / narrow
   viewports there isn't room, so fall back to the opposite bottom corner to
   stay fully on-screen (never pushed off the left edge). */
@media (min-width: 940px) {
    body:has(.xs-admin-widget:not([data-collapsed="true"]))
        #aiguide-root.aig-beside-admin:not([data-aig-collapsed="true"]) { right: 360px; }
}
@media (min-width: 641px) and (max-width: 939px) {
    body:has(.xs-admin-widget:not([data-collapsed="true"]))
        #aiguide-root.aig-beside-admin:not([data-aig-collapsed="true"]) { right: auto; left: 14px; }
}

@keyframes aig-pulse {
    0% { box-shadow: 0 0 0 0 rgba(247, 101, 27, .55); }
    70% { box-shadow: 0 0 0 7px rgba(247, 101, 27, 0); }
    100% { box-shadow: 0 0 0 0 rgba(247, 101, 27, 0); }
}

/* ---- Docked edge tab (collapsed state) ---- */
.aig-tab {
    display: none;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 12px 0 0 12px;
    background: var(--aig-ink);
    color: var(--aig-orange);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
    transition: transform 140ms ease, background 140ms ease;
}
#aiguide-root[data-aig-collapsed="true"] .aig-tab { display: flex; }
#aiguide-root[data-aig-collapsed="true"] .aig-panel { display: none; }
.aig-tab:hover { background: #23262b; transform: translateX(-3px); }
.aig-tab-icon { display: block; pointer-events: none; }
.aig-tab-plus {
    position: absolute;
    top: -5px;
    left: -5px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--aig-orange);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    pointer-events: none;
}
/* Pulse only until the visitor opens the guide for the first time. */
#aiguide-root:not([data-aig-opened="true"]) .aig-tab { animation: aig-pulse 2.2s infinite; }

.aig-panel {
    width: 370px;
    max-width: calc(100vw - 24px);
    height: 560px;
    max-height: calc(100vh - 110px);
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--aig-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .26);
    font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--aig-ink);
}
@media (max-width: 640px) {
    /* On phones keep the bar above the sticky footer; expanded panel fills the
       screen. Drag is desktop-oriented. */
    #aiguide-root,
    #aiguide-root.aig-beside-admin { right: 10px; left: auto; bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
    .aig-panel { width: min(370px, calc(100vw - 20px)); }
    #aiguide-root:not([data-aig-collapsed="true"]) .aig-panel {
        position: fixed; right: 8px; left: 8px; width: auto;
        height: calc(100vh - 96px); bottom: 84px; top: auto;
    }
}

.aig-head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 12px; background: var(--aig-ink); color: #fff;
    cursor: grab; touch-action: none; user-select: none;
}
#aiguide-root[data-dragging="true"] .aig-head { cursor: grabbing; }
.aig-head-dot {
    flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
    background: var(--aig-orange); box-shadow: 0 0 0 0 rgba(247, 101, 27, .6);
    animation: aig-pulse 2.2s infinite; pointer-events: none;
}
.aig-head-id { flex: 1 1 auto; min-width: 0; pointer-events: none; }
.aig-head-id strong { font-size: 15px; }
.aig-head-sub { display: block; font-size: 11px; opacity: .7; }
.aig-preview-tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; background: var(--aig-orange); color: #fff; border-radius: 4px; padding: 1px 5px; vertical-align: middle; }
.aig-head-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.aig-min, .aig-reset {
    background: none; border: 0; color: #fff; line-height: 1; cursor: pointer;
    width: 30px; height: 30px; border-radius: 8px; display: inline-flex;
    align-items: center; justify-content: center; padding: 0;
}
.aig-min { font-size: 22px; }
.aig-reset { font-size: 16px; opacity: .85; }
.aig-min:hover, .aig-reset:hover { background: rgba(255, 255, 255, .14); opacity: 1; }

.aig-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f7f8f9; }

.aig-msg { flex-shrink: 0; max-width: 86%; padding: 9px 12px; border-radius: 13px; white-space: pre-wrap; word-wrap: break-word; }
.aig-msg-bot { align-self: flex-start; background: #fff; border: 1px solid var(--aig-line); border-bottom-left-radius: 4px; }
.aig-msg-gate { background: #fff8e6; border-color: #f0d58a; max-width: 100%; }
.aig-msg-gate .aig-card-actions a, .aig-msg-gate .aig-card-actions button { flex: 0 1 auto; }
.aig-msg-user { align-self: flex-end; background: var(--aig-orange); color: #fff; border-bottom-right-radius: 4px; }
.aig-typing { flex-shrink: 0; align-self: flex-start; color: #777; font-style: italic; }
/* Phase 4 feedback row under an assistant turn. */
.aig-fb { flex-shrink: 0; align-self: flex-start; display: flex; align-items: center; gap: 4px; margin: -4px 0 0 4px; }
.aig-fb-btn { border: 0; background: transparent; padding: 2px 5px; border-radius: 8px; font-size: 13px; line-height: 1; cursor: pointer; opacity: .45; filter: grayscale(1); transition: opacity .15s, filter .15s; }
.aig-fb-btn:hover, .aig-fb-btn:focus-visible { opacity: .9; filter: none; background: #f2f2f2; outline: none; }
.aig-fb-btn.is-on { opacity: 1; filter: none; background: #fff2e8; }
.aig-fb-note { font-size: 11.5px; color: #777; margin-left: 4px; }
.aig-fb-comment { flex-shrink: 0; align-self: stretch; display: flex; gap: 6px; margin: 2px 0 4px 4px; }
.aig-fb-input { flex: 1; min-width: 0; border: 1px solid var(--aig-line); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; }
.aig-fb-send { border: 0; border-radius: 8px; padding: 7px 11px; background: var(--aig-orange); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.aig-fb-send:disabled { opacity: .6; cursor: default; }

.aig-card { flex-shrink: 0; align-self: flex-start; width: 100%; background: #fff; border: 1px solid var(--aig-line); border-radius: 12px; overflow: hidden; }
.aig-card img { width: 100%; height: 130px; object-fit: contain; background: #fff; border-bottom: 1px solid var(--aig-line); }
.aig-card-b { padding: 10px 12px; }
.aig-card-name { font-weight: 700; }
.aig-card-sku { font-size: 12px; color: #777; }
.aig-card-price { margin-top: 4px; font-weight: 700; color: var(--aig-orange); }
.aig-card-actions { display: flex; gap: 8px; margin-top: 10px; }
.aig-card-actions a, .aig-card-actions button { flex: 1; text-align: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 13px; font-family: inherit; line-height: 1.3; cursor: pointer; }
.aig-card-actions button { border: 0; }
.aig-card-actions button:disabled { opacity: .6; cursor: default; }
.aig-btn-primary { background: var(--aig-ink); color: #fff; }
.aig-btn-ghost { background: #fff; color: var(--aig-ink); border: 1px solid var(--aig-line); }

.aig-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 14px; }
.aig-chips:empty { padding: 0; }
.aig-chip { border: 1px solid var(--aig-orange); color: var(--aig-orange); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.aig-chip:hover { background: var(--aig-orange); color: #fff; }

.aig-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--aig-line); background: #fff; }
.aig-input input { flex: 1; border: 1px solid var(--aig-line); border-radius: 10px; padding: 9px 11px; font: inherit; }
.aig-input button { border: 0; background: var(--aig-orange); color: #fff; border-radius: 10px; width: 42px; font-size: 18px; cursor: pointer; }

.aig-lead[hidden], .aig-lead-status[hidden] { display: none !important; }
.aig-lead { display: flex; flex-direction: column; gap: 0; padding: 0 14px; border-top: 1px solid var(--aig-line); background: #fff; }
.aig-lead-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 0; padding: 10px 0; border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 13.5px; color: inherit; text-align: left; cursor: pointer; }
.aig-lead-title:hover { color: var(--aig-orange); }
.aig-lead-chevron { color: var(--aig-orange); transition: transform .15s; }
.aig-lead.is-open .aig-lead-chevron { transform: rotate(180deg); }
.aig-lead-fields { display: flex; flex-direction: column; gap: 8px; padding: 0 0 12px; }
.aig-lead-fields[hidden] { display: none !important; }
.aig-lead-open .aig-chips { display: none; }
.aig-lead input[type=text], .aig-lead input[type=email] { border: 1px solid var(--aig-line); border-radius: 9px; padding: 9px 11px; font: inherit; }
.aig-consent { display: flex; gap: 8px; font-size: 12px; color: #555; align-items: flex-start; }
.aig-send-lead { border: 0; background: var(--aig-ink); color: #fff; border-radius: 9px; padding: 10px; font-weight: 600; cursor: pointer; }
.aig-send-lead:disabled { background: #b9bfc6; color: #fff; cursor: not-allowed; opacity: .85; }
.aig-lead-status { margin: 0; font-size: 13px; }

.aig-hidden { display: none !important; }

/* ---- Dock mode (AI Guide phase 5): the guide lives in a customer-dock panel.
   The floating tab/panel markup is only a node holder and stays hidden; the
   chat UI is moved into .xs-cdock-widget--guide's content area. ---- */
#aiguide-root[data-aig-mode="dock"] { display: none !important; }
.xs-cdock-widget--guide .xs-admin-widget-content { padding: 0 !important; }
.xs-cdock-guide { display: flex; flex-direction: column; }
.aig-dock {
    display: flex; flex-direction: column;
    height: min(560px, 62vh);
    font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--aig-ink);
    background: #fff;
}
.aig-dock .aig-body { min-height: 0; }
.aig-dock .aig-chips { padding: 8px 12px 0; background: #f7f8f9; }
.aig-dock .aig-chips:empty { padding: 0; }
.aig-dock .aig-msg-gate { color: var(--aig-ink); }
.xs-cdock-widget--guide .xs-cdock-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.aig-foot-note { font-size: 11px; opacity: .75; }
.aig-foot-reset {
    border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: inherit;
    border-radius: 8px; padding: 4px 9px; font-size: 12px; cursor: pointer;
}
.aig-foot-reset:hover { background: rgba(255, 255, 255, .1); }
@media (max-width: 899px) {
    .aig-dock { height: calc(78vh - 140px); }
}