:root{
  --bg-1:#efe4ff;
  --bg-2:#ffe0f1;
  --bg-3:#f7efff;
  --surface:rgba(255,255,255,.68);
  --surface-strong:rgba(255,255,255,.86);
  --surface-soft:rgba(255,255,255,.54);
  --line:rgba(193,166,235,.42);
  --line-strong:rgba(178,140,234,.58);
  --text:#2e2753;
  --text-soft:#8e85ae;
  --purple:#8f63f7;
  --purple-2:#b77bff;
  --pink:#ff73c9;
  --pink-2:#ff9edb;
  --green:#37c972;
  --shadow-lg:0 18px 55px rgba(156,114,214,.18);
  --shadow-md:0 10px 26px rgba(150,116,211,.14);
  --shadow-sm:0 4px 14px rgba(155,122,214,.10);
  --radius-xl:34px;
  --radius-lg:26px;
  --radius-md:18px;
  --radius-sm:14px;
  --topbar-h:74px;
  --main-gap:16px;
  --page-h:95vh;
}

*{box-sizing:border-box}
html,body{height:100%}
html{direction:rtl}
body{
  margin:0;
  font-family:Heebo,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 500px at 5% 100%, rgba(173,145,255,.28), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgba(255,151,213,.32), transparent 62%),
    linear-gradient(135deg, #efe6ff 0%, #f8efff 38%, #ffe6f4 100%);
  overflow:hidden;
}
button,input,select,textarea{font:inherit}
button{font-family:inherit}
img{max-width:100%;display:block}
[hidden]{display:none !important}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(220px 100px at 15% 18%, rgba(255,255,255,.42), transparent 70%),
    radial-gradient(340px 120px at 84% 92%, rgba(255,255,255,.24), transparent 72%),
    radial-gradient(300px 120px at 60% 6%, rgba(255,255,255,.22), transparent 75%);
  opacity:.95;
}

.page{
  position:relative;
  z-index:1;
  width:min(1880px, 100%);
  margin:0 auto;
  padding:14px 16px 16px;
  height:100vh;
  max-height:100vh;
  display:flex;
  flex-direction:column;
  gap:var(--main-gap);
}

.topbar{
  min-height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 16px;
  border-radius:36px;
  background:linear-gradient(90deg, rgba(255,255,255,.58), rgba(255,255,255,.74));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 0 0 1px rgba(223,205,249,.45) inset, var(--shadow-lg);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  flex:0 0 auto;
  overflow:hidden;
}
.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,.16), transparent 20%, rgba(255,255,255,.22) 55%, rgba(255,255,255,.10));
}
.brand,.right-actions{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
.logo{height:50px;width:auto;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(172,118,230,.16))}

.online-indicator{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:88px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(245,247,255,.82);
  border:1px solid rgba(213,219,246,.88);
  color:#5f6483;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
}
.online-indicator .label{display:none}
.online-indicator .dot{
  width:12px;height:12px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 4px rgba(55,201,114,.18)
}
.online-indicator .count{
  min-width:28px;height:28px;padding:0 9px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:#ecfff3;border:1px solid rgba(101,214,143,.28);
  color:#27814c;font-weight:700;font-size:14px;
}

.btn-login,.btn-logout{
  border:0;
  padding:11px 20px;
  border-radius:999px;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease, background .16s ease;
}
.btn-login{
  color:#fff;
  font-weight:700;
  background:linear-gradient(135deg, var(--purple), var(--pink));
  box-shadow:0 10px 24px rgba(166,92,228,.30);
}
.btn-login:hover,.btn-logout:hover,.send-btn:hover,.chip:hover,.pill:hover,.dm-open:hover,.emoji-toggle:hover,.btn:hover{transform:translateY(-1px)}
.btn-login.is-logged{
  background:linear-gradient(135deg, #45cc7d, #24b560);
  box-shadow:0 10px 24px rgba(56,189,103,.24);
}
.btn-logout{
  background:rgba(255,255,255,.72);
  color:#5d547f;
  border:1px solid rgba(209,193,236,.9);
  box-shadow:var(--shadow-sm);
}

.layout{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  grid-template-columns: 350px minmax(0,1fr) 390px;
  gap:16px;
  max-height:calc(var(--page-h) - var(--topbar-h) - 32px);
}

.panel{
  position:relative;
  min-height:0;
  display:flex;
  flex-direction:column;
  border-radius:32px;
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.60));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:
    0 0 0 1px rgba(216,197,247,.48) inset,
    0 18px 50px rgba(160,121,219,.16);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  overflow:hidden;
}
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(250px 140px at 15% 10%, rgba(255,255,255,.34), transparent 70%),
    radial-gradient(360px 180px at 85% 100%, rgba(255,211,240,.20), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.16), transparent 28%);
}
.users-panel,.rooms-panel,.chat-panel{position:relative}

.panel-head,.chat-head{
  position:relative;
  z-index:1;
  padding:16px 18px 14px;
  border-bottom:1px solid rgba(209,189,240,.38);
}
.panel-head.smallpad{padding-top:14px}
.panel-head h3,.chat-head b{
  margin:0;
  font-size:21px;
  line-height:1.15;
  color:#3b3262;
}
.muted{color:var(--text-soft)}

.users-panel .panel-head h3,
.rooms-panel .panel-head h3{font-weight:800;font-size:20px}

.seg-toggle{
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:12px;
  padding:4px;
  border-radius:999px;
  background:rgba(235,229,255,.8);
  border:1px solid rgba(210,194,242,.72);
}
.seg-toggle .seg-item{
  position:relative;
  flex:1;
  appearance:none;
  border:0;
  background:transparent;
  color:#7f769f;
  padding:9px 12px;
  border-radius:999px;
  cursor:pointer;
  font-size:15px;
  font-weight:500;
}
.seg-toggle .seg-item.is-active{
  color:#fff;
  background:linear-gradient(135deg, rgba(148,95,249,.94), rgba(255,121,203,.92));
  box-shadow:0 10px 20px rgba(175,102,232,.24);
}
.seg-toggle .badge{
  position:absolute;
  top:-5px;left:8px;
  min-width:18px;height:18px;padding:0 5px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:#ff4438;color:#fff;font-size:11px;font-weight:700;
  box-shadow:0 6px 12px rgba(255,68,56,.28);
}

.search{
  margin-top:12px;
  display:flex;align-items:center;gap:8px;
  padding:10px 13px;
  border-radius:18px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(213,199,241,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92);
}
.search span{font-size:22px;line-height:1;color:#b08be9}
.search input{
  flex:1;border:0;outline:0;background:transparent;color:var(--text);font-size:15px;
}
.search input::placeholder{color:#b8adc9}

.users-list,.pm-list,.rooms-list{
  position:relative;z-index:1;
  list-style:none;
  margin:0;
  padding:12px 10px 14px;
  overflow:auto;
  min-height:0;
  scrollbar-width:thin;
  scrollbar-color:rgba(176,137,237,.70) transparent;
}
.users-list,.pm-list{flex:1 1 auto}
.rooms-list{flex:1 1 auto}
.pm-list{padding-top:6px}
.users-panel .users-list[hidden], .users-panel .pm-list[hidden]{display:none}

.users-list li,
.pm-list li,
.rooms-list li{list-style:none}

.user,
.room{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 4px 10px;
  padding:14px 14px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(250,244,255,.82));
  border:1px solid rgba(215,197,242,.76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96), 0 8px 22px rgba(165,130,219,.12);
}
.room.is-active{
  background:linear-gradient(135deg, rgba(157,108,248,.20), rgba(255,152,214,.26));
  border-color:rgba(186,141,239,.85);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96), 0 10px 26px rgba(171,112,228,.16);
}
.room b,.user .meta b{font-size:17px;color:#302955}
.room .ic{font-size:22px;filter:drop-shadow(0 4px 10px rgba(168,104,226,.18))}
.room .count{
  margin-inline-start:auto;
  min-width:38px;height:34px;padding:0 10px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;
  background:rgba(245,240,255,.96);
  border:1px solid rgba(212,196,241,.88);
  color:#706692;font-weight:700;
}

.user .left,.dm-thread .left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.avatar-wrap{position:relative;flex:0 0 44px;width:44px;height:44px}
.avatar{
  width:44px;height:44px;border-radius:50%;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
  background:linear-gradient(180deg, #f4efff, #ebe4ff);
  border:1px solid rgba(208,191,240,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
}
.avatar img.gender-avatar{width:72%;height:72%;object-fit:contain;margin-bottom:-8px}
.status-dot{
  position:absolute;
  top:-1px;right:-1px;
  width:12px;height:12px;border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.4);
  background:#b5b2c7;
}
.status-dot.is-online{background:var(--green)}
.status-dot.is-offline{background:#b5b2c7}

.user .meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.user .meta .row,.dm-thread .meta .row{display:flex;align-items:center;gap:6px;min-width:0}
.user .meta .row b,.dm-thread .meta .row b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user .meta .row.micro,
.dm-thread .meta .row.gender,
.dm-thread .meta .row.lastmsg{font-size:13px;color:#877da6}
.badge.age,
.badge.unread{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:22px;padding:0 7px;border-radius:999px;
  background:rgba(239,235,255,.96);
  border:1px solid rgba(211,196,239,.82);
  color:#6e6193;font-size:12px;font-weight:700;
}
.badge.unread{background:#ff4a49;color:#fff;border-color:transparent;box-shadow:0 8px 16px rgba(255,74,73,.24)}
.dm-open,.pill{
  flex:0 0 auto;
  min-width:44px;height:44px;padding:0 14px;border-radius:16px;
  border:1px solid rgba(214,199,241,.85);
  background:rgba(248,243,255,.95);
  color:#6e6290;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
}
.dm-open{font-size:20px;display:inline-flex;align-items:center;justify-content:center}

.help-links{
  position:relative;z-index:1;
  padding:6px 20px 18px;
  display:grid;gap:6px;
}
.help-links a{color:#746c95;text-decoration:none;font-size:15px}
.help-links a:hover{text-decoration:underline}

.chat-panel{overflow:hidden}
.chat-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:12px;
}
.room-title{display:flex;align-items:center;gap:10px;min-width:0}
.room-title .bolt{color:#ffaf54;font-size:22px}
.chat-actions{display:flex;align-items:center;gap:10px}
.counter,.chip,.emoji-row,.sound-toggle{
  border:1px solid rgba(215,198,242,.8);
  background:rgba(244,240,255,.86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94);
}
.counter{
  min-width:80px;
  text-align:center;
  padding:8px 14px;
  border-radius:999px;
  color:#5d55a0;
  font-weight:700;
}
.status-line{margin-top:4px;font-size:13px;color:#968caf}
.status-line.online{color:#34b86f}

.messages,#messages{
  position:relative;z-index:1;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:18px 18px 12px;
  background:
    radial-gradient(500px 220px at 25% 100%, rgba(196,165,246,.18), transparent 70%),
    radial-gradient(520px 260px at 90% 100%, rgba(255,193,226,.18), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.18));
  scrollbar-width:thin;
  scrollbar-color:rgba(174,137,236,.78) transparent;
}

.msg{display:flex;flex-direction:column;max-width:72%;margin:0 0 18px}
.msg.is-other{align-self:flex-start;align-items:flex-start}
.msg.is-self{align-self:flex-end;align-items:flex-end}
.username{
  display:flex;align-items:center;gap:8px;
  margin:0 4px 7px;
  color:#857ca5;font-size:14px;font-weight:500;
}
.gender-icon{
  width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#f1ebff,#ebe2ff);
  border:1px solid rgba(212,196,240,.86);
  font-size:18px;
}
.user-details{font-weight:600;color:#8b80ab}
.bubble{
  display:inline-block;
  padding:14px 18px;
  border-radius:26px;
  line-height:1.55;
  font-size:15px;
  border:1px solid rgba(214,195,241,.84);
  box-shadow:0 10px 24px rgba(168,130,221,.10), inset 0 1px 0 rgba(255,255,255,.95);
  word-break:break-word;
}
.msg.is-other .bubble{
  background:linear-gradient(180deg, rgba(241,237,255,.96), rgba(239,232,255,.86));
  color:#463d68;
  border-top-right-radius:12px;
}
.msg.is-self .bubble{
  background:linear-gradient(135deg, rgba(255,228,245,.96), rgba(245,230,255,.92));
  color:#4b3e66;
  border-top-left-radius:12px;
}
.time{margin:7px 8px 0;color:#8f86ab;font-size:13px}
.msg.is-self .time{text-align:left}
.msg.is-other .time{text-align:right}

.composer{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:10px;
  padding:12px 14px 14px;
  border-top:1px solid rgba(208,187,238,.42);
  background:linear-gradient(180deg, rgba(255,255,255,.54), rgba(255,255,255,.78));
}
.composer input{
  flex:1;
  height:52px;
  border-radius:18px;
  border:1px solid rgba(212,196,240,.84);
  background:rgba(255,255,255,.92);
  color:var(--text);
  padding:0 18px;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
}
.composer input::placeholder{color:#b1a7c6}
.send-btn{
  flex:0 0 auto;
  min-width:94px;height:52px;padding:0 20px;
  border:0;border-radius:18px;cursor:pointer;color:#fff;font-weight:700;
  background:linear-gradient(135deg, var(--purple), var(--pink));
  box-shadow:0 12px 24px rgba(169,97,228,.26);
}
.emoji-toggle{
  flex:0 0 auto;
  width:52px;height:52px;
  border-radius:18px;
  cursor:pointer;font-size:24px;line-height:1;
  color:#7f76a0;
}
.emoji-row{
  position:absolute;
  left:14px;right:14px;bottom:78px;
  border-radius:18px;
  padding:10px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow-lg);
  z-index:20;
}
.emoji-scroll{display:flex;gap:6px;overflow:auto;padding:2px}
.emoji-btn{
  appearance:none;border:0;background:rgba(255,255,255,.65);border-radius:12px;
  width:40px;height:40px;cursor:pointer;font-size:22px;line-height:1;
}
.emoji-btn:hover{background:#fff}
.dm-toolbar{
  position:sticky;top:0;z-index:6;
  display:flex;gap:8px;padding:10px 12px;margin:-18px -18px 14px;
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.75));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(212,195,240,.5);
}
.dm-toolbar .dm-btn{
  border:1px solid rgba(213,196,241,.8);
  background:rgba(247,243,255,.92);
  color:#6d6390;
  padding:10px 14px;border-radius:14px;cursor:pointer;
}

.dm-profile-card,
#messages .dm-profile-card{
  max-width:420px;
  margin:6px auto 20px;
  padding:22px 18px;
  border-radius:24px;
  text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,244,255,.86));
  border:1px solid rgba(214,196,242,.84);
  box-shadow:0 14px 28px rgba(168,128,220,.12);
}
#messages .dm-profile-card .avatar,
.dm-profile-card .avatar{
  position:static !important;
  width:78px;height:78px;margin:0 auto 12px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#f5efff,#eadfff);
  font-size:38px;
}
.dm-profile-card .title,#messages .dm-profile-card .title{font-weight:800;font-size:22px;color:#3c3360}
.dm-profile-card .sub,#messages .dm-profile-card .sub{margin-top:4px;color:#8a81a8}

.modal{
  position:fixed;inset:0;z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.modal-backdrop{
  position:absolute;inset:0;
  background:rgba(78,46,112,.26);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.modal-card{
  position:relative;z-index:1;
  width:min(520px, 96vw);
  max-height:min(86vh, 820px);
  overflow:auto;
  padding:24px 22px 18px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(252,247,255,.9));
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 22px 60px rgba(111,71,160,.26), 0 0 0 1px rgba(221,203,248,.42) inset;
}
.modal-x{
  position:absolute;top:12px;left:12px;
  width:36px;height:36px;border-radius:12px;border:1px solid rgba(214,198,242,.86);
  background:rgba(247,243,255,.92);cursor:pointer;color:#746c94;
}
.modal-head{text-align:center;margin-bottom:10px}
.modal-head img{margin:0 auto 8px}
.modal-head h3{margin:0 0 4px;font-size:24px;color:#3d3460}
.subtitle{margin:0;color:#9389ad}
.form{display:grid;gap:12px}
.field{display:grid;gap:6px}
.field .label{font-size:14px;font-weight:600;color:#675f87}
.form input,.form select{
  height:48px;padding:0 14px;border-radius:16px;
  border:1px solid rgba(213,196,241,.86);
  background:rgba(255,255,255,.92);outline:none;color:var(--text);
}
.form input:focus,.form select:focus{box-shadow:0 0 0 4px rgba(175,137,236,.16)}
.field-error,.error-hint{color:#f05464;font-size:12px;min-height:16px}
.actions{display:flex;gap:10px;margin-top:4px}
.btn{
  height:46px;border-radius:16px;padding:0 18px;border:1px solid transparent;cursor:pointer;font-weight:700;
}
.btn.primary{flex:3;background:linear-gradient(135deg,var(--purple),var(--pink));color:#fff;box-shadow:0 12px 24px rgba(167,98,228,.24)}
.btn.ghost{flex:1;background:#fff;color:#665f84;border-color:rgba(214,196,240,.86)}
.login-toggle{
  margin-top:12px;display:inline-flex;gap:4px;padding:4px;border-radius:999px;
  background:rgba(241,236,255,.9);border:1px solid rgba(213,196,241,.8);
}
.login-toggle-btn{
  border:0;background:transparent;border-radius:999px;padding:7px 14px;cursor:pointer;color:#7d749e
}
.login-toggle-btn.is-active{background:#fff;color:#40355d;box-shadow:0 8px 18px rgba(166,131,220,.15)}
.auth-switch-link{text-align:center;font-size:14px;color:#8077a0}
.auth-switch-link button{border:0;background:none;color:#7c57e9;font-weight:700;cursor:pointer}

.users-list::-webkit-scrollbar,
.pm-list::-webkit-scrollbar,
.rooms-list::-webkit-scrollbar,
.messages::-webkit-scrollbar,
#messages::-webkit-scrollbar,
.emoji-scroll::-webkit-scrollbar,
.modal-card::-webkit-scrollbar{width:10px;height:10px}
.users-list::-webkit-scrollbar-thumb,
.pm-list::-webkit-scrollbar-thumb,
.rooms-list::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar-thumb,
#messages::-webkit-scrollbar-thumb,
.emoji-scroll::-webkit-scrollbar-thumb,
.modal-card::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(147,104,246,.72), rgba(255,126,207,.68));
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.users-list::-webkit-scrollbar-track,
.pm-list::-webkit-scrollbar-track,
.rooms-list::-webkit-scrollbar-track,
.messages::-webkit-scrollbar-track,
#messages::-webkit-scrollbar-track,
.emoji-scroll::-webkit-scrollbar-track,
.modal-card::-webkit-scrollbar-track{background:transparent}

@media (max-width: 1320px){
  .layout{grid-template-columns:300px minmax(0,1fr) 330px}
}

@media (max-width: 1024px){
  body{overflow:auto}
  .page{height:auto;min-height:100vh}
  .layout{grid-template-columns:1fr;max-height:none}
  .users-panel{order:2;min-height:320px}
  .chat-panel{order:1;min-height:58vh}
  .rooms-panel{order:3;min-height:320px}
}

@media (max-width: 640px){
  .page{padding:10px;gap:12px}
  .topbar{padding:10px 12px;border-radius:26px;min-height:auto;flex-wrap:wrap}
  .brand,.right-actions{width:100%;justify-content:space-between}
  .logo{height:42px}
  .panel{border-radius:24px}
  .panel-head,.chat-head{padding:14px 14px 12px}
  .messages,#messages{padding:14px 12px 10px}
  .composer{padding:10px 10px 12px;flex-wrap:wrap}
  .composer input{order:1;width:calc(100% - 62px)}
  .emoji-toggle{order:2}
  .send-btn{order:3;width:100%}
  .msg{max-width:88%}
  .actions{flex-direction:column}
  .btn.primary,.btn.ghost{flex:1}
  .login-toggle{width:100%;justify-content:space-between}
  .login-toggle-btn{flex:1;text-align:center}
}