/* =========================================================
  Trigger Chat Smart — CSS (V2.0.8 - CLEANUP: Removed old localStorage keys)
   כולל:
   1. Design Tokens (מפת צבעים בהירה)
   2. תיקון Flexbox למניעת קריסת גובה בחדרים הציבוריים
   3. עיצוב טאבים כהים (Dark Tabs) עם אכיפת !important
   4. עיצוב Chips לטאבים פרטיים
   
  @Natan: 2026-01-06 - V1.0.51: לא שינינו CSS ויזואלית, רק סנכרון גרסה עם JS/PHP
   ========================================================= */

/*
   =========================================================
   ניקוי כירורגי (שלב מונים): הוסר CSS של Unread/Badges בלבד
   - הוסר: .tcs-badge / .has-unread / .is-unread / room-badge-dot / tcs-has-unread
   - נשמר: כל SKIN FIX + LOCK POSITIONS וכל עיצוב/פריסה של המודאל והחדרים
   =========================================================
*/



/* =========================
   1. Design Tokens
   ========================= */
   :root {
    /* סגולים - עוגן המותג */
    --tcs-purple: #7900FF;
    --tcs-purple-hover: #8A2BE2;
    --tcs-purple-soft: #9933FF;
    --tcs-purple-glow: rgba(121, 0, 255, 0.35);

    /* צהובים - ניווט ודגש */
    --tcs-yellow: #FFD800;
    --tcs-yellow-hover: #FFE033;
    --tcs-yellow-wash: rgba(255, 216, 0, 0.14);

    /* שכבות בהירות (Light Mode) */
    --tcs-canvas: #F7F7FA;       /* רקע כללי */
    --tcs-surface: #FFFFFF;      /* כרטיסים ומודאל */
    --tcs-divider: #E6E6EE;      /* קווים מפרידים */
    --tcs-hover: #EFEFF4;        /* רקע הובר כללי */

    /* טקסטים */
    --tcs-text: #141414;         /* כותרות */
    --tcs-text-body: #1E1E1E;    /* טקסט רגיל */
    --tcs-muted: #4A4A4A;        /* טקסט חלש */
    --tcs-placeholder: #888888;  /* פלייסדר */

    /* טאבים ראשיים (Dark Theme) */
    --tcs-tab-bg: #2B2B2B;       /* אפור כהה */
    --tcs-tab-hover: #454545;    /* בהיר יותר בהובר */
    --tcs-tab-text: #FFFFFF;     /* טקסט לבן */

    /* טאבים פרטיים (Chips Style) */
    --tcs-chip-bg: #F0F0F3;
    --tcs-chip-text: #141414;
    --tcs-chip-active-bg: #F3EBFF;
    --tcs-chip-active-text: #7900FF;

    /* סטטוסים */
    --tcs-danger: #FF3B30;
    --tcs-danger-glow: rgba(255, 59, 48, 0.45);
    --tcs-online: #34C759;
    --tcs-online-glow: rgba(52, 199, 89, 0.55);

    /* צללים (Elevation) */
    --tcs-shadow-1: 0 10px 30px rgba(0,0,0,0.08);
    --tcs-shadow-2: 0 20px 50px rgba(0,0,0,0.20);
  }

  /* =========================
     2. Global Reset & Fonts
     ========================= */
  #tcs-main-bubble,
  #tcs-modal,
  #tcs-modal * {
    font-family: "Heebo", Arial, sans-serif !important;
    box-sizing: border-box;
  }

  /* =========================
     3. Main Bubble (Floating)
     ========================= */
  #tcs-main-bubble {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999999;

    display: flex;
    align-items: center;
    gap: 10px;

    border: none;
    cursor: pointer;
    padding: 14px 20px;
    border-radius: 999px;

    background: var(--tcs-purple);
    color: #ffffff;

    box-shadow: 0 12px 28px rgba(121, 0, 255, 0.35);
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  #tcs-main-bubble:hover {
    transform: translateY(-2px) scale(1.02);
    background: var(--tcs-purple-hover);
    box-shadow: 0 16px 36px rgba(121, 0, 255, 0.45);
  }

  #tcs-main-bubble .tcs-icon { font-size: 20px; line-height: 1; }
  #tcs-main-bubble .tcs-label { font-size: 15px; font-weight: 800; letter-spacing: 0.5px; }

  /* =========================
     4. Overlay & Modal Layout
     ========================= */
  #tcs-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999998;

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

    background: rgba(20, 20, 25, 0.6);
    backdrop-filter: blur(4px);
  }

  #tcs-modal {
    width: min(1180px, calc(100vw - 40px));
    height: min(760px, calc(100vh - 40px));

    background: var(--tcs-surface);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--tcs-shadow-2);

    position: relative;

    /* Flex Fix (V0.2.9) - פותר את בעיית הגובה של החדרים הציבוריים */
    display: flex;
    flex-direction: column;
  }

  /* Header & PrivateBar לא מתכווצים */
  .tcs-modal-header,
  .tcs-privatebar {
    flex-shrink: 0;
  }

  /* התוכן תופס את כל השאר */
  .tcs-modal-content {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    background: var(--tcs-canvas);
  }

  /* =========================
     5. Header Styling
     ========================= */
  .tcs-modal-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;

    padding: 16px 24px;
    background: var(--tcs-surface);
    border-bottom: 1px solid var(--tcs-divider);
    direction: ltr;
  }

  .tcs-header-left,
  .tcs-header-center,
  .tcs-header-right {
    display: flex;
    align-items: center;
    direction: rtl;
  }
  .tcs-header-left { justify-content: flex-start; } /* דסקטופ: כפתור חברים בצד שמאל */
  .tcs-header-center { justify-content: center; }
  .tcs-header-right { justify-content: flex-end; }

  .tcs-rooms-wrap {
    display: flex;
    gap: 12px;
  }

  /* --- עיצוב טאבים ראשיים (FORCE DARK GREY) --- */
  .tcs-tab {
    border: none;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 999px;

    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;

    /* שימוש ב-!important כדי למנוע דריסה */
    background: var(--tcs-tab-bg) !important;
    color: var(--tcs-tab-text) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }

  /* Hover: אפור בהיר יותר */
  .tcs-tab:hover {
    background: var(--tcs-tab-hover) !important;
    transform: translateY(-1px);
  }

  /* Active: סגול טריגר */
  .tcs-tab.is-active {
    background: var(--tcs-purple) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px var(--tcs-purple-glow) !important;
  }

  /* --- כפתור חברים (יוצא דופן - צהוב) --- */
  .tcs-tab-friends {
    background: var(--tcs-yellow) !important;
    color: #141414 !important;
    box-shadow: 0 4px 12px var(--tcs-yellow-wash) !important;
  }
  .tcs-tab-friends:hover {
    background: var(--tcs-yellow-hover) !important;
    transform: translateY(-1px);
  }
  .tcs-tab-friends.is-active {
    background: var(--tcs-yellow) !important;
    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.05), 0 4px 12px var(--tcs-yellow-wash) !important;
  }

/* === TCS CLEANUP DISABLED: מתנגש עם חוקים מאוחרים (מובייל + גלובלי) ===
   כפתור X — ממש בפינה, בלי רקע, X אפור כהה
   =========================================================
.tcs-close-x{
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 60;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2B2B2B;
  font-size: 20px;
  font-weight: 900;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.tcs-close-x:hover{
  transform: scale(1.06);
  opacity: 0.85;
}
@media (max-width: 520px){
}
=== END DISABLED ===

  /* =========================
     6. Private Tabs Bar (Chips)
     ========================= */
  .tcs-privatebar {
    height: 46px;
    padding: 0 24px;
    background: var(--tcs-canvas);
    border-bottom: 1px solid var(--tcs-divider);

    display: flex;
    align-items: center;
    gap: 12px;
  }

  .tcs-privatebar-placeholder {
    font-size: 12px;
    color: var(--tcs-placeholder);
    font-weight: 500;
  }

  .tcs-private-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .tcs-private-tabs::-webkit-scrollbar { display: none; }

  /* עיצוב ה-Chip (טאב פרטי) */
  .tcs-ptab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    padding: 0 10px 0 12px;
    border-radius: 99px;

    /* בסיס: צהוב (כמו כפתור "התראות") */
    background: var(--tcs-yellow) !important;
    color: #141414 !important;
    border: 1px solid rgba(0,0,0,0.08) !important;

    cursor: pointer;
    font-size: 12px;
    font-weight: 560;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, filter 0.12s ease;
    white-space: nowrap;

    /* כדי לאפשר נקודה עם ::after */
    position: relative;

    /* עומק עדין (יוקרתי, לא שחור עבה) */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.35),
      0 8px 18px rgba(0,0,0,0.10) !important;
  }

  /* 🔴 נקודה אדומה לטאב פרטי עם unread */
  .tcs-ptab.tcs-has-unread::after,
  .tcs-private-tab.tcs-has-unread::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FF3B30;
    box-shadow: 0 0 10px rgba(255,59,48,0.6);
  }

  /* פיילסייף: אם טאב פרטי הוא אלמנט אחר */
  .tcs-private-tab {
    position: relative;
  }

  /* =========================================
     🔴 Dot (Scoped) לפי דרישת Router
     ========================================= */
  #tcs-private-tabs .tcs-ptab { position: relative; }

  #tcs-private-tabs .tcs-ptab.tcs-has-unread::after{
    content:"";
    position:absolute;
    top:8px; right:8px;
    width:8px; height:8px;
    border-radius:50%;
    background:#FF3B30;
    box-shadow:0 0 10px rgba(255,59,48,0.6);
  }

  .tcs-ptab:hover {
    background: var(--tcs-yellow-hover) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.26),
      0 10px 24px rgba(0,0,0,0.07),
      0 0 0 1px rgba(255,216,0,0.08) !important;
    transform: translateY(0px) !important;
  }

  /* Hover עדין לטקסט בלבד (כדי שלא ירגיש "צועק") */
  .tcs-ptab:hover .tcs-ptab-name{
    opacity: 0.90;
  }

  /* =========================================================
     מצב "לחוץ ממושך" — טאב פרטי פעיל (צהוב פעיל + inset)
     מה זה עושה:
     - הטאב של היוזר שהצ'אט שלו פתוח נראה לחוץ/שקוע באופן קבוע
     - זה מייצר orientation ברור למשתמש (איפה אנחנו נמצאים)
     ========================================================= */
  .tcs-ptab.is-active,
  .tcs-ptab[aria-selected="true"]{
    background: var(--tcs-yellow-active) !important;
    color: #141414 !important;
    border-color: rgba(0,0,0,0.10) !important;

    transform: translateY(1px);
    box-shadow:
      inset 0 2px 8px rgba(0,0,0,0.18),
      0 8px 18px rgba(0,0,0,0.10),
      0 0 8px rgba(255,216,0,0.05) !important;
  }

  /* גם אם עושים hover על טאב פעיל — להשאיר אותו "לחוץ" */
  .tcs-ptab.is-active:hover,
  .tcs-ptab[aria-selected="true"]:hover{
    background: var(--tcs-yellow-active) !important;
    transform: translateY(0px) !important;
  }

  /* Press רגעי (לכל הטאבים) */
  .tcs-ptab:active{
    transform: translateY(1px) scale(0.985);
    box-shadow:
      inset 0 3px 10px rgba(0,0,0,0.18),
      0 8px 18px rgba(0,0,0,0.10),
      0 0 8px rgba(255,216,0,0.05) !important;
  }

  .tcs-ptab-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tcs-ptab-close {
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    opacity: 0.4;
    transition: all 0.2s;
  }
  .tcs-ptab:hover .tcs-ptab-close { opacity: 0.7; }
  .tcs-ptab-close:hover {
    opacity: 1 !important;
    background: rgba(0,0,0,0.1);
    color: var(--tcs-danger);
  }

  .tcs-ptab-unread-dot{
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #FF3B30;
    box-shadow: 0 0 10px rgba(255,59,48,0.55);
    margin-inline-start: 6px;
    flex-shrink: 0;
  }

  /* =========================
     7. Friends Drawer
     ========================= */
  .tcs-friends-drawer {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 320px;
    background: var(--tcs-surface);
    border-right: 1px solid var(--tcs-divider);
    box-shadow: var(--tcs-shadow-1);
    z-index: 10;

    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  #tcs-modal-content.is-drawer-open .tcs-friends-drawer {
    transform: translateX(0);
  }

  /* הסתרת Drawer כשנפתחת שיחה פרטית */
  .tcs-friends-drawer.is-hidden {
    display: none !important;
  }

  .tcs-friends-drawer-header {
    padding: 16px;
    border-bottom: 1px solid var(--tcs-divider);
    background: var(--tcs-surface);
    display: flex;
    gap: 10px;
  }

  .tcs-friends-filter {
    background: var(--tcs-canvas);
    color: var(--tcs-text-body);
    border: 1px solid var(--tcs-divider);
    border-radius: 99px;
    padding: 8px 14px;
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
  }
  .tcs-friends-filter:hover { background: var(--tcs-hover); }
  .tcs-friends-filter.is-on {
    background: var(--tcs-purple);
    color: #fff;
    border-color: var(--tcs-purple);
    box-shadow: 0 4px 10px var(--tcs-purple-glow);
  }

  .tcs-friends-search {
    flex: 1;
    background: var(--tcs-canvas);
    border: 1px solid var(--tcs-divider);
    border-radius: 99px;
    padding: 8px 16px;
    font-size: 13px;
    outline: none;
    transition: all 0.2s;
  }
  .tcs-friends-search:focus {
    border-color: var(--tcs-purple);
    background: #fff;
    box-shadow: 0 0 0 3px var(--tcs-purple-glow);
  }

  .tcs-friends-list {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
  }

  /* שורת משתמש ברשימה */
  .tcs-friend-row {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
  }
  .tcs-friend-row:hover {
    background: var(--tcs-hover);
  }

  .tcs-friend-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #eee;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }
  .tcs-friend-avatar img { width: 100%; height: 100%; object-fit: cover; }

  .tcs-friend-meta {
    flex: 1;
    text-align: right;
    min-width: 0;
  }
  .tcs-friend-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--tcs-text-body);
  }

  .tcs-dot-online {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--tcs-online);
    box-shadow: 0 0 6px var(--tcs-online-glow);
    margin-left: 6px;
  }

  /* Badge (Unread) */
.tcs-friend-row:hover .tcs-friend-action {
    opacity: 1;
    transform: translateX(0);
  }
  .tcs-friend-action:hover {
    border-color: var(--tcs-purple);
    color: var(--tcs-purple);
  }

/* ✨ תמיכה גם בכפתור שמגיע מ-Better Messages */
.tcs-bm-button {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.tcs-bm-button:hover {
  filter: brightness(1.15);
  transform: scale(1.03);
}

/* =========================================================
   TCS — Drawer "התראות" (דסקטופ) — עיצוב כרטיסי משתמשים
   BUILD: 2026-01-18 — V2.0.6-NOTIF-DRAWER-UI
   מה זה עושה:
   - הופך את רשימת המשתמשים ב-Drawer לכרטיסים לבנים "מנותקים"
   - מצמיד מונה unread (אדום) חצי על האווטר (ימין-עליון)
   - מוסיף נקודת online ירוקה ליד השם (לפי data-online="1")
   - מעצב את כפתור "שלח הודעה" בסגנון פופ (צהוב + גבול שחור + צל קשיח)
   חשוב:
   - דסקטופ בלבד (מובייל נטפל בסוף)
   ========================================================= */
@media (min-width: 521px){

  /* רשימה: ריווח בין כרטיסים */
  .tcs-friends-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* כרטיס */
  .tcs-friend-row{
    /* כיוון: אווטר מימין, כפתור משמאל (RTL טבעי באתר) */
    flex-direction: row;

    background: #fff;
    border: 1px solid var(--tcs-divider);
    box-shadow: var(--tcs-shadow-1);
    border-radius: 16px;
    padding: 12px;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  }

  .tcs-friend-row:hover{
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 34px rgba(0,0,0,0.10);
  }

  /* אווטר: מאפשר "חצי בחוץ" לבאדג׳ */
  .tcs-friend-avatar{
    position: relative;
    overflow: visible; /* כדי שהבאדג׳ לא ייחתך */
    border: 1px solid var(--tcs-divider);
    background: #f2f2f2;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  }

  .tcs-friend-avatar img{
    display: block;
    border-radius: 50%;
  }

  /* באדג׳ unread: חצי על האווטר / חצי בחוץ */
  .tcs-friend-avatar .tcs-user-unread-badge,
  .tcs-friend-avatar .tcs-badge[data-tcs="user-unread"]{
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 3;
    box-shadow: 0 0 0 2px #fff, 0 6px 14px rgba(0,0,0,0.18);
  }

  /* נקודת online ליד השם (לפי data-online="1") */
  .tcs-friend-row[data-online="1"] .tcs-friend-name::after{
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--tcs-online);
    box-shadow: 0 0 8px var(--tcs-online-glow);
    margin-inline-start: 8px;
    vertical-align: middle;
  }

  /* כפתור "שלח הודעה" */
  .tcs-friend-action,
  .tcs-bm-button{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFD600;
    color: #111;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 900;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
    text-decoration: none;
    white-space: nowrap;
  }

  .tcs-friend-action:hover,
  .tcs-bm-button:hover{
    transform: translateY(-1px) scale(1.01);
    filter: brightness(1.02);
  }
}

/* =========================
     8. Internal Panes & Placeholders
     ========================= */
  .tcs-main-area {
    width: 100%; height: 100%;
    position: relative;
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
  #tcs-modal-content.is-drawer-open .tcs-main-area {
    width: calc(100% - 320px);
  }

  .tcs-pane {
    width: 100%; height: 100%;
    animation: tcsFadeIn 0.3s ease;
  }
  .tcs-pane.is-hidden { display: none; }

  @keyframes tcsFadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* חדרי Iframe */
  .tcs-room-wrap {
    position: absolute; inset: 0;
    background: var(--tcs-canvas);
    display: none;
  }
  .tcs-room-wrap.is-active { display: block; }

  .tcs-room-loading {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: var(--tcs-canvas);
    color: var(--tcs-muted);
    font-weight: 600;
  }

  .tcs-spinner {
    width: 32px; height: 32px;
    border: 3px solid rgba(0,0,0,0.06);
    border-top-color: var(--tcs-purple);
    border-radius: 50%;
    animation: tcsSpin 0.8s linear infinite;
    margin-bottom: 12px;
  }
  @keyframes tcsSpin { to { transform: rotate(360deg); } }

  .tcs-room-iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: none;
    opacity: 0; transition: opacity 0.2s ease;
  }

  /* Private Chat Iframe (שיחה פרטית) */
  .tcs-private-chat-wrap {
    position: absolute; inset: 0;
    background: var(--tcs-canvas);
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
  }

  .tcs-private-chat-iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: none;
    opacity: 0; transition: opacity 0.2s ease;
  }

  /* Placeholders */
  .tcs-friends-placeholder,
  .tcs-private-placeholder {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    height: 100%; text-align: center;
    color: var(--tcs-muted);
  }
  .tcs-friends-placeholder h3,
  .tcs-private-placeholder h3 {
    color: var(--tcs-text);
    margin-bottom: 8px;
    font-size: 18px;
  }

/* =========================================================
   Better Messages — Mobile mini bubble container
   בפרויקט שלנו יש בועה משלנו, אז אנחנו מבטלים את של BM
   כדי שלא יכסה מסך / יופיע מעל המודאל / יעשה מסך לבן
   ========================================================= */

#bp-better-messages-mini-mobile-container{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================================================
   [MOBILE] כפתור X — קטן יותר, אפור כהה תמיד
   Hover: אפור בהיר יותר
   ========================================================= */
@media (max-width: 520px){

  /* הכפתור עצמו */
  .tcs-close-x{
    width: 26px !important;
    height: 26px !important;
    font-size: 16px !important;

    /* צבע בסיס תמיד אפור כהה */
    color: #2B2B2B !important;

    /* בלי רקע/מסגרת תמיד */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    /* שלא "יקפוץ" */
    transition: opacity 0.15s ease, transform 0.15s ease !important;
  }

  /* hover במובייל רלוונטי בעיקר לדסקטופ, אבל נשאיר עקבי */
  .tcs-close-x:hover{
    color: #6A6A6A !important;  /* אפור בהיר יותר */
    opacity: 1 !important;
    transform: none !important; /* במובייל עדיף לא להגדיל */
  }
}

/* =========================================================
   כפתור X — צבעים אחידים בכל המכשירים
   בסיס: אפור כהה | Hover: אפור בהיר יותר
   ========================================================= */
.tcs-close-x{
  color: #2B2B2B !important;      /* תמיד אפור כהה */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.tcs-close-x:hover{
  color: #6A6A6A !important;      /* hover אפור בהיר יותר */
}

/* =========================================================
   Rooms Tabs — סדר + מובייל סטאק
   המפתחות מגיעים מ-JS: data-tab="room1|room2|room3"
   ========================================================= */

/* ודאות שהעטיפה היא flex */
.tcs-rooms-wrap{
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

/* ----- סדר בדסקטופ (RTL): ימין=room2, אמצע=room3, שמאל=room1 ----- */
.tcs-rooms-wrap .tcs-tab-room[data-tab="room2"]{ order: 1; } /* שיתופים יומיים */
.tcs-rooms-wrap .tcs-tab-room[data-tab="room3"]{ order: 2; } /* זהירות טריגר */
.tcs-rooms-wrap .tcs-tab-room[data-tab="room1"]{ order: 3; } /* לילות קשים */

/* ----- מובייל: כפתורים אחד מתחת לשני ----- */
@media (max-width: 520px){
}

/* =========================================================
   MOBILE Header Layout — חדרים בסטאק + "חברים" בשורה נפרדת
   ========================================================= */
@media (max-width: 520px){

  /* ה-header הופך לטור */
  .tcs-modal-header{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;

    /* שלא ידרוס את ה-X */
    padding-top: 46px !important;
  }

  /* מבטלים את חלוקת left/center/right במובייל */
  .tcs-header-left,
  .tcs-header-center,
  .tcs-header-right{
    width: 100% !important;
    display: block !important;
  }

  /* החדרים נשארים סטאק */
  .tcs-rooms-wrap{
    width: 100% !important;
  }

  /* כפתור חברים במובייל: עכשיו מועבר ל-privatebar, אז ההגדרות הישנות לא רלוונטיות */
}



/* =========================================================
   MOBILE — Friends icon in privatebar (right edge)
   ========================================================= */
@media (max-width: 520px){

  /* השורה של ה-privatebar: מכריחים LTR כדי "ימין קיצון" יהיה חד-משמעי */
  .tcs-privatebar{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    direction: ltr !important;
    gap: 10px !important;
  }

  /* כפתור חברים כשהוא בתוך ה-privatebar: אייקון בלבד בצד ימין */
  .tcs-friends-btn--in-privatebar{
    margin-left: auto !important;  /* ב-LTR זה תמיד ימין קיצון */
    margin-right: 0 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important; /* לא להתכווץ */
  }

  /* מסתירים את הטקסט לחלוטין */
  .tcs-friends-btn--in-privatebar .tcs-friends-text{
    display: none !important;
  }

  /* האייקון בלבד */
  .tcs-friends-btn--in-privatebar .tcs-friends-ico{
    font-size: 18px !important;
    line-height: 1 !important;
  }

  /* הטאבים הפרטיים לוקחים את כל השאר */
  .tcs-privatebar .tcs-private-tabs{
    flex: 1 !important;
    min-width: 0 !important; /* מאפשר overflow */
    direction: rtl !important; /* הטאבים עצמם בעברית */
  }
}

/* =========================================================
   DESKTOP — Friends button in header (left edge)
   ========================================================= */
@media (min-width: 521px){

  /* כפתור חברים בדסקטופ: נשאר ב-header בצד שמאל */
  .tcs-header-left .tcs-tab-friends{
    justify-content: flex-start;
  }

  /* בדסקטופ: אם הכפתור עדיין "תקוע" במובייל-מוד בתוך privatebar, מסתירים (failsafe) */
  .tcs-privatebar .tcs-tab-friends.tcs-friends-btn--in-privatebar{
    display: none !important;
  }

  /* בדסקטופ: כפתור חברים ב-header - מציגים אייקון + טקסט */
  .tcs-header-left .tcs-tab-friends .tcs-friends-text{
    display: inline !important; /* מציגים את הטקסט */
  }

  /* =========================================================
     DESKTOP — Private Tabs: שבירת שורה (wrap) במקום חיתוך
     מטרה:
     - כשנפתחים הרבה טאבים פרטיים ואין מקום בשורה אחת,
       הטאבים יורדים לשורה שניה/שלישית (במקום overflow וחיתוך של טאב 8).
     חשוב:
     - זה רץ רק בדסקטופ (מינימום 521px)
     - במובייל יש חוקים אחרים וה-privatebar אצלך ממילא מוסתר
     ========================================================= */
  #tcs-modal .tcs-privatebar{
    height: auto !important;
    min-height: 46px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    align-items: flex-start !important;
  }

  #tcs-modal .tcs-privatebar .tcs-private-tabs{
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
  }
}

/* === TCS CLEANUP DISABLED: סתירה עם N1 - במובייל אין privatebar בכלל ===
   Patch M1 (Mobile App UI) — CSS בלבד
   מטרות:
   1) מודאל Full Screen במובייל (100vw/100vh)
   2) "התראות" כטאב רביעי בצהוב (כפתור חברים נודד ל-privatebar)
   3) הסתרת Private Tabs UI במובייל
   =========================================================
@media (max-width: 520px){
  #tcs-modal-overlay{
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }
  #tcs-modal{
    width: 100vw !important;
    height: 100dvh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .tcs-privatebar{
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 12px 12px !important;
    margin: 0 !important;
    display: block !important;
  }
  .tcs-privatebar .tcs-private-tabs,
  .tcs-privatebar .tcs-private-placeholder{
    display: none !important;
  }
  .tcs-privatebar .tcs-tab-friends.tcs-friends-btn--in-privatebar{
    width: 100% !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }
  .tcs-friends-btn--in-privatebar .tcs-friends-text{
    display: none !important;
  }
  .tcs-privatebar .tcs-tab-friends.tcs-friends-btn--in-privatebar::after{
    content: "התראות";
    font-weight: 800;
    letter-spacing: 0.2px;
  }
}
=== END DISABLED ===

/* === TCS CLEANUP DISABLED: משתמש ב-opacity/transform במקום display:none (יציב יותר) ===
   Patch M2-FIX — HOME / CHAT (Mobile Only)
   עובד עם המבנה האמיתי שלך: .tcs-rooms-wrap + .tcs-privatebar
   =========================================================
@media (max-width: 520px){
  #tcs-modal .tcs-back-btn{
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 60;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    color: #222;
  }
  #tcs-modal.tcs-chat-mode .tcs-back-btn{
    display: flex;
  }
  #tcs-modal.tcs-chat-mode .tcs-rooms-wrap,
  #tcs-modal.tcs-chat-mode .tcs-privatebar{
    opacity: 0;
    pointer-events: none;
    transform: translateX(-16px);
    transition: opacity .25s ease, transform .25s ease;
  }
  #tcs-modal .tcs-rooms-wrap,
  #tcs-modal .tcs-privatebar{
    transition: opacity .25s ease, transform .25s ease;
  }
  #tcs-modal:not(.tcs-chat-mode) .tcs-rooms-wrap,
  #tcs-modal:not(.tcs-chat-mode) .tcs-privatebar{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }
}
=== END DISABLED ===

/* =========================================================
   Fix M2 — CHAT mode במובייל לא שומר מקום לטאבים
   (רק מובייל)
   ========================================================= */

@media (max-width: 520px){

  /* במצב CHAT: לא רק "להעלים" — אלא באמת להוריד מה-layout */
  /**
   * מה זה עושה: מסיר את הטאבים מה-layout במצב CHAT (לא רק מסתיר)
   * על מה זה משפיע: .tcs-rooms-wrap (3 חדרים) - לא תופס מקום במצב CHAT
   */
  .tcs-chat-mode .tcs-rooms-wrap{
    display: none !important;
  }

  /**
   * מה זה עושה: מסיר את ה-privatebar מה-layout במצב CHAT
   * על מה זה משפיע: .tcs-privatebar (התראות) - לא תופס מקום במצב CHAT
   */
  .tcs-chat-mode .tcs-privatebar{
    display: none !important;
  }

  /* במצב CHAT: לכווץ את ה-Header שיהיה שורה אחת קומפקטית */
  /**
   * מה זה עושה: הופך את ה-header לקומפקטי במצב CHAT (שורה אחת)
   * על מה זה משפיע: .tcs-modal-header - גובה קטן יותר, ריווחים קטנים
   */
  .tcs-chat-mode .tcs-modal-header{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }

  /* במצב CHAT: המרכז (שהכיל טאבים) לא צריך להיות שם בכלל */
  /**
   * מה זה עושה: מסתיר את האזור המרכזי של ה-header במצב CHAT
   * על מה זה משפיע: .tcs-header-center - לא תופס מקום במצב CHAT
   */
  .tcs-chat-mode .tcs-header-center{
    display: none !important;
  }

  /* אם השמאל ריק — לא חייב, אבל זה מנקה רווחים */
  /**
   * מה זה עושה: מגדיר מינימום רוחב לאזור השמאלי (לכפתור חזרה)
   * על מה זה משפיע: .tcs-header-left - מבטיח מקום לכפתור חזרה
   */
  .tcs-chat-mode .tcs-header-left{
    display: flex !important;
    min-width: 44px;
  }
}

/* =========================================================
   Patch M2.3 — Mobile HOME/CHAT polish
   1) במצב HOME מסתירים את אזור הצ'אט לגמרי
   2) פס עליון בצבע #efeff4 + מרווחים
   ========================================================= */

@media (max-width: 520px){

  /* פס עליון – אותו צבע כמו פס הטייטל של החדר (כדי שיראה אחיד) */
  /**
   * מה זה עושה: מגדיר רקע אפור בהיר לפס העליון (כמו פס הטייטל של החדר)
   * על מה זה משפיע: .tcs-modal-header - רקע אחיד במצב HOME ו-CHAT
   */
  .tcs-modal-header{
    background: #efeff4 !important;
  }

  /* במצב CHAT: פס קומפקט + מרווחים טובים בין הכפתורים לקצוות */
  /**
   * מה זה עושה: מגדיר ריווחים קומפקטיים לפס העליון במצב CHAT
   * על מה זה משפיע: .tcs-modal-header במצב CHAT - ריווחים נוחים
   */
  .tcs-chat-mode .tcs-modal-header{
    padding: 12px 14px !important;
    gap: 12px !important;
  }

  /* 1) HOME: לא מציגים בכלל את הצ'אט מתחת לטאבים */
  /**
   * מה זה עושה: מסתיר את אזור הצ'אט במצב HOME (רק טאבים נראים)
   * על מה זה משפיע: .tcs-main - לא מוצג במצב HOME
   */
  :not(.tcs-chat-mode) #tcs-modal .tcs-main{
    display: none !important;
  }

  /* CHAT: כן מציגים צ'אט במסך מלא */
  /**
   * מה זה עושה: מציג את אזור הצ'אט במסך מלא במצב CHAT
   * על מה זה משפיע: .tcs-main - תופס את כל הגובה פחות הפס העליון
   */
  .tcs-chat-mode #tcs-modal .tcs-main{
    display: block !important;
    height: calc(100dvh - 56px) !important; /* משאיר מקום לפס העליון */
  }

  /* רק ליתר בטחון – בלי גלילה כפולה מוזרה */
  /**
   * מה זה עושה: מונע גלילה כפולה במצב CHAT
   * על מה זה משפיע: #tcs-modal - overflow מוסתר במצב CHAT
   */
  .tcs-chat-mode #tcs-modal{
    overflow: hidden !important;
  }
}

/* =========================================================
   Patch M2.4 (Mobile polish) — SAFE
   תיקונים שביקשת:
   1) במצב CHAT: פס עליון באותו צבע של שורת הכותרת (#efeff4)
   2) החלפה בין מיקום הכפתורים: X בשמאל | חץ חזרה בימין (מובייל בלבד)
   3) קצת יותר "אוויר" בין הכפתורים לבין הצ'אט (מרווח לפני ה-iframe)
   4) במצב HOME: לא מציגים את הצ'אט "בקטן" מתחת לטאבים
   ========================================================= */

@media (max-width: 520px){

  /* ---------------------------------------------------------
     1) CHAT: פס עליון אחיד בצבע #efeff4 (כמו כותרת החדר בפנים)
     --------------------------------------------------------- */
  #tcs-modal.tcs-chat-mode .tcs-modal-header{
    background: #efeff4 !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  }

  /* קצת יותר מרווח לפני תחילת הצ'אט, כדי שהכפתורים לא "ישבו" על הכותרת */
  #tcs-modal.tcs-chat-mode .tcs-modal-header{
    padding-bottom: 14px !important;
  }

  /* ---------------------------------------------------------
     2) מיקום הכפתורים במובייל:
        X בשמאל | חץ חזרה בימין
     --------------------------------------------------------- */

  /* === TCS CLEANUP DISABLED: כפילות - נשאר רק LOCK POSITIONS ===
  X — שמאל
  #tcs-modal .tcs-close-x{
    left: 6px !important;
    right: auto !important;
  }
  === END DISABLED === */

  /* חץ חזרה — ימין */
  #tcs-modal .tcs-back-btn{
    right: 6px !important;
    left: auto !important;
  }

  /* שיהיו ויזואלית באותו סגנון (כמו X) */
  #tcs-modal .tcs-back-btn{
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    color: #2B2B2B !important;
    font-size: 20px !important;
    font-weight: 900 !important;
  }

  /* ---------------------------------------------------------
     4) HOME: לא מציגים את החדר האחרון "בקטן" מתחת לטאבים
        (גם אם הוא נשאר ה-tab הפעיל בזיכרון)
     --------------------------------------------------------- */

  /* HOME (לא ב-CHAT): מסתירים את ה-pane של החדרים כדי שלא יתפוס מקום */
  #tcs-modal:not(.tcs-chat-mode) #tcs-rooms-pane{
    display: none !important;
  }

  /* CHAT: מחזירים את ה-pane של החדרים כדי שירוץ במסך מלא */
  #tcs-modal.tcs-chat-mode #tcs-rooms-pane{
    display: block !important;
  }
}

/* === TCS CLEANUP DISABLED: כפילות - נשאר רק FIX: Back button as Purple Mini-Tab ===
   Patch M2.5 — Mobile: כפתור חזרה כמיני-טאב סגול
   ========================================================= */

/* @media (max-width: 520px){

  /* מרווח בפס העליון כדי שה"מיני טאב" יכנס יפה */
  /**
   * מה זה עושה: מגדיר ריווחים מינימליים לפס העליון במצב CHAT
   * על מה זה משפיע: .tcs-modal-header - מקום לכפתור חזרה כמיני-טאב
   */
  /* .tcs-chat-mode .tcs-modal-header{
    padding: 14px 14px !important;
    min-height: 56px !important;
  }

  /* כפתור החץ (חזרה ל-HOME) כמיני טאב */
  /**
   * מה זה עושה: הופך את כפתור החזרה למיני-טאב סגול (כמו טאבים אחרים)
   * על מה זה משפיע: .tcs-back-btn - מראה של טאב קטן סגול במקום כפתור פשוט
   */
  /* .tcs-chat-mode .tcs-back-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* צורה וטאצ׳ */
    /* height: 36px !important;
    min-width: 44px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    cursor: pointer !important;

    /* מראה "טאב קטן" */
    /* background: #7900FF !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    box-shadow:
      0 6px 18px rgba(121,0,255,0.28),
      inset 0 1px 0 rgba(255,255,255,0.10) !important;

    /* טיפוגרפיה */
    /* font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  /* Hover/Active עדין (במובייל זה בעיקר active) */
  /**
   * מה זה עושה: אפקט לחיצה על כפתור החזרה (קטן מעט)
   * על מה זה משפיע: .tcs-back-btn - תחושת לחיצה
   */
  /* .tcs-chat-mode .tcs-back-btn:active{
    transform: translateY(1px) scale(0.98);
    box-shadow:
      0 4px 14px rgba(121,0,255,0.22),
      inset 0 1px 0 rgba(255,255,255,0.10) !important;
  }

  /* לוודא שהאיקס לא "חונק" מקום */
  /**
   * מה זה עושה: מגדיר ריווחים לכפתור X כדי שלא יפריע לכפתור חזרה
   * על מה זה משפיע: .tcs-close-btn - ריווחים נוחים
   */
  /* .tcs-chat-mode .tcs-close-btn{
    padding: 8px 10px !important;
  }
}
=== END DISABLED ===
/* === TCS CLEANUP DISABLED: כפילות - נשאר רק FIX: Back button as Purple Mini-Tab ===
   Force Back Button "Mini Tab" — Mobile Only (Override Everything)
   שים את זה בסוף הקובץ!
   ========================================================= */
   /* @media (max-width: 520px){

    /* כפתור חזרה כטאב סגול — ספציפי מאוד כדי לנצח !important ישנים */
    /* .tcs-chat-mode #tcs-modal .tcs-modal-header .tcs-back-btn{
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;

      height: 36px !important;
      min-width: 44px !important;
      padding: 0 12px !important;
      border-radius: 999px !important;

      background: #7900FF !important;
      color: #ffffff !important;
      border: 1px solid rgba(255,255,255,0.22) !important;

      box-shadow:
        0 6px 18px rgba(121,0,255,0.28),
        inset 0 1px 0 rgba(255,255,255,0.10) !important;

      font-size: 18px !important;
      font-weight: 800 !important;
      line-height: 1 !important;

      /* אם יש לו position absolute ישן — אנחנו מבטלים כדי שיישב יפה ב-header */
      /* position: static !important;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      z-index: auto !important;
    }

    .tcs-chat-mode #tcs-modal .tcs-modal-header .tcs-back-btn:active{
      transform: translateY(1px) scale(0.98) !important;
    }

    /* קצת אוויר בפס העליון */
    /* .tcs-chat-mode #tcs-modal .tcs-modal-header{
      padding: 14px 14px !important;
      background: #efeff4 !important;
    }
  }
=== END DISABLED ===

/* =========================================================
   FIX: Back button as Purple Mini-Tab (Mobile + CHAT only)
   חייב להיות בסוף הקובץ כדי לנצח חוקים קיימים עם !important
   ========================================================= */

@media (max-width: 520px){

  /* רק במצב צ'אט */
  /**
   * מה זה עושה: מגדיר רקע וריווחים לפס העליון במצב CHAT
   * על מה זה משפיע: .tcs-modal-header - רקע אפור בהיר וריווחים למיני-טאב
   */
  /* === TCS CLEANUP DISABLED: כפילות - min-height גורם לתזוזה, נשאר רק Patch H2 ===
  #tcs-modal.tcs-chat-mode .tcs-modal-header{
    background: #efeff4 !important;
    padding: 14px 14px !important;
    min-height: 56px !important;
  }
  === END DISABLED === */

  /* סלקטור יותר חזק מהחוק שלך: #tcs-modal .tcs-back-btn */
  /**
   * מה זה עושה: הופך את כפתור החזרה למיני-טאב סגול (סלקטור חזק יותר)
   * על מה זה משפיע: .tcs-back-btn - מראה של טאב קטן סגול במקום כפתור פשוט
   */
  #tcs-modal.tcs-chat-mode .tcs-header-right .tcs-back-btn{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 36px !important;
    min-width: 44px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;

    background: #7900FF !important;
    color: #ffffff !important;

    border: 1px solid rgba(255,255,255,0.22) !important;
    box-shadow:
      0 6px 18px rgba(121,0,255,0.28),
      inset 0 1px 0 rgba(255,255,255,0.10) !important;

    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    /* אם יש חוקים שממקמים אותו אבסולוטית */
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
  }

  /**
   * מה זה עושה: אפקט לחיצה על כפתור החזרה
   * על מה זה משפיע: .tcs-back-btn - תחושת לחיצה
   */
  #tcs-modal.tcs-chat-mode .tcs-header-right .tcs-back-btn:active{
    transform: translateY(1px) scale(0.98) !important;
  }
}

/* === TCS CLEANUP DISABLED: כפילות - נשאר רק Notifications (Home) — Clean UI ===
   Notifications Pane (HOME) — Mobile polish
   ========================================================= */

/* @media (max-width: 520px){

  /**
   * מה זה עושה: מגדיר ריווחים למסך ההתראות
   * על מה זה משפיע: .tcs-notifications-placeholder - ריווחים נוחים
   */
  /* .tcs-notifications-placeholder{
    padding: 16px;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לכותר "התראות"
   * על מה זה משפיע: h3 במסך ההתראות - כותרת בולטת
   */
  /* .tcs-notifications-placeholder h3{
    margin: 6px 0 8px;
    font-size: 18px;
    font-weight: 900;
    color: #111;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לטקסט התיאור
   * על מה זה משפיע: p במסך ההתראות - טקסט הסבר
   */
  /* .tcs-notifications-placeholder p{
    margin: 0 0 12px;
    color: #555;
    font-size: 14px;
  }

  /**
   * מה זה עושה: מגדיר רשימת התראות בטור עם ריווחים
   * על מה זה משפיע: .tcs-notifications-list - רשימת התראות
   */
  /* .tcs-notifications-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לפריט התראה בודד (כרטיס לבן)
   * על מה זה משפיע: .tcs-notif-item - כל פריט התראה ברשימה
   */
  /* .tcs-notif-item{
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    font-weight: 700;
    color: #111;
  }
}
=== END DISABLED ===

/* === TCS CLEANUP DISABLED: כפילות - נשאר רק Notifications (Home) — Clean UI ===
   Notifications UI (Private only) — Mobile
   ========================================================= */

/* @media (max-width: 520px){

  /**
   * מה זה עושה: מגדיר ריווחים למסך ההתראות
   * על מה זה משפיע: .tcs-notifications - ריווחים נוחים
   */
  /* .tcs-notifications{
    padding: 14px;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לכותר "התראות"
   * על מה זה משפיע: h3 במסך ההתראות - כותרת בולטת
   */
  /* .tcs-notif-head h3{
    margin: 6px 0 4px;
    font-size: 18px;
    font-weight: 900;
    color: #111;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לטקסט התיאור
   * על מה זה משפיע: .tcs-notif-sub - טקסט הסבר
   */
  /* .tcs-notif-sub{
    margin: 0 0 12px;
    color: #666;
    font-size: 13px;
  }

  /**
   * מה זה עושה: מגדיר grid לחיפוש וסינון
   * על מה זה משפיע: .tcs-notif-controls - אזור החיפוש והסינון
   */
  /* .tcs-notif-controls{
    display: grid;
    gap: 10px;
    margin-bottom: 12px;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לשדה החיפוש
   * על מה זה משפיע: .tcs-notif-search - שדה חיפוש משתמשים
   */
  /* .tcs-notif-search{
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    font-size: 14px;
    outline: none;
  }

  /**
   * מה זה עושה: מגדיר כפתורי סינון בשורה
   * על מה זה משפיע: .tcs-notif-filters - כפתורי סינון (לא נקראו, מחוברים, כולם)
   */
  /* .tcs-notif-filters{
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לכפתור סינון
   * על מה זה משפיע: .tcs-notif-filter - כפתור סינון בודד
   */
  /* .tcs-notif-filter{
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,0.08);
    background: #fff;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לכפתור סינון פעיל (סגול)
   * על מה זה משפיע: .tcs-notif-filter.is-active - כפתור סינון שנבחר
   */
  /* .tcs-notif-filter.is-active{
    background: #7900FF;
    border-color: rgba(121,0,255,0.35);
    color: #fff;
    box-shadow: 0 10px 24px rgba(121,0,255,0.22);
  }

  /**
   * מה זה עושה: מגדיר רשימת משתמשים בטור
   * על מה זה משפיע: .tcs-notif-list - רשימת משתמשים
   */
  /* .tcs-notif-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לפריט משתמש (כרטיס)
   * על מה זה משפיע: .tcs-notif-user - כל משתמש ברשימה
   */
  /* .tcs-notif-user{
    width: 100%;
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    align-items: center;

    padding: 12px 12px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.06);
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    text-align: right;
    cursor: pointer;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לאווטאר משתמש
   * על מה זה משפיע: .tcs-notif-avatar - אווטאר של משתמש
   */
  /* .tcs-notif-avatar{
    width: 40px;
    height: 40px;
    border-radius: 14px;
    background: rgba(121,0,255,0.14);
    border: 1px solid rgba(121,0,255,0.18);
  }

  /**
   * מה זה עושה: מגדיר grid לשם והודעה אחרונה
   * על מה זה משפיע: .tcs-notif-meta - שם משתמש והודעה אחרונה
   */
  /* .tcs-notif-meta{
    display: grid;
    gap: 2px;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לשם משתמש
   * על מה זה משפיע: .tcs-notif-name - שם משתמש
   */
  /* .tcs-notif-name{
    font-weight: 900;
    color: #111;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לטקסט "הודעה אחרונה"
   * על מה זה משפיע: .tcs-notif-last - זמן הודעה אחרונה
   */
  /* .tcs-notif-last{
    font-size: 12px;
    color: #777;
  }

  /**
   * מה זה עושה: מגדיר אזור סטטוסים (אונליין, לא נקרא)
   * על מה זה משפיע: .tcs-notif-badges - סטטוסים ותגים
   */
  /* .tcs-notif-badges{
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /**
   * מה זה עושה: מגדיר נקודת סטטוס (לא מחובר)
   * על מה זה משפיע: .tcs-dot - נקודת סטטוס אפורה
   */
  /* .tcs-dot{
    width: 10px;
    height: 10px;
    border-radius: 99px;
    background: #cfcfcf;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.03);
  }

  /**
   * מה זה עושה: מגדיר נקודת סטטוס מחובר (ירוק)
   * על מה זה משפיע: .tcs-dot.is-online - נקודה ירוקה
   */
  /* .tcs-dot.is-online{
    background: #34C759;
    box-shadow: 0 0 0 4px rgba(52,199,89,0.18);
  }

  /**
   * מה זה עושה: מגדיר תג מונה (מספר הודעות)
   * על מה זה משפיע: .tcs-pill - תג מונה בסיסי
   */
  /* .tcs-pill{
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 12px;
    background: rgba(0,0,0,0.06);
    color: #111;
  }

  /**
   * מה זה עושה: מגדיר תג לא נקרא (אדום)
   * על מה זה משפיע: .tcs-pill.is-unread - תג עם הודעות לא נקראו
   */
  /* .tcs-pill.is-unread{
    background: rgba(255,59,48,0.14);
    color: #111;
  }

  /**
   * מה זה עושה: מגדיר תג אינטראקציה (צהוב)
   * על מה זה משפיע: .tcs-pill.is-interaction - תג אינטראקציה
   */
  /* .tcs-pill.is-interaction{
    background: rgba(255,216,0,0.30);
    color: #111;
  }
}
=== END DISABLED ===

/* =========================================================
   Notifications (Home) — Clean UI (Mobile only)
   כותרת נקייה, חיפוש, פילטרים צהובים, רשימה רגועה
   ========================================================= */

@media (max-width: 520px){

  /* אזור כללי */
  /**
   * מה זה עושה: מגדיר ריווחים למסך ההתראות
   * על מה זה משפיע: .tcs-notifications - ריווחים נוחים
   */
  .tcs-notifications{
    padding: 12px 14px !important;
  }

  /* כותרת "התראות" — שחור, בלי רקע */
  /**
   * מה זה עושה: מגדיר כותרת נקייה בלי רקע
   * על מה זה משפיע: .tcs-notif-head - כותרת מסך ההתראות
   */
  .tcs-notif-head{
    margin: 0 0 10px !important;
    padding: 0 !important;
    background: transparent !important;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לכותר "התראות"
   * על מה זה משפיע: h3 - כותרת בולטת
   */
  .tcs-notif-head h3{
    margin: 0 0 6px !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #111 !important;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לטקסט התיאור
   * על מה זה משפיע: .tcs-notif-sub - טקסט הסבר
   */
  .tcs-notif-sub{
    margin: 0 0 10px !important;
    color: #666 !important;
    font-size: 13px !important;
  }

  /* שדה חיפוש — נקי */
  /**
   * מה זה עושה: מגדיר עיצוב נקי לשדה החיפוש
   * על מה זה משפיע: .tcs-notif-search - שדה חיפוש משתמשים
   */
  .tcs-notif-search{
    width: 100% !important;
    padding: 12px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(0,0,0,0.10) !important;
    background: #fff !important;
    color: #111 !important;
    outline: none !important;
  }

  /**
   * מה זה עושה: מגדיר צבע לטקסט placeholder
   * על מה זה משפיע: placeholder בשדה החיפוש
   */
  .tcs-notif-search::placeholder{
    color: #888 !important;
  }

  /* פילטרים — שורה אחת */
  /**
   * מה זה עושה: מגדיר כפתורי סינון בשורה אחת (לא wrap)
   * על מה זה משפיע: .tcs-notif-filters - כפתורי סינון
   */
  .tcs-notif-filters{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לכפתור סינון צהוב
   * על מה זה משפיע: .tcs-notif-filter - כפתור סינון בודד (צהוב)
   */
  .tcs-notif-filter{
    flex: 1 1 0 !important;
    height: 40px !important;
    border-radius: 999px !important;

    background: #FFD800 !important;
    color: #111 !important;
    border: 1px solid rgba(0,0,0,0.10) !important;

    font-weight: 900 !important;
    font-size: 13px !important;
    cursor: pointer !important;

    box-shadow: 0 6px 16px rgba(255,216,0,0.14) !important;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease !important;
  }

  /* hover/active עדין כדי "להבין איפה אנחנו" */
  /**
   * מה זה עושה: אפקט לחיצה על כפתור סינון
   * על מה זה משפיע: .tcs-notif-filter - תחושת לחיצה
   */
  .tcs-notif-filter:active{
    transform: translateY(1px) scale(0.99) !important;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לכפתור סינון פעיל (בולט יותר)
   * על מה זה משפיע: .tcs-notif-filter.is-active - כפתור סינון שנבחר
   */
  .tcs-notif-filter.is-active{
    box-shadow:
      0 10px 22px rgba(255,216,0,0.22),
      0 0 0 2px rgba(255,216,0,0.35) !important;
    filter: brightness(1.02) !important;
  }

  /* רשימת משתמשים — להפסיק את הכרטיסים הסגולים */
  /**
   * מה זה עושה: מגדיר ריווחים לרשימת משתמשים
   * על מה זה משפיע: .tcs-notif-list - רשימת משתמשים
   */
  .tcs-notif-list{
    margin-top: 12px !important;
    gap: 10px !important;
  }

  /**
   * מה זה עושה: מגדיר עיצוב נקי לפריט משתמש (לבן, לא סגול)
   * על מה זה משפיע: .tcs-notif-user - כל משתמש ברשימה
   */
  .tcs-notif-user{
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 10px 22px rgba(0,0,0,0.06) !important;
    border-radius: 16px !important;
    padding: 12px 12px !important;
  }

  /* אוואטר רגוע */
  /**
   * מה זה עושה: מגדיר עיצוב רגוע לאווטאר (אפור, לא סגול)
   * על מה זה משפיע: .tcs-notif-avatar - אווטאר של משתמש
   */
  .tcs-notif-avatar{
    background: rgba(0,0,0,0.04) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
  }

  /**
   * מה זה עושה: מגדיר צבע לשם משתמש
   * על מה זה משפיע: .tcs-notif-name - שם משתמש
   */
  .tcs-notif-name{
    color: #111 !important;
  }

  /**
   * מה זה עושה: מגדיר צבע לטקסט "הודעה אחרונה"
   * על מה זה משפיע: .tcs-notif-last - זמן הודעה אחרונה
   */
  .tcs-notif-last{
    color: #777 !important;
  }

  /* באדג׳ים עדינים */
  /**
   * מה זה עושה: מגדיר עיצוב עדין לתג מונה
   * על מה זה משפיע: .tcs-pill - תג מונה בסיסי
   */
  .tcs-pill{
    background: rgba(0,0,0,0.06) !important;
    color: #111 !important;
  }

  /**
   * מה זה עושה: מגדיר עיצוב לתג לא נקרא (אדום עדין)
   * על מה זה משפיע: .tcs-pill.is-unread - תג עם הודעות לא נקראו
   */
/**
   * מה זה עושה: מגדיר עיצוב לתג אינטראקציה (צהוב עדין)
   * על מה זה משפיע: .tcs-pill.is-interaction - תג אינטראקציה
   */
  .tcs-pill.is-interaction{
    background: rgba(255,216,0,0.28) !important;
  }
}

/* =========================================================
   N1 — Mobile: מבטלים את "טאב התראות" הצהוב (הכפתור הרביעי)
   נשאר רק הכותרת "התראות" בתוך המסך עצמו.
   ========================================================= */
@media (max-width: 520px){

  /* כל ה-privatebar (שם יושב הכפתור הצהוב) לא צריך במובייל */
  /**
   * מה זה עושה: מסתיר את ה-privatebar במובייל (שם יושב הכפתור הצהוב)
   * על מה זה משפיע: .tcs-privatebar - מסתיר את כל ה-privatebar במובייל
   */
  .tcs-privatebar{
    display: none !important;
  }

  /* ליתר בטחון: אם הכפתור קיים איפשהו — להעלים במובייל */
  /**
   * מה זה עושה: מסתיר את כפתור "התראות" הצהוב במובייל (ללא תלות במיקום)
   * על מה זה משפיע: .tcs-tab-friends - מסתיר את הכפתור הצהוב לגמרי במובייל
   */
  .tcs-tab-friends,
  .tcs-tab-friends.tcs-friends-btn--in-privatebar{
    display: none !important;
  }
}

/* =========================================================
   Fix: מרכז טקסט בכפתורי פילטרים צהובים
   ========================================================= */
@media (max-width: 520px){
  /**
   * מה זה עושה: ממרכז את הטקסט בכפתורי הפילטרים הצהובים במובייל
   * על מה זה משפיע: .tcs-notif-filter - מבטיח שהטקסט ממורכז אופקית ואנכית
   */
  .tcs-notif-filter{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
  }
}

/* === TCS CLEANUP DISABLED: יכול לשבור flex/column או להחזיר אלמנטים שהסתרנו בכוונה ===
   Fix: בטוח למניעת "טאבים נעלמים" (מובייל בלבד)
   ========================================================= */
/* @media (max-width: 520px){
  /**
   * מה זה עושה:
   * - מבטיח שכשלא במצב CHAT, הטאבים הציבוריים תמיד יהיו מוצגים
   * - "סוגר פינה" למקרה שיש inline styles או בעיות אחרות שמסתירות את הטאבים
   * - עובד יחד עם החוק הקיים שמסתיר טאבים במצב CHAT
   *
   * מתי זה רץ:
   * - רק במובייל (רוחב מסך עד 520px)
   * - רק כשהמודאל לא במצב CHAT (כשיש class 'tcs-chat-mode')
   *
   * על מה זה משפיע:
   * - .tcs-rooms-wrap - הטאבים הציבוריים (3 החדרים)
   * - מבטיח שהטאבים תמיד נראים במסך HOME
   * - מונע מצבים שבהם הטאבים נעלמים בגלל inline styles או בעיות CSS אחרות
   */
  /* אם לא ב-CHAT mode — הטאבים חייבים להיות מוצגים */
  /* #tcs-modal:not(.tcs-chat-mode) .tcs-rooms-wrap{
    display: block !important;
  }
}
=== END DISABLED ===

/* === TCS CLEANUP DISABLED: בלוק ריק - לא עושה כלום ===
   Mobile: ריווח בין טאבי החדרים הציבוריים
   =========================================================
@media (max-width: 520px){
}
=== END DISABLED === */

/* === TCS CLEANUP DISABLED: fallback כפול - יוצר margins/סטאק כפול ===
   Mobile: ריווח חזק בין טאבי החדרים הציבוריים (fallback שתופס הכל)
   =========================================================
@media (max-width: 520px){
  #tcs-modal .tcs-rooms-wrap{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  #tcs-modal .tcs-rooms-pane button,
  #tcs-modal .tcs-rooms-pane a{
    margin: 0 !important;
  }
  #tcs-modal .tcs-rooms-pane button + button,
  #tcs-modal .tcs-rooms-pane a + a,
  #tcs-modal .tcs-rooms-pane button + a,
  #tcs-modal .tcs-rooms-pane a + button{
    margin-top: 16px !important;
  }
}
=== END DISABLED === */

/* =========================================================
   Mobile: ריווח בין טאבי החדרים הציבוריים (מדויק לפי המבנה שלך)
   ========================================================= */
/* =========================================================
   MOBILE: טאבי חדרים ציבוריים אחד מתחת לשני + ריווח
   למה:
   - בפועל במובייל הטאבים נשברים לשתי שורות ונדבקים
   - מרחיבים breakpoint כדי שזה יתפוס גם במכשירים "רחבים" / אמולטור
========================================================= */
@media (max-width: 768px){
  /* ה-wrapper של הטאבים */
  #tcs-modal .tcs-rooms-wrap{
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;                 /* ריווח בין הטאבים */
    padding: 10px 0 12px !important;
    align-items: stretch !important;      /* שכל טאב יתפרס לרוחב */
  }

  /* הטאבים עצמם */
  #tcs-modal .tcs-rooms-wrap .tcs-tab-room{
    margin: 0 !important;                 /* אין margins — gap עושה את העבודה */
    width: 100% !important;               /* אחד מתחת לשני */
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Fallback: אם gap לא תופס בגלל wrapper/דריסה – נייצר רווח עם margin */
  #tcs-modal .tcs-rooms-wrap .tcs-tab-room:not(:last-child){
    margin-bottom: 14px !important;
  }
}

/* =========================================================
   CHAT MODE: לא אמור להופיע שום UI של "התראות" בתוך חדר (iframe)
   פתרון לבאג: כפתור "לא נקראו" צף מעל הצ'אט
   ========================================================= */
#tcs-modal.tcs-chat-mode .tcs-notifications,
#tcs-modal.tcs-chat-mode .tcs-notif-filters,
#tcs-modal.tcs-chat-mode .tcs-notif-filter,
#tcs-modal.tcs-chat-mode button.tcs-pill,
#tcs-modal.tcs-chat-mode button.tcs-btn {
  display: none !important;
}

/* =========================================================
   ✨ Fade Transition v3 — Mobile Only (App Feel)
   מה זה עושה:
   - Fade + מיקרו תנועה (לא סלייד)
   - מורגש יותר, עדיין עדין
   - עובד על wrapper קבוע: .tcs-main-area
========================================================= */

@media (max-width: 768px) {

  @keyframes tcsFadeApp {
    from { opacity: 0.001; transform: translateY(10px) scale(0.99); }
    to   { opacity: 1;     transform: translateY(0)    scale(1); }
  }

  #tcs-modal.tcs-fade-transition .tcs-main-area {
    animation: tcsFadeApp 520ms cubic-bezier(.2,.8,.2,1) both;
  }
}

/* =========================================================
   FIX (קנוני): חץ חזרה רק במובייל+CHAT | X במיקום נכון
   למה:
   - אחרי הניקוי ל-X אין position:absolute => הוא איבד מיקום
   - החץ (back) חייב להופיע רק במובייל במצב CHAT
   ========================================================= */

/* === TCS CLEANUP DISABLED: כפילות - נשאר רק LOCK POSITIONS ===
--- 1) בסיס: כפתור X קבוע בפינה (דסקטופ = ימין עליון)
#tcs-modal .tcs-close-x{
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  z-index: 90 !important;
}
--- 2) בסיס: חץ חזרה לא מוצג בכלל (נפתח רק במובייל+CHAT)
#tcs-modal .tcs-back-btn{
  display: none !important;
}
--- 3) מובייל: X בשמאל עליון | חץ חזרה רק ב-CHAT
@media (max-width: 520px){
  X במובייל: שמאל עליון
  #tcs-modal .tcs-close-x{
    left: 10px !important;
    right: auto !important;
  }
}
=== END DISABLED === */

/* --- 3) מובייל: חץ חזרה רק ב-CHAT --- */
@media (max-width: 520px){
  /* חץ חזרה במובייל: מופיע רק במצב CHAT */
  #tcs-modal.tcs-chat-mode .tcs-back-btn{
    display: inline-flex !important;
  }

  /* ביטוח: ב-HOME (לא CHAT) החץ חייב להיות מוסתר */
  #tcs-modal:not(.tcs-chat-mode) .tcs-back-btn{
    display: none !important;
  }
}

/* --- 4) דסקטופ: החץ תמיד מוסתר (גם אם יש chat-mode) --- */
@media (min-width: 521px){
  #tcs-modal .tcs-back-btn{
    display: none !important;
  }
}

/* =========================================================
   ✅ UX PACK v1 (Mobile + Desktop)
   מטרות:
   1) מובייל: מודאל Full Screen אמיתי (בלי רווחים מסביב)
   2) X: מובייל שמאל-עליון בפינה | דסקטופ ימין-עליון בפינה
   3) Header עליון בצבע #efeff4 + ריווח נכון בין טאבים להתראות
   4) מראה מזמין: רקע Canvas, כרטיסים, צל עדין, קווי הפרדה
========================================================= */

/* -------------------------
   1) בסיס: רקעים + תחושה כללית
-------------------------- */
#tcs-modal{
  background: #F7F7FA; /* Canvas (Light) */
}

/* השורה העליונה (Header strip) חייבת להיות #efeff4 */
#tcs-modal .tcs-header,
#tcs-modal .tcs-topbar,
#tcs-modal .tcs-titlebar,
#tcs-modal .tcs-tabs-row{
  background: #EFEFF4 !important;
}

/* קווי הפרדה עדינים */
#tcs-modal .tcs-header,
#tcs-modal .tcs-topbar,
#tcs-modal .tcs-tabs-row{
  border-bottom: 1px solid #E6E6EE;
}

/* -------------------------
   2) FULL SCREEN במובייל (הכי חשוב)
   הערה: אנחנו מכריחים 100vw/100vh ומבטלים רדיוסים/מרג'ינים
-------------------------- */
@media (max-width: 520px){
  #tcs-modal{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* אזור התוכן הפנימי יתפרס לכל הגובה */
  #tcs-modal .tcs-main-area{
    height: 100% !important;
    min-height: 100% !important;
  }
}

/* -------------------------
   3) X בפינה נכונה (מובייל/דסקטופ)
-------------------------- */
/* === TCS CLEANUP DISABLED: כפילות - נשאר רק LOCK POSITIONS ===
ברירת מחדל (דסקטופ): ימין עליון
#tcs-modal .tcs-close-x{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 999 !important;
  width: 34px;
  height: 34px;
  line-height: 34px;
  border-radius: 10px;
  background: rgba(0,0,0,0.06);
  color: #141414;
}
מובייל: שמאל עליון (גם HOME וגם CHAT)
@media (max-width: 520px){
  #tcs-modal .tcs-close-x{
    left: 12px !important;
    right: auto !important;
    top: 10px !important;
  }
}
=== END DISABLED === */

/* -------------------------
   4) ריווח נכון בין 3 הטאבים לאזור התראות (HOME)
-------------------------- */
@media (max-width: 520px){
  /* עטיפת הטאבים – נותנים "נשימה" */
  #tcs-modal .tcs-rooms-wrap{
    padding: 18px 16px 8px !important;
  }

  /* שלושת כפתורי החדרים – אחידים, מזמינים */
  #tcs-modal .tcs-rooms-wrap .tcs-tab-room{
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.10); /* Elevation light */
  }

  /* רווח ברור בין הטאב האחרון לבין אזור ההתראות */
  #tcs-modal #tcs-friends-pane{
    padding-top: 14px !important;
    margin-top: 10px !important;
    border-top: 1px solid #E6E6EE;
  }
}

/* -------------------------
   5) "כרטיס" התראות: כותרת/טקסט/חיפוש/פילטרים
-------------------------- */
#tcs-modal #tcs-friends-pane{
  background: #FFFFFF;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  border: 1px solid #E6E6EE;
}

/* כותרת "התראות" – פחות נמחצת */
#tcs-modal #tcs-friends-pane h2,
#tcs-modal #tcs-friends-pane .tcs-friends-title{
  color: #141414;
  letter-spacing: 0.2px;
  margin: 0 0 8px 0 !important;
}

/* שורת חיפוש */
#tcs-modal #tcs-friends-pane input[type="search"],
#tcs-modal #tcs-friends-pane input[type="text"]{
  border: 1px solid #E6E6EE !important;
  background: #FFFFFF !important;
  border-radius: 14px !important;
  height: 44px;
  padding: 0 14px;
  outline: none;
}

/* פילטרים צהובים – אחידים ונקיים */
#tcs-modal #tcs-friends-pane .tcs-filter-btn,
#tcs-modal #tcs-friends-pane button{
  border-radius: 999px;
}

/* -------------------------
   6) דסקטופ: "חלון מזמין" (לא לשבור)
   נשמור רדיוס/צל עדין כדי שיראה פרימיום
-------------------------- */
@media (min-width: 521px){
  #tcs-modal{
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.18);
    border: 1px solid #E6E6EE;
    overflow: hidden;
  }
}

/* === TCS CLEANUP DISABLED: שבר את כפתור "התראות" בדסקטופ (header-left width:0) ===
   FIX קנוני: מיקום X בפינה (מובייל/דסקטופ) בלי תלות ב-flex
   מצב נוכחי:
   - הכפתור נמצא בתוך .tcs-header-left (flex)
   - צריך לנטרל "השפעת layout" ולשים את ה-X בפינה של המודאל
=========================================================
#tcs-modal {
  position: fixed;
}
#tcs-modal .tcs-modal-header,
#tcs-modal .tcs-modal-header * {
  box-sizing: border-box;
}
#tcs-modal .tcs-modal-header {
  position: relative;
  background: #efeff4 !important;
}
#tcs-modal .tcs-header-left {
  position: static !important;
  width: 0 !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
}
#tcs-modal .tcs-close-x {
  position: absolute !important;
  top: 10px !important;
  z-index: 9999 !important;
  width: 34px;
  height: 34px;
  line-height: 34px;
  border-radius: 10px;
  background: rgba(0,0,0,0.06);
  color: #141414;
}
@media (min-width: 521px){
  #tcs-modal .tcs-close-x{
    right: 10px !important;
    left: auto !important;
  }
}
@media (max-width: 520px){
  #tcs-modal .tcs-close-x{
    left: 10px !important;
    right: auto !important;
  }
}
=== END DISABLED === */

/* === TCS CLEANUP DISABLED: fixed מוציא את ה-X מחוץ לחלון בדסקטופ ===
   FIX v2: X בפינה (מובייל/דסקטופ) + טאבים לא נחתכים בדסקטופ
   למה:
   - ה-X חייב להיות מנותק מה-flex של הכותרת → position:fixed
   - בדסקטופ הכפתור "התראות" נחתך לפעמים → נותנים padding + overflow visible
=========================================================
#tcs-modal .tcs-modal-header{
  background: #efeff4 !important;
}
#tcs-modal .tcs-close-x{
  position: fixed !important;
  z-index: 99999 !important;
  top: 12px !important;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 10px;
  background: rgba(0,0,0,0.06);
  color: #141414;
}
@media (min-width: 521px){
  #tcs-modal .tcs-close-x{
    right: 14px !important;
    left: auto !important;
  }
}
@media (max-width: 520px){
  #tcs-modal .tcs-close-x{
    left: 14px !important;
    right: auto !important;
  }
}
@media (min-width: 521px){
  #tcs-modal .tcs-modal-header{
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: visible !important;
  }
  #tcs-modal .tcs-rooms-wrap,
  #tcs-modal .tcs-header-center{
    overflow: visible !important;
  }
}
=== END DISABLED === */

/* =========================================================
   FIX v3 (קנוני): X בפינה של המודאל (לא viewport)
   למה:
   - fixed מוציא את ה-X מחוץ לחלון בדסקטופ
   - אנחנו רוצים absolute בתוך #tcs-modal
   - בלי לגעת ב-header-left (כדי לא לשבור "התראות")
========================================================= */

/* עוגן: המודאל עצמו הוא הבסיס ל-absolute */
#tcs-modal{
  position: fixed; /* לא מזיק לדסקטופ, כבר קיים אצלך במובייל */
}

/* === TCS CLEANUP DISABLED: כפילות - נשאר רק LOCK POSITIONS ===
ה-X: absolute ביחס למודאל
#tcs-modal .tcs-close-x{
  position: absolute !important;
  top: 12px !important;
  z-index: 99999 !important;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 10px;
  background: rgba(0,0,0,0.06);
  color: #141414;
}
דסקטופ: ימין עליון בתוך החלון
@media (min-width: 521px){
  #tcs-modal .tcs-close-x{
    right: -13px !important;
    left: auto !important;
    top: -8px !important;
  }
}
מובייל: שמאל עליון בתוך החלון
@media (max-width: 520px){
  #tcs-modal .tcs-close-x{
    left: 5px !important;
    right: auto !important;
    top: -8px !important;
  }
}
=== END DISABLED === */

/* =========================================================
   Patch: Mobile X position (HOME vs CHAT)
   מה זה עושה:
   - במובייל, מיקום כפתור X משתנה לפי מצב המסך:
     * HOME (לא במצב CHAT): X מימין עליון
     * CHAT (מצב שיחה פתוחה): X משמאל עליון
   - דסקטופ לא מושפע (נשאר עם החוקים הקיימים)
   
   למה זה חשוב:
   - משפר UX במובייל: מיקום X משתנה לפי הקשר (HOME/CHAT)
   - עובד יחד עם כפתור החזרה (שמופיע רק ב-CHAT)
   
   על מה זה משפיע:
   - .tcs-close-x - מיקום כפתור הסגירה במובייל בלבד
   ========================================================= */
/*@media (max-width: 520px){

  /* === TCS CLEANUP DISABLED: כפילות - נשאר רק LOCK POSITIONS ===
  HOME (לא במצב CHAT) — X מימין
  #tcs-modal:not(.tcs-chat-mode) .tcs-close-x{
    right: -2px !important;
    left: auto !important;
  }
  CHAT — X משמאל (כמו עכשיו)
  #tcs-modal.tcs-chat-mode .tcs-close-x{
    left: 12px !important;
    right: auto !important;
  }
  === END DISABLED === */
/*} */
/* =========================================================
   Patch: להרים את טאבי החדרים (מובייל HOME בלבד)
   מטרה: לצמצם רווח גדול בין ה-X לבין 3 הטאבים
========================================================= */

/*@media (max-width: 520px){

   HOME בלבד (לא CHAT)
  #tcs-modal:not(.tcs-chat-mode) .tcs-rooms-wrap{
    padding-top: 6px !important;   /* היה 18px 
    margin-top: 5px !important;   /* דוחף את הטאבים למעלה בעדינות 
  }

} */


/* 1) דסקטופ — לא מציגים חץ חזרה בכלל */
@media (min-width: 521px){
  #tcs-modal .tcs-back-btn{ display: none !important; }
}

/* =========================================================
   LOCK POSITIONS — CLEAN (Stable Geometry Layer)
   מטרה: לנעול מיקום X + פריסת טאבים (מובייל/דסקטופ)
   כלל: אין כפילויות, אין סתירות, ערך gap אחד לכל מצב
========================================================= */

/* עוגנים כלליים */
#tcs-modal{
  position: relative !important;
}
#tcs-modal .tcs-modal-header{
  position: relative !important;
}

/* =========================================================
   1) מובייל — HOME vs CHAT
========================================================= */
@media (max-width: 520px){

  /* HOME: X בצד ימין */
  #tcs-modal:not(.tcs-chat-mode) .tcs-close-x{
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 9999 !important;
  }

  /* HOME: טאבים בעמודה + gap אחיד (רק פה שולטים על הרווחים) */
  #tcs-modal:not(.tcs-chat-mode) .tcs-rooms-wrap{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;          /* <- שנה רק כאן: 8/10/12/14 */
    padding-top: 4px !important;
    margin-top: -20px !important;  /* <- מיקום כללי של הבלוק */
    margin-bottom: 0 !important;   /* <- לא שלילי כדי לא “לשבור” ריווחים */
  }

  /* איפוס margins של הילדים כדי שלא יילחמו ב-gap */
  #tcs-modal:not(.tcs-chat-mode) .tcs-rooms-wrap > *{
    margin: 0 !important;
  }

  /* HOME: התראות — קרוב לטאבים */
  #tcs-modal:not(.tcs-chat-mode) .tcs-privatebar{
    margin-top: -14px !important;  /* <- כיוון הרווח בין טאבים להתראות */
    padding-top: 0 !important;
  }

  /* CHAT: X בצד שמאל */
  #tcs-modal.tcs-chat-mode .tcs-close-x{
    position: absolute !important;
    top: 2px !important;
    left: 12px !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 9999 !important;
  }
  
}

/* =========================================================
   2) דסקטופ — X בפינה ימין למעלה + טאבים בשורה
========================================================= */
@media (min-width: 521px){

  /* X תמיד בפינה */
  #tcs-modal .tcs-close-x{
    position: absolute !important;
    top: 2px !important;
    right: -7px !important;
    left: auto !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 9999 !important;
  }

  /* HOME בדסקטופ: טאבים בשורה תמיד */
  #tcs-modal:not(.tcs-chat-mode) .tcs-rooms-wrap{
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: nowrap !important;
  }

  #tcs-modal:not(.tcs-chat-mode) .tcs-rooms-wrap .tcs-tab-room{
    width: auto !important;
    min-width: 220px !important;
  }
}

/* =========================================================
   STEP 2 — MOBILE HOME: Equal spacing for Public Tabs
   מטרה: רווחים שווים בין טאבים ציבוריים (HOME בלבד)
   שינוי אחד: שליטה ב-gap במקום אחד
========================================================= */

@media (max-width: 520px){

  /* HOME בלבד: עמודה + gap אחיד */
  #tcs-modal:not(.tcs-chat-mode) .tcs-rooms-wrap{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;            /* <- שנה רק כאן: 8/10/12/14 */
  }

  /* ביטול margins שמפריעים ל-gap */
  #tcs-modal:not(.tcs-chat-mode) .tcs-rooms-wrap > *{
    margin: 0 !important;
  }

  /* ביטוח: אם הכפתורים עצמם מקבלים margin/padding לא אחיד */
  #tcs-modal:not(.tcs-chat-mode) .tcs-rooms-wrap .tcs-tab-room{
    margin: 0 !important;
    padding: 16px 18px !important;   /* אחיד */
    line-height: 1.2 !important;     /* אחיד */
  }
}

/* =========================================================
   STEP 3 — MOBILE HOME: Pull Notifications area up (REAL DOM)
   מטרה: לצמצם רווח בין הטאבים הציבוריים לבין "התראות"
   הערה: אצלך ההתראות יושבות בתוך .tcs-main-area (לא .tcs-privatebar)
========================================================= */

@media (max-width: 520px){

  /* HOME בלבד: להקטין מרווח מתחת לטאבים */
  #tcs-modal:not(.tcs-chat-mode) .tcs-rooms-wrap{
    margin-bottom: 0 !important;    /* תשאיר 0 */
    padding-bottom: 0 !important;
  }

  /* HOME בלבד: "להרים" את כל אזור ההתראות */
  #tcs-modal:not(.tcs-chat-mode) .tcs-main-area{
    margin-top: -18px !important;   /* <- שליטה פה: -8 / -12 / -18 / -24 */
  }

  /* ביטוח: אם הפאנל עצמו דוחף למטה */
  #tcs-modal:not(.tcs-chat-mode) .tcs-friends-pane{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ביטוח: אם יש כותרת עם מרווח עליון גדול */
  #tcs-modal:not(.tcs-chat-mode) .tcs-notif-head{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}



/* =========================================================
   3) FIX: X has NO border/outline anywhere (כולל ילדים)
========================================================= */
#tcs-modal .tcs-close-x,
#tcs-modal .tcs-close-x *{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

#tcs-modal .tcs-close-x:focus,
#tcs-modal .tcs-close-x:focus-visible,
#tcs-modal .tcs-close-x *:focus,
#tcs-modal .tcs-close-x *:focus-visible{
  outline: 0 !important;
  box-shadow: none !important;
}






/* ==========================================================================
   SKIN FIX — Premium Dark Tabs + Yellow Pills + Clean X
   (Skin בלבד: צבעים/צללים/hover/pressed — בלי להזיז גיאומטריה)
========================================================================== */

/* 0) X + Back — בלי מסגרות/outline אף פעם */
#tcs-modal .tcs-close-x,
#tcs-modal .tcs-back-btn{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: rgba(0,0,0,0.06) !important; /* עדין ונקי */
  border-radius: 12px !important;
  transition: background 140ms ease, transform 140ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

#tcs-modal .tcs-close-x:hover,
#tcs-modal .tcs-back-btn:hover{
  background: rgba(0,0,0,0.10) !important;
}

#tcs-modal .tcs-close-x:active,
#tcs-modal .tcs-back-btn:active{
  transform: scale(0.96) !important;
}

/* ביטול outline גם במצבי focus (במיוחד בדסקטופ) */
#tcs-modal .tcs-close-x:focus,
#tcs-modal .tcs-close-x:focus-visible,
#tcs-modal .tcs-back-btn:focus,
#tcs-modal .tcs-back-btn:focus-visible{
  outline: 0 !important;
  box-shadow: none !important;
}


/* 1) טאבים ציבוריים — כהים, פרימיום, עם נגיעת זכוכית */
#tcs-modal .tcs-rooms-wrap .tcs-tab-room{
  box-sizing: border-box !important;

  background: #2B2B2B !important;          /* Charcoal Bubble */
  color: #FFFFFF !important;

  border-radius: 999px !important;

  /* מסגרת סגולה עדינה (Trigger Purple) */
  border: 1px solid rgba(121,0,255,0.45) !important;

  /* זכוכית+צל */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 10px 28px rgba(0,0,0,0.18) !important;

  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

/* Hover/Pressed — מתבהר קצת */
#tcs-modal .tcs-rooms-wrap .tcs-tab-room:hover{
  background: #323232 !important;          /* Hover */
  border-color: rgba(121,0,255,0.60) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 14px 34px rgba(0,0,0,0.22),
    0 0 0 3px rgba(121,0,255,0.22) !important; /* Purple glow עדין */
}

#tcs-modal .tcs-rooms-wrap .tcs-tab-room:active{
  transform: scale(0.988) !important;
  background: #353535 !important;          /* Hover lighter */
}

/* Active tab (אם קיים class אצלך) */
#tcs-modal .tcs-rooms-wrap .tcs-tab-room.active,
#tcs-modal .tcs-rooms-wrap .tcs-tab-room.is-active,
#tcs-modal .tcs-rooms-wrap .tcs-tab-room[aria-selected="true"]{
  border-color: #7900FF !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 14px 34px rgba(0,0,0,0.22),
    0 0 0 3px rgba(121,0,255,0.28) !important;
}


/* 2) מובייל בלבד — כדי לא לשבור דסקטופ:
      טאבים בעמודה + gap + רוחב מלא */
@media (max-width: 520px){
  #tcs-modal:not(.tcs-chat-mode) .tcs-rooms-wrap{
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;                  /* כוון: 10/12/14 */
  }

  #tcs-modal:not(.tcs-chat-mode) .tcs-rooms-wrap > *{
    margin: 0 !important;                  /* שלא יילחם */
  }

  #tcs-modal:not(.tcs-chat-mode) .tcs-rooms-wrap .tcs-tab-room{
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* 3) Privatebar / התראות — כרטיס זכוכית פרימיום */
#tcs-modal .tcs-privatebar{
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 46px rgba(0,0,0,0.14) !important;
  overflow: hidden !important;
}


/* 4) כפתורים צהובים בתוך ההתראות
      חשוב:
      - לא לדרוס את הטאבים הפרטיים (button.tcs-ptab) שיושבים באותו privatebar
      - אחרת מצב is-active של הטאב לא ייראה בכלל (הכל נשאר צהוב תמיד) */
#tcs-modal .tcs-privatebar button:not(.tcs-ptab),
#tcs-modal .tcs-privatebar a:not(.tcs-ptab),
#tcs-modal .tcs-privatebar [role="button"]:not(.tcs-ptab){
  background: #FFD800 !important;
  color: #141414 !important;
  border: none !important;
  border-radius: 999px !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 10px 24px rgba(0,0,0,0.12) !important;

  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease !important;
}

/* Hover */
#tcs-modal .tcs-privatebar button:not(.tcs-ptab):hover,
#tcs-modal .tcs-privatebar a:not(.tcs-ptab):hover,
#tcs-modal .tcs-privatebar [role="button"]:not(.tcs-ptab):hover{
  background: #FFE033 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    0 12px 28px rgba(0,0,0,0.14),
    0 0 0 3px rgba(255,216,0,0.14) !important; /* Yellow wash */
}

/* Active */
#tcs-modal .tcs-privatebar button:not(.tcs-ptab):active,
#tcs-modal .tcs-privatebar a:not(.tcs-ptab):active,
#tcs-modal .tcs-privatebar [role="button"]:not(.tcs-ptab):active{
  transform: scale(0.985) !important;
}

/* =========================================================
   STEP 1 — HARD RESET FOR CLOSE (X) BUTTON
   מטרה: לבטל לחלוטין "מסגרת מדומה"
   (רקע + radius + hover/focus/active)
========================================================= */

#tcs-modal .tcs-close-x,
#tcs-modal .tcs-close-x:hover,
#tcs-modal .tcs-close-x:focus,
#tcs-modal .tcs-close-x:focus-visible,
#tcs-modal .tcs-close-x:active{

  /* ביטול מראה כפתור */
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  /* ביטול עיגול */
  border-radius: 0 !important;

  /* ביטול אנימציות שגורמות "הילה" */
  transition: none !important;

  /* ביטול אפקטי מערכת */
  appearance: none !important;
  -webkit-appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ביטוח נוסף: אם יש pseudo-elements */
#tcs-modal .tcs-close-x::before,
#tcs-modal .tcs-close-x::after{
  content: none !important;
  display: none !important;
}






/* =========================================================
   STEP 4 — YELLOW CONTROLS (Premium / Minimal Glow) — FINAL
   מאוחד + נקי, בלי כפילויות, Last-Wins מובנה.
   כולל:
   - פילטרים: .tcs-notif-filter (לא נקראו / מחוברים / כולם)
   - כפתור "התראות": .tcs-tab-friends / .tcs-friends-btn--in-privatebar
   - Hover iOS lift + glow מינימלי
   - Press (glass + inset)
   - Active קבוע (is-active / tcs-notif-filter-is-active / aria-selected / aria-pressed)
   - Mobile: Active מרגיש "שקוע" יותר (כי אין hover)
========================================================= */

:root{
  --tcs-yellow: #FFD800;
  --tcs-yellow-hover: #FFE033;

  /* ✅ הגוון הפעיל שבחרנו (מ־STEP 4.5) */
  --tcs-yellow-active: #FFEA57;

  --tcs-ink: #141414;
  --tcs-radius-pill: 999px;

  /* iOS lift shadow (עדין) */
  --tcs-lift-1: 0 14px 34px rgba(0,0,0,0.12);
  --tcs-lift-2: 0 4px 12px rgba(0,0,0,0.08);
  --tcs-lift-3: 0 1px 2px rgba(0,0,0,0.06);

  /* glow הכי חלש שיש */
  --tcs-glow-min: 0 0 10px rgba(255,216,0,0.06);
}

/* =========================================================
   A) פילטרים צהובים (לא נקראו / מחוברים / כולם)
========================================================= */

#tcs-modal .tcs-notif-filters .tcs-notif-filter{
  background: var(--tcs-yellow) !important;
  color: var(--tcs-ink) !important;

  border: 1px solid rgba(0,0,0,0.08) !important;
  border-radius: var(--tcs-radius-pill) !important;

  padding: 10px 16px !important;
  font-weight: 800 !important;

  box-shadow: 0 8px 18px rgba(0,0,0,0.10) !important;

  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, filter 140ms ease !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Hover (דסקטופ): lift נקי + glow מינימלי */
@media (hover: hover){
  #tcs-modal .tcs-notif-filters .tcs-notif-filter:hover{
    background: var(--tcs-yellow-hover) !important;
    box-shadow: var(--tcs-lift-1), var(--tcs-lift-2), var(--tcs-lift-3), var(--tcs-glow-min) !important;
    transform: translateY(-1px) !important;
  }
}

/* Press רגעי: glass + inset */
#tcs-modal .tcs-notif-filters .tcs-notif-filter:active{
  background: rgba(255,216,0,0.90) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.16),
    0 8px 18px rgba(0,0,0,0.10),
    0 0 8px rgba(255,216,0,0.05) !important;

  transform: translateY(1px) scale(0.985) !important;
}

/* =========================================================
   ✅ Active קבוע — (ה־STEP 4.5 שלנו בתוך המאוחד)
   תופס את כל המצבים האפשריים
========================================================= */

#tcs-modal .tcs-notif-filters .tcs-notif-filter.is-active,
#tcs-modal .tcs-notif-filters .tcs-notif-filter.tcs-notif-filter-is-active,
#tcs-modal .tcs-notif-filters .tcs-notif-filter[aria-selected="true"],
#tcs-modal .tcs-notif-filters .tcs-notif-filter[aria-pressed="true"]{
  background-color: var(--tcs-yellow-active) !important;
  background: var(--tcs-yellow-active) !important;
  background-image: none !important;

  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.18),
    0 8px 18px rgba(0,0,0,0.10),
    0 0 8px rgba(255,216,0,0.05) !important;

  transform: translateY(0px) !important;
}

/* Focus נקי */
#tcs-modal .tcs-notif-filters .tcs-notif-filter:focus,
#tcs-modal .tcs-notif-filters .tcs-notif-filter:focus-visible{
  outline: 0 !important;
  box-shadow: var(--tcs-lift-2), var(--tcs-lift-3), var(--tcs-glow-min) !important;
}

/* =========================================================
   B) כפתור "התראות" (צהוב)
========================================================= */

#tcs-modal button.tcs-tab-friends,
#tcs-modal button.tcs-friends-btn--in-privatebar{
  background: var(--tcs-yellow) !important;
  color: var(--tcs-ink) !important;

  border: 1px solid rgba(0,0,0,0.10) !important;
  border-radius: 16px !important;

  padding: 10px 16px !important;
  font-weight: 900 !important;

  box-shadow: 0 10px 22px rgba(0,0,0,0.12) !important;

  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

@media (hover: hover){
  #tcs-modal button.tcs-tab-friends:hover,
  #tcs-modal button.tcs-friends-btn--in-privatebar:hover{
    background: var(--tcs-yellow-hover) !important;
    box-shadow: var(--tcs-lift-1), var(--tcs-lift-2), var(--tcs-lift-3), var(--tcs-glow-min) !important;
    transform: translateY(-1px) !important;
  }
}

#tcs-modal button.tcs-tab-friends:active,
#tcs-modal button.tcs-friends-btn--in-privatebar:active{
  background: rgba(255,216,0,0.90) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.18),
    0 8px 18px rgba(0,0,0,0.10),
    0 0 8px rgba(255,216,0,0.05) !important;

  transform: translateY(1px) scale(0.985) !important;
}

/* ✅ Active קבוע לכפתור "התראות" — כמו STEP 4.5 */
#tcs-modal button.tcs-tab-friends.is-active,
#tcs-modal button.tcs-friends-btn--in-privatebar.is-active,
#tcs-modal button.tcs-tab-friends[aria-selected="true"],
#tcs-modal button.tcs-friends-btn--in-privatebar[aria-selected="true"],
#tcs-modal button.tcs-tab-friends[aria-pressed="true"],
#tcs-modal button.tcs-friends-btn--in-privatebar[aria-pressed="true"]{
  background-color: var(--tcs-yellow-active) !important;
  background: var(--tcs-yellow-active) !important;
  background-image: none !important;

  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.18),
    0 10px 22px rgba(0,0,0,0.12),
    0 0 8px rgba(255,216,0,0.05) !important;

  transform: translateY(0px) !important;
}

/* =========================================================
   MOBILE polish — במובייל “לחוץ קבוע” צריך להרגיש יותר שקוע
========================================================= */

@media (max-width: 520px){

  /* press חזק יותר במובייל */
  #tcs-modal .tcs-notif-filters .tcs-notif-filter:active{
    transform: translateY(2px) scale(0.975) !important;
    box-shadow:
      inset 0 3px 10px rgba(0,0,0,0.18),
      0 8px 16px rgba(0,0,0,0.10),
      0 0 8px rgba(255,216,0,0.06) !important;
  }

  /* active קבוע במובייל: “שוקע” יותר */
  #tcs-modal .tcs-notif-filters .tcs-notif-filter.is-active,
  #tcs-modal .tcs-notif-filters .tcs-notif-filter.tcs-notif-filter-is-active,
  #tcs-modal .tcs-notif-filters .tcs-notif-filter[aria-selected="true"],
  #tcs-modal .tcs-notif-filters .tcs-notif-filter[aria-pressed="true"]{
    box-shadow:
      inset 0 3px 10px rgba(0,0,0,0.22),
      inset 0 1px 0 rgba(255,255,255,0.35),
      0 6px 14px rgba(0,0,0,0.10),
      0 0 8px rgba(255,216,0,0.05) !important;

    border-color: rgba(0,0,0,0.16) !important;
    transform: translateY(1px) scale(0.99) !important;
  }
  /* SAFETY: Active תמיד מנצח Hover/Press */
#tcs-modal .tcs-notif-filters .tcs-notif-filter.is-active:hover,
#tcs-modal .tcs-notif-filters .tcs-notif-filter.is-active:active{
  background: var(--tcs-yellow-active) !important;
}

  }









/* =========================================================
   STEP 5 — PUBLIC TABS "PRESS + BRIGHTEN" (Single Source of Truth)
   מטרה:
   1) שקיעה פנימית אמיתית (Pressed/Selected) — כמו שיש לך
   2) הבהרה מורגשת בטאב לחוץ (Selected) — בלי לשבור את העיצוב הבסיסי
   שיטה:
   - ::after = שכבת "שקיעה" פנימית
   - ::before = שכבת "הבהרה" (לבן עדין) שממש משנה את הגוון בפועל
   להדביק בסוף הקובץ (Last-Wins)
========================================================= */

/* 0) בסיס: לא משנים עיצוב, רק מוסיפים שכבות */
#tcs-modal .tcs-rooms-wrap .tcs-tab-room{
  position: relative !important;
  overflow: hidden !important;         /* חובה כדי שהשכבות יתעגלו */
  transform: translateZ(0) !important;  /* רינדור נקי */
  -webkit-tap-highlight-color: transparent !important;

  /* רק אנימציה קטנה */
  transition: transform 140ms ease, opacity 140ms ease !important;
}

/* כדי שהטקסט תמיד יהיה מעל השכבות */
#tcs-modal .tcs-rooms-wrap .tcs-tab-room > *{
  position: relative !important;
  z-index: 2 !important;
}

/* ---------------------------------------------------------
   A) שכבת הבהרה (Brighten Layer) — זו מה ש"צובע" בפועל
   OFF כברירת מחדל
--------------------------------------------------------- */
#tcs-modal .tcs-rooms-wrap .tcs-tab-room::before{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;

  /* שכבת הבהרה: לבן עדין. זה משנה את הגוון בפועל */
  background: rgba(255,255,255,0.00) !important;

  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: opacity 140ms ease, background 140ms ease !important;
}

/* ---------------------------------------------------------
   B) שכבת "שקיעה" פנימית (Press Layer)
--------------------------------------------------------- */
#tcs-modal .tcs-rooms-wrap .tcs-tab-room::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;

  box-shadow:
    inset 0 10px 22px rgba(0,0,0,0.65),
    inset 0 2px 0 rgba(255,255,255,0.10),
    inset 0 0 0 1px rgba(255,255,255,0.06) !important;

  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: opacity 140ms ease !important;
}

/* ---------------------------------------------------------
   HOVER (דסקטופ): קצת הרמה + הבהרה קלה
--------------------------------------------------------- */
@media (hover: hover){
  #tcs-modal .tcs-rooms-wrap .tcs-tab-room:hover{
    transform: translateY(-1px) !important;
  }
  #tcs-modal .tcs-rooms-wrap .tcs-tab-room:hover::before{
    opacity: 1 !important;
    background: rgba(255,255,255,0.06) !important; /* כוון: 0.04–0.10 */
  }
}

/* ---------------------------------------------------------
   PRESS (לחיצה רגעית): שקיעה + הבהרה חזקה יותר
--------------------------------------------------------- */
#tcs-modal .tcs-rooms-wrap .tcs-tab-room:active{
  transform: translateY(2px) scale(0.985) !important;
}
#tcs-modal .tcs-rooms-wrap .tcs-tab-room:active::after{
  opacity: 1 !important;
}
#tcs-modal .tcs-rooms-wrap .tcs-tab-room:active::before{
  opacity: 1 !important;
  background: rgba(255,255,255,0.10) !important; /* כוון: 0.08–0.14 */
}

/* ---------------------------------------------------------
   SELECTED / ACTIVE (לחוץ קבוע): שקיעה + הבהרה קבועה ומורגשת
--------------------------------------------------------- */
#tcs-modal .tcs-rooms-wrap .tcs-tab-room[aria-selected="true"],
#tcs-modal .tcs-rooms-wrap .tcs-tab-room.is-active,
#tcs-modal .tcs-rooms-wrap .tcs-tab-room.active,
#tcs-modal .tcs-rooms-wrap .tcs-tab-room.current{
  transform: translateY(2px) !important;
}

#tcs-modal .tcs-rooms-wrap .tcs-tab-room[aria-selected="true"]::after,
#tcs-modal .tcs-rooms-wrap .tcs-tab-room.is-active::after,
#tcs-modal .tcs-rooms-wrap .tcs-tab-room.active::after,
#tcs-modal .tcs-rooms-wrap .tcs-tab-room.current::after{
  opacity: 1 !important;
}

#tcs-modal .tcs-rooms-wrap .tcs-tab-room[aria-selected="true"]::before,
#tcs-modal .tcs-rooms-wrap .tcs-tab-room.is-active::before,
#tcs-modal .tcs-rooms-wrap .tcs-tab-room.active::before,
#tcs-modal .tcs-rooms-wrap .tcs-tab-room.current::before{
  opacity: 1 !important;

  /* זה ה"גוון בהיר יותר" — אותו טאב, פשוט מואר */
  background: rgba(255,255,255,0.17) !important; /* כוון: 0.06–0.12 */
}

/* ---------------------------------------------------------
   בלי טבעת פוקוס מכוערת
--------------------------------------------------------- */
#tcs-modal .tcs-rooms-wrap .tcs-tab-room:focus,
#tcs-modal .tcs-rooms-wrap .tcs-tab-room:focus-visible{
  outline: 0 !important;
  box-shadow: none !important;
}


/* ======================= v0.4.8.0 UPDATED (LAST WINS) ======================= */

/* איחוד מלא של נקודות חדרים + בועה */

/* =========================================================
   TCS — Room Badge DOT (SPAN) — FINAL (LAST WINS)
   לא משתמש ב-::after כדי לא להתנגש עם STEP 5
   ========================================================= */

#tcs-modal .tcs-rooms-wrap button.tcs-tab-room{
  position: relative !important;
  /* לא נוגעים ב-overflow כאן כדי לא לדרוס STEP 5 */
}

/* =========================================================
   TCS — Bubble unread dot — FINAL
   ========================================================= */
.tcs-bubble,
#tcs-bubble{
  position: relative; /* כדי שהנקודה תיתפס במקום */
}
/*********/

/* =========================================================
   🎨 עיצוב מונה/נקודה על יוזר ברשימת חברים
   ========================================================= */
.tcs-badge{
  display:none;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  font-size:12px;
  line-height:18px;
  font-weight:700;
  background:#FF3B30;
  color:#fff;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 4px rgba(0,0,0,0.25);
}
.tcs-badge.is-on{
  display:inline-flex;
}

/* =========================================================
   🎨 עיצוב badge של unread count על שורת יוזר (חלון התראות)
   ========================================================= */
/**
 * מה זה עושה:
 * - מגדיר את העיצוב של badge שמציג מספר הודעות שלא נקראו על שורת יוזר
 * - Option 2: תומך בשני סלקטורים (class וגם data attribute) לאחדות מלאה
 *
 * מתי זה רץ:
 * - מיושם אוטומטית על כל אלמנט עם class .tcs-user-unread-badge או .tcs-badge[data-tcs="user-unread"]
 *
 * על מה זה משפיע:
 * - כל badge של unread count ברשימת התראות/חברים מקבל את העיצוב הזה
 * - מבטיח שכל badge של unread ליוזר מסומן באופן אחיד (Option 2)
 */
.tcs-user-unread-badge,
.tcs-badge[data-tcs="user-unread"] {
  background: #FF3B30;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  margin-inline-start: 8px;
  font-weight: bold;
  box-shadow: 0 0 0 2px rgba(255,59,48,0.15);
}