/* Camada responsiva transversal. Carregada por ultimo para harmonizar os modulos. */
/* clip, not hidden: hidden turns html/body into scroll containers and breaks
   every position: sticky below them (topbar, table headers). */
html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

body, .app-wrapper, .content-viewport {
    max-width: 100%;
    min-width: 0;
}

body {
    overflow-x: clip;
}

.global-unsaved-status {
    position: fixed;
    z-index: 31990;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: calc(100vw - 2rem);
    border: 1px solid color-mix(in srgb, #f59e0b 48%, transparent);
    border-radius: 999px;
    padding: .48rem .78rem;
    background: color-mix(in srgb, var(--hz-surface, #fff) 94%, #f59e0b);
    color: #7c4a03;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
    transform: translateX(-50%);
    cursor: pointer;
    animation: globalUnsavedIn .18s ease-out;
}

.global-unsaved-status[hidden] {
    display: none;
}

body.dark-mode .global-unsaved-status, :root[data-theme="dark"] .global-unsaved-status {
    border-color: color-mix(in srgb, #fbbf24 48%, transparent);
    background: #252013;
    color: #fde68a;
}

form.has-unsaved-changes :is(button[type="submit"], input[type="submit"], button:not([type])) {
    box-shadow: 0 0 0 2px color-mix(in srgb, #f59e0b 24%, transparent);
}

@keyframes globalUnsavedIn {
    from { opacity: 0; transform: translate(-50%, .45rem); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

@media (max-width: 767.98px) {
    .global-unsaved-status {
        bottom: max(4.75rem, calc(env(safe-area-inset-bottom) + 4rem));
    }
}

@media (prefers-reduced-motion: reduce) {
    .global-unsaved-status {
        animation: none;
    }
}

.content-viewport > *, .content-viewport :where(main, section, article, aside, header, footer, form, fieldset, .row, [class*="grid"], [class*="layout"]) {
    min-width: 0;
}

.content-viewport :where(img, video, canvas, iframe) {
    max-width: 100%;
}

.content-viewport :where(img, video) {
    height: auto;
}

.table-responsive, .table-scrollable {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary-color, #16a34a) 52%, transparent) transparent;
}

.table-scrollable-auto {
    border-radius: inherit;
}

.table-scrollable.has-horizontal-overflow {
    padding-bottom: 2px;
}

.table-scrollable:focus-visible {
    outline: 2px solid var(--primary-color, #16a34a);
    outline-offset: 2px;
}

.table-responsive::-webkit-scrollbar, .table-scrollable::-webkit-scrollbar {
    height: 7px;
}

.table-responsive::-webkit-scrollbar-track, .table-scrollable::-webkit-scrollbar-track {
    background: transparent;
}

.table-responsive::-webkit-scrollbar-thumb, .table-scrollable::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary-color, #16a34a) 52%, transparent);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

/* Feedback transversal para formularios enviados ao servidor. O bloqueio usa
   eventos e aria-busy, sem desabilitar inputs que precisam chegar ao backend. */
form.is-submitting :is(button[type="submit"], input[type="submit"], button:not([type])) {
    pointer-events: none;
}

:is(button, input[type="submit"]).is-submitting {
    cursor: wait;
    opacity: .82;
}

button.is-submitting {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .48rem;
}

.global-submit-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: globalSubmitSpin .68s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .global-submit-spinner {
        animation-duration: 1.4s;
    }
}

@keyframes globalSubmitSpin {
    to { transform: rotate(360deg); }
}

/* Validacao inline comum a cadastros, edicoes e modais dinamicos. */
.global-validation-summary {
    display: grid;
    gap: .45rem;
    margin: 0 0 1rem;
    padding: .8rem .9rem;
    border: 1px solid color-mix(in srgb, #dc2626 34%, transparent);
    border-radius: .72rem;
    background: color-mix(in srgb, #dc2626 8%, var(--surface-1, var(--hz-surface, #fff)));
    color: var(--text-color, #17231d);
}

.global-validation-summary strong {
    display: flex;
    align-items: center;
    gap: .42rem;
    color: #c62828;
    font-size: .83rem;
}

.global-validation-summary ul {
    display: grid;
    gap: .15rem;
    margin: 0;
    padding: 0 0 0 1.2rem;
}

.global-validation-summary button {
    border: 0;
    padding: .12rem 0;
    background: transparent;
    color: inherit;
    font-size: .76rem;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.global-validation-summary button:hover {
    color: #c62828;
}

.global-field-error {
    width: 100%;
    margin-top: .28rem;
    color: #c62828;
    font-size: .72rem;
    line-height: 1.35;
}

:is(input, select, textarea).is-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, #dc2626 12%, transparent) !important;
}

body.dark-mode .global-validation-summary {
    background: color-mix(in srgb, #ef4444 10%, var(--surface-1, #101a29));
}

body.dark-mode :is(.global-validation-summary strong, .global-validation-summary button:hover, .global-field-error) {
    color: #fca5a5;
}

/* Progresso discreto para navegacoes reais. Fica acima do topbar, mas nao
   captura cliques nem cria um overlay que bloqueie o trabalho. */
.global-navigation-progress {
    --navigation-progress: 0;
    position: fixed;
    inset: 0 0 auto;
    z-index: 2147483646;
    height: 3px;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    transition: opacity .16s ease;
}

.global-navigation-progress span {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(var(--navigation-progress));
    transform-origin: left center;
    background: linear-gradient(90deg, var(--primary-color, #16a34a), #22c55e, #60a5fa);
    box-shadow: 0 0 12px color-mix(in srgb, var(--primary-color, #16a34a) 65%, transparent);
    transition: transform .38s cubic-bezier(.2, .72, .24, 1);
}

.global-navigation-progress.is-active {
    opacity: 1;
}

.global-navigation-progress.is-finishing {
    opacity: 0;
    transition-delay: .1s;
}

.global-navigation-progress.is-finishing span {
    transition-duration: .18s;
}

@media (prefers-reduced-motion: reduce) {
    .global-navigation-progress, .global-navigation-progress span {
        transition-duration: .01ms !important;
    }
}

/* Modais extensos mantem titulo e acoes visiveis; somente o corpo rola. A
   classe de desktop e aplicada apenas quando o conteudo realmente excede a tela. */
.modal.modal-needs-managed-scroll .modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 2rem);
    overflow: hidden;
}

.modal.modal-needs-managed-scroll .modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--primary-color, #16a34a) 45%, transparent) transparent;
}

.modal.modal-needs-managed-scroll :is(.modal-header, .modal-footer) {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    background: inherit;
    transition: box-shadow .18s ease;
}

.modal.modal-can-scroll:not(.modal-scroll-at-top) .modal-header {
    box-shadow: 0 8px 18px -16px rgba(15, 23, 42, .72);
}

.modal.modal-can-scroll:not(.modal-scroll-at-bottom) .modal-footer {
    box-shadow: 0 -8px 18px -16px rgba(15, 23, 42, .72);
}

.modal .modal-header {
    gap: .75rem;
}

.modal .modal-title, .modal .modal-header :is(h1, h2, h3, h4, h5, h6) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.modal .modal-header .btn-close {
    flex: 0 0 auto;
}

.modal.modal-needs-managed-scroll .modal-body::-webkit-scrollbar {
    width: 7px;
}

.modal.modal-needs-managed-scroll .modal-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--primary-color, #16a34a) 45%, transparent);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

@media (max-width: 991.98px) {
    .modal .modal-content {
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 1rem);
        overflow: hidden;
    }

    .modal .modal-body {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .modal .modal-header, .modal .modal-footer {
        flex: 0 0 auto;
    }
}

/* Cabecalhos e barras de acao compartilhados. */
:where(.ui-page-head, .ui-page-header, .page-head, .dashboard-head, .hub-head, .hd-head, .empresa-head, .pessoa-head, .role-head, .agendamento-head, .chat-head, .crm-detail-head, .proc-toolbar, .rh-title, .point-section-head, .pay-toolbar, .fin-toolbar, .section-head, .panel-head, .card-head), :where(.ui-page-actions, .heading-actions, .topbar-actions, .form-actions, .dialog-actions, .modal-actions, .proc-actions, .rh-filter, .point-filter, .pay-toolbar-actions, .fin-actions) {
    min-width: 0;
    flex-wrap: wrap;
}

/* Menus horizontais continuam utilizaveis sem esmagar os itens. */
:where(.proc-menu, .proc-config-menu, .rh-menu, .point-menu, .pay-menu, .fin-menu, .ui-tabs, .nav-tabs, .chat-tab-toolbar) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

:where(.proc-menu, .proc-config-menu, .rh-menu, .point-menu, .pay-menu, .fin-menu, .ui-tabs, .nav-tabs, .chat-tab-toolbar) > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

@media (max-width: 1199.98px) {
    

    :where(.proc-kpis, .rh-kpis, .pay-kpis, .fin-kpis, .kpi-grid, .ui-kpi-grid, .hd-attention-grid, .hd-company-grid, .billing-actions-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    :where(.sped-editor-grid, .docs-grid, .docs-document-grid, .module-editor-grid, .agenda-layout, .portfolio-layout, .est-layout, .prod-layout, .sn-layout) {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 991.98px) {
    .app-wrapper {
        display: block !important;
        width: 100%;
    }

    

    

    

    

    

    

    

    

    

    :where(.proc-top, .rh-head, .point-head, .pay-head, .fin-head, .pd-head, .home-command, .cockpit-hero, .fiscal-company-head, .download-head) {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 1rem !important;
    }

    :where(.proc-top, .rh-head, .point-head, .pay-head, .fin-head) form {
        width: 100%;
        min-width: 0 !important;
    }

    :where(.proc-form, .rh-form, .point-form, .pay-form, .fin-form-grid, .form-grid, .compact-form-grid, .contract-form-grid, .control-form-grid, .crm-grid, .crm-settings-grid, .pd-config-grid, .catcfg-grid) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    :where(.proc-config-workspace, .proc-recurrence-layout, .proc-delivery-page, .proc-modal-grid, .proc-report-grid, .point-today, .point-two, .pay-grid, .fin-grid, .pdv-layout, .chat-hub-shell, .hd-layout, .split-grid, .detail-grid, .agenda-layout, .portfolio-layout) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :where(.proc-config-form, .proc-delivery-page > aside) {
        position: static !important;
    }

    .modal-dialog, .modal-dialog.modal-lg, .modal-dialog.modal-xl {
        width: auto !important;
        max-width: calc(100vw - 1rem) !important;
        margin: .5rem auto !important;
    }

    .modal-dialog-scrollable {
        height: calc(100dvh - 1rem) !important;
    }

    .modal-content {
        max-height: calc(100dvh - 1rem);
    }
}

@media (max-width: 767.98px) {
    

    .content-viewport {
        width: 100%;
    }

    h1, .h1 {
        font-size: clamp(1.35rem, 7vw, 1.85rem) !important;
    }

    h2, .h2 {
        font-size: clamp(1.12rem, 5vw, 1.45rem) !important;
    }

    :where(.card, .proc-card, .rh-card, .point-card, .pay-card, .fin-card, .ui-panel, .panel) {
        max-width: 100%;
    }

    :where(.form-control, .form-select, textarea, input, select) {
        font-size: 16px !important;
    }

    :where(.btn, button, [role="button"]):not(.btn-close) {
        min-height: 42px;
    }

    :where(.ui-page-actions, .heading-actions, .topbar-actions, .form-actions, .dialog-actions, .modal-actions, .proc-actions, .rh-filter, .point-filter, .pay-toolbar form, .fin-toolbar form) {
        align-items: stretch;
        width: 100%;
    }

    :where(.ui-page-actions, .heading-actions, .form-actions, .dialog-actions, .modal-actions) > :where(.btn, button, a.btn) {
        flex: 1 1 auto;
    }

    :where(.proc-form, .rh-form, .point-form, .pay-form, .fin-form-grid, .form-grid, .compact-form-grid, .contract-form-grid, .control-form-grid, .crm-grid, .crm-settings-grid, .pd-config-grid, .catcfg-grid, .proc-kpis, .rh-kpis, .pay-kpis, .fin-kpis, .kpi-grid, .ui-kpi-grid, .model-grid, .module-contract-grid, .module-editor-grid, .pg-grid, .pgm-grid, .quota-grid, .calendar-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    :where(.point-kpis, .point-person-grid, .point-mood-summary, .dashboard-shortcuts, .home-shortcuts) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .table-responsive > table, .table-scrollable > table, table.table {
        min-width: 620px;
    }

    .table-cards table, [data-responsive="cards"] table, table[data-responsive="cards"] {
        min-width: 0 !important;
    }

    .modal-header, .modal-body, .modal-footer {
        padding: .875rem;
    }

    .modal-footer {
        flex-wrap: wrap;
    }

    .modal-footer > :where(.btn, button) {
        flex: 1 1 auto;
        margin: 0 !important;
    }
}

@media (max-width: 575.98px) {
    

    :where(.proc-top, .rh-head, .point-head, .pay-head, .fin-head, .pd-head, .card-body, .proc-card, .rh-card, .point-card, .pay-card, .fin-card) {
        padding: .875rem !important;
        border-radius: 14px !important;
    }

    :where(.ui-page-actions, .heading-actions, .topbar-actions, .form-actions, .dialog-actions, .modal-actions, .rh-filter, .point-filter, .pay-toolbar form, .fin-toolbar form) {
        flex-direction: column;
    }

    :where(.ui-page-actions, .heading-actions, .topbar-actions, .form-actions, .dialog-actions, .modal-actions, .rh-filter, .point-filter, .pay-toolbar form, .fin-toolbar form) > * {
        width: 100%;
    }

    :where(.point-timeline article, .adjustment-list > article, .proc-recurrence-list > article, .mirror-list > a) {
        min-width: 0;
    }

    .dropdown-menu:not(.global-notification-menu) {
        max-width: calc(100vw - 1rem);
    }
}

/* Chat: em telas estreitas a lista e a conversa viram duas etapas de navegacao. */
.chat-hub-mobile-back, .chat-hub-mobile-system-menu {
    display: none;
}

@media (max-width: 900px) {
    html:has(body .wa-root),
    body:has(.wa-root) {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    .main-content:has(.wa-root) {
        position: fixed !important;
        inset: var(--chat-mobile-top, 0px) 0 auto 0 !important;
        z-index: 2050 !important;
        width: 100% !important;
        height: var(--chat-mobile-height, 100dvh) !important;
        min-height: var(--chat-mobile-height, 100dvh) !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        overflow: hidden !important;
    }

    body:has(.wa-root) .global-system-tools, body:has(.wa-root.is-mobile-chat-open) .global-push-onboarding {
        display: none !important;
    }

    

    .main-content:has(.wa-root) .content-viewport, .wa-root.chat-hub-page {
        width: 100% !important;
        height: var(--chat-mobile-height, 100dvh) !important;
        min-height: var(--chat-mobile-height, 100dvh) !important;
        max-height: var(--chat-mobile-height, 100dvh) !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wa-root {
        position: relative;
        display: block !important;
        overflow: hidden;
        min-height: 0 !important;
    }

    .wa-left, .wa-right {
        position: absolute !important;
        inset: 0;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100% !important;
        border: 0 !important;
    }

    .wa-left {
        display: flex !important;
        z-index: 2;
    }

    .wa-right {
        display: none !important;
        z-index: 3;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .wa-root.is-mobile-chat-open .wa-left {
        display: none !important;
    }

    .wa-root.is-mobile-chat-open .wa-right {
        display: flex !important;
    }

    .chat-hub-resize-handle, .wa-team-panel {
        display: none !important;
    }

    .chat-hub-mobile-system-menu, .chat-hub-mobile-back {
        display: inline-grid;
        place-items: center;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        min-height: 40px !important;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: inherit;
        font-size: 1.15rem;
    }

    .chat-hub-mobile-system-menu:hover, .chat-hub-mobile-back:hover {
        background: rgba(100, 116, 139, .12);
    }

    .wa-left-head {
        min-height: 60px;
        padding: .55rem .65rem !important;
    }

    .wa-left-brand, .wa-left-controls {
        min-width: 0;
    }

    .wa-tenant-switch--top {
        max-width: min(38vw, 145px) !important;
    }

    .wa-main-head {
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) auto !important;
        gap: .4rem !important;
        min-height: 58px;
        padding: .4rem .45rem !important;
    }

    .wa-contact-info {
        width: 100%;
        gap: .55rem !important;
    }

    .chat-hub-contact-avatar {
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
    }

    .chat-hub-chat-contact-copy, .chat-hub-chat-contact-copy > div {
        min-width: 0;
    }

    .chat-hub-chat-contact-copy h2 {
        overflow: hidden;
        max-width: 100%;
        font-size: .9rem !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chat-hub-chat-contact-meta, .chat-hub-contact-status-row {
        display: none !important;
    }

    .wa-main-actions {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        width: auto;
        min-width: 0;
        padding: 0;
        overflow: visible;
    }

    .wa-main-actions::-webkit-scrollbar {
        display: none;
    }

    .wa-main-actions > * {
        flex: 0 0 auto;
    }

    .wa-main-actions .btn {
        width: auto !important;
        min-height: 34px !important;
        padding: .35rem .5rem !important;
        white-space: nowrap;
    }

    .wa-main-actions .wa-ctrl-btn {
        width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
    }

    #chat-hub-message-search, #chat-hub-call-contact, #chat-hub-history, #chat-hub-transfer {
        display: none !important;
    }

    .chat-hub-more-actions-menu {
        position: fixed !important;
        top: 58px !important;
        right: .5rem !important;
        left: .5rem !important;
        z-index: 2200 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .35rem !important;
        width: auto !important;
        max-height: calc(var(--chat-mobile-height, 100dvh) - 70px) !important;
        padding: .55rem !important;
        overflow-y: auto !important;
        border-radius: 14px !important;
        box-shadow: 0 16px 45px rgba(15, 23, 42, .28) !important;
    }

    .chat-hub-more-actions-menu .wa-ctrl-btn, .chat-hub-more-actions-menu .chat-hub-folder-wrap > .wa-ctrl-btn {
        display: flex !important;
        justify-content: flex-start !important;
        gap: .55rem;
        width: 100% !important;
        height: 42px !important;
        padding: 0 .7rem !important;
        border-radius: 10px !important;
    }

    .chat-hub-more-actions-menu .wa-ctrl-btn::after {
        content: attr(aria-label) !important;
        display: inline !important;
        overflow: hidden;
        font-size: .75rem;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .chat-hub-messages.is-visible {
        padding: .8rem .65rem 1.1rem !important;
        scroll-padding-bottom: 1rem;
    }

    .chat-hub-message, .chat-hub-message-bubble {
        max-width: 92% !important;
    }

    .chat-hub-pinned-bar {
        padding: .35rem .45rem !important;
    }

    .chat-hub-pinned-main {
        padding-inline: .45rem !important;
    }

    .chat-hub-pinned-text, #chat-hub-pinned-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .wa-composer {
        /* O composer ja e o ultimo filho de uma coluna flex. `sticky` fazia o
           campo escapar da viewport em Chrome/Windows e em alguns WebViews
           quando a barra do sistema alterava a altura visual da janela. */
        position: relative !important;
        bottom: auto !important;
        z-index: 20 !important;
        flex: 0 0 auto !important;
        gap: .35rem !important;
        min-height: 68px !important;
        padding: .45rem .45rem max(1rem, calc(env(safe-area-inset-bottom) + .65rem)) !important;
    }

    .wa-composer-body {
        flex: 1 1 auto !important;
        gap: 0 !important;
        min-width: 0;
        min-height: 50px !important;
        padding: 0 .25rem !important;
    }

    .wa-composer-btn {
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 40px !important;
        min-height: 40px !important;
        font-size: 1rem !important;
    }

    .wa-textarea {
        min-width: 56px;
        min-height: 48px !important;
        padding: .78rem .2rem !important;
    }

    .wa-send-btn {
        flex: 0 0 44px;
        width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
    }

    #chat-hub-camera, #chat-hub-location {
        display: none !important;
    }

    .chat-hub-expression-panel {
        position: fixed !important;
        inset: auto .4rem calc(62px + env(safe-area-inset-bottom)) .4rem !important;
        width: auto !important;
        max-width: none !important;
        height: min(460px, 58dvh) !important;
        max-height: 58dvh !important;
    }

    .chat-hub-expression-tabs {
        overflow-x: auto;
    }

    .chat-hub-emoji-grid {
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    }

    .chat-hub-context-menu, .chat-hub-card-context-menu, .chat-hub-forward-menu, .chat-hub-tag-picker {
        max-width: calc(100vw - 1rem) !important;
    }

    .chat-hub-profile-drawer {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
    }

    .chat-hub-profile-avatar {
        width: 116px !important;
        height: 116px !important;
    }

    #chat-hub-attachment-preview:not([hidden]):not(:empty) {
        min-height: 112px !important;
        padding: .5rem !important;
        overflow-x: auto;
    }

    .chat-hub-attachment-pill--preview {
        flex: 0 0 min(78vw, 250px);
        width: min(78vw, 250px) !important;
        min-height: 96px !important;
    }

    .chat-hub-attachment-thumb {
        flex-basis: 80px !important;
        width: 80px !important;
        height: 80px !important;
    }
}

@media (max-width: 420px) {
    .wa-status-pill {
        display: none !important;
    }

    .wa-tenant-switch--top {
        max-width: 42vw !important;
    }

    .chat-hub-emoji-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }

    .chat-hub-profile-library .chat-hub-media-library-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Operacao mobile: filtros do WhatsApp precisam caber inteiros e as tabelas
 * administrativas viram cartoes legiveis, sem tabela desktop recortada. */
@media (max-width: 640px) {
    .wa-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .45rem !important;
        padding: .45rem .6rem !important;
    }

    .wa-filter-select {
        width: 100% !important;
        min-width: 0 !important;
        padding-inline: .5rem !important;
        text-overflow: ellipsis;
    }

    .wa-tabs { padding-inline: .25rem !important; }

    .wa-tabs .chat-hub-tab {
        min-width: 0;
        gap: .18rem !important;
        padding-inline: .15rem !important;
        font-size: .7rem !important;
        white-space: nowrap;
    }

    .wa-tabs .chat-hub-tab-count {
        flex: 0 0 auto;
        padding-inline: .28rem;
    }

    .table-responsive:has(> .mobile-card-table) { overflow: visible; }

    table.mobile-card-table {
        display: block;
        width: 100%;
        min-width: 0 !important;
    }

    .mobile-card-table thead { display: none; }

    .mobile-card-table tbody {
        display: grid;
        gap: .75rem;
        padding: .75rem;
    }

    .mobile-card-table tbody tr:not(.mobile-table-empty) {
        display: grid;
        overflow: hidden;
        border: 1px solid var(--bs-border-color, var(--hz-line, #e5e7eb));
        border-radius: 14px;
        background: var(--bs-body-bg, var(--hz-surface, #fff));
        box-shadow: 0 5px 16px rgba(15, 23, 42, .05);
    }

    .mobile-card-table tbody tr:not(.mobile-table-empty) > td {
        display: grid !important;
        grid-template-columns: minmax(82px, .38fr) minmax(0, 1fr);
        align-items: center;
        gap: .65rem;
        width: 100%;
        max-width: none !important;
        padding: .7rem .8rem !important;
        border: 0;
        border-bottom: 1px solid var(--bs-border-color, #eef2f6);
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .mobile-card-table tbody tr:not(.mobile-table-empty) > td:last-child { border-bottom: 0; }

    .mobile-card-table tbody tr:not(.mobile-table-empty) > td::before {
        content: attr(data-label);
        color: var(--bs-secondary-color, var(--hz-muted, #64748b));
        font-size: .7rem;
        font-weight: 750;
        letter-spacing: .035em;
        text-transform: uppercase;
    }

    .mobile-card-table .mobile-card-value {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .mobile-card-table .mobile-card-actions > * { justify-self: end; }

    .mobile-card-table .mobile-table-empty {
        display: block;
        width: 100%;
    }

    .mobile-card-table .mobile-table-empty > td {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 2.25rem 1rem !important;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}