:root{
  --bg:#000; --ink:#0ff; --white:#fff;
  --panel: rgba(0,10,20,.75); --glow:#00ffff88; --line:#00ffff55;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.4 system-ui,Segoe UI,Roboto,Arial,sans-serif;
}
header{padding:18px 14px; text-align:center}
h1{margin:.1rem 0; color:#00eaff; text-shadow:0 0 10px #00eaff}
.sub{margin:.25rem 0 0; opacity:.85}

#chat{max-width:800px; margin:0 auto; padding:0 10px 20px}
#log{
  height:60vh; min-height:360px; max-height:68vh; overflow:auto;
  padding:12px; border:1px solid var(--line); border-radius:14px;
  background:var(--panel); box-shadow:0 0 22px var(--glow);
}

/* Bubbles */
.row{display:flex; gap:10px; margin:10px 0; align-items:flex-end}
.row.user{justify-content:flex-end}
.row .avatar{
  width:46px; height:46px; border-radius:50%;
  border:2px solid #00ffffaa; box-shadow:0 0 12px #00ffff66;
}
.bubble{
  max-width:75%; padding:10px 12px; border-radius:12px;
  border:1px solid var(--line); color:var(--white); background:rgba(0,20,30,.7);
  box-shadow:0 0 12px #00ffff33; animation:fade .18s ease-out;
}
.row.user .bubble{background:rgba(0,60,80,.7)}
.meta{font-size:.78rem; opacity:.7; margin:2px 4px}

/* Composer */
#composer{
  display:flex; gap:8px; margin:14px 0 6px;
}
#msg{
  flex:1; padding:12px 12px; border-radius:10px;
  border:1px solid var(--line); background:#021218; color:var(--white);
}
#send, #micBtn{
  padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:#03222c; color:var(--ink); cursor:pointer;
}
#send:hover, #micBtn:hover{box-shadow:0 0 12px var(--glow)}

.toggles{display:flex; gap:16px; align-items:center; padding:6px 2px; opacity:.9}

/* Mobile */
@media (max-width:560px){
  #log{height:58vh}
  .bubble{max-width:82%}
}

/* Anim */
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}

body {
  margin:0;
  background:#000 url('bg_matrix.jpg') center/cover no-repeat;
  color:#00eaff;
  font-family:system-ui,Segoe UI,sans-serif;
  text-align:center;
}

h3 { color:#fff; text-shadow:0 0 10px #00eaff; margin-top:10px; }

#chat-zone {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:15px;
  margin-top:20px;
}

.chat-frame {
  width:90%;
  max-width:400px;
  height:160px;
  border:1px solid #0ff;
  border-radius:10px;
  box-shadow:0 0 15px #00ffff33;
}

button {
  margin-top:20px;
  padding:10px 20px;
  border:none;
  border-radius:8px;
  background:#00ffff33;
  color:#fff;
  font-size:14px;
  cursor:pointer;
}
button:hover {
  background:#00ffff77;
}

footer {
  margin-top:20px;
  font-size:12px;
  color:#0ff;
}