/* ===== VARIÁVEIS ===== */
:root {
  --cyan: #00d4ff;
  --cyan-dim: rgba(0, 212, 255, 0.15);
  --cyan-glow: rgba(0, 212, 255, 0.4);
  --blue-dark: #0a1628;
  --blue-mid: #0d2137;
  --orange: #ff6b00;
  --green: #00ff88;
  --text: #c8e8f0;
  --text-dim: #4a7a8a;
  --border: rgba(0, 212, 255, 0.3);
  --border-bright: rgba(0, 212, 255, 0.7);
  --font: 'Courier New', 'Lucida Console', monospace;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #000;
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
}

/* ===== FRAME PRINCIPAL ===== */
#hud-frame {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* ===== CANTOS HUD ===== */
.hud-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 10;
}
.hud-corner.top-left    { top: 0; left: 0;  border-top: 2px solid var(--cyan-glow); border-left: 2px solid var(--cyan-glow); }
.hud-corner.top-right   { top: 0; right: 0; border-top: 2px solid var(--cyan-glow); border-right: 2px solid var(--cyan-glow); }
.hud-corner.bottom-left { bottom: 0; left: 0;  border-bottom: 2px solid var(--cyan-glow); border-left: 2px solid var(--cyan-glow); }
.hud-corner.bottom-right{ bottom: 0; right: 0; border-bottom: 2px solid var(--cyan-glow); border-right: 2px solid var(--cyan-glow); }

/* ===== HEADER ===== */
#hud-header {
  position: relative;
  padding: 12px 20px 0;
  background: linear-gradient(180deg, rgba(10,22,40,0.98) 0%, rgba(10,22,40,0.85) 100%);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

#jarvis-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Arc Reactor animado */
#arc-reactor {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 10%, var(--cyan) 40%, transparent 70%);
  box-shadow: 0 0 12px var(--cyan), 0 0 24px var(--cyan-glow), inset 0 0 8px rgba(255,255,255,0.3);
  animation: reactor-pulse 2s ease-in-out infinite;
  position: relative;
}
#arc-reactor::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.6);
  animation: reactor-spin 4s linear infinite;
}
@keyframes reactor-pulse {
  0%, 100% { box-shadow: 0 0 12px var(--cyan), 0 0 24px var(--cyan-glow); }
  50%       { box-shadow: 0 0 20px var(--cyan), 0 0 40px var(--cyan-glow), 0 0 60px rgba(0,212,255,0.2); }
}
@keyframes reactor-spin {
  to { transform: rotate(360deg); }
}

#jarvis-name {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 6px;
  color: var(--cyan);
  text-shadow: 0 0 10px var(--cyan-glow);
}

#status-indicators {
  display: flex;
  gap: 12px;
  align-items: center;
}

.indicator {
  font-size: 11px;
  letter-spacing: 2px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  background: var(--cyan-dim);
  color: var(--cyan);
}

#conn-status { color: var(--green); border-color: rgba(0,255,136,0.4); background: rgba(0,255,136,0.08); }
#conn-status.offline { color: var(--orange); border-color: rgba(255,107,0,0.4); }

#logout-btn {
  background: transparent;
  border: 1px solid rgba(255,107,0,0.3);
  color: var(--text-dim);
  font-size: 14px;
  width: 28px; height: 28px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; justify-content: center;
}
#logout-btn:hover { color: var(--orange); border-color: var(--orange); box-shadow: 0 0 8px rgba(255,107,0,0.3); }

/* ===== BUSINESS NAV ===== */
#business-nav {
  display: flex;
  gap: 1px;
  margin-bottom: 0;
  flex-wrap: wrap;
}

.biz-btn {
  background: transparent;
  border: none;
  border-top: 2px solid transparent;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.biz-btn:hover { color: var(--cyan); }
.biz-btn.active {
  color: var(--cyan);
  border-top-color: var(--cyan);
  background: var(--cyan-dim);
  text-shadow: 0 0 8px var(--cyan-glow);
}

/* ===== CHAT AREA ===== */
#chat-area {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  position: relative;
  scroll-behavior: smooth;
}

/* Fundo hexagonal */
#hex-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52'%3E%3Cpolygon points='30,2 58,16 58,44 30,58 2,44 2,16' fill='none' stroke='%2300d4ff' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 60px 52px;
}

/* Scrollbar */
#chat-area::-webkit-scrollbar { width: 4px; }
#chat-area::-webkit-scrollbar-track { background: transparent; }
#chat-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

#messages {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===== MENSAGENS ===== */
.msg {
  display: flex;
  gap: 12px;
  animation: msg-appear 0.2s ease-out;
}
@keyframes msg-appear {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.msg.user { flex-direction: row-reverse; }

.msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0;
  border: 1px solid var(--border);
}
.msg.jarvis .msg-avatar {
  background: radial-gradient(circle, rgba(0,212,255,0.3), transparent);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 8px var(--cyan-glow);
}
.msg.user .msg-avatar {
  background: rgba(255,107,0,0.1);
  border-color: rgba(255,107,0,0.4);
  color: var(--orange);
}

.msg-bubble {
  max-width: 75%;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg.jarvis .msg-bubble {
  background: var(--cyan-dim);
  border: 1px solid var(--border);
  border-left: 2px solid var(--cyan);
  color: var(--text);
}
.msg.user .msg-bubble {
  background: rgba(255,107,0,0.08);
  border: 1px solid rgba(255,107,0,0.2);
  border-right: 2px solid var(--orange);
  color: var(--text);
  text-align: right;
}

/* Cursor piscante durante streaming */
.msg-bubble.streaming::after {
  content: '▋';
  color: var(--cyan);
  animation: blink 0.7s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Tool call indicator */
.tool-indicator {
  font-size: 11px;
  color: var(--cyan);
  letter-spacing: 1px;
  padding: 4px 0;
  opacity: 0.7;
}
.tool-indicator::before { content: '⟶ '; }

/* ===== INPUT AREA ===== */
#input-area {
  position: relative;
  padding: 12px 20px 16px;
  background: linear-gradient(0deg, rgba(10,22,40,0.98) 0%, rgba(10,22,40,0.85) 100%);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

#input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

#msg-input {
  flex: 1;
  background: rgba(0,212,255,0.05);
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 14px;
  resize: none;
  max-height: 120px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  line-height: 1.5;
}
#msg-input::placeholder { color: var(--text-dim); }
#msg-input:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 12px var(--cyan-dim);
}

#send-btn, #mic-btn {
  width: 44px;
  height: 44px;
  background: var(--cyan-dim);
  border: 1px solid var(--border);
  color: var(--cyan);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
#send-btn svg, #mic-btn svg { width: 18px; height: 18px; }
#send-btn:hover, #mic-btn:hover {
  background: rgba(0,212,255,0.25);
  border-color: var(--cyan);
  box-shadow: 0 0 12px var(--cyan-glow);
}
#send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

#mic-btn.listening {
  color: var(--orange);
  border-color: var(--orange);
  background: rgba(255,107,0,0.15);
  animation: mic-pulse 1s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,0,0.4); }
  50%       { box-shadow: 0 0 0 8px rgba(255,107,0,0); }
}

/* Listening bar */
#listening-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--orange);
}
#listening-bar.hidden { display: none; }

.pulse-ring {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulse-ring 1s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* ===== SCAN LINE ===== */
#hud-frame::after {
  content: '';
  position: fixed;
  top: -100%;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan-glow), transparent);
  animation: scan 8s linear infinite;
  pointer-events: none;
  z-index: 100;
}
@keyframes scan {
  to { top: 200%; }
}

/* ===== RESPONSIVO ===== */
@media (max-width: 600px) {
  #jarvis-name { font-size: 16px; letter-spacing: 3px; }
  .msg-bubble { max-width: 90%; font-size: 13px; }
  .biz-btn { padding: 6px 10px; font-size: 10px; }
}