/*
 * URUK Pro Visual Layer — v8.3
 * طبقة بصرية مستقلة: لا تغيّر المعرفات أو منطق البيانات، وتدعم الثيمات الحالية.
 * مستوحاة من أنماط chat UI المفتوحة المصدر وأنظمة التصميم القابلة لإعادة الاستخدام.
 */

:root {
  --uruk-pro-max: 1180px;
  --uruk-pro-radius: 20px;
  --uruk-pro-radius-sm: 14px;
  --uruk-pro-line: color-mix(in srgb, var(--divider) 72%, transparent);
  --uruk-pro-soft: color-mix(in srgb, var(--surface) 78%, transparent);
  --uruk-pro-glow: 0 18px 48px rgba(24, 75, 170, .12);
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 28rem),
    radial-gradient(circle at 12% 90%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 24rem),
    var(--bg);
}

/* ── الصفحة الرئيسية: مساحة واضحة على الكمبيوتر وراحة أكبر على الهاتف ── */
#main-screen {
  background: transparent;
  isolation: isolate;
}
#main-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background-image: linear-gradient(color-mix(in srgb, var(--text) 3%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--text) 3%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 68%);
}

#main-screen .main-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--header) 88%, transparent) !important;
  border-bottom: 1px solid var(--uruk-pro-line);
  box-shadow: 0 10px 32px color-mix(in srgb, var(--bg) 26%, transparent);
  backdrop-filter: blur(22px) saturate(1.35);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
}
#main-screen .main-header-top,
#main-screen .tabs,
#main-screen .tab-pages {
  width: min(100%, var(--uruk-pro-max));
  margin-inline: auto;
}
#main-screen .main-header-top {
  min-height: 68px;
  padding: 10px 22px 8px;
}
#main-screen .app-title {
  font-size: clamp(23px, 2.1vw, 30px);
  letter-spacing: -.8px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#main-screen .header-actions { gap: 4px; }
#main-screen .header-actions .icon-btn,
#main-screen .main-header-top > .icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 14px !important;
  color: var(--header-text);
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  border: 1px solid color-mix(in srgb, var(--divider) 70%, transparent);
}
#main-screen .header-actions .icon-btn:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--divider));
}
#main-screen .tabs {
  position: relative;
  padding-inline: 16px;
  gap: 6px;
}
#main-screen .tab {
  min-height: 46px;
  padding-inline: 14px;
  border-radius: 13px 13px 0 0;
  color: color-mix(in srgb, var(--header-text) 68%, transparent);
  font-weight: 700;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
#main-screen .tab:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
#main-screen .tab.active {
  color: var(--header-text);
  text-shadow: none;
}
#main-screen .tab-indicator {
  height: 3px;
  bottom: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 48%, transparent);
}

#main-screen .tab-pages { padding: 12px 16px 92px; }
#main-screen .tab-page { min-height: calc(100dvh - 150px); }
#main-screen .chat-list,
#main-screen #status-list,
#main-screen #my-channels-list,
#main-screen #discover-channels-list,
#main-screen #calls-list { max-width: 920px; margin-inline: auto; }

/* ── صفوف المحادثات: بطاقات خفيفة مع hierarchy أوضح ── */
#main-screen .chat-row,
#main-screen .channel-row,
#main-screen .call-row,
#main-screen .status-my-row,
#main-screen #status-list > *,
#main-screen #my-channels-list > *,
#main-screen #discover-channels-list > *,
#main-screen #calls-list > * {
  border: 1px solid var(--uruk-pro-line);
  border-radius: var(--uruk-pro-radius-sm);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 5px 18px color-mix(in srgb, var(--bg) 12%, transparent);
}
#main-screen .chat-row,
#main-screen .channel-row,
#main-screen .call-row {
  min-height: 74px;
  margin: 6px 0;
  padding: 11px 14px;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
#main-screen .chat-row::before,
#main-screen .channel-row::before { display: none; }
#main-screen .chat-row:hover,
#main-screen .channel-row:hover,
#main-screen .call-row:hover,
#main-screen .status-my-row:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--divider));
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  box-shadow: var(--uruk-pro-glow);
}
#main-screen .chat-row:active,
#main-screen .channel-row:active,
#main-screen .call-row:active { transform: scale(.992); }
#main-screen .chat-avatar,
#main-screen .status-avatar-wrap,
#main-screen .channel-avatar,
#main-screen .call-avatar-wrap {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
#main-screen .chat-name { font-weight: 800; letter-spacing: -.15px; }
#main-screen .chat-last { opacity: .82; }
#main-screen .unread-badge,
#main-screen .chat-unread,
#main-screen .unread { box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); }

#main-screen .status-my-row {
  max-width: 920px;
  margin: 4px auto 18px;
  padding: 12px 16px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#main-screen .status-section-label,
#main-screen .section-label {
  max-width: 920px;
  margin-inline: auto;
  padding-inline: 4px;
  letter-spacing: .2px;
}
#main-screen .status-section-label::before,
#main-screen .section-label::before { display: none; }

/* ── حقول البحث ── */
#main-screen .search-bar,
#main-screen .search-inline {
  max-width: 920px;
  margin: 8px auto;
}
#main-screen .search-inline input,
#main-screen .search-bar input {
  min-height: 44px;
  border-radius: 14px !important;
  border: 1px solid var(--uruk-pro-line) !important;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent);
}
#main-screen .search-inline input:focus,
#main-screen .search-bar input:focus {
  border-color: color-mix(in srgb, var(--accent) 54%, var(--divider)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

/* ── Empty state كحالة منتج، لا مساحة فارغة فقط ── */
#main-screen .empty-state {
  max-width: 510px;
  margin: 50px auto;
  padding: 38px 26px;
  border: 1px dashed color-mix(in srgb, var(--accent) 26%, var(--divider));
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
#main-screen .empty-state .empty-illust { margin-bottom: 8px; }
#main-screen .empty-state span { line-height: 1.7; }

/* ── زر الإجراء العائم ── */
#main-screen .fab {
  left: max(20px, calc((100vw - var(--uruk-pro-max)) / 2 + 20px));
  bottom: max(22px, calc(env(safe-area-inset-bottom) + 22px));
  width: 58px;
  height: 58px;
  border-radius: 18px;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.28);
}
#main-screen .fab:hover { transform: translateY(-3px) scale(1.04); }

/* ── شاشة الدردشة ── */
#chat-screen {
  background: var(--chat-bg);
  isolation: isolate;
}
#chat-screen .chat-header {
  position: sticky;
  top: 0;
  z-index: 10;
  min-height: 68px;
  padding: 10px max(12px, calc((100vw - var(--uruk-pro-max)) / 2 + 14px));
  background: color-mix(in srgb, var(--header) 88%, transparent) !important;
  border-bottom: 1px solid var(--uruk-pro-line);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--bg) 16%, transparent);
  backdrop-filter: blur(20px) saturate(1.35);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
}
#chat-screen .header-avatar {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
#chat-screen .chat-header-info { padding-inline: 3px; }
#chat-screen .chat-header-name { font-size: 16.5px; font-weight: 800; }
#chat-screen .chat-header-status { font-size: 12px; }
#chat-screen .chat-header > .icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 13px !important;
}
#chat-screen .messages-wrap {
  background-color: var(--chat-bg);
  padding: 18px max(12px, calc((100vw - var(--uruk-pro-max)) / 2 + 18px));
}
#chat-screen .messages {
  width: min(100%, 920px);
  margin-inline: auto;
}
#chat-screen .msg {
  max-width: min(74%, 620px);
  padding: 9px 13px 9px;
  border-radius: 17px;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--bg) 11%, transparent);
}
#chat-screen .msg.me {
  background: linear-gradient(145deg, color-mix(in srgb, var(--bubble-me) 94%, #fff), var(--bubble-me));
}
#chat-screen .msg.other {
  background: color-mix(in srgb, var(--bubble-other) 92%, var(--surface));
  border-color: color-mix(in srgb, var(--divider) 78%, transparent);
}
#chat-screen .date-divider span {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--bg) 10%, transparent);
}
#chat-screen .reply-bar {
  width: min(100% - 24px, 920px);
  margin-inline: auto;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--uruk-pro-line);
  border-right: 3px solid var(--accent);
  box-shadow: 0 -4px 18px color-mix(in srgb, var(--bg) 10%, transparent);
}
#chat-screen .composer {
  position: relative;
  width: min(100%, 960px);
  margin-inline: auto;
  padding: 11px 14px max(12px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--composer-bg) 86%, transparent);
  border-top: 1px solid var(--uruk-pro-line);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
#chat-screen .composer-field {
  min-height: 48px;
  border-radius: 17px;
  background: color-mix(in srgb, var(--input-bg) 86%, transparent);
  border-color: var(--uruk-pro-line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
#chat-screen #msg-input { font-size: 15.5px; }
#chat-screen .send-fab {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.26);
}

/* ── الشاشات الثانوية والإعدادات ── */
.screen.slide > .simple-header,
.screen.slide > .green-header.simple-header {
  position: sticky;
  top: 0;
  z-index: 12;
  min-height: 64px;
  background: color-mix(in srgb, var(--header) 90%, transparent) !important;
  border-bottom: 1px solid var(--uruk-pro-line);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--bg) 13%, transparent);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
.screen.slide > .settings-list,
.screen.slide > .policy-body,
.screen.slide > .twofa-body,
.screen.slide > .setup-body,
.screen.slide > .search-inline,
.screen.slide > .chat-list {
  width: min(100%, 860px);
  margin-inline: auto;
}
.screen.slide > .settings-list { padding: 16px 18px 52px; }
.screen.slide .settings-profile-row {
  min-height: 82px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--divider));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), color-mix(in srgb, var(--accent-2) 6%, var(--surface)));
  box-shadow: var(--uruk-pro-glow);
}
.screen.slide .setting-row {
  min-height: 64px;
  border-bottom-color: color-mix(in srgb, var(--divider) 72%, transparent) !important;
  border-radius: 14px;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.screen.slide .setting-row:hover {
  transform: translateX(-2px);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)) !important;
}
.screen.slide .section-label { padding-inline: 4px; margin-top: 20px; }
.screen.slide .setting-icon {
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 17%, transparent);
}
.screen.slide .primary-btn,
.screen.slide .email-btn {
  min-height: 48px;
  border-radius: 15px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 19%, transparent), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* ── القوائم المنسدلة والـ sheets ── */
.dropdown:not(.hidden),
.sheet:not(.hidden) {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--divider)) !important;
  box-shadow: 0 22px 58px color-mix(in srgb, var(--bg) 32%, transparent), 0 0 0 1px rgba(255,255,255,.04) !important;
}
.dropdown button,
.sheet > button { min-height: 48px; }

/* ── التوافق مع الحركة وتقليلها ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 680px) {
  #main-screen .main-header-top { padding-inline: 14px; }
  #main-screen .tabs { padding-inline: 8px; overflow-x: auto; scrollbar-width: none; }
  #main-screen .tabs::-webkit-scrollbar { display: none; }
  #main-screen .tab { flex: 0 0 auto; min-width: 86px; padding-inline: 10px; font-size: 12.5px; }
  #main-screen .tab-pages { padding-inline: 10px; }
  #main-screen .chat-row,
  #main-screen .channel-row,
  #main-screen .call-row { margin-inline: 0; }
  #chat-screen .chat-header { padding-inline: 8px; }
  #chat-screen .messages-wrap { padding-inline: 10px; }
  #chat-screen .msg { max-width: 86%; }
  .screen.slide > .settings-list { padding-inline: 12px; }
}

@media (min-width: 900px) {
  #main-screen .tab-pages { padding-top: 18px; }
  #main-screen .chat-list,
  #main-screen #status-list,
  #main-screen #my-channels-list,
  #main-screen #discover-channels-list,
  #main-screen #calls-list { padding-inline: 8px; }
  #chat-screen .messages-wrap { padding-bottom: 24px; }
  #chat-screen .composer { border-radius: 22px 22px 0 0; }
}

/* ── Desktop shell: المشكلة هنا بنيوية، لذلك نثبت اللوحتين قبل تنسيق التفاصيل ── */
@media (min-width: 900px) {
  :root { --sidebar-w: 420px; }

  body {
    background: var(--bg-primary);
  }
  body.dark {
    background: var(--bg-primary);
  }
  body::before {
    right: var(--sidebar-w);
    background:
      radial-gradient(circle at 18% 18%, rgba(76, 141, 246, .13), transparent 34rem),
      radial-gradient(circle at 78% 86%, rgba(0, 207, 232, .07), transparent 28rem),
      linear-gradient(135deg, #0f1d2d 0%, #0b1523 58%, #09131f 100%);
    border-top: 0;
    border-right: 1px solid rgba(255,255,255,.06);
    border-image: none;
  }

  #main-screen {
    width: var(--sidebar-w);
    right: 0;
    left: auto;
    border-left: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    box-shadow: var(--shadow-md);
  }
  #main-screen .main-header {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-subtle);
  }
  #main-screen .main-header-top,
  #main-screen .tabs,
  #main-screen .tab-pages {
    width: 100%;
  }
  #main-screen .main-header-top {
    min-height: 76px;
    padding: 16px 20px 10px;
  }
  #main-screen .app-title {
    font-size: 25px;
    letter-spacing: -.5px;
  }
  #main-screen .tabs {
    padding: 0 14px;
    gap: 3px;
  }
  #main-screen .tab {
    min-width: 0;
    flex: 1 1 0;
    min-height: 44px;
    padding: 0 7px;
    font-size: 12.5px;
    white-space: nowrap;
  }
  #main-screen .tab-pages {
    padding: 10px 13px 92px;
  }
  #main-screen .tab-page {
    min-height: calc(100dvh - 142px);
  }
  #main-screen .ux-folders {
    position: static;
    padding: 12px 14px 10px;
    gap: 6px;
    background: transparent;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }
  #main-screen .ux-folder {
    padding: 7px 10px;
    font-size: 12px;
    border-color: rgba(255,255,255,.1);
  }
  #main-screen .ux-folder.active {
    background: linear-gradient(135deg, #4c8df6, #2e6bff);
  }
  #main-screen .chat-list,
  #main-screen #status-list,
  #main-screen #my-channels-list,
  #main-screen #discover-channels-list,
  #main-screen #calls-list,
  #main-screen .status-my-row,
  #main-screen .section-label,
  #main-screen .status-section-label,
  #main-screen .search-inline {
    max-width: none;
  }
  #main-screen .chat-row,
  #main-screen .channel-row,
  #main-screen .call-row {
    min-height: 72px;
    margin: 5px 0;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--surface-default);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-sm);
  }
  #main-screen .chat-row:hover,
  #main-screen .channel-row:hover,
  #main-screen .call-row:hover {
    background: var(--surface-hover);
    border-color: var(--border-default);
    box-shadow: var(--shadow-md);
  }
  #main-screen .status-my-row {
    margin: 8px 0 14px;
    padding: 12px;
    background: var(--surface-default);
    border-color: var(--border-subtle);
  }
  #main-screen .empty-state {
    margin: 28px 0;
    padding: 30px 18px;
    background: var(--surface-default);
    border-color: var(--border-default);
  }
  #main-screen .fab {
    right: 22px;
    left: auto;
    bottom: 24px;
  }

  #chat-screen,
  #channel-screen {
    right: var(--sidebar-w);
    left: 0;
    width: auto;
    background: var(--bg-primary);
  }
  #chat-screen .chat-header,
  #channel-screen .chat-header {
    min-height: 72px;
    padding: 12px 24px;
    background: var(--bg-secondary);
    border-bottom-color: var(--border-subtle);
  }
  #chat-screen .messages-wrap,
  #channel-screen .messages-wrap {
    padding: 22px 28px 16px;
    background: var(--bg-primary);
    background-image: none;
  }
  #chat-screen .messages,
  #channel-screen .messages {
    width: min(100%, 820px);
  }
  #chat-screen .msg,
  #channel-screen .msg {
    max-width: min(66%, 560px);
    box-shadow: 0 5px 18px rgba(0,0,0,.16);
  }
  #chat-screen .composer,
  #channel-screen .composer {
    width: min(100%, 860px);
    margin: 0 auto;
    padding: 12px 20px 18px;
    background: transparent;
    border-top: 0;
    backdrop-filter: none;
  }
  #chat-screen .composer-field,
  #channel-screen .composer-field {
    background: var(--surface-default);
    border-color: var(--border-default);
  }

  #desktop-welcome {
    position: fixed;
    inset: 0 var(--sidebar-w) 0 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: transparent;
  }
  #desktop-welcome .desktop-welcome-card {
    width: min(430px, calc(100% - 48px));
    padding: 36px 34px 32px;
    text-align: center;
    border: 1px solid rgba(111,180,255,.16);
    border-radius: 26px;
    background: linear-gradient(155deg, rgba(25,43,62,.82), rgba(13,27,42,.74));
    box-shadow: 0 24px 70px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(18px);
  }
  #desktop-welcome .desktop-welcome-mark {
    width: 68px;
    height: 68px;
    margin: 0 auto 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(76,141,246,.28), rgba(0,207,232,.12));
    box-shadow: 0 14px 30px rgba(46,107,255,.18), inset 0 1px 0 rgba(255,255,255,.2);
    padding: 14px;
  }
  #desktop-welcome .desktop-welcome-mark span {
    display: block;
    height: 5px;
    border-radius: 5px;
    background: linear-gradient(90deg, #70b6ff, #2e6bff);
  }
  #desktop-welcome .desktop-welcome-mark span:nth-child(1) { width: 20px; }
  #desktop-welcome .desktop-welcome-mark span:nth-child(2) { width: 30px; }
  #desktop-welcome .desktop-welcome-mark span:nth-child(3) { width: 40px; }
  #desktop-welcome .desktop-welcome-brand {
    color: #76b8ff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.4px;
    margin-bottom: 12px;
  }
  #desktop-welcome h2 {
    color: #f4f8ff;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.35px;
  }
  #desktop-welcome p {
    max-width: 300px;
    margin: 10px auto 18px;
    color: rgba(214,226,240,.68);
    font-size: 14px;
    line-height: 1.8;
  }
  #desktop-welcome .desktop-welcome-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border-radius: 999px;
    color: rgba(197,218,238,.7);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    font-size: 11.5px;
  }
  #desktop-welcome .desktop-welcome-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #35d7b0;
    box-shadow: 0 0 0 4px rgba(53,215,176,.1), 0 0 12px rgba(53,215,176,.5);
  }

  /* الشاشات المنزلقة تبقى ضمن العمود الجانبي، لا تعود إلى نصف الشاشة */
  #newchat-screen, #profile-screen, #settings-screen, #forward-screen, #channel-create-screen,
  #account-security-screen, #sessions-screen, #twofa-screen, #pin-create-screen, #pin-verify-screen,
  #security-log-screen, #trusted-devices-screen {
    right: 0;
    left: auto;
    width: var(--sidebar-w);
    border-left: 1px solid rgba(255,255,255,.09);
  }
}

@media (max-width: 899px) {
  #desktop-welcome { display: none; }
}

/* عند فتح دردشة أو قناة، تختفي بطاقة الترحيب فقط؛ لا نغيّر حالة الشاشات البرمجية. */
body:has(#chat-screen.open) #desktop-welcome,
body:has(#channel-screen.open) #desktop-welcome { display: none; }

@media (min-width: 900px) {
  body::after { display: none; }
}