/* Palette differenziata rispetto al concept "Nimbus" (viola/magenta, sistema solare):
   qui blu notte + ambra/ciano, layout a griglia/organigramma verticale. */
:root {
  --bg: #0a0e14;
  --panel: #10151f;
  --border: #1e2733;
  --accent-cyan: #2dd4bf;
  --accent-amber: #f5b942;
  --accent-red: #ef4444;
  --text: #e6edf3;
  --text-dim: #7d8a9a;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Inter", -apple-system, sans-serif; }

.topbar { display: flex; align-items: center; gap: 24px; padding: 14px 24px; background: var(--panel); border-bottom: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: 2px; }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-cyan); box-shadow: 0 0 12px var(--accent-cyan); }
.brand-sub { color: var(--text-dim); font-weight: 400; font-size: 13px; letter-spacing: 0; }
.tabs { display: flex; gap: 4px; flex: 1; }
.tab-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); padding: 8px 16px; border-radius: 6px; cursor: pointer; }
.tab-btn.active { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.mode-badge { background: rgba(245,185,66,0.15); color: var(--accent-amber); border: 1px solid var(--accent-amber); padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600; }

main { padding: 24px; max-width: 1200px; margin: 0 auto; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

#tab-team { display: flex; gap: 20px; align-items: flex-start; }
.network-wrap { flex: 2; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px; }
.feed-panel { flex: 1; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; max-height: 600px; overflow-y: auto; }
.feed-panel h3 { margin-top: 0; color: var(--accent-cyan); }
#decision-feed { list-style: none; padding: 0; margin: 0; }
#decision-feed li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.sig-BUY { color: #4ade80; } .sig-SELL { color: var(--accent-red); } .sig-HOLD { color: var(--text-dim); }

table { width: 100%; border-collapse: collapse; margin-top: 16px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
th { color: var(--accent-cyan); }

form#backtest-form { display: flex; flex-wrap: wrap; gap: 12px; background: var(--panel); padding: 16px; border-radius: 10px; border: 1px solid var(--border); }
form#backtest-form label { display: flex; flex-direction: column; font-size: 12px; color: var(--text-dim); gap: 4px; }
form#backtest-form input { background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 6px; border-radius: 4px; }
form#backtest-form button { align-self: flex-end; background: var(--accent-cyan); border: none; color: #06231f; font-weight: 700; padding: 8px 18px; border-radius: 6px; cursor: pointer; }

#backtest-results { margin-top: 20px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metric { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.metric .val { font-size: 22px; font-weight: 700; }
.metric .lbl { color: var(--text-dim); font-size: 12px; }

.markets-hint { color: var(--text-dim); font-size: 13px; max-width: 700px; }
.markets-form { display: flex; flex-direction: column; gap: 10px; max-width: 700px; }
.market-toggle { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; cursor: pointer; }
.market-toggle input { width: 18px; height: 18px; accent-color: var(--accent-cyan); }
.market-name { font-weight: 700; min-width: 130px; }
.market-symbols { color: var(--text-dim); font-size: 12px; }
#markets-save { margin-top: 14px; background: var(--accent-cyan); border: none; color: #06231f; font-weight: 700; padding: 8px 18px; border-radius: 6px; cursor: pointer; }
#markets-status { color: var(--accent-amber); font-size: 13px; }

#tab-voice { text-align: center; padding: 40px 0; }
.voice-hint { color: var(--text-dim); font-size: 14px; max-width: 560px; margin: 0 auto 20px; }
#voice-start-btn { background: var(--accent-amber); border: none; padding: 14px 28px; border-radius: 30px; font-size: 16px; font-weight: 700; cursor: pointer; }

/* --- Conversazione vocale a schermo intero --- */
.voice-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: radial-gradient(circle at 50% 42%, #0d1a20 0%, var(--bg) 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.voice-overlay.hidden { display: none; }
.voice-close {
  position: absolute; top: 24px; right: 28px; width: 38px; height: 38px; border-radius: 50%;
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  font-size: 16px; cursor: pointer;
}
.voice-close:hover { color: var(--text); border-color: var(--accent-cyan); }

/* Pulsante "tocca per schermo intero": compare solo quando la Fullscreen API
   fallisce (es. avvio a mani libere via doppio battito, che non e' un gesto
   utente valido per il browser) — un solo tocco qui basta a soddisfare il
   requisito del browser e ottenere il vero fullscreen. */
.fullscreen-hint {
  position: absolute; top: 24px; left: 50%; transform: translateX(-50%);
  z-index: 1001; background: var(--accent-amber); border: none; color: #201400;
  font-weight: 700; font-size: 14px; padding: 10px 20px; border-radius: 24px;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.fullscreen-hint.hidden { display: none; }
.network-fullscreen { width: min(96vw, 1600px); height: min(90vh, 900px); }

/* --- Stile "constellation" ispirato a Nimbus (raggi centrali, nodi ad anello
   con alone, catene nodo-a-nodo, etichette di zona per tier) ma con la palette
   propria di Sirius (ciano/ambra/rosso) per restare differenziati. --- */
.orbit-link { stroke: var(--border); stroke-width: 1; opacity: 0.55; transition: stroke 0.3s, opacity 0.3s; }
.orbit-link.tier-intelligence { stroke: var(--accent-cyan); opacity: 0.35; }
.orbit-link.tier-analysis { stroke: var(--accent-amber); opacity: 0.35; }
.orbit-link.tier-execution { stroke: var(--accent-red); opacity: 0.35; }
.orbit-link.active { stroke: var(--accent-amber); opacity: 1; }

.chain-link { stroke-width: 1; opacity: 0.5; }
.chain-link.tier-intelligence { stroke: var(--accent-cyan); }
.chain-link.tier-analysis { stroke: var(--accent-amber); }
.chain-link.tier-execution { stroke: var(--accent-red); }
.chain-marker { opacity: 0.7; }
.chain-marker.tier-intelligence { fill: var(--accent-cyan); }
.chain-marker.tier-analysis { fill: var(--accent-amber); }
.chain-marker.tier-execution { fill: var(--accent-red); }

.tier-label {
  font-size: 11px; font-weight: 700; letter-spacing: 3px; opacity: 0.85;
  paint-order: stroke; stroke: #000a10; stroke-width: 3px; stroke-linejoin: round;
}
.tier-label.tier-intelligence { fill: var(--accent-cyan); }
.tier-label.tier-analysis { fill: var(--accent-amber); }
.tier-label.tier-execution { fill: var(--accent-red); }

/* Nodo "ad anello" (non pieno) con alone esterno, come in Nimbus. */
.orbit-node .node { fill: var(--bg); stroke: var(--border); stroke-width: 2; transition: all 0.3s; }
.orbit-node.tier-intelligence .node { stroke: var(--accent-cyan); }
.orbit-node.tier-analysis .node { stroke: var(--accent-amber); }
.orbit-node.tier-execution .node { stroke: var(--accent-red); }
.orbit-node .node-halo { fill: none; stroke-width: 1; opacity: 0.35; transition: all 0.3s; }
.orbit-node.tier-intelligence .node-halo { stroke: var(--accent-cyan); }
.orbit-node.tier-analysis .node-halo { stroke: var(--accent-amber); }
.orbit-node.tier-execution .node-halo { stroke: var(--accent-red); }
.orbit-node .node-dot { opacity: 0.85; }
.orbit-node.tier-intelligence .node-dot { fill: var(--accent-cyan); }
.orbit-node.tier-analysis .node-dot { fill: var(--accent-amber); }
.orbit-node.tier-execution .node-dot { fill: var(--accent-red); }
.orbit-node.active .node { filter: drop-shadow(0 0 10px currentColor); }
.orbit-node.tier-intelligence.active .node { stroke: var(--accent-cyan); filter: drop-shadow(0 0 12px var(--accent-cyan)); }
.orbit-node.tier-analysis.active .node { stroke: var(--accent-amber); filter: drop-shadow(0 0 12px var(--accent-amber)); }
.orbit-node.tier-execution.active .node { stroke: var(--accent-red); filter: drop-shadow(0 0 12px var(--accent-red)); }
.orbit-node.active .node-halo { opacity: 0.9; animation: halo-breathe 1.4s ease-in-out infinite; }
.node-caption { fill: var(--text); font-size: 11px; font-style: italic; opacity: 0.9; }

/* Leggibilita' di nome/ruolo nell'orbita a schermo intero: testo bianco pieno
   con un alone scuro dietro (paint-order) per restare leggibile anche sopra i
   raggi/linee dello sfondo, e ruolo colorato per tier invece del grigio spento
   (poco leggibile) usato prima. */
.orbit-node .node-label {
  fill: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
  paint-order: stroke; stroke: #000a10; stroke-width: 3px; stroke-linejoin: round;
}
.orbit-node .node-role {
  font-size: 10px; font-weight: 600; opacity: 0.95;
  paint-order: stroke; stroke: #000a10; stroke-width: 2.5px; stroke-linejoin: round;
}
.orbit-node.tier-intelligence .node-role { fill: var(--accent-cyan); }
.orbit-node.tier-analysis .node-role { fill: var(--accent-amber); }
.orbit-node.tier-execution .node-role { fill: var(--accent-red); }

@keyframes halo-breathe {
  0%, 100% { r: 22; }
  50% { r: 27; }
}

/* Corona di raggi ("sunburst") attorno al nucleo di Sirius, stile Nimbus, in
   rotazione lenta e continua per dare "movimento" anche quando nessuno parla. */
#sirius-ray-group { transform-origin: 800px 450px; animation: ray-rotate 60s linear infinite; }
.orb-ray { stroke: var(--accent-cyan); stroke-width: 1; opacity: 0.35; }
.orb-ray-long { opacity: 0.6; }
.voice-overlay.sirius-speaking #sirius-ray-group,
.voice-overlay.agent-speaking #sirius-ray-group { animation-duration: 14s; }
@keyframes ray-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.orb-sublabel { fill: var(--text-dim); font-size: 9px; font-weight: 600; letter-spacing: 2px; }

#sirius-orb-group .orb-core { fill: url(#orbGradient); }
#sirius-orb-group .orb-ring { fill: none; stroke: var(--accent-cyan); stroke-width: 2; opacity: 0; }
#sirius-orb-group .orb-label { fill: #06231f; font-size: 13px; font-weight: 700; letter-spacing: 2px; }

.voice-overlay.listening #sirius-orb-group .orb-core { animation: orb-breathe 3s ease-in-out infinite; }
.voice-overlay.thinking #sirius-orb-group .orb-core { animation: orb-breathe 1.2s ease-in-out infinite; }
.voice-overlay.sirius-speaking #sirius-orb-group .orb-ring { animation: orb-ripple 1.3s ease-out infinite; }
.voice-overlay.sirius-speaking #sirius-orb-group .orb-ring:nth-child(2) { animation-delay: 0.35s; }
.voice-overlay.sirius-speaking #sirius-orb-group .orb-ring:nth-child(3) { animation-delay: 0.7s; }

@keyframes orb-breathe {
  0%, 100% { r: 90; filter: drop-shadow(0 0 14px var(--accent-cyan)); }
  50% { r: 95; filter: drop-shadow(0 0 26px var(--accent-cyan)); }
}
@keyframes orb-ripple {
  0% { r: 90; stroke-width: 3; opacity: 0.85; }
  100% { r: 230; stroke-width: 0; opacity: 0; }
}

/* Vibrazione REALE della sfera di Sirius e dei nodi degli agenti: il raggio
   (attributo "r") e il bagliore (filter drop-shadow) vengono aggiornati
   direttamente via JS ad ogni frame in base al livello sonoro/tono reali
   dell'audio in riproduzione (vedi attachAudioReactive in app.js) — qui basta
   una transizione morbida perche' il cambio non sembri a scatti tra un frame
   e l'altro. */
.orb-core, .orbit-node .node { transition: r 0.05s linear, filter 0.05s linear; }

.voice-status { margin-top: 20px; font-size: 18px; font-weight: 700; color: var(--accent-cyan); letter-spacing: 1px; }
/* Solo voce durante la conversazione: nessuna trascrizione scritta a schermo. */
.voice-captions { display: none; }

.node { fill: var(--panel); stroke: var(--border); stroke-width: 1.5; transition: all 0.3s; }
.node.pulse { stroke: var(--accent-cyan); filter: drop-shadow(0 0 8px var(--accent-cyan)); }
.node-label { fill: var(--text); font-size: 12px; font-weight: 600; }
.node-role { fill: var(--text-dim); font-size: 9px; }
.link { stroke: var(--border); stroke-width: 1; }

/* --- Responsive: si adatta da solo a qualsiasi schermo (desktop, tablet, iPhone) --- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 900px) {
  #tab-team { flex-direction: column; }
  .network-wrap, .feed-panel { width: 100%; flex: none; }
  .feed-panel { max-height: 320px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .tabs { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; flex: none; }
  .tab-btn { white-space: nowrap; padding: 7px 12px; font-size: 13px; }
  .mode-badge { margin-left: auto; }
  main { padding: 14px; }

  form#backtest-form { flex-direction: column; align-items: stretch; }
  form#backtest-form label { width: 100%; }
  form#backtest-form button { align-self: stretch; }

  .market-toggle { flex-wrap: wrap; }

  .network-fullscreen { width: 96vw; height: 62vh; }
  .voice-status { font-size: 16px; padding: 0 16px; text-align: center; }
  .voice-captions { font-size: 14px; padding: 0 16px; }
  .voice-close { top: 16px; right: 16px; }
}

@media (max-width: 430px) {
  .brand-sub { display: none; }
  .tab-btn { padding: 6px 10px; font-size: 12px; }
  th, td { padding: 6px 6px; font-size: 12px; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .metric .val { font-size: 18px; }
}