/* ==========================================================================
   NOTEBOOK X-EDITOR - MOBILE.CSS (VERSÃO FINAL CORRIGIDA)
   ========================================================================== */

@media (max-width: 768px) {

    /* --- 1. AJUSTES GERAIS DE LAYOUT --- */
    .mobile-toggle { 
        display: block !important; 
    }

    .center-col { 
        padding: 5px 15px 100px 15px !important; 
        width: 100% !important;
        overflow-x: hidden;
    }

    /* --- 2. OVERLAY (CORTINA ESCURA) --- 
       Deve ficar atrás dos menus para não bloquear cliques nem embaciar o conteúdo
    */
    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: transparent !important; /* 🚀 Remove o baço/cor escura */
        backdrop-filter: none !important;    /* 🚀 Remove o desfoque */
        z-index: 8000;
        display: none;
        pointer-events: auto; /* Mantém para bloquear o editor atrás */
    }
    .mobile-overlay.active { 
        display: block; 
    }

    /* --- 3. COLUNA DA ESQUERDA (GAVETA FULLSCREEN) --- */
    .left-col { 
        position: fixed !important; 
        top: 0 !important; 
        left: 0 !important; 
        height: 100vh !important; 
        width: 100vw !important;         /* 100% DA LARGURA DA TELA */
        max-width: 100vw !important;
        z-index: 10000 !important;       /* À frente do overlay */
        background-color: var(--bg-panel) !important;
        display: flex !important;
        flex-direction: column !important;
        
        /* Transição Suave via Transform (Melhor Performance) */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transform: translateX(0); 
        box-shadow: none;
    }

    /* Estado Fechado */
    .left-col.closed { 
        transform: translateX(-100%) !important; 
    }

    /* Listas internas no mobile */
    #lista-local, #lista-share, #lista-pins, #lista-lists {
        padding: 10px 20px !important;
    }

    /* --- 4. COLUNA DA DIREITA (BOTTOM SHEET) --- */
    .right-col {
        position: fixed !important;
        bottom: -100% !important;       /* Começa escondida em baixo */
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: min(68vh, calc(100vh - 88px));
        background-color: #1e293b !important;
        border-radius: 24px 24px 0 0;   /* Cantos arredondados no topo */
        box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
        z-index: 11000 !important;      /* A CAMADA MAIS ALTA - Nada o tapa */
       display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        will-change: height, bottom; /* Otimiza a performance do arrasto */

        
        /* Transição para abertura e altura do arrasto */
        transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1), height 0.1s ease !important;
    }

    .right-col.active {
        bottom: 0 !important;           /* Sobe para o ecrã */
    }

    .right-col .tab-content,
    .right-col .eye-scroll-area,
    .right-col #brain-resultado-pesquisa,
    .right-col #xsat-display-content {
        min-height: 0 !important;
    }

    /* --- 5. CABEÇALHO DE ARRASTO (HANDLE) --- */
#mobile-drag-handle {
        width: 100%;
        height: 35px; /* Altura reduzida para ser mais elegante */
        display: flex !important;
        justify-content: center;
        align-items: center;
        position: relative;
        background: transparent;
        flex-shrink: 0;
        cursor: grab;
        touch-action: none;
        z-index: 100;
        pointer-events: auto !important;
    }

    /* Barra horizontal cinzenta no centro do handle */
 .drag-bar {
        width: 36px;
        height: 4px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 10px;
    }

    /* BOTÃO "X" NO CANTO SUPERIOR DIREITO */
  #btn-close-bottom-sheet {
        position: absolute !important;
        right: 12px !important;
        top: 8px !important;
        width: 26px !important; /* Tamanho reduzido */
        height: 26px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: none !important;
        border-radius: 50% !important;
        color: rgba(255, 255, 255, 0.6) !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        font-size: 12px !important; /* Ícone mais pequeno */
        cursor: pointer;
        transition: all 0.2s ease;
        pointer-events: auto !important;
    }

     #btn-close-bottom-sheet:hover {
        background: rgba(255, 255, 255, 0.15) !important;
        color: white !important;
    }

    #btn-close-bottom-sheet:active {
        background: rgba(255, 255, 255, 0.2);
    }

    /* --- 6. CONTEÚDO INTERNO DA BOTTOM SHEET --- */
    
    /* Área de abas EYE / BRAIN / X-SAT */
    .right-col .segmented-control {
        margin: 10px 20px 15px 20px !important;
    }

    /* Listas e Painéis internos */
    .eye-scroll-area, 
    #brain-resultado-pesquisa, 
    #xsat-display-content {
        flex: 1;
        overflow-y: auto !important;
        padding: 0 15px 20px 15px !important;
        -webkit-overflow-scrolling: touch; /* Scroll suave no iOS */
    }

    /* Ajuste de Cards de Índice no mobile */
    .indice-card {
        padding: 15px !important;
        margin-bottom: 10px !important;
    }
}

@media (max-width: 768px) {
    /* Ajuste do tamanho do popup para não ficar demasiado largo */
    #popup-ferramentas-inline .popup-content {
        width: 92% !important;
        max-width: 360px !important;
        padding: 15px !important;
    }

    /* ALTERAÇÃO DA GRELHA: De 5 colunas para 3 colunas no mobile */
    .tool-grid {
        grid-template-columns: repeat(3, 1fr) !important; /* 3 itens por linha */
        gap: 10px !important;
    }

    /* Ajuste dos itens individuais para caberem melhor */
    .tool-item {
        padding: 12px 5px !important;
        min-height: 75px !important; /* Garante altura uniforme */
    }

    .tool-item i {
        font-size: 18px !important; /* Ícones ligeiramente menores */
    }

    .tool-item span {
        font-size: 8px !important; /* Texto menor para não quebrar linha */
        line-height: 1.1 !important;
        text-align: center;
    }

    /* Esconder os placeholders (os ícones de reticências vazios) no mobile 
       para o menu ficar mais limpo e focado no que interessa */
    .tool-grid div[style*="opacity: 0.1"] {
        display: none !important;
    }


    .popup-overlay {
        z-index: 40000 !important;
    }


.brain-box-item {
        min-height: 100px;
        margin-bottom: 15px;
        background: #262f3f !important; /* Um tom ligeiramente diferente do fundo */
        border: 1px solid rgba(255,255,255,0.1);
    }

    /* Animação para quando uma nova caixa nasce */
    .brain-box-item:first-child {
        animation: slideInBox 0.4s ease-out;
    }

    @keyframes slideInBox {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Garantir que o container de scroll do Brain tem altura */
    #biblia-dynamic-content {
        display: flex !important;
        flex-direction: column !important;
        min-height: 200px; /* Evita que colapse para 0px */
        padding-bottom: 120px !important; /* Espaço para o teclado não tapar a última caixa */
    }

    .card-cor-item, .cor-tab-content div {
        pointer-events: auto !important;
        cursor: pointer;
    }

      /* Ajuste para as abas do popup de cores no mobile */
    .popup-content .sub-tabs {
        padding: 5px 10px !important;
    }
        #popup-editar-cor-overlay {
        z-index: 50000 !important;
    }

    /* Popup de Cores (Nível 1) */
    #popup-cores-overlay {
        z-index: 40000 !important;
    }
}

@media (max-width: 768px) {
    .left-col {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        width: 100vw !important;
        z-index: 10000 !important;
        background-color: var(--bg-panel) !important;
        
        /* ESTA É A LINHA MÁGICA PARA A BARRA DE ABAS */
        padding-top: env(safe-area-inset-top) !important;
        
        display: flex !important;
        flex-direction: column !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Ajuste para que a barra de abas não fique colada ao topo */
    .left-buttons {
        background-color: var(--bg-panel) !important;
        padding-top: 5px; /* Um pequeno respiro extra */
    }
}

@media (max-width: 768px) {
    /* 🚀 FUNDO TRANSPARENTE: O overlay existe para bloquear o editor, mas é invisível */
    .mobile-overlay {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Ajuste da transição da coluna para não conflituar com o arrasto */
    .right-col {
        transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        will-change: height;
    }
    
    /* Garantir que o handle é visível no fundo transparente */
    #mobile-drag-handle {
        background: rgba(255, 255, 255, 0.05);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 24px 24px 0 0;
    }
}