.lc-root {
    --lc-color: var(--b2c-primary, #1d4ed8);
    --lc-bottom: 20px;
    --lc-ink: var(--b2c-ink, #171a1f);
    --lc-muted: var(--b2c-steel, #6b7280);
    --lc-line: var(--b2c-line, #e6e8ec);
    --lc-soft: var(--b2c-surface-muted, #f6f7f9);
    --lc-right: 20px;
    position: fixed;
    right: var(--lc-right);
    bottom: var(--lc-bottom);
    z-index: 1045;
    transition: right .4s cubic-bezier(.34, 1.56, .64, 1);
    font-size: .9rem;
    color: var(--lc-ink);
}
.lc-root [hidden] { display: none !important; }
body.has-cookie-banner .lc-root { --lc-bottom: calc(var(--cookie-banner-h, 0px) + 14px); }

.lc-fab {
    position: relative;
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--lc-color);
    color: #fff;
    font-size: 1.45rem;
    box-shadow: 0 8px 22px rgba(23, 26, 31, .22);
    cursor: pointer;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), width .4s cubic-bezier(.34, 1.56, .64, 1), height .4s cubic-bezier(.34, 1.56, .64, 1), border-radius .3s ease, box-shadow .15s ease;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.lc-fab:hover { box-shadow: 0 10px 26px rgba(23, 26, 31, .28); }
.lc-fab-arrow { display: none; }
.lc-root.is-open .lc-fab { display: none; }
.lc-fab-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border: 2px solid #fff;
    border-radius: 11px;
    background: var(--b2c-accent, #e31e24);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.lc-window {
    width: 380px;
    height: 600px;
    max-height: calc(100vh - var(--lc-bottom) - 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--lc-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(23, 26, 31, .22);
}

.lc-head { display: flex; align-items: center; gap: .7rem; padding: .75rem .7rem .75rem .9rem; background: var(--lc-color); color: #fff; }
.lc-head-avatar {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-weight: 700;
}
.lc-head-avatar img { width: 26px; height: 26px; object-fit: contain; border-radius: 4px; }
.lc-head-avatar.is-online::after { content: ""; position: absolute; right: 0; bottom: 0; width: 11px; height: 11px; border: 2px solid var(--lc-color); border-radius: 50%; background: #22c55e; }
.lc-head-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lc-head-text strong { font-size: .98rem; line-height: 1.2; }
.lc-presence { font-size: .76rem; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-icon-btn { width: 34px; height: 34px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; }
.lc-head .lc-icon-btn:hover { background: rgba(255, 255, 255, .16); }
.lc-head { gap: .35rem; }
.lc-head .lc-head-avatar { margin-right: .35rem; }
.lc-head-link { color: #fff; font-size: 1rem; text-decoration: none; }
.lc-head-link:hover { color: #fff; }
.lc-icon-btn.is-small { width: 30px; height: 30px; color: var(--lc-muted); }
.lc-icon-btn.is-small:hover { background: var(--lc-soft); color: var(--lc-ink); }

.lc-tabs { display: flex; padding: 0 .5rem; border-bottom: 1px solid var(--lc-line); background: #fff; overflow-x: auto; scrollbar-width: none; }
.lc-tabs::-webkit-scrollbar { display: none; }
.lc-tab { flex: 1 0 auto; padding: .6rem .55rem .55rem; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--lc-muted); font-size: .8rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.lc-tab:hover { color: var(--lc-ink); }
.lc-tab.is-active { color: var(--lc-ink); border-bottom-color: var(--lc-color); }
.lc-tab span:not(:empty) { display: inline-block; min-width: 17px; margin-left: 2px; padding: 0 4px; border-radius: 9px; background: var(--b2c-accent, #e31e24); color: #fff; font-size: .65rem; line-height: 16px; text-align: center; }

.lc-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.lc-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 42px; padding: .35rem .6rem .35rem .75rem; border-bottom: 1px solid var(--lc-line); background: #fff; }
.lc-bar-text { color: var(--lc-muted); font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-bar-title { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.lc-bar-title strong { font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-bar-title span { color: var(--lc-muted); font-size: .74rem; }
.lc-bar-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .6rem; border: 1px solid var(--lc-line); border-radius: 6px; background: #fff; color: var(--lc-ink); font-size: .76rem; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; }
.lc-bar-btn:hover { border-color: var(--lc-muted); color: var(--lc-ink); text-decoration: none; }
.lc-bar-btn i { color: var(--lc-muted); font-size: .72rem; }
.lc-bar-btn.is-end { margin-left: auto; color: var(--b2c-danger, #c0272d); }

.lc-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .45rem; padding: .9rem .85rem; background: var(--lc-soft); }
.lc-msg { max-width: 80%; padding: .45rem .7rem .4rem; border: 1px solid var(--lc-line); border-radius: 14px; background: #fff; box-shadow: 0 1px 1px rgba(23, 26, 31, .03); }
.lc-msg.is-staff { align-self: flex-start; border-bottom-left-radius: 4px; }
.lc-msg.is-customer { align-self: flex-end; background: color-mix(in srgb, var(--lc-color) 13%, #fff); border-color: transparent; border-bottom-right-radius: 4px; }
.lc-msg-who { margin-bottom: .1rem; color: var(--lc-color); font-size: .72rem; font-weight: 700; }
.lc-msg-body { white-space: pre-line; word-break: break-word; line-height: 1.45; }
.lc-msg-foot { display: flex; align-items: center; justify-content: flex-end; gap: .3rem; margin-top: .1rem; color: var(--lc-muted); font-size: .68rem; }
.lc-msg-foot .is-read { color: var(--lc-color); font-weight: 600; }
.lc-msg-foot i { font-size: .62rem; margin-right: .12rem; }
.lc-msg-stars { color: #e0a100; font-size: .7rem; margin-bottom: .15rem; }

.lc-quick { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; padding: .55rem .85rem .65rem; border-top: 1px solid var(--lc-line); background: var(--lc-soft); max-height: 140px; overflow-y: auto; }
.lc-quick-btn { padding: .35rem .7rem; border: 1px solid color-mix(in srgb, var(--lc-color) 45%, transparent); border-radius: 16px; background: #fff; color: var(--lc-color); font-size: .78rem; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; }
.lc-quick-btn:hover { background: color-mix(in srgb, var(--lc-color) 8%, #fff); }

.lc-ended { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem .85rem; border-top: 1px solid var(--lc-line); background: var(--lc-soft); color: var(--lc-muted); font-size: .78rem; }

.lc-composer { position: relative; margin: 0; padding: .6rem; border-top: 1px solid var(--lc-line); background: #fff; }
.lc-quick-toggle { width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--lc-line); border-radius: 50%; background: #fff; color: var(--lc-muted); cursor: pointer; }
.lc-quick-toggle:hover, .lc-quick-toggle.is-active { border-color: var(--lc-color); color: var(--lc-color); }
.lc-quick-menu { position: absolute; left: .6rem; right: .6rem; bottom: calc(100% - 4px); max-height: 240px; display: flex; flex-direction: column; border: 1px solid var(--lc-line); border-radius: 10px; background: #fff; box-shadow: 0 10px 28px rgba(23, 26, 31, .16); overflow: hidden; z-index: 2; }
.lc-quick-menu[hidden] { display: none; }
.lc-quick-menu-head { padding: .5rem .75rem; border-bottom: 1px solid var(--lc-line); color: var(--lc-muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.lc-quick-menu-list { overflow-y: auto; overscroll-behavior: contain; }
.lc-quick-item { width: 100%; display: block; padding: .6rem .75rem; border: 0; border-bottom: 1px solid var(--b2c-line-soft, var(--lc-line)); background: none; color: var(--lc-ink); font-size: .84rem; text-align: left; cursor: pointer; }
.lc-quick-item:last-child { border-bottom: 0; }
.lc-quick-item:hover { background: var(--lc-soft); }
.lc-intro { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .45rem; }
.lc-intro input { min-width: 0; height: 36px; padding: 0 .65rem; border: 1px solid var(--lc-line); border-radius: 8px; font-size: .82rem; }
.lc-intro input:focus { outline: none; border-color: var(--lc-color); }
.lc-composer-row { display: flex; align-items: flex-end; gap: .45rem; }
.lc-composer textarea {
    flex: 1;
    min-height: 40px;
    max-height: 120px;
    padding: .55rem .85rem;
    border: 1px solid var(--lc-line);
    border-radius: 20px;
    background: var(--lc-soft);
    font-size: .88rem;
    line-height: 1.4;
    resize: none;
}
.lc-composer textarea:focus { outline: none; border-color: var(--lc-color); background: #fff; }
.lc-send { width: 40px; height: 40px; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--lc-color); color: #fff; cursor: pointer; }
.lc-send:disabled { opacity: .55; cursor: default; }
.lc-error { margin: .4rem .2rem 0; color: var(--b2c-danger, #c0272d); font-size: .78rem; font-weight: 600; }

.lc-list { flex: 1; overflow-y: auto; background: #fff; }
.lc-item { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .6rem; padding: .7rem .85rem; border: 0; border-bottom: 1px solid var(--b2c-line-soft, var(--lc-line)); background: none; color: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.lc-item:hover { background: var(--lc-soft); color: inherit; text-decoration: none; }
.lc-item.is-static { cursor: default; }
.lc-item.is-static:hover { background: none; }
.lc-item-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .85rem; }
.lc-item-time { color: var(--lc-muted); font-size: .72rem; white-space: nowrap; }
.lc-item-text { grid-column: 1 / -1; min-width: 0; color: var(--lc-muted); font-size: .8rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lc-item-reply { grid-column: 1 / -1; margin-top: .25rem; padding-left: .6rem; border-left: 2px solid var(--lc-line); color: var(--lc-ink); font-size: .8rem; }
.lc-item-reply b { display: block; color: var(--lc-muted); font-size: .7rem; }
.lc-item-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; margin-top: .2rem; }
.lc-status { padding: .05rem .45rem; border-radius: 4px; background: var(--lc-soft); color: var(--lc-muted); font-size: .68rem; font-weight: 700; }
.lc-status.is-open { background: var(--b2c-warning-soft, #fdf1e0); color: var(--b2c-warning, #b45309); }
.lc-status.is-answered { background: var(--b2c-success-soft, #e7f6ec); color: var(--b2c-success, #15803d); }
.lc-new-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--b2c-accent, #e31e24); }
.lc-list-empty { padding: 2rem 1rem; text-align: center; color: var(--lc-muted); font-size: .84rem; }
.lc-list-empty a { display: inline-block; margin-top: .6rem; }

@media print {
    .lc-root { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .lc-fab { transition: none; }
}

@media (max-width: 480px) {
    .lc-root { --lc-right: 14px; --lc-bottom: 14px; }
    .lc-fab { width: 50px; height: 50px; font-size: 1.25rem; }
    .lc-root.is-open { inset: 0; z-index: 10900; }
    .lc-window { width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
    .lc-head { padding-top: calc(.75rem + env(safe-area-inset-top)); }
    .lc-composer { padding-bottom: calc(.6rem + env(safe-area-inset-bottom)); }
    .lc-composer textarea, .lc-intro input { font-size: 16px; }
    .lc-msg { max-width: 86%; }
}
.lc-bar .lc-icon-btn + .lc-bar-text { flex: 1; }

.lc-root.is-dragging .lc-fab { transition: none; cursor: grabbing; }

.lc-offline { display: flex; align-items: center; gap: .45rem; padding: .45rem .85rem; border-top: 1px solid var(--lc-line); background: var(--b2c-warning-soft, #fdf1e0); color: var(--b2c-warning, #b45309); font-size: .76rem; font-weight: 600; line-height: 1.35; }
.lc-offline i { flex-shrink: 0; font-size: .75rem; }

.lc-login { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem .85rem; border-top: 1px solid var(--lc-line); background: #fff; }
.lc-login p { margin: 0; color: var(--lc-ink); font-size: .82rem; }
.lc-login-btn { flex-shrink: 0; padding: .45rem .9rem; border-radius: 6px; background: var(--lc-color); color: #fff; font-size: .8rem; font-weight: 600; text-decoration: none; }
.lc-login-btn:hover { color: #fff; filter: brightness(.95); }

.lc-composer textarea.is-empty-flash { animation: lcEmptyFlash .9s ease; }
@keyframes lcEmptyFlash {
    0% { border-color: var(--b2c-danger, #c0272d); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b2c-danger, #c0272d) 22%, transparent); }
    100% { border-color: var(--lc-line); box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .lc-composer textarea.is-empty-flash { animation: none; border-color: var(--b2c-danger, #c0272d); }
}

@media (max-width: 767.98px) {
    .lc-fab { touch-action: pan-y; }
}
.lc-root.is-docked { right: 0; }
.lc-root.is-docked .lc-fab {
    width: 38px;
    height: 60px;
    flex-direction: column;
    gap: 4px;
    border-radius: 14px 0 0 14px;
    font-size: 1rem;
    box-shadow: -4px 6px 18px rgba(23, 26, 31, .28);
}
.lc-root.is-docked .lc-fab-arrow { display: block; font-size: .68rem; opacity: .9; }
.lc-root.is-docked .lc-fab-badge { top: -7px; right: auto; left: -7px; }
.lc-root.is-dragging { right: calc(var(--lc-p, 0) * var(--lc-right)); transition: none; }
.lc-root.is-dragging .lc-fab {
    width: calc(38px + 18px * var(--lc-p, 0));
    height: calc(60px - 4px * var(--lc-p, 0));
    flex-direction: column;
    gap: calc(4px - 4px * var(--lc-p, 0));
    border-radius: calc(14px + 14px * var(--lc-p, 0)) calc(28px * var(--lc-p, 0)) calc(28px * var(--lc-p, 0)) calc(14px + 14px * var(--lc-p, 0));
    font-size: calc(1rem + .45rem * var(--lc-p, 0));
    transition: none;
}
.lc-root.is-dragging .lc-fab-arrow { display: block; font-size: .68rem; opacity: calc(1 - var(--lc-p, 0)); max-height: calc(12px - 12px * var(--lc-p, 0)); overflow: hidden; }
.lc-fab.whatsapp-fab, .lc-fab.whatsapp-fab:hover { color: #fff; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
    .lc-root, .lc-fab { transition: none; }
}
.lc-offline-hours { font-weight: 500; opacity: .8; white-space: nowrap; }

.lc-messages, .lc-list { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.lc-window { overscroll-behavior: contain; }
html.lc-scroll-lock, html.lc-scroll-lock body { overflow: hidden !important; overscroll-behavior: none; }
.lc-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lc-composer textarea { overflow-y: hidden; }
.lc-wait { border-top-style: dashed; }