/* Jarvis voice PWA — estética KITT (Knight Industries Two Thousand) */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --bg: #000;
  --fg: #ff1a1a;
  --fg-dim: #5a0a0a;
  --fg-ok: #1aff5a;
  --accent: #ff1a1a;
  --danger: #ff1a1a;
  --pad: 1rem;
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, "SF Mono", Monaco, Menlo, monospace;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

body {
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--pad) calc(var(--pad) * 1.25);
  border-bottom: 1px solid rgba(255, 26, 26, 0.18);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-shadow: 0 0 8px var(--fg);
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg-dim);
  transition: background 0.2s;
  box-shadow: 0 0 6px transparent;
}

.dot.connecting { background: #ffaa00; box-shadow: 0 0 8px #ffaa00; animation: pulse 1.2s infinite; }
.dot.live       { background: var(--fg-ok); box-shadow: 0 0 8px var(--fg-ok); }
.dot.error      { background: var(--fg); box-shadow: 0 0 8px var(--fg); }

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.status {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg);
  opacity: 0.6;
}

/* ───────── KITT visualizer ───────── */

#kitt-stage {
  position: relative;
  width: 100%;
  height: 38vh;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at center, rgba(255, 26, 26, 0.08), transparent 70%),
    var(--bg);
  border-bottom: 1px solid rgba(255, 26, 26, 0.18);
  /* glass effect: panel cosmético tipo KITT */
  position: relative;
}

#kitt-stage::before {
  /* Glow lateral negro: simula la moldura cromada del coche */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, #000 0%, transparent 6%, transparent 94%, #000 100%);
}

#kitt-stage::after {
  /* Marco rectangular interior, fino */
  content: "";
  position: absolute;
  inset: 8% 4%;
  pointer-events: none;
  border: 1px solid rgba(255, 26, 26, 0.25);
  border-radius: 4px;
  box-shadow:
    inset 0 0 24px rgba(255, 26, 26, 0.12);
}

#kitt-canvas {
  width: calc(100% - 8vw);
  height: calc(38vh - 6vh);
  max-height: 360px;
  display: block;
}

/* ───────── log ───────── */

main {
  flex: 1;
  overflow-y: auto;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  -webkit-overflow-scrolling: touch;
}

.msg {
  max-width: 85%;
  padding: 0.55rem 0.8rem;
  border-radius: 0.25rem;
  line-height: 1.4;
  font-size: 0.85rem;
  font-family: ui-monospace, monospace;
  word-wrap: break-word;
  animation: slide-in 0.18s ease-out;
  letter-spacing: 0.02em;
}

.msg.me {
  align-self: flex-end;
  background: rgba(255, 26, 26, 0.12);
  color: #ffd5d5;
  border: 1px solid rgba(255, 26, 26, 0.3);
}

.msg.bot {
  align-self: flex-start;
  background: rgba(255, 26, 26, 0.04);
  color: var(--fg);
  border: 1px solid rgba(255, 26, 26, 0.2);
  text-shadow: 0 0 6px rgba(255, 26, 26, 0.3);
}

.msg.sys {
  align-self: center;
  background: transparent;
  color: rgba(255, 26, 26, 0.5);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

@keyframes slide-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ───────── footer & button ───────── */

footer {
  padding: var(--pad) calc(var(--pad) * 1.25) calc(var(--pad) * 1.25);
  border-top: 1px solid rgba(255, 26, 26, 0.18);
}

#talk {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--fg);
  border-radius: 4px;
  background: transparent;
  color: var(--fg);
  font-size: 0.95rem;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  min-height: 56px;
  text-shadow: 0 0 6px rgba(255, 26, 26, 0.6);
  box-shadow: 0 0 12px rgba(255, 26, 26, 0.2), inset 0 0 8px rgba(255, 26, 26, 0.05);
}

#talk:active { transform: scale(0.98); }

#talk.live {
  background: var(--fg);
  color: #000;
  text-shadow: none;
  box-shadow: 0 0 24px rgba(255, 26, 26, 0.6);
}

#talk.live .mic-icon { animation: blink 1s infinite; }

#talk:disabled {
  opacity: 0.4;
  cursor: wait;
}

.mic-icon { font-size: 0.6rem; }

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ───────── auth dialog ───────── */

dialog {
  border: 1px solid var(--fg);
  border-radius: 4px;
  background: #0a0000;
  color: var(--fg);
  padding: 1.5rem;
  max-width: 90vw;
  width: 320px;
  box-shadow: 0 0 32px rgba(255, 26, 26, 0.3);
  font-family: ui-monospace, monospace;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}

dialog h2 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

dialog p {
  margin: 0 0 1rem;
  color: rgba(255, 26, 26, 0.6);
  font-size: 0.8rem;
}

dialog input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 26, 26, 0.4);
  background: #000;
  color: var(--fg);
  font-size: 0.9rem;
  font-family: ui-monospace, monospace;
  margin-bottom: 1rem;
}

dialog .row { display: flex; gap: 0.5rem; justify-content: flex-end; }

dialog button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--fg-dim);
  border-radius: 4px;
  background: transparent;
  color: var(--fg);
  font-family: ui-monospace, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

dialog button[value="ok"], dialog button[type="submit"] {
  border-color: var(--fg);
  box-shadow: 0 0 8px rgba(255, 26, 26, 0.3);
}