/* =====================================================================
   GSI - Gabinete de Segurança Institucional · Tema Híbrido
   Mapa claro central + Barras laterais escuras (Sala de Situação)
   ===================================================================== */

:root{
  --ink:#070b10; --ink-2:#0a1017; --ink-3:#0d141d;
  --panel:rgba(11,17,24,.92);
  --line:rgba(120,205,210,.14);
  --line-strong:rgba(120,205,210,.28);

  --cyan:#ffffff; --cyan-soft:#ffffff; --cyan-dim:#333333;
  --amber:#ffb454; --amber-soft:#ffd79b;
  --red:#ff5e6e; --green:#41e08c; --neutral:#ffc24d;

  --fg:#dce8ea; --fg-dim:#8aa0a4; --fg-mute:#5a6c70;

  --f-display:'Chakra Petch',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --f-body:'Spline Sans',sans-serif;

  --glow-cyan:0 0 18px rgba(56,225,208,.35);
  --topbar-h:70px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--f-body);
  background: #f0f4f8; /* Fundo claro para o mapa */
  color:var(--fg);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- texturas de atmosfera ---------- */
.fx-grid{
  position:fixed;inset:0;pointer-events:none;z-index:1;
  background-image:
    linear-gradient(rgba(0,0,0,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,0.05) 1px,transparent 1px);
  background-size:60px 60px;
  opacity:.4;
}

/* ===================== BARRA SUPERIOR ===================== */
.topbar{
  position:fixed;top:0;left:0;right:0;height:var(--topbar-h);z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;gap:24px;
  background:#ffffff;
  border-bottom:2px solid #000000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.brand{display:flex;align-items:center;gap:15px}
.brand-mark{
  color:#000000;font-size:32px;line-height:1;
}
.brand-text .gsi-main-title{
  font-family:var(--f-display);font-weight:800;font-size:32px;letter-spacing:1px;color:#000000;
}
.brand-text .gsi-sub-title{display:block;color:#000000;font-size:14px;letter-spacing:1px;margin-top:2px; font-weight: 700;}

.topbar-meta{display:flex;gap:32px}
.meta-cell{display:flex;flex-direction:column;gap:4px;text-align:right}
.meta-cell label{font-size:10px;letter-spacing:1px;color:#666666; font-weight: 600;}
.meta-cell span{font-size:14px;color:#000000; font-weight: 500;}
.status-dot{position:relative;padding-left:16px;color:var(--amber)}
.status-dot::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;background:var(--amber);
  animation:pulse 1.6s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.status-dot.live{color:var(--green)}
.status-dot.live::before{background:var(--green)}
.status-dot.err{color:var(--red)}
.status-dot.err::before{background:var(--red)}

/* ===================== STAGE ===================== */
.stage{position:absolute;inset:var(--topbar-h) 0 0 0;display:flex;z-index:10}

/* ---------- HUD (índice lateral esquerdo) ---------- */
.hud{
  width:320px;flex:0 0 320px;display:flex;flex-direction:column;
  background:var(--panel);border-right:1px solid var(--line-strong);
  backdrop-filter:blur(10px);position:relative;z-index:12;
  box-shadow: 10px 0 30px rgba(0,0,0,0.5);
}
.hud-head{padding:24px 24px 16px}
.hud-head h1{font-family:var(--f-display);font-size:18px;letter-spacing:3px;color:#ffffff; font-weight: 700;}
.hud-head p{font-size:11px;color:var(--fg-mute);letter-spacing:1px;margin-top:4px}

.search{display:flex;align-items:center;gap:10px;margin:0 16px 16px;
  padding:10px 14px;border:1px solid var(--line-strong);border-radius:4px;
  background:rgba(0,0,0,0.35)}
.search-ico{color:var(--cyan);font-size:16px}
.search input{flex:1;background:none;border:none;outline:none;color:var(--fg);
  font-family:var(--f-mono);font-size:13px}
.search input::placeholder{color:var(--fg-mute)}

.city-list{flex:1;overflow-y:auto;list-style:none;padding:0 8px 20px;scrollbar-width: none;}
.city-list::-webkit-scrollbar { display: none; }
.city-list li{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 14px;margin:2px 0;border:1px solid transparent;border-radius:4px;
  cursor:pointer;transition:.16s;font-size:13px;color:#ffffff;
}
.city-list li:hover{background:rgba(56,225,208,0.1);color:var(--fg)}
.city-list li.active{
  background:linear-gradient(90deg,rgba(255,180,84,0.15),transparent);
  border-color:var(--amber);color:var(--amber-soft);
}
.city-list li .pop{font-family:var(--f-mono);font-size:11px;color:#ffffff; opacity: 0.8;}
.city-list li.active .pop{color:var(--amber)}

.legend{display:flex;gap:20px;padding:16px 24px;border-top:1px solid var(--line);
  font-size:11px;color:var(--fg-mute)}
.legend span{display:flex;align-items:center;gap:8px}
.dot{width:9px;height:9px;border-radius:50%}
.dot-base{background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.dot-sel{background:var(--amber);box-shadow:0 0 8px var(--amber)}

/* ---------- MAPA CENTRAL ---------- */
.map-wrap{flex:1;position:relative;z-index:11}
#map{position:absolute;inset:0;background:#f0f4f8}
.map-frame{position:absolute;inset:0;pointer-events:none;z-index:400; border: 15px solid #ffffff;}
.crosshair-v,.crosshair-h{position:absolute;background:rgba(0,0,0,0.05)}
.crosshair-v{left:50%;top:0;bottom:0;width:1px}
.crosshair-h{top:50%;left:0;right:0;height:1px}
.map-tag{position:absolute;left:30px;bottom:30px;z-index:401;
  font-size:11px;letter-spacing:1px;color:#333333; font-weight: 600;
  background:rgba(255,255,255,0.9);padding:6px 12px;border-radius:4px; border:1px solid #cccccc}

/* overrides do Leaflet p/ tema claro */
.leaflet-container{background:#f0f4f8;font-family:var(--f-mono)}
.leaflet-control-zoom a{
  background:#ffffff!important;color:#000000!important;
  border:1px solid #cccccc!important}
.leaflet-control-zoom a:hover{background:#f4f4f4!important;}
.leaflet-control-attribution{
  background:rgba(255,255,255,0.7)!important;color:#666666!important;font-size:10px}
.leaflet-tooltip.city-tip{
  background:#ffffff;border:2px solid #000000;color:#000000;
  font-family:var(--f-display);font-size:13px;font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);border-radius:4px;padding:4px 10px}
.leaflet-tooltip.city-tip::before{display:none}

/* ===================== DOSSIÊ (lateral direita) ===================== */
.dossier{
  position:absolute;top:0;right:0;bottom:0;width:450px;max-width:92vw;z-index:25;
  background:var(--panel);
  border-left:1px solid var(--line-strong);
  box-shadow:-20px 0 40px rgba(0,0,0,0.6);
  transform:translateX(102%);transition:transform .4s cubic-bezier(.2,.8,.2,1);
  backdrop-filter:blur(10px);
}
.dossier.open{transform:translateX(0)}
.dossier-close{
  position:absolute;top:20px;right:20px;z-index:5;width:36px;height:36px;
  background:rgba(0,0,0,0.4);border:1px solid var(--line-strong);color:var(--fg-dim);
  font-size:18px;cursor:pointer;border-radius:4px;transition:.16s}
.dossier-close:hover{background:var(--red);color:#ffffff;border-color:var(--red)}
.dossier-scroll{height:100%;overflow-y:auto;padding:28px 28px 50px;scrollbar-width: none;}
.dossier-scroll::-webkit-scrollbar { display: none; }

.dossier-head{display:flex;gap:20px;align-items:center;
  padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:20px}
.crest{
  width:76px;height:76px;flex:0 0 76px;display:grid;place-items:center;
  border:1px solid var(--line-strong);border-radius:6px;overflow:hidden;
  background:rgba(0,0,0,0.35);position:relative}
.crest img{width:100%;height:100%;object-fit:contain;padding:6px}
.crest-fallback{font-family:var(--f-display);font-size:24px;color:var(--cyan); font-weight: 700;}
.dossier-id .tag{font-size:10px;letter-spacing:2px;color:var(--amber);
  border:1px solid var(--amber);padding:2px 8px;border-radius:2px; font-weight: 600;}
.dossier-id h2{font-family:var(--f-display);font-size:26px; font-weight: 700;
  color:#ffffff;margin:8px 0 2px;line-height:1.1}
.dossier-id .mono{font-size:12px;color:var(--fg-mute); font-weight: 600;}

.block-label{font-family:var(--f-mono);font-size:11px;letter-spacing:2px;
  color:#ffffff;margin-bottom:12px;display:flex;align-items:center;gap:10px; font-weight: 600;}
.block-label::before{content:"";width:18px;height:1px;background:#ffffff}

.city-map-block{margin-bottom:24px}
.city-map{height:180px;border:1px solid var(--line-strong);border-radius:6px;
  overflow:hidden;background:#05080c}

/* estatísticas */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:28px}
.stat{border:1px solid var(--line);border-radius:6px;padding:14px;
  background:rgba(0,0,0,0.25)}
.stat label{display:block;font-size:10px;letter-spacing:1px;color:var(--fg-mute); font-weight: 600; text-transform: uppercase;}
.stat b{font-family:var(--f-mono);font-size:18px;color:#ffffff;font-weight:600}
.stat b small{font-size:11px;color:var(--fg-mute);font-weight:400;margin-left:4px}
.stat.wide{grid-column:1/-1}
.stat.wide b{font-size:15px;color:var(--fg)}

/* ---------- SENTIMENTO ---------- */
.sentiment{border-top:1px solid var(--line);padding-top:24px}
.sentiment-hint{font-size:13px;color:#ffffff;line-height:1.6;margin:8px 0 16px}
.sentiment-hint strong{color:var(--amber)}
.ask{display:flex;gap:10px;margin-bottom:16px}
.ask input{flex:1;background:rgba(0,0,0,0.4);border:1px solid var(--line-strong);
  border-radius:4px;padding:12px 16px;color:var(--fg);font-family:var(--f-mono);font-size:14px;outline:none; transition: 0.16s;}
.ask input:focus{border-color:var(--cyan); box-shadow: var(--glow-cyan)}

/* Botão branco conforme solicitado */
.ask button{font-family:var(--f-display);letter-spacing:2px;font-size:13px;font-weight:700;
  padding:0 24px;background:#ffffff;color:#000000;border:none;border-radius:4px;
  cursor:pointer;transition:.2s;white-space:nowrap}
.ask button:hover{background:#e0f0ff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,255,255,0.2);}
.ask button:disabled{opacity:.4;cursor:not-allowed}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{font-family:var(--f-mono);font-size:11px;color:var(--fg-dim);
  background:rgba(56,225,208,0.06);border:1px solid var(--line);border-radius:20px;
  padding:6px 14px;cursor:pointer;transition:.16s}
.chip:hover{color:var(--cyan);border-color:var(--cyan)}

/* carregando */
.scanning{margin-top:12px;border:1px solid var(--line-strong);border-radius:6px;
  padding:20px;text-align:center;background:rgba(0,0,0,0.3)}
.scanning-bar{height:4px;background:rgba(56,225,208,0.15);border-radius:4px;overflow:hidden;margin-bottom:16px}
.scanning-bar::after{content:"";display:block;height:100%;width:35%;
  background:var(--cyan);
  animation:sweep 1.1s ease-in-out infinite}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(330%)}}
.scanning span{font-size:12px;letter-spacing:2px;color:var(--cyan)}

/* ---------- RESULTADO ---------- */
.result{margin-top:12px;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.verdict{display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--line-strong);border-radius:6px;padding:16px;margin-bottom:16px;
  background:rgba(0,0,0,0.3)}
.verdict .v-label{font-size:10px;letter-spacing:2px;color:var(--fg-mute)}
.verdict .v-value{font-family:var(--f-display);font-size:28px; font-weight: 700; line-height:1}
.verdict .v-conf{text-align:right}
.verdict .v-conf small{display:block;font-size:10px;letter-spacing:2px;color:var(--fg-mute)}
.verdict .v-conf b{font-family:var(--f-mono);font-size:22px}
.is-positivo{color:var(--green)} .is-negativo{color:var(--red)}
.is-neutro{color:var(--neutral)} .is-misto{color:var(--cyan-soft)}

.bars{margin-bottom:20px}
.bar-row{display:grid;grid-template-columns:80px 1fr 40px;align-items:center;gap:12px;margin:8px 0}
.bar-row label{font-size:11px;letter-spacing:1px;color:var(--fg-dim)}
.bar-track{height:8px;background:rgba(255,255,255,0.06);border-radius:6px;overflow:hidden}
.bar-fill{height:100%;width:0;border-radius:6px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.bar-fill.pos{background:var(--green)}
.bar-fill.neu{background:var(--neutral)}
.bar-fill.neg{background:var(--red)}
.bar-row .val{font-family:var(--f-mono);font-size:13px;color:var(--fg-dim);text-align:right}

.summary{border-left:3px solid #ffffff;padding:6px 0 6px 18px;margin-bottom:24px;
  font-size:14px;line-height:1.6;color:#ffffff}
.summary .q{font-family:var(--f-mono);font-size:10px;letter-spacing:2px;color:#ffffff;display:block;margin-bottom:6px}

.themes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.theme{font-family:var(--f-mono);font-size:11px;color:var(--amber-soft);
  background:rgba(255,180,84,0.1);border:1px solid rgba(255,180,84,0.3);
  border-radius:4px;padding:5px 12px}

.sources-head{font-family:var(--f-mono);font-size:11px;letter-spacing:2px;
  color:var(--fg-mute);margin-bottom:12px;display:flex;justify-content:space-between}
.source{border:1px solid var(--line);border-radius:6px;padding:14px;margin-bottom:10px;
  background:rgba(0,0,0,0.2);transition:.16s}
.source:hover{border-color:var(--line-strong);background:rgba(0,0,0,0.3)}
.source-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.badge{font-family:var(--f-mono);font-size:10px;text-transform:uppercase;
  padding:2px 8px;border-radius:3px;border:1px solid currentColor}
.badge.gnews,.badge.newsapi{color:var(--cyan)}
.badge.bluesky{color:#7aa7ff;border-color:#7aa7ff}
.s-tag{font-family:var(--f-mono);font-size:10px;padding:2px 8px;
  border-radius:3px;margin-left:auto}
.s-tag.positivo{background:rgba(65,224,140,0.15);color:var(--green)}
.s-tag.negativo{background:rgba(255,94,110,0.15);color:var(--red)}
.s-tag.neutro{background:rgba(255,194,77,0.15);color:var(--neutral)}
.source .meta{font-family:var(--f-mono);font-size:11px;color:var(--fg-mute)}
.source p{font-size:13px;line-height:1.5;color:var(--fg-dim);margin-top:6px}
.source a{color:var(--cyan);font-size:12px;text-decoration:none}
.source a:hover{text-decoration:underline}

.result-foot{margin-top:20px;padding-top:16px;border-top:1px dashed var(--line-strong); font-size: 11px; color: var(--fg-mute); text-align: center;}

/* placeholder quando nenhuma cidade está selecionada */
.hint-pill{
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  background: #000000; color: #ffffff; padding: 12px 24px; border-radius: 30px;
  font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: 1px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 500;
}
.hint-pill.hidden { display: none; }

/* ===================== MODAL DE ANÁLISE ===================== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
}
.modal-overlay.active { display: flex; }

.modal-box {
  background: #ffffff; width: 900px; max-width: 95vw;
  max-height: 90vh; border-radius: 12px; overflow: hidden;
  box-shadow: 0 25px 50px rgba(0,0,0,0.5);
  position: relative;
}

.modal-content { padding: 40px; }

/* Loader GSI */
.gsi-loader { text-align: center; padding: 60px 0; }
.gsi-logo-anim {
  font-family: var(--f-display); font-size: 80px; font-weight: 800;
  color: #000000; letter-spacing: 10px; margin-bottom: 30px;
  animation: pulseLogo 1.5s infinite;
}
@keyframes pulseLogo { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.95); } }

.progress-bar-wrap {
  width: 300px; height: 6px; background: #eeeeee;
  border-radius: 3px; margin: 0 auto 20px; overflow: hidden;
}
.progress-bar {
  height: 100%; width: 0%; background: #000000;
  transition: width 0.3s ease;
}
#modalStatusMsg {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 2px;
  color: #666666; font-weight: 600;
}

/* Resultado do Relatório */
.modal-close {
  position: absolute; top: 20px; right: 20px;
  background: none; border: none; font-size: 24px; cursor: pointer; color: #000000;
}

.report-header { border-bottom: 2px solid #eeeeee; padding-bottom: 20px; margin-bottom: 30px; }
.report-header h2 { font-family: var(--f-display); font-size: 24px; color: #000000; margin-bottom: 5px; }
.report-header p { font-family: var(--f-mono); font-size: 12px; color: #666666; }

.report-grid { display: grid; grid-template-columns: 350px 1fr; gap: 40px; margin-bottom: 30px; align-items: center; }
.report-chart { height: 300px; display: flex; align-items: center; justify-content: center; }

.report-summary-box { background: #f8f9fa; padding: 25px; border-radius: 12px; border: 1px solid #eeeeee; }
.verdict-badge {
  display: inline-block; padding: 6px 15px; border-radius: 4px;
  font-family: var(--f-display); font-weight: 700; font-size: 18px;
  margin-bottom: 15px; color: #ffffff;
}
.verdict-badge.is-positivo { background: #28a745; }
.verdict-badge.is-negativo { background: #dc3545; }
.verdict-badge.is-neutro { background: #ffc107; color: #000000; }

.summary-text { font-size: 16px; line-height: 1.6; color: #333333; }

.report-details {
  display: flex; gap: 40px; padding: 20px; background: #000000;
  color: #ffffff; border-radius: 8px; margin-bottom: 30px;
}
.detail-row { font-family: var(--f-mono); font-size: 13px; }
.detail-row strong { font-size: 16px; margin-left: 10px; color: var(--amber); }

.report-sources { max-height: 250px; overflow-y: auto; padding-right: 10px; }
.report-sources::-webkit-scrollbar { width: 6px; }
.report-sources::-webkit-scrollbar-thumb { background: #cccccc; border-radius: 3px; }

.source-item { padding: 15px; border-bottom: 1px solid #eeeeee; }
.source-item:last-child { border-bottom: none; }
.source-item .meta { font-size: 11px; color: #999999; margin-bottom: 5px; }
.source-item p { font-size: 14px; color: #444444; line-height: 1.4; }
.source-item a { color: #0056b3; text-decoration: none; font-size: 12px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Estilos Dashboard GSI */
.report-header-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 5px; }
.report-timestamp { font-family: var(--f-mono); font-size: 10px; color: #999999; }
.report-chart-box { background: #fcfcfc; border: 1px solid #eeeeee; border-radius: 12px; padding: 20px; }
.chart-label { font-family: var(--f-display); font-size: 11px; letter-spacing: 1px; color: #666666; text-align: center; margin-bottom: 15px; font-weight: 700; }
.verdict-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.confidence-pill { background: #000000; color: #ffffff; padding: 4px 10px; border-radius: 20px; font-family: var(--f-mono); font-size: 10px; }
.summary-label { font-family: var(--f-display); font-size: 11px; letter-spacing: 1px; color: #999999; margin-bottom: 10px; font-weight: 700; }
.report-details-mini { display: flex; gap: 20px; margin-top: 20px; padding-top: 15px; border-top: 1px dashed #dddddd; }
.mini-stat { font-family: var(--f-mono); font-size: 11px; color: #666666; }
.mini-stat strong { color: #000000; }
.section-divider { position: relative; text-align: center; margin: 30px 0 20px; }
.section-divider::before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: #eeeeee; z-index: 1; }
.section-divider span { position: relative; background: #ffffff; padding: 0 15px; z-index: 2; font-family: var(--f-display); font-size: 11px; letter-spacing: 2px; color: #999999; font-weight: 700; }