/* Pantalla aditiva de 600x600: el negro es transparente, así que fondo negro y texto muy contrastado. */
:root {
  color-scheme: dark;
  --bg: #000;
  --panel: #10101a;
  --panel2: #1a1a2a;
  --text: #fff;
  --muted: #b0b0c4;
  --accent: #19d3ff;
  --accent2: #3dff9a;
  --warn: #ffb020;
  --danger: #ff4d6d;
  --focus: #19d3ff;
  --focus-glow: rgba(25, 211, 255, 0.45);
  --r: 14px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 20px;
  overflow: hidden;
}

#app { width: 100%; height: 100%; position: relative; }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.hidden { display: none !important; }

/* Cabecera */
.header {
  display: flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 12px 22px;
  background: var(--panel); flex-shrink: 0;
}
.header h1 { flex: 1; font-size: 24px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: #555; flex-shrink: 0; }
.dot.on { background: var(--accent2); box-shadow: 0 0 10px var(--accent2); }
.status { font-size: 17px; color: var(--warn); white-space: nowrap; }

/* Contenido */
.content {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 14px 22px; display: flex; flex-direction: column; gap: 10px;
}
.content.center { justify-content: center; gap: 18px; }
.content.center .text-input { flex: 0 0 auto; width: 100%; text-align: center; letter-spacing: 2px; }
.lead { font-size: 22px; color: var(--muted); text-align: center; }
.error { color: var(--danger); font-size: 18px; text-align: center; }
.empty { color: var(--muted); font-size: 20px; text-align: center; padding: 24px 12px; line-height: 1.35; }

/* Foco visible (D-pad / Neural Band) */
.focusable { outline: none; border: 3px solid transparent; transition: border-color 0.12s, box-shadow 0.12s; }
.focusable:focus, .focusable.focused { border-color: var(--focus); box-shadow: 0 0 18px var(--focus-glow); }

/* Lista de agentes */
.agent {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
  column-gap: 12px; align-items: center; text-align: left;
  width: 100%; min-height: 88px; padding: 12px 18px;
  background: var(--panel2); color: var(--text); border-radius: var(--r);
  font: inherit; cursor: pointer; flex-shrink: 0;
}
.agent-name { grid-column: 1; font-size: 22px; font-weight: 600; }
.agent-last { grid-column: 1; font-size: 17px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { grid-column: 2; grid-row: 1 / span 2; font-size: 17px; font-weight: 600; color: var(--warn); }

/* Conversación */
.messages { gap: 10px; }
.msg {
  max-width: 90%; padding: 12px 16px; border-radius: var(--r);
  font-size: 20px; line-height: 1.3; white-space: pre-wrap; overflow-wrap: anywhere; flex-shrink: 0;
}
.msg.user { align-self: flex-end; background: #153a4a; border-bottom-right-radius: 4px; }
.msg.agent { align-self: flex-start; background: var(--panel2); border-bottom-left-radius: 4px; }
.msg.system { align-self: center; background: transparent; color: var(--danger); font-size: 17px; text-align: center; }
.msg.pending { color: var(--warn); font-style: italic; }

.options { display: flex; gap: 10px; align-self: stretch; flex-shrink: 0; margin-top: 2px; }
.btn.option { flex: 1; min-width: 0; min-height: 72px; padding: 0 14px; color: var(--text); background: var(--panel2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.btn.option.primary { color: #000; background: var(--accent); }

.rail { display: flex; gap: 10px; padding: 12px 22px 16px; background: var(--panel); flex-shrink: 0; }
.text-input {
  flex: 1; min-width: 0; min-height: 80px; padding: 0 18px;
  font: inherit; font-size: 21px; color: var(--text);
  background: var(--panel2); border-radius: var(--r);
}
.text-input::placeholder { color: var(--muted); }
.btn {
  min-height: 80px; padding: 0 22px; font: inherit; font-size: 20px; font-weight: 600;
  color: #000; background: var(--accent); border-radius: var(--r); cursor: pointer; flex-shrink: 0;
}

.btn.secondary { width: 100%; min-height: 72px; color: var(--text); background: var(--panel2); margin-top: 6px; }
.agent.dispatcher .agent-name { color: var(--accent); }

.footer { padding: 10px 22px; background: var(--panel); flex-shrink: 0; }
.hint { color: var(--muted); font-size: 16px; }