body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:#0d1117;color:#fff}
.chat-card{width:100%;max-width:480px;background:#11161d;border-radius:24px}
.brand-mark{font-size:52px;margin-bottom:10px}
.chat-shell{height:100vh;max-width:900px;display:flex;flex-direction:column;background:#11161d;border-left:1px solid #252d38;border-right:1px solid #252d38}
.chat-header{padding:16px 18px;border-bottom:1px solid #252d38;background:#151b23}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#ffc107;margin-right:5px}
.status-dot.online{background:#20c997}
.messages{flex:1;overflow-y:auto;padding:20px;background:#0d1117;display:flex;flex-direction:column;gap:8px}
.msg{max-width:75%;padding:10px 13px;border-radius:16px;word-wrap:break-word}
.msg.mine{align-self:flex-end;background:#0d6efd;border-bottom-right-radius:5px}
.msg.theirs{align-self:flex-start;background:#252d38;border-bottom-left-radius:5px}
.msg-name{font-size:11px;opacity:.7;margin-bottom:3px}.msg-time{font-size:10px;opacity:.55;margin-top:4px;text-align:right}
.system-message{text-align:center;color:#6c757d;font-size:12px;margin:8px auto}
.typing-area{padding:14px;border-top:1px solid #252d38;background:#151b23}
.form-control{background:#0d1117!important;border-color:#303946!important;color:#fff!important}
.form-control::placeholder{color:#6c757d}
@media(max-width:600px){.msg{max-width:86%}}