/* =====================================================================
   RELATÓRIOS — lista, visualizador e o painel "pergunte à IA"
   ===================================================================== */
.rel-grupo{margin-bottom:30px}
.rel-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:13px}

.rel-card{display:flex; gap:14px; align-items:flex-start; text-align:left; width:100%; min-width:0;
  background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:16px 17px;
  color:inherit; transition:transform .18s cubic-bezier(.2,.9,.3,1.2), border-color .18s, box-shadow .18s}
.rel-card:hover{transform:translateY(-3px); border-color:var(--gold-dim);
  box-shadow:0 18px 40px -20px rgba(0,0,0,.9)}
.rc-ico{width:40px; height:40px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:rgba(255,69,58,.11); color:#ff6a5f; border:1px solid rgba(255,69,58,.22)}
.rc-body{min-width:0; flex:1}
.rc-body h4{font-size:14.5px; font-weight:600; line-height:1.35; letter-spacing:-.01em}
.rc-body p{font-size:12px; color:var(--muted); line-height:1.45; margin-top:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rc-meta{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-top:9px;
  font-size:11px; color:var(--faint)}
.rc-meta .chip{padding:2px 8px; font-size:9.5px; display:inline-flex; align-items:center; gap:4px}

/* ---------- cabeçalho do documento ---------- */
.rel-head{display:flex; gap:20px; align-items:flex-start; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:18px}
.rel-head h2{font-size:25px; letter-spacing:-.02em; margin:9px 0 6px}
.rel-head p{color:var(--muted); font-size:13.5px; max-width:560px; line-height:1.55}
.rel-acoes{display:flex; gap:8px; flex-wrap:wrap}
.rel-acoes .btn-sm{text-decoration:none; gap:7px}

/* ---------- visor + painel ---------- */
.rel-split{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:18px; align-items:start}
.rel-visor{background:#0a0a0c; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  height:calc(100vh - 250px); min-height:520px; display:grid; place-items:center}
.rel-visor iframe{width:100%; height:100%; border:none; display:block; background:#fff}
.rel-mobile{text-align:center; padding:40px 22px; color:var(--faint)}
.rel-mobile .ei{opacity:.35; margin-bottom:12px}
.rel-mobile p{font-size:13.5px; color:var(--muted); margin-bottom:18px}
.rm-acoes{display:flex; gap:9px; justify-content:center; flex-wrap:wrap}
.rm-acoes .btn-sm{text-decoration:none}

/* ---------- pergunte à IA ---------- */
.rel-ia{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  display:flex; flex-direction:column; height:calc(100vh - 250px); min-height:520px; overflow:hidden}
.ia-head{padding:15px 17px 13px; border-bottom:1px solid var(--line); flex:none}
.ia-head h3{font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:8px}
.ia-head h3 svg{color:var(--gold-bright)}
.ia-sub{display:block; font-size:11px; color:var(--faint); margin-top:4px}

.ia-resumo{flex:none; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}
.ia-resumo summary{cursor:pointer; list-style:none; padding:12px 17px; font-size:12px;
  font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.ia-resumo summary::-webkit-details-marker{display:none}
.ia-resumo summary::before{content:'▸ '; color:var(--gold)}
.ia-resumo[open] summary::before{content:'▾ '}
.ia-resumo .md{padding:0 17px 14px; max-height:190px; overflow-y:auto}

.ia-chat{flex:1; overflow-y:auto; padding:15px 17px; display:flex; flex-direction:column; gap:11px; min-height:0}
.bolha{max-width:92%; padding:11px 14px; border-radius:13px; font-size:13px; line-height:1.6;
  word-break:break-word; animation:fadeUp .2s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.bolha.user{align-self:flex-end; background:var(--plat-grad); color:#000; font-weight:500; border-bottom-right-radius:5px}
.bolha.ia{align-self:flex-start; background:var(--ink); border:1px solid var(--line); border-bottom-left-radius:5px}
.bolha.erro{align-self:flex-start; background:rgba(255,69,58,.09); border:1px solid rgba(255,69,58,.3); color:var(--txt)}
.bolha .spin{display:inline-block; vertical-align:-2px; margin-right:7px}

.ia-sug{display:flex; gap:6px; flex-wrap:wrap; padding:0 17px 12px; flex:none}
.sug{background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:7px 12px; border-radius:99px; font-size:11.5px; font-weight:500; text-align:left; transition:all .15s}
.sug:hover{border-color:var(--gold-dim); color:var(--txt)}

.ia-box{flex:none; display:flex; gap:9px; align-items:flex-end; margin:0 15px 6px;
  background:var(--ink); border:1px solid var(--line); border-radius:12px; padding:8px 9px 8px 13px;
  transition:border-color .15s}
.ia-box:focus-within{border-color:var(--gold-dim)}
.ia-box textarea{flex:1; background:transparent; border:none; color:var(--txt); font-family:'Inter';
  font-size:13.5px; resize:none; max-height:120px; line-height:1.5; padding:5px 0}
.ia-box textarea:focus{outline:none}
.ia-aviso{flex:none; padding:6px 17px 14px; font-size:10.5px; color:var(--faint); line-height:1.45}

/* markdown renderizado das respostas */
.md p{margin:0 0 8px} .md p:last-child{margin-bottom:0}
.md h4{font-size:13px; font-weight:600; margin:11px 0 6px; color:var(--gold-bright)}
.md ul{margin:0 0 8px; padding-left:17px}
.md li{margin-bottom:5px}
.md b{color:var(--txt); font-weight:600}
.md code{font-family:'JetBrains Mono',monospace; font-size:11.5px; background:rgba(255,255,255,.07);
  padding:1px 5px; border-radius:4px}
.md-tab{width:100%; border-collapse:collapse; margin:9px 0; font-size:11.5px; display:block; overflow-x:auto}
.md-tab td{border:1px solid var(--line); padding:6px 9px; white-space:nowrap}
.md-tab tr:first-child td{background:rgba(255,255,255,.05); font-weight:600; color:var(--txt)}

@media (max-width:980px){
  .rel-split{grid-template-columns:minmax(0,1fr)}
  .rel-visor{height:70vh; min-height:auto}
  .rel-ia{height:auto; max-height:620px; min-height:420px}
}
@media (max-width:760px){
  .rel-grid{grid-template-columns:minmax(0,1fr)}
  .rel-head h2{font-size:21px}
  .rel-acoes{width:100%}
  .rel-acoes .btn-sm{flex:1; justify-content:center}
  .rel-visor{height:auto; min-height:0}
  .rel-ia{max-height:none; height:auto}
  .ia-chat{max-height:52vh}
  .bolha{max-width:96%}
}