/* ============================================================
   dotia-mobile.css (.dotIA) — DESIGN MOBILE ADITIVO
   Nao altera o layout desktop. So atua em <=860px:
   - sidebar vira drawer off-canvas (desliza da esquerda)
   - botao hamburguer flutuante (.dotia-fab)
   - overlay escuro por tras
   - touch-friendly: alvos maiores, padding generoso
   - content full-width, fontes/espacamentos ajustados
   Mantem desktop intacto (acima de 860px nao faz nada).
   ============================================================ */

.dotia-fab{display:none;}
.dotia-overlay{display:none;}
.dotia-bottomnav{display:none;}

@media (max-width: 860px){
  /* ===== DRAWER OFF-CANVAS ===== */
  .sidebar{
    position:fixed !important;
    top:0; left:0; bottom:0;
    width:280px; max-width:84vw;
    z-index:99995;
    transform:translateX(-105%);
    transition:transform .28s cubic-bezier(.2,.8,.2,1);
    box-shadow:14px 0 40px rgba(0,0,0,.55);
    display:flex !important;
  }
  .sidebar.dotia-open{transform:translateX(0);}
  .sidebar .nav-item{padding:14px 18px;font-size:14px;min-height:48px;}
  .sidebar .nav-item .icon{font-size:18px;width:26px;}
  .sidebar-footer{padding:14px 16px;}

  /* overlay escuro */
  .dotia-overlay{
    display:none;
    position:fixed; inset:0; z-index:99994;
    background:rgba(0,0,0,.55);
    backdrop-filter:blur(2px);
    opacity:0; transition:opacity .25s;
  }
  .dotia-overlay.show{display:block;opacity:1;}

  /* ===== BOTAO HAMBURGUER ===== */
  .dotia-fab{
    display:flex;
    position:fixed; top:14px; left:14px; z-index:99996;
    width:46px; height:46px;
    align-items:center; justify-content:center;
    border-radius:12px;
    background:var(--panel,#0a0a0a);
    border:1px solid var(--border,#1a1a1a);
    color:var(--text,#e0e0e0);
    font-size:20px; cursor:pointer;
    box-shadow:0 4px 18px rgba(0,0,0,.4),0 0 0 1px rgba(103,232,249,.15);
    transition:transform .15s ease,box-shadow .2s;
    user-select:none;
  }
  .dotia-fab:active{transform:scale(.92);}
  .dotia-fab .bars,.dotia-fab .bars i{display:block;width:20px;height:2px;background:currentColor;border-radius:2px;}
  .dotia-fab .bars{display:flex;flex-direction:column;gap:4px;}
  body.theme-light .dotia-fab{background:#fff;border-color:#d4dae0;color:#1a1f24;box-shadow:0 4px 18px rgba(0,0,0,.12),0 0 0 1px rgba(0,150,200,.2);}

  /* ===== LAYOUT ===== */
  .app{display:block !important;}
  .main{width:100%;min-height:100vh;}
  .topbar{
    position:sticky; top:0; z-index:50;
    padding:10px 14px 10px 66px !important; /* espaco para o fab */
    flex-wrap:wrap; gap:8px;
  }
  .topbar h1{font-size:16px !important;}
  .content{padding:14px !important;width:100%;}
  .hero{flex-direction:column;align-items:flex-start !important;}
  .hero h1{font-size:18px !important;}

  /* ===== GRIDS -> 1 coluna ===== */
  .stat-grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr !important;}
  .stat-card{padding:12px;}
  .stat-card .v{font-size:20px !important;}

  /* ===== TABELAS scroll horizontal ===== */
  .data-table,.scroll-tb,table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{min-width:560px;}
  .data-table thead,.data-table tbody{display:table;width:100%;}

  /* ===== CARDS / FORMS ===== */
  .card{padding:12px !important;}
  .card-h{flex-wrap:wrap;gap:8px;}
  .login-box{width:94vw !important;padding:24px 18px !important;}
  .scan-type{grid-template-columns:1fr !important;}
  .form-group input,.form-group select,.form-group textarea{font-size:15px !important;padding:10px 12px !important;}
  .btn,.btn-sm{padding:10px 14px !important;font-size:13px !important;min-height:42px;}

  /* ===== CHAT / AI ===== */
  .ai-msg{max-width:92% !important;}
  .ai-layout{display:flex !important;flex-direction:column !important;height:auto !important;}
  .ai-chat-area{min-height:50vh;}
  .ai-sidebar{border-left:none !important;border-top:1px solid var(--border);max-height:50vh;order:2;}
  .orch-panel{width:100% !important;position:relative !important;transform:none !important;}
  pre,.terminal{font-size:10px !important;max-height:240px;}
  .ai-input{flex-wrap:wrap;}
  .ai-quick button{flex:1 1 auto;}

  /* ===== MEMBROS / PERFIL ===== */
  .members-grid,.mgrid{grid-template-columns:1fr 1fr !important;}
  .pinfo,.pstats{width:100% !important;}

  /* ===== FAB nao cobre conteudo critico ===== */
  .content > *:first-child{margin-top:0;}
  body{padding-bottom:20px;}

  /* partículas/ambient mais subteis em mobile (performance) */
  #dotia-particles{opacity:.35 !important;}
  #dotia-ambient::before{background-size:60px 60px !important;}

  /* ===== BOTTOM NAV BAR (premium) ===== */
  .dotia-bottomnav{
    display:flex !important;
    position:fixed; left:0; right:0; bottom:0; z-index:99993;
    height:62px; padding-bottom:env(safe-area-inset-bottom,0);
    background:var(--panel,#0a0a0a);
    border-top:1px solid var(--border,#1a1a1a);
    box-shadow:0 -8px 28px rgba(0,0,0,.4);
    justify-content:space-around; align-items:stretch;
    backdrop-filter:blur(10px);
  }
  .dotia-bn-item{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; color:var(--text-muted,#555); text-decoration:none;
    font-size:9px; font-family:var(--font);
    position:relative; transition:color .15s;
    -webkit-tap-highlight-color:transparent;
  }
  .dotia-bn-item .ic{font-size:19px; transition:transform .15s;}
  .dotia-bn-item .lb{font-size:9px; letter-spacing:.3px; text-transform:uppercase;}
  .dotia-bn-item.active{color:var(--accent,#00ff41);}
  .dotia-bn-item.active .ic{transform:translateY(-2px) scale(1.12);}
  .dotia-bn-item.active::before{content:'';position:absolute;top:0;width:26px;height:3px;border-radius:3px;background:var(--accent,#00ff41);box-shadow:0 0 10px var(--accent,#00ff41);}
  .dotia-bn-item:active .ic{transform:scale(.9);}
  body.theme-light .dotia-bottomnav{background:rgba(255,255,255,.95);border-color:#d4dae0;box-shadow:0 -8px 28px rgba(0,0,0,.1);}
  body.theme-light .dotia-bn-item{color:#6b7785;}
  body.theme-light .dotia-bn-item.active{color:#0284c7;}
  body.theme-light .dotia-bn-item.active::before{background:#0284c7;box-shadow:0 0 10px rgba(2,132,199,.5);}

  /* espaco para a bottom-nav no fundo do content */
  body.dotia-has-bn .main,body.dotia-has-bn .content,body.dotia-has-bn .app{padding-bottom:0;}
  body.dotia-has-bn{padding-bottom:62px;}
  body.dotia-has-bn .content{padding-bottom:20px !important;}

  /* fab vira X quando drawer aberto */
  .dotia-fab.dotia-fab-x .bars i:nth-child(1){transform:translateY(6px) rotate(45deg);}
  .dotia-fab.dotia-fab-x .bars i:nth-child(2){opacity:0;}
  .dotia-fab.dotia-fab-x .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
  .dotia-fab .bars i{transition:transform .2s,opacity .2s;}

  /* espaco para o fab no topo quando a pagina nao tem topbar */
  body.dotia-no-topbar .content{padding-top:64px !important;}
  body.dotia-no-topbar .main > div:first-child:not(.topbar){padding-top:8px;}
}

@media (max-width: 860px){
  /* garantir que o primeiro header/h1 de paginas sem topbar nao fica sob o fab */
  body.dotia-no-topbar h1:first-of-type,body.dotia-no-topbar .hero:first-child{padding-left:60px;}
}

@media (max-width: 480px){
  .stat-grid{grid-template-columns:1fr 1fr !important;}
  .members-grid,.mgrid{grid-template-columns:1fr !important;}
  .topbar h1{font-size:14px !important;}
  .dotia-fab{width:42px;height:42px;font-size:18px;top:10px;left:10px;}
  .topbar{padding:8px 12px 8px 58px !important;}
  .hero .meta{font-size:10px;gap:8px;flex-wrap:wrap;}
  .btn,.btn-sm{width:100%;}
  .scan-option{padding:12px;}
}

/* ============================================================
   REFORCO MOBILE (aditivo) — corrige quebras comuns em <=860px:
   - ai-messages com altura controlada (scroll interno, input acessivel)
   - elementos fixed no fundo (flash/toast/fabs de acao) acima da bottom-nav
   - modais e overlays acima de tudo
   - garante que o input do chat nao cola na bottom-nav
   ============================================================ */
@media (max-width: 860px){
  .ai-chat-area{min-height:calc(100vh - 180px) !important;}
  .ai-messages{max-height:52vh !important;}
  .ai-input{padding-bottom:14px !important;margin-bottom:0 !important;}
  /* body ja tem padding-bottom:62px (dotia-has-bn); reforgar para o input nao colar */
  body.dotia-has-bn .ai-layout{padding-bottom:0 !important;}

  /* elementos fixed bottom existentes: subir acima da bottom-nav (62px) */
  .flash,.dotia-toast,.toast,#toast{bottom:74px !important;z-index:99997 !important;}
  /* fabs de acao flotantes (ex: voltar ao topo, tema) que usem bottom */
  .fab-bottom,.scroll-top,.back-to-top,#scrollTop{bottom:74px !important;z-index:99997 !important;}
  /* botoes de acao flotante top-right (tema, etc.) nao colidem com fab (top-left) */
  #dotia-float-theme,[id$="-float-theme"]{top:14px !important;right:14px !important;z-index:99997 !important;}

  /* modais/dialogos acima da bottom-nav e do drawer */
  .modal,.modal-overlay,.dialog,.popup,[class*="modal"]{z-index:99999 !important;}
  .modal.open,.modal.show{z-index:100000 !important;}

  /* dropdowns/menus abertos do topbar nao ficam sob o fab */
  .dropdown,.menu-dropdown{z-index:99990 !important;}

  /* conteudo das tabelas nao colado na bottom-nav */
  .data-table,.scroll-tb{margin-bottom:10px;}

  /* imagens/perfis responsive */
  img{max-width:100% !important;height:auto !important;}
  .avatar-img,.banner-img{max-width:100% !important;}

  /* hero stats / cards de acao: botoes full-width empilhados */
  .hero-actions,.card-actions,.actions{flex-direction:column !important;align-items:stretch !important;}
  .hero-actions .btn,.card-actions .btn,.actions .btn{width:100% !important;}

  /* pre/code largos nao estouram o ecra */
  pre{white-space:pre-wrap !important;word-break:break-word !important;overflow-wrap:anywhere !important;}
  code{word-break:break-word !important;}

  /* sidebar drawer com scroll se for alta */
  .sidebar{overflow-y:auto !important;-webkit-overflow-scrolling:touch;}
  .sidebar .nav{overflow-y:auto !important;max-height:calc(100vh - 120px) !important;}
}

/* ===== TEMA CLARO: animacoes VISIVEIS (corrigido) ===== */
/* No tema claro o fundo e' claro; ajustar cores/opacidades dos efeitos neon. */
body.theme-light #dotia-cursor{
  border-color:rgba(0,130,180,.7);
  box-shadow:0 0 10px rgba(0,130,180,.4),inset 0 0 6px rgba(0,130,180,.25);
  mix-blend-mode:multiply;
}
body.theme-light #dotia-cursor.big{border-color:rgba(124,58,237,.6);box-shadow:0 0 16px rgba(124,58,237,.3);}
body.theme-light #dotia-spot{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(0,130,180,.10),transparent 60%);}
body.theme-light #dotia-particles{opacity:.4;}
body.theme-light #dotia-particles + * {} /* placeholder */
body.theme-light #dotia-grain{opacity:.06;mix-blend-mode:multiply;}
body.theme-light #dotia-ambient::before{background-image:linear-gradient(rgba(0,130,180,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,130,180,.07) 1px,transparent 1px);}
body.theme-light #dotia-ambient::after{background:linear-gradient(transparent,rgba(0,130,180,.10),transparent);}
body.theme-light #dotia-scroll{background:linear-gradient(90deg,#0284c7,#7c3aed,#db2777);box-shadow:0 0 8px rgba(0,130,180,.5);}
body.theme-light #dotia-boot{background:#eef2f6;color:#0284c7;}
body.theme-light #dotia-boot .boot-logo{color:#1a1f24;text-shadow:0 0 22px rgba(0,130,180,.25);}
body.theme-light #dotia-boot .boot-logo .a{color:#0284c7;}
body.theme-light #dotia-boot .boot-term{color:#1a1f24;}
body.theme-light #dotia-boot .boot-term .cur{background:#0284c7;}
body.theme-light #dotia-boot .boot-bar{background:rgba(0,130,180,.18);}
body.theme-light #dotia-pagefx{background:#eef2f6;}
body.theme-light #dotia-pagefx::before{color:#0284c7;text-shadow:0 0 30px rgba(0,130,180,.3);}
body.theme-light .dotia-loader{color:#6b7785;}
body.theme-light .dotia-loader .sp{border-color:rgba(0,130,180,.25);border-top-color:#0284c7;}
body.theme-light .dotia-loader .bars i{background:#0284c7;}
body.theme-light .dotia-glitch:hover::before{color:#0284c7;}
body.theme-light .dotia-glitch:hover::after{color:#db2777;}
body.theme-light .dotia-toast{background:rgba(255,255,255,.94);color:#1a1f24;box-shadow:0 10px 30px rgba(0,0,0,.12),0 0 22px rgba(0,130,180,.08);}
body.theme-light .nav-item.active::before{background:linear-gradient(180deg,#0284c7,#7c3aed);}

/* tilt/ripple no tema claro usam cores ja neutras, mas glare mais visivel */
body.theme-light .dotia-tilt::after{background:radial-gradient(180px circle at var(--tx,50%) var(--ty,50%),rgba(0,130,180,.14),transparent 60%);}
body.theme-light .dotia-ripple .rip{background:rgba(0,130,180,.25);}