:root{
  color-scheme:light;
  --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:98vh;
}

*{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;
}

h1{
    font-family:Heebo,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}

h2 {
    font-family: Heebo, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
    font-size: 18px;
    font-weight: 600;
    color: #ae67ed;
    padding: 0;
    margin: 5px;
}

.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:320px minmax(0,1fr) 320px;
  gap:16px;
  max-height:calc(var(--page-h) - var(--topbar-h) - 32px);
  transition:grid-template-columns .38s ease, gap .32s ease;
}

.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}


@media (min-width: 1025px){
  .layout > .panel{
    transition:
      transform .38s ease,
      opacity .28s ease,
      width .38s ease,
      min-width .38s ease,
      border-radius .28s ease,
      box-shadow .28s ease,
      border-color .28s ease;
    will-change:transform, opacity;
  }

  body.chat69-focus-mode .layout{
    grid-template-columns:0 minmax(0,1fr) 0;
    gap:0;
  }

  body.chat69-focus-mode .users-panel,
  body.chat69-focus-mode .rooms-panel{
    opacity:0;
    pointer-events:none;
    overflow:hidden;
    min-width:0;
    width:0;
    border-width:0;
    box-shadow:none;
  }

  body.chat69-focus-mode .users-panel{
    transform:translateX(34px);
  }

  body.chat69-focus-mode .rooms-panel{
    transform:translateX(-34px);
  }

  body.chat69-focus-mode .chat-panel{
    transform:none;
    border-radius:34px;
  }
}

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

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

.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: 28px;
    height: 28px;
    padding: 5px 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e242fb;
    color: #fff;
    font-size: 15px;
    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-actions-bar{
  margin-top:12px;
  display:flex;
  align-items:center;
  gap:10px;
}

.users-actions-item{
  flex:1 1 0;
  min-width:0;
}

.users-action-btn,
.settings-btn.users-action-btn{
  width:100%;
  height:46px;
  border:1px solid rgba(214,199,241,.85);
  background:rgba(255,255,255,.82);
  color:#6a5f91;
  border-radius:16px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-sm);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
  font-size:21px;
}

.users-action-btn:hover,
.settings-btn.users-action-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.96);
}

.users-help-btn,
.users-support-btn{
  flex:1 1 0;
}

.gender-filter{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:5px;
  border-radius:18px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(213,199,241,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
}
.gender-filter__item{
  flex:1 1 0;
  min-width:0;
  height:33px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:#a7a4ae;
  font:inherit;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.gender-filter__item:hover{
  color:#545468;
  background:rgba(255,255,255,.42);
}
.gender-filter__item.is-active{
  color:#545468;
  background:linear-gradient(135deg, rgb(198 225 214 / 88%), rgb(121 215 255 / 84%));
  box-shadow:0 8px 18px rgba(175,102,232,.22);
}


.users-list,.pm-list,.rooms-list{
  position:relative;z-index:1;
  list-style:none;
  margin:0;
  padding:4px 10px 4px;
  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;margin-top:10px;}
.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:7px 7px;
  cursor:pointer;
  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:13px;color:#302955}
.room .ic{font-size:16px;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}
.user,.dm-thread{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.user:hover,.dm-thread:hover{transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.96), 0 12px 26px rgba(165,130,219,.18);}
.user:hover .avatar,.dm-thread:hover .avatar{transform:scale(1.06); box-shadow:0 12px 24px rgba(160,120,240,.30), inset 0 1px 0 rgba(255,255,255,.48);}
.avatar-wrap{position:relative;flex:0 0 44px;width:44px;height:44px}
.avatar-wrap--sm{flex-basis:40px;width:40px;height:40px}
.avatar{
  width:44px;height:44px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  position:relative;isolation:isolate;
  background:linear-gradient(135deg, var(--av1, var(--purple)), var(--av2, var(--pink)));
  border:1px solid rgba(255,255,255,.78);
  box-shadow:0 8px 18px rgba(160,120,240,.22), inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.avatar::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at 30% 22%, rgba(255,255,255,.42), transparent 48%);
  z-index:0;
}
.avatar-letter{
  position:relative;z-index:1;
  color:#fff;font-weight:800;font-size:17px;line-height:1;
  text-shadow:0 1px 10px rgba(72,36,124,.22);
}

.avatar--image{background:linear-gradient(135deg, var(--av1, var(--purple)), var(--av2, var(--pink)));}
.avatar-img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.avatar--image .avatar-letter{display:none}
.avatar--sm{width:40px;height:40px}
.avatar--sm .avatar-letter{font-size:15px}
.avatar--msg{width:34px;height:34px;box-shadow:0 6px 14px rgba(160,120,240,.16)}
.avatar--msg .avatar-letter{font-size:13px}
.avatar--profile{width:78px;height:78px;margin:0 auto 12px;box-shadow:0 14px 30px rgba(160,120,240,.18)}
.avatar--profile .avatar-letter{font-size:28px}
.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}

.typing-strip{
  position:relative;z-index:2;
  max-height:0;
  opacity:0;

  padding:0 14px;
  transform:translateY(3px);
  transition:max-height .18s ease, opacity .16s ease, padding .16s ease, transform .16s ease;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.05));
}
.typing-strip.is-visible{
  max-height:46px;
  opacity:1;
  padding:8px 14px 0;
  transform:translateY(0);
}
.typing-strip__inner{
  min-height:30px;
  display:flex;align-items:center;gap:9px;
  padding:6px 12px;
  border-radius:2px;
  border:0px solid rgba(214,198,241,.78);
  color:#877ea5;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
}
.typing-strip__text{
  overflow:hidden;
  text-overflow:ellipsis;
}
.typing-strip__dots{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}
.typing-strip__dots i{
  width:6px;height:6px;border-radius:50%;display:block;
  background:#b39adf;opacity:.75;animation:typingPulse 1.1s infinite ease-in-out;
}
.typing-strip__dots i:nth-child(2){animation-delay:.14s}
.typing-strip__dots i:nth-child(3){animation-delay:.28s}
@keyframes typingPulse{
  0%,80%,100%{transform:scale(.7);opacity:.35}
  40%{transform:scale(1);opacity:.95}
}

.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:100%;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:transparent;
  border:0;
  font-size:18px;
}
.gender-icon .avatar{width:28px;height:28px}
.gender-icon .avatar-letter{font-size:13px}
.user-details{font-weight: 600; color: #69629a; font-size: 12px;}
.bubble{
  display:inline-block;
  padding:11px 13px;
  border-radius:26px;
  line-height:1.55;
  font-size:15px;
  border:1px solid #d6c3f12e;
  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:2px;
}
.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;
}

.bubble a{
  color:#2563eb;
  text-decoration:underline;
  font-weight:700;
}
.bubble a:hover{opacity:.9}
.bubble strong,.bubble b{font-weight:800}
.bubble em,.bubble i{font-style:italic}
.bubble u{text-decoration:underline}
.bubble p{margin:0 0 8px}
.bubble p:last-child{margin-bottom:0}
.bubble ul,.bubble ol{margin:8px 0;padding-inline-start:20px}
.bubble li{margin:4px 0}
.time{margin:7px 8px 0;color:#8f86ab;font-size:10px}
.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;
  border:0;
}
.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:absolute;
  top:50%;
  inset-inline-start:18px;
  transform:translateY(-50%);
  z-index:6;
  display:none;
  align-items:center;
  gap:8px;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.dm-toolbar .dm-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(213,196,241,.72);
  background:rgba(255,255,255,.82);
  color:#6d6390;
  padding:7px 11px;
  border-radius:999px;
  cursor:pointer;
  font-size:13px;
  line-height:1;
  box-shadow:0 4px 14px rgba(132,91,184,.08);
}

.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);
  position:relative !important;
}
#messages .dm-profile-card .avatar,
.dm-profile-card .avatar{
  position:static !important;
  display:flex;align-items:center;justify-content:center;
}
.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){
  html,body{
    height:auto;
    min-height:100%;
    overflow-x:hidden;
    overflow-y:auto;
  }

  body{
    overflow-x:hidden;
    overflow-y:auto;
  }

  .page{
    height:auto;
    min-height:100vh;
    max-height:none;
    padding:8px;
    gap:8px;
    overflow:visible;
  }

  .topbar{
    min-height:64px;
    padding:10px 12px;
    border-radius:22px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
    overflow:visible;
  }

  .brand,
  .right-actions{
    width:auto;
    display:contents;
  }

  .logo{
    max-width:110px;
    width:auto;
    justify-self:start;
  }

  .online-indicator{
    justify-self:center;
    min-width:auto;
    padding:5px 10px;
    gap:6px;
  }

  .online-indicator .count{
    min-width:24px;
    height:24px;
    padding:0 7px;
    font-size:13px;
  }

  .online-indicator .dot{
    width:10px;
    height:10px;
  }

  .btn-login,
  .btn-logout{
    justify-self:end;
    min-height:40px;
    padding:9px 14px;
    font-size:14px;
    line-height:1;
    white-space:nowrap;
  }

  .layout{
    display:flex;
    flex-direction:column;
    gap:8px;
    height:auto;
    max-height:none;
    min-height:0;
    overflow:visible;
  }

  .chat-panel{
    order:1;
    display:flex;
    flex-direction:column;
    height:78vh;
    min-height:78vh;
    max-height:70vh;
  }

  .users-panel{
    order:2;
    min-height:220px;
  }

  .rooms-panel{
    order:3;
    min-height:220px;
  }

  .panel{
    border-radius:22px;
    min-height:0;
    overflow:hidden;
  }

  .panel-head,
  .chat-head{
    padding:10px 12px;
  }

  .chat-head{
    flex:0 0 auto;
    gap:8px;
  }

  .chat-head b,
  .panel-head h3{
    font-size:16px;
  }

  .room-title{
    min-width:0;
    gap:8px;
  }

  .room-title .bolt{
    font-size:18px;
  }

  .counter{
    min-width:56px;
    padding:6px 10px;
    font-size:13px;
  }

  .messages,#messages{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    padding:10px 10px 8px;
  }

  .msg{
    max-width:92%;
    margin-bottom:14px;
  }

  .bubble{
    padding:7px 12px;
    font-size:14px;
    border-radius:20px;
  }

  .username{
    margin:0 2px 5px;
    font-size:13px;
  }

  .time{
    margin-top:5px;
    font-size:12px;
  }

  .composer{
    flex:0 0 auto;
    padding:8px 8px 10px;
    display:grid;
    grid-template-columns:50px 1fr;
    gap:8px;
    align-items:center;
  }

  .emoji-toggle{
    order:1;
    width:50px;
    height:50px;
    border-radius:16px;
  }


  .typing-strip{padding:0 12px}
  .typing-strip.is-visible{padding:8px 12px 0}
  .typing-strip__inner{min-height:28px;font-size:12.5px;padding:6px 10px}
  .composer input{
    order:2;
    width:100%;
    min-width:0;
    height:50px;
  }

  .send-btn{
    order:3;
    grid-column:1 / -1;
    width:100%;
    height:50px;
    border-radius:16px;
  }

  .emoji-row{
    left:8px;
    right:8px;
    bottom:72px;
  }

  .panel-head{
    padding:10px 12px;
  }

  .seg-toggle{
    margin-top:8px;
  }

  .search{
    margin-top:8px;
    padding:8px 10px;
    border-radius:14px;
  }

  .gender-filter{
    margin-top:8px;
    padding:4px;
    gap:6px;
    border-radius:15px;
  }

  .gender-filter__item{
    height:34px;
    border-radius:12px;
    font-size:13px;
  }

  .users-list,
  .pm-list,
  .rooms-list{
    padding:4px 8px 8px;
  }

  .user,
  .room{
    margin:0 2px 8px;
    padding:6px;
    border-radius:18px;
  }

  .avatar-wrap{
    width:38px;
    height:38px;
    flex:0 0 38px;
  }

  .avatar{
    width:38px;
    height:38px;
  }

  .dm-open,
  .pill{
    min-width:38px;
    height:38px;
    padding:0 10px;
    border-radius:14px;
  }

  .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}
}

/* =========================
   MOBILE LOGIN MODAL FIX
   ========================= */
@media (max-width: 640px){

  .modal{
    padding:10px;
    align-items:flex-start;
  }

  .modal-card{
    width:min(100%, 96vw);
    max-height:92vh;
    margin-top:18px;
    padding:18px 14px 14px;
    border-radius:24px;
    overflow:auto;
  }

  .modal-x{
    top:10px;
    left:10px;
    width:34px;
    height:34px;
    border-radius:12px;
  }

  .modal-head{
    margin-bottom:8px;
  }

  .modal-head img{
    max-width:120px;
    margin:0 auto 6px;
  }

  .modal-head h3{
    font-size:20px;
    margin:0 0 2px;
    line-height:1.2;
  }

  .subtitle{
    font-size:14px;
    line-height:1.3;
  }

  .login-toggle{
    width:100%;
    margin-top:10px;
    padding:4px;
    gap:4px;
  }

  .login-toggle-btn{
    min-height:42px;
    padding:8px 10px;
    font-size:14px;
  }

  .form{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .field{
    display:grid;
    gap:4px;
  }

  .field .label{
    font-size:13px;
    margin-bottom:1px;
  }

  .form input,
  .form select{
    height:44px;
    padding:0 12px;
    border-radius:14px;
    font-size:15px;
  }

  /* שורת 3 שדות בלבד */
  .auth-row-3{
    display:grid;
    grid-template-columns:0.9fr 1fr 1fr;
    gap:10px;
    align-items:start;
  }

  .auth-row-3 .field{
    min-width:0;
  }

  .auth-row-3 .field .label{
    min-height:32px;
    display:flex;
    align-items:flex-end;
  }

  .field-error,
  .error-hint{
    font-size:11px;
    min-height:13px;
    line-height:1.2;
  }

  .actions{
    display:grid;
    grid-template-columns:7fr 3fr;
    gap:8px;
    margin-top:6px;
    align-items:stretch;
  }

  .btn{
    height:44px;
    min-height:44px;
    padding:0 14px;
    border-radius:14px;
    font-size:15px;
  }

  .btn.primary,
  .btn.ghost{
    width:100%;
    flex:none;
  }
}

/* =========================
   GUEST LOGIN MOBILE FIX
   גיל + אזור + מגדר באותה שורה
   כפתורים 70/30
   ========================= */
@media (max-width: 640px){

  /* חלון עצמו */
  .modal{
    padding:10px;
    align-items:flex-start;
  }

  .modal-card{
    width:min(100%, 96vw);
    max-height:92vh;
    margin-top:18px;
    padding:18px 14px 14px;
    border-radius:24px;
    overflow:auto;
  }

  .modal-head{
    margin-bottom:8px;
  }

  .modal-head h3{
    font-size:20px;
    line-height:1.2;
    margin:0 0 2px;
  }

  .subtitle{
    font-size:14px;
    line-height:1.3;
  }

  .login-toggle{
    width:100%;
    margin-top:10px;
  }

  .login-toggle-btn{
    min-height:42px;
    font-size:14px;
  }

  /* טפסים במודל */
  #loginForm.form,
  #memberLoginForm.form,
  #memberRegisterForm.form{
    gap:10px;
  }

  #loginForm .field .label,
  #memberLoginForm .field .label,
  #memberRegisterForm .field .label{
    font-size:13px;
    line-height:1.2;
  }

  #loginForm input,
  #loginForm select,
  #memberLoginForm input,
  #memberLoginForm select,
  #memberRegisterForm input,
  #memberRegisterForm select{
    height:44px;
    padding:0 12px;
    border-radius:14px;
    font-size:15px;
    min-width:0;
  }

  /* ===== טופס אורחים ===== */

  /* שדה שם מלא */
  #loginForm > .field:first-of-type{
    width:100%;
  }

  /* השורה של גיל+אזור תהפוך לגריד */
  #loginForm .age-region-row{
    display:grid !important;
    grid-template-columns:0.85fr 1.15fr 0.9fr;
    gap:10px;
    align-items:start;
    margin-top:0;
  }

  /* נבטל את הרוחבים הישנים */
  #loginForm .age-region-row .field-age,
  #loginForm .age-region-row .field-region{
    flex:initial !important;
    width:auto !important;
    min-width:0;
  }

  /* נוסיף את המגדר לתוך אותה שורה ויזואלית */
  #loginForm > .field:nth-of-type(3){
    margin-top:-64px;
    margin-right:calc(66.666% + 6px);
    width:calc(33.333% - 7px);
    min-width:0;
  }

  #loginForm > .field:nth-of-type(3) select{
    width:100%;
  }

  /* כדי לפנות מקום מתחת לשורה */
  #loginForm .actions{
    margin-top:0;
  }

  /* ===== כפתורים ===== */
  #loginForm .actions,
  #memberLoginForm .actions,
  #memberRegisterForm .actions{
    display:grid !important;
    grid-template-columns:7fr 2fr;
    gap:8px;
    align-items:stretch;
    margin-top:8px;
  }

  #loginForm .actions .btn,
  #memberLoginForm .actions .btn,
  #memberRegisterForm .actions .btn{
    width:100%;
    height:44px;
    min-height:44px;
    padding:0 14px;
    border-radius:14px;
    font-size:15px;
    flex:none !important;
  }
}

/* TOPBAR FIX */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:nowrap; /* הכי חשוב */
}

/* צד ימין (כפתורים) */
.topbar .right-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

/* הלוגו והאונליין */
.topbar .brand{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

/* שלא יישבר */
.topbar .logo{
  flex-shrink:0;
}

/* מספר אונליין לא יתפוס יותר מדי */
.topbar .online-indicator{
  white-space:nowrap;
  font-size:13px;
}

/* === Typing Indicator FIX === */

.typing-indicator {
  width: 100%;
  font-size: 12px;
  color: #777;
  background: #f3f3f3;
  padding: 6px 10px;
  box-sizing: border-box;

  /* חשוב */
  display: block !important;
  height: auto !important;
  max-height: 40px;

  /* אנימציה חלקה */
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;

  /* למנוע חיתוך */
  overflow: visible !important;
}

/* מצב פעיל (כשיש מקלידים) */
.typing-indicator.active {
  opacity: 1;
  transform: translateY(0);
}

/* לוודא שהקונטיינר לא חותך */
.chat-input-area,
.chat-footer,
.message-input-container {
  overflow: visible !important;
}

.typing-strip.active {
  max-height: 40px; /* או 50 אם צריך */
  opacity: 1;
  padding: 6px 14px;
  transform: translateY(0);
}

.dm-toolbar .dm-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.dm-toolbar .dm-btn.is-active{
  background:linear-gradient(135deg, rgba(107,215,152,.18), rgba(255,255,255,.95));
  border-color:rgba(107,215,152,.45);
  color:#25734a;
}
.dm-blocked-notice{
  width:100%;
  text-align:center;
  color:#d92d20;
  font-weight:700;
  padding:14px 16px;
  border:1px solid rgba(234,84,85,.2);
  border-radius:16px;
  background:rgba(255,239,240,.85);
}
.bubble--attachment{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.dm-attachment-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:inherit;
  text-decoration:none;
  font-weight:700;
}
.dm-attachment-link:hover{text-decoration:underline}
.dm-attachment-ic{font-size:18px;line-height:1}
.dm-image-card{width:min(420px, 94vw)}
.dm-image-body{display:grid;gap:12px}
.dm-image-body input[type="file"]{
  width:100%;
  padding:12px;
  border:1px solid rgba(213,196,241,.86);
  border-radius:16px;
  background:rgba(255,255,255,.9);
}
.dm-image-file-name{font-size:14px;color:#6d6390}
.dm-image-error{font-size:14px;color:#d92d20;font-weight:700}
.dm-image-submit{justify-self:start}

.dm-toolbar .dm-btn:hover{background:rgba(255,255,255,.95)}
.dm-toolbar .dm-btn.is-disabled,.dm-toolbar .dm-btn:disabled{opacity:.55;cursor:not-allowed}
.dm-toolbar .dm-btn .dm-attachment-ic,.dm-toolbar .dm-btn span[aria-hidden="true"]{font-size:14px}
.chat-head{padding-inline-start:18px;padding-inline-end:170px}
.dm-image-viewer{position:fixed;inset:0;z-index:1200}
.dm-image-viewer__backdrop{position:absolute;inset:0;background:rgba(28,22,43,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dm-image-viewer__dialog{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:24px}
.dm-image-viewer__img{display:block;max-width:85vw;max-height:85vh;width:auto;height:auto;border-radius:22px;box-shadow:0 20px 50px rgba(23,15,39,.28);background:#fff}
.dm-image-viewer__close{position:absolute;top:max(18px,4vh);inset-inline-start:max(18px,4vw);width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.88);color:#463b67;font-size:22px;cursor:pointer;box-shadow:0 10px 24px rgba(23,15,39,.18)}
body.dm-image-viewer-open{overflow:hidden}


/* ===== DM toolbar patch for v3 ===== */

/* הבר העליון עצמו */
.chat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* הכותרת של השיחה */
.chat-head .room-title{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
}

/* אזור הכפתורים של DM - מבטל absolute ישן */
.chat-head .dm-toolbar{
  position:static !important;
  inset:auto !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;

  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start;
  gap:6px;

  flex:0 0 auto;
  margin:0;
  padding:0;
  z-index:auto;
}

/* מונע חפיפה ישנה שניסתה לשמור מקום לכפתורים */
.chat-head{
  padding-inline-start:18px !important;
  padding-inline-end:18px !important;
}

/* כפתורים עדינים יותר */
.chat-head .dm-toolbar .dm-btn{
  height:28px;
  padding:20px 20px;
  border-radius:999px;
  font-size:16px;
  font-weight:400;
  line-height:1;
  gap:5px;

  border:1px solid rgba(213,196,241,.78);
  background:rgba(255,255,255,.72);
  color:#6d6390;
  box-shadow:none;
}

/* hover עדין */
.chat-head .dm-toolbar .dm-btn:hover{
  background:rgba(255,255,255,.9);
  border-color:rgba(199,174,238,.95);
}

/* כפתור פעיל */
.chat-head .dm-toolbar .dm-btn.is-active{
  background:rgba(255,238,238,.92);
  border-color:rgba(236,146,146,.55);
  color:#c65252;
}

/* אייקונים קטנים יותר */
.chat-head .dm-toolbar .dm-btn span[aria-hidden="true"],
.chat-head .dm-toolbar .dm-btn .dm-attachment-ic{
  font-size:13px !important;
  line-height:1;
}

/* טקסט הכפתור */
.chat-head .dm-toolbar .dm-btn span:not([aria-hidden="true"]){
  display:inline-block;
  transform:translateY(-.5px);
}

/* מובייל */
@media (max-width: 768px){
  .chat-head{
    gap:8px;
    padding-inline-start:12px !important;
    padding-inline-end:12px !important;
  }

  .chat-head .dm-toolbar{
    gap:4px;
  }

  .chat-head .dm-toolbar .dm-btn{
    height:26px;
    padding:0 8px;
    font-size:11px;
    gap:4px;
  }

  .chat-head .dm-toolbar .dm-btn span[aria-hidden="true"],
  .chat-head .dm-toolbar .dm-btn .dm-attachment-ic{
    font-size:12px !important;
  }
}

/* ===== DM image modal - nicer file button ===== */

.dm-image-body input[type="file"]{
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(213,196,241,.86);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  color: #6d6390;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}

/* כפתור "בחירת קובץ" של הדפדפן בכרום/אדג' */
.dm-image-body input[type="file"]::file-selector-button{
  margin-inline-end: 12px;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec69c8 100%);
  box-shadow: 0 8px 18px rgba(188, 104, 200, .22);
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}

.dm-image-body input[type="file"]::file-selector-button:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(188, 104, 200, .28);
}

.dm-image-body input[type="file"]::file-selector-button:active{
  transform: translateY(0);
  opacity: .92;
}

/* פיירפוקס */
.dm-image-body input[type="file"]::-webkit-file-upload-button{
  margin-inline-end: 12px;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec69c8 100%);
  box-shadow: 0 8px 18px rgba(188, 104, 200, .22);
}

/* טקסט שם הקובץ */
.dm-image-file-name{
  font-size: 14px;
  color: #7a7099;
  margin-top: 2px;
}


/* Chat69 CTA + logo motion */
.btn-login-glow{
  position:relative;
  overflow:visible;
  animation:chat69LoginPulse 3.6s ease-in-out infinite;
  box-shadow:0 0 0 rgba(215,103,255,0), 0 10px 28px rgba(184,72,255,.28);
}
.btn-login-glow::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(234,120,255,.36) 0%, rgba(234,120,255,0) 72%);
  z-index:-1;
  opacity:0;
  animation:chat69LoginHalo 3.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes chat69LoginPulse{
  0%,100%{transform:translateY(0) scale(1); box-shadow:0 10px 28px rgba(184,72,255,.22)}
  12%{transform:translateY(-1px) scale(1.04); box-shadow:0 14px 34px rgba(222,108,255,.42), 0 0 22px rgba(186,91,255,.28)}
  20%{transform:translateY(0) scale(1.01)}
  28%{transform:translateY(-1px) scale(1.035)}
  38%{transform:translateY(0) scale(1)}
}
@keyframes chat69LoginHalo{
  0%,100%{opacity:0; transform:scale(.92)}
  18%{opacity:.55; transform:scale(1.08)}
  36%{opacity:0; transform:scale(1.22)}
}
.logo-orbit-wrap{position:relative; isolation:isolate;}
.logo-link{position:relative; display:inline-flex; align-items:center; justify-content:center; border-radius:999px;}

.logo-link::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(186,91,255,.26) 0%, rgba(186,91,255,0) 70%);
  animation:chat69LogoBreathe 3.2s ease-in-out infinite;
  pointer-events:none;
}
.logo-particles{position:absolute; inset:-16px; pointer-events:none;}
.logo-particles > span:not(.heart){
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(236,174,255,.95);
  box-shadow:0 0 10px rgba(218,118,255,.95);
  animation:chat69Particle 3.4s ease-in-out infinite;
  opacity:0;
}
.logo-particles span:nth-child(1){top:8%; right:16%; animation-delay:0s}
.logo-particles span:nth-child(2){bottom:16%; right:12%; animation-delay:.8s}
.logo-particles span:nth-child(3){bottom:12%; left:18%; animation-delay:1.6s}
.logo-particles span:nth-child(4){top:20%; left:10%; animation-delay:2.4s}
/* Heart particles */
.logo-particles .heart{
  position:absolute;
  width:8px;
  height:8px;
  background:#ff6ec7;
  transform:rotate(45deg) scale(.4);
  opacity:0;
  border-radius:1px;
  box-shadow:0 0 10px rgba(255,110,199,.8);
  animation:heartFloat 3.8s ease-in-out infinite;
}

.logo-particles .heart::before,
.logo-particles .heart::after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  background:#ff6ec7;
  border-radius:50%;
}

.logo-particles .heart::before{
  top:-4px;
  left:0;
}

.logo-particles .heart::after{
  top:3%;
  left:-4px;
}

.logo-particles .heart:nth-child(5){
  top:-2%;
  right:30%;
  animation-delay:.3s;
}

.logo-particles .heart:nth-child(6){
  bottom:24%;
  right:8%;
  animation-delay:1.2s;
}

.logo-particles .heart:nth-child(7){
  bottom:2%;
  left:28%;
  animation-delay:2s;
}

.logo-particles .heart:nth-child(8){
  top:34%;
  left:55%;
  animation-delay:2.8s;
}

@keyframes heartFloat{
  0%,100%{
    transform:translateY(0) scale(.4) rotate(45deg);
    opacity:0;
  }
  25%{
    opacity:1;
  }
  50%{
    transform:translateY(-10px) scale(1) rotate(45deg);
    opacity:1;
  }
  100%{
    transform:translateY(-18px) scale(.6) rotate(45deg);
    opacity:0;
  }
}
@keyframes chat69LogoOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes chat69LogoBreathe{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.16);opacity:.65}}
@keyframes chat69Particle{0%,100%{transform:translateY(0) scale(.3);opacity:0}25%{opacity:.95}55%{transform:translateY(-7px) scale(1)}100%{transform:translateY(-13px) scale(.45);opacity:0}}
.user.is-dm-target{cursor:pointer}
.user.is-self-user{cursor:default}
.user.is-dm-target:focus-visible{outline:2px solid rgba(168,85,247,.55); outline-offset:2px}
.username[data-user-id]{cursor:pointer}

.composer-file-btn{display:inline-flex;align-items:center;justify-content:center;font-size:18px}

@media (max-width: 640px){
  /* ברירת מחדל: חדר ציבורי - בלי עמודת קובץ */
  .composer{
    flex:0 0 auto;
    padding:8px 8px 10px;
    display:grid;
    grid-template-columns:50px minmax(0,1fr);
    grid-template-areas:
      "emoji text"
      "send send";
    gap:8px;
    align-items:center;
  }

  .composer > #emojiToggle{
    grid-area:emoji;
    width:50px;
    height:50px;
    border-radius:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .composer > input[type="text"]{
    grid-area:text;
    width:100%;
    min-width:0;
    height:50px;
    border-radius:16px;
  }

  .composer > .send-btn{
    grid-area:send;
    width:100%;
    height:50px;
    border-radius:16px;
  }

  .composer > input[type="file"]{
    display:none !important;
  }

  /* רק אם כפתור הקובץ באמת מוצג - כלומר ב-DM */
  .composer:has(> #composerFileBtn:not([hidden])){
    grid-template-columns:50px 50px minmax(0,1fr);
    grid-template-areas:
      "emoji file text"
      "send send send";
  }

  .composer > #composerFileBtn{
    grid-area:file;
    width:50px;
    height:50px;
    border-radius:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}


/* === Chat69 performance patch (mobile/Lighthouse) === */


.users-panel,
.rooms-panel{
  content-visibility:auto;
  contain-intrinsic-size:720px;
}

#messages,
.messages{
  content-visibility:auto;
  contain-intrinsic-size:900px;
}

@media (max-width: 900px){
  body{
    background:linear-gradient(135deg, #f2e9ff 0%, #f9f2ff 44%, #ffe8f3 100%);
  }
  body::before,
  .topbar::before,
  .panel::before,
  .logo-link::after,
  .logo-particles,
  .logo-particles > span,
  .logo-particles .heart{

  }
  .topbar,
  .panel{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    box-shadow:0 6px 18px rgba(160,121,219,.10) !important;
    background:rgba(255,255,255,.94) !important;
  }
  .messages,
  #messages{
    background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));
  }
  .bubble,
  .user,
  .room,
  .dm-thread,
  .btn-login,
  .btn-logout,
  .send-btn,
  .emoji-toggle,
  .dm-open,
  .avatar,
  .counter{
    box-shadow:none !important;
  }
}

@media (max-width: 640px){
  :root{
  color-scheme:light; --page-h:100dvh; }
  .page{ padding:10px 10px 12px; gap:10px; }
  .topbar{ min-height:64px; padding:10px 12px; }
  .topbar .logo{ height:42px; }
  .online-indicator{ padding:4px 10px; min-width:auto;margin-left:5px; }
  .layout{ gap:10px; }
  .panel{ border-radius:26px; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ===== FORCE HEEBO EVERYWHERE ===== */
html, body, * {
  font-family: 'Heebo', system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}

input, textarea, select, button {
  font-family: 'Heebo', system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}

::placeholder {
  font-family: 'Heebo', system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}



/* ===== DM MOBILE HEADER - REAL FINAL FIX ===== */
@media (max-width: 640px){
  .chat-head.dm-mobile-compact{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:8px !important;
    padding-inline-end:18px !important;
  }

  .chat-head.dm-mobile-compact .room-title{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    margin:0 !important;
    order:1 !important;
  }

  .chat-head.dm-mobile-compact #dmHeaderMetaRow,
  .chat-head.dm-mobile-compact .dm-header-meta-row{
    width:100% !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
    order:2 !important;
    direction:ltr !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }

  .chat-head.dm-mobile-compact .dm-toolbar{
    position:static !important;
    inset:auto !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    z-index:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
    width:auto !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    order:1 !important;
    direction:rtl !important;
    flex:0 0 auto !important;
  }

  .chat-head.dm-mobile-compact .chat-actions{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
    flex:0 0 auto !important;
    order:2 !important;
  }

  .chat-head.dm-mobile-compact .chat-actions .counter,
  .chat-head.dm-mobile-compact .dm-toolbar .dm-btn{
    min-width:68px !important;
    height:34px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    font-size:12px !important;
    line-height:1 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    white-space:nowrap !important;
    margin:0 !important;
    box-shadow:none !important;
    flex:0 0 auto !important;
  }

  .chat-head.dm-mobile-compact .dm-toolbar .dm-btn span[aria-hidden="true"],
  .chat-head.dm-mobile-compact .dm-toolbar .dm-btn .dm-attachment-ic{
    font-size:12px !important;
    line-height:1 !important;
  }
}

/* ===== DM PUSH NOTIFICATION ===== */

.dm-push-host {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 12px;
  margin-top:5px;
}

.dm-push {
  position: relative;
  overflow: hidden;
  width: min(92vw, 420px);
  min-height: 72px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(34,24,52,.94), rgba(63,29,83,.96));
  box-shadow:
    0 18px 48px rgba(0,0,0,.32),
    0 8px 24px rgba(113,57,167,.22),
    inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 12px 58px 14px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  direction: rtl;
  text-align: right;
  color: #fff;
  pointer-events: auto;
  cursor: pointer;
  transform: translateY(-18px) scale(.96);
  opacity: 0;
  transition:
    transform .28s ease,
    opacity .28s ease,
    box-shadow .28s ease;
}

.dm-push:hover {
  box-shadow:
    0 22px 56px rgba(0,0,0,.38),
    0 10px 28px rgba(150,75,220,.28),
    inset 0 1px 0 rgba(255,255,255,.09);
}

.dm-push.is-visible {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.dm-push.is-hiding {
  transform: translateY(-12px) scale(.97);
  opacity: 0;
}

.dm-push__avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dm-push__avatar .avatar,
.dm-push__avatar .avatar--image {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 6px 16px rgba(0,0,0,.25),
    0 0 0 2px rgba(255,255,255,.07);
}

.dm-push__avatar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dm-push__body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dm-push__title {
  display: block;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-push__text {
  display: block;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(255,255,255,.76);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-push__count {
  position: absolute;
  top: 10px;
  left: 10px;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff3ea6, #ff6ec8);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow:
    0 6px 16px rgba(255,62,166,.35),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.dm-push__progress {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transform-origin: right center;
  background: linear-gradient(90deg, #ff4db8, #9b7bff, #6fe3ff);
  box-shadow: 0 0 12px rgba(155,123,255,.45);
  animation: dmPushProgress 2.8s linear forwards;
}

@keyframes dmPushProgress {
  from {
    transform: scaleX(1);
    opacity: 1;
  }
  to {
    transform: scaleX(0);
    opacity: .55;
  }
}

@media (max-width: 640px) {
  .dm-push-host {
    padding: 0 10px;
  }

  .dm-push {
    width: 100%;
    min-height: 68px;
    border-radius: 18px;
    padding: 12px 54px 13px 12px;
    gap: 10px;
  }

  .dm-push__avatar .avatar,
  .dm-push__avatar .avatar--image {
    width: 42px;
    height: 42px;
  }

  .dm-push__title {
    font-size: 14px;
  }

  .dm-push__text {
    font-size: 12px;
  }

  .dm-push__count {
    top: 9px;
    left: 9px;
    min-width: 22px;
    height: 22px;
    font-size: 11px;
  }
}


/* ===== DM MOBILE HEADER - MODERN CARD ===== */
.chat-head{
  position:relative;
}

.dm-menu-toggle,
.dm-peer-card,
.dm-menu{
  display:none;
}

@media (max-width: 640px){
  .chat-head.dm-mobile-modern{
    direction:ltr;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:14px 16px !important;
    min-height:84px;
    border-bottom:1px solid rgba(209,189,240,.38);
    flex-direction: row !important;
  }

  .chat-head.dm-mobile-modern .room-title,
  .chat-head.dm-mobile-modern .chat-actions,
  .chat-head.dm-mobile-modern .dm-toolbar,
  .chat-head.dm-mobile-modern .status-line,
  .chat-head.dm-mobile-modern #dmHeaderMetaRow,
  .chat-head.dm-mobile-modern .dm-header-meta-row{
    display:none !important;
  }

  .chat-head.dm-mobile-modern .dm-menu-toggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    padding:0;
    border:0;
    background:transparent;
    color:#a693ca;
    font-size:32px;
    line-height:1;
    border-radius:14px;
    cursor:pointer;
    flex:0 0 40px;
    margin:0;
  }

  .chat-head.dm-mobile-modern .dm-peer-card{
    direction:ltr;
    display:flex !important;
    align-items:center;
    justify-content:flex-end;
    gap:0px;
    min-width:0;
    flex:1 1 auto;
  }

  .chat-head.dm-mobile-modern .dm-peer-meta{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:4px;
    text-align:right;
    flex:1 1 auto;
  }

  .chat-head.dm-mobile-modern .dm-peer-name{
    font-size:16px;
    line-height:1.1;
    font-weight:800;
    color:#2f2857;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .chat-head.dm-mobile-modern .dm-peer-status{
    display:inline-flex;
    flex-direction: row-reverse;
    align-items:center;
    gap:7px;
    min-width:0;
    color:#45c17d;
    font-size:13px;
    font-weight:500;
  }

  .chat-head.dm-mobile-modern .dm-peer-status-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.95);
    box-shadow:0 0 0 4px rgba(106,214,151,.16);
    background:#b9b3cc;
    flex:0 0 12px;
  }

  .chat-head.dm-mobile-modern .dm-peer-status-dot.is-online{
    background:#5bc67a;
  }

  .chat-head.dm-mobile-modern .dm-peer-status-dot.is-offline{
    background:#b9b3cc;
    box-shadow:none;
  }

  .chat-head.dm-mobile-modern .dm-peer-avatar-wrap{
    flex:0 0 64px;
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .chat-head.dm-mobile-modern .avatar--dm-header{
    width:42px;
    height:42px;
    border-radius:50%;
    border:3px solid rgba(255,255,255,.88);
    box-shadow:0 14px 30px rgba(158,119,228,.20), 0 0 0 1px rgba(212,190,242,.50);
  }

  .chat-head.dm-mobile-modern .avatar--dm-header .avatar-letter{
    font-size:16px;
  }

  .chat-head.dm-mobile-modern .dm-menu{
    position:absolute;
    top:calc(100% - 10px);
    inset-inline-start:14px;
    min-width:180px;
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:10px;
    border-radius:24px;
    background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,247,255,.92));
    border:1px solid rgba(220,204,245,.88);
    box-shadow:0 20px 45px rgba(155,116,214,.18);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    z-index:40;
  }

  .chat-head.dm-mobile-modern .dm-menu[hidden]{
    display:none !important;
  }

  .chat-head.dm-mobile-modern .dm-menu-item{
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    padding:0 12px;
    border:0;
    border-radius:16px;
    background:transparent;
    color:#5c507f;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    text-align:right;
  }

  .chat-head.dm-mobile-modern .dm-menu-item:hover{
    background:rgba(245,238,255,.95);
  }

  .chat-head.dm-mobile-modern .dm-menu-item.is-active{
    color:#c65252;
    background:rgba(255,239,239,.88);
  }

  .chat-head.dm-mobile-modern .dm-menu-item:disabled{
    opacity:.55;
    cursor:not-allowed;
  }

  .chat-head.dm-mobile-modern .dm-menu-item span[aria-hidden="true"],
  .chat-head.dm-mobile-modern .dm-menu-item .dm-attachment-ic{
    font-size:18px !important;
    line-height:1;
  }
}

/* ===== DM MOBILE HEADER FIX ===== */
@media (max-width: 768px) {

  .dm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    direction: rtl;
  }

  /* צד ימין (אווטר + טקסט) */
  .dm-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* אווטר */
  .dm-header-avatar {
    width: 44px; /* קטן בחצי בערך */
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* טקסטים */
  .dm-header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .dm-header-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
  }

  .dm-header-status {
    font-size: 13px;
    color: #8a8a8a;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  /* נקודה ירוקה */
  .dm-header-status::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #4cd964;
    border-radius: 50%;
    display: inline-block;
  }

  /* 3 נקודות בצד שמאל */
  .dm-header-menu {
    font-size: 22px;
    padding: 6px;
    cursor: pointer;
  }

}

@media (max-width: 768px) {

  /* ההדר כולו */
  .chat-head {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    direction: rtl;
  }

  /* צד ימין (אווטר + טקסט) */
  .dm-peer-card {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-right: auto; /* דוחף לימין */
  }

  /* אווטר */
  .dm-peer-avatar-wrap {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
    border-radius: 50%;
    flex-shrink: 0;
  }

  /* טקסט */
  .dm-peer-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* תפריט 3 נקודות */
  .dm-menu-toggle {
    margin-left: auto; /* דוחף לשמאל */
    font-size: 22px;
  }
   .dm-toolbar{display:none !important;}
}

/* ===== PATCH: DM mobile menu dropdown not clipped ===== */
@media (max-width: 768px){

  /* לא לחתוך את התפריט הנפתח */
  .panel.chat-panel{
    overflow: visible !important;
  }

  .chat-head{
    position: relative !important;
    overflow: visible !important;
    z-index: 50 !important;
  }

  /* כפתור 3 הנקודות */
  .dm-menu-toggle{
    position: relative !important;
    z-index: 60 !important;
  }

  /* התפריט עצמו */
  .dm-menu{
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 12px !important;
    right: auto !important;
    z-index: 9999 !important;

    min-width: 170px !important;
    background: rgba(255,255,255,0.98) !important;
    border: 1px solid rgba(188,163,230,0.45) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 40px rgba(126,87,194,0.22) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    overflow: hidden !important;
  }

  /* פריטי התפריט */
  .dm-menu button,
  .dm-menu .menu-item,
  .dm-menu [role="menuitem"]{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    text-align: right !important;
    background: transparent !important;
    border: 0 !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    cursor: pointer !important;
  }

  .dm-menu button + button,
  .dm-menu .menu-item + .menu-item,
  .dm-menu [role="menuitem"] + [role="menuitem"]{
    border-top: 1px solid rgba(188,163,230,0.22) !important;
  }
  .btn-login, .btn-logout{font-size:12px;min-height:36px;}
  /* הסתרת אווטר בחדרים ציבוריים בלבד */
.chat-head:not(.dm-mobile-compact) .dm-peer-avatar-wrap{
  display: none !important;
}
/* להציג רק ב-DM */
.chat-head:not(.dm-mobile-compact) .dm-peer-card{
  display: none !important;
}
}





/* ===== DM report modal ===== */
.dm-menu-item.report-user{
  color:#c45d76;
}
.dm-menu-item.report-user:hover{
  background:rgba(255,240,246,.92) !important;
}
.dm-report-card{
  width:min(420px, 94vw) !important;
}
.dm-report-head h3{
  font-size:22px;
}
.dm-report-form{
  gap:10px;
}
.dm-report-field{
  gap:8px;
}
.dm-report-textarea{
  width:100%;
  min-height:118px;
  max-height:118px;
  resize:none;
  border:1px solid rgba(213,199,241,.86);
  border-radius:18px;
  background:rgba(255,255,255,.92);
  color:var(--text);
  padding:12px 14px;
  outline:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94);
}
.dm-report-textarea:focus{
  border-color:rgba(176,130,236,.95);
  box-shadow:0 0 0 4px rgba(176,130,236,.12), inset 0 1px 0 rgba(255,255,255,.94);
}
.dm-report-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#8b80ab;
  font-size:13px;
}
.dm-report-target{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.dm-report-count{
  flex:0 0 auto;
  font-weight:700;
}
.dm-report-error{
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,240,242,.95);
  border:1px solid rgba(248,173,190,.75);
  color:#c05268;
  font-size:13px;
}
.dm-report-success{
  padding:11px 12px;
  border-radius:14px;
  background:rgba(236,253,245,.96);
  border:1px solid rgba(110,231,183,.8);
  color:#127a52;
  font-size:13px;
  font-weight:700;
}
.dm-report-actions{
  display:flex;
  gap:8px;
  margin-top:2px;
}
.dm-report-actions .btn{
  flex:1 1 0;
}
@media (max-width: 640px){
  .dm-report-card{
    width:min(360px, 94vw) !important;
    padding:22px 18px 16px;
  }
  .dm-report-textarea{
    min-height:104px;
    max-height:104px;
  }
}


html.dark-mode{
  color-scheme:dark;
}

body.dark-mode{
  --bg-1:#120f1d;
  --bg-2:#191327;
  --bg-3:#231833;
  --surface:rgba(23,18,35,.78);
  --surface-strong:rgba(31,23,48,.92);
  --surface-soft:rgba(255,255,255,.06);
  --line:rgba(144,117,201,.24);
  --line-strong:rgba(173,137,235,.34);
  --text:#f4edff;
  --text-soft:#b8a9d1;
  --purple:#a476ff;
  --purple-2:#c18cff;
  --pink:#ff72c7;
  --pink-2:#ff9ddd;
  --green:#46d985;
  --shadow-lg:0 24px 70px rgba(0,0,0,.34);
  --shadow-md:0 16px 34px rgba(0,0,0,.28);
  --shadow-sm:0 8px 20px rgba(0,0,0,.18);
  background:
    radial-gradient(1200px 500px at 5% 100%, rgba(137,96,255,.18), transparent 60%),
    radial-gradient(900px 420px at 100% 0%, rgba(255,114,199,.14), transparent 62%),
    linear-gradient(135deg, #0f0c18 0%, #161121 38%, #1d1326 100%);
}

body.dark-mode::before{
  background:
    radial-gradient(220px 100px at 15% 18%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(340px 120px at 84% 92%, rgba(255,255,255,.03), transparent 72%),
    radial-gradient(300px 120px at 60% 6%, rgba(255,255,255,.03), transparent 75%);
  opacity:1;
}

body.dark-mode h2,
body.dark-mode .panel-head h3,
body.dark-mode .chat-head b,
body.dark-mode .room b,
body.dark-mode .user .meta .row b,
body.dark-mode .dm-thread .meta .row b{
  color:var(--text);
}

body.dark-mode .topbar,
body.dark-mode .panel,
body.dark-mode .user,
body.dark-mode .room,
body.dark-mode .dm-thread,
body.dark-mode .search,
body.dark-mode .gender-filter,
body.dark-mode .seg-toggle,
body.dark-mode .counter,
body.dark-mode .chip,
body.dark-mode .emoji-row,
body.dark-mode .sound-toggle,
body.dark-mode .online-indicator,
body.dark-mode .btn-logout,
body.dark-mode .composer input,
body.dark-mode .composer textarea,
body.dark-mode .composer-file-preview,
body.dark-mode .modal-card,
body.dark-mode .login-toggle,
body.dark-mode .form .field input,
body.dark-mode .form .field select,
body.dark-mode .settings-menu{
  background:rgba(28,21,42,.84);
  color:var(--text);
  border-color:rgba(154,126,207,.22);
  box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, var(--shadow-sm);
}

body.dark-mode .topbar{
  background:linear-gradient(90deg, rgba(26,19,39,.88), rgba(36,27,56,.92));
}
body.dark-mode .topbar::before,
body.dark-mode .panel::before{
  background:
    radial-gradient(250px 140px at 15% 10%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(360px 180px at 85% 100%, rgba(255,114,199,.06), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 28%);
}

body.dark-mode .messages,
body.dark-mode .composer{
  background:rgba(13,10,20,.22);
}

body.dark-mode .msg.is-other .bubble,
body.dark-mode .msg.other,
body.dark-mode .bubble,
body.dark-mode .msg:not(.is-me):not(.is-self) .bubble{
  background:rgba(38,29,56,.96);
  color:var(--text);
  border-color:rgba(157,126,212,.22);
}

body.dark-mode .msg.is-me .bubble,
body.dark-mode .msg.self,
body.dark-mode .msg.is-self .bubble{
  background:linear-gradient(135deg, rgba(164,118,255,.96), rgba(255,114,199,.92));
  color:#fff;
}

body.dark-mode .muted,
body.dark-mode .help-links a,
body.dark-mode .status-line,
body.dark-mode .user .meta .row.micro,
body.dark-mode .dm-thread .meta .row.gender,
body.dark-mode .dm-thread .meta .row.lastmsg,
body.dark-mode .brand-sub,
body.dark-mode .settings-menu__head span,
body.dark-mode .settings-row__text small{
  color:var(--text-soft);
}

body.dark-mode .settings-row{
    background:#473b5a;
}

body.dark-mode .search input::placeholder,
body.dark-mode .composer input::placeholder,
body.dark-mode textarea::placeholder{
  color:rgba(214,201,235,.6);
}

body.dark-mode .online-indicator .count,
body.dark-mode .room .count,
body.dark-mode .badge.age,
body.dark-mode .pill,
body.dark-mode .dm-open,
body.dark-mode .counter{
  background:rgba(46,35,67,.92);
  color:var(--text);
  border-color:rgba(162,130,218,.22);
}

body.dark-mode .gender-filter__item,
body.dark-mode .seg-toggle .seg-item{
  color:var(--text-soft);
  color:#fff;
}

body.dark-mode .gender-filter__item:hover,
body.dark-mode .seg-toggle .seg-item:hover{
  background:rgba(255,255,255,.04);
  color:var(--text);
}

body.dark-mode .btn-logout:hover,
body.dark-mode .settings-btn:hover{
  background:rgba(42,32,61,.94);
}

body.dark-mode .users-action-btn,
body.dark-mode .settings-btn.users-action-btn{
  background:rgba(35,27,52,.88);
  border-color:rgba(89,72,126,.9);
  color:#efe8ff;
}

body.dark-mode .users-action-btn:hover,
body.dark-mode .settings-btn.users-action-btn:hover,
body.dark-mode .settings-btn:hover{
  background:rgba(42,32,61,.94);
}


.settings-wrap{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
}

.settings-btn{
  width:46px;
  height:46px;
  border:1px solid rgba(214,199,241,.85);
  background:rgba(255,255,255,.72);
  color:#5d547f;
  border-radius:16px;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.settings-btn:hover{
  transform:translateY(-1px) rotate(8deg);
}

.settings-menu{
  position:absolute;
  top:calc(100% + 10px);
  inset-inline-start:0;
  width:min(290px, calc(100vw - 32px));
  padding:14px;
  border-radius:22px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(214,199,241,.88);
  box-shadow:0 18px 45px rgba(90,67,140,.18);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  z-index:120;
}


.settings-menu__head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}

.settings-menu__head strong{
  font-size:15px;
  color:var(--text);
}

.settings-menu__head span{
  font-size:13px;
  color:#8e85ae;
}

.settings-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-radius:18px;
  background:rgba(255,255,255,.48);
  border:1px solid rgba(214,199,241,.62);
  margin-top:5px;
}

.settings-row__text{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.settings-row__text strong{
  font-size:14px;
  color:var(--text);
}

.settings-row__text small{
  font-size:12px;
  color:#8e85ae;
}

.chat69-theme-toggle{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}

.chat69-theme-toggle .toggle-track{
  position:relative;
  width:84px;
  height:42px;
  border-radius:999px;
  display:block;
  background:linear-gradient(135deg, #ffc4ec 0%, #f087ff 52%, #8f4dff 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.55), 0 10px 24px rgba(162,48,176,.24), 0 0 0 1px rgba(255,255,255,.25);
  transition:all .35s ease;
  overflow:hidden;
}

.chat69-theme-toggle .toggle-track::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.55) 0 10%, transparent 11%),
    radial-gradient(circle at 32% 65%, rgba(255,255,255,.2) 0 8%, transparent 9%),
    radial-gradient(circle at 78% 26%, rgba(255,255,255,.18) 0 7%, transparent 8%);
  opacity:.9;
  transition:opacity .35s ease;
}

.chat69-theme-toggle .toggle-thumb{
  position:absolute;
  top:4px;
  left:4px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #ffffff 0%, #fff2a8 52%, #ffc53d 100%);
  box-shadow:0 5px 12px rgba(0,0,0,.22), 0 0 18px rgba(255,212,77,.38);
  transition:transform .35s ease, background .35s ease, box-shadow .35s ease;
  z-index:2;
}

.chat69-theme-toggle .toggle-icon{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  line-height:1;
  z-index:1;
  transition:opacity .35s ease, transform .35s ease;
  user-select:none;
  pointer-events:none;
}

.chat69-theme-toggle .sun{
  left:12px;
  font-size:16px;
  opacity:0;
  transform:translateY(-50%) scale(.8);
}

.chat69-theme-toggle .moon{
  right:12px;
  font-size:15px;
  opacity:1;
  transform:translateY(-50%) scale(1);
}

body.dark-mode .chat69-theme-toggle .toggle-track{
  background:linear-gradient(135deg, #171022 0%, #2b1942 45%, #6e2ab1 78%, #ff4fb3 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.08), 0 12px 30px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.06);
}

body.dark-mode .chat69-theme-toggle .toggle-track::before{
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 3%, transparent 4%),
    radial-gradient(circle at 36% 68%, rgba(255,255,255,.65) 0 2.5%, transparent 3.5%),
    radial-gradient(circle at 72% 24%, rgba(255,255,255,.7) 0 2.5%, transparent 3.5%),
    radial-gradient(circle at 82% 58%, rgba(255,255,255,.45) 0 2%, transparent 3%);
  opacity:1;
}

body.dark-mode .chat69-theme-toggle .toggle-thumb{
  transform:translateX(42px);
  background:radial-gradient(circle at 35% 35%, #fff8d0 0%, #eee1ff 46%, #b18cff 100%);
  box-shadow:0 5px 14px rgba(0,0,0,.3), 0 0 18px rgba(177,140,255,.32);
}

body.dark-mode .chat69-theme-toggle .sun{
  opacity:1;
  transform:translateY(-50%) scale(1);
}

body.dark-mode .chat69-theme-toggle .moon{
  opacity:0;
  transform:translateY(-50%) scale(.8);
}

.chat69-theme-toggle:hover .toggle-track{
  transform:scale(1.03);
}


.chat69-layout-toggle{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}

.chat69-layout-toggle .toggle-track{
  position:relative;
  width:84px;
  height:42px;
  border-radius:999px;
  display:block;
  background:linear-gradient(135deg, #efe7ff 0%, #dccfff 46%, #c4b0ff 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.75), 0 10px 24px rgba(122,93,194,.18), 0 0 0 1px rgba(255,255,255,.34);
  transition:all .35s ease;
  overflow:hidden;
}

.chat69-layout-toggle .toggle-track::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 24% 28%, rgba(255,255,255,.52) 0 10%, transparent 11%),
    linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  opacity:.95;
}

.chat69-layout-toggle .toggle-thumb{
  position:absolute;
  top:4px;
  left:4px;
  width:34px;
  height:34px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #ffffff 0%, #f8f2ff 52%, #d8c5ff 100%);
  box-shadow:0 5px 12px rgba(71,48,124,.22), 0 0 14px rgba(255,255,255,.38);
  transition:transform .35s ease, background .35s ease, box-shadow .35s ease;
  z-index:2;
}

.chat69-layout-toggle .toggle-panels{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding-inline:11px;
  z-index:1;
  transition:opacity .28s ease, transform .35s ease;
  pointer-events:none;
}

.chat69-layout-toggle .toggle-panels i{
  display:block;
  height:14px;
  border-radius:5px;
  border:1px solid rgba(93,77,140,.28);
  background:rgba(255,255,255,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
}

.chat69-layout-toggle .panels-wide{
  justify-content:space-between;
  opacity:1;
  transform:translateX(0);
}

.chat69-layout-toggle .panels-wide i:nth-child(1),
.chat69-layout-toggle .panels-wide i:nth-child(3){
  width:12px;
}

.chat69-layout-toggle .panels-wide i:nth-child(2){
  width:24px;
}

.chat69-layout-toggle .panels-focus{
  justify-content:flex-end;
  opacity:0;
  transform:translateX(-6px);
}

.chat69-layout-toggle .panels-focus i{
  width:26px;
  height:16px;
}

.chat69-layout-toggle.is-active .toggle-track,
body.chat69-focus-mode .chat69-layout-toggle .toggle-track{
  background:linear-gradient(135deg, #231331 0%, #4b2776 56%, #9b49dd 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.08), 0 12px 26px rgba(74,31,125,.28), 0 0 0 1px rgba(255,255,255,.08);
}

.chat69-layout-toggle.is-active .toggle-thumb,
body.chat69-focus-mode .chat69-layout-toggle .toggle-thumb{
  transform:translateX(42px);
  background:radial-gradient(circle at 32% 32%, #fff7ff 0%, #eadbff 48%, #b78cff 100%);
  box-shadow:0 5px 14px rgba(0,0,0,.28), 0 0 16px rgba(183,140,255,.34);
}

.chat69-layout-toggle.is-active .panels-wide,
body.chat69-focus-mode .chat69-layout-toggle .panels-wide{
  opacity:0;
  transform:translateX(8px);
}

.chat69-layout-toggle.is-active .panels-focus,
body.chat69-focus-mode .chat69-layout-toggle .panels-focus{
  opacity:1;
  transform:translateX(0);
}

.chat69-layout-toggle.is-active .toggle-panels i,
body.chat69-focus-mode .chat69-layout-toggle .toggle-panels i{
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.18);
}

.chat69-layout-toggle:hover .toggle-track{
  transform:scale(1.03);
}

@media (max-width: 1024px){
  .focus-row{
    opacity:.78;
  }

  .focus-row .settings-row__text small::after{
    content:" • זמין בעיקר בדסקטופ";
  }
}

body.dark-mode .chat69-layout-toggle .toggle-track{
  background:linear-gradient(135deg, #1d1329 0%, #34214e 50%, #8f48dc 100%);
  box-shadow:inset 0 1px 2px rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.07);
}


body.dark-mode .chat69-layout-toggle .toggle-track::before{
  background:
    radial-gradient(circle at 24% 28%, rgba(255,255,255,.25) 0 8%, transparent 9%),
    radial-gradient(circle at 72% 68%, rgba(255,255,255,.16) 0 7%, transparent 8%),
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0));
}

body.dark-mode .chat69-layout-toggle .toggle-thumb{
  background:radial-gradient(circle at 30% 30%, #fffaff 0%, #f0e6ff 48%, #c6a6ff 100%);
}

body.dark-mode .chat69-layout-toggle .toggle-panels i{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.12);
}

@media (max-width: 900px){
  .settings-menu{
    inset-inline-start:auto;
    inset-inline-end:0;
  }
}


/* שכבות נכונות לפאנל משתמשים */
.users-panel{
  position: relative;
  isolation: isolate;
}

.users-panel .panel-head{
  position: relative;
  z-index: 30;
  overflow: visible !important;
}

.users-actions-bar{
  position: relative;
  z-index: 35;
  overflow: visible !important;
}

.settings-wrap{
  position: relative;
  z-index: 40;
  overflow: visible !important;
}

.settings-menu{
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 999;
}

.users-panel .users-list,
.users-panel .pm-list{
  position: relative;
  z-index: 1;
}

/* ===== Chat area dark mode polish ===== */
body.dark-mode .chat-panel{
  background:
    linear-gradient(180deg, rgba(20,15,31,.94), rgba(18,13,28,.92));
  border-color: rgba(165,130,230,.22);
  box-shadow:
    0 0 0 1px rgba(120,88,178,.18) inset,
    0 24px 60px rgba(0,0,0,.34);
}

body.dark-mode .chat-head{
  background:
    linear-gradient(180deg, rgba(34,24,52,.82), rgba(27,19,41,.72));
  border-bottom-color: rgba(165,130,230,.18);
}

body.dark-mode .messages,
body.dark-mode #messages{
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.03), transparent 28%),
    linear-gradient(180deg, rgba(36,28,52,.86) 0%, rgba(28,21,41,.94) 100%);
}

body.dark-mode .msg{
  color: var(--text);
}

body.dark-mode .msg .username{
  color: #f4edff;
}

body.dark-mode .msg .user-details{
  color: #d9caf6;
  font-weight: 700;
  text-shadow: 0 1px 10px rgba(0,0,0,.18);
}

body.dark-mode .msg .time{
  color: #9f8fc1;
}

body.dark-mode .msg.is-other .bubble{
  background: linear-gradient(180deg, rgba(53,41,77,.96), rgba(42,31,62,.96));
  color: #f8f3ff;
  border: 1px solid rgba(160,128,222,.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 24px rgb(115 67 113 / 20%);
}

body.dark-mode .msg.is-self .bubble{
  background: linear-gradient(135deg, rgba(120,74,255,.96), rgba(255,95,194,.92));
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 12px 28px rgba(95,42,170,.26);
}

body.dark-mode .msg .bubble.bubble--attachment{
  background: linear-gradient(180deg, rgba(48,36,70,.96), rgba(39,29,58,.96));
}

body.dark-mode .typing-strip{
  background: linear-gradient(180deg, rgba(33,25,48,.74), rgba(22,17,33,.42));
}

body.dark-mode .typing-strip__inner{
  color: #cdbdf0;
}

body.dark-mode .composer{
  background: linear-gradient(180deg, rgba(24,18,36,.96), rgba(18,13,28,.98));
  border-top-color: rgba(161,129,221,.14);
}

body.dark-mode .composer input[type="text"]{
  background: rgba(255,255,255,.04);
  border-color: rgba(161,129,221,.18);
  color: #f7efff;
}

body.dark-mode .composer input[type="text"]::placeholder{
  color: #9384b4;
}

body.dark-mode .msg .user-details{
  color: #ffffff;
  font-weight: 800;
}

/* ===== Gender filter dark mode ===== */
body.dark-mode .gender-filter{
  background: linear-gradient(180deg, rgba(38,28,57,.88), rgba(28,21,43,.92));
  border-color: rgba(159,126,221,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 20px rgba(0,0,0,.18);
}

body.dark-mode .gender-filter__item{
  color: #b7a9d6;
  background: transparent;
}

body.dark-mode .gender-filter__item:hover{
  color: #f3ebff;
  background: rgba(255,255,255,.04);
}

body.dark-mode .gender-filter__item.is-active{
  color: #f8f7ff;
  background: linear-gradient(135deg, rgba(146,227,236,.90), rgba(130,194,255,.88));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 8px 18px rgba(82,138,255,.20);
}


/* ===== MOBILE DARK MODE FIX ===== */
@media (max-width: 900px){
  body.dark-mode{
    background:
      radial-gradient(1200px 500px at 5% 100%, rgba(137,96,255,.18), transparent 60%),
      radial-gradient(900px 420px at 100% 0%, rgba(255,114,199,.14), transparent 62%),
      linear-gradient(135deg, #0f0c18 0%, #161121 38%, #1d1326 100%) !important;
  }

  body.dark-mode::before{
    background:
      radial-gradient(220px 100px at 15% 18%, rgba(255,255,255,.06), transparent 70%),
      radial-gradient(340px 120px at 84% 92%, rgba(255,255,255,.03), transparent 72%),
      radial-gradient(300px 120px at 60% 6%, rgba(255,255,255,.03), transparent 75%) !important;
    opacity: 1 !important;
  }

  body.dark-mode .topbar,
  body.dark-mode .panel{
    background: linear-gradient(180deg, rgba(27,20,41,.96), rgba(20,15,31,.94)) !important;
    border-color: rgba(165,130,230,.18) !important;
    box-shadow:
      0 0 0 1px rgba(120,88,178,.18) inset,
      0 16px 34px rgba(0,0,0,.28) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.dark-mode .panel::before,
  body.dark-mode .topbar::before{
    background:
      radial-gradient(250px 140px at 15% 10%, rgba(255,255,255,.04), transparent 70%),
      radial-gradient(360px 180px at 85% 100%, rgba(255,211,240,.05), transparent 72%),
      linear-gradient(180deg, rgba(255,255,255,.03), transparent 28%) !important;
  }

  body.dark-mode .messages,
  body.dark-mode #messages{
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.03), transparent 28%),
      linear-gradient(180deg, rgba(36,28,52,.86) 0%, rgba(28,21,41,.94) 100%) !important;
  }

  body.dark-mode .user,
  body.dark-mode .room,
  body.dark-mode .dm-thread{
    background: linear-gradient(180deg, rgba(63,51,88,.94), rgba(54,43,76,.94)) !important;
    border-color: rgba(158,126,220,.18) !important;
    color: #f4edff !important;
  }

  body.dark-mode .rooms-panel .room b,
  body.dark-mode .users-panel .user .meta b,
  body.dark-mode .dm-thread .meta b,
  body.dark-mode h2,
  body.dark-mode .panel-head h3{
    color: #f4edff !important;
  }

  body.dark-mode .help-links a,
  body.dark-mode .muted,
  body.dark-mode .user .meta .row.micro,
  body.dark-mode .dm-thread .meta .row.gender,
  body.dark-mode .dm-thread .meta .row.lastmsg{
    color: #b8a9d1 !important;
  }

  body.dark-mode .composer{
    background: linear-gradient(180deg, rgba(24,18,36,.96), rgba(18,13,28,.98)) !important;
    border-top-color: rgba(161,129,221,.14) !important;
  }

  body.dark-mode .composer > input[type="text"]{
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(161,129,221,.18) !important;
    color: #f7efff !important;
  }

  body.dark-mode .composer > input[type="text"]::placeholder{
    color: #9384b4 !important;
  }

  body.dark-mode .composer > #emojiToggle,
  body.dark-mode .composer > #composerFileBtn,
  body.dark-mode .dm-open,
  body.dark-mode .counter{
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(161,129,221,.18) !important;
    color: #f4edff !important;
  }
}

/* ===== Desktop DM action buttons dark mode ===== */
body.dark-mode .chat-panel .chip,
body.dark-mode .chat-panel .pill,
body.dark-mode .chat-panel .sound-toggle,
body.dark-mode .chat-panel .emoji-row,
body.dark-mode .chat-panel #emojiToggle,
body.dark-mode .chat-panel #composerFileBtn,
body.dark-mode .chat-panel .composer > button:not(.send-btn) {
  background: linear-gradient(180deg, rgba(58,46,82,.96), rgba(45,35,66,.96)) !important;
  color: #f4edff !important;
  border: 1px solid rgba(160,128,222,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(0,0,0,.18) !important;
}

body.dark-mode .chat-panel .chip:hover,
body.dark-mode .chat-panel .pill:hover,
body.dark-mode .chat-panel .sound-toggle:hover,
body.dark-mode .chat-panel #emojiToggle:hover,
body.dark-mode .chat-panel #composerFileBtn:hover,
body.dark-mode .chat-panel .composer > button:not(.send-btn):hover {
  background: linear-gradient(180deg, rgba(70,55,98,.98), rgba(53,40,77,.98)) !important;
  border-color: rgba(184,152,240,.26) !important;
  color: #ffffff !important;
}

body.dark-mode .chat-panel .chip:active,
body.dark-mode .chat-panel .pill:active,
body.dark-mode .chat-panel .sound-toggle:active,
body.dark-mode .chat-panel #emojiToggle:active,
body.dark-mode .chat-panel #composerFileBtn:active,
body.dark-mode .chat-panel .composer > button:not(.send-btn):active {
  transform: translateY(1px);
}

body.dark-mode .chat-panel #emojiToggle,
body.dark-mode .chat-panel #composerFileBtn {
  min-width: 54px;
}

body.dark-mode .chat-panel #emojiToggle svg,
body.dark-mode .chat-panel #composerFileBtn svg,
body.dark-mode .chat-panel .chip svg,
body.dark-mode .chat-panel .pill svg {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* DM composer side buttons - dark mode */
body.dark-mode .composer .btn,
body.dark-mode .composer button:not(.send-btn){
  background: linear-gradient(180deg, rgba(58,46,82,.96), rgba(45,35,66,.96)) !important;
  color: #f4edff !important;
  border: 1px solid rgba(160,128,222,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(0,0,0,.18) !important;
}

/* DM header buttons - dark mode */
body.dark-mode .chat-head .btn,
body.dark-mode .dm-head .btn,
body.dark-mode .dm-topbar .btn,
body.dark-mode .dm-actions .btn{
  background: linear-gradient(180deg, rgba(58,46,82,.96), rgba(45,35,66,.96)) !important;
  color: #f4edff !important;
  border: 1px solid rgba(160,128,222,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(0,0,0,.18) !important;
}

body.dark-mode .chat-head .btn:hover,
body.dark-mode .dm-head .btn:hover,
body.dark-mode .dm-topbar .btn:hover,
body.dark-mode .dm-actions .btn:hover{
  background: linear-gradient(180deg, rgba(70,55,98,.98), rgba(53,40,77,.98)) !important;
  color: #ffffff !important;
  border-color: rgba(184,152,240,.26) !important;
}




.bubble--help-bot{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.help-bot-text{
  line-height:1.55;
}
.help-bot-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:2px;
}
.help-bot-action-btn{
  appearance:none;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:inherit;
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
  font:inherit;
  font-weight:700;
}
.help-bot-action-btn:hover{
  transform:translateY(-1px);
}
body.dark-mode .help-bot-action-btn{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.12);
}


/* ===== Help bot rich card ===== */
.bubble--help-bot{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
  min-width:min(100%, 320px);
  max-width:min(100%, 560px);
}
.help-bot-card{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  padding:16px;
  border:1px solid rgba(168,85,247,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,242,255,.92));
  box-shadow:0 14px 30px rgba(139,92,246,.10), inset 0 1px 0 rgba(255,255,255,.8);
}
.help-bot-card::before{
  content:"";
  position:absolute;
  inset:auto -46px -54px auto;
  width:170px;
  height:170px;
  background:radial-gradient(circle,rgba(244,114,182,.16),transparent 68%);
  pointer-events:none;
}
.help-bot-card--danger{
  background:linear-gradient(180deg,#fff8fb,#fff0f6);
}
.help-bot-card--chat{
  background:linear-gradient(180deg,#fefcff,#f6f2ff);
}
.help-bot-card--other{
  background:linear-gradient(180deg,#fffdf9,#fff7eb);
}
.help-bot-card--success{
  background:linear-gradient(180deg,#f9fffb,#eefcf5);
}
.help-bot-card__chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  padding:8px 12px;
  margin-bottom:12px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(168,85,247,.12);
  color:#725b9e;
  font-size:13px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(139,92,246,.08);
}
.help-bot-card__chip-icon{font-size:18px;line-height:1}
.help-bot-card__title{
  font-size:26px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.02em;
  color:#48316d;
  margin-bottom:8px;
}
.help-bot-card__subtitle{
  color:#8776a7;
  font-size:15px;
  line-height:1.55;
  margin-bottom:14px;
}
.help-bot-card__options{
  display:grid;
  gap:12px;
}
.help-bot-option{
  width:100%;
  border:none;
  border-radius:22px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:right;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(250,245,255,.92));
  border:1px solid rgba(168,85,247,.12);
  box-shadow:0 10px 22px rgba(139,92,246,.08);
  cursor:pointer;
  transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
.help-bot-option:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(139,92,246,.14), 0 0 0 4px rgba(244,114,182,.06);
  border-color:rgba(236,72,153,.18);
}
.help-bot-option:active{
  transform:scale(.985);
  box-shadow:0 9px 18px rgba(236,72,153,.14);
}
.help-bot-option__main{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.help-bot-option__emoji{
  width:46px;
  height:46px;
  border-radius:16px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  font-size:23px;
  line-height:1;
  background:linear-gradient(180deg,#f1e8ff,#e9dcff);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 8px 16px rgba(0,0,0,.06);
}
.help-bot-option--danger .help-bot-option__emoji{background:linear-gradient(180deg,#ffe6f0,#ffd4e8)}
.help-bot-option--chat .help-bot-option__emoji{background:linear-gradient(180deg,#eef6ff,#dceafe)}
.help-bot-option--other .help-bot-option__emoji{background:linear-gradient(180deg,#fff3e6,#ffe7c7)}
.help-bot-option--success .help-bot-option__emoji{background:linear-gradient(180deg,#ebfff2,#d6f8e4)}
.help-bot-option__labels{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.help-bot-option__label{
  font-size:18px;
  font-weight:900;
  color:#46326a;
  line-height:1.2;
}
.help-bot-option__desc{
  margin-top:4px;
  font-size:13px;
  line-height:1.45;
  color:#8d7cae;
}
.help-bot-option__arrow{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(168,85,247,.12);
  color:#8f7fb0;
  font-size:22px;
  font-weight:800;
}
.help-bot-card__input-note{
  margin-top:12px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px dashed rgba(168,85,247,.18);
  color:#7d6e9f;
  font-size:14px;
  font-weight:700;
}
.help-bot-card__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:14px;
  flex-wrap:wrap;
}
.help-bot-card__step{
  color:#957fbc;
  font-size:13px;
  font-weight:900;
}
.help-bot-card__system{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.help-bot-system-btn{
  border:none;
  border-radius:999px;
  padding:10px 14px;
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(245,241,255,.94));
  border:1px solid rgba(168,85,247,.14);
  color:#735f9f;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 16px rgba(139,92,246,.06);
}
.help-bot-system-btn:hover{
  border-color:rgba(236,72,153,.18);
}
@media (max-width: 640px){
  .help-bot-card{padding:14px;border-radius:24px}
  .help-bot-card__title{font-size:22px}
  .help-bot-option{padding:12px 14px;border-radius:19px}
  .help-bot-option__emoji{width:42px;height:42px;font-size:21px;border-radius:14px}
  .help-bot-option__label{font-size:16px}
  .help-bot-option__desc{font-size:12px}
}

/* === FIX DM LAST MESSAGE OVERFLOW === */

/* חשוב בגלל flex */
.user.dm-thread .meta {
  min-width: 0;
  flex: 1;
}

/* שורה של ההודעה האחרונה */
.user.dm-thread .lastmsg {
  display: block;
  max-width: 100%;
  
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ביטחון נוסף */
.user.dm-thread .left {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* הכרטיס */
.user.is-dm-target {
  position: relative;
}

/* כפתור מעטפה */
.user.is-dm-target .dm-open {
  position: relative;
  z-index: 2;
}

/* הבדג' */
.user.is-dm-target .badge.unread {
  position: absolute;

  /* מיקום לפי הצד של המעטפה */
  left: 36px;  /* ← זה הקסם (תתאים לפי הרוחב שלך) */
  top: 9px;

  transform: translate(50%, -50%);

  min-width: 18px;
  height: 18px;
  padding: 0 5px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 999px;
  background: #ff4d4f;
  color: #fff;
  font-size: 11px;
  font-weight: 700;

  line-height: 1;
  margin: 0;
  z-index: 5;

  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}


/* ===== MOBILE SCROLL FIX (rooms + users) ===== */

@media (max-width: 640px){

  /* הפאנלים עצמם */
  .users-panel,
  .rooms-panel{
    display:flex;
    flex-direction:column;
    height:560px; /* אפשר לשנות */
    max-height:560px;
    overflow:hidden;
  }

  /* הרשימות עצמן יהיו גלילות */
  .users-list,
  .pm-list,
  .rooms-list{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
  }

  /* לוודא שההדר לא תופס מקום בגלילה */
  .panel-head{
    flex:0 0 auto;
  }

}


.chat-head.dm-mobile-modern .dm-peer-name{
color:#fff !important;
}



@media (min-width: 1025px){
  .focus-restore-fab{
    position:fixed;
    top:50%;
    right:14px;
    transform:translate3d(16px,-50%,0);
    z-index:1400;
    height:58px;
    padding:0 16px 0 14px;
    border:1px solid rgba(255,255,255,.78);
    border-radius:20px 0 0 20px;
    background:linear-gradient(135deg, rgba(116,64,228,.96), rgba(255,118,204,.96));
    color:#fff;
    display:inline-flex;
    align-items:center;
    gap:10px;
    box-shadow:0 18px 38px rgba(120,73,211,.30), 0 0 0 1px rgba(255,255,255,.16) inset;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease, transform .28s ease, box-shadow .22s ease, filter .22s ease;
  }

  body.chat69-focus-mode .focus-restore-fab{
    opacity:1;
    pointer-events:auto;
    transform:translate3d(0,-50%,0);
  }

  .focus-restore-fab:hover{
    transform:translate3d(-2px,-50%,0);
    box-shadow:0 22px 44px rgba(120,73,211,.34), 0 0 0 1px rgba(255,255,255,.24) inset;
    filter:saturate(1.06);
  }

  .focus-restore-fab:active{
    transform:translate3d(0,-50%,0) scale(.985);
  }

  .focus-restore-fab:focus-visible{
    outline:none;
    box-shadow:0 0 0 3px rgba(255,255,255,.48), 0 0 0 6px rgba(168,111,245,.34), 0 22px 44px rgba(120,73,211,.34);
  }

  .focus-restore-fab__icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    width:28px;
    height:28px;
    flex:0 0 auto;
  }

  .focus-restore-fab__icon i{
    display:block;
    width:6px;
    height:18px;
    border-radius:999px;
    background:rgba(255,255,255,.96);
    box-shadow:0 1px 0 rgba(255,255,255,.34) inset, 0 4px 10px rgba(63,22,116,.16);
  }

  .focus-restore-fab__icon i:nth-child(2){
    width:11px;
    opacity:.96;
  }

  .focus-restore-fab__text{
    font-size:14px;
    font-weight:800;
    letter-spacing:.01em;
    white-space:nowrap;
  }
}

@media (max-width: 1024px){
  .focus-restore-fab{
    display:none !important;
  }
}

body.dark-mode .focus-restore-fab{
  border-color:rgba(255,255,255,.1);
  background:linear-gradient(135deg, rgba(58,31,96,.98), rgba(143,72,220,.96));
  box-shadow:0 20px 46px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.06) inset;
}