/*
 * chat-layout.css
 * עיצוב מלא מהטמפלט — ממופה לסלקטורים הקיימים של chat.html
 * לא משנה JS, לא משנה IDs פונקציונליים
 */

/* ══ RESET & BASE ══ */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --red:       #c70d16;
  --red-dark:  #a8050c;
  --ink:       #101828;
  --muted:     #68758a;
  --page-bg:   linear-gradient(180deg,#e8edf3 0,#dbe3ec 46%,#cfd8e2 100%);
  --panel:     #ffffff;
  --line:      #aebccc;
  --line-soft: #d7e0ea;
  --green:     #25a55b;
  --shadow:    0 12px 28px rgba(18,32,55,.12);
}

html, body { min-height: 100%; }
body {
  background: var(--page-bg) !important;
  font-family: Arial, 'Heebo', sans-serif !important;
  color: var(--ink) !important;
  overflow-x: hidden;
}

/* ══ PAGE & SHELL ══ */
.page {
  background: transparent !important;
  padding: 0 !important;
  align-items: unset !important;
  flex-direction: column;
  min-height: 100vh;
}
.chat-shell {
  width: 100% !important;
  max-width: 1180px !important;
  margin: 18px auto 24px !important;
  padding: 0 14px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  flex: unset !important;
}

/* ══ BRAND STRIP (topbar wrapper) ══ */
.chat-brand-strip {
  background: #f5f7fa;
  border: 1px solid #9fb0c3;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid var(--red);
  box-shadow: 0 10px 24px rgba(18,32,55,.10);
  overflow: hidden;
}

/* ══ TOPBAR ══ */
.topbar {
  min-height: 78px !important;
  background: linear-gradient(180deg,#ffffff 0,#f7f9fc 48%,#eef3f8 100%) !important;
  border-bottom: 1px solid #c7d3df !important;
  position: static !important; margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(220px,250px) minmax(250px,1fr) minmax(235px,275px) !important;
  align-items: center !important;
  gap: 12px !important; padding: 10px 14px !important;
}

/* לוגו */
.chat-logo {
  display: flex; align-items: center; gap: 9px;
  white-space: nowrap; justify-self: start;
}
.hn-mark {
  width: 43px; height: 43px; border-radius: 11px;
  background: linear-gradient(180deg,#d90f18,#a80008);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 18px; letter-spacing: -1px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 9px rgba(188,0,12,.22);
  border: 1px solid rgba(120,0,8,.22); flex-shrink: 0;
}
.logo-word {
  display: flex; align-items: flex-end; gap: 3px; line-height: 1;
}
.logo-hot {
  font-size: 28px; font-weight: 900; color: #061127; letter-spacing: -1.4px;
}
.logo-chat {
  font-size: 27px; font-weight: 900; color: var(--red);
  letter-spacing: -1.4px; font-style: italic;
  text-shadow: 0 1px 0 #fff;
}
.chat-bubble-dot {
  width: 13px; height: 13px;
  border: 3px solid #061127; border-radius: 50%;
  display: inline-block; margin-inline-start: 2px; margin-bottom: 4px;
  position: relative;
}
.chat-bubble-dot::after {
  content: ''; position: absolute;
  width: 5px; height: 5px; background: #061127;
  border-radius: 0 0 6px 0; left: -2px; bottom: -4px;
}
.brand-note { font-size: 12px; color: #6b778d; margin-top: 4px; font-weight: 700; }

/* הודעת מרכז */
.home-message {
  justify-self: center; color: #34445f;
  font-size: 13px; line-height: 1.55; text-align: center; max-width: 440px;
}
.home-message b { color: var(--red); }

/* פעולות חשבון */
.chat-account-actions {
  justify-self: end;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 7px; flex-wrap: wrap;
}
.account-chip {
  height: 29px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #b4c1d0; background: #fff;
  color: #27364d; border-radius: 4px; padding: 0 10px;
  font-size: 12px; font-weight: 900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.account-chip.green { background: #effaf3; border-color: #bfe3ca; color: #137b3d; }
.account-chip.lock  { background: #fff9dc; border-color: #e1c45e; color: #735800; cursor: pointer; }
.account-chip.logout{ background: #f9fbfd; color: #4d596b; cursor: pointer; border: 1px solid #b4c1d0; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

/* #userInfoBar — display נשלט ע"י JS */
#userInfoBar { align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; }
/* כפתורי topbar */
#pvtLockBtn {
  height: 29px !important; display: inline-flex !important; align-items: center !important;
  background: #fff9dc !important; border: 1px solid #e1c45e !important; color: #735800 !important;
  border-radius: 4px !important; padding: 0 10px !important;
  font-size: 12px !important; font-weight: 900 !important;
  cursor: pointer !important; font-family: inherit !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}
#disconnectBtn {
  height: 29px !important; display: inline-flex !important; align-items: center !important;
  background: #f9fbfd !important; border: 1px solid #b4c1d0 !important; color: #4d596b !important;
  border-radius: 4px !important; padding: 0 10px !important;
  font-size: 12px !important; font-weight: 900 !important;
  cursor: pointer !important; font-family: inherit !important;
}
.conn-dot, .status-dot {
  width: 8px !important; height: 8px !important; border-radius: 50% !important;
  background: var(--green) !important; display: inline-block !important;
}

/* ══ TAB BAR ══ */
.tab-bar-wrap {
  min-height: 37px;
  background: linear-gradient(180deg,#477f98,#346f87) !important;
  border-top: 1px solid #74a9bd;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 5px 10px !important;
  color: #fff;
}
.tab-bar { display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; }

/* cb-tab רגיל — לטאבים פרטיים */
.cb-tab {
  min-width: 64px; height: 25px;
  border: 1px solid #245b72;
  background: linear-gradient(180deg,#e7f4f8,#b9dce8);
  color: #16384a !important;
  border-radius: 3px; font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  padding: 0 10px; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.tab-bar-right { font-size: 12px; font-weight: 900; color: #edf8ff; }
.pvt-count { color: #edf8ff; }

/* hide mobile toggle buttons — template uses CSS order instead */
.mobile-top-actions { display: none !important; }

/* ══ LAYOUT GRID ══ */
.layout {
  display: grid !important;
  grid-template-columns: 184px minmax(0,1fr) 174px !important;
  gap: 10px !important;
  align-items: stretch !important;
  min-height: clamp(560px, calc(100vh - 145px), 720px) !important;
  background: linear-gradient(180deg,#d5dee8,#c6d1de) !important;
  border: 1px solid #9fb0c3 !important;
  border-top: 0 !important;
  border-radius: 0 0 8px 8px !important;
  padding: 10px !important;
  box-shadow: var(--shadow) !important;
}

/* ══ SIDE PANELS (middle-col) ══ */
.middle-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  min-height: 0 !important;
  min-width: 0 !important;
}

/* panel boxes */
#usersBox, #roomsBox {
  background: var(--panel) !important;
  border: 1px solid #8799af !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(140,155,175,.32), 0 2px 5px rgba(20,35,60,.12) !important;
  display: flex !important; flex-direction: column !important;
  min-width: 0 !important;
}
#usersBox { flex: 1 !important; min-height: 0 !important; }
#roomsBox { flex: none !important; }

/* users-area — flex column כדי שusers-list ימלא */
#usersBox .users-area,
#usersBox .box-body {
  flex: 1 !important; display: flex !important; flex-direction: column !important;
  min-height: 0 !important; overflow: hidden !important;
}

/* panel heads */
.box-title, #usersBox h3, #roomsBox h3 {
  height: 31px !important;
  background: linear-gradient(180deg,#ffffff,#e8eef6) !important;
  border-bottom: 2px solid var(--red) !important;
  padding: 0 10px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  color: #101a2d !important;
  font-size: 13px !important; font-weight: 900 !important;
  letter-spacing: .1px !important;
  margin: 0 !important;
}

/* panel bodies */
.users-area, .rooms-content { flex: 1; overflow: auto; background: #fff; padding: 5px 0; min-height: 0; }

/* users-list — ממלא את הפאנל עם גלילה, גבול מקסימום */
.users-list {
  height: 0 !important;
  flex: 1 1 0 !important;
  min-height: 120px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px !important;
  background: #fff !important;
}

/* rooms-list — הסר גלילה כפולה */
.rooms-list {
  height: auto !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  max-height: none !important;
  padding: 4px 2px !important;
}
/* let the panel box itself scroll */
#roomsBox .rooms-content {
  overflow-y: auto !important;
  max-height: 148px !important;
}

/* user items */
.user-item {
  min-height: 22px !important;
  display: flex !important; align-items: center !important; gap: 4px !important;
  padding: 3px 10px !important;
  border-bottom: 1px solid #f0f3f7 !important;
  font-size: 13px !important; font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ink) !important;
}
.user-item:hover { background: #eef7fb !important; }
.user-item.gender-f { color: #c0003a !important; }
.user-item.gender-m { color: #1459a4 !important; }
.user-item.is-admin, .user-item.admin {
  color: #a91452 !important; font-weight: 900 !important;
  background: #fff3f8 !important; border-bottom: 1px solid #f3d2df !important;
}
.user-item.is-admin::before, .user-item.admin::before {
  content: '★'; color: #d35b8f; font-size: 12px;
}

/* rooms nav (has arrow buttons) */
.rooms-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px; border-bottom: 1px solid #eef1f6;
  background: #f8f9fb; font-size: 12px;
}
.rooms-nav-label { font-weight: 800; font-size: 12px; color: #34445f; }
.pvt-arrow {
  background: none; border: 1px solid #b9c5d4; border-radius: 3px;
  width: 22px; height: 22px; font-size: 14px; cursor: pointer; color: #34445f;
}
.pvt-arrow:hover { border-color: var(--red); color: var(--red); }

/* room items */
.room-item, .rooms-list .room-row-el {
  min-height: 27px !important;
  padding: 5px 10px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  border-bottom: 1px solid #eef1f6 !important;
  font-size: 13px !important; font-weight: 800 !important; cursor: pointer !important;
  color: var(--ink) !important;
}
.room-item:hover { background: #eef7fb !important; }
.room-item.active { background: #fff1f2 !important; color: var(--red) !important; font-weight: 900 !important; }
.room-item .room-count {
  min-width: 24px; text-align: center;
  background: var(--red); color: #fff;
  border-radius: 12px; font-size: 11px; font-weight: 900; padding: 2px 7px;
}
.room-item .room-count.zero { background: #c8d0dc; color: #5c6676; }

/* open room row */
.open-room-row {
  display: flex !important; gap: 5px !important; padding: 6px 8px !important;
  border-top: 1px solid #eef1f6; background: #f8f9fb;
  position: relative; align-items: center;
}
.open-room-row input {
  flex: 1 !important; height: 28px !important;
  border: 1px solid #b0bfcf !important; border-radius: 3px !important;
  padding: 0 8px !important; font-size: 12px !important;
  position: static !important;                /* מונע ירושת position */
}
#openNewRoomBtn {
  position: static !important;                /* ביטול absolute מinline CSS */
  flex-shrink: 0 !important;
  height: 28px !important; background: var(--red) !important; color: #fff !important;
  border: none !important; border-radius: 3px !important; padding: 0 10px !important;
  font-size: 12px !important; font-weight: 900 !important; cursor: pointer !important;
  top: auto !important; left: auto !important; bottom: auto !important;
}

/* ══ MAIN CHAT (main-col) ══ */
.main-col {
  background: var(--panel) !important;
  border: 1px solid #8799af !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.95), inset -1px -1px 0 rgba(140,155,175,.32), 0 2px 5px rgba(20,35,60,.12) !important;
  display: flex !important; flex-direction: column !important;
  min-height: 0 !important; min-width: 0 !important;
}

/* chat header */
.chat-header {
  min-height: 38px !important;
  background: linear-gradient(180deg,#ffffff,#edf2f8) !important;
  border-bottom: 2px solid var(--red) !important;
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important; padding: 0 10px !important;
}
.room-title {
  background: #fff7d6 !important;
  border: 1px solid #eed27a !important;
  color: #7a5200 !important;
  border-radius: 10px !important; padding: 7px 16px !important;
  font-size: 13px !important; font-weight: 900 !important;
  box-shadow: 0 1px 3px rgba(180,130,0,.15) !important;
}

/* pvt header */
.pvt-header {
  min-height: 38px;
  background: linear-gradient(180deg,#ffffff,#edf2f8);
  border-bottom: 2px solid var(--red);
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 0 10px;
}

/* messages */
#messages {
  flex: 1 !important; overflow: auto !important;
  background: linear-gradient(180deg,#ffffff 0,#ffffff 78%,#fbfcfe 100%) !important;
  padding: 12px 14px !important;
  display: flex !important; flex-direction: column !important; gap: 2px !important;
  min-height: 390px !important;
}
.msg {
  font-size: 14px !important; line-height: 1.58 !important;
  color: var(--ink);              /* ללא !important — צבע class גובר */
  word-break: break-word !important;
  padding: 1px 4px !important; border-radius: 3px !important;
  font-weight: normal !important;
}
.msg:hover { background: #f7fbff !important; }
/* כינוי — תמיד bold וצבע מגדר */
.msg .nick { font-weight: 900 !important; cursor: pointer !important; }
.msg .nick:hover { text-decoration: underline; }

/* gender — רק הכינוי מקבל צבע מגדר, לא כל ההודעה */
.msg.gender-f .nick, .msg.gender-f.f .nick { color: #c0003a !important; }
.msg.gender-m .nick, .msg.gender-m.m .nick { color: #1459a4 !important; }
/* manager badge */
.msg.manager .nick {
  color: #a91452 !important;
  background: #fff3f8 !important; border: 1px solid #efbfd2 !important;
  border-radius: 3px !important; padding: 1px 6px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
}
/* system messages */
.msg.system {
  color: #667085 !important; font-size: 12px !important;
  text-align: center !important; padding: 2px 0 !important; font-style: italic !important;
}
.msg.system.join-msg { color: #2a8a2a !important; }
/* welcome */
.system-msg.welcome-msg, .msg.system.welcome {
  background: #fff7d6 !important; border: 1px solid #eed27a !important;
  border-radius: 4px !important; color: #715400 !important;
  font-style: normal !important; padding: 6px 10px !important; margin-bottom: 5px !important;
}

/* ══ COMPOSE ══ */
.composer {
  flex-shrink: 0 !important;
  background: #eef2f6 !important;
  border-top: 1px solid #cbd5e1 !important;
  border-radius: 0 !important;
}
.emoji-bar {
  display: flex !important; align-items: center !important; gap: 5px !important;
  flex-wrap: wrap !important; padding: 5px 9px !important;
  border-bottom: 1px solid #d6dee9 !important;
  background: #f8fafc !important;
}
.emoji { font-size: 16px !important; cursor: pointer !important; opacity: .8 !important; }
.emoji:hover { opacity: 1 !important; }

.tools-row {
  display: flex !important; align-items: center !important; gap: 5px !important;
  flex-wrap: wrap !important; padding: 5px 9px !important;
  border-bottom: 1px solid #d6dee9 !important;
  background: #eef2f7 !important;
}
.color-chip {
  width: 17px !important; height: 17px !important;
  border: 1px solid #92a0b2 !important; border-radius: 2px !important; cursor: pointer !important;
}
.color-chip.selected { outline: 2px solid #101828 !important; }
.tool-btn {
  min-width: 25px !important; height: 21px !important;
  border: 1px solid #a7b3c3 !important; background: #fff !important;
  border-radius: 3px !important; cursor: pointer !important;
  font-size: 12px !important; font-weight: 900 !important; color: #1d2939 !important;
}
.tool-btn.active {
  background: #2d3748 !important;
  color: #fff !important;
  border-color: #1a202c !important;
  box-shadow: inset 0 2px 3px rgba(0,0,0,.3) !important;
}

/* compose row */
.compose-grid {
  display: flex !important; gap: 7px !important; align-items: center !important;
  padding: 8px 9px !important; background: #f8fafc !important;
  /* flex-direction נשאר כברירת מחדל */
}
.message-input, #msgInput {
  flex: 1 !important; height: 35px !important; min-width: 0 !important;
  border: 1px solid #aeb9c8 !important; border-radius: 6px !important; background: #fff !important;
  padding: 0 11px !important; font-size: 14px !important; color: #101828 !important;
  box-shadow: inset 0 1px 2px rgba(16,24,40,.08);
  direction: rtl !important;
}
.message-input:focus, #msgInput:focus {
  outline: none !important; border-color: var(--red) !important;
  box-shadow: 0 0 0 3px rgba(201,13,20,.09), inset 0 1px 2px rgba(16,24,40,.08) !important;
}
.send-btn, #sendBtn {
  height: 35px !important;
  border: 1px solid #b44a00 !important; border-radius: 6px !important;
  background: linear-gradient(180deg,#ff8b15,#e16600) !important;
  color: #fff !important; font-weight: 900 !important; font-size: 14px !important;
  padding: 0 22px !important; cursor: pointer !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.22) !important;
  white-space: nowrap !important;
}
.send-btn:hover, #sendBtn:hover {
  background: linear-gradient(180deg,#ff9a2e,#d85f00) !important;
}

/* quick rooms */
#quickRooms, .bottom-actions {
  display: flex !important; align-items: center !important; gap: 5px !important;
  flex-wrap: wrap !important; padding: 5px 9px !important;
  background: #e8edf4 !important;
  border-top: 1px solid #d6dee9 !important;
}
.room-badge, #quickRooms button {
  min-width: 64px !important; height: 27px !important;
  border: 1px solid #7fa8b9 !important; background: #d9edf4 !important;
  color: #16394a !important; border-radius: 3px !important;
  font-size: 12px !important; font-weight: 900 !important; cursor: pointer !important;
}
.room-badge:hover, #quickRooms button:hover {
  background: #fff !important; border-color: var(--red) !important; color: var(--red) !important;
}

/* ══ ADS COLUMN ══ */
#adsCol, .ads-col {
  display: flex !important; flex-direction: column !important;
  gap: 10px !important; min-width: 0 !important;
}
.ads-label {
  height: 31px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: linear-gradient(180deg,#ffffff,#e7ecf3) !important;
  border: 1px solid #9fb0c4 !important; border-bottom: 2px solid var(--red) !important;
  border-radius: 4px !important;
  font-size: 12px !important; font-weight: 900 !important; color: #24324a !important;
}
.ad-slot {
  background: #f6f7fb !important; border: 2px dashed #b6c0cf !important;
  border-radius: 4px !important;
  display: flex !important; flex-direction: column !important;
  align-items: center !important; justify-content: center !important;
  gap: 7px !important; color: #8b95a6 !important; font-size: 12px !important; text-align: center !important;
  box-shadow: inset 0 1px 0 #fff !important;
}
.ad-item, .ad-img { width: 100% !important; border-radius: 4px !important; display: block !important; }

/* ══ SCROLLBARS ══ */
::-webkit-scrollbar { width: 13px !important; }
::-webkit-scrollbar-track { background: #e4e9f0 !important; border-left: 1px solid #bcc8d7 !important; }
::-webkit-scrollbar-thumb { background: #9fc4d4 !important; border: 2px solid #e4e9f0 !important; border-radius: 2px !important; }
::-webkit-scrollbar-thumb:hover { background: #7eb3c8 !important; }

/* ══ ADMIN PANEL ══ */
#adminPanel { background: #fff; border: 1px solid #ccc; border-radius: 4px; }

/* mod/mgr bars — display נשלט ע"י JS, אל תגדיר כאן */
#modBar, #mgrBar, #roomPwBar {
  background: #f0f4f8; border-top: 1px solid #cdd5df;
  padding: 5px 9px; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 12px;
}

/* ══ RESPONSIVE ══ */
@media(min-width:1400px) {
  .chat-shell { max-width: 1220px !important; }
  .layout { grid-template-columns: 194px minmax(0,1fr) 184px !important; }
}

@media(max-width:1180px) {
  .chat-shell { max-width: 100% !important; padding: 0 10px !important; }
  .topbar { grid-template-columns: minmax(205px,230px) minmax(210px,1fr) minmax(220px,250px) !important; }
  .logo-hot { font-size: 25px !important; } .logo-chat { font-size: 24px !important; }
  .layout { grid-template-columns: 172px minmax(0,1fr) 158px !important; }
}

@media(max-width:1040px) and (min-width:901px) {
  .topbar { grid-template-columns: 210px minmax(170px,1fr) 215px !important; }
  .layout { grid-template-columns: 160px minmax(0,1fr) 140px !important; }
  .user-item { font-size: 12px !important; }
}

@media(max-width:900px) {
  .chat-shell { margin: 10px auto 18px !important; padding: 0 8px !important; }
  .topbar {
    grid-template-columns: 1fr !important;
    text-align: center !important; padding: 11px 10px !important;
  }
  .chat-logo { justify-self: center !important; }
  .home-message { justify-self: center !important; }
  .chat-account-actions { justify-self: center !important; justify-content: center !important; }
  .layout {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    border-radius: 0 0 8px 8px !important;
    padding: 8px !important;
  }
  .main-col { order: 1 !important; }
  #messages { min-height: 430px !important; }
  .middle-col {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(240px,300px) !important;
    gap: 8px !important;
  }
  #usersBox { height: 250px !important; flex: none !important; }
  #roomsBox { height: 250px !important; }
  #adsCol {
    order: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 8px !important;
  }
  .ads-label { grid-column: 1/-1 !important; }
}

@media(max-width:680px) {
  .middle-col { display: flex !important; flex-direction: column !important; }
  #usersBox { height: 220px !important; }
  #roomsBox { height: auto !important; }
  #adsCol { display: flex !important; flex-direction: column !important; }
  .tab-bar-wrap { flex-direction: column !important; align-items: flex-start !important; gap: 5px !important; padding: 8px !important; }
}

@media(max-width:560px) {
  .chat-shell { padding: 0 6px !important; margin-top: 7px !important; }
  .topbar { padding: 10px 8px !important; }
  .brand { font-size: 28px !important; }
  .layout { padding: 6px !important; gap: 7px !important; }
  #messages { min-height: 360px !important; padding: 9px !important; }
  .msg { font-size: 13px !important; }
  .emoji-bar, .tools-row, #quickRooms { padding: 5px 7px !important; gap: 4px !important; }
  .compose-grid { padding: 7px !important; }
  .send-btn, #sendBtn { padding: 0 18px !important; }
  #msgInput { height: 34px !important; font-size: 13px !important; }
  .room-badge { min-width: 58px !important; height: 26px !important; font-size: 11px !important; }
}

@media(max-width:380px) {
  .brand { font-size: 24px !important; letter-spacing: -1px !important; }
  .layout { padding: 5px !important; }
  #messages { min-height: 320px !important; }
  .send-btn, #sendBtn { height: 33px !important; padding: 0 14px !important; font-size: 13px !important; }
  #msgInput { height: 33px !important; padding: 0 8px !important; }
}

/* ══ תיקונים ספציפיים ══ */

/* 1. TOPBAR — כל הכפתורים בשורה אחת, כינוי לא שובר */
.chat-account-actions {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
#userInfoBar {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}
#userInfoName {
  max-width: 90px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

/* 3. חצים ימינה/שמאלה בחדרים — הסתר לגמרי */
.pvt-arrow { display: none !important; }
.rooms-nav { display: none !important; }

/* 4. כפתורי bold/italic/צבעים — וודא pointer-events פעיל */
.tool-btn,
.color-chip,
.emoji,
#boldBtn,
#italicBtn {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative !important;
  z-index: 1 !important;
}
.tools-row {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
}
.emoji-bar {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
}
.composer {
  position: relative !important;
  z-index: 1 !important;
}

/* ══ MOBILE COMPOSE FIX ══ */
@media(max-width:600px) {
  .compose-grid {
    gap: 5px !important;
    padding: 6px 7px !important;
  }
  .message-input, #msgInput {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 0 !important;
    height: 34px !important;
    font-size: 13px !important;
  }
  .send-btn, #sendBtn {
    flex-shrink: 0 !important;
    padding: 0 14px !important;
    height: 34px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    min-width: 52px !important;
    max-width: 72px !important;
  }
}

/* ══ BADGE חדר — SINGLE RULE (ללא כפילויות) ══ */
.cb-tab-public {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
}
.cb-tab-public.active {
  background: transparent !important;
  border: none !important;
  position: static !important;
  bottom: auto !important;
}
.cb-tab-room,
span#roomBadge {
  background: linear-gradient(180deg, #ffe168, #f0b800) !important;
  color: #3a2000 !important;
  border: 1px solid #c89500 !important;
  border-radius: 3px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  height: 25px !important;
  min-width: 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

/* ══ MOBILE SCROLL BUTTONS (tab-bar-wrap) ══ */
.mobile-scroll-btns {
  display: none;                             /* מוסתר בדסקטופ */
}
@media(max-width: 900px) {
  .mobile-scroll-btns {
    display: flex; gap: 5px; align-items: center;
  }
  .mobile-scroll-btn {
    height: 24px; border: 1px solid rgba(255,255,255,.4);
    background: rgba(255,255,255,.15); color: #fff;
    border-radius: 3px; padding: 0 9px; font-size: 11px;
    font-weight: 900; cursor: pointer; white-space: nowrap;
    transition: background .15s;
  }
  .mobile-scroll-btn:hover { background: rgba(255,255,255,.28); }
}

/* ══ ADMIN FLOAT BUTTON ══ */
#adminFloatBtn {
  position: fixed !important;
  bottom: 80px !important;     /* מעל כפתור הנגישות */
  left: 24px !important;
  z-index: 1500 !important;
  background: #1a202c !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 18px !important;
  cursor: pointer !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.4) !important;
}
#adminFloatBtn:hover { background: var(--red) !important; }
#adminFloatBtn::after {
  content: 'ניהול';
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: #666; white-space: nowrap;
}