/*
===============================================================================
  GENESIS AI v2.0 // MOBILE-FIRST STYLES
===============================================================================
  Arquivo: css/mobile.css
  Descrição: Estilos mobile, menu sanduíche, PWA, safe areas iOS

  ORGANIZAÇÃO:
  1.  SAFE AREAS (iPhone notch)
  2.  HEADER MOBILE (botão sanduíche + logo)
  3.  DRAWER MENU (menu lateral deslizante)
  4.  OVERLAY
  5.  CONTEÚDO DO DRAWER (perfil, itens, submenus)
  6.  BOTTOM NAV (navegação inferior opcional)
  7.  AJUSTES MOBILE (chat, input, esfera)
  8.  MODAL DE INSTALAÇÃO PWA (Android)
  9.  BOTTOM SHEET iOS (tutorial Safari)
  10. ANIMAÇÕES E UTILITÁRIOS
  11. MODO STANDALONE (quando instalado)
*/

/* ==========================================================================
   1. SAFE AREAS - Respeita notch/barras do iPhone e Android
   ========================================================================== */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --mobile-header-h: 56px;
  --mobile-bottom-h: 72px;
  --drawer-w: 86vw;
  --drawer-max: 360px;
  --touch-target: 48px;
}


/* ==========================================================================
   2. HEADER MOBILE - Barra superior com menu sanduíche e logo
   Visível apenas em telas pequenas
   ========================================================================== */
.mobile-header{
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(var(--mobile-header-h) + var(--safe-top));
  padding: var(--safe-top) 12px 0;
  background: linear-gradient(180deg, rgba(0,10,25,.98), rgba(0,10,25,.9));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0,240,255,.2);
  z-index: 50;
  align-items: center;
  justify-content: space-between;
}

.mobile-header .m-logo{
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--pri);
  text-shadow: 0 0 8px var(--pri);
  display: flex;
  align-items: center;
  gap: 8px;                   /* espaço entre o ícone IA e o texto Genesis */
}
.mobile-header .m-logo span{ color: var(--sec); }

/* Logo imagem no header mobile - altura compacta */
.mobile-header .m-logo .logo-img{
  height: 30px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(0,240,255,.4));
}

/* Botão sanduíche animado (3 linhas vira X) */
.hamburger{
  width: var(--touch-target);
  height: var(--touch-target);
  background: rgba(0,240,255,.08);
  border: 1px solid rgba(0,240,255,.3);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .3s;
}
.hamburger:active{ transform: scale(0.94); }
.hamburger span{
  position: absolute;
  display: block;
  width: 22px;
  height: 2px;
  background: var(--pri);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.65,0,.35,1), opacity .2s, top .35s;
  box-shadow: 0 0 4px var(--pri);
}
.hamburger span:nth-child(1){ top: 16px; }
.hamburger span:nth-child(2){ top: 23px; }
.hamburger span:nth-child(3){ top: 30px; }
.hamburger.open span:nth-child(1){ top: 23px; transform: rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity: 0; }
.hamburger.open span:nth-child(3){ top: 23px; transform: rotate(-45deg); }

/* Status compacto à direita do header */
.mobile-header .m-status{
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Orbitron';
  font-size: 10px;
  color: var(--pri);
  letter-spacing: 1.5px;
}
.mobile-header .m-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #0f8; box-shadow: 0 0 6px #0f8;
  animation: pulse 2s infinite;
}

/* Botão de tela cheia no canto direito do mobile-header
   (aparece junto com o header em mobile e em modos widget/iframe desktop) */
.mobile-header .m-fullscreen-btn{
  width: 36px;
  height: 36px;
  margin-left: 10px;
  background: rgba(0, 240, 255, .08);
  border: 1px solid rgba(0, 240, 255, .3);
  color: var(--pri);
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .2s;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
}
.mobile-header .m-fullscreen-btn:hover{
  background: rgba(0, 240, 255, .2);
  box-shadow: 0 0 12px rgba(0, 240, 255, .5);
  transform: scale(1.05);
}
.mobile-header .m-fullscreen-btn:active{
  transform: scale(0.94);
}


/* ==========================================================================
   3. DRAWER - Menu lateral deslizante
   ========================================================================== */
.drawer{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--drawer-w);
  max-width: var(--drawer-max);
  background: linear-gradient(180deg, rgba(0,15,35,.98), rgba(0,5,16,.98));
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-right: 1px solid rgba(0,240,255,.25);
  box-shadow: 4px 0 40px rgba(0,240,255,.2);
  z-index: 1000;
  transform: translateX(-105%);
  transition: transform .38s cubic-bezier(.32,.72,0,1);
  display: flex;
  flex-direction: column;
  padding: calc(var(--safe-top) + 16px) calc(var(--safe-left) + 16px) calc(var(--safe-bottom) + 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  will-change: transform;
}
.drawer.open{ transform: translateX(0); }


/* ==========================================================================
   4. OVERLAY - Fundo escuro atrás do drawer (clica para fechar)
   ========================================================================== */
.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,5,16,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.overlay.active{ opacity: 1; pointer-events: auto; }


/* ==========================================================================
   5. CONTEÚDO DO DRAWER
   ========================================================================== */

/* Topo do drawer: logo + botão fechar */
.drawer-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0,240,255,.15);
  margin-bottom: 12px;
}
.drawer-head .logo{
  font-family: 'Orbitron';
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 3px;
  color: var(--pri);
  text-shadow: 0 0 8px var(--pri);
  display: flex;
  align-items: center;
  gap: 10px;                  /* espaço entre o ícone IA e o texto Genesis */
}
.drawer-head .logo span{ color: var(--sec); }

/* Logo imagem no topo do drawer */
.drawer-head .logo .logo-img{
  height: 34px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 8px rgba(0,240,255,.4));
}

.drawer-close{
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid rgba(0,240,255,.3);
  color: var(--pri);
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: .2s;
}
.drawer-close:active{ transform: scale(0.92); background: rgba(0,240,255,.15); }

/* Área do perfil do usuário */
.drawer-profile{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(0,240,255,.1), rgba(255,0,255,.05));
  border: 1px solid rgba(0,240,255,.25);
  border-radius: 14px;
  margin-bottom: 16px;
}
.drawer-profile .avatar{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pri), var(--sec));
  color: #000;
  font-family: 'Orbitron';
  font-weight: 900;
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 12px rgba(0,240,255,.5);
}
.drawer-profile .info{ flex: 1; min-width: 0; }
.drawer-profile .name{
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.drawer-profile .tier{
  font-size: 11px;
  color: var(--pri);
  letter-spacing: 1.5px;
  font-family: 'Orbitron';
}

/* Botão de ação principal em destaque */
.drawer-cta{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--pri), var(--sec));
  color: #000;
  border: none;
  border-radius: 12px;
  font-family: 'Orbitron';
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,240,255,.35);
  transition: .25s;
  min-height: var(--touch-target);
}
.drawer-cta:active{ transform: scale(0.97); }

/* Seções do drawer */
.drawer-section{
  margin-bottom: 10px;
}
.drawer-section-title{
  font-family: 'Orbitron';
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(0,240,255,.7);
  padding: 10px 6px 6px;
  text-transform: uppercase;
}

/* ── ATALHOS PRIORITÁRIOS - grid 3×2 com os botões da barra superior do
   desktop (Chat, Escuta, Câmera, AIoT, Tema, Tela cheia) destacados no
   topo do drawer mobile. ──────────────────────────────────────────── */
.drawer-section-quick{
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.15);
  margin-bottom: 12px;
}
.drawer-quick-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 4px 2px 2px;
}
.drawer-quick-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  background: rgba(0, 240, 255, 0.06);
  border: 1px solid rgba(0, 240, 255, 0.25);
  border-radius: 10px;
  color: var(--pri);
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  min-height: var(--touch-target);
  transition: background .18s, border-color .18s, transform .15s;
}
.drawer-quick-btn:active{
  background: rgba(0, 240, 255, 0.18);
  border-color: rgba(0, 240, 255, 0.5);
  transform: scale(0.96);
}
.drawer-quick-btn svg{
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.45));
}
.drawer-quick-btn span{
  font-size: 10px;
  text-align: center;
  letter-spacing: 0.6px;
  line-height: 1;
}
/* Botão AIoT - texto na fonte da logo (sem ícone) */
.drawer-quick-btn .drawer-quick-label-fonted{
  font-family: 'Johnny Fever', 'Orbitron', sans-serif;
  font-size: 22px;
  letter-spacing: 1.5px;
  line-height: 1;
  margin-bottom: 2px;
}
/* Visibilidade dos ícones de tema (mesmo padrão do toggle no desktop) */
.drawer-quick-btn .theme-icon{ display: none; }
body:not(.light-theme) .drawer-quick-btn .theme-icon-dark{ display: block; }
body.light-theme .drawer-quick-btn .theme-icon-light{ display: block; }

/* Tema claro */
body.light-theme .drawer-quick-btn{
  background: rgba(0, 168, 222, 0.08);
  border-color: rgba(0, 136, 200, 0.35);
  color: #003a5c;
}
body.light-theme .drawer-quick-btn svg{
  filter: drop-shadow(0 0 3px rgba(0, 168, 222, 0.35));
}
body.light-theme .drawer-quick-btn:active{
  background: rgba(0, 168, 222, 0.18);
  border-color: #0088c8;
}

/* Item do drawer (link principal) */
.drawer-item{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: var(--touch-target);
  padding: 12px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #e0f7ff;
  cursor: pointer;
  font-family: 'Rajdhani';
  font-size: 15px;
  letter-spacing: .5px;
  text-align: left;
  transition: .2s;
  position: relative;
}
.drawer-item:active{
  background: rgba(0,240,255,.1);
  border-color: rgba(0,240,255,.3);
}
.drawer-item .d-icon{
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,240,255,.08);
  border-radius: 10px;
  font-size: 16px;
  flex-shrink: 0;
  transition: .2s;
}
.drawer-item:active .d-icon{
  background: rgba(0,240,255,.25);
  box-shadow: 0 0 12px rgba(0,240,255,.4);
}
.drawer-item .d-label{ flex: 1; }
.drawer-item .d-chevron{
  font-size: 12px;
  color: rgba(0,240,255,.5);
  transition: transform .3s;
}

/* Submenu expansível */
.drawer-sub{
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
  padding-left: 44px;
}
.drawer-item.expanded + .drawer-sub{ max-height: 420px; }
.drawer-item.expanded .d-chevron{ transform: rotate(90deg); }

.drawer-sub-item{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  color: #b0e8f0;
  font-family: 'Rajdhani';
  font-size: 13px;
  cursor: pointer;
  border-radius: 8px;
  text-align: left;
  transition: .2s;
}
.drawer-sub-item:active{
  background: rgba(0,240,255,.08);
  color: var(--pri);
}
.drawer-sub-item:hover{
  background: rgba(0,240,255,.06);
  color: var(--pri);
}

/* SVG dentro do drawer (submenus e itens principais)
   Usa mesma aparência do menu inicial: line-art ciano + glow */
.drawer-sub-item .mod-icon{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.drawer-item .d-icon .mod-icon{
  width: 18px;
  height: 18px;
}
.drawer-cta .mod-icon{
  width: 18px;
  height: 18px;
  stroke: #000;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}

/* Rodapé do drawer (versão + botão instalar) */
.drawer-foot{
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(0,240,255,.15);
  text-align: center;
  font-family: 'Orbitron';
  font-size: 10px;
  color: rgba(0,240,255,.5);
  letter-spacing: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* Linha horizontal que agrupa ícone IA + texto Genesis no rodapé do drawer */
.drawer-foot-brand{
  display: flex;
  align-items: center;
  gap: 10px;
}
.drawer-foot-logo{
  max-width: 140px;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.35));
  opacity: 0.85;
  transition: opacity .25s, filter .25s;
}
.drawer-foot-logo:hover{
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(0, 240, 255, 0.65));
}
.drawer-foot-version{
  font-size: 9px;
  color: rgba(0,240,255,.4);
  letter-spacing: 3px;
}


/* ==========================================================================
   6. BOTTOM NAV - Navegação inferior (opcional, aparece só no mobile)
   ========================================================================== */
.bottom-nav{
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--mobile-bottom-h) + var(--safe-bottom));
  padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
  background: linear-gradient(0deg, rgba(0,10,25,.98), rgba(0,10,25,.85));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0,240,255,.2);
  z-index: 40;
  justify-content: space-around;
  align-items: center;
}
.bottom-nav-item{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--touch-target);
  background: transparent;
  border: none;
  color: rgba(0,240,255,.6);
  font-family: 'Rajdhani';
  font-size: 10px;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: .2s;
  padding: 8px 4px;
}
.bottom-nav-item .bn-icon{ font-size: 20px; line-height: 1; }
.bottom-nav-item.active{ color: var(--pri); }
.bottom-nav-item.active .bn-icon{ filter: drop-shadow(0 0 4px var(--pri)); }
.bottom-nav-item.primary{
  color: var(--sec);
  transform: translateY(-6px);
}
.bottom-nav-item.primary .bn-icon{
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--pri), var(--sec));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #000;
  box-shadow: 0 6px 20px rgba(255,0,255,.4);
}


/* ==========================================================================
   7. AJUSTES MOBILE - Chat, input, esfera
   Apenas em telas ≤768px
   ========================================================================== */
@media (max-width: 768px){
  /* Mostra header e bottom nav mobile */
  .mobile-header{ display: flex; }
  .bottom-nav{ display: flex; }

  /* Oculta HUDs desktop */
  .hud-top,
  .hud-left,
  .hud-right{ display: none !important; }

  /* Chat ocupa tela inteira menos header e bottom.
     Sem padding lateral: as mensagens encostam nas bordas (user à direita,
     IA à esquerda). Mantemos só o safe-area inset (notch/curva da tela). */
  .chat-container{
    left: 0 !important;
    right: 0 !important;
    top: calc(var(--mobile-header-h) + var(--safe-top)) !important;
    bottom: calc(var(--mobile-bottom-h) + var(--safe-bottom) + 8px) !important;
    padding: 0 var(--safe-right) 0 var(--safe-left);
  }

  /* Sem padding horizontal na área scrollável - bolhas vão até a borda */
  .chat-msgs{ padding: 12px 0; }

  /* Mensagens maiores e melhores para leitura.
     max-width: 92% deixa apenas um respiro pra mostrar que existe outro
     lado (e onde encosta a bolha oposta). Bolhas com margin: 0 para
     encostarem na borda - alinhamento horizontal vem do margin-left/right
     auto definido em styles.css (user→direita, ai→esquerda). */
  .msg{
    max-width: 92%;
    font-size: 15px;
    padding: 12px 15px;
    border-radius: 16px;
  }
  .msg.user{
    margin-right: 0;                 /* Encosta na borda direita */
    border-bottom-right-radius: 4px;
  }
  .msg.ai{
    margin-left: 0;                  /* Encosta na borda esquerda */
    border-bottom-left-radius: 4px;
  }
  .msg.system{
    max-width: 85%;                  /* Sistema centralizado fica mais compacto */
    font-size: 10px;
  }

  /* HUD Inferior vira input flutuante acima do bottom nav */
  .hud-bottom{
    height: auto;
    padding: 10px 12px;
    gap: 8px;
    bottom: calc(var(--mobile-bottom-h) + var(--safe-bottom));
    border-top: 1px solid rgba(0,240,255,.15);
    background: linear-gradient(0deg, rgba(0,10,25,.95), rgba(0,10,25,.7));
  }
  #cmdInput{
    padding: 12px 14px;
    font-size: 15px;
    border-radius: 24px;
  }
  .btn-ctrl{
    width: 44px;
    height: 44px;
    font-size: 17px;
  }
  /* Stop e anexar somem no mobile para economizar espaço (voltam via menu) */
  .hud-bottom .btn-stop,
  .hud-bottom button[onclick="attachFile()"]{ display: none; }

  /* Esfera 3D menor e mais alta na tela */
  #three-canvas{ top: var(--mobile-header-h); }

  /* Status no rodapé do chat mobile (acima do hud-bottom + bottom-nav) */
  .ai-status{
    bottom: calc(var(--mobile-bottom-h) + var(--safe-bottom) + 72px) !important;
  }
  .ai-status-text{
    font-size: 10px;
    letter-spacing: 4px;
    padding: 5px 14px;
  }

  /* Audio viz acima do status mobile */
  .audio-viz{
    bottom: calc(var(--mobile-bottom-h) + var(--safe-bottom) + 112px) !important;
  }

  /* Notificações acima do bottom nav */
  .notifs{
    top: auto !important;
    right: 12px !important;
    left: 12px;
    bottom: calc(var(--mobile-bottom-h) + var(--safe-bottom) + 80px);
  }
  .notif{ max-width: none; }

  /* Modal de config mobile-friendly */
  .modal-box{
    min-width: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 20px 18px calc(20px + var(--safe-bottom));
    margin-top: auto;
    max-height: 92vh;
  }
  .modal{ align-items: flex-end; }
  .modal-row{ flex-wrap: wrap; }
  .modal-row label{ flex: 1 1 100%; margin-bottom: 6px; font-size: 12px; }
  .modal-row input[type=text],
  .modal-row input[type=file]{ flex: 1 1 100%; margin-left: 0; }

  /* Share screen vai para o topo */
  .share-screen{
    top: calc(var(--mobile-header-h) + var(--safe-top) + 8px);
    left: 8px;
    width: 160px;
    height: 100px;
  }
}


/* ==========================================================================
   8. MODAL DE INSTALAÇÃO PWA (Android + beforeinstallprompt)
   ========================================================================== */
.install-banner{
  position: fixed;
  bottom: calc(var(--mobile-bottom-h) + var(--safe-bottom) + 12px);
  left: 12px;
  right: 12px;
  z-index: 200;
  background: linear-gradient(135deg, rgba(0,30,60,.98), rgba(20,0,40,.98));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0,240,255,.4);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 10px 40px rgba(0,240,255,.3);
  display: none;
  align-items: center;
  gap: 12px;
  transform: translateY(110%);
  opacity: 0;
  transition: transform .4s cubic-bezier(.32,.72,0,1), opacity .3s;
}
.install-banner.show{
  display: flex;
  transform: translateY(0);
  opacity: 1;
}
.install-banner .ib-icon{
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--pri), var(--sec));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,240,255,.4);
}
.install-banner .ib-text{ flex: 1; min-width: 0; }
.install-banner .ib-title{
  font-family: 'Orbitron';
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1.5px;
  margin-bottom: 3px;
}
.install-banner .ib-desc{
  font-size: 12px;
  color: rgba(255,255,255,.7);
  line-height: 1.3;
}
.install-banner .ib-actions{
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.install-banner .ib-btn{
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  font-family: 'Orbitron';
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: .2s;
  min-height: 36px;
  white-space: nowrap;
}
.install-banner .ib-btn.primary{
  background: linear-gradient(135deg, var(--pri), var(--sec));
  color: #000;
  box-shadow: 0 2px 10px rgba(0,240,255,.4);
}
.install-banner .ib-btn.primary:active{ transform: scale(0.95); }
.install-banner .ib-btn.ghost{
  background: transparent;
  color: rgba(255,255,255,.6);
  font-size: 10px;
  min-height: 28px;
  padding: 4px 8px;
}


/* ==========================================================================
   9. BOTTOM SHEET iOS - Tutorial de instalação Safari
   ========================================================================== */
.ios-sheet-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,5,16,.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1500;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.ios-sheet-backdrop.show{ opacity: 1; pointer-events: auto; }

.ios-sheet{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1600;
  background: linear-gradient(180deg, rgba(0,20,40,.98), rgba(0,10,25,.98));
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  border-top: 1px solid rgba(0,240,255,.3);
  box-shadow: 0 -10px 40px rgba(0,240,255,.2);
  padding: 14px 20px calc(24px + var(--safe-bottom));
  transform: translateY(100%);
  transition: transform .42s cubic-bezier(.32,.72,0,1);
  max-height: 85vh;
  overflow-y: auto;
}
.ios-sheet.show{ transform: translateY(0); }

.ios-sheet-handle{
  width: 42px; height: 5px;
  background: rgba(0,240,255,.3);
  border-radius: 3px;
  margin: 0 auto 16px;
}
.ios-sheet h3{
  font-family: 'Orbitron';
  font-size: 16px;
  font-weight: 900;
  color: var(--pri);
  text-align: center;
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-shadow: 0 0 8px var(--pri);
}
.ios-sheet .sub{
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,.7);
  margin-bottom: 20px;
}

.ios-steps{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.ios-step{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(0,240,255,.06);
  border: 1px solid rgba(0,240,255,.2);
  border-radius: 14px;
}
.ios-step-num{
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pri), var(--sec));
  color: #000;
  font-family: 'Orbitron';
  font-weight: 900;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.ios-step-text{ flex: 1; }
.ios-step-text strong{
  display: block;
  color: #fff;
  font-size: 14px;
  margin-bottom: 3px;
  font-weight: 700;
}
.ios-step-text span{
  color: rgba(255,255,255,.7);
  font-size: 12px;
  line-height: 1.4;
}
.ios-step-icon{
  font-size: 20px;
  color: var(--pri);
}

.ios-sheet-close{
  width: 100%;
  padding: 13px;
  background: rgba(0,240,255,.1);
  border: 1px solid rgba(0,240,255,.3);
  color: var(--pri);
  border-radius: 12px;
  font-family: 'Orbitron';
  font-size: 12px;
  letter-spacing: 2px;
  cursor: pointer;
  min-height: var(--touch-target);
}


/* ==========================================================================
   10. ANIMAÇÕES E UTILITÁRIOS
   ========================================================================== */
@keyframes slideUpFade{
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Impede scroll quando drawer/modal aberto */
body.no-scroll{ overflow: hidden; position: fixed; width: 100%; }


/* ==========================================================================
   11.5 MODOS DESKTOP COM MENUS OCULTOS (Widget, Iframe 1/2)
   Quando o usuário entra em widget-mode, iframe-mode ou iframe-mode-2 no
   DESKTOP, os painéis laterais do HUD ficam ocultos.
   Mostra o mobile-header (hamburger + logo) para acessar todos os menus
   via drawer lateral, preservando acesso às funcionalidades.
   ========================================================================== */
@media (min-width: 769px){
  /* Ativa mobile-header quando em modo com HUD lateral oculto */
  body.widget-mode .mobile-header,
  body.iframe-mode .mobile-header,
  body.iframe-mode-2 .mobile-header{
    display: flex;
  }

  /* widget-mode e iframe-mode-2 ainda mostram hud-top por padrão
     → oculta para evitar duplicação com mobile-header
     (iframe-mode já oculta hud-top via styles.css) */
  body.widget-mode .hud-top,
  body.iframe-mode-2 .hud-top{
    display: none;
  }

  /* Ajusta chat-container para começar abaixo do mobile-header
     Sobrescreve top: 70px (default) e top: 0 (iframe-mode) */
  body.widget-mode .chat-container,
  body.iframe-mode .chat-container,
  body.iframe-mode-2 .chat-container{
    top: calc(var(--mobile-header-h) + var(--safe-top)) !important;
  }

  /* widget-mode: chat usa margem pequena, input ocupa toda largura */
  body.widget-mode .chat-container{
    left: 10px !important;
    right: 10px !important;
    bottom: 100px !important;
  }

  /* iframe-mode-2: hud-right permanece visível (métricas)
     chat entre hamburger-header e hud-right */
  body.iframe-mode-2 .chat-container{
    left: 10px !important;
    right: 290px !important;
    bottom: 100px !important;
  }

  /* iframe-mode: chat full screen */
  body.iframe-mode .chat-container{
    left: 0 !important;
    right: 0 !important;
    bottom: 90px !important;
  }

  /* Visualizador de áudio no centro */
  body.widget-mode .audio-viz,
  body.iframe-mode .audio-viz,
  body.iframe-mode-2 .audio-viz{
    bottom: 110px;
  }

  /* Notificações posicionadas corretamente */
  body.widget-mode .notifs,
  body.iframe-mode .notifs,
  body.iframe-mode-2 .notifs{
    top: calc(var(--mobile-header-h) + var(--safe-top) + 12px) !important;
    right: 15px !important;
  }
}


/* ==========================================================================
   11. MODO STANDALONE - Quando app foi instalado
   Usa display-mode: standalone detectado via media query
   ========================================================================== */
@media (display-mode: standalone), (display-mode: fullscreen){
  /* Ajustes quando rodando como app instalado */
  .mobile-header{
    background: linear-gradient(180deg, rgba(0,10,25,1), rgba(0,10,25,.95));
  }
  /* Oculta prompts de instalação (já está instalado) */
  .install-banner,
  .ios-sheet,
  .ios-sheet-backdrop{ display: none !important; }
}


/* ==========================================================================
   ACESSIBILIDADE
   ========================================================================== */
.hamburger:focus-visible,
.drawer-close:focus-visible,
.drawer-item:focus-visible,
.bottom-nav-item:focus-visible,
.install-banner .ib-btn:focus-visible,
.ios-sheet-close:focus-visible{
  outline: 2px solid var(--pri);
  outline-offset: 2px;
}

/* Reduz motion se usuário preferir */
@media (prefers-reduced-motion: reduce){
  .drawer, .overlay, .install-banner, .ios-sheet, .ios-sheet-backdrop,
  .hamburger span, .drawer-item, .bottom-nav-item{
    transition: none !important;
    animation: none !important;
  }
}