@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#090b12;--panel:#111521;--panel2:#151b29;--line:#ffffff14;--text:#f2f4fa;--muted:#929bad;--accent:#8b7cff;--accent2:#b2a8ff;--danger:#ff7185}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 15% 5%,#6d54db20,transparent 35%),radial-gradient(ellipse at 90% 90%,#317f9d16,transparent 35%),var(--bg);color:var(--text);font-family:Vazirmatn,Tahoma,sans-serif}
.login-page{display:grid;place-items:center;padding:22px}.login-wrap{width:min(100%,430px)}.login-card,.chat-card{background:linear-gradient(145deg,#171d2bdf,#101521ed);border:1px solid var(--line);box-shadow:0 24px 80px #0006;backdrop-filter:blur(18px)}
.login-card{border-radius:26px;padding:34px}.login-logo,.brand-mark{display:grid;place-items:center;background:linear-gradient(135deg,#8b7cff,#5144a8);box-shadow:0 8px 28px #7865ff45;color:white;font-weight:800}.login-logo{width:58px;height:58px;border-radius:18px;font-size:29px;margin:0 auto 18px}.eyebrow{text-align:center;color:var(--accent2);font-size:10px;letter-spacing:2px}.login-card h1{text-align:center;font-size:27px;margin:8px 0}.muted,.login-card>.muted{text-align:center;color:var(--muted);font-size:13px;margin:0 0 25px}.login-form{display:grid;gap:10px}.login-form label{font-size:12px;color:#c7ccda;margin-top:7px}.login-form input,.login-form select{width:100%;background:#0b101b;border:1px solid #ffffff1a;border-radius:12px;padding:13px;color:var(--text);font:inherit;outline:none}.login-form input:focus,.login-form select:focus,.composer textarea:focus{border-color:#8b7cff88}.primary-button{border:0;border-radius:13px;padding:13px 16px;margin-top:12px;background:linear-gradient(100deg,#8b7cff,#a99cff);color:#100e22;font:700 14px Vazirmatn;cursor:pointer}.primary-button span{margin-right:8px}.login-foot{text-align:center;color:#697386;font-size:11px;margin-top:25px}.error{padding:10px 12px;background:#ff71851a;border:1px solid #ff718544;border-radius:10px;color:#ff9aa8;font-size:12px;margin:12px 0}
.shell{width:min(100% - 30px,900px);margin:0 auto;padding:22px 0 16px;min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:7px 3px 20px}.brand,.account{display:flex;align-items:center;gap:11px}.brand-mark{width:42px;height:42px;border-radius:13px;font-size:21px}.brand strong{display:block;font-size:16px}.brand small{display:block;color:var(--muted);font-size:10px}.account{font-size:12px;color:#dce0ec}.top-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;background:#292b3d;border:1px solid #ffffff25}.account form{margin:0}.logout{background:#ffffff0a;border:1px solid var(--line);color:#c4cada;border-radius:9px;padding:7px 11px;font:inherit;font-size:11px;cursor:pointer}
.chat-card{flex:1;min-height:520px;border-radius:22px;display:flex;flex-direction:column;overflow:hidden}.room-head{display:flex;justify-content:space-between;align-items:center;padding:18px 21px;border-bottom:1px solid var(--line);gap:12px}.room-head strong{font-size:14px}.room-head small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#55d6a1;box-shadow:0 0 12px #55d6a1;margin-left:8px}.room-tag{font-size:9px;letter-spacing:1.2px;color:var(--accent2);border:1px solid #8b7cff44;background:#8b7cff12;padding:6px 9px;border-radius:30px;white-space:nowrap}
.messages{flex:1;min-height:330px;max-height:calc(100vh - 300px);overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:17px;scroll-behavior:smooth}.loading,.empty{color:var(--muted);font-size:12px;text-align:center;margin:auto}.message{display:flex;align-items:flex-end;gap:9px;max-width:min(82%,650px)}.message.mine{align-self:flex-start;flex-direction:row-reverse}.message:not(.mine){align-self:flex-end}.message-avatar{width:31px;height:31px;border-radius:50%;object-fit:cover;background:#292b3d;flex:none}.bubble-wrap{min-width:0}.message-meta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:10px;margin:0 4px 5px}.mine .message-meta{justify-content:flex-start}.message-name{color:#c7c0ff;font-weight:600}.bubble{background:#1a2130;border:1px solid #ffffff0d;border-radius:15px 15px 15px 4px;padding:10px 13px;color:#edf0f8;font-size:13px;line-height:1.9;overflow-wrap:anywhere;white-space:pre-wrap}.mine .bubble{background:linear-gradient(135deg,#51469b,#39346c);border-color:#a99cff25;border-radius:15px 15px 4px 15px}.status{min-height:17px;padding:0 20px;color:var(--danger);font-size:10px}.composer{display:flex;align-items:flex-end;gap:10px;padding:13px 16px 7px;border-top:1px solid var(--line);background:#0d121d88}.composer textarea{resize:none;max-height:120px;flex:1;background:#171e2c;border:1px solid #ffffff12;border-radius:14px;padding:12px 14px;color:var(--text);font:13px/1.8 Vazirmatn;outline:none}.composer button{width:43px;height:43px;border:0;border-radius:13px;background:linear-gradient(135deg,#8b7cff,#a99cff);color:#100e22;font-size:21px;cursor:pointer;flex:none}.composer button:disabled{opacity:.5;cursor:wait}.composer-hint{padding:0 20px 12px;color:#6f788b;font-size:9px}.shell footer{text-align:center;color:#667084;font-size:10px;padding:15px 0 0}.shell footer span{padding:0 5px;color:#8b7cff}
@media(max-width:600px){.shell{width:min(100% - 18px,900px);padding:10px 0}.topbar{padding:7px 4px 13px}.brand-mark{width:37px;height:37px}.account{gap:7px;font-size:11px}.chat-card{min-height:calc(100dvh - 90px);border-radius:17px}.room-head{padding:14px}.room-head small{max-width:220px}.messages{padding:16px 12px;max-height:none}.message{max-width:92%}.login-card{padding:27px 22px}.composer{padding:10px}.composer-hint{padding-bottom:9px}}/* Chat-App 0.3 - Online users */
.users-status {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: #0d121d55;
}

.user-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background: #ffffff08;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.presence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.presence-dot.online {
  background: #55d6a1;
  box-shadow: 0 0 9px #55d6a1;
}

.presence-dot.offline {
  background: #778092;
}

.presence-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.presence-info strong {
  font-size: 11px;
  font-weight: 600;
}

.presence-info small {
  font-size: 9px;
  color: var(--muted);
}

/* Message likes */
.message-actions {
  display: flex;
  margin-top: 5px;
  padding: 0 3px;
}

.like-button {
  border: 1px solid var(--line);
  background: #ffffff08;
  color: #aab1c2;
  border-radius: 20px;
  padding: 3px 10px;
  font: 11px Vazirmatn, sans-serif;
  cursor: pointer;
  transition: .2s;
}

.like-button:hover {
  background: #ff64851a;
  border-color: #ff648566;
}

.like-button.liked {
  color: #ff7185;
  background: #ff64851a;
  border-color: #ff718555;
}

.like-button:disabled {
  opacity: .5;
  cursor: wait;
}

@media(max-width:600px) {
  .users-status {
    padding: 10px;
    gap: 7px;
  }

  .user-status {
    padding: 6px 8px;
  }
}