:root{
  --bg:#050816;
  --panel:rgba(10,16,30,.82);
  --panel-2:rgba(8,12,24,.92);
  --border:rgba(120,165,255,.16);
  --text:#eaf1ff;
  --muted:#94a8cf;
  --accent:#78a8ff;
  --accent2:#8ff5ff;
  --danger:#ff6d8a;
  --success:#6be39a;
  --shadow:0 24px 80px rgba(0,0,0,.40);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(120,168,255,.18), transparent 26%),
    radial-gradient(circle at top right, rgba(143,245,255,.10), transparent 20%),
    linear-gradient(180deg, #050816 0%, #071022 100%);
  overflow-x:hidden;
}

.bg-grid{
  position:fixed;
  inset:0;
  background-image:
    linear-gradient(rgba(120,168,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,168,255,.05) 1px, transparent 1px);
  background-size:34px 34px;
  pointer-events:none;
  opacity:.35;
}

.bg-orb{
  position:fixed;
  width:540px;
  height:540px;
  border-radius:50%;
  filter:blur(40px);
  pointer-events:none;
  opacity:.28;
}
.orb-a{top:-120px;right:-120px;background:rgba(120,168,255,.35)}
.orb-b{bottom:-160px;left:-140px;background:rgba(143,245,255,.18)}

.shell{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:320px 1fr;
  gap:18px;
  padding:18px;
  min-height:100vh;
}

.side,.main{
  min-width:0;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(10,16,30,.92), rgba(6,10,22,.88));
  box-shadow:var(--shadow);
  backdrop-filter: blur(16px);
  border-radius:var(--radius);
}

.side{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.brand{
  padding:18px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(120,168,255,.12), rgba(143,245,255,.06));
  border:1px solid rgba(143,245,255,.14);
}
.brand-kicker{
  font-family:'Share Tech Mono', monospace;
  color:var(--accent2);
  letter-spacing:2px;
  font-size:12px;
}
.brand h1{
  margin:8px 0 8px;
  font-family:Orbitron, sans-serif;
  font-size:26px;
}
.brand p{
  margin:0;
  color:var(--muted);
  line-height:1.6;
  font-size:14px;
}

.panel{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.panel-title{
  font-family:'Share Tech Mono', monospace;
  color:var(--accent2);
  letter-spacing:1.6px;
  font-size:12px;
  text-transform:uppercase;
  margin-bottom:12px;
}
.status-line{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  color:var(--muted);
  line-height:1.4;
}
.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  flex:0 0 auto;
  background:#666;
}
.dot.online{
  background:var(--success);
  box-shadow:0 0 16px rgba(107,227,154,.55);
}
.mini-row{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:8px 0;
  border-top:1px solid rgba(255,255,255,.05);
  color:var(--muted);
}
.mini-row strong{color:var(--text)}
.memory-box{
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
  min-height:64px;
}
.help div{
  color:var(--muted);
  line-height:1.8;
  font-size:14px;
}

.main{
  display:flex;
  flex-direction:column;
  min-height:0;
}

.top{
  padding:18px 20px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.top-title{
  font-family:Orbitron, sans-serif;
  font-size:18px;
  font-weight:700;
}
.top-sub{
  margin-top:6px;
  color:var(--muted);
  font-size:13px;
}
.top-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.chat{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:18px 18px 8px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.msg{
  max-width:min(780px, 92%);
  padding:14px 15px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  line-height:1.65;
  white-space:pre-wrap;
  word-wrap:break-word;
  box-shadow:0 12px 30px rgba(0,0,0,.15);
}
.msg.user{
  align-self:flex-end;
  background:linear-gradient(135deg, rgba(120,168,255,.16), rgba(120,168,255,.08));
  border-color:rgba(120,168,255,.18);
}
.msg.assistant{
  align-self:flex-start;
}
.meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
  color:var(--muted);
  font-size:12px;
  font-family:'Share Tech Mono', monospace;
}

.composer{
  padding:16px;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.02));
}
#input{
  width:100%;
  min-height:62px;
  max-height:170px;
  resize:none;
  padding:15px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
  font:inherit;
  line-height:1.6;
}
#input::placeholder{color:#8b9bc2}
.composer-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:10px;
}
.composer-info{
  color:var(--muted);
  font-size:12px;
  font-family:'Share Tech Mono', monospace;
}
.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  border-radius:14px;
  padding:12px 14px;
  color:var(--text);
  font-weight:700;
  transition:transform .15s ease, opacity .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.btn.primary{
  background:linear-gradient(135deg, rgba(120,168,255,.26), rgba(143,245,255,.14));
  border:1px solid rgba(120,168,255,.20);
}
.btn.ghost{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.btn.danger{
  background:rgba(255,109,138,.12);
  border:1px solid rgba(255,109,138,.22);
}

.typing{
  display:inline-flex;
  gap:6px;
  align-items:center;
}
.typing span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent2);
  animation:pulse 1.1s infinite;
}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}

@keyframes pulse{
  0%,100%{opacity:.35; transform:scale(.8)}
  50%{opacity:1; transform:scale(1.2)}
}

@media (max-width: 980px){
  .shell{grid-template-columns:1fr}
}