:root{
  --bg:#0f1724;
  --panel:#0b1220;
  --muted:#93a0b3;
  --accent:#7c5cff;
  --me:#dfe7ff;
  --you:#e8f3ff;
  --glass: rgba(255,255,255,0.04);
  --radius:14px;
  --maxw:1100px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;color:#e6eef8;background:linear-gradient(180deg,#071025 0%, #041426 60%);-webkit-font-smoothing:antialiased}
.app{display:flex;max-width:var(--maxw);margin:28px auto;gap:20px;padding:18px}
.sidebar{width:260px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:var(--radius);padding:18px;box-shadow:0 8px 30px rgba(2,6,23,0.6)}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.logo{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#3ec7ff);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;color:white;box-shadow:0 6px 16px rgba(124,92,255,0.18)}
.title{font-weight:700;font-size:16px}
.subtitle{font-size:12px;color:var(--muted)}
.controls{margin:12px 0}
.btn{background:transparent;color:var(--you);border:1px solid rgba(255,255,255,0.04);padding:8px 10px;border-radius:10px;cursor:pointer}
.notice{font-size:12px;color:var(--muted);margin-top:18px;line-height:1.4}

/* main */
.main{flex:1;display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border-radius:var(--radius);overflow:hidden;box-shadow:0 10px 40px rgba(2,6,23,0.6)}
.header{display:flex;align-items:center;justify-content:space-between;padding:18px;border-bottom:1px solid rgba(255,255,255,0.02)}
.header h1{margin:0;font-size:18px}
.muted{margin:0;font-size:13px;color:var(--muted)}
.messages{padding:18px;display:flex;flex-direction:column;gap:12px;height:520px;overflow:auto;background:
  linear-gradient(180deg, rgba(255,255,255,0.005), transparent 40%);
}

/* hide scrollbar for messages */
.messages {
  scrollbar-width: none;    /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.messages::-webkit-scrollbar { /* WebKit */
  display: none;
}

/* message */
.msg{display:flex;gap:12px;align-items:flex-end;max-width:75%;word-break:break-word}
.msg .bubble{padding:10px 12px;border-radius:12px;box-shadow:0 6px 18px rgba(2,6,23,0.45);font-size:14px;line-height:1.3}
.msg.me{margin-left:auto;flex-direction:row-reverse}
.msg.me .bubble{background:linear-gradient(135deg,var(--accent),#3ec7ff);color:#022; border-bottom-right-radius:6px}
.msg.other .bubble{background:rgba(255,255,255,0.03);color:var(--you);border-bottom-left-radius:6px}
.avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600;color:white;background:linear-gradient(135deg,#ff6b6b,#ff9a6b)}
.meta{font-size:12px;color:var(--muted);margin-top:6px}

/* system */
.msg.system{justify-content:center}
.msg.system .bubble{background:transparent;color:var(--muted);font-style:italic;box-shadow:none}

/* composer */
.composer{display:flex;gap:10px;padding:14px;border-top:1px solid rgba(255,255,255,0.02);align-items:center}
.input{flex:1;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--me);outline:none}
.send{background:linear-gradient(135deg,var(--accent),#3ec7ff);border:none;padding:10px 12px;border-radius:10px;color:#02122a;display:flex;align-items:center;cursor:pointer;box-shadow:0 8px 20px rgba(124,92,255,0.18)}
.send svg{display:block}

/* typing */
.typing{font-size:13px;color:var(--muted);min-width:160px;text-align:right}
.typing .dot{height:8px;width:8px;background:var(--muted);display:inline-block;border-radius:50%;margin-left:6px;opacity:.6;animation:blink 1s infinite}
@keyframes blink{0%{opacity:0.2}50%{opacity:1}100%{opacity:0.2}}

/* refresh modal */
.refresh-modal{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2,6,23,0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 1200;
}
.refresh-modal.visible{
  opacity: 1;
  pointer-events: auto;
}
.rm-panel{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  padding: 20px;
  border-radius: 12px;
  width: 360px;
  max-width: 90%;
  box-shadow: 0 12px 40px rgba(2,6,23,0.6);
  text-align: left;
}
.rm-panel h3{margin:0 0 8px 0;font-size:18px}
.rm-panel p{margin:0 0 16px;color:var(--muted);font-size:14px}
.rm-actions{display:flex;gap:10px;justify-content:flex-end}
.rm-actions .btn{padding:8px 12px;border-radius:8px}
.rm-actions .send{padding:8px 12px}

/* responsive */
@media (max-width:880px){
  .app{flex-direction:column;padding:12px;margin:12px}
  .sidebar{width:100%}
  .messages{height:60vh}
}