:root{
  --bg: #101218;
  --panel: #15171f;
  --panel-2: #1b1e28;
  --hairline: #2a2e3a;
  --gold: #d9a441;
  --gold-dim: #7a622c;
  --glow: #bfe3ff;
  --text: #e8e9ee;
  --text-dim: #8b8f9e;
  --danger: #d96b5c;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #1a1d28 0%, var(--bg) 60%);
  color:var(--text);
  font-family:"IBM Plex Mono", monospace;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.scanline{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
}

.panel{
  position:relative; z-index:1;
  width:100%; max-width:560px; height:min(760px, 92vh);
  background:var(--panel);
  border:1px solid var(--hairline);
  clip-path:polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.45);
}

.panel__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--hairline);
  background:var(--panel-2);
}

.agent-id{display:flex; align-items:center; gap:12px;}

.agent-id__avatar{position:relative; width:44px; height:44px; flex:none;}
.agent-id__avatar img{
  width:100%; height:100%; object-fit:cover;
  border:1px solid var(--gold-dim);
  clip-path:polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}
.agent-id__dot{
  position:absolute; right:-2px; bottom:-2px;
  width:10px; height:10px; border-radius:50%;
  background:var(--glow);
  box-shadow:0 0 6px 1px var(--glow);
  border:2px solid var(--panel-2);
}

.agent-id__text h1{
  margin:0; font-family:"Space Grotesk", sans-serif; font-weight:600;
  font-size:16px; letter-spacing:0.01em; color:var(--text);
}
.agent-id__text p{margin:2px 0 0; font-size:11px; color:var(--text-dim);}
.agent-id__status{color:var(--glow);}

.reset-btn{
  background:transparent; border:1px solid var(--hairline); color:var(--text-dim);
  font-family:inherit; font-size:11px; letter-spacing:0.03em;
  padding:7px 12px; cursor:pointer;
  clip-path:polygon(0 5px, 5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
}
.reset-btn:hover{border-color:var(--gold-dim); color:var(--gold);}

.log{
  flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px;
}
.log::-webkit-scrollbar{width:6px;}
.log::-webkit-scrollbar-thumb{background:var(--hairline);}

.msg{display:flex; gap:10px; max-width:88%;}
.msg--user{align-self:flex-end; flex-direction:row-reverse;}

.msg__avatar{
  width:28px; height:28px; object-fit:cover; flex:none; margin-top:2px;
  border:1px solid var(--gold-dim);
  clip-path:polygon(0 4px, 4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%);
}

.msg__bubble{
  font-size:13.5px; line-height:1.6;
  padding:10px 13px;
  border:1px solid var(--hairline);
  background:var(--panel-2);
  white-space:pre-wrap;
}
.msg--agent .msg__bubble{border-left:2px solid var(--gold);}
.msg--user .msg__bubble{border-right:2px solid var(--glow); background:#191c26;}

.msg--pending .msg__bubble{color:var(--text-dim);}
.msg--error .msg__bubble{border-left-color:var(--danger); color:#f0b3a8;}

.composer{
  display:flex; align-items:flex-end; gap:10px;
  padding:14px 16px; border-top:1px solid var(--hairline); background:var(--panel-2);
}
.composer textarea{
  flex:1; resize:none; max-height:120px;
  background:var(--bg); color:var(--text);
  border:1px solid var(--hairline);
  font-family:inherit; font-size:13.5px; line-height:1.5;
  padding:10px 12px;
}
.composer textarea:focus{outline:none; border-color:var(--gold-dim);}

.composer button{
  flex:none; width:38px; height:38px;
  background:var(--gold); color:#1a1408; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  clip-path:polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}
.composer button:disabled{opacity:0.4; cursor:default;}

@media (max-width:480px){
  body{padding:0;}
  .panel{max-width:100%; height:100vh; clip-path:none; border:none;}
}