/* Fonts, CSS variables, reset — index/base.css */
    [dir="rtl"] { font-family: 'Vazirmatn', sans-serif; }
    [dir="rtl"] .auth-box, [dir="rtl"] .modal-box { text-align: right; }
    [dir="rtl"] .profile-dropdown { left: -90px; right: auto; }
    [dir="rtl"] .dm-item-info { text-align: right; }
    [dir="rtl"] .sidebar { left: auto; right: 0; transform: translateX(100%); }
    [dir="rtl"] .sidebar.open { transform: translateX(0); }
    [dir="rtl"] .sidebar-toggle-tab { left: 0; right: auto; border-radius: 0 8px 8px 0; }
    [dir="rtl"] .messages-container { margin-left: 0; }
    [dir="rtl"] .reply-bar { direction: rtl; }
    [dir="rtl"] #msg-input { direction: rtl; }
    #rooms-screen::before,
    #chat-screen::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 9;
      background: rgba(0,0,0,0.10);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.18s ease, visibility 0.18s ease;
    }
    body.menu-backdrop-open #rooms-screen::before,
    body.menu-backdrop-open #chat-screen::before {
      opacity: 1;
      visibility: visible;
    }
    #ep-phone-cc, #ep-phone-num,
    #auth-phone-cc, #auth-phone-num {
      height: 46px;
      padding: 0 10px;
      font-size: 14px;
      font-family: inherit;
      box-sizing: border-box;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--bg-tertiary);
      color: var(--text-primary);
      outline: none;
    }
    /* Always LTR regardless of language */
    #auth-username, #auth-password,
    #ep-phone-cc, #ep-phone-num,
    #auth-phone-cc, #auth-phone-num,
    .room-card,
    .rooms-header,
    .chat-header,
    .input-bar { direction: ltr !important; }
    @font-face {
      font-family: 'Vazirmatn';
      font-style: normal;
      font-weight: 300 700;
      font-display: swap;
      src: url('/assets/fonts/Dxxo8j6PP2D_kU2muijlGMWWMmk.woff2') format('woff2');
      unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
    }
    /* latin-ext */
    @font-face {
      font-family: 'Vazirmatn';
      font-style: normal;
      font-weight: 300 700;
      font-display: swap;
      src: url('/assets/fonts/Dxxo8j6PP2D_kU2muijlE8WWMmk.woff2') format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    /* latin */
    @font-face {
      font-family: 'Vazirmatn';
      font-style: normal;
      font-weight: 300 700;
      font-display: swap;
      src: url('/assets/fonts/Dxxo8j6PP2D_kU2muijlHcWW.woff2') format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    :root {
      --ui-font-family: 'Vazirmatn', sans-serif;
      --bg-primary: #0f0f1a;
      --bg-secondary: #1a1a2e;
      --bg-tertiary: #16213e;
      --accent: #e94560;
      --redental:#ef6f6f;
      --main-header-height: 64px;
      --accent-hover: #ff6b81;
      --text-primary: #eaeaea;
      --text-secondary: #8892b0;
      --text-muted: #555b70;
      --success: #64ffda;
      --border: #2a2a4a;
      --shadow: 0 4px 24px rgba(0,0,0,0.4);
      --pull-refresh-bg: rgba(20, 26, 43, 0.92);
      --pull-refresh-border: rgba(255, 255, 255, 0.08);
      --pull-refresh-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
      --pull-refresh-icon-color: var(--accent);
      --voice-speed-bar-bg: linear-gradient(270deg, rgb(8 15 35 / 12%), rgb(48 68 111 / 96%));
      --voice-speed-bar-border: rgb(66 103 163 / 24%);
      --voice-speed-bar-shadow: 0 2px 10px rgba(2, 6, 23, 0.22);
      --voice-speed-label-color: rgba(226, 232, 240, 0.82);
      --voice-speed-label-icon-color: rgba(34, 211, 238, 0.95);
      --voice-speed-action-border: rgba(148, 163, 184, 0.28);
      --voice-speed-action-bg: rgba(8, 15, 35, 0.62);
      --voice-speed-action-color: rgba(226, 232, 240, 0.92);
      --voice-speed-action-hover-border: rgba(56, 189, 248, 0.66);
      --voice-speed-action-hover-bg: rgba(9, 24, 52, 0.92);
      --voice-speed-btn-border: rgb(15 16 16 / 75%);
      --voice-speed-btn-bg: rgba(15, 23, 42, 0.72);
      --voice-speed-btn-color: rgba(226, 232, 240, 0.88);
      --voice-speed-btn-hover-border: rgba(34, 211, 238, 0.52);
      --voice-speed-btn-hover-bg: rgba(9, 24, 52, 0.92);
      --voice-speed-btn-hover-color: #f8fafc;
      --voice-speed-btn-active-bg: linear-gradient(145deg, #06b6d4, #0ea5e9);
      --voice-speed-btn-active-color: #031b26;
      --voice-speed-btn-active-shadow: 0 2px 8px rgba(14, 165, 233, 0.34);
      --voice-speed-aux-border: rgba(34, 211, 238, 0.78);
      --voice-speed-aux-bg: rgba(7, 56, 95, 0.48);
      --voice-speed-aux-color: #22d3ee;
      --voice-speed-aux-hover-border: rgba(34, 211, 238, 0.95);
      --voice-speed-aux-hover-bg: rgba(7, 56, 95, 0.72);
      --msg-font-size: 13px;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      user-select: none;
      -webkit-user-select: none;
    }

    input,
    textarea,
    select,
    option,
    [contenteditable="true"],
    [contenteditable=""] {
      user-select: text;
      -webkit-user-select: text;
    }

    body {
      font-family: var(--ui-font-family);
      background: var(--bg-primary);
      color: var(--text-primary);
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
    }

    html.split-embed-mode #rooms-screen,
    html.split-embed-mode #rooms-resize-handle,
    html.split-embed-mode .mobile-bottom-nav,
    html.split-embed-mode .sidebar,
    html.split-embed-mode .sidebar-resize-handle,
    html.split-embed-mode .sidebar-toggle-tab,
    html.split-embed-mode .sidebar-backdrop,
    html.split-embed-mode #desktop-split-workspace,
    html.split-embed-mode #dashboard-compose-fab {
      display: none !important;
    }

    html.split-embed-mode #chat-screen {
      display: flex !important;
      position: relative !important;
      flex: 1 1 auto !important;
      width: 100% !important;
      height: 100% !important;
      min-width: 0;
      min-height: 0;
      inset: auto !important;
    }

    html.split-embed-mode #app-shell {
      display: flex !important;
      height: 100vh;
      height: 100dvh;
      overflow: hidden;
      position: fixed;
      inset: 0;
    }

    html.split-embed-mode .chat-header {
      padding-inline-end: 72px !important;
    }

    html.split-embed-mode .chat-body {
      display: flex !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }

    html.split-embed-mode body.ui-ready #chat-empty-state {
      display: none !important;
    }

    html.split-embed-mode body.ui-ready .chat-body {
      display: flex !important;
    }

    html.split-embed-mode .header-back-btn,
    html.split-embed-mode .header-refresh-btn,
    html.split-embed-mode #header-action-split-window,
    html.split-embed-mode #chat-empty-state {
      display: none !important;
    }

    html.split-embed-mode #chat-screen.split-workspace-open #chat-body {
      padding-inline-end: 0 !important;
    }

    #rooms-screen,
    #chat-screen {
      contain: layout paint style;
    }
    /* On desktop, contain: style must be relaxed so !important positioning in the
       media query can override the JS inline display style from transitionMainScreens. */
    @media (min-width: 960px) {
      #rooms-screen, #chat-screen { contain: none; }
    }

    .notif-item,
    .user-item {
      content-visibility: auto;
      contain-intrinsic-size: 56px;
    }

    #notif-panel-list,
    #online-popup-list,
    .cmm-image-grid,
    .cmm-video-grid,
    .cmm-file-list,
    .cmm-audio-list {
      content-visibility: auto;
      contain-intrinsic-size: 320px;
    }

    button,
    input,
    textarea,
    select,
    option {
      font-family: var(--ui-font-family);
    }