/* ============================================================
   STYLE-MOBILE.CSS
   Versão otimizada para telas ≤ 770px (consolidada / sem duplicatas)
   ============================================================ */

/* Layout base: 1 coluna */
.container {
  display: block !important;
}
.main-content {
  width: 100% !important;
}

/* Editor ocupa o viewport inteiro (com respiro para topbar/toolbar/dock) */
.editor-textarea {
  padding: 16px !important;
  min-height: calc(100vh - 140px) !important;
}
.editor-textarea.folha {
  padding: 28px 18px !important;
  box-shadow: none;
  border-radius: 8px;
}

/* Sticky base (ajustado no @media) */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
}
.editor-toolbar {
  position: sticky;
  top: 52px;
  z-index: 20;
  flex-wrap: wrap;
  gap: 8px;
}
.editor-toolbar-esquerda,
.editor-toolbar-direita {
  width: 100% !important;
  justify-content: space-between;
}

/* Sidebar e painel direito viram drawers */
.sidebar,
.chatbot {
  position: fixed !important;
  top: 0;
  bottom: 0;
  background: #fff;
  z-index: 10010;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow-y: auto;
  padding-right: 12px;
  pointer-events: auto;
}

/* Sidebar (menu de seções) */
.sidebar {
  left: 0;
  width: 86vw;
  max-width: 420px;
  transform: translateX(-110%);
  transition: transform 0.25s ease;
}
.sidebar.is-open {
  transform: translateX(0);
}

/* Painel direito (refine) */
.chatbot {
  right: 0;
  width: 88vw;
  max-width: 420px;
  transform: translateX(110%);
  transition: transform 0.25s ease;
}
.chatbot.is-open {
  transform: translateX(0);
}

/* Backdrop (escurece fundo quando drawer aberto) */
#mobileBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 10000;
}
#mobileBackdrop.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Dock fixo no rodapé */
#mobileDock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 10px 12px;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  z-index: 10020;
}
#mobileDock .dock-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #dfe3e8;
  background: #f8f9fb;
  font-weight: 600;
}
#mobileDock .dock-btn:active {
  transform: translateY(1px);
}

/* Respiro para o dock (evita sobrepor texto final) */
.main-content,
.content,
.editor-container {
  padding-bottom: 72px !important;
}

/* Travar scroll quando drawer aberto */
body.drawer-open {
  overflow: hidden;
}

/* Ajustes tipográficos e folhas */
.editor-textarea h3 {
  font-size: 18px !important;
}
.editor-textarea ul {
  padding-left: 18px !important;
}

/* Wizard / modais adaptados */
.wizard-panel,
.wizard-card,
.selector-card {
  width: 96vw !important;
  max-width: 96vw !important;
  height: auto !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
}
.modal-card {
  max-width: 96vw !important;
  width: 96vw !important;
  max-height: 90vh;
  overflow-y: auto;
}

/* Sidebar e chatbot escondidos quando fechados (mas ainda manipuláveis via JS) */
.sidebar:not(.is-open),
.chatbot:not(.is-open) {
  visibility: hidden;
}

/* Pequenas otimizações */
html,
body,
#app-content {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ============================================================
   MOBILE OVERRIDES (tudo consolidado aqui)
   ============================================================ */
@media (max-width: 770px) {

  /* Evitar “gap” inicial: NÃO empurrar container */
  .container {
    padding-top: 0 !important;
  }

  /* ===== Barra superior real (logo + créditos + user + sair) ===== */
  .barra-total-topo {
    position: sticky !important;
    top: 0 !important;
    z-index: 20005 !important; /* abaixo dos drawers/backdrop, acima do conteúdo */
    background: #eef5fb !important;

    height: 56px !important;
    align-items: center !important;
    padding: 0 10px !important;
    gap: 10px !important;
    flex: 0 0 auto !important;

    overflow: visible !important;
    margin: 0 !important;
  }

  .btt-logo {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .btt-logo img {
    max-width: 120px !important;
    margin: 0 !important;
    height: auto !important;
  }

  /* Esconde menu horizontal do topo no mobile (Suporte/Sobre/etc) */
  .btt-main {
    width: auto !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
  }
  .btt-esquerda {
    display: none !important;
  }

  /* Área do usuário no topo: manter só ícone */
  .btt-rigth-user {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .btt-user-profile span {
    display: none !important;
  }

  /* Container do botão de créditos */
  .btt-direita {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 92px !important;
  }

  /* Botão créditos (badge) */
  #btnAssinarProTop {
    width: auto !important;
    min-width: 92px !important;
    height: 34px !important;
    min-height: 34px !important;

    padding: 0 10px !important;
    border-radius: 10px !important;

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

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #btnAssinarProTop i {
    font-size: 14px !important;
    line-height: 1 !important;
  }

  /* ===== Barra do nome do TCC/seção ===== */
  .topbar {
    display: flex !important;
    position: sticky !important;
    top: 56px !important;     /* logo abaixo da barra superior */
    z-index: 10045 !important;
    background: #fff !important;

    height: 44px !important;
    align-items: center !important;
    padding: 0 12px !important;
    margin: 0 !important;
  }

  /* ===== Toolbar do editor ===== */
  .editor-toolbar {
    position: sticky !important;
    top: 100px !important;    /* 56 + 44 */
    z-index: 10040 !important;

    padding: 6px 8px !important;
    gap: 6px !important;
    border-radius: 0 !important;
  }

  .editor-toolbar-esquerda {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  .editor-toolbar button {
    padding: 8px 10px !important;
    font-size: 13px !important;
    border-right: 1px solid #ddd !important;
  }

  .editor-tbar-direita,
  .editor-toolbar-direita {
    width: 100% !important;
    justify-content: stretch !important;
  }

  #btn-export-pdf {
    width: 100% !important;
    padding: 10px 12px !important;
    font-size: 15px !important;
  }

  /* Remove empurrões visuais */
  .content {
    margin-top: 0 !important;
  }

  /* Editor: área útil no mobile */
  .editor-textarea {
    font-size: 16px !important;
    min-height: calc(100dvh - 56px - 44px - 52px - 72px) !important;
  }

  /* Evitar “vazamento” lateral */
  img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ===== Camadas (z-index) para drawers ===== */
  #mobileBackdrop {
    z-index: 20000 !important;
  }
  .sidebar,
  .chatbot {
    z-index: 20010 !important;
  }

  /* Dock sempre na frente dos drawers */
  #mobileDock {
    z-index: 30000 !important;
  }

  /* Scroll com sticky headers (âncoras/scrollIntoView) */
  html {
    scroll-padding-top: 110px !important; /* 56 + 44 + ~10 */
  }
}

/* ============================================================
   WIZARD / MODAL DE CRÉDITOS (CORRIGIDO)
   ============================================================ */

/* ============================================================
   WIZARD / MODAL DE CRÉDITOS (AJUSTADO)
   ============================================================ */

#creditWizard.modal-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 40000 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: none;
}

#creditWizard.modal-overlay:not(.hidden) {
    display: flex !important;
}

/* Card mais largo e com respiro interno para o botão */
#creditWizard .modal-card {
    width: 96vw !important; /* Aumentado para ocupar mais espaço lateral */
    max-width: 520px !important;
    max-height: 85dvh !important;
    background: #fff !important;
    border-radius: 16px !important;
    position: relative !important;
    margin: auto !important;
    padding: 20px 15px 15px 15px !important; /* Padding superior maior para o botão */
    
    /* Scroll e Trava de segurança */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    transform: none !important;
}

/* Botão de fechar posicionado no canto superior direito */
#creditWizard .fechar-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 50 !important;
    background: #f8f9fa !important;
    border: 1px solid #ddd !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* Ajuste do Grid interno para aproveitar a largura nova */
#pc-pricing-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    padding-top: 10px !important;
}

/* ============================================================
   AJUSTE WIZARD NOVO DOCUMENTO (Patch Mobile)
   ============================================================ */

@media (max-width: 770px) {
    /* Ajusta o container que envolve as ilustrações e os forms */
    #newTccFormContainer {
        display: none; 
        position: fixed !important;
        /* Preenchimento total absoluto */
        inset: 0 !important; 
        width: 100% !important;
        height: 100% !important;
        height: -webkit-fill-available !important; /* Altura real ignorando barras do navegador */
        z-index: 50000 !important;
        background: #fff !important;
        
        /* BLOQUEIO DE GESTO DE SISTEMA */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: none !important; /* Bloqueia o "pull-to-refresh" */
        overscroll-behavior: none !important;
        touch-action: pan-y !important; /* Impede que o navegador arraste o container inteiro */
    }

    /* Esconde a imagem lateral no mobile para dar espaço ao formulário */
    #newTccFormContainer .left-side {
        display: none !important;
    }

   /* Garante que o conteúdo interno não seja arrastado */
    .new-doc-form-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 60px 20px 30px 20px !important; /* Espaço para o botão fechar */
        box-shadow: none !important;
        min-height: 101%; /* Força o scroll a existir para o overscroll-behavior funcionar */
        display: flex;
        flex-direction: column;
    }

    /* Títulos dos passos do Wizard */
    .editor-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    /* Inputs e Textareas no mobile */
    .new-doc-form input, 
    .new-doc-form textarea, 
    .new-doc-form select {
        width: 100% !important;
        font-size: 16px !important; /* Evita zoom automático no iOS */
        margin-bottom: 15px !important;
        padding: 12px !important;
    }

    /* Botões do Wizard */
    .new-doc-form-wrapper .btn {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 14px !important;
        font-size: 16px !important;
    }

    /* Container de botões lado a lado (se houver) */
    .new-doc-form-wrapper div[style*="flex-direction: row"] {
        flex-direction: column !important;
        gap: 10px !important;
    }

    /* Painel de Sugestões de Títulos */
    .sugestao-titulo {
        padding: 15px !important;
        font-size: 14px !important;
        margin-bottom: 10px !important;
        border-radius: 10px !important;
    }

    /* Botão fechar sempre fixo para não sumir ao rolar */
    #newTccFormContainer .fechar-btn {
        position: fixed !important;
        top: 15px !important;
        right: 15px !important;
        z-index: 35001 !important;
        background: rgba(240, 240, 240, 0.9) !important;
        border-radius: 50% !important;
        width: 35px !important;
        height: 35px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 24px !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    }

    /* Ajuste para o formulário específico de "Informações da Capa" */
    #capa-info .new-doc-form {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 770px) {
    /* Impede que o fundo se mova, eliminando o efeito elástico do navegador */
    .new-doc-form-wrapper {
        min-height: 100.5% !important; /* Força o motor de scroll a estar sempre ativo */
        padding-bottom: 80px !important;
    }

    /* Trava o Body de forma agressiva */
    body.wizard-open {
        overflow: hidden !important;
        height: 100vh !important;
        height: -webkit-fill-available !important;
    }

    /* O container do wizard preenche o espaço e não deixa o scroll vazar */
    #newTccFormContainer {
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }
}

@media (max-width: 770px) {
    /* Container principal: Agora atua como a camada fixa e centralizadora */
    #newTccFormContainer {
        display: none; 
        position: fixed !important;
        inset: 0 !important; 
        width: 100vw !important;
        height: 100dvh !important;
        z-index: 50000 !important;
        background: rgba(0, 0, 0, 0.6) !important; /* Fundo escurecido igual aos créditos */
        
        /* CENTRALIZAÇÃO IGUAL AO WIZARD DE CRÉDITOS */
        display: none; /* Alterado via JS */
        align-items: center !important;
        justify-content: center !important;
        touch-action: none; /* Bloqueia o arrastar do fundo */
    }

    /* Quando o JS ativa o formulário */
    #newTccFormContainer[style*="display: flex"],
    #newTccFormContainer[style*="display: flex"] {
        display: flex !important;
    }

    /* O Card Branco interno (onde estão os inputs) */
    .new-doc-form-wrapper {
        width: 96vw !important; /* Mesma largura dos créditos */
        max-width: 520px !important;
        max-height: 85dvh !important; /* Garante que o card nunca suma da tela */
        background: #fff !important;
        border-radius: 16px !important;
        position: relative !important;
        margin: auto !important;
        padding: 40px 20px 20px 20px !important;
        
        /* TRAVA DE ROLAGEM IGUAL AOS CRÉDITOS */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
    }

    /* Esconde a imagem lateral para o card não ficar "fino" */
    #newTccFormContainer .left-side {
        display: none !important;
    }

    /* Botão fechar (X) fixo no topo do card branco */
    #newTccFormContainer .fechar-btn {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 50001 !important;
        background: #f8f9fa !important;
        border: 1px solid #ddd !important;
        border-radius: 50% !important;
        width: 36px !important;
        height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}