/* =========================================================
   IA da Conquista — STYLE
   1) Variáveis / Base
   2) Layout global
   3) Componentes
   4) Landing & Páginas públicas
   5) Hard fix públicas
   6) Drawer mobile (nav recolhível) + HARD-FIX
   ========================================================= */

/* 1) Variáveis / Base ------------------------------------ */
:root{
  --bg:#0b1020; --panel:#131b34; --muted:#8aa0d6; --text:#e9eefc;
  --brand:#5b8cff; --brand2:#a87bff; --accent:#ff65a3; --ok:#2ecc71; --warn:#f1c40f; --err:#e74c3c;
  --border:#223058;
}
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  background:linear-gradient(145deg,var(--bg),#0f1430);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,sans-serif;
}
a{ color:#9ec1ff; text-decoration:none }
a:hover{ text-decoration:underline }

/* 2) Layout global --------------------------------------- */
.container{ max-width:1200px; margin:0 auto; padding:20px }
.main{ padding:24px }
.header{
  position:sticky; top:0; z-index:1100;
  background:rgba(15,21,48,.85); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; gap:16px; justify-content:space-between;
  min-height:64px; padding:10px 20px;
}
.footer{
  border-top:1px solid var(--border);
  padding:18px 20px; color:#8aa0d6; text-align:center;
}

/* 3) Componentes ----------------------------------------- */
.brand{ display:flex; align-items:center; gap:12px }
.brand-logo{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  background:linear-gradient(135deg,var(--brand),var(--accent));
  box-shadow:0 6px 20px rgba(91,140,255,.35);
}
.brand-title{ font-weight:800; letter-spacing:.3px }
.top-actions{ display:flex; align-items:center; gap:12px }

.help-icon{
  display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:10px; cursor:pointer; background:#0f1530
}
.help-icon svg{ width:18px; height:18px; fill:var(--text) }

.user{ position:relative }
.user-button{
  display:flex; align-items:center; gap:10px; padding:6px 10px;
  border:1px solid var(--border); border-radius:12px; background:#0f1530; cursor:pointer
}
.user-name{ max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--text) }
.avatar{
  width:28px; height:28px; border-radius:999px;
  background:linear-gradient(135deg,var(--brand2),var(--accent));
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; color:#fff;
}

.menu{
  position:absolute; right:0; top:50px;
  background:var(--panel); border:1px solid var(--border); border-radius:14px; min-width:230px;
  box-shadow:0 18px 50px rgba(0,0,0,.45); display:none;
}
.menu.open{ display:block }
.menu .section{ padding:10px 12px; border-bottom:1px solid var(--border); font-size:12px; color:var(--muted) }
.menu a,.menu button{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px;
  color:var(--text); background:none; border:none; text-align:left; font:inherit; cursor:pointer; border-radius:10px
}
.menu a:hover,.menu button:hover{ background:#0f1530 }

.grid{ display:grid; grid-template-columns:1fr; gap:20px }
@media(min-width:980px){ .grid{ grid-template-columns:280px 1fr } }

.nav{
  position:sticky; top:84px;
  background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:8px
}
.nav a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px }
.nav a.active{ background:#0f1530; border:1px solid var(--border) }

.panel{
  background:var(--panel); border:1px solid var(--border); border-radius:16px;
  padding:20px; box-shadow:0 10px 30px rgba(0,0,0,.25)
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#5b8cff; border:none; color:#fff; padding:10px 14px;
  border-radius:12px; cursor:pointer; font-weight:700
}
.btn.secondary{ background:#0f1530; border:1px solid var(--border); color:var(--text) }

.form{ display:grid; gap:12px }
input,select,textarea{
  background:#0f1530; color:var(--text); border:1px solid var(--border);
  border-radius:12px; padding:10px 12px; width:100%
}
label{ font-size:14px; color:#cfd8ff }

.badge{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:6px 8px;
  border:1px solid var(--border); border-radius:10px; background:#0f1530; color:#c8d5ff
}
.notice{
  padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background:#0f1530; margin-bottom:12px
}
hr.soft{ border:none; border-top:1px solid var(--border); margin:18px 0 }

iframe.bot{
  width:100%; height:70vh; min-height:520px; border:none; border-radius:16px;
  background:#0f1530; position:relative; z-index:1
}

/* 4) Landing & Páginas públicas --------------------------- */
body.landing .nav, body.public .nav{ display:none !important }
body.landing .grid, body.public .grid{ grid-template-columns:1fr !important }
body.landing .container, body.public .container{ max-width:980px }
body.landing .main, body.public .main{ padding:16px }
.hero{ padding:56px 20px }
.hero h1{ font-size:clamp(28px,4.5vw,42px); line-height:1.15; margin:0 0 10px 0; word-wrap:break-word }
.hero p{ color:#cfd8ff; max-width:820px; margin:8px auto 0 }
.hero-card{ background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.25); max-width:980px; margin:0 auto }
.features{ display:grid; gap:18px; margin-top:30px }
@media(min-width:900px){ .features{ grid-template-columns:repeat(3,1fr) } }
.feature{ background:#0f1530; border:1px solid var(--border); border-radius:16px; padding:18px }
.cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:22px }
.stat{ display:flex; gap:10px; align-items:center; justify-content:center; color:#c8d5ff }
.stat .badge{ margin:0 4px }

/* 5) Hard fix (públicas) ---------------------------------- */
body.public .nav, body.public nav.nav{ display:none !important; width:0 !important; padding:0 !important; margin:0 !important; border:none !important }
body.public .grid, body.public .container.grid{ display:block !important; grid-template-columns:unset !important }
body.public .container{ max-width:980px !important; }
body.public .main{ padding:16px !important; }

/* 6) Drawer mobile --------------------------------------- */
.hamb{
  display:none; width:38px; height:38px; border:1px solid var(--border);
  border-radius:10px; background:#0f1530; cursor:pointer; align-items:center; justify-content:center;
}
.hamb span{ display:block; width:18px; height:2px; background:var(--text); margin:3px 0; border-radius:2px }
.nav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1200; }
.nav-backdrop[hidden]{ display:none; }

@media (max-width: 900px){
  .hamb{ display:inline-flex; }
  .grid{ grid-template-columns: 1fr !important; }
  .nav{
    position: fixed; left: 0; top: 64px;
    width: 86%; max-width: 320px; height: calc(100dvh - 64px);
    border-radius: 0 16px 16px 0; padding: 10px;
    transform: translateX(-110%); transition: transform .28s ease;
    z-index: 1201; overflow: auto;
  }
  .nav.open{ transform: translateX(0); }
}

/* === MOBILE DRAWER HARD-FIX (prioridade máxima) ========= */
@media (max-width: 900px){
  .grid{ grid-template-columns: 1fr !important; }

  .nav{
    position: fixed !important;
    left: 0; top: 64px;
    width: 86%; max-width: 320px; height: calc(100dvh - 64px);
    border-radius: 0 16px 16px 0; padding: 10px;
    background: var(--panel); border: 1px solid var(--border);
    z-index: 1201; overflow: auto;
    transform: translateX(-110%) !important;
    transition: transform .28s ease;
    display: block !important;
  }
  .nav.open{ transform: translateX(0) !important; }
  .nav.open + .nav-backdrop { display:block !important; }
}
/* === Chat: ocupar quase a tela no mobile ===================== */
/* wrapper interno só do chat (usado em area.php) */
.chat-wrap { 
  margin: 0 auto;                 /* desktop normal */
  width: 100%;
}

/* mobile */
/* Força o chat ocupar 100% no mobile */
/* === PAGE-BOT: remover espaço EXTERNO à área do chat no mobile === */
@media (max-width: 900px){
  /* zera respiros que vêm de fora do chat (main/container/panel) */
  body.page-bot .main,
  body.page-bot .container,
  body.page-bot .panel{
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* garante que o wrapper do chat ocupe toda a largura disponível */
  body.page-bot .chat-wrap{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* iframe colado nas bordas, mantendo sua altura */
  body.page-bot .chat-wrap iframe.bot{
    display: block;
    width: 100% !important;
    border: none !important;
    border-radius: 0 !important;
  }
}
/* === FULL-BLEED do chat no mobile (somente na página que tem .chat-wrap.full-bleed) === */
@media (max-width: 900px){

  /* zera os “respiros” externos */
  .container:has(.chat-wrap.full-bleed){ padding:0 !important; }
  .main:has(.chat-wrap.full-bleed){ padding:0 !important; }
  .grid:has(.chat-wrap.full-bleed){ gap:0 !important; }

  /* remove moldura da “card/panel” ao redor do chat */
  .panel:has(.chat-wrap.full-bleed){
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  /* o wrapper do chat ocupa a largura total da viewport */
  .chat-wrap.full-bleed{
    width:100vw !important;
    margin:0 !important;
    padding:0 !important;
  }

  /* o iframe encosta nas bordas, sem cantos arredondados */
  .chat-wrap.full-bleed iframe.bot{
    width:100% !important;
    border:none !important;
    border-radius:0 !important;
    height:70vh;              /* ajuste se quiser mais alto */
  }
}