/* ========================================================= BSOURIA V19 — VIEWPORT-SAFE MOBILE HEADER PANELS Main menu, language, notifications and profile are portaled to on phones, so they always stay inside the viewport. ========================================================= */ @media (max-width: 760px) { :root { --bs-mobile-panel-top: 76px; --bs-mobile-edge: 8px; } html.bs-mobile-panel-visible, html.bs-mobile-panel-visible body { overflow: hidden !important; overscroll-behavior: none !important; } .bs-mobile-panel-backdrop { position: fixed; top: var(--bs-mobile-panel-top); right: 0; bottom: 0; left: 0; display: none; z-index: 9990; background: rgba(2, 18, 12, .38); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .bs-mobile-panel-backdrop.is-active { display: block; } /* Every mobile popup is positioned against the viewport/body. */ body > :is( nav.bs-mobile-main-menu, .language-menu.bs-mobile-viewport-panel, .user-notification-panel.bs-mobile-viewport-panel, .user-profile-panel.bs-mobile-viewport-panel ) { position: fixed !important; top: var(--bs-mobile-panel-top) !important; right: var(--bs-mobile-edge) !important; left: var(--bs-mobile-edge) !important; inset-inline: var(--bs-mobile-edge) !important; bottom: auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; box-sizing: border-box !important; transform: none !important; translate: none !important; filter: none !important; contain: none !important; isolation: isolate !important; z-index: 10000 !important; border: 1px solid var(--line) !important; border-radius: 18px !important; background: var(--card) !important; color: var(--ink) !important; box-shadow: 0 24px 70px rgba(3, 28, 18, .28) !important; overflow-x: hidden !important; } /* Main navigation */ body > nav.bs-mobile-main-menu { display: none !important; max-height: calc(100dvh - var(--bs-mobile-panel-top) - 8px) !important; padding: 10px !important; overflow-y: auto !important; flex-direction: column !important; align-items: stretch !important; gap: 5px !important; } body > nav.bs-mobile-main-menu.open { display: flex !important; } body > nav.bs-mobile-main-menu a { display: flex !important; align-items: center !important; width: 100% !important; min-height: 48px !important; padding: 11px 14px !important; border-radius: 11px !important; color: var(--ink) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.4 !important; text-align: start !important; text-decoration: none !important; white-space: normal !important; } body > nav.bs-mobile-main-menu a:hover, body > nav.bs-mobile-main-menu a:focus-visible { background: var(--soft) !important; } /* Shared open state */ body > .bs-mobile-viewport-panel { display: none !important; } body > .bs-mobile-viewport-panel.bs-mobile-panel-open { display: flex !important; } /* Language selector */ body > .language-menu.bs-mobile-viewport-panel { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; padding: 11px !important; max-height: calc(100dvh - var(--bs-mobile-panel-top) - 8px) !important; overflow-y: auto !important; } body > .language-menu.bs-mobile-viewport-panel.bs-mobile-panel-open { display: grid !important; } body > .language-menu.bs-mobile-viewport-panel a { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 11px !important; min-width: 0 !important; min-height: 52px !important; padding: 10px 12px !important; border: 1px solid transparent !important; border-radius: 12px !important; background: transparent !important; color: var(--ink) !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.3 !important; text-decoration: none !important; white-space: nowrap !important; } body > .language-menu.bs-mobile-viewport-panel a:hover, body > .language-menu.bs-mobile-viewport-panel a.is-active { border-color: #9fd3b6 !important; background: var(--soft) !important; color: var(--green2) !important; } body > .language-menu.bs-mobile-viewport-panel .language-flag { width: 28px !important; height: 19px !important; flex: 0 0 28px !important; } /* Notifications */ body > .user-notification-panel.bs-mobile-viewport-panel { flex-direction: column !important; max-height: calc(100dvh - var(--bs-mobile-panel-top) - 8px) !important; overflow: hidden !important; } body > .user-notification-panel .user-notification-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; flex: 0 0 auto !important; padding: 14px 15px !important; border-bottom: 1px solid var(--line) !important; } body > .user-notification-panel .user-notification-head > div { min-width: 0 !important; } body > .user-notification-panel .user-notification-head strong { display: block !important; font-size: 16px !important; line-height: 1.3 !important; } body > .user-notification-panel .user-notification-head small { display: block !important; margin-top: 2px !important; color: var(--muted) !important; font-size: 11px !important; } body > .user-notification-panel .user-notification-head > a { flex: 0 0 auto !important; min-height: 34px !important; padding: 8px 11px !important; border-radius: 10px !important; background: var(--soft) !important; color: var(--green2) !important; font-size: 11px !important; font-weight: 800 !important; text-decoration: none !important; white-space: nowrap !important; } body > .user-notification-panel .user-notification-list { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } body > .user-notification-panel .user-notification-list > .user-notification-item:nth-child(n + 6) { display: none !important; } body > .user-notification-panel .user-notification-item { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) !important; align-items: start !important; gap: 11px !important; width: 100% !important; min-width: 0 !important; padding: 12px 14px !important; border-bottom: 1px solid var(--line) !important; color: var(--ink) !important; text-decoration: none !important; } body > .user-notification-panel .user-notification-item > span { display: grid !important; place-items: center !important; width: 40px !important; height: 40px !important; border-radius: 12px !important; background: var(--soft) !important; color: var(--green2) !important; font-size: 15px !important; font-weight: 800 !important; } body > .user-notification-panel .user-notification-item > div { min-width: 0 !important; } body > .user-notification-panel .user-notification-item strong { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; overflow-wrap: anywhere !important; color: var(--ink) !important; font-size: 13px !important; line-height: 1.45 !important; } body > .user-notification-panel .user-notification-item p { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; overflow-wrap: anywhere !important; margin: 4px 0 1px !important; color: var(--muted) !important; font-size: 11px !important; line-height: 1.5 !important; } body > .user-notification-panel .user-notification-item small { display: block !important; margin-top: 4px !important; color: #819087 !important; font-size: 10px !important; } body > .user-notification-panel .user-notification-foot { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 8px !important; flex: 0 0 auto !important; padding: 10px !important; border-top: 1px solid var(--line) !important; background: #f7faf8 !important; } body > .user-notification-panel .user-notification-foot a { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; min-height: 38px !important; padding: 8px 10px !important; border-radius: 10px !important; font-size: 11px !important; font-weight: 800 !important; line-height: 1.3 !important; text-align: center !important; text-decoration: none !important; white-space: normal !important; } body > .user-notification-panel .user-notification-more-link { background: var(--soft) !important; color: var(--green2) !important; } body > .user-notification-panel .user-notification-messages-link { border: 1px solid var(--line) !important; background: var(--card) !important; color: var(--ink) !important; white-space: nowrap !important; } /* Profile */ body > .user-profile-panel.bs-mobile-viewport-panel { flex-direction: column !important; max-height: calc(100dvh - var(--bs-mobile-panel-top) - 8px) !important; overflow: hidden !important; } body > .user-profile-panel .user-profile-panel-head { display: grid !important; grid-template-columns: 52px minmax(0, 1fr) 34px !important; align-items: center !important; gap: 11px !important; flex: 0 0 auto !important; padding: 13px 14px !important; border-bottom: 1px solid var(--line) !important; } body > .user-profile-panel .user-profile-panel-avatar { width: 52px !important; height: 52px !important; border-radius: 50% !important; overflow: hidden !important; } body > .user-profile-panel .user-profile-panel-identity { min-width: 0 !important; } body > .user-profile-panel .user-profile-panel-identity > strong, body > .user-profile-panel .user-profile-panel-identity > span { display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body > .user-profile-panel .user-profile-panel-identity > strong { font-size: 15px !important; line-height: 1.3 !important; } body > .user-profile-panel .user-profile-panel-identity > span { margin-top: 2px !important; color: var(--muted) !important; font-size: 10.5px !important; } body > .user-profile-panel .user-profile-preview { display: grid !important; place-items: center !important; width: 34px !important; height: 34px !important; border-radius: 10px !important; } body > .user-profile-panel .user-profile-progress { flex: 0 0 auto !important; padding: 10px 14px !important; } body > .user-profile-panel .user-profile-mini-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; flex: 0 0 auto !important; } body > .user-profile-panel .user-profile-mini-stats a { min-width: 0 !important; padding: 9px 3px !important; } body > .user-profile-panel .user-profile-mini-stats strong { font-size: 15px !important; } body > .user-profile-panel .user-profile-mini-stats span { font-size: 8.5px !important; } body > .user-profile-panel .user-profile-menu-scroll { flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; padding: 8px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; -webkit-overflow-scrolling: touch !important; } body > .user-profile-panel .user-profile-menu-group { margin: 0 0 8px !important; } body > .user-profile-panel .user-profile-menu-group > span { display: block !important; padding: 7px 8px 5px !important; color: var(--muted) !important; font-size: 10px !important; font-weight: 800 !important; text-transform: uppercase !important; } body > .user-profile-panel .user-profile-menu-group > a { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; min-height: 53px !important; padding: 8px 9px !important; border-radius: 12px !important; color: var(--ink) !important; text-decoration: none !important; } body > .user-profile-panel .user-profile-menu-group > a:hover { background: var(--soft) !important; } body > .user-profile-panel .user-profile-menu-group > a > i { display: grid !important; place-items: center !important; width: 38px !important; height: 38px !important; border-radius: 11px !important; background: var(--soft) !important; color: var(--green2) !important; font-size: 14px !important; } body > .user-profile-panel .user-profile-menu-group > a > div { min-width: 0 !important; } body > .user-profile-panel .user-profile-menu-group > a strong { display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 12px !important; line-height: 1.35 !important; } body > .user-profile-panel .user-profile-menu-group > a small { display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; margin-top: 2px !important; color: var(--muted) !important; font-size: 9.5px !important; line-height: 1.35 !important; } body > .user-profile-panel .user-profile-panel-foot { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; flex: 0 0 auto !important; padding: 9px !important; border-top: 1px solid var(--line) !important; background: var(--card) !important; } body > .user-profile-panel .user-profile-panel-foot a { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; min-height: 38px !important; padding: 8px 7px !important; border-radius: 10px !important; font-size: 10px !important; font-weight: 750 !important; line-height: 1.3 !important; text-align: center !important; text-decoration: none !important; white-space: normal !important; } body > .user-profile-panel .user-profile-panel-foot .delete-account-link { grid-column: 1 / -1 !important; } /* Dark mode */ html[data-theme="dark"] .bs-mobile-panel-backdrop { background: rgba(0, 0, 0, .46) !important; } html[data-theme="dark"] body > :is( nav.bs-mobile-main-menu, .language-menu.bs-mobile-viewport-panel, .user-notification-panel.bs-mobile-viewport-panel, .user-profile-panel.bs-mobile-viewport-panel ) { border-color: var(--border) !important; background: var(--surface) !important; color: var(--ink) !important; } html[data-theme="dark"] body > .user-notification-panel .user-notification-foot, html[data-theme="dark"] body > .user-profile-panel .user-profile-panel-foot { border-color: var(--border) !important; background: var(--surface) !important; } html[data-theme="dark"] body > .user-notification-panel :is(.user-notification-head, .user-notification-item), html[data-theme="dark"] body > .user-profile-panel :is(.user-profile-panel-head, .user-profile-panel-foot) { border-color: var(--border) !important; } } @media (max-width: 370px) { :root { --bs-mobile-edge: 6px; } body > .language-menu.bs-mobile-viewport-panel { grid-template-columns: 1fr !important; } body > .user-notification-panel .user-notification-foot, body > .user-profile-panel .user-profile-panel-foot { gap: 5px !important; padding: 7px !important; } body > .user-notification-panel .user-notification-foot a, body > .user-profile-panel .user-profile-panel-foot a { font-size: 9.5px !important; } } /* ========================================================= BSOURIA V20 — Compact vertical mobile language menu Four clean rows, smaller regular-weight text and subtle state. ========================================================= */ @media (max-width: 760px) { body > .language-menu.bs-mobile-viewport-panel { left: 50% !important; right: auto !important; inset-inline: auto !important; width: min(270px, calc(100vw - 24px)) !important; min-width: 0 !important; max-width: 270px !important; grid-template-columns: 1fr !important; gap: 2px !important; padding: 7px !important; transform: translateX(-50%) !important; border-radius: 15px !important; } body > .language-menu.bs-mobile-viewport-panel.bs-mobile-panel-open { display: grid !important; } body > .language-menu.bs-mobile-viewport-panel a { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; width: 100% !important; min-height: 42px !important; padding: 8px 10px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: var(--ink) !important; font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.35 !important; text-align: start !important; white-space: nowrap !important; } body > .language-menu.bs-mobile-viewport-panel a:hover, body > .language-menu.bs-mobile-viewport-panel a:focus-visible, body > .language-menu.bs-mobile-viewport-panel a.is-active { border: 0 !important; background: var(--soft) !important; color: var(--green2) !important; font-weight: 500 !important; } body > .language-menu.bs-mobile-viewport-panel .language-flag { width: 24px !important; height: 16px !important; flex: 0 0 24px !important; border-radius: 3px !important; } html[dir="rtl"] body > .language-menu.bs-mobile-viewport-panel a { direction: rtl !important; text-align: right !important; } html[dir="ltr"] body > .language-menu.bs-mobile-viewport-panel a { direction: ltr !important; text-align: left !important; } }