/* ── Isolamento CSS da temi terzi (WoodMart, XStore, ecc.) ── */
#ll-gala-root * {
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Fix specifico WoodMart: svg:not(:root) { overflow: hidden } taglia le icone */
#ll-gala-root svg,
.ll-gala-fab > svg,
.ll-gala-send > svg {
    overflow: visible !important;
}
#ll-gala-root button,
#ll-gala-root input,
#ll-gala-root a {
    border-radius: inherit !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: none !important;
}
/* Forza font su quick replies e bottoni */
#ll-gala-root .ll-gala-qr,
#ll-gala-root .ll-gala-send,
#ll-gala-root .ll-gala-fab,
#ll-gala-root .ll-gala-operator-btn,
#ll-gala-root .ll-gala-handoff-btn,
#ll-gala-root .ll-gala-size-btn,
#ll-gala-root .ll-gala-close {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* LL Gala Chatbot — Lucas y Lola */
#ll-gala-root {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: static !important;
    transform: none !important;
    will-change: auto !important;
    contain: none !important;
    isolation: auto !important;
    filter: none !important;
    perspective: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: visible !important;
    display: block !important;
}

.ll-gala-fab {
    position: fixed !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99998 !important;
    transition: transform .2s, box-shadow .2s !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.18) !important;
}
#ll-gala-root .ll-gala-handoff-btn:hover { border-color: #2B2318 !important; color: #2B2318 !important; background: #F5F0EA !important; }
#ll-gala-root .ll-gala-size-btn:hover { opacity: .85 !important; }
#ll-gala-root .ll-gala-fab:hover { transform: scale(1.07) !important; }
#ll-gala-root .ll-gala-send:hover { opacity: .85 !important; }
#ll-gala-root button { outline: none !important; }
.ll-gala-fab svg { width: 24px; height: 24px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block !important; overflow: visible !important; }

.ll-gala-fab.ll-pos-bottom-right { bottom: 24px !important; right: 24px !important; top: auto !important; left: auto !important; }
.ll-gala-fab.ll-pos-bottom-left  { bottom: 24px !important; left:  24px !important; top: auto !important; right: auto !important; }
.ll-gala-fab.ll-pos-top-right    { top: 24px !important;    right: 24px !important; bottom: auto !important; left: auto !important; }
.ll-gala-fab.ll-pos-top-left     { top: 24px !important;    left:  24px !important; bottom: auto !important; right: auto !important; }

.ll-gala-panel {
    position: fixed !important;
    width: 360px !important;
    max-height: 540px !important;
    border-radius: 16px !important;
    border: 0.5px solid #E8DDD4 !important;
    background: #F5F0EA !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 99999 !important;
    box-shadow: 0 8px 32px rgba(43,35,24,.14) !important;
}
.ll-gala-panel[style*="flex"] {
    animation: ll-slide-in .22s ease !important;
}
@keyframes ll-slide-in { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform: translateY(0); } }

.ll-gala-panel.ll-pos-bottom-right { bottom: 90px !important; right: 24px !important; top: auto !important; left: auto !important; }
.ll-gala-panel.ll-pos-bottom-left  { bottom: 90px !important; left:  24px !important; top: auto !important; right: auto !important; }
.ll-gala-panel.ll-pos-top-right    { top: 90px !important;    right: 24px !important; bottom: auto !important; left: auto !important; }
.ll-gala-panel.ll-pos-top-left     { top: 90px !important;    left:  24px !important; bottom: auto !important; right: auto !important; }

/* Header */
.ll-gala-header {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 14px;
    flex-shrink: 0;
    pointer-events: none !important;
}
.ll-gala-header * {
    pointer-events: auto !important;
}
.ll-gala-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 500;
    flex-shrink: 0;
}
.ll-gala-header-info { flex: 1; }
.ll-gala-header-name { font-size: 14px; font-weight: 500; color: #F5F0EA; }
.ll-gala-header-status { font-size: 11px; color: rgba(245,240,234,.7); display: flex; align-items: center; gap: 4px; margin-top: 1px; }
.ll-gala-online-dot { width: 6px; height: 6px; border-radius: 50%; background: #5DCAA5; }
.ll-gala-close {
    background: rgba(255,255,255,0.18) !important;
    border: none !important;
    cursor: pointer !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    transition: background .15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;
}
.ll-gala-close:hover { background: rgba(255,255,255,0.32) !important; }

/* Messages */
.ll-gala-messages {
    flex: 1; overflow-y: auto;
    padding: 14px 12px;
    display: flex; flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}
.ll-gala-messages::-webkit-scrollbar { width: 4px; }
.ll-gala-messages::-webkit-scrollbar-track { background: transparent; }
.ll-gala-messages::-webkit-scrollbar-thumb { background: #E8DDD4; border-radius: 2px; }

.ll-gala-bubble {
    max-width: 87%;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
    word-break: break-word;
}
.ll-gala-bubble.ll-from-gala {
    background: #fff;
    color: #1A1410;
    border: 0.5px solid #E8DDD4;
    border-bottom-left-radius: 3px;
    align-self: flex-start;
}
.ll-gala-bubble.ll-from-user {
    color: #F5F0EA;
    border-bottom-right-radius: 3px;
    align-self: flex-end;
}

/* Typing indicator */
.ll-gala-typing {
    display: flex; gap: 5px; align-items: center;
    padding: 10px 14px;
    align-self: flex-start;
    background: #fff;
    border: 0.5px solid #E8DDD4;
    border-radius: 12px;
    border-bottom-left-radius: 3px;
}
.ll-gala-typing span {
    width: 6px; height: 6px; border-radius: 50%; background: #B4B2A9;
    animation: ll-blink 1.2s infinite;
}
.ll-gala-typing span:nth-child(2) { animation-delay: .2s; }
.ll-gala-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ll-blink { 0%,80%,100%{opacity:.25} 40%{opacity:1} }

/* Product card */
.ll-gala-product-card {
    display: flex; gap: 10px;
    background: #fff;
    border: 0.5px solid #E8DDD4;
    border-radius: 10px;
    padding: 10px;
    align-self: flex-start;
    max-width: 92%;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s;
}
.ll-gala-product-card:hover { border-color: #B4B2A9; }
.ll-gala-product-thumb {
    width: 60px; height: 60px; border-radius: 7px;
    object-fit: cover; flex-shrink: 0;
    background: #E8DDD4;
}
.ll-gala-product-info { flex: 1; min-width: 0; }
.ll-gala-product-name { font-size: 12px; font-weight: 500; color: #1A1410; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-gala-product-price { font-size: 13px; font-weight: 500; color: #2B2318; }
.ll-gala-product-attrs { font-size: 11px; color: #7a6552; margin-top: 2px; }
.ll-gala-product-stock { font-size: 11px; margin-top: 3px; }
.ll-gala-product-stock.in  { color: #1D9E75; }
.ll-gala-product-stock.out { color: #D85A30; }

/* Handoff button */
.ll-gala-handoff-btn {
    align-self: flex-start;
    background: #F5F0EA;
    border: 0.5px solid #E8DDD4;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    color: #2B2318;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    text-decoration: none;
    transition: border-color .15s;
}
.ll-gala-handoff-btn:hover { border-color: #2B2318; }

/* Size guide */
.ll-gala-size-btn {
    align-self: flex-start;
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: opacity .15s;
}
.ll-gala-size-btn:hover { opacity: .85; }

/* Quick replies */
.ll-gala-qr-wrap {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 0 12px 10px;
    flex-shrink: 0;
}
#ll-gala-root .ll-gala-qr {
    background: #fff !important;
    border: 0.5px solid #E8DDD4 !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    color: #1A1410 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: border-color .15s, background .15s !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
#ll-gala-root .ll-gala-qr:hover {
    background: #F5F0EA !important;
    border-color: #B4B2A9 !important;
    color: #1A1410 !important;
}

/* Bottone operatore nella barra input */
#ll-gala-root .ll-gala-operator-btn {
    width: 34px !important; height: 34px !important;
    border-radius: 50% !important; border: none !important;
    cursor: pointer !important; flex-shrink: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    transition: opacity .15s !important;
    box-shadow: none !important;
}
#ll-gala-root .ll-gala-operator-btn:hover { opacity: .8 !important; }
.ll-gala-input-row {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    border-top: 0.5px solid #E8DDD4;
    background: #F5F0EA;
    flex-shrink: 0;
}
.ll-gala-input {
    flex: 1;
    background: #fff;
    border: 0.5px solid #E8DDD4;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 13px;
    color: #1A1410;
    outline: none;
    font-family: inherit;
    transition: border-color .15s;
}
.ll-gala-input:focus { border-color: #B4B2A9; }
.ll-gala-input::placeholder { color: #B4B2A9; }
.ll-gala-send {
    width: 34px; height: 34px; border-radius: 50%; border: none;
    cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .15s;
}
.ll-gala-send:hover { opacity: .85; }
.ll-gala-send svg { width: 15px; height: 15px; fill: none; stroke: #F5F0EA; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Size guide modal overlay */
.ll-gala-size-modal {
    position: fixed; inset: 0;
    background: rgba(26,20,16,.5);
    z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.ll-gala-size-modal-inner {
    background: #F5F0EA;
    border-radius: 16px;
    padding: 20px 20px 24px !important;
    max-width: 360px; width: 100%;
    max-height: 85vh;
    position: relative;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}
.ll-gala-size-modal h3 { font-size: 16px; font-weight: 500; color: #1A1410; margin: 0; }
.ll-gala-size-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ll-gala-size-table th { background: #E8DDD4; padding: 6px 8px; text-align: left; font-weight: 500; }
.ll-gala-size-table td { padding: 6px 8px; border-bottom: 0.5px solid #E8DDD4; }
.ll-gala-size-close {
    position: absolute; top: 12px; right: 12px;
    background: #2B2318; border: none;
    width: 32px; height: 32px; border-radius: 50%;
    font-size: 20px; font-weight: 700; line-height: 1;
    cursor: pointer; color: #fff;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.ll-gala-size-close:hover { background: #1a1410; }
/* Header fisso con titolo + scroll body */
.ll-gala-size-header {
    padding: 18px 20px 12px;
    flex-shrink: 0;
    border-bottom: 0.5px solid #E8DDD4;
}
.ll-gala-size-body {
    padding: 16px 20px 20px;
    overflow-y: auto;
    flex: 1;
}

@media (max-width: 480px) {
    .ll-gala-panel { width: calc(100vw - 24px); right: 12px !important; left: 12px !important; }
    .ll-gala-size-modal { padding: 10px; align-items: flex-start; padding-top: 30px; }
    .ll-gala-size-modal-inner { max-height: 88vh; }
}

/* ── Override WoodMart: massima specificità per battere var(--wd-primary) ── */
html body #ll-gala-root .ll-gala-fab,
html body .ll-gala-fab {
    background-color: var(--ll-gala-primary, #2B2318) !important;
    border: none !important;
}
html body #ll-gala-root .ll-gala-header,
html body .ll-gala-header {
    background-color: var(--ll-gala-primary, #2B2318) !important;
}
html body #ll-gala-root .ll-gala-send,
html body .ll-gala-send {
    background-color: var(--ll-gala-primary, #2B2318) !important;
    border: none !important;
}
html body #ll-gala-root .ll-gala-bubble.ll-from-user {
    background-color: var(--ll-gala-primary, #2B2318) !important;
}
html body #ll-gala-root .ll-gala-avatar,
html body .ll-gala-avatar {
    background-color: var(--ll-gala-accent, #fcb6b6) !important;
    color: var(--ll-gala-primary, #2B2318) !important;
}
html body #ll-gala-root .ll-gala-operator-btn {
    background-color: var(--ll-gala-accent, #fcb6b6) !important;
    color: var(--ll-gala-primary, #2B2318) !important;
    border: none !important;
}

/* ── Fix SVG icone Gala (WoodMart nasconde svg globalmente) ── */
#ll-gala-root svg,
.ll-gala-fab svg,
.ll-gala-send svg {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 24px !important;
    height: 24px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    overflow: visible !important;
}
.ll-gala-send svg {
    width: 15px !important;
    height: 15px !important;
    stroke: #F5F0EA !important;
}

/* ── Fix bottone chiudi modal ── */
html body .ll-gala-size-close,
html body #ll-gala-root .ll-gala-size-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background: #2B2318 !important;
    background-color: #2B2318 !important;
    border: none !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: #fff !important;
    z-index: 100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-weight: 400 !important;
}
html body .ll-gala-size-close:hover,
html body #ll-gala-root .ll-gala-size-close:hover {
    background: #1a1410 !important;
    background-color: #1a1410 !important;
}

/* ── Fix input e textarea nel modal ── */
.ll-gala-size-modal-inner input,
.ll-gala-size-modal-inner textarea {
    display: block !important;
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid #E8DDD4 !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
    background: #fff !important;
    color: #1A1410 !important;
    margin-bottom: 8px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.ll-gala-size-modal-inner textarea {
    resize: none !important;
    margin-bottom: 12px !important;
    min-height: 80px !important;
}
.ll-gala-size-modal-inner button[type="button"],
.ll-gala-size-modal-inner #ll-op-send {
    width: 100% !important;
    padding: 10px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    display: block !important;
    text-align: center !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* ── Fix header modal h3 ── */
.ll-gala-size-modal-inner h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1A1410 !important;
    margin: 0 0 4px !important;
    margin-top: 40px !important;
    padding: 0 !important;
    padding-right: 36px !important;
    line-height: 1.3 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.ll-gala-size-modal-inner p {
    font-size: 12px !important;
    color: #7a6552 !important;
    margin: 0 0 14px !important;
    line-height: 1.4 !important;
}

/* ── Pointer events espliciti su bottoni Gala ── */
.ll-gala-close,
.ll-gala-fab,
.ll-gala-send,
.ll-gala-qr,
.ll-gala-operator-btn,
.ll-gala-handoff-btn,
.ll-gala-size-btn,
.ll-gala-size-close {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Close button: z-index specifico */
.ll-gala-panel .ll-gala-close {
    position: relative !important;
    z-index: 100001 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Close button: z-index extra alto per stare sopra qualsiasi overlay WoodMart */
.ll-gala-panel .ll-gala-close {
    z-index: 100001 !important;
    pointer-events: auto !important;
}

/* Panel header: non blocca i click sui figli */
.ll-gala-header {
    pointer-events: auto !important;
}

/* ── Fix quick replies visibilità (WoodMart resetta display sui button) ── */
.ll-gala-qr-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 0 12px 10px !important;
    flex-shrink: 0 !important;
}
.ll-gala-qr-wrap .ll-gala-qr {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ── Override WoodMart colori quick reply (specificità massima) ── */
html body #ll-gala-root .ll-gala-qr,
html body #ll-gala-root .ll-gala-qr-wrap .ll-gala-qr,
html body .ll-gala-qr-wrap .ll-gala-qr {
    background: #fff !important;
    background-color: #fff !important;
    color: #1A1410 !important;
    border: 0.5px solid #E8DDD4 !important;
    border-radius: 20px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    min-width: 0 !important;
    max-width: 48% !important;
    flex: 1 1 auto !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
html body #ll-gala-root .ll-gala-qr:hover,
html body .ll-gala-qr-wrap .ll-gala-qr:hover {
    background: #F5F0EA !important;
    background-color: #F5F0EA !important;
    border-color: #B4B2A9 !important;
    color: #1A1410 !important;
}

/* ── Fix icone SVG nel FAB ── */
.ll-gala-fab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.ll-gala-fab svg path,
.ll-gala-fab svg line,
.ll-gala-fab svg circle,
.ll-gala-fab svg polyline,
.ll-gala-fab svg rect {
    stroke: #fff !important;
    fill: none !important;
}

/* ── Reset font elements nel modal (tema inietta stili su font tag) ── */
.ll-gala-size-modal-inner font,
.ll-gala-size-modal-inner font * {
    background-color: transparent !important;
    box-shadow: none !important;
    position: initial !important;
    unicode-bidi: normal !important;
}
.ll-gala-size-modal-inner {
    padding: 20px !important;
    padding-top: 48px !important;
}
.ll-gala-size-header {
    padding: 0 0 12px !important;
    padding-right: 40px !important;
}