html:has(#crmInbox),
html:has(#crmInbox) body {
    height: var(--vvh, 100dvh);
    max-height: var(--vvh, 100dvh);
    overflow: hidden;
    overscroll-behavior: none;
}

body:has(#crmInbox) {
    height: var(--vvh, 100dvh);
    margin-bottom: 0 !important;
    overflow: hidden;
}

body:has(#crmInbox) .app-content.content,
html body:has(#crmInbox) .content.app-content.pc-blazor-shell,
html body.pc-chat-open:has(#crmInbox) .app-content.content {
    display: flex;
    flex-direction: column;
    height: var(--vvh, 100dvh);
    max-height: var(--vvh, 100dvh);
    max-width: none !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    box-sizing: border-box;
    right: 0 !important;
    left: var(--vv-left, 0px);
    top: var(--vv-top, 0px);
    /* auto: 100vw + left del rail recortaba la ficha y el boton X. */
    width: auto !important;
}

body:has(#crmInbox) .pc-chat-panel {
    display: none !important;
}

body:has(#crmInbox) .app-content.content,
html body:has(#crmInbox) .content.app-content {
    isolation: isolate;
    z-index: 1 !important;
}

body:has(#crmInbox) .drag-target,
body:has(#crmInbox) .sidenav-overlay {
    display: none !important;
    pointer-events: none !important;
}

body:has(#crmInbox) .main-menu.pc-sidebar {
    z-index: 4000 !important;
}

@media (max-width: 991.98px) {
    body:has(#crmInbox):not(.menu-open):not(.pc-nav-open) .main-menu.pc-sidebar {
        pointer-events: none !important;
    }
}

body:has(#crmInbox) .content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin: 0 !important;
    max-width: none !important;
    min-height: 0;
    overflow: hidden;
    padding: 0 !important;
    width: 100% !important;
}

body:has(#crmInbox) .content-header {
    display: none !important;
}

body:has(#crmInbox) .content-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
}

@media (min-width: 992px) {
    html body:has(#crmInbox) .content.app-content.pc-blazor-shell,
    html body:has(#crmInbox) .app-content.pc-blazor-shell {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 80px !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    html body.menu-expanded:has(#crmInbox) .content.app-content.pc-blazor-shell,
    html body.menu-expanded:has(#crmInbox) .app-content.pc-blazor-shell {
        left: 260px !important;
    }
}

@media (max-width: 991.98px) {
    html body:has(#crmInbox) .content.app-content.pc-blazor-shell,
    html body:has(#crmInbox) .app-content.pc-blazor-shell {
        position: fixed !important;
        inset: 0 !important;
        left: var(--vv-left, 0px) !important;
        top: var(--vv-top, 0px) !important;
        right: auto !important;
        width: var(--vvw, 100%) !important;
        height: var(--vvh, 100dvh) !important;
        max-height: var(--vvh, 100dvh) !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Plantillas: hero + padding lateral en desktop; full-bleed solo en mobile */
@media (min-width: 992px) {
    body:has(#crmTemplates) .content-header {
        display: block !important;
        flex: 0 0 auto;
    }

    body:has(#crmTemplates) .content-header .pc-page-hero-wrap {
        padding-bottom: .25rem;
    }

    body:has(#crmTemplates) .content-body {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        padding-top: 0 !important;
        overflow: auto;
    }
}

@media (max-width: 991px) {
    body:has(#crmTemplates) .content-header {
        display: none !important;
    }

    body:has(#crmTemplates) .content-body {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body:has(#crmInbox) .header-navbar,
    body:has(#crmInbox) .header-navbar-shadow {
        display: none !important;
    }

    body:has(#crmInbox) .app-content.content,
    html body:has(#crmInbox) .content.app-content {
        padding-top: 0 !important;
    }
}

.crm-wa .min-w-0 {
    min-width: 0;
}

.crm-wa .visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.crm-wa {
    --wa-list: 400px;
    --wa-profile: 368px;
    --wa-row: 52px;
    --wa-head: 64px;
    --wa-chip: 28px;
    --wa-icon: 36px;
    --wa-avatar: 34px;
    --wa-bubble-in: #ffffff;
    --wa-bubble-out: #d9fdd3;
    --wa-paper: #efeae2;
    --wa-doodle: url("../img/crm-wa-doodle.svg");
    color: var(--gray-0);
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    margin: 0;
    max-width: none;
    min-height: 0;
    overflow: hidden;
    width: 100%;
}

.crm-wa [data-lucide] {
    width: 16px;
    height: 16px;
    stroke-width: 1.75;
    flex: 0 0 auto;
}

.crm-wa[data-blazor] i[data-lucide] {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    line-height: 0;
    vertical-align: middle;
}

.crm-wa[data-blazor] i[data-lucide] > svg {
    display: block;
    height: 100%;
    width: 100%;
}

.crm-wa__shell {
    display: grid;
    grid-template-columns: minmax(0, var(--wa-list)) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    min-width: 0;
    flex: 1 1 auto;
    background: var(--cc-surface);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 0 12px 32px rgba(9, 9, 11, .08);
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.crm-wa.is-profile .crm-wa__shell {
    grid-template-columns: minmax(0, var(--wa-list)) minmax(0, 1fr) minmax(0, var(--wa-profile));
}

.crm-wa.is-compose .crm-wa__shell,
.crm-wa.is-compose.is-profile .crm-wa__shell {
    grid-template-columns: minmax(0, var(--wa-list)) minmax(0, 1fr);
}

.crm-wa.is-compose .crm-wa__chat,
.crm-wa.is-compose .crm-wa__profile {
    display: none !important;
}

/* Desktop: "Nuevo chat" ocupa la columna del chat (no hoja inferior ni overlay). */
.crm-wa.is-compose .crm-wa__compose {
    background: var(--cc-surface);
    border-left: 1px solid var(--border);
    min-height: 0;
    position: relative;
    transform: none;
    z-index: auto;
}

.crm-wa__list,
.crm-wa__chat,
.crm-wa__profile,
.crm-wa__compose,
.crm-tpl__preview {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.crm-wa__list,
.crm-wa__chat,
.crm-wa__profile,
.crm-wa__compose {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.crm-wa__list {
    background: var(--cc-surface);
    border-right: 1px solid var(--border);
}

.crm-wa__profile {
    border-left: 1px solid var(--border);
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    width: auto;
}

.crm-wa__list-bar {
    display: contents;
}

.crm-wa__list-head,
.crm-tpl__toolbar {
    align-items: center;
    display: flex;
    height: var(--wa-head);
    justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.crm-wa__icon-btn.crm-wa__search-btn,
.crm-wa__search-panel {
    display: none;
}

.crm-wa__nav-menu,
.crm-wa__more-menu {
    display: none !important;
}

.crm-wa__brand {
    align-items: center;
    display: flex;
    gap: .55rem;
    min-width: 0;
}

.crm-wa__brand-icon {
    align-items: center;
    background: var(--pc-cyan-muted);
    color: var(--pc-cyan);
    display: inline-flex;
    height: 28px;
    justify-content: center;
    width: 28px;
}

.crm-wa__brand strong,
.crm-wa__chat-name {
    display: block;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: inherit;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-wa__chat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin: .12rem 0 .08rem;
    min-width: 0;
}

.crm-wa__chat-tags[hidden] {
    display: none;
}

.crm-wa__brand small,
.crm-wa__chat-sub {
    color: var(--gray-70);
    display: block;
    font-size: 11px;
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-wa__window-chip,
.crm-wa__window-bar {
    align-items: center;
    border: 1px solid var(--border);
    display: inline-flex;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    gap: .35rem;
    line-height: 1;
    white-space: nowrap;
}

.crm-wa__window-chip {
    border-radius: 999px;
    margin-top: .35rem;
    max-width: 100%;
    padding: .22rem .55rem;
}

.crm-wa__window-bar {
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    justify-content: center;
    padding: .35rem .75rem;
    width: 100%;
}

.crm-wa__window-chip [data-lucide],
.crm-wa__window-bar [data-lucide] {
    flex: 0 0 13px;
    height: 13px;
    width: 13px;
}

.crm-wa__window-chip.is-open,
.crm-wa__window-bar.is-open {
    background: color-mix(in srgb, var(--success, #16a34a) 14%, transparent);
    border-color: color-mix(in srgb, var(--success, #16a34a) 40%, var(--border));
    color: var(--success, #15803d);
}

.crm-wa__window-chip.is-closed,
.crm-wa__window-bar.is-closed {
    background: color-mix(in srgb, var(--chip-danger, #dc2626) 10%, transparent);
    border-color: color-mix(in srgb, var(--chip-danger, #dc2626) 35%, var(--border));
    color: var(--chip-danger, #b91c1c);
}

.crm-wa__window-mini {
    color: var(--success, #15803d);
    flex: 0 0 auto;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    white-space: nowrap;
}

.crm-wa__window-mini.is-off {
    color: var(--gray-60);
    font-weight: 500;
}

.crm-wa__thread-foot {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: .3rem;
    margin-top: 0;
    min-width: 0;
}

.crm-wa__thread-meta .crm-wa__thread-foot {
    flex: 1 1 auto;
    margin-top: 0;
}

.crm-wa__line-mini {
    align-items: center;
    color: var(--gray-50);
    display: inline-flex;
    flex: 1 1 auto;
    font-size: 10px;
    font-weight: 600;
    gap: .3rem;
    letter-spacing: 0;
    min-width: 0;
    overflow: hidden;
}

.crm-wa__line-mini-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-wa__line-mini-tag {
    color: inherit;
    flex: 0 0 auto;
    white-space: nowrap;
}

.crm-wa__line-mini.is-blocked {
    color: var(--danger, #b42318);
}

.crm-wa__line-mini.is-limited {
    color: var(--warning, #b54708);
}

.crm-wa__filters {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crm-wa__filter-more {
    min-width: 0;
}

.crm-wa__filter-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--gray-40);
    cursor: pointer;
    display: none;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    min-height: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.crm-wa__filter-toggle.is-on {
    color: var(--chip-info);
}

.crm-wa__filter-toggle > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-wa__filter-toggle svg,
.crm-wa__filter-toggle i[data-lucide] {
    flex: 0 0 auto;
    height: 14px;
    width: 14px;
}

.crm-wa__filter-more.is-open .crm-wa__filter-toggle svg:last-child,
.crm-wa__filter-more.is-open .crm-wa__filter-toggle i[data-lucide]:last-child {
    transform: rotate(180deg);
}

.crm-wa__chips--accounts,
.crm-wa__chips--lines {
    padding-top: 0;
}

.crm-wa__chips--accounts {
    padding-bottom: .3rem;
}

.crm-wa__compose-scrim,
.crm-wa__compose-handle {
    display: none;
}

.crm-wa__icon-actions {
    align-items: center;
    display: flex;
    gap: .15rem;
}

.crm-wa__icon-btn {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--gray-40);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 var(--wa-icon);
    height: var(--wa-icon);
    justify-content: center;
    padding: 0;
    width: var(--wa-icon);
}

.crm-wa__back,
.crm-wa__profile-back,
.crm-wa__compose-back {
    position: relative;
    z-index: 3;
}

.crm-wa__icon-btn:hover,
.crm-wa__icon-btn[aria-expanded="true"] {
    background: var(--accent-muted);
    color: var(--accent);
}

/* El permiso de llamadas es un estado del cliente, no un icono efímero. */
.crm-wa__icon-btn.is-call-pending {
    background: #fff4d6;
    color: #a25d00;
}

.crm-wa__icon-btn.is-call-available {
    background: #e2efff;
    color: #1769d4;
}

.crm-wa__icon-btn.is-call-blocked {
    background: #fee2e2;
    color: #c72525;
    cursor: not-allowed;
}

.crm-wa__icon-btn.is-call-unavailable {
    background: #f1f5f9;
    color: #64748b;
}

.crm-wa__icon-btn:focus-visible,
.crm-wa__chip:focus-visible,
.crm-wa__thread:focus-visible,
.crm-tpl__row:focus-visible {
    outline: 2px solid var(--pc-cyan);
    outline-offset: 1px;
}

.crm-wa__skeleton-list,
.crm-wa__skeleton-chat {
    width: 100%;
}

.crm-wa__skeleton-row {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: .65rem;
    grid-template-columns: var(--wa-avatar, 42px) minmax(0, 1fr);
    min-height: var(--wa-row, 64px);
    padding: .55rem .75rem;
}

.crm-wa__skeleton-avatar,
.crm-wa__skeleton-line,
.crm-wa__skeleton-bubble {
    animation: pc-skeleton-pulse 1.5s ease-in-out infinite;
    background: color-mix(in srgb, var(--gray-70) 28%, transparent);
}

.crm-wa__skeleton-avatar {
    border-radius: 50%;
    height: var(--wa-avatar, 42px);
    width: var(--wa-avatar, 42px);
}

.crm-wa__skeleton-copy {
    display: grid;
    gap: .4rem;
    min-width: 0;
}

.crm-wa__skeleton-line {
    border-radius: 6px;
    display: block;
    height: 10px;
    width: 78%;
}

.crm-wa__skeleton-line--title {
    height: 12px;
    width: 48%;
}

.crm-wa__skeleton-chat {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    padding: 1rem .9rem 1.4rem;
}

.crm-wa__skeleton-bubble {
    border-radius: 16px;
    display: block;
    height: 46px;
    width: 62%;
}

.crm-wa__skeleton-bubble.is-out {
    align-self: flex-end;
    width: 46%;
}

.crm-wa__search {
    color: var(--gray-70);
    display: block;
    padding: .45rem .75rem .35rem;
    position: relative;
    width: 100%;
}

.crm-wa__search > i[data-lucide],
.crm-wa__search > svg {
    color: var(--gray-70);
    height: 14px;
    left: calc(.75rem + 10px);
    pointer-events: none;
    position: absolute;
    top: calc(.45rem + 9px);
    width: 14px;
    z-index: 1;
}

.crm-wa__search input {
    background: var(--gray-90) !important;
    border: 1px solid transparent !important;
    border-radius: 2px !important;
    display: block;
    font-size: 12px !important;
    height: 32px !important;
    min-width: 0;
    padding: 0 .7rem 0 2rem !important;
    width: 100% !important;
}

.crm-wa__search input:focus {
    border-color: var(--pc-cyan) !important;
}

.crm-wa__chips {
    display: flex;
    flex-wrap: nowrap;
    gap: .3rem;
    overflow-x: auto;
    padding: 0 1rem .55rem;
    scrollbar-width: none;
    width: 100%;
}

.crm-wa__chips::-webkit-scrollbar {
    display: none;
}

.crm-wa__chip {
    align-items: center;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--gray-40);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    height: var(--wa-chip);
    justify-content: center;
    min-width: 0;
    padding: 0 .55rem;
    white-space: nowrap;
}

.crm-wa__chip.is-on {
    background: var(--pc-cyan-muted);
    border-color: var(--chip-info-border);
    color: var(--chip-info);
}

.crm-wa__chip.is-blocked {
    border-color: color-mix(in srgb, var(--danger, #b42318) 42%, var(--border));
    color: var(--danger, #b42318);
}

.crm-wa__chip.is-limited {
    border-color: color-mix(in srgb, var(--warning, #b54708) 42%, var(--border));
    color: var(--warning, #b54708);
}

.crm-wa__chip.is-limited .crm-wa__chip-tag {
    background: color-mix(in srgb, var(--warning, #b54708) 14%, transparent);
    color: inherit;
}

.crm-wa__chip-tag {
    background: color-mix(in srgb, var(--danger, #b42318) 12%, transparent);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
    margin-left: .35rem;
    padding: .05rem .35rem;
    text-transform: uppercase;
}

.crm-wa__day {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crm-wa__day-head {
    align-items: center;
    background: color-mix(in srgb, var(--gray-90) 88%, var(--cc-surface, #fff));
    border: 0;
    border-bottom: 1px solid var(--border);
    color: var(--gray-40);
    cursor: pointer;
    display: flex;
    font-size: 11px;
    font-weight: 650;
    gap: 6px;
    letter-spacing: .02em;
    min-height: 34px;
    padding: 8px 16px;
    position: sticky;
    text-align: left;
    top: 0;
    user-select: none;
    width: 100%;
    z-index: 3;
}

.crm-wa__day-head:hover {
    background: color-mix(in srgb, var(--gray-90) 76%, var(--cc-surface, #fff));
}

.crm-wa__day-head i,
.crm-wa__day-head svg {
    flex: 0 0 auto;
    height: 14px;
    transition: transform .16s ease;
    width: 14px;
}

.crm-wa__day.is-collapsed .crm-wa__day-head i,
.crm-wa__day.is-collapsed .crm-wa__day-head svg {
    transform: rotate(-90deg);
}

.crm-wa__day-head strong {
    font-size: 11px;
    font-weight: 650;
}

.crm-wa__day-pending {
    color: #b91c1c;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.crm-wa__day.is-collapsed .crm-wa__day-body {
    display: none;
}

.crm-wa__threads,
.crm-tpl__rows,
.crm-wa__messages,
.crm-wa__profile-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
}

.crm-wa__infinite {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 52px;
    padding: .65rem .5rem 1rem;
}

.crm-wa__infinite[hidden] {
    display: none;
}

.crm-wa__thread,
.crm-tpl__row {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: .65rem;
    padding: .55rem .75rem;
    text-align: left;
    width: 100%;
}

.crm-wa__thread {
    gap: .4rem;
    padding: .22rem .65rem;
}

.crm-wa__thread {
    grid-template-columns: var(--wa-avatar) minmax(0, 1fr) auto;
    min-height: var(--wa-row);
}

.crm-wa__thread:hover,
.crm-tpl__row:hover {
    background: var(--cc-row-hover);
}

.crm-wa__thread.is-active,
.crm-tpl__row.is-active {
    background: var(--pc-cyan-muted);
}

.crm-wa__thread.is-unread {
    background: color-mix(in srgb, #0f766e 12%, var(--cc-surface, #fff));
    box-shadow: inset 3px 0 0 #0f766e;
}

.crm-wa__thread.is-unread .crm-wa__thread-name,
.crm-wa__thread.is-unread .crm-wa__thread-preview span {
    font-weight: 700;
}

.crm-wa__thread.is-unread.is-active {
    background: color-mix(in srgb, #0f766e 18%, var(--pc-cyan-muted, #e8f7f5));
}

.crm-wa__archived {
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: .65rem;
    grid-template-columns: var(--wa-avatar) minmax(0, 1fr) auto;
    min-height: var(--wa-row);
    padding: .4rem .75rem;
    text-align: left;
    width: 100%;
}

.crm-wa__archived:hover {
    background: var(--cc-row-hover);
}

.crm-wa__archived-ico {
    align-items: center;
    background: color-mix(in srgb, var(--text-secondary, #667781) 14%, transparent);
    border-radius: 50%;
    color: var(--text-secondary, #667781);
    display: flex;
    height: var(--wa-avatar);
    justify-content: center;
    width: var(--wa-avatar);
}

.crm-wa__archived-ico svg {
    height: 1.15rem;
    width: 1.15rem;
}

.crm-wa__archived strong {
    font-size: .95rem;
    font-weight: 600;
}

.crm-wa__archived-back {
    color: var(--text-secondary, #667781);
    font-size: .78rem;
}

.crm-wa__avatar {
    align-items: center;
    background: var(--gray-90);
    border: 1.5px solid var(--border);
    border-radius: 50%;
    box-sizing: border-box;
    color: var(--gray-20);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    height: var(--wa-avatar);
    justify-content: center;
    letter-spacing: -.02em;
    text-transform: uppercase;
    width: var(--wa-avatar);
}

.crm-wa__avatar.is-live {
    background: color-mix(in srgb, var(--success, #16a34a) 16%, transparent);
    border-color: var(--success, #16a34a);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--success, #16a34a) 18%, transparent);
    color: var(--success, #15803d);
}

.crm-wa__avatar.is-idle {
    background: color-mix(in srgb, var(--chip-danger, #dc2626) 7%, var(--gray-90));
    border-color: color-mix(in srgb, var(--chip-danger, #dc2626) 45%, var(--border));
    color: color-mix(in srgb, var(--chip-danger, #dc2626) 68%, var(--gray-20));
}

.crm-wa__avatar.has-photo {
    background: #fff;
    border-width: 2px;
    overflow: hidden;
    padding: 2px;
}

.crm-wa__avatar.has-photo img {
    border-radius: 50%;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.crm-wa__thread-copy {
    min-width: 0;
}

.crm-wa__thread-top,
.crm-tpl__row-top {
    align-items: baseline;
    display: flex;
    gap: .45rem;
    justify-content: space-between;
}

.crm-wa__thread-name,
.crm-tpl__name {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 650;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-wa__thread-time {
    color: var(--gray-70);
    flex: 0 0 auto;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.crm-wa__thread-preview,
.crm-tpl__meta {
    align-items: center;
    color: var(--gray-70);
    display: flex;
    font-size: 12px;
    gap: .4rem;
    margin-top: 2px;
    min-width: 0;
}

.crm-wa__thread-preview {
    font-size: 11.5px;
    gap: .25rem;
    margin-top: 0;
}

.crm-wa__thread-meta {
    align-items: center;
    display: flex;
    gap: .3rem;
    margin-top: 1px;
    min-width: 0;
    overflow: hidden;
}

.crm-wa__thread-preview span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-wa__thread-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 3px;
    min-width: 0;
}

.crm-wa__thread-meta .crm-wa__thread-tags {
    flex: 0 1 auto;
    flex-wrap: nowrap;
    margin-top: 0;
    overflow: hidden;
}

.crm-wa__thread-tag,
.crm-wa__chat-tags .crm-wa__tag {
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    max-width: 7.2rem;
    overflow: hidden;
    padding: 3px 6px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-wa__thread-tag-more {
    color: var(--gray-50);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
    padding: 2px 0;
}

.crm-wa__unread {
    align-items: center;
    align-self: center;
    background: #b91c1c;
    border-radius: 99px;
    color: #fff;
    display: inline-flex;
    font-size: 10px;
    font-weight: 700;
    height: 16px;
    justify-content: center;
    min-width: 16px;
    padding: 0 4px;
}

.crm-wa__dot {
    align-self: center;
    background: var(--success);
    border-radius: 99px;
    display: inline-block;
    flex: 0 0 7px;
    height: 7px;
    width: 7px;
}

.crm-wa__dot.is-off {
    background: var(--gray-80);
}

.crm-wa__dir,
.crm-wa__thread-preview .crm-wa__dir,
.crm-wa__thread-preview svg.crm-wa__dir {
    color: var(--gray-60);
    flex: 0 0 13px;
    height: 13px;
    width: 13px;
}

.crm-wa__dir.is-out {
    color: var(--gray-50);
}

.crm-wa__dir.is-in {
    color: var(--gray-60);
}

.crm-wa__empty,
.crm-wa__state {
    align-items: center;
    color: var(--gray-70);
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .45rem;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}

.crm-wa__empty i:not(.dmx-dot),
.crm-wa__state i:not(.dmx-dot) {
    color: var(--pc-cyan);
    height: 28px;
    width: 28px;
}

.crm-wa__state--loading {
    flex: 1 1 auto;
    gap: .75rem;
    min-height: 100%;
    width: 100%;
}

.crm-wa__state--loading.is-compact {
    padding: .7rem .4rem;
}

.crm-wa__state--loading .pc-dotm,
.crm-wa__state--loading .dmx-root {
    color: var(--gray-70, #71717a);
    flex: 0 0 auto;
}

.crm-wa__empty strong,
.crm-wa__state strong {
    color: var(--gray-0);
    font-size: 14px;
}

.crm-wa__empty p,
.crm-wa__state p {
    font-size: 12px;
    margin: 0;
    max-width: 280px;
}

.crm-wa__state--older {
    appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--gray-60, #667781);
    cursor: pointer;
    flex: 0 0 auto;
    font: inherit;
    font-size: 11px;
    opacity: .72;
    padding: .55rem .75rem .15rem;
    width: auto;
}

.crm-wa__state--older:disabled {
    cursor: default;
}

.crm-wa__chat {
    background: var(--wa-paper);
}

.crm-wa__chat-live {
    display: none;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    width: 100%;
}

.crm-wa__chat-live.is-on {
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
}

.crm-wa__chat-head {
    background: var(--cc-surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0;
    height: auto;
    min-height: 0;
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 5;
}

.crm-wa__chat-head-main {
    align-items: center;
    display: flex;
    gap: .5rem;
    min-height: var(--wa-head);
    padding: .45rem .75rem;
}

.crm-wa__chat-who {
    display: grid;
    gap: .12rem;
    min-width: 0;
}

.crm-wa__chat-person {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: flex;
    flex: 1 1 auto;
    gap: .65rem;
    min-width: 0;
    padding: 0;
    text-align: left;
}

.crm-wa__chat-person:focus-visible {
    outline: 2px solid var(--pc-cyan);
    outline-offset: 2px;
}

.crm-wa__chat-person .crm-wa__avatar {
    flex: 0 0 36px;
    height: 36px;
    min-height: 36px;
    min-width: 36px;
    overflow: hidden;
    width: 36px;
}

.crm-wa__messages {
    background-color: var(--wa-paper);
    background-image: var(--wa-doodle);
    background-repeat: repeat;
    background-size: 220px 220px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .35rem;
    min-height: 0;
    overflow: auto;
    padding: .75rem 2.15rem 1rem;
}

.crm-wa.is-profile .crm-wa__messages {
    padding-left: .85rem;
    padding-right: 2.15rem;
}

.crm-wa__messages::before {
    content: "";
    flex: 1 1 auto;
    min-height: .25rem;
}

/* Blazor: ese hueco empujaba el hilo debajo del viewport. */
.crm-wa[data-blazor] .crm-wa__messages::before {
    content: none;
    flex: 0 0 0;
    min-height: 0;
}

.crm-wa__row {
    display: flex;
    flex: 0 0 auto;
    overflow: visible;
    position: relative;
    width: 100%;
}

.crm-wa__row--in {
    align-items: center;
    gap: .4rem;
    justify-content: flex-start;
}

.crm-wa__row--out {
    align-items: center;
    gap: .3rem;
    justify-content: flex-end;
}

.crm-wa__message-day {
    align-items: center;
    color: var(--gray-60, #667781);
    display: flex;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    justify-content: center;
    letter-spacing: .02em;
    margin: .55rem 0 .7rem;
    text-align: center;
}

.crm-wa__message-day span {
    background: color-mix(in srgb, var(--cc-surface, #fff) 82%, var(--gray-85, #e9edef));
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 7px;
    box-shadow: 0 1px 1px rgba(11, 20, 26, .06);
    padding: .24rem .58rem;
}

.crm-wa__bubble {
    border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 12px;
    box-shadow: 0 1px 1px rgba(11, 20, 26, .08);
    flex: 0 0 auto;
    height: auto;
    max-width: min(78%, 34rem);
    overflow: visible;
    padding: .38rem .55rem .22rem .6rem;
    width: fit-content;
    word-break: break-word;
    position: relative;
}

.crm-wa__message-actions {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .2rem;
    opacity: 0;
    position: absolute;
    right: -2.15rem;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .15s ease;
    z-index: 4;
}

/* Scrim debajo del menu; la burbuja abierta sube de stacking para que el
   dropdown / guardar sticker queden clickeables por encima. */
.crm-wa__msg-scrim {
    inset: 0;
    position: fixed;
    z-index: 2;
}

.crm-wa__bubble.is-menu-open {
    z-index: 6;
}

.crm-wa__msg-menu {
    inset: auto 0 auto auto;
    position: absolute;
    top: calc(100% + 4px);
    z-index: 1060;
}

/* Panel anclado a la columna de acciones (botón Guardar).
   Entrante: se abre a la DERECHA (espacio libre del chat; a la izquierda
   quedaba tapado por la lista de conversaciones).
   Saliente: a la IZQUIERDA (acciones viven a la izquierda de la burbuja).
   Mayor especificidad que .crm-wa__sticker-save-menu { position:fixed }. */
.crm-wa__message-actions > .crm-wa__sticker-save-menu.crm-wa__sticker-save-menu--actions {
    left: calc(100% + 10px);
    position: absolute;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1060;
}

.crm-wa__bubble--out .crm-wa__message-actions > .crm-wa__sticker-save-menu.crm-wa__sticker-save-menu--actions {
    left: auto;
    right: calc(100% + 10px);
}

.crm-wa__bubble--out .crm-wa__message-actions {
    left: -2.15rem;
    right: auto;
}

.crm-wa__bubble:hover .crm-wa__message-actions,
.crm-wa__bubble:focus-within .crm-wa__message-actions,
.crm-wa__message-actions.is-reacting {
    opacity: 1;
    overflow: visible;
    z-index: 20;
}

.crm-wa__message-actions > button {
    align-items: center;
    background: var(--cc-surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--gray-30);
    display: inline-flex;
    height: 26px;
    justify-content: center;
    padding: 0;
    width: 26px;
}

.crm-wa__message-actions svg { height: 14px; width: 14px; }

.crm-wa__reaction-picker {
    background: var(--cc-surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    display: flex;
    flex-wrap: nowrap;
    gap: .1rem;
    left: calc(100% + 6px);
    padding: .25rem;
    position: absolute;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    z-index: 5;
}

.crm-wa__bubble--out .crm-wa__reaction-picker {
    left: auto;
    right: calc(100% + 6px);
}

.crm-wa__reaction-picker[hidden] { display: none; }
.crm-wa__reaction-picker button {
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-size: 18px;
    height: 30px;
    padding: 0;
    width: 30px;
}
.crm-wa__reaction-picker button:hover { background: var(--gray-90); }

.crm-wa__quote {
    background: rgba(0, 0, 0, .04);
    border-left: 2px solid var(--pc-cyan);
    color: var(--gray-40);
    font-size: 12px;
    margin-bottom: .35rem;
    padding: .25rem .4rem;
}

.crm-wa__kind {
    color: var(--gray-70);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .02em;
    margin-bottom: .2rem;
    text-transform: uppercase;
}

.crm-wa__map {
    color: var(--pc-cyan);
    display: inline-flex;
    font-size: 12px;
    font-weight: 650;
    gap: .3rem;
    margin-top: .2rem;
}

.crm-wa__reaction {
    font-size: 22px;
    line-height: 1;
}

.crm-wa__row.has-reactions {
    margin-bottom: .7rem;
}

.crm-wa__message-reactions {
    align-items: center;
    bottom: -.85rem;
    display: flex;
    gap: .2rem;
    position: absolute;
    z-index: 2;
}

.crm-wa__row--in .crm-wa__message-reactions { left: .55rem; }
.crm-wa__row--out .crm-wa__message-reactions { right: .55rem; }

.crm-wa__reaction-pill {
    align-items: center;
    background: var(--wa-paper);
    border: 1px solid color-mix(in srgb, var(--gray-40) 55%, transparent);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 12%);
    display: inline-flex;
    font-size: 16px;
    gap: .15rem;
    justify-content: center;
    line-height: 1;
    min-height: 25px;
    min-width: 30px;
    padding: .2rem .4rem;
}

.crm-wa__reaction-pill small {
    color: var(--gray-70);
    font-size: 10px;
    font-weight: 700;
}

html.dark .crm-wa,
html.dark-layout .crm-wa {
    --wa-bubble-in: #1c1c1f;
    --wa-bubble-out: #005c4b;
    --wa-paper: #0b141a;
    --wa-doodle: url("../img/crm-wa-doodle-dark.svg");
}

.crm-wa__bubble--in {
    background: var(--wa-bubble-in);
    border-bottom-left-radius: 4px;
}

.crm-wa__bubble--out {
    background: var(--wa-bubble-out);
    border-bottom-right-radius: 4px;
    border-color: transparent;
}

.crm-wa__bubble-text {
    font-size: 13.5px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    white-space: normal;
}

.crm-wa__bubble-text strong {
    font-weight: 700;
}

.crm-wa__bubble-text em {
    font-style: italic;
}

.crm-wa__bubble-text s {
    text-decoration: line-through;
}

.crm-wa__bubble-text code,
.crm-wa__bubble-text .crm-wa-codeblock {
    background: color-mix(in srgb, var(--gray-90) 80%, transparent);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    padding: .05rem .25rem;
}

.crm-wa__bubble-text blockquote {
    border-left: 3px solid var(--accent, #1f8a96);
    margin: .15rem 0;
    opacity: .92;
    padding-left: .45rem;
}

.crm-wa__bubble-text .crm-wa-listline {
    align-items: flex-start;
    display: flex;
    gap: .35rem;
}

.crm-wa__meta {
    align-items: center;
    color: var(--gray-70);
    display: flex;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    gap: .25rem;
    justify-content: flex-end;
    margin-top: .2rem;
}

.crm-wa__stamp {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 2px;
    white-space: nowrap;
}

.crm-wa__stamp .crm-wa__acks {
    margin: 0;
}

.crm-wa__author {
    font-weight: 650;
    max-width: 7.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-wa__author::after {
    content: "·";
    font-weight: 500;
    margin-left: .15rem;
}

.crm-wa__bubble--out .crm-wa__meta {
    color: #667781;
}

html.dark .crm-wa__bubble--out,
html.dark-layout .crm-wa__bubble--out {
    color: #e9edef;
}

html.dark .crm-wa__bubble--out .crm-wa__meta,
html.dark-layout .crm-wa__bubble--out .crm-wa__meta {
    color: #99beb7;
}

.crm-wa__composer {
    background: var(--cc-surface);
    border-top: 1px solid var(--border);
    display: grid;
    flex: 0 0 auto;
    gap: .3rem;
    padding: .45rem .7rem .5rem;
    padding-bottom: max(.5rem, env(safe-area-inset-bottom, 0px));
    position: relative;
    z-index: 6;
}

.crm-wa__reply-chip {
    align-items: center;
    background: var(--gray-100);
    border-left: 3px solid var(--pc-cyan);
    border-radius: 7px;
    display: flex;
    justify-content: space-between;
    min-width: 0;
    padding: .35rem .45rem .35rem .6rem;
}
.crm-wa__reply-chip[hidden] { display: none; }
.crm-wa__reply-chip span { display: grid; min-width: 0; }
.crm-wa__reply-chip strong { color: var(--pc-cyan); font-size: 11px; }
.crm-wa__reply-chip small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (hover: none), (max-width: 991.98px) {
    /* Mobile: sin botones flotantes; long-press = reaccionar, swipe = responder */
    .crm-wa__messages {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .crm-wa__message-actions > button {
        display: none !important;
    }

    .crm-wa__message-actions {
        flex-direction: row;
        left: 50%;
        opacity: 0;
        pointer-events: none;
        right: auto;
        top: auto;
        bottom: calc(100% + 8px);
        transform: translateX(-50%);
    }

    .crm-wa__bubble--out .crm-wa__message-actions {
        left: 50%;
        right: auto;
    }

    .crm-wa__message-actions.is-reacting {
        opacity: 1;
        pointer-events: auto;
    }

    .crm-wa__reaction-picker {
        left: 50%;
        right: auto;
        top: auto;
        bottom: calc(100% + 6px);
        position: absolute;
        transform: translateX(-50%);
        box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
        max-width: min(92vw, 280px);
    }

    .crm-wa__bubble--out .crm-wa__reaction-picker {
        left: 50%;
        right: auto;
    }

    .crm-wa__row {
        touch-action: pan-y;
        transition: transform .16s ease;
        will-change: transform;
    }

    .crm-wa__row.is-swiping {
        transition: none;
        z-index: 2;
    }

    .crm-wa__row.is-swipe-reply::before {
        align-items: center;
        color: var(--pc-cyan, #1f8a96);
        content: "↩";
        display: flex;
        font-size: 18px;
        height: 100%;
        justify-content: center;
        left: .35rem;
        opacity: .85;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: 28px;
    }

    .crm-wa__row--out.is-swipe-reply::before {
        left: auto;
        right: .35rem;
        transform: scaleX(-1);
    }
}

.crm-wa__composer-tools {
    align-items: center;
    background: var(--gray-100);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    flex-wrap: nowrap;
    gap: .1rem;
    overflow-x: auto;
    padding: .15rem .2rem;
    scrollbar-width: none;
}

.crm-wa__composer-tools::-webkit-scrollbar {
    display: none;
}

.crm-wa__composer-sep {
    background: var(--border);
    flex: 0 0 1px;
    height: 16px;
    margin: 0 .2rem;
}

.crm-wa__composer-row {
    align-items: flex-end;
    display: flex;
    gap: .4rem;
    position: relative;
}

.crm-wa__mic {
    background: var(--pc-cyan, #25d366);
    color: #fff;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.crm-wa__composer.is-recording .crm-wa__mic {
    background: #e11d48;
    transform: scale(1.08);
}

.crm-wa__rec {
    align-items: center;
    background: var(--cc-surface, #fff);
    display: flex;
    flex: 1 1 auto;
    gap: .55rem;
    min-height: 40px;
    min-width: 0;
}

.crm-wa__rec-dot {
    background: #e11d48;
    border-radius: 50%;
    flex: 0 0 10px;
    height: 10px;
    width: 10px;
    animation: crm-wa-rec 1s ease-in-out infinite;
}

.crm-wa__rec-hint {
    color: var(--gray-50, #71717a);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-wa__composer.is-recording #messageText,
.crm-wa__composer.is-recording #sendButton {
    display: none;
}

@keyframes crm-wa-rec {
    50% { opacity: .35; }
}

.crm-wa__composer .crm-wa__icon-btn,
.crm-wa__send {
    flex: 0 0 var(--wa-icon);
    height: var(--wa-icon);
    width: var(--wa-icon);
}

.crm-wa__attach-chip {
    align-items: center;
    background: var(--gray-90);
    border: 1px solid var(--border);
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    gap: .35rem;
    max-width: 100%;
    padding: .2rem .35rem .2rem .55rem;
}

.crm-wa__attach-chip [data-lucide] {
    height: 14px;
    width: 14px;
}

.crm-wa__attach-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-wa__emoji-panel {
    background: var(--cc-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    display: grid;
    gap: .15rem;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    max-height: 140px;
    overflow: auto;
    padding: .4rem;
}

.crm-wa__emoji {
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1.4;
    padding: .1rem;
}

.crm-wa__emoji:hover,
.crm-wa__emoji:focus-visible {
    background: var(--gray-90);
    outline: none;
}

.crm-wa__sticker-tray {
    background: var(--cc-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: grid;
    flex: 0 0 auto;
    grid-template-rows: auto minmax(180px, 320px);
    margin: 0;
    max-height: min(42vh, 380px);
    min-height: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 8;
}

.crm-wa__tpl-tray {
    background: var(--cc-surface);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    height: 50vh;
    margin: 0 .45rem;
    max-height: 50vh;
    min-height: 280px;
    overflow: hidden;
    position: relative;
    transform-origin: bottom center;
    width: auto;
    z-index: 8;
}

.crm-wa[data-blazor] .crm-wa__sticker-tray,
.crm-wa[data-blazor] .crm-wa__tpl-tray {
    flex-shrink: 0;
}

.crm-wa__chat-live:has(#templateTray:not([hidden])) .crm-wa__composer {
    border-top-color: transparent;
    padding-top: .3rem;
}

.crm-wa__tpl-tray-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .45rem;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: .55rem .65rem .55rem;
}

.crm-wa__tpl-tray-form {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: .45rem;
    min-width: 0;
}

.crm-wa__tpl-tray-form .form-label {
    font-size: 11px;
    font-weight: 650;
    margin-bottom: .2rem;
}

.crm-wa__tpl-tray-form .form-select {
    flex: 0 0 auto;
}

.crm-wa__tpl-picker {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
}

.crm-wa__tpl-picker .form-control {
    font-size: 13px;
    min-height: 36px;
}

.crm-wa__tpl-select {
    appearance: none;
    -webkit-appearance: listbox;
    background-image: none !important;
    flex: 0 0 auto;
    height: auto !important;
    max-height: min(220px, 32vh);
    min-height: 148px;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: .2rem;
}

.crm-wa__tpl-select option {
    border-radius: 8px;
    padding: .4rem .55rem;
}

@media (min-width: 992px) {
    .crm-wa__tpl-tray {
        align-self: stretch;
        border-bottom: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: 0 12px 32px rgba(9, 9, 11, .1);
        display: grid;
        flex: 0 0 auto;
        gap: 0;
        grid-template-areas:
            "head head"
            "form preview"
            "foot preview";
        grid-template-columns: minmax(240px, 0.95fr) minmax(300px, 1.2fr);
        grid-template-rows: auto minmax(0, 1fr) auto;
        height: 50vh;
        margin: 0 .75rem 8px;
        max-height: 50vh;
        min-height: 320px;
        max-width: none;
        width: calc(100% - 1.5rem);
    }

    .crm-wa__chat-live:has(#templateTray:not([hidden])) .crm-wa__composer {
        border-top-color: var(--border);
        padding-top: .45rem;
    }

    .crm-wa__tpl-tray-head {
        grid-area: head;
    }

    .crm-wa__tpl-tray-main {
        display: contents;
    }

    .crm-wa__tpl-tray-form {
        grid-area: form;
        min-height: 0;
        overflow: auto;
        padding: .75rem .15rem .65rem .85rem;
    }

    .crm-wa__tpl-preview {
        align-self: stretch;
        grid-area: preview;
        height: auto;
        margin: .75rem .85rem .65rem .15rem;
        min-height: 0;
        overflow: auto;
    }

    .crm-wa__tpl-tray-foot {
        border-top: 0;
        grid-area: foot;
        margin: 0;
        padding: 0 .15rem .65rem .85rem;
    }

    .crm-wa__tpl-preview .crm-template-message {
        max-width: min(88%, 360px);
    }

    .crm-wa__tpl-preview .crm-template-message__media.is-preview img,
    .crm-wa__tpl-preview .crm-template-message__media.is-preview video {
        max-height: 260px;
    }

    .crm-wa__tpl-preview .crm-template-message__media.is-document .crm-template-message__pdf {
        height: 180px;
        max-height: 200px;
    }

    .crm-wa__filter-toggle {
        display: flex;
        padding: .15rem .75rem .45rem;
    }

    .crm-wa__filter-extra {
        padding: 0 0 .15rem;
    }

    .crm-wa__chips--accounts,
    .crm-wa__chips--lines {
        flex-wrap: wrap;
        overflow: visible;
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

.crm-wa__tpl-tray[hidden] {
    display: none !important;
}

.crm-wa__tpl-tray-head {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: .5rem;
    padding: .45rem .6rem;
}

.crm-wa__tpl-tray-head strong {
    display: block;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
}

.crm-wa__tpl-tray-hint {
    color: var(--gray-70);
    display: block;
    font-size: 11px;
    line-height: 1.3;
}

.crm-wa__tpl-tray-head .crm-wa__icon-btn {
    margin-left: auto;
}

.crm-wa__tpl-tray-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .45rem;
    min-height: 0;
    overflow: auto;
    padding: .55rem .65rem .4rem;
}

.crm-wa__tpl-tray-body .form-label {
    font-size: 11px;
    font-weight: 650;
    margin-bottom: .2rem;
}

.crm-wa__tpl-tray-body .form-select {
    flex: 0 0 auto;
}

.crm-wa__tpl-preview {
    align-items: flex-end;
    background-color: var(--wa-paper);
    background-image: var(--wa-doodle);
    background-position: center top;
    background-repeat: repeat;
    background-size: 220px 220px;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .45rem;
    min-height: 160px;
    min-width: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: .55rem .8rem .65rem .6rem;
}

.crm-wa__tpl-preview .crm-template-send__to {
    align-self: stretch;
    background: color-mix(in srgb, var(--cc-surface, #fff) 86%, transparent);
    border-radius: 999px;
    flex: 0 0 auto;
    font-size: 11px;
    margin: 0;
    overflow: hidden;
    padding: .15rem .55rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-wa__tpl-preview #templatePreview {
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    min-width: 0;
    width: 100%;
}

.crm-wa__tpl-preview .crm-template-message {
    margin-left: auto;
    margin-right: 6px;
    max-width: min(92%, 320px);
    overflow-wrap: anywhere;
    width: fit-content;
}

.crm-wa__tpl-preview .crm-template-message__media {
    min-height: 72px;
}

.crm-wa__tpl-preview .crm-template-message__media.is-preview img,
.crm-wa__tpl-preview .crm-template-message__media.is-preview video {
    max-height: 160px;
}

.crm-wa__tpl-preview .crm-template-message__media.is-document .crm-template-message__pdf {
    height: 140px;
    max-height: 140px;
}

.crm-wa__tpl-tray-foot {
    background: var(--cc-surface);
    border-top: 1px solid var(--border);
    flex: 0 0 auto;
    margin: 0;
    padding: .55rem .65rem calc(.55rem + env(safe-area-inset-bottom, 0px));
    position: relative;
    z-index: 2;
}

.crm-wa__tpl-send {
    align-items: center;
    background: #1f8a96;
    border: 0;
    border-radius: 999px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 650;
    gap: .4rem;
    justify-content: center;
    min-height: 40px;
    width: 100%;
}

.crm-wa__tpl-send:disabled,
.crm-wa__tpl-send.is-busy {
    cursor: wait;
    opacity: .72;
    pointer-events: none;
}

.crm-wa__tpl-send:hover,
.crm-wa__tpl-send:focus-visible {
    background: #187580;
}

.crm-wa__tpl-send [data-lucide],
.crm-wa__tpl-send svg {
    height: 15px;
    width: 15px;
}

.crm-spin {
    animation: crm-spin .8s linear infinite;
}

@keyframes crm-spin {
    to { transform: rotate(360deg); }
}

.crm-wa__sticker-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
}

.crm-wa__sticker-acc {
    border-bottom: 1px solid var(--border);
}

.crm-wa__sticker-acc:last-child {
    border-bottom: 0;
}

.crm-wa__sticker-acc-head {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--gray-10);
    cursor: pointer;
    display: flex;
    font-size: 11px;
    font-weight: 650;
    gap: .35rem;
    padding: .32rem .55rem;
    text-align: left;
    width: 100%;
}

.crm-wa__sticker-acc-head small {
    color: var(--text-muted, #667781);
    font-size: 10px;
    font-weight: 600;
    margin-left: auto;
}

.crm-wa__sticker-acc-head i,
.crm-wa__sticker-acc-head [data-lucide] {
    color: var(--gray-50);
    flex: 0 0 auto;
    height: 12px;
    width: 12px;
}

.crm-wa__sticker-chev {
    color: var(--gray-50);
    display: inline-flex;
    flex: 0 0 12px;
    font-size: 11px;
    justify-content: center;
    line-height: 1;
    width: 12px;
}

.crm-wa__sticker-acc-body {
    display: none;
}

.crm-wa__sticker-acc.is-open .crm-wa__sticker-acc-body {
    display: block;
}

.crm-wa__sticker-addbar {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .2rem .5rem .15rem;
}

.crm-wa__sticker-add {
    align-items: center;
    background: var(--gray-100);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--gray-40);
    cursor: pointer;
    display: inline-flex;
    font-size: 10px;
    font-weight: 650;
    gap: .2rem;
    height: 22px;
    padding: 0 .5rem;
}

.crm-wa__sticker-add [data-lucide] {
    height: 11px;
    width: 11px;
}

.crm-wa__sticker-tray-head {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    padding: .4rem .55rem .4rem .75rem;
}

.crm-wa__sticker-tray-head strong {
    display: block;
    font-size: 12px;
    font-weight: 650;
}

.crm-wa__sticker-hint {
    color: var(--text-muted, #667781);
    display: block;
    font-size: 10px;
    line-height: 1.2;
}

.crm-wa__sticker-grid {
    display: grid;
    gap: .2rem;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    padding: .2rem .45rem .45rem;
}

@media (min-width: 576px) {
    .crm-wa__sticker-grid {
        grid-template-columns: repeat(10, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .crm-wa__sticker-grid {
        gap: .15rem;
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .crm-wa__sticker-grid {
        grid-template-columns: repeat(16, minmax(0, 1fr));
    }
}

.crm-wa__sticker-cell {
    align-items: center;
    aspect-ratio: 1;
    background: var(--gray-100);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: 2px;
    position: relative;
}

.crm-wa__sticker-cell.is-new {
    border-color: #0f766e;
    box-shadow: 0 0 0 2px color-mix(in srgb, #0f766e 35%, transparent);
}

.crm-wa__sticker-cell img {
    display: block;
    height: 100%;
    max-height: none;
    object-fit: contain;
    width: 100%;
    max-width: none;
}

.crm-wa__sticker-del {
    align-items: center;
    background: rgba(0, 0, 0, .55);
    border-radius: 99px;
    color: #fff;
    display: none;
    font-size: 11px;
    height: 16px;
    justify-content: center;
    line-height: 1;
    position: absolute;
    right: 3px;
    top: 3px;
    width: 16px;
}

.crm-wa__sticker-cell:hover .crm-wa__sticker-del {
    display: inline-flex;
}

.crm-wa__sticker-empty {
    color: var(--gray-60);
    font-size: 11px;
    grid-column: 1 / -1;
    padding: .35rem .2rem;
    text-align: left;
}

.crm-wa__sticker-tabs {
    display: flex;
    gap: .15rem;
    overflow: auto;
    padding: .1rem .45rem .2rem;
}

.crm-wa__sticker-tab {
    align-items: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--gray-20);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 650;
    gap: .15rem;
    line-height: 1;
    padding: .16rem .4rem;
}

.crm-wa__sticker-tab span {
    font-size: 9px;
    font-weight: 650;
}

.crm-wa__sticker-tab.is-on {
    background: color-mix(in srgb, var(--accent, #0ea5a4) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent, #0ea5a4) 40%, var(--border));
    color: var(--gray-0);
}

.crm-wa__file,
.crm-wa__sticker {
    align-items: center;
    display: flex;
    gap: .4rem;
    margin-bottom: .25rem;
}

.crm-wa__file [data-lucide],
.crm-wa__sticker [data-lucide] {
    height: 16px;
    width: 16px;
}

.crm-wa__pdf {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-bottom: .35rem;
    max-width: min(280px, 72vw);
}

.crm-wa__pdf-head {
    align-items: center;
    display: flex;
    gap: .4rem;
    min-width: 0;
}

.crm-wa__pdf-head [data-lucide] {
    flex: 0 0 auto;
    height: 16px;
    width: 16px;
}

.crm-wa__pdf-head span {
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-wa__pdf-head .crm-wa__map {
    flex: 0 0 auto;
    font-size: 12px;
    white-space: nowrap;
}

.crm-wa__pdf-thumb {
    aspect-ratio: 1 / 1.28;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--border, #d1d5db) 80%, transparent);
    border-radius: 12px;
    display: block;
    max-width: min(220px, 68vw);
    overflow: hidden;
    position: relative;
    text-decoration: none;
}

.crm-wa__pdf-thumb canvas {
    background: #fff;
    display: block;
    height: auto;
    max-height: 340px;
    object-fit: contain;
    object-position: center top;
    width: 100%;
}

.crm-wa__pdf-thumb:not(.is-ready) canvas {
    min-height: 160px;
    opacity: 0;
}

.crm-wa__pdf-loading {
    color: #64748b;
    font-size: 11px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

.crm-wa__pdf-thumb.is-ready .crm-wa__pdf-loading,
.crm-wa__pdf-thumb.is-broken .crm-wa__pdf-loading {
    display: none;
}

.crm-wa__pdf-thumb.is-broken {
    align-items: center;
    background: color-mix(in srgb, var(--accent, #0ea5a4) 8%, #fff);
    color: #075e54;
    display: flex;
    justify-content: center;
    min-height: 96px;
}

.crm-wa__pdf-thumb .crm-wa__pdf-iframe-fallback,
.crm-wa__pdf .crm-wa__pdf-iframe-fallback {
    background: #fff;
    border: 0;
    border-radius: 12px;
    display: block;
    height: 100%;
    min-height: 200px;
    pointer-events: none;
    width: 100%;
}

.crm-template-message__media.is-document {
    gap: .35rem;
}

.crm-template-message__media.is-document .crm-wa__pdf-head {
    padding: .15rem .1rem 0;
}

.crm-template-message__media.is-document .crm-wa__pdf-thumb,
.crm-template-message__media.is-document .crm-template-message__pdf {
    background: #fff;
    border: 0;
    border-radius: 8px;
    max-height: 220px;
    width: 100%;
}

.crm-template-message__media.is-document .crm-wa__pdf-thumb canvas {
    max-height: 340px;
}

.crm-template-message__media.is-document .crm-template-message__pdf {
    height: 200px;
}

.crm-wa__media-thumb {
    display: block;
    margin-bottom: .3rem;
}

.crm-wa__media-thumb img,
.crm-wa__media-thumb {
    border-radius: 8px;
    display: block;
    max-height: 280px;
    max-width: min(260px, 72vw);
    object-fit: contain;
    background: rgba(0, 0, 0, .04);
}

/* Imagen/video a sangre (WhatsApp): ocupan todo el ancho arriba de la burbuja,
   sin hueco lateral verde. El caption y la meta conservan padding. */
.crm-wa__bubble.has-media-bleed {
    padding: 0;
    width: min(280px, 72vw);
    max-width: min(78%, 34rem);
}

.crm-wa__bubble.has-media-bleed > .crm-wa__media-thumb {
    background: rgba(0, 0, 0, .04);
    border-radius: 0;
    display: block;
    margin: 0;
    max-height: none;
    max-width: none;
    overflow: hidden;
    width: 100%;
}

.crm-wa__bubble.has-media-bleed > a.crm-wa__media-thumb,
.crm-wa__bubble.has-media-bleed > video.crm-wa__media-thumb {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}

.crm-wa__bubble.has-media-bleed > .crm-wa__media-thumb img,
.crm-wa__bubble.has-media-bleed > video.crm-wa__media-thumb {
    background: transparent;
    border-radius: 0;
    display: block;
    height: auto;
    max-height: min(420px, 70vh);
    max-width: none;
    object-fit: contain;
    object-position: center top;
    width: 100%;
}

.crm-wa__bubble.has-media-bleed > video.crm-wa__media-thumb {
    object-fit: contain;
    background: #000;
}

.crm-wa__bubble.has-media-bleed > .crm-wa__bubble-text {
    padding: .4rem .58rem .1rem .62rem;
}

.crm-wa__bubble.has-media-bleed > .crm-wa__meta {
    padding: 0 .55rem .28rem .55rem;
}

.crm-wa__bubble.has-media-bleed > .crm-wa__map {
    margin: .2rem .55rem .35rem;
}

.crm-wa__sticker img {
    border-radius: 8px;
    display: block;
    max-height: 148px;
    max-width: min(148px, 42vw);
    object-fit: contain;
    background: rgba(0, 0, 0, .04);
}

.crm-wa__sticker-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .28rem;
    margin-bottom: .2rem;
}

.crm-wa__sticker-wrap .crm-wa__sticker {
    margin-bottom: 0;
}

.crm-wa__sticker-save-btn {
    align-items: center;
    align-self: center;
    appearance: none;
    background: #fff;
    border: 1px solid rgba(17, 27, 33, .1);
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(17, 27, 33, .08);
    color: #3b4a54;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
}

.crm-wa__sticker-save-btn [data-lucide],
.crm-wa__sticker-save-btn svg {
    height: 14px;
    width: 14px;
}

.crm-wa__sticker-save {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    position: relative;
}

.crm-wa__sticker-save .crm-wa__sticker-save-menu {
    left: 0;
    position: absolute;
    top: calc(100% + 6px);
}

.crm-wa__row--in .crm-wa__sticker-save-btn:hover,
.crm-wa__bubble--in .crm-wa__sticker-save-btn:hover {
    background: rgba(17, 27, 33, .12);
    color: var(--gray-10, #111b21);
}

.crm-wa__sticker-save-btn:disabled {
    cursor: default;
    opacity: .72;
}

.crm-wa__sticker-save-btn.is-saved,
.crm-wa__message-actions button.is-saved {
    background: rgba(37, 211, 102, .16);
    color: #128c7e;
}

.crm-wa__sticker-save-menu {
    background: #fff;
    border: 1px solid rgba(17, 27, 33, .1);
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(17, 27, 33, .16);
    color: #111b21;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    max-width: min(280px, calc(100vw - 16px));
    padding: .7rem;
    position: fixed;
    width: 260px;
    z-index: 80;
}

html.dark .crm-wa__sticker-save-menu,
html.dark-layout .crm-wa__sticker-save-menu {
    background: #1f2c34;
    border-color: rgba(255, 255, 255, .08);
    color: #e9edef;
}

.crm-wa__sticker-save-menu[hidden] {
    display: none;
}

.crm-wa__sticker-save-menu > strong {
    color: #111b21;
    font-size: 13px;
    padding: 0 .15rem .15rem;
}

.crm-wa__sticker-save-menu button {
    align-items: flex-start;
    appearance: none;
    background: #f4f6f7;
    border: 0;
    border-radius: 10px;
    color: #111b21;
    cursor: pointer;
    display: flex;
    gap: .55rem;
    padding: .5rem .55rem;
    text-align: left;
}

.crm-wa__sticker-save-menu button:hover {
    background: #e7ecee;
}

.crm-wa__sticker-save-menu button b {
    color: #111b21;
    font-size: 12px;
}

.crm-wa__sticker-save-menu button small {
    color: #54656f;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
}

html.dark .crm-wa__sticker-save-menu > strong,
html.dark-layout .crm-wa__sticker-save-menu > strong,
html.dark .crm-wa__sticker-save-menu button,
html.dark-layout .crm-wa__sticker-save-menu button,
html.dark .crm-wa__sticker-save-menu button b,
html.dark-layout .crm-wa__sticker-save-menu button b {
    color: #e9edef;
}

html.dark .crm-wa__sticker-save-menu button,
html.dark-layout .crm-wa__sticker-save-menu button {
    background: rgba(255, 255, 255, .08);
}

html.dark .crm-wa__sticker-save-menu button:hover,
html.dark-layout .crm-wa__sticker-save-menu button:hover {
    background: rgba(255, 255, 255, .14);
}

html.dark .crm-wa__sticker-save-menu button small,
html.dark-layout .crm-wa__sticker-save-menu button small {
    color: #aebac1;
}

.crm-wa__sticker-save-menu button [data-lucide],
.crm-wa__sticker-save-menu button svg {
    flex: 0 0 auto;
    height: 16px;
    margin-top: .1rem;
    width: 16px;
}

.crm-wa__sticker-save-menu button span {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.crm-wa__audio {
    display: none;
}

.crm-wa__player {
    align-items: center;
    display: flex;
    gap: .45rem;
    margin-bottom: .15rem;
    min-width: min(248px, 70vw);
}

.crm-wa__player audio {
    display: none;
}

.crm-wa__player-btn,
.crm-wa__player-rate {
    appearance: none;
    border: 0;
    cursor: pointer;
    flex: 0 0 auto;
}

.crm-wa__player-btn {
    align-items: center;
    background: var(--pc-cyan, #0f766e);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.crm-wa__player-btn svg {
    display: block;
    fill: currentColor;
    height: 14px;
    width: 14px;
}

.crm-wa__player-btn:focus-visible,
.crm-wa__player-rate:focus-visible {
    outline: 2px solid var(--pc-cyan, #0f766e);
    outline-offset: 2px;
}

.crm-wa__player-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.crm-wa__player-range {
    --p: 0%;
    appearance: none;
    background: linear-gradient(to right, var(--pc-cyan, #0f766e) var(--p), rgba(17, 27, 33, .16) var(--p));
    border-radius: 999px;
    cursor: pointer;
    height: 4px;
    margin: 0;
    width: 100%;
}

.crm-wa__player-range::-webkit-slider-thumb {
    appearance: none;
    background: var(--pc-cyan, #0f766e);
    border: 0;
    border-radius: 999px;
    height: 12px;
    width: 12px;
}

.crm-wa__player-range::-moz-range-thumb {
    background: var(--pc-cyan, #0f766e);
    border: 0;
    border-radius: 999px;
    height: 12px;
    width: 12px;
}

.crm-wa__player-meta {
    color: var(--gray-40, #667781);
    display: flex;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    gap: .4rem;
    justify-content: space-between;
}

.crm-wa__player-kind {
    letter-spacing: .02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-wa__player-rate {
    background: rgba(17, 27, 33, .06);
    border-radius: 999px;
    color: var(--gray-20, #3b4a54);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    min-width: 32px;
    padding: .28rem .35rem;
}

.crm-wa__bubble--out .crm-wa__player-btn {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

.crm-wa__bubble--out .crm-wa__player-range {
    background: linear-gradient(to right, #fff var(--p), rgba(255, 255, 255, .28) var(--p));
}

.crm-wa__bubble--out .crm-wa__player-range::-webkit-slider-thumb,
.crm-wa__bubble--out .crm-wa__player-range::-moz-range-thumb {
    background: #fff;
}

.crm-wa__bubble--out .crm-wa__player-meta,
.crm-wa__bubble--out .crm-wa__player-rate {
    color: rgba(255, 255, 255, .82);
}

.crm-wa__bubble--out .crm-wa__player-rate {
    background: rgba(255, 255, 255, .14);
}

.crm-wa textarea#messageText,
.crm-wa__composer textarea,
.crm-wa__composer #messageText.form-control {
    background: var(--gray-90) !important;
    border: 1px solid transparent !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    font-size: 13px !important;
    height: 36px;
    line-height: 1.35 !important;
    max-height: 120px;
    max-width: none !important;
    min-height: 36px !important;
    touch-action: manipulation;
    min-width: 0 !important;
    overflow-y: auto;
    padding: .45rem .6rem !important;
    resize: none;
    width: 100% !important;
}

.crm-wa__composer textarea:focus,
.crm-wa__composer textarea:focus-visible {
    border-color: var(--pc-cyan) !important;
    outline: 2px solid var(--pc-cyan) !important;
    outline-offset: 1px;
}

.crm-wa__send {
    align-items: center;
    background: #1f8a96;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
}

.crm-wa__send > svg,
.crm-wa__send > i,
.crm-wa__send > i > svg {
    display: block;
    flex: 0 0 auto;
    height: 18px;
    width: 18px;
}

.crm-wa__send[hidden],
.crm-wa__mic[hidden],
#voiceButton[hidden],
#sendButton[hidden] {
    display: none !important;
}

.crm-wa__mic {
    background: var(--pc-cyan, #25d366);
}

.crm-wa__send:hover {
    background: #187580;
}

.crm-wa__send:focus-visible {
    outline: 2px solid #0f5c64;
    outline-offset: 2px;
}

.crm-wa__send:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.crm-wa__tick.is-read {
    color: #53bdeb;
}

.crm-wa__tick.is-delivered {
    color: var(--gray-60);
}

.crm-wa__tick.is-fail,
.crm-wa__error {
    color: var(--chip-danger, #dc2626);
}

.crm-wa__media-missing {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: 12px;
    opacity: .65;
    padding: .35rem .5rem;
}

.crm-wa__media-missing button {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    padding: 0;
    text-decoration: underline;
}

.crm-wa__acks {
    align-items: center;
    color: var(--gray-55, #667781);
    display: inline-flex;
    flex: 0 0 auto;
    height: 12px;
    line-height: 0;
}

.crm-wa__send-wait {
    align-items: center;
    color: var(--gray-55, #667781);
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
}

.crm-wa__send-wait .pc-dotm,
.crm-wa__send-wait .dmx-root {
    color: currentColor;
    --dmx-dot-fill: currentColor;
}

.crm-wa__acks svg {
    display: block;
    fill: currentColor;
}

.crm-wa__acks.is-fail svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.7;
}

.crm-wa__acks.is-sent,
.crm-wa__acks.is-delivered,
.crm-wa__acks.is-pending {
    color: var(--gray-55, #667781);
}

.crm-wa__acks.is-read {
    color: #53bdeb;
}

.crm-wa__acks.is-fail {
    color: var(--chip-danger, #dc2626);
}

.crm-wa__error {
    font-size: 11px;
    margin-top: .15rem;
}

.crm-wa__bubble--failed {
    background: color-mix(in srgb, var(--gray-85, #e9edef) 88%, var(--cc-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--gray-60, #667781) 38%, transparent);
    color: var(--gray-55, #667781);
    opacity: .8;
}

.crm-wa__row--out.is-failed .crm-wa__bubble--failed :is(img, video, .crm-wa__template-media, .crm-wa__media) {
    filter: grayscale(.9);
    opacity: .74;
}

.crm-wa__bubble--failed .crm-wa__meta,
.crm-wa__bubble--failed .crm-wa__error {
    color: var(--gray-55, #667781);
}

.crm-wa__bubble--failed .crm-wa__message-actions {
    display: none;
}

.crm-wa__hint {
    color: var(--chip-danger);
    font-size: 11px;
    padding: 0 .75rem .4rem;
}

.crm-wa__hint:empty {
    display: none;
}

.crm-wa .dropdown-menu {
    border: 1px solid var(--border);
    border-radius: 2px;
    font-size: 12px;
    min-width: 196px;
    padding: .25rem 0;
}

.crm-wa .dropdown-item {
    align-items: center;
    display: flex;
    gap: .45rem;
    padding: .35rem .7rem;
}

.crm-wa .dropdown-item [data-lucide] {
    color: var(--gray-70);
}

.crm-wa__chat-live {
    position: relative;
}

.crm-wa__assign-layer {
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 40;
}

.crm-wa__assign-scrim {
    background: transparent;
    inset: 0;
    pointer-events: auto;
    position: absolute;
    z-index: 0;
}

.crm-wa__assign-menu {
    background: var(--cc-surface);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 0 12px 32px rgba(9, 9, 11, .16);
    box-sizing: border-box;
    padding: .35rem 0 .45rem;
    width: 280px;
}

.crm-wa[data-blazor] .crm-wa__icon-actions {
    position: relative;
    z-index: 6;
    overflow: visible;
}

.crm-wa[data-blazor] .crm-wa__chat-head,
.crm-wa[data-blazor] .crm-wa__chat-head-main {
    overflow: visible;
}

.crm-wa[data-blazor] .crm-wa__assign-menu {
    display: none;
}

.crm-wa[data-blazor] .crm-wa__assign-menu.show {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 8px;
    right: 8px;
    left: auto;
    z-index: 1;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
    max-height: min(220px, 36vh);
    overflow: hidden;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    box-sizing: border-box;
    margin: 0;
    border-radius: 0;
}

.crm-wa[data-blazor] .crm-wa__assign-menu.show .crm-wa__assign-head,
.crm-wa[data-blazor] .crm-wa__assign-menu.show .crm-wa__assign-search {
    flex: 0 0 auto;
}

.crm-wa[data-blazor] .crm-wa__assign-menu.show .crm-wa__assign-list {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.crm-wa[data-blazor] .crm-wa__assign-item {
    max-width: 100%;
    overflow: hidden;
    pointer-events: auto;
}

.crm-wa[data-blazor] .crm-wa__assign-meta,
.crm-wa[data-blazor] .crm-wa__assign-meta strong,
.crm-wa[data-blazor] .crm-wa__assign-meta small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-wa__chat,
.crm-wa__chat-live,
.crm-wa__messages,
.crm-wa__composer {
    cursor: auto;
}

.crm-wa__assign-head {
    align-items: center;
    color: var(--gray-40);
    display: flex;
    font-size: 11px;
    font-weight: 650;
    gap: .4rem;
    letter-spacing: .04em;
    padding: .45rem .85rem .35rem;
    text-transform: uppercase;
}

.crm-wa__assign-head [data-lucide] {
    height: 14px;
    width: 14px;
}

.crm-wa__assign-search {
    align-items: center;
    background: var(--gray-90);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    gap: .4rem;
    margin: .15rem .7rem .45rem;
    padding: .35rem .55rem;
}

.crm-wa__assign-search [data-lucide] {
    color: var(--gray-50);
    flex: 0 0 14px;
    height: 14px;
    width: 14px;
}

.crm-wa__assign-search input {
    background: transparent;
    border: 0;
    color: var(--gray-0);
    flex: 1 1 auto;
    font-size: 13px;
    min-width: 0;
    outline: none;
    padding: 0;
    width: 100%;
}

.crm-wa__assign-list {
    max-height: min(320px, 48vh);
    overflow-x: hidden;
    overflow-y: auto;
}

.crm-wa__assign-item {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--gray-0);
    cursor: pointer;
    display: flex;
    gap: .65rem;
    padding: .55rem .85rem;
    text-align: left;
    width: 100%;
}

.crm-wa__assign-item:hover,
.crm-wa__assign-item:focus-visible {
    background: color-mix(in srgb, var(--gray-90) 88%, var(--accent) 12%);
    outline: none;
}

.crm-wa__assign-item.is-selected {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.crm-wa__assign-avatar {
    align-items: center;
    background: color-mix(in srgb, var(--accent) 22%, var(--gray-90));
    border-radius: 999px;
    color: var(--gray-0);
    display: inline-flex;
    flex: 0 0 34px;
    font-size: 11px;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    letter-spacing: .02em;
    width: 34px;
}

.crm-wa__assign-avatar--muted {
    background: var(--gray-90);
    color: var(--gray-40);
}

.crm-wa__assign-avatar--muted [data-lucide],
.crm-wa__assign-empty [data-lucide] {
    height: 16px;
    width: 16px;
}

.crm-wa__assign-meta {
    display: grid;
    flex: 1 1 auto;
    gap: .05rem;
    min-width: 0;
}

.crm-wa__assign-meta strong {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-wa__assign-meta small,
.crm-wa__assign-phone {
    color: var(--gray-50);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    line-height: 1.2;
}

.crm-wa__assign-check {
    color: var(--accent);
    flex: 0 0 16px;
    height: 16px;
    opacity: 0;
    width: 16px;
}

.crm-wa__assign-item.is-selected .crm-wa__assign-check {
    opacity: 1;
}

.crm-wa__assign-empty {
    align-items: center;
    color: var(--gray-50);
    display: flex;
    font-size: 12px;
    gap: .45rem;
    padding: .7rem .85rem;
}

.crm-wa-modal .modal-dialog {
    margin-left: auto;
    margin-right: auto;
    max-width: min(560px, calc(100vw - 32px));
}

.crm-wa-modal--sheet .modal-dialog {
    max-width: min(560px, calc(100vw - 32px));
}

.crm-wa-modal .modal-content {
    background: var(--cc-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    box-shadow: 0 18px 44px rgba(9, 9, 11, .18) !important;
    overflow: hidden;
}

.crm-wa-modal .modal-header,
.crm-wa-modal .modal-footer {
    align-items: center;
    display: flex;
    gap: .75rem;
    padding: .85rem 1rem;
}

.crm-wa-modal .modal-header {
    border-bottom: 1px solid var(--border);
    min-height: 56px;
}

.crm-wa-modal .modal-title {
    color: var(--gray-0) !important;
    font-size: 16px !important;
    font-weight: 650 !important;
    letter-spacing: -.02em !important;
    line-height: 1.2;
    margin: 0;
    padding-bottom: 5px;
}

.crm-wa-modal .modal-header .btn-close {
    align-items: center;
    background-color: var(--gray-100);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: none !important;
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    margin: 0 0 0 auto !important;
    opacity: 1;
    padding: 0 !important;
    position: static !important;
    transform: none !important;
    width: 32px;
}

.crm-wa-modal .modal-header .btn-close:hover,
.crm-wa-modal .modal-header .btn-close:focus,
.crm-wa-modal .modal-header .btn-close:focus-visible {
    background-color: var(--accent-muted);
    border-color: var(--accent);
    opacity: 1;
    outline: none;
}

.crm-wa-modal .modal-body {
    padding: 1rem;
}

.crm-wa-modal .modal-footer {
    border-top: 1px solid var(--border);
    justify-content: flex-end;
}

.crm-wa-modal .modal-footer .btn {
    min-height: 38px;
    min-width: 108px;
    padding-left: 1rem;
    padding-right: 1rem;
}

.crm-wa-modal .form-label {
    color: var(--gray-40) !important;
    display: block;
    font-size: 11px !important;
    font-weight: 650 !important;
    letter-spacing: .04em !important;
    margin-bottom: .35rem;
    text-transform: uppercase !important;
}

.crm-wa-modal .form-control,
.crm-wa-modal .form-select {
    background-color: var(--gray-100) !important;
    border-color: var(--border) !important;
    color: var(--gray-0) !important;
    font-size: 13px !important;
    min-height: 40px;
    padding-left: .75rem !important;
    padding-right: .75rem !important;
}

.crm-wa-modal textarea.form-control {
    line-height: 1.45;
    min-height: 96px;
    resize: vertical;
}

.crm-wa-modal .form-control:focus,
.crm-wa-modal .form-select:focus {
    border-color: var(--pc-cyan) !important;
    box-shadow: 0 0 0 2px var(--pc-cyan-muted) !important;
}

html.dark-layout .crm-wa-modal .btn-close,
html.dark .crm-wa-modal .btn-close,
[data-theme="dark"] .crm-wa-modal .btn-close {
    filter: invert(1) grayscale(1);
}

@media (max-width: 575.98px) {
    .crm-wa-modal .modal-dialog {
        margin: .75rem;
        max-width: calc(100vw - 1.5rem);
    }

    .crm-wa-modal .modal-header,
    .crm-wa-modal .modal-body,
    .crm-wa-modal .modal-footer {
        padding-left: .85rem;
        padding-right: .85rem;
    }

    .crm-wa-modal .modal-body {
        max-height: calc(100dvh - 180px);
        overflow-y: auto;
    }

    .crm-wa-modal .modal-footer {
        display: grid;
        gap: .5rem;
        grid-template-columns: 1fr 1fr;
    }

    .crm-wa-modal .modal-footer .btn {
        margin: 0 !important;
        min-width: 0;
        width: 100%;
    }

    .crm-wa-modal--sheet {
        padding: 0 !important;
    }

    .crm-wa-modal--sheet .modal-dialog {
        align-items: stretch;
        height: 100dvh;
        margin: 0;
        max-width: 100%;
        min-height: 100dvh;
    }

    .crm-wa-modal--sheet .modal-content {
        border: 0 !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
        height: 100dvh;
        max-height: 100dvh;
        min-height: 100dvh;
    }

    .crm-wa-modal--sheet .modal-header {
        min-height: 56px;
        padding-top: max(.75rem, env(safe-area-inset-top));
    }

    .crm-wa-modal--sheet .modal-body {
        flex: 1 1 auto;
        max-height: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 1.25rem;
    }

    .crm-wa-modal--sheet .modal-footer {
        padding-bottom: max(.85rem, env(safe-area-inset-bottom));
    }

    .crm-wa-modal--sheet .form-control,
    .crm-wa-modal--sheet .form-select {
        font-size: 16px !important;
        min-height: 46px;
    }
}

.crm-tpl__toolbar h2,
.crm-tpl__title {
    font-size: 13px;
    font-weight: 650;
    margin: 0;
}

.crm-tpl__toolbar p {
    color: var(--gray-70);
    font-size: 11px;
    margin: 0;
}

.crm-tpl__actions {
    align-items: center;
    display: flex;
    gap: 2px;
}

.crm-tpl__icon,
.crm-tpl__add {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--gray-40);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
    text-decoration: none;
    width: 36px;
    -webkit-appearance: none;
}

.crm-tpl__icon:hover,
.crm-tpl__add:hover {
    color: var(--gray-0);
}

.crm-tpl__add {
    background: var(--gray-0);
    border-radius: 999px;
    color: var(--gray-100, #fff);
    flex-basis: 32px;
    height: 32px;
    width: 32px;
}

.crm-tpl__add:hover {
    color: var(--gray-100, #fff);
}

.crm-tpl__icon i,
.crm-tpl__icon svg,
.crm-tpl__add i,
.crm-tpl__add svg {
    height: 18px;
    width: 18px;
}

.crm-tpl__add i,
.crm-tpl__add svg {
    height: 16px;
    width: 16px;
}

.crm-tpl {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
}

.crm-tpl__shell {
    display: grid;
    flex: 1;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    min-height: 0;
    overflow: hidden;
}

.crm-tpl__list {
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.crm-tpl__row {
    grid-template-columns: 32px minmax(0, 1fr) auto;
}

.crm-tpl__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crm-tpl__preview {
    background: var(--wa-paper);
    min-height: 0;
    overflow: auto;
    padding: 1rem;
}

.crm-tpl__preview-card {
    background: var(--cc-surface);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: .65rem;
    padding: .85rem;
}

.crm-tpl__detail-head {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.crm-tpl__preview-card h3 {
    font-size: 14px;
    font-weight: 650;
    margin: 0;
}

.crm-tpl__badge {
    border: 1px solid var(--chip-neutral-border);
    color: var(--gray-40);
    display: inline-flex;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: inherit;
    padding: .15rem .45rem;
    text-transform: none;
}

.crm-tpl__badge.is-ok {
    background: var(--chip-ok-bg);
    border-color: var(--chip-ok-border);
    color: var(--chip-ok);
}

.crm-tpl__badge.is-warn {
    background: var(--chip-warn-bg);
    border-color: var(--chip-warn-border);
    color: var(--chip-warn);
}

.crm-tpl__badge.is-bad {
    background: var(--chip-danger-bg);
    border-color: var(--chip-danger-border);
    color: var(--chip-danger);
}

.crm-tpl__badge.is-info {
    background: var(--chip-info-bg);
    border-color: var(--chip-info-border);
    color: var(--chip-info);
}

.crm-tpl__preview #previewIds:empty,
.crm-tpl__preview #previewReject:empty {
    display: none;
}

.crm-tpl__phone {
    align-items: center;
    background: transparent;
    border: 0;
    display: flex;
    justify-content: center;
    min-height: 0;
    padding: .35rem 0 .75rem;
}

.crm-template-builder {
    height: auto;
    min-height: calc(var(--vvh, 100dvh) - 82px);
}

.crm-template-builder__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    min-height: 0;
    padding: 1rem;
}

.crm-template-builder__editor,
.crm-template-builder__preview {
    min-width: 0;
}

.crm-template-builder__editor {
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.crm-template-builder__hero,
.crm-template-card__head,
.crm-template-builder__actions {
    align-items: center;
    display: flex;
    gap: .75rem;
    justify-content: space-between;
}

.crm-template-builder__hero {
    justify-content: flex-start;
}

.crm-template-card {
    background: var(--cc-surface);
    border: 1px solid var(--border);
    padding: .9rem;
}

.crm-template-card h3 {
    color: var(--gray-0);
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 .65rem;
}

.crm-template-card__head h3 {
    margin: 0;
}

.crm-template-card__head small,
.crm-template-card small {
    color: var(--gray-70);
    font-size: 11px;
}

.crm-template-card .form-label {
    color: var(--gray-40) !important;
    display: block;
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: .06em !important;
    margin-bottom: .3rem;
    text-transform: uppercase !important;
}

.crm-template-card .form-control,
.crm-template-card .form-select {
    background: var(--gray-100) !important;
    border-color: var(--border) !important;
    color: var(--gray-0) !important;
    min-height: 40px;
}

.crm-template-formatbar,
.crm-template-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-bottom: .5rem;
}

.crm-template-formatbar button,
.crm-template-suggestions button {
    align-items: center;
    background: var(--gray-100);
    border: 1px solid var(--border);
    color: var(--gray-40);
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    gap: .3rem;
    min-height: 30px;
    padding: .25rem .55rem;
}

.crm-template-formatbar button {
    height: 32px;
    justify-content: center;
    padding: 0;
    width: 32px;
}

.crm-template-formatbar button:hover,
.crm-template-suggestions button:hover {
    background: var(--accent-muted);
    border-color: var(--accent);
    color: var(--accent);
}

.crm-template-suggestions {
    margin: .55rem 0 0;
}

.crm-template-buttons {
    display: grid;
    gap: .45rem;
}

.crm-template-button-row {
    align-items: center;
    display: grid;
    gap: .45rem;
    grid-template-columns: 140px minmax(140px, 1fr) minmax(180px, 1.2fr) auto;
}

.crm-template-button-row > *:nth-child(3):last-child {
    grid-column: span 2;
}

.crm-template-empty {
    background: var(--gray-90);
    border: 1px dashed var(--border);
    color: var(--gray-70);
    font-size: 12px;
    padding: .65rem;
}

.crm-template-vars {
    border: 1px solid var(--border);
    overflow: auto;
}

.crm-template-vars table {
    border-collapse: collapse;
    min-width: 560px;
    width: 100%;
}

.crm-template-vars th,
.crm-template-vars td {
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    padding: .45rem;
    vertical-align: middle;
}

.crm-template-vars th {
    background: var(--gray-90);
    color: var(--gray-40);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.crm-template-vars tr:last-child td {
    border-bottom: 0;
}

.crm-template-send-vars {
    display: grid;
    gap: .55rem;
}

.crm-template-var-card {
    background: var(--gray-100);
    border: 1px solid var(--border);
    display: grid;
    gap: .45rem;
    padding: .7rem .75rem;
}

.crm-template-var-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .65rem;
    justify-content: space-between;
}

.crm-template-var-card code {
    color: var(--gray-0);
    font-size: 12px;
}

.crm-template-var-card small {
    color: var(--gray-70);
    font-size: 11px;
}

.crm-template-var-card .form-control {
    min-height: 42px;
}

.crm-template-builder__actions {
    background: var(--cc-surface);
    border: 1px solid var(--border);
    padding: .75rem;
    position: sticky;
    bottom: .5rem;
    z-index: 2;
}

body:has(#crmTemplateBuilder) .content-wrapper,
body:has(#crmTemplateBuilder) .app-content.content,
body:has(#crmTemplateBuilder) .content-body {
    overflow: visible !important;
}

.crm-template-builder__preview {
    align-items: flex-start;
    align-self: start;
    display: flex;
    justify-content: center;
    padding-top: .25rem;
    position: sticky;
    top: calc(var(--navbar-height, 62px) + 16px);
    z-index: 4;
}

.crm-iphone {
    --iphone-w: 312px;
    filter: drop-shadow(0 22px 36px rgba(9, 9, 11, .28));
    margin: 0 auto;
    max-width: var(--iphone-w);
    position: relative;
    width: 100%;
}

.crm-iphone__btn {
    background: linear-gradient(90deg, #3a3a3c, #1c1c1e);
    border-radius: 2px;
    position: absolute;
    width: 3px;
    z-index: 2;
}

.crm-iphone__btn--silent { height: 18px; left: -3px; top: 18%; }
.crm-iphone__btn--volup { height: 36px; left: -3px; top: 26%; }
.crm-iphone__btn--voldown { height: 36px; left: -3px; top: 36%; }
.crm-iphone__btn--power { height: 58px; right: -3px; top: 28%; }

.crm-iphone__bezel {
    aspect-ratio: 9 / 19.5;
    background: linear-gradient(160deg, #5b5754 0%, #2c2a28 38%, #1a1918 100%);
    border: 1px solid #7a756f;
    border-radius: 46px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
    padding: 8px;
}

.crm-iphone__glass {
    background: #efe7de;
    border-radius: 34px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.crm-iphone__island {
    align-items: center;
    background: #050505;
    border-radius: 999px;
    display: flex;
    height: 22px;
    justify-content: flex-end;
    left: 50%;
    padding: 0 8px;
    position: absolute;
    top: 10px;
    transform: translateX(-50%);
    width: 92px;
    z-index: 4;
}

.crm-iphone__lens {
    background: radial-gradient(circle at 35% 35%, #3b4a66, #111827 62%);
    border-radius: 50%;
    height: 8px;
    width: 8px;
}

.crm-iphone__status {
    align-items: center;
    color: #111;
    display: flex;
    font-size: 11px;
    font-weight: 700;
    justify-content: space-between;
    padding: 12px 18px 4px;
}

.crm-iphone__sys {
    align-items: center;
    display: inline-flex;
    gap: .28rem;
}

.crm-iphone__sys svg {
    height: 11px;
    width: 16px;
}

.crm-iphone__battery {
    border: 1.2px solid currentColor;
    border-radius: 3px;
    display: inline-block;
    height: 8px;
    position: relative;
    width: 18px;
}

.crm-iphone__battery::after {
    background: currentColor;
    border-radius: 1px;
    content: "";
    height: 3px;
    position: absolute;
    right: -3px;
    top: 1.5px;
    width: 1.5px;
}

.crm-iphone__battery i {
    background: #34c759;
    display: block;
    height: 100%;
    width: 72%;
}

.crm-iphone__wa-head {
    align-items: center;
    background: #f6f6f6;
    border-bottom: 1px solid rgba(0, 0, 0, .06);
    color: #111;
    display: flex;
    gap: .4rem;
    min-height: 48px;
    padding: 4px 10px 8px;
}

.crm-iphone__wa-back svg,
.crm-iphone__wa-actions svg {
    color: #00a884;
    height: 18px;
    width: 18px;
}

.crm-iphone__wa-head .crm-wa__avatar {
    background: #d9fdd3;
    color: #075e54;
    flex: 0 0 32px;
    font-size: 11px;
    height: 32px;
    width: 32px;
}

.crm-iphone__wa-who {
    flex: 1;
    min-width: 0;
}

.crm-iphone__wa-who strong,
.crm-iphone__wa-who small {
    display: block;
    line-height: 1.15;
}

.crm-iphone__wa-who strong {
    font-size: 13px;
}

.crm-iphone__wa-who small {
    color: #667781;
    font-size: 10px;
}

.crm-iphone__wa-actions {
    display: inline-flex;
    gap: .55rem;
}

.crm-iphone__chat {
    background-color: #efeae2;
    background-image: url("../img/crm-wa-doodle.svg");
    background-repeat: repeat;
    background-size: 220px;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .35rem;
    justify-content: flex-end;
    min-height: 0;
    overflow: auto;
    padding: .7rem .65rem 1rem;
}

.crm-iphone__in {
    align-self: flex-start;
    background: #fff;
    border-radius: 12px 12px 12px 4px;
    box-shadow: 0 1px 1px rgba(11, 20, 26, .08);
    color: #111b21;
    max-width: 82%;
    padding: .38rem .5rem .22rem;
}

.crm-iphone__in p {
    font-size: 12px;
    line-height: 1.35;
    margin: 0;
}

.crm-iphone__in span {
    color: #667781;
    display: block;
    font-size: 9px;
    margin-top: .15rem;
    text-align: right;
}

html.dark .crm-iphone__glass,
html.dark-layout .crm-iphone__glass {
    background: #0b141a;
}

html.dark .crm-iphone__chat,
html.dark-layout .crm-iphone__chat {
    background-color: #0b141a;
    background-image: url("../img/crm-wa-doodle-dark.svg");
}

html.dark .crm-iphone__wa-head,
html.dark-layout .crm-iphone__wa-head,
html.dark .crm-iphone__dock,
html.dark-layout .crm-iphone__dock {
    background: #202c33;
    border-color: #111b21;
    color: #e9edef;
}

html.dark .crm-iphone__status,
html.dark-layout .crm-iphone__status {
    color: #e9edef;
}

html.dark .crm-iphone__in,
html.dark-layout .crm-iphone__in {
    background: #202c33;
    color: #e9edef;
}

.crm-iphone__dock {
    align-items: center;
    background: #f6f6f6;
    display: flex;
    gap: .4rem;
    padding: .35rem .55rem .2rem;
}

.crm-iphone__plus,
.crm-iphone__mic {
    align-items: center;
    color: #00a884;
    display: inline-flex;
    font-size: 18px;
    font-weight: 500;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.crm-iphone__mic {
    background: #00a884;
    border-radius: 50%;
    position: relative;
}

.crm-iphone__mic::before {
    background: #fff;
    border-radius: 6px;
    content: "";
    height: 10px;
    width: 6px;
}

.crm-iphone__field {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    color: #8696a0;
    flex: 1;
    font-size: 11px;
    padding: .28rem .65rem;
}

.crm-iphone__home {
    background: #111;
    border-radius: 999px;
    height: 4px;
    margin: .25rem auto .45rem;
    width: 96px;
}

.crm-template-message {
    background: #d9fdd3;
    border-radius: 12px 12px 4px 12px;
    box-shadow: 0 1px 0 rgba(11, 20, 26, .08);
    color: #111b21;
    margin-left: auto;
    max-width: 86%;
    overflow: hidden;
    padding: .42rem .5rem .28rem;
    position: relative;
}

.crm-template-message::after {
    border-left: 8px solid #d9fdd3;
    border-top: 8px solid transparent;
    content: "";
    height: 0;
    position: absolute;
    right: -6px;
    top: 0;
    width: 0;
}

.crm-template-message__header {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: .35rem;
}

.crm-template-message__media {
    align-items: center;
    background: rgba(7, 94, 84, .12);
    border-radius: 8px;
    color: #075e54;
    display: flex;
    flex-direction: column;
    font-size: 12px;
    gap: .35rem;
    justify-content: center;
    margin-bottom: .45rem;
    min-height: 120px;
    overflow: hidden;
    position: relative;
}

.crm-template-message__media.is-preview {
    background: #111827;
    color: #fff;
    min-height: 0;
    padding: 0;
}

.crm-template-message__media.is-preview img,
.crm-template-message__media.is-preview video,
.crm-template-message__media.is-preview .crm-template-message__pdf {
    display: block;
    max-height: 220px;
    object-fit: cover;
    width: 100%;
}

.crm-template-message__media.is-preview video {
    background: #000;
    max-height: 240px;
    object-fit: contain;
}

.crm-template-message__media.is-document {
    background: rgba(7, 94, 84, .08);
    color: #075e54;
}

.crm-template-message__media.is-document .crm-template-message__pdf {
    background: #fff;
    border: 0;
    height: 200px;
    max-height: 220px;
}

.crm-template-message__doc-link {
    align-items: center;
    color: inherit;
    display: flex;
    gap: .45rem;
    padding: .85rem 1rem;
    text-decoration: none;
    width: 100%;
}

.crm-template-message__media-fallback {
    align-items: center;
    display: none;
    flex-direction: column;
    gap: .35rem;
    justify-content: center;
    min-height: 120px;
    padding: .75rem;
}

.crm-template-message__media.is-broken img,
.crm-template-message__media.is-broken video,
.crm-template-message__media.is-broken .crm-template-message__pdf,
.crm-template-message__media.is-broken .crm-template-message__doc-link {
    display: none !important;
}

.crm-template-message__media.is-broken .crm-template-message__media-fallback,
.crm-template-message__media:not(.is-preview) .crm-template-message__media-fallback {
    display: flex;
}

.crm-template-message__media [data-lucide],
.crm-template-message__media svg {
    height: 28px;
    width: 28px;
}

.crm-template-message__body {
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
}

.crm-template-message__body code,
.crm-template-message__body .crm-wa-codeblock {
    background: rgba(17, 24, 39, .08);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    padding: .05rem .2rem;
}

.crm-template-message__body .crm-wa-codeblock {
    display: block;
    margin: .3rem 0;
    padding: .35rem;
}

.crm-template-message__body blockquote {
    border-left: 3px solid rgba(17, 24, 39, .28);
    color: rgba(17, 24, 39, .78);
    margin: .2rem 0;
    padding-left: .45rem;
}

.crm-wa-listline {
    display: grid;
    gap: .35rem;
    grid-template-columns: auto minmax(0, 1fr);
}

.crm-template-message__footer {
    color: rgba(17, 24, 39, .55);
    font-size: 11px;
    margin-top: .4rem;
}

.crm-template-message__buttons {
    border-top: 1px solid rgba(17, 24, 39, .1);
    margin: .45rem -.5rem 0;
}

.crm-template-message__button {
    align-items: center;
    border-bottom: 1px solid rgba(17, 24, 39, .08);
    color: #027eb5;
    display: flex;
    font-size: 12px;
    font-weight: 650;
    gap: .35rem;
    justify-content: center;
    min-height: 34px;
    padding: .35rem .5rem;
}

.crm-template-message__button:last-child {
    border-bottom: 0;
}

.crm-template-message__button [data-lucide],
.crm-template-message__button svg {
    height: 13px;
    width: 13px;
}

.crm-template-message__time {
    align-items: center;
    color: #667781;
    display: flex;
    font-size: 10px;
    gap: .25rem;
    justify-content: flex-end;
    margin-top: .25rem;
}

.crm-template-message__ticks {
    color: #53bdeb;
    letter-spacing: -1px;
}

@media (max-width: 991.98px) {
    .crm-template-builder__grid {
        grid-template-columns: 1fr;
    }

    .crm-template-builder__preview {
        order: -1;
        position: static;
    }

    .crm-iphone {
        --iphone-w: 280px;
    }
}

@media (max-width: 575.98px) {
    .crm-template-builder__grid {
        padding: .75rem;
    }

    .crm-template-button-row {
        grid-template-columns: 1fr;
    }

    .crm-template-button-row > *:nth-child(3):last-child {
        grid-column: auto;
    }

    .crm-template-builder__actions {
        grid-template-columns: 1fr 1fr;
        display: grid;
    }

    .crm-iphone {
        --iphone-w: min(272px, 82vw);
    }
}

.crm-wa__profile {
    background: var(--cc-surface);
    border-left: 1px solid var(--border);
    box-sizing: border-box;
    display: none;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.crm-wa.is-profile .crm-wa__profile {
    display: flex;
}

.crm-wa__profile-head {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: .5rem;
    height: var(--wa-head);
    min-width: 0;
    padding: 0 .5rem 0 .75rem;
    border-bottom: 1px solid var(--border);
    background: var(--cc-surface);
    position: sticky;
    top: 0;
    z-index: 2;
}

.crm-wa__profile-close {
    flex: 0 0 var(--wa-icon);
    margin-left: auto;
}

.crm-wa__profile-kicker {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .08rem;
    min-width: 0;
}

.crm-wa__profile-kicker small {
    color: var(--gray-70);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.crm-wa__profile-head strong {
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-wa__profile-body {
    box-sizing: border-box;
    display: block;
    flex: 1 1 auto;
    height: auto;
    max-height: none;
    max-width: 100%;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: .35rem .65rem 1.6rem;
    width: 100%;
}

.crm-wa__profile-body > .crm-wa__hero,
.crm-wa__profile-body > .crm-wa__section {
    flex: 0 0 auto;
    flex-shrink: 0;
}

.crm-wa__hero {
    align-items: start;
    display: grid;
    gap: 10px 12px;
    grid-template-columns: auto minmax(0, 1fr);
    margin-bottom: .55rem;
    text-align: left;
}

.crm-wa__hero .crm-wa__avatar {
    border: 1px solid var(--border-strong, #d4d4d8);
    box-shadow: none;
    font-size: 15px;
    height: 48px;
    width: 48px;
}

.crm-wa__hero .crm-wa__avatar.is-live {
    box-shadow: 0 0 0 2px var(--pc-cyan);
}

.crm-wa__hero .crm-wa__avatar.is-idle {
    box-shadow: none;
}

.crm-wa__hero-grid {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.crm-wa__hero strong {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.crm-wa__hero-handle {
    color: var(--gray-40);
    font-size: 12px;
    font-weight: 500;
}

.crm-wa__hero-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
}

.crm-wa__hero-phone {
    color: var(--gray-70);
    font-size: 12px;
}

.crm-wa__hero .crm-wa__window-chip {
    border-radius: 3px;
    margin-top: 0;
}

.crm-wa__facts {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    justify-content: flex-start;
    margin: .15rem 0 0;
}

.crm-wa__fact {
    align-items: center;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--gray-40);
    display: inline-flex;
    font-size: 10px;
    font-weight: 600;
    gap: .28rem;
    letter-spacing: .04em;
    padding: .18rem .5rem;
    text-transform: uppercase;
}

.crm-wa__fact[data-lucide],
.crm-wa__fact i {
    width: 12px;
    height: 12px;
}

.crm-wa__fact.is-on {
    border-color: rgba(60, 181, 194, .45);
    color: var(--pc-cyan-hover);
}

.crm-wa__section {
    background: var(--cc-surface);
    border: 1px solid var(--border);
    border-radius: 3px;
    box-shadow: none;
    box-sizing: border-box;
    margin: 0 0 .5rem;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    padding: .55rem .6rem .6rem;
}

.crm-wa__section .crm-wa__empty {
    display: block;
    flex: none;
    padding: 0;
    text-align: left;
}

.crm-wa__section h3 {
    color: var(--gray-70);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .08em;
    margin: 0 0 .55rem;
    text-transform: uppercase;
}

.crm-wa__section--sales {
    background: var(--cc-surface);
}

.crm-wa__sales {
    display: grid;
    gap: .45rem;
}

.crm-wa__sale {
    appearance: none;
    background: var(--cc-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: .12rem .65rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: .7rem .75rem;
    text-align: left;
    width: 100%;
}

.crm-wa__sale:hover,
.crm-wa__sale:focus-visible {
    border-color: rgba(60, 181, 194, .55);
    box-shadow: 0 0 0 3px rgba(60, 181, 194, .12);
    outline: none;
}

.crm-wa__sale-code {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: -.02em;
}

.crm-wa__sale-amt {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    justify-self: end;
}

.crm-wa__sale-curso,
.crm-wa__sale-date {
    color: var(--gray-70);
    font-size: 11px;
    grid-column: 1 / -1;
}

.crm-wa__sale-meta {
    align-items: center;
    display: flex;
    gap: .4rem;
    grid-column: 1 / -1;
    justify-content: space-between;
    margin-top: .2rem;
}

.crm-wa__sale-pay {
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .04em;
    padding: .08rem .45rem;
    text-transform: uppercase;
}

.crm-wa__sale-pay.is-paid {
    background: var(--chip-ok-bg);
    border-color: var(--chip-ok-border);
    color: var(--chip-ok);
}

.crm-wa__sale-pay.is-partial {
    background: var(--chip-warn-bg);
    border-color: var(--chip-warn-border);
    color: var(--chip-warn);
}

.crm-wa__sale-pay.is-due {
    background: var(--chip-danger-bg);
    border-color: var(--chip-danger-border);
    color: var(--chip-danger);
}

.crm-wa__more {
    color: var(--pc-cyan-hover);
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    margin-top: .45rem;
}

.crm-wa__empty {
    color: var(--gray-70);
    font-size: 12px;
    font-weight: 400;
    margin: 0;
}

.crm-wa__compose {
    background: var(--cc-surface);
    display: none;
}

.crm-wa.is-compose .crm-wa__compose {
    display: flex;
}

.crm-wa__compose-head {
    align-items: center;
    background: var(--cc-surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: .5rem;
    min-height: var(--wa-head);
    padding: 0 .75rem;
}

.crm-wa__compose-kicker {
    display: flex;
    flex-direction: column;
    gap: .08rem;
    min-width: 0;
}

.crm-wa__compose-kicker small {
    color: var(--gray-70);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.crm-wa__compose-kicker strong {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.02em;
}

.crm-wa__compose-body {
    display: grid;
    flex: 1;
    gap: .75rem;
    min-height: 0;
    overflow: auto;
    padding: .85rem .85rem 1.2rem;
}

.crm-wa__compose-main {
    display: contents;
}

.crm-wa__compose-client {
    display: grid;
    gap: .85rem;
}

.crm-wa__compose-client .crm-client-search,
.crm-wa__compose-client .crm-phone {
    margin-bottom: 0;
}

.crm-wa__compose-card {
    background: var(--cc-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(9, 9, 11, .04);
    padding: .85rem .9rem 1rem;
}

.crm-wa__compose-card h3 {
    color: var(--gray-70);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .08em;
    margin: 0 0 .65rem;
    text-transform: uppercase;
}

.crm-wa__compose-card-title {
    align-items: center;
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    margin-bottom: .65rem;
}

.crm-wa__compose-card-title h3 {
    margin: 0;
}

.crm-wa__compose-search-toggle {
    display: none;
}

.crm-wa__compose-card--preview {
    padding: .75rem;
}

.crm-wa__compose-card--preview .crm-template-send__preview {
    border: 0;
    border-radius: 12px;
    min-height: 160px;
    overflow: auto;
}

.crm-wa__compose-foot {
    background: var(--cc-surface);
    border-top: 1px solid var(--border);
    padding: .7rem .85rem calc(.7rem + env(safe-area-inset-bottom));
}

.crm-wa__compose-go {
    align-items: center;
    background: var(--gray-0);
    border: 0;
    border-radius: 12px;
    color: var(--cc-surface);
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 650;
    gap: .45rem;
    justify-content: center;
    min-height: 46px;
    width: 100%;
}

.crm-wa__compose-line-note {
    color: var(--danger, #b42318);
    font-size: 12px;
    line-height: 1.35;
    margin: 0 0 .2rem;
}

.crm-wa__compose-go:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.crm-wa__compose-go.is-busy {
    cursor: wait;
    opacity: .72;
    pointer-events: none;
}

.crm-wa__composer.is-locked {
    opacity: .62;
    pointer-events: none;
}

.crm-wa__composer.is-sending {
    position: relative;
}

.crm-wa__composer.is-sending::after {
    background: rgba(255, 255, 255, .45);
    content: '';
    inset: 0;
    pointer-events: auto;
    position: absolute;
    z-index: 4;
}

.crm-wa__composer.is-sending .crm-wa__send {
    opacity: .55;
    pointer-events: none;
}

html.dark .crm-wa__composer.is-sending::after,
html.dark-layout .crm-wa__composer.is-sending::after {
    background: rgba(17, 27, 33, .35);
}

.crm-wa__compose-go:hover,
.crm-wa__compose-go:focus-visible {
    background: var(--gray-20);
    outline: none;
}

html.dark .crm-wa__section,
html.dark-layout .crm-wa__section,
html.dark .crm-wa__sale,
html.dark-layout .crm-wa__sale,
html.dark .crm-wa__fact,
html.dark-layout .crm-wa__fact {
    box-shadow: none;
}

@media (min-width: 992px) and (max-width: 1399px) {
    .crm-wa.is-profile {
        --wa-list: 260px;
        --wa-profile: min(320px, 32vw);
    }
}

@media (min-width: 992px) and (max-width: 1440px) {
    .crm-wa.is-profile .crm-wa__shell {
        grid-template-columns: minmax(0, 1fr) minmax(0, min(340px, 36vw));
    }

    .crm-wa.is-profile .crm-wa__list {
        display: none;
    }
}

@media (min-width: 992px) and (max-width: 1279px) {
    .crm-wa {
        --wa-profile: 280px;
    }
}

.crm-wa__dl {
    display: grid;
    gap: .35rem;
    margin: 0;
    max-width: 100%;
    min-width: 0;
}

.crm-wa__dl div {
    display: grid;
    gap: .05rem;
    max-width: 100%;
    min-width: 0;
}

.crm-wa__dl dt {
    color: var(--gray-70);
    font-size: 10px;
    font-weight: 650;
}

.crm-wa__dl dd,
.crm-wa__dl dd a {
    display: block;
    font-size: 12px;
    margin: 0;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.crm-wa__fold {
    margin-top: .45rem;
}

.crm-wa__fold summary {
    color: var(--gray-40);
    cursor: pointer;
    font-size: 12px;
    font-weight: 650;
}

.crm-wa__fold .crm-wa__dl {
    margin-top: .4rem;
}

.crm-wa__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    max-width: 100%;
    min-width: 0;
}

.crm-wa__tag {
    align-items: center;
    background: var(--tag, #0f766e);
    border: 1px solid var(--tag, #0f766e);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 11px;
    font-weight: 650;
    gap: .25rem;
    max-width: 100%;
    padding: .18rem .5rem;
}

.crm-wa__tag button {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.crm-wa__notepad {
    background: var(--gray-90);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    min-height: 148px;
    min-width: 0;
    overflow: hidden;
    padding: .55rem .65rem .4rem;
    width: 100%;
}

.crm-wa__notepad textarea {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
    flex: 1 1 auto;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.45;
    min-height: 112px;
    outline: none !important;
    padding: 0 !important;
    resize: vertical;
    width: 100%;
}

.crm-wa__notepad textarea:focus {
    box-shadow: none !important;
}

.crm-wa__notepad-foot {
    color: var(--gray-70);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .04em;
    margin-top: .35rem;
    text-align: right;
    text-transform: uppercase;
}

.crm-wa__tag-form {
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr);
    margin-top: .55rem;
    max-width: 100%;
    min-width: 0;
}

.crm-wa__profile-body .form-control,
.crm-wa__profile-body .form-select,
.crm-wa__profile-body textarea {
    box-sizing: border-box;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
}

.crm-wa__tag-form input,
.crm-wa__tag-form select {
    background: var(--cc-surface, #fff) !important;
    border: 1px solid var(--border-strong, #d4d4d8) !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    box-sizing: border-box;
    color: var(--gray-0) !important;
    flex: 1 1 auto;
    font-size: 12px !important;
    height: 32px !important;
    max-width: 100% !important;
    min-height: 32px !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    width: 100% !important;
}

.crm-wa__tag-new {
    display: grid;
    gap: 6px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.crm-wa__tag-color-label {
    color: var(--gray-50);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .06em;
    margin: .15rem 0 0;
    text-transform: uppercase;
}

.crm-wa__tag-colors {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.crm-wa__tag-swatch {
    aspect-ratio: 1;
    background: var(--swatch, #0f766e);
    border: 2px solid transparent;
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
    cursor: pointer;
    min-height: 22px;
    padding: 0;
}

.crm-wa__tag-swatch.is-on {
    border-color: var(--gray-0);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--swatch) 35%, transparent);
}

.crm-wa__tag-add {
    align-items: center;
    background: var(--cc-surface, #fff);
    border: 1px solid var(--border-strong, #d4d4d8);
    border-radius: 3px;
    color: var(--gray-0);
    cursor: pointer;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    height: 32px;
    justify-content: center;
    letter-spacing: .08em;
    padding: 0 12px;
    text-transform: uppercase;
    white-space: nowrap;
}

.crm-wa__tag-add:hover {
    border-color: var(--gray-40, #71717a);
}

@media (max-width: 991px) {
    body:has(#crmInbox) .app-content.content,
    html body:has(#crmInbox) .content.app-content {
        height: var(--vvh, 100dvh);
        left: var(--vv-left, 0px);
        max-height: var(--vvh, 100dvh);
        position: fixed;
        top: var(--vv-top, 0px);
        width: var(--vvw, 100%);
    }

    body:has(#crmTemplates) .app-content.content,
    html body:has(#crmTemplates) .content.app-content {
        left: var(--vv-left, 0px);
        position: fixed;
        top: calc(var(--vv-top, 0px) + var(--navbar-height, 52px) + env(safe-area-inset-top, 0px));
        height: calc(var(--vvh, 100dvh) - var(--navbar-height, 52px) - env(safe-area-inset-top, 0px));
        max-height: calc(var(--vvh, 100dvh) - var(--navbar-height, 52px) - env(safe-area-inset-top, 0px));
        padding-top: 0 !important;
        width: var(--vvw, 100%);
    }

    body:has(#crmInbox) .content-wrapper,
    body:has(#crmInbox) .content-body,
    body:has(#crmTemplates) .content-wrapper,
    body:has(#crmTemplates) .content-body {
        height: 100%;
        max-height: 100%;
    }

    .crm-wa {
        --wa-head: 52px;
        --wa-gutter: 16px;
        height: 100%;
        margin: 0;
        max-height: 100%;
        min-height: 0;
    }

    .crm-wa__shell,
    .crm-wa.is-profile .crm-wa__shell,
    .crm-tpl__shell {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        display: block;
        height: 100%;
        max-height: 100%;
        position: relative;
    }

    .crm-wa__chat,
    .crm-wa__chat-live.is-on {
        height: 100%;
        max-height: 100%;
    }

    body.pc-kb-open .crm-wa__composer {
        padding-bottom: .35rem;
    }

    body.pc-kb-open .crm-wa__composer-tools {
        display: none;
    }

    body.pc-kb-open .crm-wa__tpl-tray {
        height: min(42dvh, 320px);
        max-height: min(42dvh, 320px);
        min-height: 200px;
    }

    .crm-wa textarea#messageText,
    .crm-wa__composer textarea,
    .crm-wa__composer #messageText.form-control {
        font-size: 16px !important;
        height: 40px;
        line-height: 1.35 !important;
        min-height: 40px !important;
        border-radius: 20px !important;
    }

    .crm-wa__composer textarea:focus,
    .crm-wa__composer textarea:focus-visible {
        border-color: transparent !important;
        outline: none !important;
        outline-offset: 0 !important;
    }

    .crm-wa__tpl-tray {
        align-self: stretch;
        height: 50dvh;
        margin: 0 .35rem;
        max-height: 50dvh;
        min-height: 260px;
        max-width: none;
        width: auto;
    }

    .crm-wa__tpl-tray-main {
        gap: .55rem;
        padding-bottom: .4rem;
    }

    .crm-wa__tpl-preview {
        flex: 1 1 auto;
        max-height: none;
        min-height: 140px;
        overflow: auto;
    }

    .crm-wa__tpl-tray-foot {
        border-top: 1px solid var(--border);
        margin: 0;
        padding: .55rem .55rem calc(.55rem + env(safe-area-inset-bottom, 0px));
        position: static;
        background: var(--cc-surface);
        z-index: 2;
    }

    .crm-wa__tpl-tray .form-control,
    .crm-wa__tpl-tray .form-select {
        font-size: 16px;
        min-height: 40px;
    }

    .crm-wa__tpl-preview .crm-template-message {
        max-width: min(94%, 100%);
        margin-right: 2px;
    }

    .crm-wa__composer-row {
        align-items: flex-end;
    }

    .crm-wa__composer .crm-wa__send {
        border-radius: 50%;
        flex-basis: 40px;
        height: 40px;
        width: 40px;
    }

    .crm-wa__nav-menu {
        display: none !important;
    }

    .crm-wa__search {
        display: none !important;
    }

    .crm-wa__icon-btn.crm-wa__search-btn {
        display: inline-flex;
        position: relative;
    }

    .crm-wa__search-btn.is-active::after {
        background: var(--gray-0);
        border-radius: 50%;
        content: "";
        height: 6px;
        position: absolute;
        right: 6px;
        top: 6px;
        width: 6px;
    }

    .crm-wa__list-bar {
        align-items: center;
        display: flex;
        flex: 0 0 auto;
        gap: .35rem;
        margin-left: auto;
        min-width: 0;
        order: 2;
        position: relative;
        width: auto;
    }

    .crm-wa__list-head.is-searching .crm-wa__list-bar {
        flex: 1 0 100%;
        margin-left: 0;
        order: 1;
        width: 100%;
    }

    .crm-wa__search-panel {
        align-items: center;
        background: transparent;
        display: flex;
        gap: .35rem;
        inset: 0;
        opacity: 0;
        padding: 0;
        pointer-events: none;
        position: absolute;
        transform: translateX(18px);
        transition: opacity .18s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
        visibility: hidden;
        z-index: 5;
    }

    .crm-wa__list-head.is-searching .crm-wa__search-panel {
        opacity: 1;
        pointer-events: auto;
        transform: none;
        visibility: visible;
    }

    .crm-wa__list-head.is-searching .crm-wa__brand,
    .crm-wa__list-head.is-searching .crm-wa__icon-actions {
        opacity: 0;
        pointer-events: none;
    }

    .crm-wa__search-field {
        align-items: center;
        background: var(--gray-90, #f4f4f5);
        border: 0;
        border-radius: 999px;
        display: flex;
        flex: 1 1 auto;
        gap: .45rem;
        height: 36px;
        margin: 0;
        min-width: 0;
        padding: 0 .85rem;
    }

    html.dark-layout .crm-wa__search-field,
    html.dark .crm-wa__search-field {
        background: rgba(255, 255, 255, .08);
    }

    .crm-wa__search-field > svg,
    .crm-wa__search-field > i {
        color: var(--gray-40, #a1a1aa);
        flex: 0 0 auto;
        height: 16px;
        width: 16px;
    }

    .crm-wa__search-field input {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        color: var(--gray-0);
        flex: 1 1 auto;
        font-size: 16px !important;
        height: 36px !important;
        min-width: 0;
        outline: 0;
        padding: 0 !important;
        width: 100% !important;
    }

    .crm-wa__search-field input::-webkit-search-cancel-button {
        display: none;
    }

    .crm-wa__search-panel #threadSearchClear[hidden] {
        display: none !important;
    }

    .crm-wa__list-head,
    .crm-wa__profile-head,
    .crm-wa__compose-head {
        background: var(--body-bg, var(--cc-surface));
        border-bottom: 0;
        height: auto;
        min-height: calc(var(--wa-head) + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
        position: sticky;
        top: 0;
        transition: min-height .38s cubic-bezier(.22, 1, .36, 1), padding .38s cubic-bezier(.22, 1, .36, 1);
        z-index: 6;
    }

    .crm-wa__list-head {
        --wa-head: 52px;
        --wa-gutter: 16px;
        align-items: center;
        flex-wrap: nowrap;
        height: auto;
        padding:
            max(.7rem, env(safe-area-inset-top, 0px))
            max(var(--wa-gutter), env(safe-area-inset-right, 0px))
            .35rem
            max(var(--wa-gutter), env(safe-area-inset-left, 0px));
    }

    .crm-wa__list-head.is-searching {
        flex-wrap: wrap;
    }

    .crm-wa__list-head.is-compact,
    body.pc-inbox-compact .crm-wa__list-head {
        --wa-head: 52px;
        padding-top: max(.45rem, env(safe-area-inset-top, 0px));
        padding-bottom: .35rem;
    }

    .crm-wa__inbox-tabs {
        border-bottom: 0;
        flex: 1 0 100%;
        gap: 0;
        order: 4;
        padding: 0;
    }

    .crm-wa__filters {
        padding-top: 2px;
    }

    .crm-wa__chips {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding: 6px max(var(--wa-gutter, 16px), env(safe-area-inset-right, 0px)) 8px max(var(--wa-gutter, 16px), env(safe-area-inset-left, 0px));
        scroll-padding-inline: var(--wa-gutter, 16px);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .crm-wa__chips--queues {
        padding-top: 4px;
        padding-bottom: 6px;
    }

    .crm-wa__chips--accounts,
    .crm-wa__chips--lines {
        padding-bottom: 6px;
    }

    .crm-wa__chips::-webkit-scrollbar {
        display: none;
    }

    .crm-wa__chip {
        border-radius: 999px;
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 600;
        height: 30px;
        padding: 0 12px;
        width: auto;
    }

    .crm-wa__filter-toggle {
        display: flex;
        padding: 4px max(var(--wa-gutter, 16px), env(safe-area-inset-right, 0px)) 10px max(var(--wa-gutter, 16px), env(safe-area-inset-left, 0px));
    }

    .crm-wa__day-head {
        padding: 10px max(var(--wa-gutter, 16px), env(safe-area-inset-right, 0px)) 10px max(var(--wa-gutter, 16px), env(safe-area-inset-left, 0px));
    }

    .crm-wa__thread {
        gap: 8px;
        min-height: 52px;
        padding: 6px max(var(--wa-gutter, 16px), env(safe-area-inset-right, 0px)) 6px max(var(--wa-gutter, 16px), env(safe-area-inset-left, 0px));
    }

    .crm-tpl__row {
        gap: 12px;
        min-height: 64px;
        padding: 12px max(var(--wa-gutter, 16px), env(safe-area-inset-right, 0px)) 12px max(var(--wa-gutter, 16px), env(safe-area-inset-left, 0px));
    }

    .crm-wa__icon-actions {
        gap: .35rem;
    }

    .crm-wa__chat-head {
        padding-top: env(safe-area-inset-top);
        z-index: 8;
    }

    .crm-wa__list-head .crm-wa__brand {
        display: none;
    }

    .crm-wa__brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    .crm-wa__brand strong,
    .crm-tpl__title {
        font-size: 28px;
        font-weight: 600;
        letter-spacing: inherit;
        line-height: 1.1;
        transition: font-size .38s cubic-bezier(.22, 1, .36, 1), font-weight .38s ease;
    }

    .crm-wa__list-head.is-compact .crm-wa__brand strong,
    body.pc-inbox-compact .crm-wa__brand strong {
        font-size: 17px;
        font-weight: 500;
    }

    .crm-wa__add-btn,
    .crm-wa__icon-btn.crm-wa__add-btn {
        background: var(--gray-0, #111) !important;
        border-radius: 999px !important;
        color: var(--gray-100, #fff) !important;
        height: 36px !important;
        width: 36px !important;
    }

    .crm-wa__list-head.is-compact .crm-wa__add-btn,
    .crm-wa__list-head.is-compact .crm-wa__icon-btn.crm-wa__add-btn,
    body.pc-inbox-compact .crm-wa__add-btn,
    body.pc-inbox-compact .crm-wa__icon-btn.crm-wa__add-btn {
        height: 32px !important;
        width: 32px !important;
    }

    .crm-wa__add-btn i[data-lucide],
    .crm-wa__add-btn svg {
        color: inherit;
        height: 18px;
        width: 18px;
    }

    .crm-wa__list-head.is-compact .crm-wa__add-btn i[data-lucide],
    .crm-wa__list-head.is-compact .crm-wa__add-btn svg,
    body.pc-inbox-compact .crm-wa__add-btn i[data-lucide],
    body.pc-inbox-compact .crm-wa__add-btn svg {
        height: 16px;
        width: 16px;
    }

    .crm-wa__add-btn:hover,
    .crm-wa__add-btn:focus-visible,
    .crm-wa__icon-btn.crm-wa__add-btn:hover,
    .crm-wa__icon-btn.crm-wa__add-btn:focus-visible {
        background: var(--gray-0, #111) !important;
        color: var(--gray-100, #fff) !important;
        opacity: .88;
    }

    html.dark-layout .crm-wa__add-btn,
    html.dark .crm-wa__add-btn,
    html.dark-layout .crm-wa__icon-btn.crm-wa__add-btn,
    html.dark .crm-wa__icon-btn.crm-wa__add-btn {
        background: #fff !important;
        color: #111 !important;
    }

    .crm-wa__more-menu {
        display: none !important;
    }

    .crm-wa__back {
        display: inline-flex;
    }

    .crm-wa__list,
    .crm-tpl__list {
        border-right: 0;
        height: 100%;
    }

    .crm-wa:not(.is-open):not(.is-profile) .crm-wa__threads,
    .crm-tpl:not(.is-open) .crm-tpl__rows {
        padding-bottom: var(--pc-tabbar, 88px);
    }

    .crm-wa__chat,
    .crm-wa__profile,
    .crm-tpl__preview {
        background: var(--wa-paper);
        inset: 0;
        position: absolute;
        transform: translateX(100%);
        visibility: hidden;
        width: 100%;
        z-index: 8;
    }

    .crm-wa__profile {
        border-left: 0;
        display: flex;
        z-index: 9;
    }

    .crm-wa__compose {
        background: var(--cc-surface);
        z-index: 10;
    }

    .crm-wa.is-open .crm-wa__chat,
    .crm-tpl.is-open .crm-tpl__preview {
        transform: none;
        visibility: visible;
    }

    body.pc-crm-compose {
        overflow: hidden !important;
    }

    body.pc-crm-compose .crm-wa__compose-scrim,
    .crm-wa__compose-scrim:not([hidden]) {
        background: rgba(15, 15, 18, .42);
        bottom: var(--pc-tabbar, 88px);
        display: block;
        left: 0;
        opacity: 0;
        position: fixed;
        right: 0;
        top: 0;
        transition: opacity .28s cubic-bezier(.22, 1, .36, 1);
        z-index: 1075;
    }

    body.pc-crm-compose .crm-wa__compose-scrim.is-visible,
    .crm-wa__compose-scrim.is-visible:not([hidden]) {
        opacity: 1;
    }

    body.pc-crm-compose .crm-wa__compose-scrim.is-closing {
        opacity: 0;
    }

    body.pc-kb-open.pc-crm-compose .crm-wa__compose-scrim {
        bottom: 0;
    }

    .crm-wa.is-compose .crm-wa__compose,
    body.pc-crm-compose .crm-wa__compose,
    body.pc-crm-compose #composePanel,
    body.pc-crm-compose #composePanel[hidden],
    .crm-wa__compose--layer {
        background: var(--cc-surface);
        border-radius: 18px 18px 0 0;
        bottom: var(--pc-tabbar, 88px);
        box-shadow: 0 -16px 48px rgba(9, 9, 11, .22);
        display: flex !important;
        flex-direction: column;
        height: auto;
        inset: auto 0 var(--pc-tabbar, 88px) 0;
        left: 0;
        max-height: min(86dvh, calc(100dvh - var(--pc-tabbar, 88px) - 10px));
        min-height: 0;
        position: fixed;
        right: 0;
        top: auto;
        transform: translateY(108%) !important;
        transition: transform .34s cubic-bezier(.22, 1, .36, 1);
        visibility: visible;
        width: 100%;
        will-change: transform;
        z-index: 1100;
    }

    body.pc-crm-compose .crm-wa__compose.is-visible,
    body.pc-crm-compose #composePanel.is-visible,
    .crm-wa__compose--layer.is-visible {
        transform: translateY(0) !important;
    }

    body.pc-crm-compose .crm-wa__compose.is-closing,
    body.pc-crm-compose #composePanel.is-closing,
    .crm-wa__compose--layer.is-closing {
        transform: translateY(108%) !important;
    }

    body.pc-kb-open.pc-crm-compose .crm-wa__compose,
    body.pc-kb-open.pc-crm-compose #composePanel,
    body.pc-kb-open .crm-wa__compose--layer {
        bottom: 0;
        inset: auto 0 0 0;
        max-height: min(92dvh, var(--vvh, 100dvh));
    }

    .crm-wa__compose-handle {
        background: var(--gray-80, #d4d4d8);
        border-radius: 999px;
        display: block;
        flex: 0 0 auto;
        height: 4px;
        margin: 8px auto 0;
        width: 36px;
    }

    body.pc-crm-compose .pc-tabbar__btn[data-tab="new"] {
        background: rgba(0, 0, 0, .08);
        color: var(--gray-0, #111);
    }

    body.pc-crm-compose .crm-wa__compose-head {
        min-height: 48px;
        padding-top: 0;
        position: relative;
    }

    .crm-tpl__toolbar {
        display: none !important;
    }

    .crm-tpl__preview {
        background: var(--cc-surface);
        overflow: auto;
        padding: 0;
        transition: transform .28s cubic-bezier(.22, 1, .36, 1), visibility .28s;
    }

    .crm-tpl__preview .crm-wa__empty {
        display: none;
    }

    .crm-tpl__preview-card {
        background: transparent;
        border: 0;
        gap: 0;
        min-height: 100%;
        padding: 0;
    }

    .crm-tpl__preview-card .crm-wa__back {
        display: none !important;
    }

    .crm-tpl__detail-head {
        align-items: flex-start;
        border-bottom: 1px solid var(--border);
        display: flex;
        gap: 12px;
        justify-content: space-between;
        padding: 12px 16px 14px;
    }

    .crm-tpl__preview-card h3 {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: inherit;
    }

    .crm-tpl__preview #previewBadges {
        padding: 0 16px 12px;
    }

    .crm-tpl__phone {
        background: var(--wa-paper, #efe7de);
        flex: 1 1 auto;
        justify-content: flex-start;
        min-height: 220px;
        padding: 16px 16px 24px;
    }

    .crm-tpl__phone .crm-iphone {
        filter: none;
        max-width: none;
    }

    .crm-tpl__phone .crm-iphone__btn,
    .crm-tpl__phone .crm-iphone__island,
    .crm-tpl__phone .crm-iphone__status,
    .crm-tpl__phone .crm-iphone__wa-head,
    .crm-tpl__phone .crm-iphone__dock,
    .crm-tpl__phone .crm-iphone__home,
    .crm-tpl__phone .crm-iphone__in {
        display: none !important;
    }

    .crm-tpl__phone .crm-iphone__bezel,
    .crm-tpl__phone .crm-iphone__glass {
        aspect-ratio: auto;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        height: auto;
        padding: 0;
    }

    .crm-tpl__phone .crm-iphone__chat {
        background: transparent;
        min-height: 0;
        padding: 0;
    }

    .crm-tpl__preview #previewIds,
    .crm-tpl__preview #previewReject {
        padding: 0 16px 16px;
    }

    .crm-tpl__row {
        gap: 12px;
        min-height: 64px;
        padding: 10px 16px;
    }

    .crm-tpl__name {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: inherit;
    }

    .crm-tpl__badge {
        border-radius: 999px;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: inherit;
        padding: 3px 8px;
        text-transform: none;
    }

    .crm-wa.is-profile .crm-wa__profile {
        transform: none;
        visibility: visible;
    }

    .crm-wa__profile {
        background: #f2f2f7;
    }

    .crm-wa__profile-head {
        background: color-mix(in srgb, #f2f2f7 86%, transparent);
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        border-bottom: .5px solid rgba(60, 60, 67, .18);
        justify-content: center;
        min-height: calc(52px + env(safe-area-inset-top, 0px));
        padding-left: 44px;
        padding-right: 44px;
    }

    .crm-wa__profile-back {
        left: 6px;
        position: absolute;
        top: max(.35rem, env(safe-area-inset-top, 0px));
    }

    .crm-wa__profile-close {
        display: none !important;
    }

    .crm-wa__profile-kicker {
        align-items: center;
        text-align: center;
    }

    .crm-wa__profile-kicker small {
        display: none;
    }

    .crm-wa__profile-head strong {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: -.02em;
    }

    .crm-wa__profile-body {
        background: transparent;
        padding: .25rem 0 calc(1.6rem + env(safe-area-inset-bottom, 0px));
    }

    .crm-wa__hero {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 8px;
        grid-template-columns: none;
        margin: .35rem 16px 1.15rem;
        text-align: center;
    }

    .crm-wa__hero .crm-wa__avatar {
        border: 0;
        font-size: 28px;
        height: 84px;
        width: 84px;
    }

    .crm-wa__hero-grid {
        justify-items: center;
        gap: 3px;
    }

    .crm-wa__hero strong {
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -.03em;
    }

    .crm-wa__hero-handle,
    .crm-wa__hero-phone {
        color: #8e8e93;
        font-size: 15px;
        text-align: center;
    }

    .crm-wa__hero-meta,
    .crm-wa__facts {
        justify-content: center;
    }

    .crm-wa__hero .crm-wa__window-chip,
    .crm-wa__fact {
        border-radius: 999px;
    }

    .crm-wa__section {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0 0 1.15rem;
        padding: 0 16px;
    }

    .crm-wa__section h3 {
        color: #6d6d72;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: -.01em;
        margin: 0 16px .35rem;
        text-transform: none;
    }

    .crm-wa__section .crm-wa__empty,
    .crm-wa__section .crm-wa__dl,
    .crm-wa__section .crm-wa__sales,
    .crm-wa__section .crm-wa__notepad,
    .crm-wa__fold {
        background: #fff;
        border-radius: 12px;
    }

    .crm-wa__section .crm-wa__empty {
        color: #8e8e93;
        font-size: 15px;
        line-height: 1.35;
        padding: 14px 16px;
    }

    .crm-wa__dl {
        gap: 0;
        overflow: hidden;
    }

    .crm-wa__dl div {
        align-items: center;
        border-bottom: .5px solid rgba(60, 60, 67, .16);
        gap: 12px;
        grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
        min-height: 44px;
        padding: 10px 16px;
    }

    .crm-wa__dl div:last-child {
        border-bottom: 0;
    }

    .crm-wa__dl dt {
        color: #8e8e93;
        font-size: 13px;
        font-weight: 400;
        letter-spacing: 0;
    }

    .crm-wa__dl dd,
    .crm-wa__dl dd a {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.3;
        text-align: right;
    }

    .crm-wa__dl dd a {
        color: #007aff;
    }

    .crm-wa__sale {
        background: #fff;
        border: 0;
        border-radius: 12px;
        box-shadow: none;
    }

    .crm-wa__fold {
        margin-top: .7rem;
        overflow: hidden;
    }

    .crm-wa__fold summary {
        color: #007aff;
        cursor: pointer;
        font-size: 16px;
        font-weight: 400;
        list-style: none;
        padding: 12px 16px;
    }

    .crm-wa__fold summary::-webkit-details-marker {
        display: none;
    }

    .crm-wa__fold[open] summary {
        border-bottom: .5px solid rgba(60, 60, 67, .16);
    }

    .crm-wa__tags {
        background: #fff;
        border-radius: 12px 12px 0 0;
        padding: 12px 16px 4px;
    }

    .crm-wa__tag-form {
        background: #fff;
        border-radius: 0 0 12px 12px;
        margin-top: 0;
        padding: 8px 16px 14px;
    }

    .crm-wa__tag-form input,
    .crm-wa__tag-form select,
    .crm-wa__tag-add {
        border-radius: 10px !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    .crm-wa__notepad {
        background: #fff;
        border: 0;
        border-radius: 12px;
    }

    html.dark .crm-wa__profile,
    html.dark-layout .crm-wa__profile,
    [data-theme="dark"] .crm-wa__profile {
        background: #000;
    }

    html.dark .crm-wa__profile-head,
    html.dark-layout .crm-wa__profile-head,
    [data-theme="dark"] .crm-wa__profile-head {
        background: rgba(0, 0, 0, .72);
        border-bottom-color: rgba(84, 84, 88, .65);
    }

    html.dark .crm-wa__section .crm-wa__empty,
    html.dark .crm-wa__section .crm-wa__dl,
    html.dark .crm-wa__section .crm-wa__sales,
    html.dark .crm-wa__section .crm-wa__notepad,
    html.dark .crm-wa__fold,
    html.dark .crm-wa__tags,
    html.dark .crm-wa__tag-form,
    html.dark .crm-wa__sale,
    html.dark-layout .crm-wa__section .crm-wa__empty,
    html.dark-layout .crm-wa__section .crm-wa__dl,
    html.dark-layout .crm-wa__section .crm-wa__sales,
    html.dark-layout .crm-wa__section .crm-wa__notepad,
    html.dark-layout .crm-wa__fold,
    html.dark-layout .crm-wa__tags,
    html.dark-layout .crm-wa__tag-form,
    html.dark-layout .crm-wa__sale {
        background: #1c1c1e;
    }

    html.dark .crm-wa__dl div,
    html.dark-layout .crm-wa__dl div,
    html.dark .crm-wa__fold[open] summary,
    html.dark-layout .crm-wa__fold[open] summary {
        border-bottom-color: rgba(84, 84, 88, .65);
    }

    html.dark .crm-wa__section h3,
    html.dark .crm-wa__hero-handle,
    html.dark .crm-wa__hero-phone,
    html.dark .crm-wa__dl dt,
    html.dark .crm-wa__section .crm-wa__empty,
    html.dark-layout .crm-wa__section h3,
    html.dark-layout .crm-wa__hero-handle,
    html.dark-layout .crm-wa__hero-phone,
    html.dark-layout .crm-wa__dl dt,
    html.dark-layout .crm-wa__section .crm-wa__empty {
        color: #8e8e93;
    }

    html.dark .crm-wa__dl dd,
    html.dark-layout .crm-wa__dl dd {
        color: #fff;
    }

    html.dark .crm-wa__dl dd a,
    html.dark .crm-wa__fold summary,
    html.dark-layout .crm-wa__dl dd a,
    html.dark-layout .crm-wa__fold summary {
        color: #0a84ff;
    }

    .crm-wa__bubble {
        max-width: min(86%, 560px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .crm-wa__chat,
    .crm-tpl__preview {
        transition: none;
    }
}

@media (min-width: 992px) {
    .crm-wa__compose-handle,
    .crm-wa__compose-scrim {
        display: none !important;
    }

    .crm-wa.is-compose .crm-wa__compose {
        border-radius: 0;
        box-shadow: none;
        height: 100%;
        inset: auto;
        max-height: 100%;
        position: relative;
        transform: none !important;
        width: auto;
    }

    .crm-wa__list-head {
        align-items: center;
        display: flex;
        gap: .4rem;
        height: 52px;
        min-height: 52px;
        padding: .3rem .6rem;
    }

    .crm-wa__brand { display: none; }
    .crm-wa__nav-menu,
    .crm-wa__more-menu {
        display: none !important;
    }

    .crm-wa__inbox-tabs {
        align-self: center;
        background: color-mix(in srgb, var(--gray-0, #111) 6%, transparent);
        border: 0;
        border-radius: 10px;
        flex: 1 1 auto;
        gap: 2px;
        margin: 0;
        min-width: 0;
        order: 1;
        padding: 3px;
        width: auto;
    }

    .crm-wa__icon-actions {
        flex: 0 0 auto;
        margin-left: .15rem;
        order: 2;
    }

    .crm-wa__inbox-tabs button {
        border-radius: 8px;
        flex: 1 1 0;
        font-size: 12.5px;
        font-weight: 650;
        gap: 4px;
        justify-content: center;
        min-width: 0;
        padding: 5px 8px;
    }

    .crm-wa__inbox-tabs svg,
    .crm-wa__inbox-tabs i {
        height: 14px;
        width: 14px;
    }

    .crm-wa__icon-btn.crm-wa__search-btn,
    .crm-wa__search-panel {
        display: none !important;
    }

    .crm-wa__search {
        display: block !important;
    }

    .crm-wa__back,
    .crm-wa__profile-back,
    .crm-wa__compose-back {
        display: none;
    }

    .crm-wa__profile-close {
        display: inline-flex !important;
    }

    .crm-wa__compose-head {
        padding: 0 1.15rem;
    }

    .crm-wa__compose-body {
        align-items: stretch;
        gap: 1rem;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
        overflow: hidden;
        padding: 1rem 1.15rem 1.15rem;
    }

    .crm-wa__compose-main {
        display: flex;
        flex-direction: column;
        gap: .85rem;
        min-height: 0;
        overflow: auto;
    }

    .crm-wa__compose-client {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 1rem 1.15rem;
    }

    .crm-wa__compose .crm-template-send-vars {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-wa__compose-card--preview {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    .crm-wa__compose-card--preview .crm-template-send__preview {
        flex: 1;
        min-height: 0;
        overflow: auto;
    }

    .crm-wa__compose-foot {
        display: flex;
        justify-content: flex-end;
        padding: .75rem 1.15rem;
    }

    .crm-wa__compose-go {
        min-width: 240px;
        padding: 0 1.35rem;
        width: auto;
    }
}

@media (min-width: 1400px) {
    .crm-wa__compose-body {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
        padding: 1.15rem 1.4rem 1.25rem;
    }

    .crm-wa__compose-head,
    .crm-wa__compose-foot {
        padding-left: 1.4rem;
        padding-right: 1.4rem;
    }
}

.crm-wa-modal--wide .modal-dialog,
.crm-wa-modal--sheet.crm-wa-modal--wide .modal-dialog {
    max-width: min(860px, calc(100vw - 32px));
}

.crm-template-send {
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .crm-template-send {
        align-items: start;
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    .crm-template-send__preview {
        position: sticky;
        top: 0;
    }
}

.crm-client-search {
    margin-bottom: .9rem;
    position: relative;
}

.crm-client-search__list {
    background: var(--cc-surface);
    border: 1px solid var(--border);
    display: grid;
    margin-top: .4rem;
    max-height: 220px;
    overflow: auto;
}

.crm-client-search__item {
    align-items: flex-start;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: .15rem;
    padding: .65rem .7rem;
    text-align: left;
    width: 100%;
}

.crm-client-search__item:last-child {
    border-bottom: 0;
}

.crm-client-search__item:hover,
.crm-client-search__item:focus {
    background: var(--gray-100);
}

.crm-client-search__item strong {
    font-size: 13px;
}

.crm-client-search__item small {
    color: var(--gray-70);
    font-size: 11px;
}

.crm-phone {
    margin-bottom: .9rem;
}

.crm-phone__row {
    display: grid;
    gap: .5rem;
    grid-template-columns: minmax(158px, 44%) minmax(0, 1fr);
}

.crm-phone__country {
    align-items: center;
    background: var(--gray-100);
    border: 1px solid var(--border);
    display: grid;
    gap: .4rem;
    grid-template-columns: 20px minmax(0, 1fr);
    min-height: 40px;
    padding: 0 .4rem 0 .55rem;
}

.crm-phone__flag {
    border-radius: 2px;
    display: block;
    height: 15px;
    object-fit: cover;
    width: 20px;
}

.crm-wa__compose .crm-phone__select.form-select,
.crm-wa-modal .crm-phone__select.form-select {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 38px !important;
    padding-left: 0 !important;
    padding-right: 1.4rem !important;
}

.crm-phone__hint {
    color: var(--gray-70);
    font-size: 11px;
    margin: .4rem 0 0;
}

.crm-phone__error,
.crm-template-send__error {
    color: #b42318;
    font-size: 12px;
    margin: .45rem 0 0;
}

.crm-template-send__preview {
    align-items: flex-end;
    background-color: var(--wa-paper, #efeae2);
    background-image: var(--wa-doodle, url("../img/crm-wa-doodle.svg"));
    background-position: center top;
    background-repeat: repeat;
    background-size: 220px 220px;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-height: 160px;
    min-width: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: .7rem .85rem .75rem .65rem;
}

.crm-template-send__preview-label {
    color: var(--gray-40);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .04em;
    margin: 0 0 .55rem;
    text-transform: uppercase;
}

.crm-template-send__stage {
    min-height: 180px;
}

.crm-template-send__to {
    color: #111b21;
    font-size: 12px;
    font-weight: 650;
    margin-bottom: .5rem;
}

.crm-template-send__preview .crm-template-send__to {
    align-self: stretch;
    background: color-mix(in srgb, var(--cc-surface, #fff) 86%, transparent);
    border-radius: 999px;
    margin: 0;
    overflow: hidden;
    padding: .15rem .55rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-template-send__preview #newTemplatePreview {
    align-self: stretch;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    width: 100%;
}

.crm-template-send__preview .crm-template-message {
    margin-left: auto;
    margin-right: 6px;
    max-width: min(92%, 320px);
    overflow-wrap: anywhere;
    width: fit-content;
}

.crm-template-send__empty {
    color: #667781;
    font-size: 12px;
    padding: 2rem .5rem;
    text-align: center;
    width: 100%;
}

.crm-template-send__preview #newTemplatePreview:has(.crm-template-send__empty),
.crm-wa__tpl-preview #templatePreview:has(.crm-template-send__empty) {
    justify-content: center;
}

.crm-wa__bubble--template {
    background: transparent !important;
    border: 0;
    box-shadow: none;
    max-width: min(82%, 22rem);
    padding: 0;
}

.crm-wa__bubble--template .crm-template-message {
    margin: 0;
    max-width: 100%;
}

.crm-wa__bubble--template .crm-template-message__time {
    display: none;
}

.crm-wa__bubble--template .crm-wa__meta {
    margin-right: .35rem;
}

/* Un fallo no representa el mensaje entregado: no mostramos la plantilla verde ni
   descargamos su multimedia. Queda una tarjeta compacta, neutra y expandible. */
.crm-wa__row--out.is-failed .crm-wa__bubble--failed {
    background: #fff !important;
    border: 1px solid #9ca3af;
    border-radius: 9px;
    box-shadow: none;
    color: #18181b;
    max-width: min(72%, 22rem);
    opacity: 1;
    padding: .5rem .65rem;
}

.crm-wa__failed-card {
    display: grid;
    gap: .22rem;
    min-width: 0;
}

.crm-wa__failed-heading {
    align-items: center;
    color: #27272a;
    display: flex;
    font-size: 12px;
    gap: .35rem;
}

.crm-wa__failed-heading [data-lucide],
.crm-wa__failed-heading svg {
    color: #52525b;
    height: 14px;
    width: 14px;
}

.crm-wa__failed-preview {
    color: #52525b;
    display: -webkit-box;
    font-size: 12px;
    line-height: 1.3;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.crm-wa__bubble--failed .crm-wa__meta {
    color: #71717a;
    margin-top: .28rem;
}

.crm-wa__failed-detail {
    border-top: 1px solid #e4e4e7;
    color: #71717a;
    font-size: 11px;
    margin-top: .35rem;
    padding-top: .3rem;
}

.crm-wa__failed-detail summary {
    color: #52525b;
    cursor: pointer;
    font-weight: 600;
    list-style-position: inside;
}

.crm-wa__failed-detail span {
    display: block;
    line-height: 1.35;
    margin-top: .28rem;
    overflow-wrap: anywhere;
}

html.dark .crm-wa__row--out.is-failed .crm-wa__bubble--failed,
html.dark-layout .crm-wa__row--out.is-failed .crm-wa__bubble--failed,
[data-theme="dark"] .crm-wa__row--out.is-failed .crm-wa__bubble--failed {
    background: #1f2023 !important;
    border-color: #5d626b;
    color: #f4f4f5;
}

html.dark .crm-wa__failed-heading,
html.dark-layout .crm-wa__failed-heading,
[data-theme="dark"] .crm-wa__failed-heading {
    color: #f4f4f5;
}

html.dark .crm-wa__failed-preview,
html.dark-layout .crm-wa__failed-preview,
[data-theme="dark"] .crm-wa__failed-preview,
html.dark .crm-wa__failed-detail,
html.dark-layout .crm-wa__failed-detail,
[data-theme="dark"] .crm-wa__failed-detail {
    color: #c4c7cc;
}

html.dark .crm-template-send__preview,
html.dark-layout .crm-template-send__preview,
[data-theme="dark"] .crm-template-send__preview,
html.dark .crm-wa__tpl-preview,
html.dark-layout .crm-wa__tpl-preview,
[data-theme="dark"] .crm-wa__tpl-preview {
    background-color: var(--wa-paper, #0b141a);
    background-image: var(--wa-doodle, url("../img/crm-wa-doodle-dark.svg"));
}

html.dark .crm-template-send__to,
html.dark-layout .crm-template-send__to,
[data-theme="dark"] .crm-template-send__to {
    color: #e9edef;
}

@media (max-width: 575.98px) {
    .crm-phone__row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .crm-wa__compose-kicker small,
    .crm-wa__compose-back,
    .crm-wa__compose .form-label,
    .crm-wa__compose-hint,
    .crm-wa__compose .crm-phone__hint,
    .crm-wa__compose .crm-template-send__preview-label {
        display: none;
    }

    .crm-wa__compose-kicker strong {
        font-size: 17px;
        font-weight: 650;
    }

    .crm-wa__compose-body {
        background: color-mix(in srgb, var(--gray-90) 55%, var(--cc-surface));
        gap: .65rem;
        padding: .75rem 0 .9rem;
    }

    .crm-wa__compose-card {
        background: var(--cc-surface);
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: 0 10px 28px rgba(9, 9, 11, .06);
        margin: 0 .9rem;
        padding: .85rem;
    }

    .crm-wa__compose-card h3 {
        color: var(--gray-0);
        font-size: 13px;
        font-weight: 650;
        letter-spacing: 0;
        margin: 0 0 .55rem;
        text-transform: none;
    }

    .crm-wa__compose-card-title {
        margin-bottom: .6rem;
    }

    .crm-wa__compose-card-title h3 {
        margin: 0;
    }

    .crm-wa__compose-search-toggle {
        display: inline-flex;
        flex: 0 0 34px;
        height: 34px;
        width: 34px;
    }

    .crm-wa__compose-card .form-control,
    .crm-wa__compose-card .form-select,
    .crm-wa__compose .crm-phone__country {
        min-height: 44px;
    }

    .crm-wa__compose-client {
        gap: .75rem;
    }

    .crm-wa__compose-card--client .crm-client-search {
        display: none;
    }

    .crm-wa__compose.is-client-search-open .crm-wa__compose-card--client .crm-client-search {
        display: block;
    }

    .crm-wa__compose .crm-phone__row {
        gap: .45rem;
        grid-template-columns: minmax(104px, .82fr) minmax(0, 1.18fr);
    }

    .crm-wa__compose .crm-phone__country {
        min-width: 0;
        padding-left: .45rem;
        padding-right: .25rem;
    }

    .crm-wa__compose .crm-phone__select.form-select {
        font-size: 12px !important;
        padding-right: 1rem !important;
    }

    .crm-wa__compose .crm-phone__national {
        min-width: 0;
    }

    .crm-wa__compose-card--preview {
        background: var(--cc-surface);
        border: 1px solid var(--border);
        margin: 0 .9rem;
        padding: .65rem;
        border-radius: 16px;
    }

    .crm-wa__compose-card--preview .crm-template-send__preview {
        background-color: var(--wa-paper);
        background-image: var(--wa-doodle);
        background-position: center top;
        background-repeat: repeat;
        background-size: 220px 220px;
        max-height: min(46dvh, 360px);
        min-height: 168px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        padding: .65rem .8rem .7rem .6rem;
    }

    .crm-wa__compose-card--preview .crm-template-message {
        max-width: min(94%, 100%);
        margin-right: 2px;
    }

    .crm-wa__compose-foot {
        background: var(--cc-surface);
        border-top: 1px solid var(--border);
        padding: .7rem 1.15rem .85rem;
    }
}

.crm-cfg {
    --cfg-r: 4px;
    display: grid;
    gap: 12px;
    padding-bottom: 1.5rem;
}

.crm-cfg i[data-lucide],
.crm-cfg svg {
    flex: 0 0 auto;
    height: 16px;
    stroke-width: 2;
    width: 16px;
}

.crm-cfg__head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    justify-content: space-between;
}

.crm-cfg__brand {
    align-items: center;
    display: flex;
    gap: 10px;
    min-width: 0;
}

.crm-cfg__brand-ico,
.crm-cfg__mark,
.crm-cfg__phone-ico,
.crm-cfg__stat > i,
.crm-cfg__empty > i {
    align-items: center;
    background: var(--gray-90);
    color: var(--gray-20);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.crm-cfg__mark {
    background: #25d366;
    color: #fff;
}

.crm-cfg__mark svg {
    height: 16px;
    width: 16px;
}

.crm-cfg__head h2 {
    font-size: 18px;
    font-weight: 650;
    letter-spacing: -.02em;
    margin: 0;
}

.crm-cfg__head p {
    color: var(--gray-70);
    font-size: 12px;
    margin: 0;
}

.crm-cfg__sync {
    margin: 0;
}

.crm-cfg__sync button,
button.crm-cfg__sync {
    align-items: center;
    appearance: none;
    -webkit-appearance: none;
    background: color-mix(in srgb, #25d366 18%, var(--gray-90));
    border: 1px solid color-mix(in srgb, #25d366 38%, var(--border));
    border-radius: var(--cfg-r);
    color: var(--gray-0);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
}

.crm-cfg__sync button:hover,
button.crm-cfg__sync:hover {
    background: color-mix(in srgb, #25d366 28%, var(--gray-90));
}

.crm-cfg__sync button:disabled,
button.crm-cfg__sync:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.crm-cfg__stats,
.crm-cfg__grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.crm-cfg__stat,
.crm-cfg__card,
.crm-cfg__help,
.crm-cfg__section,
.crm-cfg__empty,
.crm-cfg__alert {
    background: var(--cc-surface);
    border: 1px solid var(--border);
    border-radius: var(--cfg-r);
}

.crm-cfg__stat {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 10px 12px;
}

.crm-cfg__stat strong {
    display: block;
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    font-weight: 650;
    line-height: 1.1;
}

.crm-cfg__stat span {
    color: var(--gray-70);
    font-size: 11px;
}

.crm-cfg__stat.is-warn {
    border-color: rgba(217, 119, 6, .35);
}

.crm-cfg__help summary,
.crm-cfg__section-head,
.crm-cfg__tools summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 8px;
    list-style: none;
}

.crm-cfg__help summary::-webkit-details-marker,
.crm-cfg__section-head::-webkit-details-marker,
.crm-cfg__tools summary::-webkit-details-marker {
    display: none;
}

.crm-cfg__help summary {
    color: var(--gray-20);
    font-size: 13px;
    font-weight: 650;
    padding: 10px 12px;
}

.crm-cfg__help ol {
    color: var(--gray-70);
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    padding: 0 12px 12px 32px;
}

.crm-cfg__chev {
    color: var(--gray-50);
    margin-left: auto;
}

.crm-cfg__section[open] > summary .crm-cfg__chev,
.crm-cfg__help[open] > summary .crm-cfg__chev,
.crm-cfg__tools[open] > summary .crm-cfg__chev {
    transform: rotate(180deg);
}

.crm-cfg__section-head {
    padding: 10px 12px;
}

.crm-cfg__section-copy {
    min-width: 0;
}

.crm-cfg__section-copy strong,
.crm-cfg__card-head strong {
    display: block;
    font-size: 14px;
    font-weight: 650;
}

.crm-cfg__section-copy small,
.crm-cfg__card-head small,
.crm-cfg__id {
    color: var(--gray-70);
    display: block;
    font-size: 11px;
}

.crm-cfg__pills {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.crm-cfg__pill {
    align-items: center;
    background: var(--gray-90);
    color: var(--gray-20);
    display: inline-flex;
    font-size: 10px;
    font-weight: 650;
    gap: 4px;
    letter-spacing: .01em;
    padding: 3px 6px;
}

.crm-cfg__pill i,
.crm-cfg__pill svg {
    height: 12px;
    width: 12px;
}

.crm-cfg__pill.is-ok {
    background: rgba(22, 163, 74, .12);
    color: #15803d;
}

.crm-cfg__pill.is-warn {
    background: rgba(217, 119, 6, .12);
    color: #b45309;
}

.crm-cfg__pill.is-bad {
    background: rgba(220, 38, 38, .1);
    color: #b91c1c;
}

.crm-cfg__pill.is-off {
    background: var(--gray-90);
    color: var(--gray-50);
}

.crm-cfg__meta {
    color: var(--gray-70);
    display: flex;
    flex-wrap: wrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    gap: 12px;
    padding: 0 12px 10px;
}

.crm-cfg__meta span {
    align-items: center;
    display: inline-flex;
    gap: 4px;
}

.crm-cfg__grid {
    padding: 0 12px 12px;
}

.crm-cfg__card {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.crm-cfg__card-head {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.crm-cfg__avatar,
.crm-cfg__phone-ico {
    border-radius: 50%;
    flex: 0 0 auto;
    height: 36px;
    object-fit: cover;
    width: 36px;
}

.crm-cfg__avatar {
    background: var(--gray-90);
    border: 1px solid var(--border);
}

.crm-cfg__card.is-blocked {
    border-color: color-mix(in srgb, var(--danger, #b42318) 38%, var(--border));
}

.crm-meta__tree,
.crm-meta__ads {
    display: grid;
    gap: 8px;
    padding: 0 12px 12px;
}

.crm-meta__node {
    border-left: 1px solid color-mix(in srgb, var(--border) 82%, var(--primary, #0f766e));
    padding-left: 10px;
}

.crm-meta__node summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    list-style: none;
    min-height: 34px;
}

.crm-meta__node summary::-webkit-details-marker {
    display: none;
}

.crm-meta__node summary span {
    align-items: center;
    color: var(--gray-20);
    display: inline-flex;
    font-size: 13px;
    font-weight: 650;
    gap: 6px;
    min-width: 0;
}

.crm-meta__node summary small {
    color: var(--gray-70);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    text-align: right;
}

.crm-meta__ads {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 4px 0 8px 10px;
}

.crm-meta > .crm-cfg__section > .crm-meta__ads {
    padding: 0 12px 12px;
}

.crm-meta__ad.is-unmapped {
    border-color: rgba(217, 119, 6, .35);
}

.crm-meta__ads--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.crm-meta__ad--compact {
    gap: 6px;
    padding: 8px;
}

.crm-meta__ad--compact .crm-cfg__card-head {
    align-items: flex-start;
    gap: 7px;
}

.crm-meta__ad--compact .crm-cfg__card-head strong {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    font-size: 12px;
    line-height: 1.25;
    overflow: hidden;
}

.crm-meta__ad--compact .crm-cfg__card-head small {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-meta__ad--compact .crm-meta__thumb,
.crm-meta__ad--compact .crm-cfg__phone-ico {
    border-radius: 8px;
    height: 32px;
    width: 32px;
}

.crm-meta__ad--compact .crm-cfg__pills {
    gap: 3px;
}

.crm-meta__ad--compact .crm-cfg__pill {
    padding: 2px 5px;
}

.crm-meta__ads--compact .crm-meta__copy,
.crm-meta__ads--compact .crm-meta__dl {
    display: none;
}

.crm-meta__view {
    align-items: center;
    background: var(--gray-90);
    border: 1px solid var(--border);
    border-radius: var(--cfg-r);
    color: var(--gray-0);
    display: inline-flex;
    font-size: 10px;
    font-weight: 650;
    gap: 4px;
    margin-left: auto;
    min-height: 22px;
    padding: 2px 7px;
}

.crm-meta__view:hover {
    background: color-mix(in srgb, var(--gray-80, var(--gray-90)) 80%, #25d366);
}

.crm-meta__view i,
.crm-meta__view svg {
    height: 12px;
    width: 12px;
}

.crm-meta__sheet-dim {
    background: rgba(15, 23, 20, .28);
    inset: 0;
    position: fixed;
    z-index: 1080;
}

.crm-meta__sheet-dim[hidden],
.crm-meta__sheet[hidden] {
    display: none !important;
}

.crm-meta__sheet {
    background: var(--cc-surface);
    display: flex;
    flex-direction: column;
    inset: 0;
    overflow: auto;
    position: fixed;
    z-index: 1090;
}

.crm-meta__sheet-head {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 10px;
    min-height: 52px;
    padding: 10px 14px;
    position: sticky;
    top: 0;
    background: var(--cc-surface);
    z-index: 1;
}

.crm-meta__sheet-back {
    align-items: center;
    background: var(--gray-90);
    border: 1px solid var(--border);
    border-radius: var(--cfg-r);
    color: var(--gray-10);
    display: inline-flex;
    font-size: 13px;
    font-weight: 650;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px;
}

.crm-meta__sheet-head strong {
    font-size: 15px;
    font-weight: 650;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-meta__sheet-body {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.crm-meta__sheet-media {
    background: var(--gray-90);
    border: 1px solid var(--border);
    border-radius: 10px;
    max-height: 220px;
    object-fit: cover;
    width: 100%;
}

.crm-meta__sheet-copy {
    color: var(--gray-30);
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
    white-space: pre-wrap;
}

.crm-meta__sheet .crm-meta__dl {
    grid-template-columns: 108px minmax(0, 1fr);
}

.crm-meta__sheet .crm-meta__dl dd a {
    color: inherit;
}

body.crm-meta-sheet-open {
    overflow: hidden;
}

@media (min-width: 768px) {
    .crm-meta__sheet {
        border-left: 1px solid var(--border);
        box-shadow: -16px 0 40px rgba(15, 23, 20, .16);
        inset: 0 0 0 auto;
        width: min(420px, 100vw);
    }
}

@media (max-width: 767.98px) {
    .crm-meta__sheet-dim {
        display: none !important;
    }

    .crm-meta__sheet {
        border: 0;
        box-shadow: none;
    }
}

.crm-meta__thumb {
    background: var(--gray-90);
    border: 1px solid var(--border);
    border-radius: 10px;
    flex: 0 0 auto;
    height: 46px;
    object-fit: cover;
    width: 46px;
}

.crm-meta__copy {
    color: var(--gray-40);
    display: grid;
    gap: 4px;
    font-size: 12px;
    line-height: 1.35;
}

.crm-meta__copy strong {
    color: var(--gray-10);
    font-size: 13px;
    line-height: 1.25;
}

.crm-meta__copy p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin: 0;
    overflow: hidden;
}

.crm-meta__dl {
    display: grid;
    gap: 4px 8px;
    grid-template-columns: 92px minmax(0, 1fr);
    margin: 0;
}

.crm-meta__dl dt,
.crm-meta__dl dd {
    font-size: 11px;
    margin: 0;
    min-width: 0;
}

.crm-meta__dl dt {
    color: var(--gray-70);
}

.crm-meta__dl dd {
    color: var(--gray-30);
    overflow-wrap: anywhere;
}

.crm-cfg__id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-cfg__tools {
    border-top: 1px solid var(--border);
    margin: 0 -10px -10px;
    padding: 0;
}

.crm-cfg__tools summary {
    color: var(--gray-20);
    font-size: 12px;
    font-weight: 650;
    padding: 8px 10px;
}

.crm-cfg__tools[open] summary {
    border-bottom: 1px solid var(--border);
}

.crm-cfg__row {
    align-items: center;
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 8px 10px;
}

.crm-cfg__row .form-control,
.crm-cfg__row .form-select {
    background: var(--gray-100);
    border: 1px solid var(--border);
    border-radius: var(--cfg-r);
    flex: 1 1 auto;
    min-height: 34px;
    min-width: 0;
}

.crm-cfg__btn {
    align-items: center;
    background: var(--gray-90);
    border: 1px solid var(--border);
    border-radius: var(--cfg-r);
    color: var(--gray-0);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 650;
    gap: 5px;
    min-height: 34px;
    padding: 0 8px;
    white-space: nowrap;
}

.crm-cfg__btn.is-ghost {
    background: transparent;
}

.crm-cfg__btn.is-solid {
    background: var(--gray-0);
    border-color: var(--gray-0);
    color: var(--cc-surface);
}

.crm-cfg__empty {
    color: var(--gray-70);
    display: grid;
    gap: 6px;
    justify-items: start;
    padding: 18px;
}

.crm-cfg__empty--soft {
    border: 0;
    margin: 0 12px 12px;
    padding: 8px 0 12px;
}

.crm-cfg__empty strong {
    color: var(--gray-0);
    font-size: 14px;
}

.crm-cfg__empty p {
    margin: 0;
}

.crm-cfg__alert {
    align-items: flex-start;
    display: flex;
    font-size: 13px;
    gap: 8px;
    padding: 10px 12px;
}

.crm-cfg__alert.is-ok {
    background: rgba(22, 163, 74, .08);
    border-color: rgba(22, 163, 74, .2);
}

.crm-cfg__alert.is-bad {
    background: rgba(220, 38, 38, .06);
    border-color: rgba(220, 38, 38, .2);
}

@media (max-width: 1199.98px) {
    .crm-cfg__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-meta__ads--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .crm-cfg__stats,
    .crm-cfg__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .crm-meta__ads,
    .crm-meta__ads--compact {
        grid-template-columns: 1fr;
        padding-left: 0;
    }

    .crm-meta__node {
        padding-left: 7px;
    }

    .crm-meta__node summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
        padding: 6px 0;
    }

    .crm-cfg__section-head {
        flex-wrap: wrap;
    }

    .crm-cfg__pills {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .crm-cfg__grid {
        grid-template-columns: 1fr;
    }

    .crm-cfg__row {
        flex-wrap: wrap;
    }

    .crm-cfg__btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

.crm-cfg__alert:empty,
.crm-cfg__alert.validation-summary-valid {
    display: none;
}

.crm-cfg__actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.crm-tags {
    display: grid;
    gap: 14px;
    max-width: 920px;
}

.crm-tags__head {
    align-items: flex-end;
    gap: 12px;
}

.crm-tags__actions {
    align-items: center;
    display: flex;
    flex: 1 1 320px;
    gap: 8px;
    justify-content: flex-end;
    min-width: 0;
}

.crm-tags__search {
    flex: 1 1 220px;
    margin: 0;
    max-width: 320px;
    min-width: 0;
}

.crm-tags__panel {
    background: var(--gray-100);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: grid;
    gap: 14px;
    padding: 14px 16px;
}

.crm-tags__panel[hidden] {
    display: none !important;
}

.crm-tags__panel-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.crm-tags__panel-head h3 {
    font-size: 15px;
    font-weight: 650;
    margin: 0 0 2px;
}

.crm-tags__panel-head p {
    color: var(--gray-70);
    font-size: 12px;
    margin: 0;
}

.crm-tags__preview {
    flex-shrink: 0;
    max-width: 46%;
}

.crm-tags__form {
    display: grid;
    gap: 12px;
}

.crm-tags__field {
    display: grid;
    gap: 6px;
}

.crm-tags__field > span,
.crm-tags__label {
    color: var(--gray-50);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.crm-tags__form .form-control {
    background: var(--gray-90);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--gray-0);
    font-size: 14px;
    min-height: 40px;
    padding: 0 12px;
}

.crm-tags__form .form-control:focus {
    border-color: var(--pc-cyan, #0891b2);
    outline: 0;
}

.crm-tags__swatches {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(14, minmax(0, 1fr));
}

.crm-tags__swatches .crm-wa__tag-swatch {
    aspect-ratio: 1;
    border-radius: 999px;
    min-height: 28px;
    width: 100%;
}

.crm-tags__form-actions {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.crm-tags__error {
    color: var(--danger, #b42318);
    font-size: 12px;
}

.crm-tags__meta {
    color: var(--gray-60);
    font-size: 12px;
    font-weight: 550;
    padding: 0 2px;
}

.crm-tags__list {
    background: var(--gray-100);
    border: 1px solid var(--border);
    border-radius: 14px;
    display: grid;
    gap: 0;
    min-height: 120px;
    overflow: hidden;
}

.crm-tags__empty {
    margin: 0;
    padding: 28px 16px;
}

.crm-tags__row {
    align-items: center;
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: 12px;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    padding: 12px 14px;
    transition: background .15s ease;
}

.crm-tags__row:last-child {
    border-bottom: 0;
}

.crm-tags__row:hover {
    background: rgba(0, 0, 0, .02);
}

.crm-tags__dot {
    border-radius: 999px;
    height: 10px;
    width: 10px;
}

.crm-tags__row-main {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    min-width: 0;
}

.crm-tags__chip {
    max-width: 100%;
}

.crm-tags__usage {
    color: var(--gray-60);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.crm-tags__row-actions {
    align-items: center;
    display: flex;
    gap: 4px;
}

.crm-tags__icon {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--gray-40);
    cursor: pointer;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    transition: background .15s ease, color .15s ease;
    width: 36px;
}

.crm-tags__icon:hover,
.crm-tags__icon:focus-visible {
    background: var(--gray-90);
    color: var(--gray-0);
    outline: none;
}

.crm-tags__icon.is-danger:hover,
.crm-tags__icon.is-danger:focus-visible {
    background: rgba(180, 35, 24, .08);
    color: var(--danger, #b42318);
}

.crm-tags__icon svg {
    height: 16px;
    width: 16px;
}

@media (max-width: 767.98px) {
    .crm-tags {
        gap: 10px;
        max-width: none;
        padding-bottom: 12px;
    }

    .crm-tags__head {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .crm-tags__actions {
        flex: none;
        width: 100%;
    }

    .crm-tags__search {
        flex: 1 1 auto;
        max-width: none;
    }

    .crm-tags__actions .crm-cfg__btn {
        flex: 0 0 auto;
        min-height: 42px;
        padding-inline: 14px;
    }

    .crm-tags__panel {
        border-radius: 12px;
        padding: 12px;
        position: sticky;
        top: 8px;
        z-index: 4;
    }

    .crm-tags__panel-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .crm-tags__preview {
        max-width: 100%;
    }

    .crm-tags__form .form-control {
        font-size: 16px;
        min-height: 44px;
    }

    .crm-tags__swatches {
        gap: 8px;
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .crm-tags__swatches .crm-wa__tag-swatch {
        min-height: 34px;
    }

    .crm-tags__form-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .crm-tags__form-actions .crm-cfg__btn {
        justify-content: center;
        min-height: 44px;
        width: 100%;
    }

    .crm-tags__list {
        border-radius: 12px;
    }

    .crm-tags__row {
        gap: 10px;
        grid-template-columns: 8px minmax(0, 1fr) auto;
        padding: 14px 12px;
    }

    .crm-tags__icon {
        height: 40px;
        width: 40px;
    }

    body.crm-tags-editing .crm-tags__list {
        opacity: .55;
        pointer-events: none;
    }
}

@media (max-width: 575.98px) {
    .crm-tags__actions {
        flex-wrap: nowrap;
    }

    .crm-tags__row-main {
        gap: 6px 10px;
    }

    .crm-tags__usage {
        font-size: 11px;
    }
}

.crm-cfg__back {
    align-items: center;
    background: var(--gray-90);
    border: 0;
    color: var(--gray-20);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    text-decoration: none;
    width: 32px;
}

.crm-cfg__hint {
    color: var(--gray-70);
    font-size: 12px;
    line-height: 1.45;
    margin: 0;
}

.crm-cfg__hint.is-bad {
    color: var(--chip-danger, #dc2626);
}

.crm-cfg__grid--perfil {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-cfg__qr {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--cfg-r);
    display: block;
    max-width: 180px;
    padding: 8px;
    width: 100%;
}

.crm-cfg__stat .crm-cfg__avatar {
    flex: 0 0 auto;
    height: 32px;
    width: 32px;
}

@media (max-width: 767.98px) {
    .crm-cfg__grid--perfil {
        grid-template-columns: 1fr;
    }
}

.crm-cfg__section-body {
    display: grid;
    gap: 10px;
    padding: 0 12px 12px;
}

.crm-cfg__fields {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crm-cfg__field {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.crm-cfg__field--wide {
    grid-column: 1 / -1;
}

.crm-cfg__field > span {
    color: var(--gray-40);
    font-size: 11px;
    font-weight: 650;
}

.crm-cfg__field small,
.crm-cfg__field .text-muted {
    color: var(--gray-70);
    font-size: 11px;
}

.crm-cfg__field .form-control,
.crm-cfg__field .form-select,
.crm-cfg__section-body .form-control,
.crm-cfg__section-body .form-select {
    background: var(--gray-100);
    border: 1px solid var(--border);
    border-radius: var(--cfg-r);
    color: var(--gray-0);
    min-height: 38px;
}

.crm-cfg__section-body #Cuerpo {
    min-height: 168px;
    resize: vertical;
}

.crm-cfg__grid--vars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
}

.crm-cfg__pill.is-info {
    background: var(--pc-cyan-muted, rgba(8, 145, 178, .12));
    color: var(--chip-info, #0e7490);
}

.crm-cfg--tpl.crm-tpl {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    padding-bottom: 0;
}

.crm-cfg--tpl .crm-tpl__shell {
    flex: 1 1 auto;
    min-height: 0;
}

.crm-cfg--tpl .crm-tpl__rows {
    align-content: start;
    display: grid;
    flex: 1 1 auto;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    overflow: auto;
    padding: 12px;
}

@media (min-width: 992px) {
    .crm-tpl__shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
        position: relative;
    }

    .crm-tpl__list {
        border-right: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        min-width: 0;
        overflow: hidden;
    }

    .crm-tpl__preview,
    .crm-tpl:not(.is-open) .crm-tpl__preview,
    .crm-tpl.is-open .crm-tpl__preview {
        background: var(--wa-paper, #efe7de);
        border-left: 0;
        bottom: auto;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: auto;
        padding: 16px;
        position: static;
        right: auto;
        top: auto;
        transform: none;
        visibility: visible;
        width: auto;
        z-index: auto;
    }

    .crm-tpl__preview .crm-wa__empty {
        display: flex;
        flex: 1 1 auto;
        margin: auto;
    }

    .crm-tpl__preview-card {
        background: transparent;
        border: 0;
        box-shadow: none;
        gap: 12px;
        padding: 0;
    }

    .crm-tpl__preview-card .crm-wa__back {
        display: none !important;
    }

    .crm-tpl__detail-head {
        background: var(--cc-surface);
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 12px 14px;
    }

    .crm-tpl__preview #previewBadges {
        margin-top: -4px;
    }

    .crm-tpl__phone {
        background: transparent;
        padding: 8px 0 4px;
    }

    .crm-cfg--tpl .crm-tpl__rows {
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        overflow: auto;
        padding: 14px 16px 20px;
    }
}

@media (min-width: 1400px) {
    .crm-tpl__shell {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
    }

    .crm-cfg--tpl .crm-tpl__rows {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.crm-cfg--tpl .crm-tpl__rows .crm-wa__infinite {
    grid-column: 1 / -1;
}

.crm-tpl__card {
    align-items: stretch;
    background: var(--cc-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(9, 9, 11, .03);
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 12px 14px;
    text-align: left;
    width: 100%;
}

.crm-tpl__card:hover {
    border-color: color-mix(in srgb, var(--gray-0) 22%, var(--border));
    box-shadow: 0 6px 18px rgba(9, 9, 11, .05);
}

.crm-tpl__card.is-active {
    border-color: var(--gray-0);
    box-shadow: 0 0 0 1px var(--gray-0);
}

.crm-tpl__card:focus-visible {
    outline: 2px solid var(--pc-cyan);
    outline-offset: 1px;
}

.crm-tpl__card-head {
    align-items: flex-start;
    display: grid;
    gap: 10px;
    grid-template-columns: 32px minmax(0, 1fr) auto;
}

.crm-tpl__card .crm-cfg__mark {
    border-radius: 9px;
    height: 32px;
    width: 32px;
}

.crm-tpl__card-titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.crm-tpl__card .crm-tpl__name {
    color: var(--gray-0);
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-tpl__card-tags {
    color: var(--gray-60);
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;
    gap: 6px;
}

.crm-tpl__card-tags span + span::before {
    content: "·";
    margin-right: 6px;
}

.crm-tpl__card-tags .is-visible { color: #15803d; font-weight: 700; }
.crm-tpl__card-tags .is-hidden { color: var(--gray-50); font-weight: 700; }

.crm-tpl__card .crm-cfg__pill {
    border-radius: 999px;
    flex: 0 0 auto;
    font-size: 10px;
    padding: 3px 8px;
}

.crm-tpl__excerpt {
    color: var(--gray-50);
    display: -webkit-box;
    font-size: 12px;
    line-height: 1.4;
    min-height: 2.8em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.crm-tpl__phone-bubble {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px 12px 12px 4px;
    box-shadow: 0 1px 2px rgba(9, 9, 11, .04);
    color: var(--gray-0);
    font-size: 13px;
    line-height: 1.45;
    padding: 12px 14px;
    white-space: pre-wrap;
    word-break: break-word;
}

.crm-tpl__preview-body {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.crm-tpl__card-meta {
    color: var(--gray-70);
    display: flex;
    flex-wrap: wrap;
    font-size: 11px;
    gap: 4px 12px;
}

.crm-tpl__filters {
    background: var(--cc-surface);
    border-bottom: 1px solid var(--border);
    display: grid;
    gap: 8px;
    padding: 10px 12px 12px;
}

.crm-tpl__search {
    color: var(--gray-50);
    display: block;
    position: relative;
}

.crm-tpl__search > i[data-lucide],
.crm-tpl__search > svg {
    height: 16px;
    left: 10px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
}

.crm-tpl__search input {
    background: var(--gray-90) !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: var(--gray-0) !important;
    display: block;
    font-size: 13px !important;
    font-weight: 500;
    height: 38px !important;
    letter-spacing: 0 !important;
    min-width: 0;
    padding: 0 10px 0 34px !important;
    width: 100% !important;
    word-spacing: normal;
}

.crm-tpl__search input::placeholder {
    color: var(--gray-50);
    letter-spacing: 0;
    opacity: 1;
}

.crm-tpl__search input:focus {
    border-color: var(--pc-cyan) !important;
    outline: 0;
}

.crm-tpl__filter-rows {
    display: grid;
    gap: 6px;
}

.crm-tpl__filter {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.crm-tpl__filter-kicker {
    color: var(--gray-60);
    flex: 0 0 4.6rem;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.1;
    text-transform: uppercase;
}

.crm-tpl__segs {
    background: var(--gray-90);
    border-radius: 9px;
    display: flex;
    flex: 1 1 auto;
    gap: 2px;
    min-width: 0;
    overflow-x: auto;
    padding: 3px;
    scrollbar-width: none;
}

.crm-tpl__segs::-webkit-scrollbar {
    display: none;
}

.crm-tpl__filters .crm-wa__chip {
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--gray-40);
    flex: 1 0 auto;
    font-size: 12px;
    font-weight: 650;
    height: 28px;
    justify-content: center;
    letter-spacing: 0;
    min-width: max-content;
    padding: 0 10px;
    word-spacing: normal;
}

.crm-tpl__filters .crm-wa__chip.is-on {
    background: var(--cc-surface);
    box-shadow: 0 1px 2px rgba(9, 9, 11, .12);
    color: var(--gray-0);
}

.crm-cfg--builder {
    padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
}

.crm-cfg__builder {
    display: grid;
    gap: 12px;
}

.crm-cfg__builder-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
}

.crm-cfg__builder-main {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.crm-cfg__builder-preview {
    align-self: start;
    min-width: 0;
    position: sticky;
    top: calc(var(--navbar-height, 62px) + 12px);
}

.crm-cfg__section--preview {
    overflow: hidden;
}

.crm-cfg__section--preview .crm-cfg__section-head {
    cursor: default;
}

.crm-cfg__preview-body {
    padding: 0 12px 16px;
}

.crm-cfg__foot {
    align-items: center;
    background: var(--cc-surface);
    border: 1px solid var(--border);
    border-radius: var(--cfg-r);
    bottom: .5rem;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 10px;
    position: sticky;
    z-index: 3;
}

.crm-cfg__foot .crm-cfg__btn.is-solid {
    min-width: 9rem;
}

.crm-cfg--builder .crm-template-formatbar,
.crm-cfg--builder .crm-template-suggestions {
    margin: 0;
}

.crm-cfg--builder .crm-template-button-row {
    background: var(--gray-100);
    border: 1px solid var(--border);
    border-radius: var(--cfg-r);
    margin: 0;
    padding: 8px;
}

body:has(#crmTemplateBuilder) .content-wrapper,
body:has(#crmTemplateBuilder) .app-content.content,
body:has(#crmTemplateBuilder) .content-body {
    overflow: visible !important;
}

@media (max-width: 991.98px) {
    .crm-tpl__preview-card.crm-cfg__card {
        background: transparent;
        border: 0;
        border-radius: 0;
        display: flex;
        padding: 0;
    }

    .crm-cfg--tpl .crm-tpl__rows {
        gap: 10px;
        grid-template-columns: minmax(0, 1fr);
        padding: 10px 16px calc(16px + var(--pc-tabbar, 88px));
    }

    .crm-tpl__card {
        border-radius: 14px;
        gap: 9px;
        padding: 14px;
    }

    .crm-tpl__excerpt {
        font-size: 13px;
    }

    .crm-tpl__card-meta {
        font-size: 12px;
    }

    .crm-tpl__filters {
        gap: 8px;
        padding: 10px 16px 12px;
    }

    .crm-tpl__search input {
        font-size: 16px !important;
        height: 42px !important;
        padding-left: 40px !important;
    }

    .crm-tpl__search > i[data-lucide],
    .crm-tpl__search > svg {
        height: 18px;
        left: 12px;
        width: 18px;
    }

    .crm-tpl__filter-kicker {
        flex-basis: 4.2rem;
        font-size: 10px;
    }

    .crm-tpl__segs {
        -webkit-overflow-scrolling: touch;
    }

    .crm-tpl__filters .crm-wa__chip {
        font-size: 12px;
        height: 30px;
        padding: 0 11px;
    }
}

@media (max-width: 767.98px) {
    .crm-cfg--builder .crm-cfg__head {
        display: none;
    }

    .crm-cfg__builder-grid {
        grid-template-columns: 1fr;
    }

    .crm-cfg__builder-preview {
        order: -1;
        position: sticky;
        top: calc(var(--pc-appbar, 52px) + 8px);
        z-index: 2;
    }

    .crm-cfg__fields,
    .crm-cfg__grid--vars {
        grid-template-columns: 1fr;
    }

    .crm-cfg__foot {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
        bottom: 0;
        margin: 0 -4px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        position: sticky;
    }

    .crm-cfg__foot .crm-cfg__btn {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 44px;
    }

    .crm-cfg--builder .crm-cfg__head {
        padding-top: 2px;
    }

    .crm-cfg--builder .crm-cfg__field .form-control,
    .crm-cfg--builder .crm-cfg__field .form-select,
    .crm-cfg--builder .crm-cfg__section-body .form-control,
    .crm-cfg--builder .crm-cfg__section-body .form-select {
        font-size: 16px;
        min-height: 44px;
    }

    .crm-cfg--builder .crm-template-formatbar button,
    .crm-cfg--builder .crm-template-suggestions button {
        min-height: 36px;
    }

    .crm-cfg--builder .crm-iphone {
        --iphone-w: min(280px, 72vw);
        filter: none;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .crm-cfg__builder-grid {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
    }

    .crm-cfg__builder-preview {
        position: sticky;
        top: calc(var(--navbar-height, 62px) + 12px);
    }

    .crm-cfg--builder .crm-iphone {
        --iphone-w: min(260px, 100%);
        filter: none;
    }
}

@media (max-width: 575.98px) {
    .crm-cfg--builder .crm-cfg__head .crm-cfg__back + .crm-cfg__brand-ico {
        display: none;
    }

    .crm-cfg--builder .crm-cfg__section-head {
        align-items: flex-start;
    }

    .crm-cfg--builder .crm-cfg__pills {
        order: 3;
    }

    .crm-cfg--builder .crm-cfg__chev {
        margin-top: 2px;
    }
}
/* Incoming-call control shared by desktop and mobile inbox. */
.crm-call {
    background: linear-gradient(145deg, #0b4738, #123e35);
    border: 1px solid rgba(167, 243, 208, .28);
    border-radius: 20px;
    bottom: 24px;
    box-shadow: 0 20px 56px rgba(9, 30, 24, .36);
    color: #fff;
    padding: 16px;
    position: fixed;
    right: 24px;
    width: min(360px, calc(100vw - 32px));
    z-index: 2147483001;
}

.crm-call.is-persistent {
    z-index: 5000;
}

.crm-call__heading { align-items: center; display: flex; gap: 11px; }
.crm-call__avatar { align-items: center; background: rgba(74, 222, 128, .18); border: 1px solid rgba(167, 243, 208, .32); border-radius: 50%; display: inline-flex; height: 38px; justify-content: center; width: 38px; }
.crm-call__avatar svg { height: 20px; width: 20px; }
.crm-call__label { font-size: 10px; font-weight: 750; letter-spacing: .14em; opacity: .76; text-transform: uppercase; }
.crm-call__name { display: block; font-size: 22px; letter-spacing: -.02em; line-height: 1.1; margin-top: 3px; }
.crm-call__assign { display: block; font-size: 12px; font-weight: 650; line-height: 1.3; margin-top: 4px; opacity: .88; }
.crm-call__state { align-items: center; color: rgba(236, 253, 245, .9); display: flex; font-size: 13px; gap: 7px; margin: 15px 0; min-height: 19px; }
.crm-call__state-dot { background: #4ade80; border-radius: 50%; box-shadow: 0 0 0 4px rgba(74, 222, 128, .15); height: 7px; width: 7px; }
.crm-call__state.is-connecting .crm-call__state-dot { animation: crm-call-pulse 1s ease-in-out infinite; background: #facc15; }
.crm-call__state.is-live .crm-call__state-dot { animation: crm-call-pulse 1.35s ease-in-out infinite; }
.crm-call__state.is-error { color: #fecaca; }
.crm-call__state.is-error .crm-call__state-dot { background: #f87171; box-shadow: 0 0 0 4px rgba(248, 113, 113, .15); }
.crm-call__actions,.crm-call__in-call-controls { display: flex; gap: 9px; }
.crm-call__in-call-controls { margin-top: 9px; }
.crm-call button { align-items: center; border: 0; border-radius: 11px; cursor: pointer; display: inline-flex; flex: 1 1 0; font-weight: 750; gap: 7px; justify-content: center; min-height: 43px; padding: 10px 13px; transition: filter .15s ease, opacity .15s ease, transform .15s ease; }
.crm-call button:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }
.crm-call button:disabled { cursor: wait; opacity: .58; }
.crm-call button svg { height: 17px; width: 17px; }
.crm-call__answer { background: #4ade80; color: #0c3529; }
.crm-call__reject,.crm-call__hang { background: #ef4444; color: #fff; }
.crm-call__mute,.crm-call__speaker { background: rgba(236, 253, 245, .14); border: 1px solid rgba(167, 243, 208, .28) !important; color: #ecfdf5; }
.crm-call__mute.is-muted,.crm-call__speaker.is-muted { background: rgba(248, 113, 113, .19); border-color: rgba(252, 165, 165, .48) !important; color: #fff; }
.crm-call.is-connecting .crm-call__avatar { animation: crm-call-pulse 1s ease-in-out infinite; }
@keyframes crm-call-pulse { 50% { transform: scale(1.08); } }
@media(max-width:700px){.crm-call{bottom:max(16px,env(safe-area-inset-bottom));right:16px}.crm-call__name{font-size:20px}}
.crm-wa__call-label { font-size: 12px; font-weight: 750; }
.crm-wa__icon-btn.is-call-available { border-radius: 9px; flex-basis: auto; gap: .35rem; padding: 0 .55rem; width: auto; }
.crm-wa__icon-btn.is-call-live {
    background: #dcfce7;
    border-radius: 9px;
    color: #166534;
    flex-basis: auto;
    gap: .35rem;
    padding: 0 .55rem;
    width: auto;
}
.crm-wa__icon-btn.is-call-live::before {
    animation: crm-call-pulse 1.2s ease-out infinite;
    background: #22c55e;
    border-radius: 50%;
    content: "";
    height: 8px;
    width: 8px;
}
@keyframes crm-call-pulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
    100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}
.crm-wa__inbox-tabs {
    background: var(--cc-surface, #fff);
    border-bottom: 1px solid var(--pc-border, #e5e7eb);
    display: flex;
    gap: 4px;
    padding: 8px 16px;
}
.crm-wa__inbox-tabs button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #64748b;
    display: flex;
    font-weight: 700;
    gap: 6px;
    padding: 8px 12px;
}
.crm-wa__inbox-tabs button.is-active { background: #e8f7f5; color: #0f766e; }
.crm-wa__inbox-tabs svg { height: 17px; width: 17px; }
.crm-call-history { background: var(--cc-surface, #fff); color: var(--gray-0, #111827); display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow-y: auto; padding: 8px 8px 12px; }
.crm-call-history__head { align-items: flex-start; display: flex; justify-content: space-between; margin: 0 2px 6px; }
.crm-call-history__head strong { display: block; font-size: 13px; }
.crm-call-history__head small { color: #64748b; display: block; font-size: 11px; margin-top: 1px; }
.crm-call-history__item { align-items: center; appearance: none; background: transparent; border: 1px solid #e5e7eb; border-radius: 8px; color: inherit; cursor: pointer; display: grid; font: inherit; gap: 8px; grid-template-columns: 28px minmax(0, 1fr) auto; margin: 0 0 6px; padding: 6px 8px; text-align: left; width: 100%; }
.crm-call-history__item:hover { border-color: #cbd5e1; }
.crm-call-history__item:disabled { cursor: default; opacity: .72; }
.crm-call-history__ico { align-items: center; background: #f1f5f9; border-radius: 50%; color: #475569; display: inline-flex; flex: 0 0 auto; height: 28px; justify-content: center; width: 28px; }
.crm-call-history__ico.is-in { background: rgba(4, 120, 87, .12); color: #047857; }
.crm-call-history__ico.is-out { background: rgba(37, 99, 235, .1); color: #2563eb; }
.crm-call-history__ico.is-missed { background: rgba(225, 29, 72, .12); color: #e11d48; }
.crm-call-history__ico svg { height: 14px; width: 14px; }
.crm-call-history__main { display: grid; gap: 1px; min-width: 0; }
.crm-call-history__top { align-items: baseline; display: flex; gap: 8px; justify-content: space-between; min-width: 0; }
.crm-call-history__top strong { font-size: 13px; font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-call-history__top time { color: #64748b; flex: 0 0 auto; font-size: 10px; font-weight: 700; }
.crm-call-history__facts { align-items: center; color: #64748b; display: flex; flex-wrap: wrap; font-size: 11px; gap: 4px; line-height: 1.2; min-width: 0; }
.crm-call-history__agent { color: #64748b; font-size: 10.5px; font-weight: 650; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-call-history__direction { font-weight: 700; }
.crm-call-history__direction.is-in { color: #047857; }
.crm-call-history__direction.is-out { color: #2563eb; }
.crm-call-history__state { background: #f1f5f9; border-radius: 999px; color: #475569; font-size: 10px; font-weight: 750; padding: 1px 6px; }
.crm-call-history__callback { align-items: center; background: #e2efff; border: 0; border-radius: 999px; color: #1769d4; cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 28px; justify-content: center; margin: 0; min-height: 0; padding: 0; width: 28px; }
.crm-call-history__callback:hover:not(:disabled) { background: #cfe3ff; }
.crm-call-history__callback:disabled { cursor: wait; opacity: .65; }
.crm-call-history__callback svg { height: 14px; width: 14px; }
.crm-call-history__loading, .crm-call-history__empty { align-items: center; color: #64748b; display: grid; justify-items: center; padding: 42px 16px; text-align: center; }
.crm-call-history__loading { display: flex; gap: 8px; justify-content: center; }
.crm-call-history__empty [data-lucide], .crm-call-history__empty svg { height: 24px; margin-bottom: 6px; width: 24px; }
.crm-call-history__empty strong { color: var(--gray-0, #111827); font-size: 13px; }
.crm-call-history__empty span { font-size: 12px; margin-top: 4px; max-width: 240px; }

html.dark .crm-wa__inbox-tabs,
html.dark-layout .crm-wa__inbox-tabs,
[data-theme="dark"] .crm-wa__inbox-tabs { background: #111b21; border-bottom-color: #2a3942; }
html.dark .crm-wa__inbox-tabs button,
html.dark-layout .crm-wa__inbox-tabs button,
[data-theme="dark"] .crm-wa__inbox-tabs button { color: #aebac1; }
html.dark .crm-wa__inbox-tabs button.is-active,
html.dark-layout .crm-wa__inbox-tabs button.is-active,
[data-theme="dark"] .crm-wa__inbox-tabs button.is-active { background: #173f3b; color: #75dbd1; }
html.dark .crm-call-history,
html.dark-layout .crm-call-history,
[data-theme="dark"] .crm-call-history { background: #111b21; color: #e9edef; }
html.dark .crm-call-history__head small,
html.dark-layout .crm-call-history__head small,
[data-theme="dark"] .crm-call-history__head small,
html.dark .crm-call-history__meta,
html.dark-layout .crm-call-history__meta,
[data-theme="dark"] .crm-call-history__meta,
html.dark .crm-call-history__agent,
html.dark-layout .crm-call-history__agent,
[data-theme="dark"] .crm-call-history__agent,
html.dark .crm-call-history__loading,
html.dark-layout .crm-call-history__loading,
[data-theme="dark"] .crm-call-history__loading,
html.dark .crm-call-history__empty,
html.dark-layout .crm-call-history__empty,
[data-theme="dark"] .crm-call-history__empty { color: #aebac1; }
html.dark .crm-call-history__item,
html.dark-layout .crm-call-history__item,
[data-theme="dark"] .crm-call-history__item { background: #18242c; border-color: #2a3942; }
html.dark .crm-call-history__item:hover,
html.dark-layout .crm-call-history__item:hover,
[data-theme="dark"] .crm-call-history__item:hover { border-color: #3b5865; }
html.dark .crm-call-history__top time,
html.dark-layout .crm-call-history__top time,
[data-theme="dark"] .crm-call-history__top time,
html.dark .crm-call-history__facts,
html.dark-layout .crm-call-history__facts,
[data-theme="dark"] .crm-call-history__facts { color: #aebac1; }
html.dark .crm-call-history__state,
html.dark-layout .crm-call-history__state,
[data-theme="dark"] .crm-call-history__state { background: #26343d; color: #cbd5e1; }
html.dark .crm-call-history__callback,
html.dark-layout .crm-call-history__callback,
[data-theme="dark"] .crm-call-history__callback { background: #173b62; color: #b9ddff; }
html.dark .crm-call-history__callback:hover:not(:disabled),
html.dark-layout .crm-call-history__callback:hover:not(:disabled),
[data-theme="dark"] .crm-call-history__callback:hover:not(:disabled) { background: #1f4b7a; }
html.dark .crm-call-history__empty strong,
html.dark-layout .crm-call-history__empty strong,
[data-theme="dark"] .crm-call-history__empty strong { color: #e9edef; }
html.dark .crm-wa__icon-btn.is-call-pending,
html.dark-layout .crm-wa__icon-btn.is-call-pending,
[data-theme="dark"] .crm-wa__icon-btn.is-call-pending { background: #4a3510; color: #ffd37a; }
html.dark .crm-wa__icon-btn.is-call-available,
html.dark-layout .crm-wa__icon-btn.is-call-available,
[data-theme="dark"] .crm-wa__icon-btn.is-call-available { background: #173b62; color: #b9ddff; }
html.dark .crm-wa__icon-btn.is-call-blocked,
html.dark-layout .crm-wa__icon-btn.is-call-blocked,
[data-theme="dark"] .crm-wa__icon-btn.is-call-blocked { background: #502226; color: #ffb4b4; }
html.dark .crm-wa__icon-btn.is-call-unavailable,
html.dark-layout .crm-wa__icon-btn.is-call-unavailable,
[data-theme="dark"] .crm-wa__icon-btn.is-call-unavailable { background: #26343d; color: #aebac1; }
.crm-wa__bubble--wa-call,
.crm-wa__bubble--wa-permit { max-width: min(86%, 24rem); }
.crm-wa__bubble--wa-call {
    align-items: center;
    display: flex;
    gap: .65rem;
    min-width: 210px;
    padding: .45rem .55rem .35rem .5rem;
}
button.crm-wa__bubble--wa-call {
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
    width: fit-content;
}
button.crm-wa__bubble--wa-call.crm-wa__bubble--in { background: var(--wa-bubble-in); }
button.crm-wa__bubble--wa-call.crm-wa__bubble--out { background: var(--wa-bubble-out); }
.crm-wa__bubble--wa-permit {
    min-width: 250px;
    overflow: hidden;
    padding: 0;
}
.crm-wa__wa-call-ico {
    align-items: center;
    background: rgba(11, 20, 26, .08);
    border-radius: 50%;
    color: inherit;
    display: inline-flex;
    flex: 0 0 auto;
    height: 34px;
    justify-content: center;
    width: 34px;
}
.crm-wa__wa-call-ico svg { height: 18px; width: 18px; }
.crm-wa__wa-call-ico.is-missed { background: rgba(225, 29, 72, .14); color: #e11d48; }
.crm-wa__wa-call-copy { display: grid; gap: 1px; min-width: 0; }
.crm-wa__wa-call-copy strong { font-size: 14.5px; font-weight: 650; line-height: 1.2; }
.crm-wa__wa-call-copy span { font-size: 13px; line-height: 1.25; opacity: .82; }
.crm-wa__bubble--wa-call .crm-wa__meta { align-self: flex-end; margin: 0 0 .05rem auto; }
.crm-wa__wa-permit { display: flex; gap: .65rem; padding: .55rem .7rem .1rem; }
.crm-wa__wa-permit-copy { display: grid; gap: .15rem; min-width: 0; }
.crm-wa__wa-permit-copy strong { font-size: 14.5px; font-weight: 650; line-height: 1.25; }
.crm-wa__wa-permit-copy p { font-size: 13px; line-height: 1.35; margin: 0; opacity: .88; }
.crm-wa__bubble--wa-permit .crm-wa__meta { padding: 0 .7rem .2rem; }
.crm-wa__wa-status {
    border-top: 1px solid rgba(11, 20, 26, .08);
    font-size: 13.5px;
    padding: .5rem .7rem .55rem;
    text-align: center;
}
.crm-wa__bubble--out .crm-wa__wa-status { background: rgba(0, 0, 0, .06); }
.crm-wa__bubble--in .crm-wa__wa-status { background: rgba(11, 20, 26, .045); }
html.dark .crm-wa__wa-call-ico,
html.dark-layout .crm-wa__wa-call-ico,
[data-theme="dark"] .crm-wa__wa-call-ico { background: rgba(255, 255, 255, .1); }
html.dark .crm-wa__wa-call-ico.is-missed,
html.dark-layout .crm-wa__wa-call-ico.is-missed,
[data-theme="dark"] .crm-wa__wa-call-ico.is-missed { background: rgba(248, 113, 113, .16); color: #f87171; }
html.dark .crm-wa__bubble--out .crm-wa__wa-status,
html.dark-layout .crm-wa__bubble--out .crm-wa__wa-status,
[data-theme="dark"] .crm-wa__bubble--out .crm-wa__wa-status { background: rgba(0, 0, 0, .2); border-top-color: rgba(255, 255, 255, .08); }
html.dark .crm-wa__bubble--in .crm-wa__wa-status,
html.dark-layout .crm-wa__bubble--in .crm-wa__wa-status,
[data-theme="dark"] .crm-wa__bubble--in .crm-wa__wa-status { background: rgba(255, 255, 255, .05); border-top-color: rgba(255, 255, 255, .08); }

dialog.pc-mic-dialog {
    background: var(--gray-100, #fff);
    border: 1px solid var(--border, rgba(0, 0, 0, .1));
    border-radius: 4px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .16);
    color: var(--gray-0, #111);
    max-width: calc(100vw - 2rem);
    padding: 0;
    width: min(400px, calc(100vw - 2rem));
}

dialog.pc-mic-dialog::backdrop {
    background: rgba(9, 9, 11, .48);
}

.pc-mic-dialog__handle { display: none; }

.pc-mic-dialog__body {
    align-items: flex-start;
    display: flex;
    gap: 14px;
    padding: 22px 22px 8px;
}

.pc-mic-dialog__icon {
    align-items: center;
    background: var(--accent-muted, rgba(239, 68, 68, .08));
    border-radius: 4px;
    color: var(--accent, #ef4444);
    display: inline-flex;
    flex: 0 0 auto;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.pc-mic-dialog__icon svg { height: 22px; width: 22px; }

.pc-mic-dialog__copy h2 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0;
}

.pc-mic-dialog__copy p {
    color: var(--gray-40, #52525b);
    font-size: 14px;
    line-height: 1.45;
    margin: 6px 0 0;
}

.pc-mic-dialog__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 16px 22px 20px;
}

.pc-mic-dialog__actions button {
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    min-height: 40px;
    padding: 0 14px;
}

.pc-mic-dialog__later {
    background: transparent;
    border: 1px solid var(--border, rgba(0, 0, 0, .1));
    color: var(--gray-20, #27272a);
}

.pc-mic-dialog__go {
    background: var(--accent, #ef4444);
    border: 0;
    color: #fff;
}

.pc-mic-dialog__go:hover:not(:disabled) { background: var(--accent-hover, #dc2626); }

.pc-mic-dialog__go:disabled { cursor: default; opacity: .55; }

@media (max-width: 991.98px) {
    .crm-mic-notice__text,
    .pc-mic-dialog__copy p {
        display: none !important;
    }

    dialog.pc-mic-dialog {
        border-radius: 18px;
        margin: auto 8px calc(max(var(--pc-tabbar, 0px), env(safe-area-inset-bottom, 0px)) + 10px);
        width: calc(100% - 16px);
    }

    .pc-mic-dialog__handle {
        background: var(--gray-80, #a1a1aa);
        border-radius: 999px;
        display: block;
        height: 4px;
        margin: 10px auto 0;
        opacity: .7;
        width: 36px;
    }

    .pc-mic-dialog__body {
        flex-direction: column;
        gap: 12px;
        padding: 14px 16px 4px;
    }

    .pc-mic-dialog__icon {
        border-radius: 14px;
        height: 48px;
        width: 48px;
    }

    .pc-mic-dialog__copy h2 { font-size: 20px; }

    .pc-mic-dialog__actions {
        flex-direction: column;
        padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .pc-mic-dialog__actions button {
        min-height: 48px;
        width: 100%;
    }

    .pc-mic-dialog__go { order: 1; }
    .pc-mic-dialog__later { order: 2; }
}

/* ── CRM Reportes ── */
.crm-rpt__filters {
    align-items: end;
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin: 0 0 .75rem;
}

.crm-rpt__actions-field {
    min-width: 220px;
}

.crm-rpt__filter-actions {
    align-items: stretch;
    display: flex;
    flex-wrap: nowrap;
    gap: .4rem;
    min-height: 38px;
}

.crm-rpt__filter-actions .crm-cfg__btn {
    align-items: center;
    display: inline-flex;
    flex: 1 1 auto;
    height: 38px;
    justify-content: center;
    min-height: 38px;
    padding: 0 .75rem;
    white-space: nowrap;
}

.crm-rpt__glossary {
    background: var(--gray-95, #fafafa);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 6px;
    color: var(--gray-50, #52525b);
    display: grid;
    font-size: 12px;
    gap: .35rem;
    line-height: 1.45;
    margin: 0 0 1rem;
    padding: .75rem .9rem;
}

.crm-rpt__glossary p { margin: 0; }
.crm-rpt__glossary code {
    background: #fff;
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 3px;
    font-size: 11px;
    padding: 0 .25rem;
}

.crm-rpt__kpis {
    margin-bottom: .75rem;
}

.crm-rpt__range {
    color: var(--gray-70, #71717a);
    font-size: 12px;
    margin: 0 0 1rem;
}

.crm-rpt__grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 1100px) {
    .crm-rpt__grid {
        grid-template-columns: 1fr 1fr;
    }

    .crm-rpt__grid > .crm-rpt__panel:first-child {
        grid-column: 1 / -1;
    }
}

.crm-rpt__bars {
    align-items: end;
    display: grid;
    gap: 4px;
    grid-auto-flow: column;
    grid-auto-columns: minmax(18px, 1fr);
    height: 160px;
    margin: 0 0 .35rem;
    overflow-x: auto;
    padding: .25rem 0 .5rem;
}

.crm-rpt__bar {
    display: grid;
    gap: 2px;
    grid-template-rows: 1fr auto auto;
    height: 100%;
    justify-items: center;
    min-width: 0;
}

.crm-rpt__bar-pair {
    align-items: end;
    align-self: end;
    display: flex;
    gap: 2px;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.crm-rpt__bar-fill {
    align-self: end;
    background: linear-gradient(180deg, #14b8a6, #0f766e);
    border-radius: 4px 4px 2px 2px;
    height: var(--h, 0%);
    min-height: 2px;
    width: 70%;
}

.crm-rpt__bars--dual .crm-rpt__bar-fill {
    width: 42%;
}

.crm-rpt__bar-fill.is-chat { background: linear-gradient(180deg, #14b8a6, #0f766e); }
.crm-rpt__bar-fill.is-sale { background: linear-gradient(180deg, #fb923c, #c2410c); }

.crm-rpt__bar-val {
    color: var(--gray-40, #52525b);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.crm-rpt__bar-lbl {
    color: var(--gray-70, #71717a);
    font-size: 9px;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.crm-rpt__legend {
    align-items: center;
    color: var(--gray-60, #71717a);
    display: flex;
    font-size: 11px;
    gap: .85rem;
    margin: 0 0 1rem;
}

.crm-rpt__legend span {
    align-items: center;
    display: inline-flex;
    gap: .35rem;
}

.crm-rpt__legend span::before {
    border-radius: 2px;
    content: "";
    display: inline-block;
    height: 8px;
    width: 12px;
}

.crm-rpt__legend .is-chat::before { background: #0f766e; }
.crm-rpt__legend .is-sale::before { background: #c2410c; }

.crm-rpt__stack {
    display: grid;
    gap: .45rem;
    margin: 0 0 1rem;
}

.crm-rpt__stack-row {
    align-items: center;
    display: grid;
    gap: .55rem;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) auto;
}

.crm-rpt__stack-name {
    align-items: center;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: .35rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-rpt__dot {
    background: var(--tag, #0f766e);
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    height: 8px;
    width: 8px;
}

.crm-rpt__stack-track {
    background: var(--gray-90, #f4f4f5);
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
    position: relative;
}

.crm-rpt__stack-track.is-dual {
    background: transparent;
    display: grid;
    gap: 3px;
    height: auto;
}

.crm-rpt__stack-track.is-dual .crm-rpt__stack-fill {
    border-radius: 999px;
    height: 6px;
}

.crm-rpt__stack-fill {
    background: #0f766e;
    border-radius: inherit;
    display: block;
    height: 100%;
    max-width: 100%;
    min-width: 0;
}

.crm-rpt__stack-fill.is-asesor { background: #2563eb; }
.crm-rpt__stack-fill.is-cuenta { background: #7c3aed; }
.crm-rpt__stack-fill.is-adset { background: #db2777; }
.crm-rpt__stack-fill.is-business { background: #0e7490; }
.crm-rpt__stack-fill.is-sale { background: #c2410c; }

.crm-rpt__stack-meta {
    color: var(--gray-50, #71717a);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.crm-rpt__table-wrap {
    max-height: 280px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.crm-rpt__table {
    border-collapse: collapse;
    font-size: 12px;
    width: 100%;
}

.crm-rpt__table th,
.crm-rpt__table td {
    border-bottom: 1px solid var(--border, #e4e4e7);
    padding: .4rem .45rem;
    text-align: left;
    white-space: nowrap;
}

.crm-rpt__table th {
    color: var(--gray-70, #71717a);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .06em;
    position: sticky;
    text-transform: uppercase;
    top: 0;
    background: var(--cc-surface, #fff);
    z-index: 1;
}

.crm-rpt__tag {
    align-items: center;
    background: color-mix(in srgb, var(--tag, #0f766e) 18%, #fff);
    border: 1px solid color-mix(in srgb, var(--tag, #0f766e) 35%, #fff);
    border-radius: 999px;
    color: var(--tag, #0f766e);
    display: inline-flex;
    font-size: 11px;
    font-weight: 650;
    padding: .12rem .5rem;
}

.crm-rpt__mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
}

@media (max-width: 991.98px) {
    .crm-wa__list-head .crm-wa__inbox-tabs,
    html.dark .crm-wa__list-head .crm-wa__inbox-tabs,
    html.dark-layout .crm-wa__list-head .crm-wa__inbox-tabs,
    [data-theme="dark"] .crm-wa__list-head .crm-wa__inbox-tabs,
    html:not(.dark):not(.dark-layout) .crm-wa__list-head .crm-wa__inbox-tabs {
        background: rgba(255, 255, 255, .08);
        border: 0;
        border-radius: 999px;
        box-sizing: border-box;
        display: inline-flex;
        flex: 0 1 auto;
        gap: 2px;
        margin: 0;
        min-width: 0;
        order: 1;
        padding: 3px;
        width: auto;
    }

    .crm-wa__list-head .crm-wa__inbox-tabs button,
    html.dark .crm-wa__list-head .crm-wa__inbox-tabs button,
    html.dark-layout .crm-wa__list-head .crm-wa__inbox-tabs button,
    [data-theme="dark"] .crm-wa__list-head .crm-wa__inbox-tabs button,
    html:not(.dark):not(.dark-layout) .crm-wa__list-head .crm-wa__inbox-tabs button {
        background: transparent;
        border: 0;
        border-radius: 999px;
        color: #8b98a5;
        font-size: 13px;
        font-weight: 650;
        gap: 8px;
        height: 30px;
        justify-content: center;
        margin: 0;
        min-height: 30px;
        padding: 0 12px;
        white-space: nowrap;
        width: auto;
    }

    .crm-wa__list-head .crm-wa__inbox-tabs button.is-active,
    html.dark .crm-wa__list-head .crm-wa__inbox-tabs button.is-active,
    html.dark-layout .crm-wa__list-head .crm-wa__inbox-tabs button.is-active,
    [data-theme="dark"] .crm-wa__list-head .crm-wa__inbox-tabs button.is-active {
        background: rgba(255, 255, 255, .16);
        border-bottom-color: transparent;
        color: #fff;
    }

    .crm-wa__list-head .crm-wa__inbox-tabs button svg,
    .crm-wa__list-head .crm-wa__inbox-tabs button i {
        display: none;
    }

    html:not(.dark):not(.dark-layout) .crm-wa__list-head .crm-wa__inbox-tabs {
        background: rgba(0, 0, 0, .06);
    }

    html:not(.dark):not(.dark-layout) .crm-wa__list-head .crm-wa__inbox-tabs button {
        color: #71717a;
    }

    html:not(.dark):not(.dark-layout) .crm-wa__list-head .crm-wa__inbox-tabs button.is-active {
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
        color: #111;
    }

    .crm-wa__list-head.is-searching .crm-wa__inbox-tabs,
    html.dark .crm-wa__list-head.is-searching .crm-wa__inbox-tabs,
    html.dark-layout .crm-wa__list-head.is-searching .crm-wa__inbox-tabs,
    body.pc-inbox-compact .crm-wa__list-head.is-searching .crm-wa__inbox-tabs {
        display: none !important;
    }

    .crm-wa__list .crm-wa__filters {
        max-height: 320px;
        overflow: hidden;
        transition: max-height .32s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
    }

    body.pc-inbox-compact .crm-wa__list-head {
        align-items: center;
        flex-wrap: nowrap;
        gap: .35rem;
    }

    body.pc-inbox-compact .crm-wa__list-head:not(.is-searching) .crm-wa__brand {
        display: none;
    }

    body.pc-inbox-compact .crm-wa__list-head:not(.is-searching) .crm-wa__list-bar {
        flex: 0 0 auto;
        justify-content: flex-end;
        margin-left: auto;
        order: 2;
    }

    body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs,
    html.dark body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs,
    html.dark-layout body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs,
    [data-theme="dark"] body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs,
    html:not(.dark):not(.dark-layout) body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs {
        background: rgba(255, 255, 255, .08);
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        flex: 0 1 auto;
        gap: 2px;
        margin: 0;
        max-width: none;
        min-width: 0;
        order: 1;
        padding: 2px;
        width: auto;
    }

    body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs button,
    html.dark body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs button,
    html.dark-layout body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs button,
    [data-theme="dark"] body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs button {
        border: 0;
        border-radius: 999px;
        font-size: 13px;
        gap: 0;
        height: 30px;
        min-height: 30px;
        padding: 0 14px;
        white-space: nowrap;
        width: auto;
    }

    body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs button svg,
    body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs button i {
        display: none;
    }

    body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs button.is-active,
    html.dark body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs button.is-active,
    html.dark-layout body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs button.is-active,
    [data-theme="dark"] body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs button.is-active {
        background: rgba(255, 255, 255, .16);
        border-bottom-color: transparent;
        color: #fff;
    }

    html:not(.dark):not(.dark-layout) body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs {
        background: rgba(0, 0, 0, .06);
    }

    html:not(.dark):not(.dark-layout) body.pc-inbox-compact .crm-wa__list-head .crm-wa__inbox-tabs button.is-active {
        background: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
        color: #111;
    }

    body.pc-inbox-compact .crm-wa__filters {
        margin: 0;
        max-height: 0;
        opacity: 0;
        padding: 0;
        pointer-events: none;
    }

    .crm-wa__list-head.is-searching,
    body.pc-inbox-compact .crm-wa__list-head.is-searching {
        flex-wrap: wrap;
    }

    body.pc-inbox-compact .crm-wa__list-head.is-searching .crm-wa__list-bar {
        flex: 1 0 100%;
        width: 100%;
    }

}

@media (max-width: 767.98px) {
    .crm-rpt__filter-actions {
        flex-wrap: wrap;
    }

    .crm-rpt__stack-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .crm-rpt__stack-track {
        grid-column: 1 / -1;
    }
}