* { box-sizing: border-box; }
:root {
  color-scheme: dark light;
  --bg: #0f1115;
  --bg-alt: #181b21;
  --border: #2a2f37;
  --primary: #4da3ff;
  --primary-accent: #76b7ff;
  --danger: #ff4d67;
  --text: #e7ecf3;
  --text-dim: #9aa4b4;
  --radius: 12px;
  --shadow: 0 4px 12px -2px rgba(0,0,0,.4);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
}
body { margin:0; background:var(--bg); color:var(--text); min-height:100vh; display:flex; justify-content:center; padding:1rem; }
body,textarea { font-size:15px; line-height:1.4; }

.app { width:100%; max-width:850px; display:flex; flex-direction:column; gap:1rem; }
header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem; }
header h1 { font-size:1.25rem; margin:0; display:flex; gap:.5rem; align-items:center; }
.tag { background:var(--primary); color:#031627; padding:.15rem .5rem; border-radius:999px; font-size:.75rem; font-weight:600; }

#messages { flex:1; min-height:350px; max-height:55vh; overflow-y:auto; display:flex; flex-direction:column; gap:.75rem; padding:1rem; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); scroll-behavior:smooth; }
.msg { display:flex; gap:.75rem; }
.msg.user { flex-direction:row-reverse; }
.avatar { width:40px; height:40px; background:#22303c; display:grid; place-items:center; font-size:20px; border-radius:50%; flex-shrink:0; border:1px solid var(--border); }
.msg.user .avatar { background:#2c3e50; }
.bubble { background:#1f242c; padding:.75rem 1rem; border-radius:var(--radius); max-width:70ch; position:relative; white-space:pre-wrap; word-wrap:break-word; }
.msg.user .bubble { background:#264966; }
.msg.streaming .bubble::after { content:"…"; animation:blink 1s steps(1) infinite; position:absolute; bottom:.35rem; right:.6rem; opacity:.7; }
@keyframes blink { 50% { opacity:.15; } }

form { display:grid; grid-template-columns:1fr auto; gap:.5rem; align-items:flex-end; background:var(--bg-alt); padding:.75rem; border:1px solid var(--border); border-radius:var(--radius); }
textarea { resize:none; background:#13171d; color:var(--text); border:1px solid var(--border); padding:.65rem .75rem; width:100%; border-radius:var(--radius); font-family:inherit; max-height:180px; }
textarea:focus { outline:2px solid var(--primary); outline-offset:2px; }
.send { background:var(--primary); color:#071019; border:none; padding:.7rem 1rem; font-weight:600; border-radius:var(--radius); cursor:pointer; box-shadow:var(--shadow); }
.send:hover { background:var(--primary-accent); }

.status { font-size:.8rem; color:var(--text-dim); padding:0 .25rem; }

/* Panel de emojis eliminado para simplificar la interfaz */

@media (max-width:720px){
  form { grid-template-columns: 1fr auto; }
  #messages { max-height:50vh; }
}
