/* =========================================================
   MAIS POLÍMEROS — VERSÃO MOBILE
   Carregado DEPOIS do CSS desktop.
   Desktop permanece inalterado.
   ========================================================= */

.mobile-chat-back,
.mobile-contact-button,
.mobile-contact-close,
.mobile-contact-overlay {
    display: none;
}

@media (max-width: 820px) {

    :root {
        --mobile-nav-height: 68px;
        --mobile-topbar-height: 58px;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }

    body {
        min-height: 100vh;
        min-height: 100dvh;
        background: #FFFFFF;
        -webkit-tap-highlight-color: transparent;
    }

    button,
    a,
    input,
    textarea {
        touch-action: manipulation;
    }

    .app {
        display: block !important;
        width: 100%;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 0;
        overflow: hidden;
        padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
    }

    /* =====================================================
       NAVEGAÇÃO INFERIOR
       ===================================================== */

    .sidebar {
        display: flex !important;
        position: fixed !important;
        z-index: 5000 !important;

        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;

        width: 100% !important;
        height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)) !important;

        padding: 6px 8px env(safe-area-inset-bottom) !important;

        overflow: visible !important;

        background:
            linear-gradient(
                165deg,
                #111136 0%,
                #1D1D3C 58%,
                #161543 100%
            ) !important;

        border-top: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 -8px 28px rgba(29,29,60,.16);
    }

    .sidebar .logo,
    .sidebar-brand-shape,
    .sidebar-bottom {
        display: none !important;
    }

    .sidebar .menu {
        position: static !important;
        z-index: auto !important;

        width: 100%;
        height: 100%;

        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 4px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .sidebar .menu-item {
        position: relative;

        width: 100% !important;
        min-width: 0;
        height: 100%;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;

        padding: 5px 2px !important;

        border: 0 !important;
        border-radius: 12px !important;

        background: transparent !important;
        color: rgba(255,255,255,.68) !important;

        font-size: 10px !important;
        font-weight: 600 !important;
        line-height: 1.05 !important;

        white-space: nowrap;
        overflow: visible;

        cursor: pointer;
    }

    .sidebar .menu-item .icon {
        min-width: 0 !important;
        font-size: 19px !important;
        line-height: 1 !important;
    }

    .sidebar .menu-item.active {
        color: #FFFFFF !important;
        background: rgba(255,255,255,.09) !important;
    }

    .sidebar .menu-item.active::before {
        content: "";

        position: absolute;
        top: -6px;
        left: 50%;

        width: 34px;
        height: 3px;

        border-radius: 0 0 5px 5px;
        background: #4AB9B0;

        transform: translateX(-50%);
        box-shadow: 0 0 10px rgba(74,185,176,.45);
    }

    .sidebar .badge-orange {
        position: absolute !important;
        top: 3px !important;
        right: calc(50% - 25px) !important;

        min-width: 16px !important;
        height: 16px !important;

        display: grid !important;
        place-items: center;

        padding: 0 4px !important;

        border: 2px solid #1D1D3C;
        border-radius: 999px !important;

        font-size: 8px !important;
        line-height: 1 !important;
    }

    /* =====================================================
       ESTRUTURA PRINCIPAL
       ===================================================== */

    .main,
    .attendants-main,
    .contacts-main,
    .rp-main {
        width: 100% !important;
        height: calc(100vh - var(--mobile-nav-height)) !important;
        height: calc(100dvh - var(--mobile-nav-height) - env(safe-area-inset-bottom)) !important;

        min-width: 0 !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: hidden !important;
    }

    .topbar {
        flex: 0 0 var(--mobile-topbar-height) !important;

        width: 100%;
        height: var(--mobile-topbar-height) !important;
        min-height: var(--mobile-topbar-height) !important;

        padding: 0 14px !important;

        background: #FFFFFF;
        border-bottom: 1px solid #E9EDF2;
    }

    .topbar h1 {
        font-size: 19px !important;
        line-height: 1 !important;
    }

    .topbar .user-area {
        gap: 8px !important;
    }

    .topbar .user-avatar {
        width: 36px !important;
        height: 36px !important;

        font-size: 11px !important;
    }

    .topbar .user-info,
    .topbar .arrow {
        display: none !important;
    }

    /* =====================================================
       CHAT — LISTA DE CONVERSAS
       ===================================================== */

    .chat-layout {
        display: block !important;

        width: 100% !important;
        height: calc(100% - var(--mobile-topbar-height)) !important;
        min-height: 0 !important;

        overflow: hidden !important;
    }

    .conversation-panel {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        border: 0 !important;
        background: #FFFFFF !important;

        overflow: hidden !important;
    }

    .search-container {
        flex: 0 0 auto;

        margin: 0 !important;
        padding: 12px 12px 10px !important;

        background: #FFFFFF !important;
        border-bottom: 1px solid #EEF1F4;
    }

    .search-container > span {
        left: 27px !important;
    }

    .search-container input {
        height: 44px !important;

        padding-left: 42px !important;
        padding-right: 52px !important;

        border-radius: 13px !important;

        background: #F4F6F8 !important;

        font-size: 14px !important;
    }

    .conversation-filter-button {
        width: 36px !important;
        height: 36px !important;
    }

    .conversation-filter-menu {
        top: calc(100% + 4px) !important;
        right: 12px !important;

        width: min(260px, calc(100vw - 24px)) !important;

        z-index: 7000 !important;
    }

    .conversation-list {
        flex: 1 1 auto !important;

        min-height: 0 !important;
        height: auto !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        padding: 4px 8px 16px !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    .conversation {
        width: 100% !important;

        min-height: 74px !important;

        margin: 0 !important;
        padding: 11px 9px !important;

        border-radius: 13px !important;
    }

    .conversation + .conversation {
        margin-top: 2px !important;
    }

    .conversation .avatar {
        width: 46px !important;
        height: 46px !important;
        flex: 0 0 46px !important;
    }

    .conversation h3,
    .conversation strong {
        font-size: 13px !important;
    }

    .conversation p {
        max-width: calc(100vw - 150px);
        font-size: 12px !important;
    }

    /* =====================================================
       CHAT — TELA DA CONVERSA
       ===================================================== */

    .chat-area {
        display: none !important;

        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;

        overflow: hidden !important;

        background: #F8FAFB !important;

        grid-template-rows: 62px minmax(0, 1fr) auto !important;
    }

    body.mobile-chat-open .main .topbar {
        display: none !important;
    }

    body.mobile-chat-open .chat-layout {
        height: 100% !important;
    }

    body.mobile-chat-open .conversation-panel {
        display: none !important;
    }

    body.mobile-chat-open .chat-area {
        display: grid !important;
    }

    .chat-header {
        width: 100% !important;
        height: 62px !important;
        min-height: 62px !important;

        display: flex !important;
        align-items: center !important;
        gap: 6px !important;

        padding: 0 8px !important;

        background: #FFFFFF !important;
        border-bottom: 1px solid #E8EDF2 !important;
    }

    .mobile-chat-back,
    .mobile-contact-button {
        width: 42px;
        height: 42px;
        flex: 0 0 42px;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        border: 0;
        border-radius: 50%;

        background: transparent;
        color: #28224F;

        cursor: pointer;
    }

    .mobile-chat-back {
        font-size: 34px;
        font-weight: 300;
        line-height: 1;
    }

    .mobile-contact-button {
        font-size: 22px;
        line-height: 1;
    }

    .mobile-chat-back:active,
    .mobile-contact-button:active {
        background: #EEF2F4;
    }

    .chat-person {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 9px !important;
    }

    .chat-person .avatar {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }

    .chat-person > div:last-child {
        min-width: 0;
    }

    .chat-person strong {
        display: block;

        max-width: calc(100vw - 155px);

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: 14px !important;
    }

    .chat-person small {
        font-size: 10px !important;
    }

    .messages {
        min-height: 0 !important;

        padding: 14px 11px 16px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
    }

    .message {
        margin-bottom: 9px !important;
    }

    .bubble {
        max-width: 84vw !important;

        padding: 10px 12px !important;

        border-radius: 15px !important;

        font-size: 13px !important;
        line-height: 1.38 !important;
    }

    .message-time {
        margin-left: 8px !important;
        font-size: 9px !important;
    }

    .date-divider {
        margin: 10px auto 14px !important;
        font-size: 10px !important;
    }

    /* =====================================================
       COMPOSITOR MOBILE
       ===================================================== */

    .message-input {
        grid-row: 3 !important;

        width: 100% !important;
        min-height: 0 !important;

        margin: 0 !important;

        display: grid !important;
        grid-template-columns: 38px 38px minmax(0, 1fr) 38px 46px !important;
        grid-template-areas:
            "warning warning warning warning warning"
            "attendance attendance attendance attendance attendance"
            "attach template input emoji send" !important;
        align-items: center !important;
        gap: 7px !important;

        padding: 8px 10px calc(9px + env(safe-area-inset-bottom)) !important;

        border: 0 !important;
        border-top: 1px solid #E7EBF0 !important;
        border-radius: 0 !important;

        background: #FFFFFF !important;
        box-shadow: 0 -4px 16px rgba(29,29,60,.04) !important;

        overflow: visible !important;
    }

    .composer-attendance {
        grid-area: attendance;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 52px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .takeover-button {
        min-height: 34px !important;

        padding: 7px 12px !important;

        border-radius: 18px !important;

        font-size: 10px !important;
        line-height: 1 !important;

        white-space: nowrap;
    }

    .attendance-status {
        display: block !important;

        min-width: 0;
        max-width: 100%;

        margin: 0 !important;
        padding-left: 6px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        color: var(--gray-500);
        font-size: 9px !important;
        line-height: 1.2 !important;
        text-align: left;
    }

    .message-input .attach {
        grid-area: attach;

        width: 38px !important;
        height: 38px !important;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        margin: 0 !important;
        padding: 0 !important;
    }

    .message-input textarea {
        grid-area: input;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        max-height: 108px !important;

        margin: 0 !important;
        padding: 10px 11px !important;

        border: 1px solid #E4E8ED !important;
        border-radius: 14px !important;

        background: #F8F9FA !important;

        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    .message-input textarea:focus {
        border-color: #BFDDE1 !important;
        box-shadow: 0 0 0 3px rgba(49,147,163,.08) !important;
    }

    .emoji-picker-wrapper {
        grid-area: emoji;

        width: 38px !important;
        height: 38px !important;

        z-index: 5500 !important;
    }

    .message-input .emoji {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
    }

    .message-input .send {
        grid-area: send;

        width: 46px !important;
        height: 46px !important;

        margin: 0 !important;

        border-radius: 50% !important;
    }

    /* =====================================================
       EMOJIS — BOTTOM SHEET
       ===================================================== */

    .emoji-picker {
        position: fixed !important;

        left: 8px !important;
        right: 8px !important;
        bottom: calc(var(--mobile-nav-height) + 8px + env(safe-area-inset-bottom)) !important;

        width: auto !important;
        max-width: none !important;
        max-height: min(66vh, 560px) !important;
        max-height: min(66dvh, 560px) !important;

        border-radius: 22px !important;

        transform-origin: bottom center !important;
    }

    .emoji-picker::after {
        display: none !important;
    }

    .emoji-search-row {
        padding: 13px 13px 8px !important;
    }

    .emoji-search-box {
        height: 44px !important;
    }

    .emoji-search {
        font-size: 14px !important;
    }

    .emoji-grid {
        min-height: 200px !important;
        max-height: min(42vh, 340px) !important;

        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 4px !important;

        padding: 8px 10px 10px !important;
    }

    .emoji-option {
        width: 44px !important;
        height: 44px !important;

        font-size: 29px !important;
    }

    .emoji-categories {
        padding: 7px 10px 10px !important;
    }

    .emoji-category-button {
        height: 42px !important;
        font-size: 21px !important;
    }

    /* =====================================================
       PAINEL DO CONTATO — DRAWER
       ===================================================== */

    .mobile-contact-overlay {
        position: fixed !important;
        z-index: 5890 !important;

        inset: 0 0 calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)) 0;

        display: none !important;

        width: auto;
        height: auto;

        border: 0;
        background: rgba(13,18,31,.44);

        backdrop-filter: blur(2px);
    }

    body.mobile-contact-open .mobile-contact-overlay {
        display: block !important;
    }

    .contact-panel {
        position: fixed !important;
        z-index: 5900 !important;

        top: 0 !important;
        right: 0 !important;
        bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)) !important;
        left: auto !important;

        width: min(88vw, 360px) !important;
        height: auto !important;
        min-height: 0 !important;

        display: block !important;

        border-left: 0 !important;

        background: #FFFFFF !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        transform: translateX(105%);
        transition: transform .22s ease;

        box-shadow: -18px 0 45px rgba(29,29,60,.18);
    }

    body.mobile-contact-open .contact-panel {
        transform: translateX(0);
    }

    .contact-panel-toggle {
        display: none !important;
    }

    .mobile-contact-close {
        position: absolute;
        z-index: 15;

        top: 12px;
        left: 12px;

        width: 38px;
        height: 38px;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        border: 0;
        border-radius: 50%;

        background: rgba(255,255,255,.92);
        color: #28224F;

        box-shadow: 0 3px 12px rgba(29,29,60,.12);

        font-size: 22px;
        cursor: pointer;
    }

    .contact-panel .contact-header {
        padding-top: 58px !important;
    }

    /* =====================================================
       ATENDENTES / CONTATOS / RELATÓRIOS
       ===================================================== */

    .attendants-main,
    .contacts-main,
    .rp-main {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .attendants-content,
    .contacts-content,
    .rp-content {
        min-height: 0 !important;

        padding: 16px 12px 28px !important;

        overflow: visible !important;
    }

    .attendants-grid,
    .contacts-grid,
    .rp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .metric-card,
    .rp-card {
        min-width: 0 !important;
        min-height: 104px !important;

        padding: 14px !important;

        border-radius: 14px !important;
    }

    .metric-card strong,
    .rp-card .value {
        font-size: 24px !important;
    }

    .panel-header,
    .contacts-panel-header,
    .contacts-heading,
    .rp-heading {
        align-items: stretch !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .attendant-search,
    .contacts-search {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Atendentes em cartões */
    .attendants-table {
        min-width: 0 !important;
    }

    .attendants-table,
    .attendants-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .attendants-table thead {
        display: none !important;
    }

    .attendants-table tr[data-attendant-row] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px 10px !important;

        margin: 10px !important;
        padding: 13px !important;

        border: 1px solid #E6EBF0;
        border-radius: 14px;

        background: #FFFFFF;
    }

    .attendants-table tr[data-attendant-row] td {
        display: block !important;

        padding: 0 !important;

        border: 0 !important;
    }

    .attendants-table tr[data-attendant-row] td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .attendants-table tr[data-attendant-row] td:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;

        color: #6F7C8E;
        word-break: break-word;
    }

    .attendants-table tr[data-attendant-row] td:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
    }

    .attendants-table tr[data-attendant-row] td:nth-child(4) {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .attendants-table .action-button {
        width: 100% !important;
    }

    /* Contatos em cartões */
    .contacts-table {
        min-width: 0 !important;
    }

    .contacts-table,
    .contacts-table tbody {
        display: block !important;
        width: 100% !important;
    }

    .contacts-table thead {
        display: none !important;
    }

    .contacts-table tr[data-contact-row] {
        display: block !important;

        margin: 10px !important;
        padding: 5px 13px !important;

        border: 1px solid #E6EBF0;
        border-radius: 14px;

        background: #FFFFFF;
    }

    .contacts-table tr[data-contact-row] td {
        display: flex !important;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;

        width: 100%;

        padding: 10px 0 !important;

        border: 0 !important;
        border-bottom: 1px solid #F0F2F4 !important;

        text-align: right !important;
        word-break: break-word;
    }

    .contacts-table tr[data-contact-row] td:last-child {
        border-bottom: 0 !important;
    }

    .contacts-table tr[data-contact-row] td::before {
        flex: 0 0 auto;

        color: #8B96A5;

        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .contacts-table tr[data-contact-row] td:nth-child(1)::before { content: "Nome"; }
    .contacts-table tr[data-contact-row] td:nth-child(2)::before { content: "Telefone"; }
    .contacts-table tr[data-contact-row] td:nth-child(3)::before { content: "E-mail"; }
    .contacts-table tr[data-contact-row] td:nth-child(4)::before { content: "Cargo"; }
    .contacts-table tr[data-contact-row] td:nth-child(5)::before { content: "WhatsApp"; }

    .contacts-table .wa-id {
        max-width: 60vw !important;
    }

    /* Relatórios */
    .rp-layout {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .rp-filter {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .rp-filter a {
        padding: 8px 4px !important;
        text-align: center;
    }

    .rp-panel {
        border-radius: 14px !important;
    }

    .rp-panel-head {
        padding: 14px !important;
    }

    .rp-panel-body {
        padding: 14px !important;
    }

    .rp-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .rp-chart {
        min-width: 520px !important;
        height: 210px !important;
    }

    /* =====================================================
       LOGIN
       ===================================================== */

    .login-page {
        min-height: 100vh !important;
        min-height: 100dvh !important;

        padding: 18px !important;
    }

    .login-card {
        width: 100% !important;
        max-width: 390px !important;

        padding: 28px 20px !important;

        border-radius: 20px !important;
    }

    .login-logo {
        max-width: 185px !important;
    }

    .login-form input {
        min-height: 48px !important;
        font-size: 16px !important;
    }

    .login-form button {
        min-height: 48px !important;
    }
}

@media (max-width: 520px) {
    .attendants-grid,
    .contacts-grid,
    .rp-grid {
        grid-template-columns: 1fr !important;
    }

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

    .emoji-option {
        width: 43px !important;
        height: 43px !important;

        font-size: 28px !important;
    }
}

@media (max-width: 390px) {
    .composer-attendance {
        align-items: flex-start !important;
        justify-content: center !important;
    }

    .attendance-status {
        display: block !important;
        max-width: calc(100vw - 28px);
    }

    .message-input {
        grid-template-columns: 36px 36px minmax(0, 1fr) 36px 44px !important;
        gap: 5px !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .message-input .attach,
    .emoji-picker-wrapper,
    .message-input .emoji {
        width: 36px !important;
        height: 36px !important;
    }

    .message-input .send {
        width: 44px !important;
        height: 44px !important;
    }
}


@media (max-width: 820px) {
    .client-24h-warning {
        grid-area: warning;

        width: 100% !important;

        margin: 0 0 2px !important;
        padding: 9px 10px !important;

        align-items: flex-start !important;
        gap: 8px !important;

        border-radius: 10px !important;

        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    .client-24h-warning-icon {
        width: 19px !important;
        height: 19px !important;
        flex-basis: 19px !important;

        font-size: 11px !important;
    }

    .client-24h-template-button {
        min-height: 26px !important;
        padding: 5px 8px !important;

        border-radius: 7px !important;

        font-size: 9px !important;
    }
}

@media (max-width: 430px) {
    .client-24h-warning {
        display: grid !important;
        grid-template-columns: 20px minmax(0, 1fr) !important;
    }

    .client-24h-template-button {
        grid-column: 2;
        justify-self: start;
    }
}


@media (max-width: 820px) {
    .search-container input {
        padding-right: 8px !important;
    }

    .search-container .conversation-archive-view-button,
    .search-container .conversation-filter-button {
        width: 36px !important;
        height: 36px !important;
        flex: 0 0 36px !important;
    }

    .conversation-data,
    .conversation.has-unread .conversation-data {
        padding-right: 36px !important;
    }

    .conversation-archive-button {
        top: 9px !important;
        right: 8px !important;

        width: 27px !important;
        height: 27px !important;

        opacity: .72 !important;
    }

    .unread-count {
        top: auto !important;
        right: 10px !important;
        bottom: 9px !important;
    }

    .archive-count-badge {
        top: -4px !important;
        right: -5px !important;
    }
}


@media (max-width: 820px) {
    .chat-header-actions {
        margin-left: auto;
        gap: 5px;
    }

    .chat-unarchive-button {
        min-height: 34px;
        padding: 6px 9px;
        font-size: 10px;
    }

    .chat-unarchive-button span {
        display: none;
    }

    .chat-unarchive-button svg {
        width: 18px;
        height: 18px;
    }
}