:root { color-scheme: dark; --bg:#041124; --card:#0b213d; --line:#1a4a71; --cyan:#1dc8ff; --blue:#1675ff; --text:#edf8ff; --muted:#8cb4d1; }
* { box-sizing: border-box; }
body { margin:0; background:radial-gradient(circle at top,#0a2c50,var(--bg) 45%); color:var(--text); font:16px system-ui,sans-serif; min-height:100vh; }
header { position:sticky; top:0; z-index:3; display:flex; align-items:center; gap:12px; padding:14px 18px; background:#041124ed; border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
header .mark { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(145deg,var(--cyan),var(--blue)); font-size:26px; }
header strong, header small { display:block; }
header small, .meta { color:var(--muted); }
header button { margin-left:auto; }
main { max-width:900px; margin:auto; padding:18px 16px 90px; }
.card,.tab,.status { background:#081b33e8; border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:0 18px 50px #0005; }
.auth { max-width:480px; margin:8vh auto; }
.auth p,label { color:var(--muted); }
label { display:block; margin:14px 0; }
input,textarea,button { width:100%; border:1px solid #2a587a; border-radius:12px; background:#0b213d; color:var(--text); padding:13px; font:inherit; }
textarea { min-height:120px; resize:vertical; }
button { cursor:pointer; font-weight:700; background:linear-gradient(135deg,#0e8fe9,#1468f0); }
button:disabled { opacity:.45; cursor:not-allowed; }
output { display:block; color:#ff8d9c; margin-top:12px; }
.status { display:flex; align-items:center; gap:9px; padding:10px 14px; margin-bottom:12px; }
.status button { width:auto; margin-left:auto; padding:8px 12px; }
#onlineDot { width:10px; height:10px; border-radius:50%; background:#36e39b; }
.offline #onlineDot { background:#ffb641; }
nav { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; margin-bottom:12px; overflow:auto; }
nav button { background:#071a30; padding:10px 6px; font-size:13px; }
.tab { display:none; }
.tab.active { display:block; }
.task,.device { padding:12px; border-bottom:1px solid #173b58; }
.meta { font-size:12px; }
footer { position:fixed; bottom:0; width:100%; padding:10px; text-align:center; background:#041124ed; color:var(--muted); border-top:1px solid var(--line); }
.chat-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.chat-head h2 { margin-bottom:3px; }
.chat-head button { width:auto; }
.chat-layout { display:grid; grid-template-columns:minmax(180px,30%) 1fr; min-height:440px; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.chat-layout aside { border-right:1px solid var(--line); background:#06162c; }
.chat-layout article { padding:12px; min-width:0; }
.conversation { width:100%; border:0; border-radius:0; border-bottom:1px solid #173b58; background:transparent; text-align:left; }
.conversation.active { background:#0b3a62; }
.conversation .badge { float:right; background:#1dc8ff; color:#041124; border-radius:999px; padding:1px 7px; }
.messages { height:300px; overflow:auto; padding:6px; }
.message { margin:8px 0; padding:9px 12px; border-radius:12px; background:#0b213d; border:1px solid #173b58; }
.message.mine { margin-left:18%; background:#0a3b63; }
.message strong { color:var(--cyan); }
#messageForm { display:grid; grid-template-columns:1fr 110px; gap:8px; }
#messageForm textarea { min-height:60px; }
@media(max-width:650px) {
  nav { grid-template-columns:repeat(5,120px); }
  main { padding-inline:10px; }
  .tab { border-radius:14px; }
  h1 { font-size:26px; }
  .chat-layout { grid-template-columns:1fr; }
  .chat-layout aside { max-height:155px; overflow:auto; border-right:0; border-bottom:1px solid var(--line); }
  .messages { height:260px; }
  #messageForm { grid-template-columns:1fr; }
}