/* ═══════════════════════════════════════════════════════════
   EPICENTRO · camadas + ferramentas
   Fora do grid do HUD — tudo flutuante sobre o mapa.
   ═══════════════════════════════════════════════════════════ */
/* #ox-root é fixed e por isso cria stacking context: precisa de um
   z-index acima do mapa (1). O globo 3D fica FORA daqui, em z-index 95,
   para não ficar por cima do HUD (100). */
#ox-root {
  position: fixed; inset: 0; z-index: 1200;
  pointer-events: none;
  font-family: var(--font-hud);
  /* barras flutuam ao centro do mapa (o mapa é o elemento central do ecrã) */
  --rail-x: 50%;
  --rail-w: 42px;
}
#ox-root > * { pointer-events: auto; }

/* ── RAIL ───────────────────────────────────────────────── */
#ox-rail {
  position: absolute; z-index: 1200;
  left: var(--rail-x); margin-left: calc(var(--rail-w) / -2); top: 118px;
  width: var(--rail-w);
  display: flex; flex-direction: column; gap: 5px;
  padding: 6px 4px;
  background: linear-gradient(165deg, rgba(10,24,42,.92), rgba(4,8,18,.95));
  border: 1px solid rgba(0,229,255,.16);
  border-top: 2px solid var(--c-cyan);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  backdrop-filter: blur(14px);
}
.ox-btn {
  position: relative;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,229,255,.05);
  border: 1px solid rgba(0,229,255,.14);
  border-radius: 8px;
  color: #8fd9ef;
  font-size: 15px; line-height: 1;
  cursor: pointer;
  transition: .18s;
}
.ox-btn:hover {
  background: rgba(0,229,255,.16);
  border-color: rgba(0,229,255,.55);
  color: #e6fbff;
  box-shadow: 0 0 14px rgba(0,229,255,.3);
}
.ox-btn.on {
  background: rgba(0,229,255,.24);
  border-color: var(--c-cyan);
  color: #fff;
  box-shadow: 0 0 16px rgba(0,229,255,.45), inset 0 0 12px rgba(0,229,255,.22);
}
.ox-btn.warm.on { background: rgba(255,176,32,.22); border-color: var(--c-amber); box-shadow: 0 0 16px rgba(255,176,32,.4); }
.ox-btn.danger.on { background: rgba(255,46,94,.22); border-color: var(--c-red); box-shadow: 0 0 16px rgba(255,46,94,.4); }
.ox-btn::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 9px); top: 50%;
  transform: translateY(-50%) translateX(-6px);
  padding: 5px 9px;
  background: rgba(2,6,14,.97);
  border: 1px solid rgba(0,229,255,.35);
  border-radius: 6px;
  color: #cfefff;
  font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase;
  white-space: nowrap; opacity: 0; visibility: hidden;
  transition: .16s; pointer-events: none; z-index: 5;
}
.ox-btn:hover::after { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.ox-sep { height: 1px; background: rgba(0,229,255,.18); margin: 3px 2px; }

/* ── PAINEL (drawer) ────────────────────────────────────── */
#ox-panel {
  position: absolute; z-index: 1200;
  left: var(--rail-x); margin-left: calc(var(--rail-w) / 2 + 8px); top: 118px;
  width: 322px;
  max-height: calc(100vh - 250px);
  display: flex; flex-direction: column;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(8,20,36,.97), rgba(3,7,15,.98));
  border: 1px solid rgba(0,229,255,.18);
  border-top: 2px solid var(--c-cyan);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
  backdrop-filter: blur(16px);
}
#ox-panel[hidden] { display: none; }
#ox-panel .ph { border-bottom: 1px solid rgba(255,255,255,.06); }
#ox-panel .ph-x { cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; color: #7fc6dd; }
#ox-panel .ph-x:hover { color: var(--c-red); }

#ox-tabs {
  display: flex; gap: 4px; padding: 7px 8px 0;
  flex-shrink: 0; flex-wrap: wrap;
  border-bottom: 1px solid rgba(0,229,255,.1);
}
.ox-tab {
  padding: 6px 9px;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  color: #6fa8bf;
  font-family: var(--font-hud); font-weight: 700;
  font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase;
  cursor: pointer;
}
.ox-tab:hover { color: #cfefff; background: rgba(0,229,255,.07); }
.ox-tab.on {
  color: var(--c-cyan);
  background: rgba(0,229,255,.13);
  border-color: rgba(0,229,255,.3);
}

#ox-body {
  padding: 9px 10px 12px;
  overflow-y: auto; overflow-x: hidden;
  font-family: var(--font-data);
  font-size: 11px;
  color: #9fc4d6;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,229,255,.35) transparent;
}
#ox-body::-webkit-scrollbar { width: 7px; }
#ox-body::-webkit-scrollbar-thumb { background: rgba(0,229,255,.3); border-radius: 4px; }

.ox-grp {
  margin: 11px 0 5px;
  font-family: var(--font-hud); font-weight: 700;
  font-size: 9px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--c-amber);
  display: flex; align-items: center; gap: 7px;
}
.ox-grp::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,176,32,.35), transparent); }
.ox-grp:first-child { margin-top: 0; }

.ox-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 7px;
  margin-bottom: 3px;
  background: rgba(255,255,255,.022);
  border: 1px solid rgba(255,255,255,.05);
  border-left: 2px solid rgba(0,229,255,.28);
  border-radius: 7px;
  cursor: pointer;
  transition: .15s;
}
.ox-row:hover { background: rgba(0,229,255,.09); border-color: rgba(0,229,255,.34); }
.ox-row.on {
  background: rgba(0,229,255,.14);
  border-color: rgba(0,229,255,.5);
  border-left-color: var(--c-cyan);
}
.ox-row .ic { width: 15px; text-align: center; font-size: 12px; flex-shrink: 0; filter: saturate(1.2); }
.ox-row .lb { flex: 1; min-width: 0; font-size: 11px; color: #bfe2f2; font-family: var(--font-hud); font-weight: 600; }
.ox-row.on .lb { color: #eafaff; }
.ox-row .st {
  font-size: 8.5px; letter-spacing: 1px; color: #5d8ea3;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px; padding: 2px 5px; flex-shrink: 0;
}
.ox-row.on .st { color: var(--c-cyan); border-color: rgba(0,229,255,.45); background: rgba(0,229,255,.12); }
.ox-row.busy .st { color: var(--c-amber); border-color: rgba(255,176,32,.5); animation: oxblink .9s infinite; }
.ox-row.err .st { color: var(--c-red); border-color: rgba(255,46,94,.5); }
@keyframes oxblink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.ox-note { font-size: 10px; line-height: 1.5; color: #6e9cb0; padding: 7px; border-left: 2px solid rgba(255,176,32,.4); background: rgba(255,176,32,.05); border-radius: 0 6px 6px 0; margin: 8px 0; }
.ox-empty { text-align: center; padding: 16px 8px; color: #5f8ba0; font-size: 10.5px; letter-spacing: .6px; }

/* ── tabelas de dados (mercados / cyber / cctv / news) ─── */
.ox-sub { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 10px 0 5px; font-family: var(--font-hud); font-weight: 700; font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--c-green); }
.ox-sub:first-child { margin-top: 0; }
.ox-sub .n { color: #5f8ba0; font-family: var(--font-data); letter-spacing: 0; }

.ox-kv { display: flex; justify-content: space-between; gap: 8px; padding: 5px 6px; border-bottom: 1px dashed rgba(255,255,255,.06); }
.ox-kv .k { color: #89b7cb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ox-kv .v { font-weight: 700; color: #dff4ff; white-space: nowrap; }
.up { color: var(--c-green) !important; }
.dn { color: var(--c-red) !important; }
.fl { color: var(--c-amber) !important; }

.ox-card {
  padding: 6px 7px; margin-bottom: 4px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-left: 2px solid rgba(0,229,255,.3);
  border-radius: 6px;
  cursor: pointer; transition: .15s;
}
.ox-card:hover { background: rgba(0,229,255,.09); border-left-color: var(--c-cyan); }
.ox-card .t { font-family: var(--font-hud); font-weight: 700; font-size: 10.5px; color: #d7f2ff; line-height: 1.3; }
.ox-card .s { font-size: 9.5px; color: #74a3b8; margin-top: 3px; line-height: 1.4; }
.ox-card .m { font-size: 9px; color: var(--c-amber); margin-top: 3px; }
.ox-card.red { border-left-color: rgba(255,46,94,.6); }
.ox-card.green { border-left-color: rgba(0,255,157,.5); }
.ox-card.amber { border-left-color: rgba(255,176,32,.6); }

.ox-input {
  width: 100%; padding: 7px 9px;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(0,229,255,.24);
  border-radius: 7px;
  color: #dff6ff;
  font-family: var(--font-data); font-size: 11.5px;
  outline: none;
}
.ox-input:focus { border-color: var(--c-cyan); box-shadow: 0 0 12px rgba(0,229,255,.28); }
.ox-input::placeholder { color: #52808f; letter-spacing: 1px; }

.ox-mini-btn {
  padding: 5px 9px; font-family: var(--font-hud); font-weight: 700;
  font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase;
  background: rgba(0,229,255,.1); border: 1px solid rgba(0,229,255,.3);
  border-radius: 6px; color: #bfeeff; cursor: pointer; transition: .15s;
}
.ox-mini-btn:hover { background: rgba(0,229,255,.24); color: #fff; }
.ox-mini-btn.hot { border-color: rgba(255,46,94,.5); background: rgba(255,46,94,.12); color: #ffc9d4; }
.ox-mini-btn.hot:hover { background: rgba(255,46,94,.3); }
.ox-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 7px 0; }

/* ── BUSCA flutuante ────────────────────────────────────── */
#ox-search {
  position: absolute; z-index: 1200;
  left: var(--rail-x); margin-left: calc(var(--rail-w) / 2 + 8px); top: 118px;
  width: 322px;
  background: rgba(3,7,15,.98);
  border: 1px solid rgba(0,229,255,.28);
  border-top: 2px solid var(--c-green);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.62);
  padding: 9px;
  backdrop-filter: blur(14px);
}
#ox-search[hidden] { display: none; }
#ox-search-res { margin-top: 7px; max-height: 46vh; overflow-y: auto; }
.ox-res {
  padding: 6px 7px; margin-bottom: 3px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.06);
  border-left: 2px solid rgba(0,255,157,.4);
  border-radius: 6px; background: rgba(255,255,255,.02);
}
.ox-res:hover { background: rgba(0,255,157,.1); border-color: rgba(0,255,157,.4); }
.ox-res .t { font-family: var(--font-hud); font-weight: 700; font-size: 11px; color: #dff6ff; }
.ox-res .s { font-size: 9.5px; color: #6f9cb2; margin-top: 2px; }

/* ── caixa de ferramenta (rota/desenho) ─────────────────── */
#ox-tool {
  position: absolute; z-index: 1200;
  left: var(--rail-x); margin-left: calc(var(--rail-w) / 2 + 8px); top: 118px;
  width: 322px;
  padding: 9px;
  background: rgba(3,7,15,.98);
  border: 1px solid rgba(255,176,32,.32);
  border-top: 2px solid var(--c-amber);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.62);
  font-family: var(--font-data); font-size: 11px; color: #c8e6f4;
  backdrop-filter: blur(14px);
}
#ox-tool[hidden] { display: none; }
#ox-tool .tt { font-family: var(--font-hud); font-weight: 700; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--c-amber); margin-bottom: 6px; display: flex; justify-content: space-between; align-items: center; }
#ox-tool .hint { font-size: 10px; color: #6f9cb2; line-height: 1.5; margin-bottom: 7px; }
#ox-tool .btns { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
#ox-tool .read { margin-top: 7px; padding: 6px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,176,32,.2); border-radius: 6px; color: #ffd894; font-size: 11px; }
.ox-toolbtn.on { background: rgba(255,176,32,.24); border-color: var(--c-amber); color: #fff; }

/* ── toast ──────────────────────────────────────────────── */
#ox-toast {
  position: absolute; z-index: 1250; left: 50%; bottom: 66px;
  transform: translateX(-50%) translateY(10px);
  padding: 8px 15px;
  background: rgba(2,6,14,.96);
  border: 1px solid rgba(0,229,255,.4);
  border-radius: 9px;
  color: #d5f4ff; font-family: var(--font-data); font-size: 11px;
  letter-spacing: .5px; opacity: 0; visibility: hidden;
  transition: .25s; pointer-events: none; z-index: 10;
  box-shadow: 0 10px 30px rgba(0,0,0,.6);
  max-width: 76vw; text-align: center;
}
#ox-toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
#ox-toast.warn { border-color: rgba(255,176,32,.6); color: #ffd894; }
#ox-toast.bad { border-color: rgba(255,46,94,.7); color: #ffc2ce; }

/* ── globo 3D ───────────────────────────────────────────── */
#ox-globe {
  position: fixed; inset: 0; z-index: 95;
  background: #000;
}
#ox-globe[hidden] { display: none; }
#ox-globe .ox-gl-close { display: none; }
#ox-globe .ox-gl-title {
  position: absolute; left: 50%; top: 120px; z-index: 4;
  transform: translateX(-50%);
  font-family: var(--font-title); font-size: 11px; letter-spacing: 5px;
  color: rgba(0,229,255,.85); text-transform: uppercase;
  background: rgba(2,6,14,.7); padding: 5px 14px; border-radius: 6px;
  border: 1px solid rgba(0,229,255,.25);
  pointer-events: none;
}
.ox-gl-boot {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-cyan); font-family: var(--font-data); font-size: 12px;
  letter-spacing: 3px; background: #010306;
}

/* ── marcadores ─────────────────────────────────────────── */
.ox-icon { background: none !important; border: none !important; }
.ox-sym {
  display: block; text-align: center; line-height: 1;
  filter: drop-shadow(0 0 4px currentColor);
  font-size: 13px;
}
.ox-plane {
  display: block; font-size: 15px; line-height: 1;
  color: var(--c-cyan);
  filter: drop-shadow(0 0 5px rgba(0,229,255,.85));
  transform-origin: 50% 50%;
}
.ox-plane.mil { color: var(--c-amber); filter: drop-shadow(0 0 5px rgba(255,176,32,.9)); }
.ox-dot {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: currentColor; border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 0 8px currentColor;
}
.ox-dot.big { width: 13px; height: 13px; }
.ox-dot.pulse::after {
  content: ''; position: absolute; inset: -6px;
  border: 1px solid currentColor; border-radius: 50%;
  animation: oxpulse 2s ease-out infinite;
}
@keyframes oxpulse { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
.ox-badge {
  display: inline-block; padding: 2px 5px; border-radius: 4px;
  background: rgba(0,0,0,.75); border: 1px solid currentColor;
  font-family: var(--font-data); font-size: 8.5px; color: #fff;
  white-space: nowrap;
}

/* popup escuro legível (consistente com o resto do site) */
.leaflet-popup-content-wrapper {
  background: rgba(2,6,14,.97) !important;
  color: #e8f4ff !important;
  border: 1px solid rgba(0,229,255,.4);
  border-radius: 10px !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.7) !important;
}
.leaflet-popup-tip { background: rgba(2,6,14,.97) !important; border: 1px solid rgba(0,229,255,.35); }
.leaflet-popup-content { font-family: var(--font-data); font-size: 11.5px; line-height: 1.55; margin: 9px 11px !important; }
.leaflet-popup-content b, .leaflet-popup-content strong { color: var(--c-cyan); }
.ox-pop { min-width: 168px; }
.ox-pop h4 { font-family: var(--font-hud); font-size: 12px; letter-spacing: 1.4px; color: var(--c-cyan); margin-bottom: 5px; text-transform: uppercase; }
.ox-pop .r { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed rgba(255,255,255,.09); padding: 2px 0; }
.ox-pop .r span:first-child { color: #7fb0c6; }
.ox-pop .r span:last-child { color: #eafaff; font-weight: 700; }
.ox-pop .muted { color: #6f9cb2; font-size: 10px; margin-top: 5px; }
.ox-pop a { color: var(--c-green); text-decoration: none; border-bottom: 1px dotted rgba(0,255,157,.5); }
.ox-pop img.cam { width: 100%; max-width: 260px; border-radius: 6px; border: 1px solid rgba(0,229,255,.35); margin-top: 6px; display: block; background: #040810; }
.ox-pop video.cam { width: 100%; max-width: 260px; border-radius: 6px; border: 1px solid rgba(0,229,255,.35); margin-top: 6px; display: block; background: #040810; }
.leaflet-popup-close-button { color: #7fb0c6 !important; }

.ox-prog { height: 3px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.ox-prog i { display: block; height: 100%; width: 34%; background: linear-gradient(90deg, transparent, var(--c-cyan), transparent); animation: oxcrawl 1.1s linear infinite; }
@keyframes oxcrawl { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }

/* ── MOBILE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Barra inferior horizontal de rolagem (PLANO §6): uma fila, sem wrap,
     sem tapar o conteúdo — os tabs colapsados escondem-se (reabrem no .ph) */
  #ox-rail {
    left: 8px; right: 8px; bottom: 50px; top: auto;
    margin-left: 0;
    width: auto; max-width: none;
    flex-direction: row; flex-wrap: nowrap; gap: 6px; padding: 5px 6px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #ox-rail::-webkit-scrollbar { display: none; }
  /* especificidade 2 IDs: a regra base (#ox-collapsed-tabs, display:flex)
     vem DEPOIS neste ficheiro e ganharia com especificidade igual */
  #ox-root #ox-collapsed-tabs { display: none; }
  #ox-rail-tab { bottom: 108px; }
  .ox-btn { width: 44px; height: 44px; flex-shrink: 0; }
  .ox-btn::after { left: 50%; top: auto; bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(6px); }
  .ox-btn:hover::after { transform: translateX(-50%) translateY(0); }
  .ox-sep { display: none; }

  #ox-panel, #ox-search, #ox-tool {
    left: 8px; right: 8px; top: auto; bottom: 140px;
    margin-left: 0;
    width: auto;
    max-height: 48vh;
  }
  #ox-body { max-height: 34vh; font-size: 11.5px; }
  #ox-globe .ox-gl-title { top: auto; bottom: 96px; font-size: 9px; letter-spacing: 3px; }
  #ox-toast { bottom: 150px; }
}
@media (max-width: 400px) {
  .ox-btn { width: 44px; height: 44px; font-size: 14px; }
  #ox-panel, #ox-search, #ox-tool { bottom: 148px; }
}

/* ── VISUALIZADOR DE CÂMARAS ────────────────────────────────── */
#ox-camviewer {
  position: fixed; z-index: 1300;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 94vw);
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, rgba(8,20,36,.98), rgba(3,7,15,.99));
  border: 1px solid rgba(0,229,255,.3);
  border-top: 2px solid var(--c-cyan);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
  backdrop-filter: blur(16px);
  overflow: hidden;
}
#ox-camviewer[hidden] { display: none; }
.ox-cam-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,229,255,.12);
  flex-shrink: 0;
}
.ox-cam-title {
  font-family: var(--font-hud); font-weight: 700; font-size: 14px;
  letter-spacing: 1.2px; color: var(--c-cyan); text-transform: uppercase;
}
.ox-cam-sub { font-family: var(--font-data); font-size: 10px; color: #6f9cb2; margin-top: 2px; }
.ox-cam-close {
  background: rgba(255,46,94,.12); border: 1px solid rgba(255,46,94,.4);
  border-radius: 6px; color: #ffc2ce; width: 28px; height: 28px;
  font-size: 13px; cursor: pointer; flex-shrink: 0;
}
.ox-cam-close:hover { background: rgba(255,46,94,.3); }
.ox-cam-body {
  display: flex; gap: 0; flex: 1; min-height: 0; overflow: hidden;
}
.ox-cam-mediacol {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 12px; position: relative; min-width: 0;
}
.ox-cam-media {
  width: 100%; max-height: 60vh; object-fit: contain;
  border-radius: 8px; border: 1px solid rgba(0,229,255,.25);
  background: #040810; display: block;
  transition: opacity .3s;
}
.ox-cam-err { opacity: .2; }
.ox-cam-imgwrap { position: relative; width: 100%; }
.ox-cam-imgwrap img { width: 100%; border-radius: 8px; border: 1px solid rgba(0,229,255,.25); background: #040810; transition: opacity .3s; }
.ox-cam-live {
  position: absolute; top: 8px; left: 8px;
  display: flex; align-items: center; gap: 5px;
  background: rgba(2,6,14,.85); border: 1px solid rgba(255,46,94,.5);
  border-radius: 5px; padding: 3px 8px;
  font-family: var(--font-data); font-size: 9px; color: #ff5c7a; letter-spacing: 1px;
}
.ox-cam-livedot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff2e5e; animation: oxblink 1.2s infinite;
}
.ox-cam-refresh {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(2,6,14,.85); border: 1px solid rgba(0,229,255,.3);
  border-radius: 5px; padding: 3px 8px;
  font-family: var(--font-data); font-size: 9px; color: #7fc6dd;
}
.ox-cam-external {
  text-align: center; padding: 30px 20px; color: #89b7cb;
  font-family: var(--font-data); font-size: 12px; line-height: 1.6;
}
.ox-cam-external p { margin-bottom: 14px; }
.ox-cam-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 52px;
  background: rgba(2,6,14,.85); border: 1px solid rgba(0,229,255,.35);
  border-radius: 7px; color: var(--c-cyan); font-size: 15px; cursor: pointer;
  transition: background .2s;
}
.ox-cam-nav:hover { background: rgba(0,229,255,.2); }
#ox-cam-prev { left: 6px; }
#ox-cam-next { right: 6px; }
.ox-cam-side {
  width: 190px; flex-shrink: 0;
  border-left: 1px solid rgba(0,229,255,.1);
  padding: 12px; display: flex; flex-direction: column; gap: 10px;
  background: rgba(0,0,0,.2);
}
.ox-cam-info { display: flex; flex-direction: column; gap: 5px; }
.ox-cam-kv {
  display: flex; justify-content: space-between; gap: 8px;
  font-family: var(--font-data); font-size: 10.5px;
  padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,.07);
}
.ox-cam-kv span:first-child { color: #6f9cb2; }
.ox-cam-kv span:last-child { color: #dff4ff; }
.ox-cam-count {
  margin-top: auto; text-align: center;
  font-family: var(--font-data); font-size: 10px; color: #5d8ea3;
  padding-top: 8px; border-top: 1px solid rgba(0,229,255,.1);
}

@media (max-width: 768px) {
  #ox-camviewer { width: 96vw; max-height: 92vh; }
  .ox-cam-body { flex-direction: column; overflow-y: auto; }
  .ox-cam-media { max-height: 46vh; }
  .ox-cam-side { width: auto; border-left: none; border-top: 1px solid rgba(0,229,255,.1); }
}

/* ── RAIL COLAPSÁVEL ────────────────────────────────────────── */
#ox-rail { transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .3s; }
#ox-rail.collapsed { transform: translateX(-110%); opacity: 0; pointer-events: none; }
/* aba de colapsar: SEMPRE à esquerda da rail (nunca por cima dela) */
#ox-rail-tab {
  position: absolute; z-index: 1200;
  left: var(--rail-x); margin-left: calc(var(--rail-w) / -2 - 24px); top: 118px;
  width: 22px; height: 42px;
  background: rgba(2,6,14,.9);
  border: 1px solid rgba(0,229,255,.35);
  border-radius: 8px;
  color: var(--c-cyan);
  font-size: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
#ox-rail-tab:hover { background: rgba(0,229,255,.2); }

/* ── rail colapsada: nada fica no meio do mapa ──────────────────────
   Ao colapsar, o botão da IA e as tabs de painéis também somem —
   antes continuavam flutuando no centro e bloqueavam o mapa.
   O puxador de reabrir fica na margem do mapa (fora do centro). */
#ox-root.rail-collapsed #ox-ai-btn,
#ox-root.rail-collapsed #ox-collapsed-tabs,
#ox-root.rail-collapsed #ox-panel,
#ox-root.rail-collapsed #ox-search,
#ox-root.rail-collapsed #ox-tool { display: none !important; }

#ox-rail-tab.rail-hidden {
  left: 278px; margin-left: 0;
  top: 50%; margin-top: -34px;
  width: 16px; height: 68px;
  border-radius: 0 8px 8px 0;
  border: 1px solid rgba(0,229,255,.35);
  border-left: none;
  background: rgba(2,6,14,.72);
  opacity: .55;
}
#ox-rail-tab.rail-hidden:hover { opacity: 1; background: rgba(0,229,255,.18); }

/* ── TABS DE PAINÉIS COLAPSADOS (para descolapsar) ──────────── */
#ox-collapsed-tabs {
  position: absolute; z-index: 1190;
  left: var(--rail-x); margin-left: calc(var(--rail-w) / 2 + 8px); top: 118px;
  display: flex; flex-direction: column; gap: 4px;
  transition: margin-left .35s cubic-bezier(.4,0,.2,1);
}
#ox-collapsed-tabs.rail-hidden { margin-left: calc(var(--rail-w) / 2 + 8px); }
.ox-ctab {
  padding: 5px 8px;
  background: rgba(2,6,14,.92);
  border: 1px solid rgba(0,229,255,.3);
  border-radius: 6px;
  color: #9fd8ef;
  font-family: var(--font-hud); font-weight: 700;
  font-size: 8.5px; letter-spacing: 1.2px; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background .2s;
}
.ox-ctab:hover { background: rgba(0,229,255,.18); color: #fff; }

@media (max-width: 768px) {
  #ox-rail-tab.rail-hidden { left: 8px; margin-left: 0; top: auto; bottom: 112px; margin-top: 0; width: 22px; height: 42px; border-radius: 8px; border: 1px solid rgba(0,229,255,.35); opacity: 1; }
  #ox-collapsed-tabs { left: 36px; top: auto; bottom: 112px; margin-left: 0; flex-direction: row; flex-wrap: wrap; max-width: 200px; }
  #ox-collapsed-tabs.rail-hidden { left: 36px; margin-left: 0; }
  #ox-show-tools { left: 8px; right: auto; top: auto; bottom: 112px; margin-left: 0; margin-top: 0; }
}

/* ── CHAT IA ─────────────────────────────────────────────────── */
#ox-ai-btn {
  position: absolute; z-index: 1200;
  /* à ESQUERDA da rail, afastado da aba de colapsar — antes estava
     em cima da rail e bloqueava o "◀" e o primeiro botão */
  left: var(--rail-x); margin-left: calc(var(--rail-w) / -2 - 92px); top: 118px;
  width: var(--rail-w); height: var(--rail-w);
  background: linear-gradient(165deg, rgba(10,24,42,.92), rgba(4,8,18,.95));
  border: 1px solid rgba(180,75,255,.4);
  border-top: 2px solid var(--c-purple);
  border-radius: 12px;
  color: var(--c-purple);
  font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  transition: .2s;
}
#ox-ai-btn:hover { background: rgba(180,75,255,.2); box-shadow: 0 0 20px rgba(180,75,255,.4); }

#ox-ai-panel {
  position: absolute; z-index: 1200;
  left: var(--rail-x); margin-left: calc(var(--rail-w) / 2 + 8px); top: 118px;
  width: 340px;
  max-height: 480px;
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, rgba(8,20,36,.98), rgba(3,7,15,.99));
  border: 1px solid rgba(180,75,255,.3);
  border-top: 2px solid var(--c-purple);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
  backdrop-filter: blur(16px);
  overflow: hidden;
}
#ox-ai-panel[hidden] { display: none; }
.ox-ai-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(180,75,255,.15);
  font-family: var(--font-hud); font-weight: 700; font-size: 10px;
  letter-spacing: 2px; color: var(--c-purple); text-transform: uppercase;
}
#ox-ai-close {
  background: rgba(255,46,94,.12); border: 1px solid rgba(255,46,94,.4);
  border-radius: 6px; color: #ffc2ce; width: 26px; height: 26px;
  font-size: 12px; cursor: pointer;
}
#ox-ai-close:hover { background: rgba(255,46,94,.3); }
#ox-ai-messages {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 200px; max-height: 340px;
}
.ox-ai-msg {
  max-width: 85%; padding: 8px 12px;
  border-radius: 10px; font-family: var(--font-data); font-size: 11.5px;
  line-height: 1.5;
}
.ox-ai-msg.user {
  align-self: flex-end;
  background: rgba(0,229,255,.12); border: 1px solid rgba(0,229,255,.3);
  color: #dff4ff;
}
.ox-ai-msg.bot {
  align-self: flex-start;
  background: rgba(180,75,255,.1); border: 1px solid rgba(180,75,255,.25);
  color: #e8d5ff;
}
.ox-ai-inputwrap {
  display: flex; gap: 6px; padding: 10px;
  border-top: 1px solid rgba(180,75,255,.12);
}
#ox-ai-input { flex: 1; }
#ox-ai-send {
  width: 36px; height: 36px;
  background: rgba(180,75,255,.15); border: 1px solid rgba(180,75,255,.4);
  border-radius: 8px; color: var(--c-purple); font-size: 14px; cursor: pointer;
}
#ox-ai-send:hover { background: rgba(180,75,255,.3); }

@media (max-width: 768px) {
  #ox-ai-btn { left: 8px; top: auto; bottom: 168px; margin-left: 0; }
  #ox-ai-panel { left: 8px; right: 8px; top: auto; bottom: 220px; margin-left: 0; width: auto; max-height: 50vh; }
}

/* ── OCULTAR / MOSTRAR BARRAS ───────────────────────────────────── */
/* restaurar barras: na margem do mapa, nunca no centro */
#ox-show-tools {
  position: absolute; z-index: 1210;
  left: 278px; margin-left: 0;
  top: 50%; margin-top: -16px;
  height: 32px; padding: 0 10px;
  background: rgba(2,6,14,.94);
  border: 1px solid rgba(0,229,255,.35);
  border-radius: 14px;
  color: var(--c-cyan);
  font-family: var(--font-hud); font-weight: 700; font-size: 9px; letter-spacing: 1.4px;
  cursor: pointer; white-space: nowrap;
}
#ox-show-tools:hover { background: rgba(0,229,255,.18); }
#ox-show-tools[hidden] { display: none; }

/* barras escondidas: rail, painel, busca, ferramentas, IA e tabs */
#ox-root.tools-hidden #ox-rail,
#ox-root.tools-hidden #ox-rail-tab,
#ox-root.tools-hidden #ox-ai-btn,
#ox-root.tools-hidden #ox-collapsed-tabs,
#ox-root.tools-hidden #ox-panel,
#ox-root.tools-hidden #ox-search,
#ox-root.tools-hidden #ox-tool { display: none !important; }