/* mobile.css — front do celular refeito do zero (19/08/2026).
   Carregado por ÚLTIMO no index.html (depois do 2º design-system.css), então ganha
   a cascata inteira. TODA regra vive dentro de @media (max-width: 960px) — o mesmo
   breakpoint do MOBILE_CHAT_BREAKPOINT do JS — e não toca o desktop.
   A camada mobile antiga (2 blocos @media do b5-responsivo-e-canais.css) foi
   removida; este arquivo é a única fonte do layout de celular.

   Escala usada aqui (não inventar valor fora dela):
   - espaçamento: 4 / 8 / 12 / 16 / 20 / 24
   - raio: 12 (controle), 16 (cartão), 999 (pílula)
   - fonte: 11 (rótulo), 13 (apoio), 15 (título), 16 (input — evita zoom do iOS)
   - alvo de toque: mínimo 44px
   - transição: 0.2s ease */

#mobile-menu-sheet {
    display: none; /* só existe visualmente no celular, via .is-open dentro do @media */
}

.chat-list-toolbar-actions {
    display: none; /* botões de busca/filtros só existem no celular */
}

@media (max-width: 960px) {

    /* ============================================================
       1. MOLDURA DO APP
       ============================================================ */

    html, body {
        height: 100%;
    }

    body {
        overscroll-behavior-y: none;
        -webkit-tap-highlight-color: transparent;
    }

    #app {
        position: relative;
        height: 100dvh;
    }

    /* !important: o design-system declara display:flex !important no rail */
    .lateral-menu {
        display: none !important;
    }

    .desktop-window-controls {
        display: none !important;
    }

    .app-content {
        min-height: 0;
        padding-bottom: 0;
    }

    /* espaço para a barra de navegação fixa */
    #chats-view-container,
    #crm-view-container,
    #agenda-view-container,
    #apps-view-container,
    #ai-view-container,
    #juridico-view-container,
    #agentes-view-container,
    #operators-view-container {
        padding-bottom: calc(56px + env(safe-area-inset-bottom)) !important;
        box-sizing: border-box;
    }

    body.mobile-chat-open #chats-view-container {
        padding-bottom: 0 !important;
    }

    /* ============================================================
       2. BARRA SUPERIOR — NÃO EXISTE no celular (20/08/2026):
       instância, status e perfil moram na folha de Menu.
       ============================================================ */

    .global-top-bar {
        display: none !important;
    }

    #payment-grace-banner {
        flex-wrap: wrap;
        padding: 8px 12px !important;
    }

    /* ============================================================
       3. NAVEGAÇÃO INFERIOR (seções do app)
       ============================================================ */

    .mobile-bottom-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1200;
        display: flex !important;
        align-items: stretch;
        height: calc(56px + env(safe-area-inset-bottom));
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
        box-sizing: border-box;
        background: var(--bg-header);
        border-top: 1px solid var(--border);
    }

    body.mobile-chat-open .mobile-bottom-bar {
        display: none !important;
    }

    body.mobile-chat-open #payment-grace-banner {
        display: none !important;
    }

    .mobile-nav-btn {
        flex: 1 1 0;
        min-width: 0;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        border-radius: 12px;
        padding: 4px 0;
        position: relative;
        cursor: pointer;
        transition: color 0.2s ease, background 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-nav-btn i {
        font-size: 17px;
        line-height: 1;
    }

    .mobile-nav-btn span {
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.01em;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav-btn.active {
        color: var(--accent-text, var(--accent));
        background: var(--accent-subtle);
    }

    .mobile-nav-badge {
        position: absolute;
        top: 1px;
        left: calc(50% + 5px);
        min-width: 15px;
        height: 15px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--accent);
        color: #fff;
        font-size: 9px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }

    .mobile-nav-badge.is-vermelho {
        background: #f44336;
    }

    /* ============================================================
       4. MENU (folha inferior)
       ============================================================ */

    #mobile-menu-sheet {
        display: block; /* fechado fica invisível/inerte por opacity — display:none mataria a transição */
        position: fixed;
        inset: 0;
        z-index: 1350;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    #mobile-menu-sheet.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    .mobile-menu-card {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-sidebar);
        border: 1px solid var(--border);
        border-bottom: none;
        border-radius: 16px 16px 0 0;
        padding: 8px 16px calc(16px + env(safe-area-inset-bottom));
        box-sizing: border-box;
        max-height: 78dvh;
        overflow-y: auto;
        transform: translateY(16px);
        transition: transform 0.2s ease;
    }

    #mobile-menu-sheet.is-open .mobile-menu-card {
        transform: translateY(0);
    }

    .mobile-menu-grabber {
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--border);
        margin: 4px auto 12px;
    }

    /* instância + status de conexão (espelho da barra superior do desktop) */
    .mobile-menu-instance {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .mobile-menu-instance .status-dot {
        flex: 0 0 auto;
    }

    .mobile-menu-instance select {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 44px;
        padding: 8px 12px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--bg-input);
        color: var(--text-main);
        font-size: 15px;
    }

    .mobile-menu-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
    }

    .mobile-menu-grid button {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 72px;
        padding: 12px 4px;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: var(--bg-surface);
        color: var(--text-main);
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s ease, border-color 0.2s ease;
    }

    .mobile-menu-grid button i {
        font-size: 18px;
        color: var(--accent);
    }

    .mobile-menu-grid button:active {
        background: var(--bg-surface-hover);
        border-color: var(--border-hover);
    }

    .mobile-menu-list {
        display: flex;
        flex-direction: column;
    }

    .mobile-menu-list button {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 48px;
        padding: 0 8px;
        border: none;
        border-bottom: 1px solid var(--border-subtle);
        background: transparent;
        color: var(--text-main);
        font-size: 15px;
        text-align: left;
        cursor: pointer;
    }

    .mobile-menu-list button:last-child {
        border-bottom: none;
    }

    .mobile-menu-list button i {
        width: 24px;
        text-align: center;
        font-size: 16px;
        color: var(--text-secondary);
    }

    .mobile-menu-list button.danger,
    .mobile-menu-list button.danger i {
        color: var(--brand-rose, #c62828);
    }

    /* ============================================================
       5. LISTA DE CONVERSAS
       ============================================================ */

    #chats-view-container {
        position: relative;
    }

    /* !important: o design-system trava .sidebar em width:380px !important —
       em tela de 360 isso cortava 20px da coluna direita (selo/horário fora
       da tela, prints do Yuri de 20/08). */
    #chats-view-container > .sidebar,
    #chats-view-container > .main {
        flex: 0 0 100%;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    #chats-view-container > .sidebar {
        position: absolute;
        inset: 0;
        bottom: calc(56px + env(safe-area-inset-bottom));
        z-index: 5;
        border-right: none;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    #chats-view-container.mobile-chat-open > .sidebar {
        transform: translateX(-24%);
        opacity: 0;
        pointer-events: none;
        bottom: 0;
    }

    #chats-view-container:not(.mobile-chat-open) > .main {
        display: none !important;
    }

    #chats-view-container.mobile-chat-open > .main {
        display: flex !important;
    }

    /* Os filtros de atendimento (Todos/Fila/Atendendo/Meus) moram na BARRA
       INFERIOR no celular — as abas do topo somem. !important: o design-system
       declara display:flex !important nelas. */
    .tabs {
        display: none !important;
    }

    /* busca recolhida: só aparece pelo botão da lupa */
    .search-container {
        display: none;
        padding: 8px 12px;
    }

    body.mobile-search-open .search-container {
        display: block;
    }

    .search-box {
        min-height: 44px;
        border-radius: 12px;
        padding: 0 12px;
    }

    .search-box input {
        font-size: 16px;
        padding: 10px 8px;
    }

    /* trilho único no topo da lista: chips roláveis + lupa + mais filtros */
    .chat-list-toolbar {
        display: flex;
        align-items: center;
        gap: 4px;
        border-bottom: 1px solid var(--border);
        background: var(--bg-sidebar);
        padding-right: 8px;
    }

    .chat-list-toolbar-actions {
        display: flex;
        flex: 0 0 auto;
        gap: 4px;
        align-self: stretch;
        align-items: center;
        padding-left: 8px;
        background: var(--bg-sidebar); /* chip rolando some embaixo, não atrás da lupa */
        border-left: 1px solid var(--border);
    }

    .chat-list-toolbar-actions button {
        width: 38px;
        height: 38px;
        border: none;
        border-radius: 12px;
        background: transparent;
        color: var(--text-secondary);
        font-size: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .chat-list-toolbar-actions button.active {
        color: var(--accent);
        background: var(--accent-subtle);
    }

    .chat-quick-filters {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 8px 4px 8px 12px;
        gap: 8px;
        border-bottom: none;
        background: transparent; /* quem pinta a faixa é o .chat-list-toolbar */
    }

    .chat-quick-filters::-webkit-scrollbar {
        display: none;
    }

    html.light-theme .chat-quick-filters {
        background: transparent;
    }

    .chat-quick-filter-btn {
        flex: 0 0 auto;
        min-height: 32px;
        padding: 5px 11px !important;
        font-size: 12px !important;
    }

    .chat-channel-filter-btn {
        min-width: 32px;
        width: 32px;
    }

    /* itens da lista — densidade de WhatsApp (pedido do Yuri, 20/08).
       !important porque o design-system trava padding/gap/tamanhos assim. */
    .chat-list {
        padding-bottom: 16px;
    }

    .chat-item {
        padding: 9px 12px !important;
        gap: 10px !important;
        transform: none !important;
    }

    .chat-item .avatar {
        width: 44px !important;
        height: 44px !important;
    }

    .chat-name,
    .chat-name-text {
        font-size: 15px !important;
    }

    .chat-last {
        font-size: 13px !important;
    }

    .chat-time {
        font-size: 11px !important;
    }

    .chat-info-right {
        min-width: 48px;
        gap: 4px;
    }

    /* selo de não lidas: largura AUTOMÁTICA — com 20px fixos, "1913" vazava
       para fora da tela (print do Yuri, 20/08) */
    .unread-badge {
        width: auto !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 0 5px !important;
        border-radius: 999px !important;
        font-size: 10px !important;
        line-height: 1 !important;
    }

    .chat-item:hover,
    .chat-item:hover .chat-info,
    .chat-item:hover .chat-info-right,
    .chat-item:hover .chat-last,
    .chat-item:hover .chat-time,
    .chat-item:hover .avatar,
    .chat-item:hover .bot-status-badge,
    .chat-item:hover .chat-meta-row .unread-badge {
        transform: none;
    }

    /* o chevron de menu do item sobrepunha o selo de não lidas; no toque,
       o menu do item abre por toque longo (contextmenu) */
    .chat-item-menu-trigger {
        display: none !important;
    }

    .chat-last {
        font-size: 13px;
    }

    .chat-title-row {
        gap: 6px;
    }

    .chat-channel-badge {
        min-width: 24px !important;
        width: 24px !important;
        height: 20px !important;
        padding: 0 !important;
    }

    .chat-channel-badge i {
        font-size: 12px !important;
    }

    .chat-label-row {
        gap: 4px;
    }

    .chat-label-badge {
        min-height: 18px;
        padding: 3px 7px;
        font-size: 10px;
    }

    /* ============================================================
       6. CONVERSA ABERTA
       ============================================================ */

    .chat-header {
        flex-wrap: nowrap;
        padding: 6px 8px !important;
        gap: 6px;
        min-height: 52px;
        min-width: 0;
    }

    .chat-header-main {
        flex: 1 1 auto;
        min-width: 0;
        gap: 6px;
    }

    /* O BOTÃO DE VOLTAR — a regra que faltava no layout antigo */
    .mobile-chat-back-btn {
        display: inline-flex !important;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: transparent;
    }

    .chat-header-profile {
        min-width: 0;
        gap: 8px;
    }

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

    .chat-header-copy {
        min-width: 0;
    }

    .chat-header-copy #c-name {
        font-size: 15px !important;
        line-height: 1.2;
    }

    .chat-header-actions {
        width: auto;
        flex: 0 0 auto;
        justify-content: flex-end;
        gap: 4px !important;
    }

    .chat-header-actions > div:first-child {
        gap: 2px !important;
    }

    /* o nome do contato nunca pode sumir ("M...") — garante um piso */
    .chat-header-copy {
        min-width: 76px;
    }

    /* o ícone de robô ao lado do switch é redundante no espaço do celular */
    .chat-header-actions > div:first-child > i {
        display: none;
    }

    .chat-header-quick-actions {
        flex: 0 0 auto;
        justify-content: flex-end;
        gap: 2px !important;
        margin-right: 0 !important;
        overflow: hidden;
    }

    .chat-header-quick-actions button {
        width: 30px !important;
        height: 30px;
        min-height: 0 !important;
        border: none !important;
        border-radius: 10px;
        font-size: 0 !important;
        overflow: hidden;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    .chat-header-quick-actions button i {
        font-size: 14px !important;
    }

    .chat-header-actions .switch {
        transform: scale(0.85);
        transform-origin: center;
    }

    .chat-header-actions .dropdown > i {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 15px;
    }

    /* barra de "Aguardando atendimento / Atender" mais baixa */
    #assignment-overlay {
        width: 100% !important;
        flex-shrink: 0;
        border-radius: 0 !important;
        padding: 6px 10px !important;
        gap: 8px !important;
        font-size: 13px;
    }

    #assignment-overlay span {
        font-size: 13px !important;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #assignment-overlay button,
    #assignment-overlay .btn-green {
        min-height: 36px !important;
        padding: 6px 14px !important;
        font-size: 13px !important;
        border-radius: 10px !important;
    }

    /* menu "mais opções" da conversa vira folha inferior */
    .chat-header-actions #chat-dropdown {
        position: fixed;
        left: 12px;
        right: 12px;
        top: auto;
        bottom: calc(12px + env(safe-area-inset-bottom));
        margin-top: 0;
        max-height: 62dvh;
        overflow-y: auto;
        border-radius: 16px;
        z-index: 1350;
    }

    .chat-header-actions #chat-dropdown a {
        padding: 12px 16px;
        font-size: 15px;
    }

    /* mensagens */
    .bubble {
        max-width: 86%;
    }

    .scroll-to-bottom-btn {
        right: 12px;
        bottom: calc(76px + env(safe-area-inset-bottom));
    }

    /* compositor */
    .input-area {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
        flex-wrap: wrap;
    }

    .input-controls {
        padding: 0 !important;
        gap: 8px !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        flex: 1;
        min-width: 0;
    }

    .composer-icon-btn {
        width: 38px;
        height: 38px;
        font-size: 17px;
        flex-shrink: 0;
    }

    .input-box {
        min-width: 0;
        min-height: 38px;
        padding: 7px 12px;
        border-radius: 12px;
        background: var(--bg-input) !important;
        border: 1px solid var(--border) !important;
        box-shadow: none;
    }

    .input-box textarea,
    .input-box input {
        font-size: 16px !important;
    }

    .composer-attach-menu {
        width: min(260px, calc(100vw - 24px));
    }

    .composer-picker {
        width: calc(100vw - 24px);
        max-width: none;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(100% + 8px);
        padding: 12px;
    }

    .composer-picker-actions {
        grid-template-columns: 1fr;
    }

    /* ============================================================
       7. PAINÉIS LATERAIS E MODAIS
       ============================================================ */

    .side-panel {
        width: 100vw;
        right: -100vw;
        border-left: none;
        box-shadow: none;
        z-index: 1305;
    }

    .panel-header {
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .contact-details-panel {
        width: 100% !important;
        right: -100% !important;
        z-index: 10050 !important;
    }

    .contact-details-panel.open {
        right: 0 !important;
    }

    .cd-header {
        height: 56px !important;
        min-height: 56px !important;
        padding: 0 12px !important;
    }

    .cd-body {
        padding: 10px 10px calc(30px + env(safe-area-inset-bottom)) !important;
        gap: 8px !important;
    }

    .cd-avatar-wrapper {
        width: 110px !important;
        height: 110px !important;
        margin-bottom: 10px !important;
    }

    .cd-avatar-fallback {
        font-size: 44px !important;
    }

    .cd-contact-name {
        font-size: 18px !important;
    }

    .cd-quick-actions {
        gap: 12px !important;
    }

    .cd-quick-icon {
        width: 40px !important;
        height: 40px !important;
        font-size: 15px !important;
    }

    /* Mesmo motivo do b1-nucleo-e-chamada.css: 1400 ficava ABAIXO do
       `#settings-modal` (10000) e o popup sumia atrás de Configurações.
       O celular usa o mesmo degrau do PC para não haver dois valores. */
    .swal2-container {
        z-index: 20000 !important;
    }

    /* O toast cobria a barra de navegação do celular (56px + safe area) e estourava a largura
       (max-width 400px numa tela de 390). Sobe para cima da barra, com margem lateral e largura
       que cabe — pela margem do popup, porque o container do swal2 é sempre 100% × 100%. */
    .swal2-container.swal2-bottom-end > .swal2-popup,
    .swal2-container.swal2-bottom-right > .swal2-popup {
        margin: 0 12px calc(64px + env(safe-area-inset-bottom)) 12px !important;
        max-width: calc(100vw - 24px) !important;
    }

    /* ============================================================
       8. CRM — no CELULAR ele é BLOQUEADO (20/08/2026): o gate de
       switchAppTab barra o aparelho de toque e avisa. As regras de layout
       abaixo continuam valendo para o PC de janela estreita (<=960), que
       entra normalmente. O selo "só no PC" é do botão do menu do celular.
       ============================================================ */

    .mobile-menu-grid button.mobile-menu-desktop-only {
        position: relative;
        opacity: 0.72;
    }

    .mobile-menu-grid button.mobile-menu-desktop-only i {
        color: var(--text-secondary);
    }

    /* selo curto e no canto: "só no PC" por extenso passava por cima do ícone */
    .mobile-menu-tag {
        position: absolute;
        top: 5px;
        right: 5px;
        padding: 1px 5px;
        border-radius: 999px;
        background: var(--bg-surface-hover);
        color: var(--text-secondary);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .crm-workspace {
        padding: 8px;
    }

    .crm-shell {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .crm-contacts-panel {
        order: 1;
        max-height: 40vh;
    }

    .crm-board-panel {
        order: 2;
        min-height: 60vh;
    }

    .crm-kanban-board {
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .kanban-column {
        min-width: min(300px, 82vw);
        scroll-snap-align: start;
    }

    .crm-card .crm-select-check {
        opacity: 1;
        transform: scale(1);
    }

    /* ============================================================
       9. AGENDA E DEMAIS VISÕES
       ============================================================ */

    /* Agenda: cabeçalho empilhado e calendário rolando DENTRO do cartão */
    #agenda-view-container {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #agenda-view-container > .view-header {
        flex-direction: column;
        align-items: stretch !important;
        gap: 12px;
        min-height: 0;
        padding: 16px 12px !important;
    }

    .agenda-header-copy h1 {
        font-size: 22px;
    }

    .agenda-header-actions {
        width: 100%;
    }

    .agenda-header-actions .btn-green {
        flex: 1 1 0;
        justify-content: center;
    }

    .agenda-shell {
        display: flex;
        flex-direction: column;
        padding: 12px;
        gap: 12px;
        overflow: visible;
    }

    .agenda-calendar-card {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        flex: 0 0 auto;
    }

    .agenda-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px;
    }

    .agenda-month-title {
        min-width: 0;
        font-size: 17px;
    }

    .agenda-side-card {
        flex: 0 0 auto;
    }

    #apps-view-container {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #apps-view-container .view-header {
        padding: 16px 12px !important;
        align-items: flex-start !important;
    }

    #apps-view-container .view-header h1 {
        font-size: 20px !important;
    }

    /* padding-bottom preserva a folga da barra fixa (a regra da seção 1) */
    #operators-view-container {
        padding: 16px 16px calc(56px + env(safe-area-inset-bottom)) !important;
        -webkit-overflow-scrolling: touch;
    }

    #juridico-view-container,
    #agentes-view-container,
    #ai-view-container {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ============================================================
       10. CONFIGURAÇÕES (tela cheia)
       ============================================================ */

    /* Os !important daqui existem porque o design-system trava o modal de
       Configurações com !important próprios (width 92%, height 86vh, nav em
       coluna). No celular ele vira tela cheia com navegação horizontal. */
    #settings-modal {
        align-items: stretch !important;
        justify-content: stretch !important;
    }

    .settings-container {
        width: 100% !important;
        max-width: none !important;
        height: 100dvh !important;
        max-height: none !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        flex-direction: column;
    }

    .settings-sidebar {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border);
        overflow: visible !important;
        flex: 0 0 auto;
    }

    /* b5 fixa `#settings-view-container .settings-sidebar` em 260px × 100% com !important e,
       por ter id no seletor, vencia a regra de classe acima: no celular a barra tomava a tela
       inteira e o conteúdo caía num vão de 48px abaixo da dobra (medido em 05/09/2026 — a tela
       de Faturamento ficava inalcançável). Mesma especificidade aqui, e por vir depois, ganha. */
    #settings-view-container .settings-container {
        flex-direction: column !important;
    }

    #settings-view-container .settings-sidebar {
        width: 100% !important;
        height: auto !important;
        max-height: 42vh !important;
        flex: 0 0 auto !important;
        border-right: none !important;
        overflow: visible !important;
    }

    #settings-view-container .settings-content-area {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
    }

    .settings-sidebar-header {
        padding: 12px 16px !important;
        font-size: 16px;
    }

    .settings-nav {
        display: flex;
        flex-direction: row !important;
        gap: 8px !important;
        padding: 8px 12px 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
    }

    .settings-nav::-webkit-scrollbar {
        display: none;
    }

    .settings-nav li {
        flex: 0 0 auto;
        padding: 8px 12px !important;
        border: none !important;
        border-bottom: 2px solid transparent !important;
        border-radius: 12px !important;
        background: var(--bg-surface) !important;
        white-space: nowrap;
        font-size: 13px !important;
    }

    .settings-nav li.active {
        border-bottom-color: var(--accent) !important;
        background: var(--accent-subtle) !important;
    }

    .settings-content-area {
        padding: 16px 12px calc(24px + env(safe-area-inset-bottom)) !important;
    }

    .settings-section-title {
        font-size: 20px !important;
    }

    .settings-section-desc {
        font-size: 13px;
        margin-bottom: 16px;
    }

    .settings-card {
        padding: 16px;
        margin-bottom: 12px;
    }

    .settings-card > div[style*="display:flex"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px;
    }

    .settings-card div[style*="text-align:right"] {
        width: 100%;
        text-align: left !important;
    }

    .settings-card button,
    .settings-card .btn-green,
    .settings-card .btn-red {
        max-width: 100%;
    }

    #view-instances .settings-card button,
    #view-general .settings-card button,
    #view-ai .settings-card button {
        width: 100%;
        justify-content: center;
    }


    /* tela de Canais (20/08/2026): em 360px o selo brigava com o nome no cabeçalho
       e os botões saíam cortados na largura da coluna. */
    .canal-head {
        flex-wrap: wrap;
        padding: 14px;
    }

    .canal-head-txt {
        flex: 1 1 140px;
    }

    .canal-selo {
        order: 3;
        margin-left: 58px;
    }

    .canal-corpo {
        padding: 14px;
    }

    .canal-acoes {
        flex-direction: column;
    }

    .canal-acoes .canal-btn {
        width: 100%;
    }

    .canais-topo-contagem {
        flex-basis: 100%;
    }

    .dash-panel-head {
        flex-wrap: wrap;
    }

    .dash-panel-link {
        width: 100%;
        justify-content: center;
    }

    /* dashboard inicial */
    .dash-wrapper {
        padding: 16px;
    }

    .dash-cards {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
}