/* ─── Reset & Variables ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #03050d;
  --surface:     #070b14;
  --surface2:    #0b1120;
  --border:      #0e1e30;
  --accent:      #00c8ff;
  --accent2:     #5de8ff;
  --accent-dim:  rgba(0, 200, 255, 0.08);
  --accent-glow: rgba(0, 200, 255, 0.25);
  --text:        #bce8f5;
  --text-dim:    #4a7a90;
  --muted:       #1e3545;
  --green:       #00ff9d;
  --amber:       #ff9900;
  --red:         #ff2255;
  --user-bg:     #0d1525;
}

html, body { height: 100%; overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, sans-serif;
  display: flex;
  justify-content: center;
}

/* ─── Grid background ─────────────────────────────────────── */
.grid-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(0,200,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,200,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ─── App container ───────────────────────────────────────── */
.app {
  width: 100%;
  max-width: 720px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  z-index: 1;
}

/* Corner brackets on app */
.app::before, .app::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  z-index: 100;
  pointer-events: none;
}
.app::before {
  top: 0; left: 0;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  box-shadow: -2px -2px 8px var(--accent-glow);
}
.app::after {
  bottom: 0; right: 0;
  border-bottom: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  box-shadow: 2px 2px 8px var(--accent-glow);
}

/* ─── Header ─────────────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 52px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 20;
  position: relative;
  overflow: hidden;
}

/* Scan line animation */
.header-scan {
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0,200,255,0.06), transparent);
  animation: scan 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scan {
  0%   { left: -60%; }
  100% { left: 120%; }
}

.header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.brand-arrow {
  color: var(--accent);
  font-size: 0.9rem;
  animation: blink-arrow 2s step-end infinite;
}
@keyframes blink-arrow {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

.brand {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--accent2);
  font-family: 'Courier New', monospace;
}

.brand-version {
  font-size: 0.6rem;
  color: var(--text-dim);
  font-family: 'Courier New', monospace;
  letter-spacing: 0.1em;
}

.header-center {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Courier New', monospace;
  font-size: 0.62rem;
}

.hud-label {
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

.hud-value {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.hud-sep {
  color: var(--muted);
  margin: 0 4px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Status dot */
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  flex-shrink: 0;
}
.status-dot.thinking {
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  animation: dot-pulse 0.6s ease-in-out infinite alternate;
}
@keyframes dot-pulse { from { opacity: 1; } to { opacity: 0.2; } }

/* HUD buttons */
.hud-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 4px 10px;
  font-size: 0.62rem;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
}
.hud-btn:hover, .hud-btn.open {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
  box-shadow: 0 0 10px var(--accent-glow);
}

.hud-btn--icon {
  padding: 5px 8px;
  clip-path: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

/* Mode dropdown */
.mode-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 52px;
  background: var(--surface2);
  border: 1px solid var(--border);
  z-index: 40;
  min-width: 140px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.mode-dropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.mode-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: all 0.15s;
  border-left: 2px solid transparent;
}
.mode-opt:hover {
  background: var(--accent-dim);
  color: var(--text);
  border-left-color: var(--accent);
}
.mode-opt.active {
  color: var(--accent);
  border-left-color: var(--accent);
}

.mode-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ─── Messages ───────────────────────────────────────────── */
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.message { display: flex; flex-direction: column; }
.message.user  { align-items: flex-end; }
.message.agent { align-items: flex-start; }

/* Agent bubble — panel HUD */
.message.agent .bubble {
  max-width: 82%;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  color: var(--text);
  font-size: 0.91rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
  box-shadow: inset 0 0 20px rgba(0,200,255,0.03), 0 0 12px rgba(0,0,0,0.4);
}
/* Corner brackets on kosmos bubble */
.message.agent .bubble::before,
.message.agent .bubble::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border-color: var(--accent);
  border-style: solid;
}
.message.agent .bubble::before {
  top: -1px; left: -2px;
  border-width: 1.5px 0 0 0;
}
.message.agent .bubble::after {
  bottom: -1px; right: -1px;
  border-width: 0 1.5px 1.5px 0;
}

.bubble-tag {
  display: block;
  font-size: 0.58rem;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 6px;
  opacity: 0.7;
}

/* User bubble */
.message.user .bubble {
  max-width: 78%;
  padding: 10px 15px;
  background: var(--user-bg);
  border: 1px solid rgba(0,200,255,0.15);
  border-right: 2px solid var(--accent);
  color: var(--text);
  font-size: 0.91rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  clip-path: polygon(8px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 8px);
}

/* Speak button on kosmos messages */
.speak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 22px; height: 22px;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}
.speak-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
  box-shadow: 0 0 6px var(--accent-glow);
}

/* Typing */
.message.typing .bubble {
  color: var(--text-dim);
}

/* Timestamps */
.ts {
  font-size: 0.6rem;
  font-family: 'Courier New', monospace;
  color: var(--text-dim);
  margin-top: 4px;
  letter-spacing: 0.08em;
  padding: 0 2px;
}

/* ─── Bottom bar ─────────────────────────────────────────── */
.bottom-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 18px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* Mic button */
.mic-fab {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 0 12px var(--accent-glow);
}
.mic-fab:hover {
  background: var(--accent-dim);
  box-shadow: 0 0 20px var(--accent-glow);
  transform: scale(1.05);
}
.mic-fab.active {
  background: rgba(255, 34, 85, 0.15);
  border-color: var(--red);
  color: var(--red);
  box-shadow: 0 0 16px rgba(255,34,85,0.4);
}

/* Input HUD */
.input-wrap { flex: 1; }

.input-hud {
  display: flex;
  align-items: flex-end;
  gap: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-hud:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}

.input-prefix {
  color: var(--accent);
  font-family: 'Courier New', monospace;
  font-size: 1.1rem;
  padding: 11px 10px;
  flex-shrink: 0;
}

#user-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 11px 8px;
  font-size: 0.9rem;
  font-family: 'Courier New', monospace;
  outline: none;
  caret-color: var(--accent);
  resize: none;
  overflow-y: hidden;
  max-height: 150px;
  line-height: 1.5;
}
#user-input::placeholder { color: var(--text-dim); }
#user-input:disabled { opacity: 0.4; cursor: not-allowed; }

#send-btn {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--text-dim);
  width: 44px; height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
#send-btn:hover { color: var(--accent); background: var(--accent-dim); }
#send-btn:disabled { opacity: 0.25; cursor: not-allowed; }

/* ─── Imágenes en el chat ────────────────────────────────── */
.msg-images {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.msg-img {
  max-width: 200px;
  max-height: 160px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
}
.msg-img:hover { opacity: 0.9; }

/* ─── Attach button ─────────────────────────────────────── */
.attach-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  width: 36px; height: 36px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.attach-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

/* ─── File preview bar ───────────────────────────────────── */
.file-preview-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--surface2);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.file-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 24px 4px 6px;
  font-size: 0.75rem;
  color: var(--text);
  overflow: hidden;
}

.file-chip-rm {
  position: absolute;
  right: 2px; top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 2px 4px;
}
.file-chip-rm:hover { color: var(--red); }

.file-counter {
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-left: auto;
  font-family: 'Courier New', monospace;
}

/* ─── Voice screen ───────────────────────────────────────── */
.voice-screen {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, #050d1a 0%, var(--bg) 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.app.voice-active .voice-screen { opacity: 1; pointer-events: all; }

/* Decorative outer ring */
.voice-ring-outer {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  border: 1px solid rgba(0,200,255,0.1);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: outer-spin 12s linear infinite;
  pointer-events: none;
}
.voice-ring-outer::before {
  content: '';
  position: absolute;
  top: -4px; left: 30%;
  width: 40%; height: 6px;
  background: var(--accent);
  border-radius: 3px;
  box-shadow: 0 0 12px var(--accent);
}
@keyframes outer-spin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }

/* Orb */
.orb-wrap {
  position: relative;
  width: 155px; height: 155px;
  display: flex; align-items: center; justify-content: center;
}

.orb {
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--accent2), var(--accent), #003a55);
  position: relative; z-index: 2;
  box-shadow: 0 0 30px var(--accent-glow), 0 0 60px rgba(0,200,255,0.1);
}

.orb-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid var(--accent); opacity: 0; pointer-events: none;
}
.r1 { width: 130px; height: 130px; }
.r2 { width: 158px; height: 158px; }
.r3 { width: 186px; height: 186px; }

[data-state="listening"] .orb  { animation: orb-pulse 1.6s ease-out infinite; }
[data-state="listening"] .r1   { animation: ring-out 1.6s ease-out infinite; }
[data-state="listening"] .r2   { animation: ring-out 1.6s ease-out 0.3s infinite; }
[data-state="listening"] .r3   { animation: ring-out 1.6s ease-out 0.6s infinite; }
[data-state="thinking"]  .orb  { animation: orb-hue 1.5s linear infinite; }
[data-state="speaking"]  .orb  { animation: orb-wave 0.5s ease-in-out infinite alternate; background: radial-gradient(circle at 35% 35%, #6effcc, var(--green), #003a22); box-shadow: 0 0 30px rgba(0,255,157,0.35); }

@keyframes orb-pulse { 0%{box-shadow:0 0 0 0 rgba(0,200,255,.5),0 0 30px var(--accent-glow)}70%{box-shadow:0 0 0 20px rgba(0,200,255,0),0 0 30px var(--accent-glow)}100%{box-shadow:0 0 0 0 rgba(0,200,255,0),0 0 30px var(--accent-glow)} }
@keyframes ring-out  { 0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.12);opacity:0} }
@keyframes orb-hue   { from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)} }
@keyframes orb-wave  { from{transform:scale(1)}to{transform:scale(1.08)} }

.voice-status {
  font-size: 0.72rem;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.2em;
  min-height: 16px;
  text-align: center;
}

.mic-meter {
  width: 140px; height: 2px;
  background: var(--muted); border-radius: 1px;
  overflow: hidden; opacity: 0; transition: opacity 0.3s;
}
.mic-meter span {
  display: block; height: 100%; width: 0%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  transition: width 0.08s;
}

.voice-transcript {
  font-size: 0.9rem;
  font-family: 'Courier New', monospace;
  color: var(--text-dim);
  text-align: center;
  max-width: 75%;
  min-height: 1.4em;
  line-height: 1.6;
}

.voice-stop-btn {
  display: flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 8px 20px;
  cursor: pointer;
  font-size: 0.65rem;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 0.15em;
  transition: all 0.2s;
  position: absolute;
  bottom: 36px;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0% 50%);
}
.voice-stop-btn:hover {
  border-color: var(--red);
  color: var(--red);
  background: rgba(255,34,85,0.1);
  box-shadow: 0 0 12px rgba(255,34,85,0.2);
}