:root { color-scheme: light; } html, body.sms-app-page { min-inline-size: 0; min-block-size: 100%; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #f4f6fb !important; } body.sms-app-page, body.sms-app-page * { box-sizing: border-box; } body.sms-app-page { /* * Portal-level design tokens. Modal overlays are appended directly to * , outside .sms-app-root, so they must inherit the same canonical * SMSocial tokens here instead of falling back to transparent CSS values. */ --sms-primary: #5b4ee8; --sms-primary-soft: color-mix(in srgb, var(--sms-primary) 11%, #ffffff); --sms-surface: #ffffff; --sms-surface-soft: #f7f8fc; --sms-surface-strong: #eef1f8; --sms-text: #172033; --sms-muted: #6d768b; --sms-muted-strong: #4d586f; --sms-border: #e1e5ef; --sms-border-strong: #d5dae8; --sms-success: #148052; --sms-success-soft: #eaf8f1; --sms-danger: #bb3151; --sms-shadow-sm: 0 8px 24px rgba(26, 36, 64, 0.05); --sms-shadow: 0 20px 55px rgba(26, 36, 64, 0.08); color: #172033; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body.sms-app-page img, body.sms-app-page svg, body.sms-app-page video, body.sms-app-page audio, body.sms-app-page iframe, body.sms-app-page object, body.sms-app-page embed, body.sms-app-page canvas, body.sms-app-page table { max-inline-size: 100%; } body.sms-app-page :where(h1, h2, h3, h4, p, li, a, span, strong, small) { overflow-wrap: anywhere; } body.sms-app-page :where(pre, code) { max-inline-size: 100%; } body.sms-app-page pre { overflow: auto; } body.sms-app-page table { display: block; overflow-x: auto; overscroll-behavior-inline: contain; } body.sms-app-page button, body.sms-app-page input, body.sms-app-page textarea, body.sms-app-page select { font: inherit; } .sms-app-root { --sms-primary: #5b4ee8; --sms-primary-soft: color-mix(in srgb, var(--sms-primary) 11%, #ffffff); --sms-surface: #ffffff; --sms-surface-soft: #f7f8fc; --sms-surface-strong: #eef1f8; --sms-text: #172033; --sms-muted: #6d768b; --sms-muted-strong: #4d586f; --sms-border: #e1e5ef; --sms-border-strong: #d5daE8; --sms-success: #148052; --sms-success-soft: #eaf8f1; --sms-danger: #bb3151; --sms-radius-sm: 12px; --sms-radius: 18px; --sms-radius-lg: 24px; --sms-shadow-sm: 0 8px 24px rgba(26, 36, 64, 0.05); --sms-shadow: 0 20px 55px rgba(26, 36, 64, 0.08); --sms-admin-offset: 0px; --sms-safe-top: env(safe-area-inset-top, 0px); --sms-safe-right: env(safe-area-inset-right, 0px); --sms-safe-bottom: env(safe-area-inset-bottom, 0px); --sms-safe-left: env(safe-area-inset-left, 0px); --sms-topbar-height: 72px; --sms-shell-max: 1480px; --sms-left-rail: 244px; --sms-right-rail: 308px; --sms-feed-width: 720px; --sms-reader-width: 860px; position: fixed; z-index: 9990; inset: var(--sms-admin-offset) 0 0; min-inline-size: 0; display: grid; grid-template-rows: calc(var(--sms-topbar-height) + var(--sms-safe-top)) minmax(0, 1fr); color: var(--sms-text); background: #f4f6fb; isolation: isolate; overflow: hidden; } .admin-bar .sms-app-root { --sms-admin-offset: 0px; } .sms-app-root :where(h1, h2, h3, p, ul) { margin-block-start: 0; } .sms-app-root a { color: inherit; text-decoration: none; } .sms-app-root :where(a, [tabindex]):focus-visible { outline: 3px solid color-mix(in srgb, var(--sms-primary) 32%, transparent); outline-offset: 3px; } .sms-icon { inline-size: 20px; block-size: 20px; display: block; flex: 0 0 auto; } .sms-app-skip { position: fixed; z-index: 100000; inset-block-start: calc(var(--sms-admin-offset, 0px) + 10px); inset-inline-start: 12px; transform: translateY(-180%); padding: 10px 14px; border-radius: 10px; background: #111827; color: #ffffff; font-weight: 700; } .sms-app-skip:focus { transform: translateY(0); } .sms-app-topbar { position: relative; z-index: 20; min-inline-size: 0; border-block-end: 1px solid var(--sms-border); background: color-mix(in srgb, var(--sms-surface) 94%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .sms-app-topbar__inner { inline-size: min(100%, var(--sms-shell-max)); block-size: 100%; margin-inline: auto; padding-block-start: var(--sms-safe-top); padding-inline: max(24px, var(--sms-safe-left)) max(24px, var(--sms-safe-right)); display: grid; grid-template-columns: minmax(190px, var(--sms-left-rail)) minmax(280px, 560px) minmax(340px, 1fr); align-items: center; gap: 24px; } .sms-app-brand { display: inline-flex; align-items: center; gap: 11px; min-inline-size: 0; justify-self: start; } .sms-app-brand__mark { inline-size: 42px; block-size: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 13px; background: linear-gradient(145deg, color-mix(in srgb, var(--sms-primary) 78%, #8174ff), var(--sms-primary)); box-shadow: 0 10px 24px color-mix(in srgb, var(--sms-primary) 24%, transparent); color: #ffffff; font-size: 13px; font-weight: 850; letter-spacing: -0.04em; } .sms-app-brand__name { overflow: hidden; color: var(--sms-text); font-size: 19px; font-weight: 780; letter-spacing: -0.025em; text-overflow: ellipsis; white-space: nowrap; } .sms-app-search { min-inline-size: 0; block-size: 42px; padding-inline: 14px 10px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--sms-border); border-radius: 13px; background: var(--sms-surface-soft); color: var(--sms-muted); cursor: not-allowed; } .sms-app-search .sms-icon { inline-size: 18px; block-size: 18px; } .sms-app-search > span { min-inline-size: 0; flex: 1 1 auto; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .sms-app-search kbd { min-inline-size: 25px; padding: 2px 7px; border: 1px solid var(--sms-border-strong); border-radius: 7px; background: var(--sms-surface); color: var(--sms-muted-strong); font-size: 11px; font-weight: 700; text-align: center; box-shadow: 0 1px 0 var(--sms-border); } .sms-app-topbar__actions { min-inline-size: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; } .sms-app-action { inline-size: 42px; block-size: 42px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sms-border); border-radius: 13px; background: var(--sms-surface); color: var(--sms-muted-strong); cursor: not-allowed; } .sms-app-action--create { inline-size: auto; padding-inline: 15px; gap: 8px; border-color: color-mix(in srgb, var(--sms-primary) 72%, transparent); background: var(--sms-primary); color: #ffffff; font-size: 13px; font-weight: 750; } .sms-app-action--create .sms-icon { inline-size: 18px; block-size: 18px; } .sms-app-action[href], button.sms-app-action:not([aria-disabled="true"]) { cursor: pointer; } .sms-app-account { min-inline-size: 0; margin-inline-start: 4px; padding-inline-start: 12px; display: flex; align-items: center; gap: 10px; border-inline-start: 1px solid var(--sms-border); } .sms-app-account__avatar { inline-size: 39px; block-size: 39px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: color-mix(in srgb, var(--sms-primary) 15%, var(--sms-surface)); color: var(--sms-primary); font-size: 14px; font-weight: 800; } .sms-app-account__copy { min-inline-size: 0; } .sms-app-account__copy strong, .sms-app-account__copy small { display: block; max-inline-size: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sms-app-account__copy strong { font-size: 13px; } .sms-app-account__copy small { margin-block-start: 1px; color: var(--sms-muted); font-size: 11px; } .sms-app-shell { min-inline-size: 0; min-block-size: 0; inline-size: min(100%, var(--sms-shell-max)); margin-inline: auto; position: relative; display: grid; grid-template-columns: var(--sms-left-rail) minmax(520px, 1fr) var(--sms-right-rail); overflow: hidden; } .sms-app-rail, .sms-app-centre { min-inline-size: 0; min-block-size: 0; } .sms-app-rail { position: relative; z-index: 3; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: color-mix(in srgb, var(--sms-surface-soft) 70%, transparent); } .sms-app-rail--left { border-inline-end: 1px solid var(--sms-border); } .sms-app-rail--right { border-inline-start: 1px solid var(--sms-border); } .sms-app-rail__scroll, .sms-app-centre { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; } .sms-app-rail__scroll::-webkit-scrollbar, .sms-app-centre::-webkit-scrollbar { inline-size: 0; block-size: 0; } .sms-app-rail__scroll { min-block-size: 0; padding: 22px max(16px, var(--sms-safe-right)) max(28px, var(--sms-safe-bottom)) max(16px, var(--sms-safe-left)); } /* 0.12.6-alpha.1.2 — compact left navigation: navigation rows are intentionally smaller than context/action cards. */ .sms-app-rail--left .sms-app-rail__scroll { padding-block-start: 16px; padding-inline: max(12px, var(--sms-safe-left)) 12px; } .sms-app-navigation { display: grid; gap: 3px; } .sms-app-navigation__item { min-inline-size: 0; min-block-size: 40px; padding: 7px 9px; display: grid; grid-template-columns: 19px minmax(0, 1fr) auto; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 10px; background: transparent; box-shadow: none; color: var(--sms-muted-strong); font-size: 13px; font-weight: 650; line-height: 1.2; transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease; } .sms-app-navigation__item:hover, .sms-app-navigation__item:focus-visible { border-color: var(--sms-border); background: var(--sms-surface); color: var(--sms-text); outline: none; } .sms-app-navigation__item > .sms-icon { inline-size: 18px; block-size: 18px; color: var(--sms-muted-strong); } .sms-app-navigation__item.is-active { border-color: color-mix(in srgb, var(--sms-primary) 20%, var(--sms-border)); background: var(--sms-surface); box-shadow: 0 3px 10px rgba(24, 31, 48, .045); color: var(--sms-text); } .sms-app-navigation__item.is-active > .sms-icon { color: var(--sms-primary); } .sms-app-navigation__item.is-active::after { content: ""; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--sms-primary); } .sms-app-navigation__item.is-disabled { color: color-mix(in srgb, var(--sms-muted) 74%, transparent); cursor: not-allowed; } .sms-app-navigation__item small { padding: 1px 5px; border: 1px solid var(--sms-border); border-radius: 999px; color: var(--sms-muted); font-size: 8px; font-weight: 760; letter-spacing: 0.04em; text-transform: uppercase; } .sms-app-rail-card { margin-block-start: 28px; padding: 17px; border: 1px solid var(--sms-border); border-radius: var(--sms-radius); background: var(--sms-surface); box-shadow: var(--sms-shadow-sm); } .sms-card-flat .sms-app-rail-card, .sms-card-flat .sms-app-hero, .sms-card-flat .sms-app-contract, .sms-card-flat .sms-app-reserved, .sms-card-flat .sms-app-context-card, .sms-card-flat .sms-app-admin-link { box-shadow: none; } .sms-app-rail-card__eyebrow, .sms-app-context-card__eyebrow, .sms-app-view-heading > div > span, .sms-app-section-heading > div > span { display: block; color: var(--sms-primary); font-size: 10px; font-weight: 820; letter-spacing: 0.09em; text-transform: uppercase; } .sms-app-rail-card h2 { margin-block: 7px 8px; font-size: 15px; letter-spacing: -0.015em; } .sms-app-rail-card p { margin-block-end: 14px; color: var(--sms-muted); font-size: 12px; } .sms-app-progress { block-size: 6px; margin-block-end: 8px; overflow: hidden; border-radius: 999px; background: var(--sms-surface-strong); } .sms-app-progress span { inline-size: var(--sms-progress, 0%); block-size: 100%; display: block; border-radius: inherit; background: var(--sms-primary); } .sms-app-rail-card > small { color: var(--sms-muted); font-size: 10px; } .sms-app-rail__footer { min-block-size: 58px; padding-inline: 20px; display: flex; align-items: center; gap: 9px; border-block-start: 1px solid var(--sms-border); color: var(--sms-muted); font-size: 11px; } .sms-app-rail__footer .sms-icon { inline-size: 17px; block-size: 17px; } .sms-app-centre { position: relative; z-index: 1; background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--sms-primary) 6%, transparent), transparent 25rem), #f4f6fb; outline: none; } .sms-app-centre__stream { inline-size: min(100%, calc(var(--sms-feed-width) + 40px)); min-block-size: 100%; margin-inline: auto; padding: 24px max(20px, var(--sms-safe-right)) max(54px, calc(28px + var(--sms-safe-bottom))) max(20px, var(--sms-safe-left)); } .sms-density-compact .sms-app-centre__stream { padding-block-start: 18px; } .sms-app-view-heading { min-block-size: 52px; margin-block-end: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .sms-app-view-heading h1 { margin-block: 3px 0; font-size: 25px; line-height: 1.15; letter-spacing: -0.035em; } .sms-app-live-status { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #ccead9; border-radius: 999px; background: var(--sms-success-soft); color: var(--sms-success); font-size: 11px; font-weight: 750; white-space: nowrap; } .sms-app-live-status i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; } .sms-app-hero, .sms-app-contract, .sms-app-reserved { border: 1px solid var(--sms-border); border-radius: var(--sms-radius-lg); background: var(--sms-surface); box-shadow: var(--sms-shadow-sm); } .sms-app-hero { position: relative; padding: 30px; overflow: hidden; } .sms-app-hero::after { content: ""; position: absolute; inline-size: 230px; block-size: 230px; inset-block-start: -125px; inset-inline-end: -85px; border-radius: 50%; background: color-mix(in srgb, var(--sms-primary) 9%, transparent); pointer-events: none; } .sms-app-hero__icon { inline-size: 48px; block-size: 48px; margin-block-end: 24px; display: grid; place-items: center; border-radius: 15px; background: var(--sms-primary-soft); color: var(--sms-primary); } .sms-app-hero__icon .sms-icon { inline-size: 24px; block-size: 24px; } .sms-app-kicker { display: block; margin-block-end: 8px; color: var(--sms-primary); font-size: 10px; font-weight: 830; letter-spacing: 0.1em; text-transform: uppercase; } .sms-app-hero h2 { max-inline-size: 590px; margin-block-end: 13px; font-size: clamp(28px, 4vw, 42px); line-height: 1.04; letter-spacing: -0.045em; } .sms-app-hero > p { max-inline-size: 610px; margin-block-end: 22px; color: var(--sms-muted); font-size: 15px; } .sms-app-hero__tags { display: flex; flex-wrap: wrap; gap: 8px; } .sms-app-hero__tags span { min-block-size: 32px; padding-inline: 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--sms-border); border-radius: 999px; background: var(--sms-surface-soft); color: var(--sms-muted-strong); font-size: 11px; font-weight: 680; } .sms-app-hero__tags .sms-icon { inline-size: 14px; block-size: 14px; color: var(--sms-success); } .sms-app-contract, .sms-app-reserved { margin-block-start: 16px; padding: 24px; } .sms-app-section-heading { margin-block-end: 18px; display: flex; align-items: end; justify-content: space-between; gap: 14px; } .sms-app-section-heading h2 { margin-block: 4px 0; font-size: 19px; letter-spacing: -0.025em; } .sms-app-section-heading > small { color: var(--sms-muted); font-size: 10px; } .sms-app-contract__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sms-app-contract__grid article { min-inline-size: 0; padding: 16px; border: 1px solid var(--sms-border); border-radius: var(--sms-radius-sm); background: var(--sms-surface-soft); } .sms-app-contract__grid article > strong { display: block; margin-block-end: 18px; color: var(--sms-primary); font-size: 10px; } .sms-app-contract__grid h3 { margin-block-end: 6px; font-size: 14px; } .sms-app-contract__grid p { margin-block-end: 0; color: var(--sms-muted); font-size: 12px; } .sms-app-empty-state { padding: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 15px; align-items: start; border: 1px dashed var(--sms-border-strong); border-radius: var(--sms-radius); background: var(--sms-surface-soft); } .sms-app-empty-state__mark { inline-size: 40px; block-size: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--sms-surface); color: var(--sms-primary); } .sms-app-empty-state__mark .sms-icon { inline-size: 20px; block-size: 20px; } .sms-app-empty-state strong { display: block; margin-block: 1px 5px; font-size: 13px; } .sms-app-empty-state p { margin-block-end: 0; color: var(--sms-muted); font-size: 12px; } .sms-app-centre__footer { min-block-size: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--sms-muted); font-size: 10px; } .sms-app-context-card, .sms-app-admin-link { display: block; border: 1px solid var(--sms-border); border-radius: var(--sms-radius); background: var(--sms-surface); box-shadow: var(--sms-shadow-sm); } .sms-app-context-card { padding: 18px; } .sms-app-context-card + .sms-app-context-card, .sms-app-admin-link { margin-block-start: 12px; } .sms-app-context-card__heading { display: flex; align-items: center; gap: 11px; } .sms-app-context-card__icon { inline-size: 39px; block-size: 39px; display: grid; place-items: center; border-radius: 12px; background: var(--sms-success-soft); color: var(--sms-success); } .sms-app-context-card__icon .sms-icon { inline-size: 19px; block-size: 19px; } .sms-app-context-card__heading span:not(.sms-app-context-card__icon) { color: var(--sms-muted); font-size: 10px; } .sms-app-context-card h2 { margin-block: 7px 8px; font-size: 16px; letter-spacing: -0.02em; } .sms-app-context-card__heading h2 { margin-block: 1px 0; } .sms-app-context-card p { margin-block-end: 14px; color: var(--sms-muted); font-size: 12px; } .sms-app-context-card ul { margin-block: 17px 0; padding: 0; list-style: none; border-block-start: 1px solid var(--sms-border); } .sms-app-context-card li { min-block-size: 37px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-block-end: 1px solid var(--sms-border); color: var(--sms-muted); font-size: 11px; } .sms-app-context-card li strong { color: var(--sms-text); font-size: 11px; } .sms-app-context-card__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--sms-primary); font-size: 11px; font-weight: 750; } .sms-app-context-card__link .sms-icon { inline-size: 16px; block-size: 16px; } .sms-app-admin-link { min-block-size: 62px; padding: 12px 14px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; transition: transform 160ms ease, border-color 160ms ease; } .sms-app-admin-link:hover { border-color: color-mix(in srgb, var(--sms-primary) 35%, var(--sms-border)); transform: translateY(-1px); } .sms-app-admin-link > .sms-icon:first-child { color: var(--sms-primary); } .sms-app-admin-link > .sms-icon:last-child { inline-size: 16px; block-size: 16px; color: var(--sms-muted); } .sms-app-admin-link strong, .sms-app-admin-link small { display: block; } .sms-app-admin-link strong { font-size: 12px; } .sms-app-admin-link small { margin-block-start: 2px; color: var(--sms-muted); font-size: 10px; } .sms-density-compact .sms-app-rail__scroll { padding-block-start: 16px; } .sms-density-compact .sms-app-hero { padding: 24px; } .sms-density-compact .sms-app-contract, .sms-density-compact .sms-app-reserved { padding: 20px; } .sms-app-mobile-trigger, .sms-app-drawer-close, .sms-app-drawer-backdrop { appearance: none; border: 0; margin: 0; padding: 0; font: inherit; } .sms-app-mobile-trigger { inline-size: 42px; block-size: 42px; display: none; place-items: center; flex: 0 0 auto; border: 1px solid var(--sms-border); border-radius: 13px; background: var(--sms-surface); color: var(--sms-muted-strong); cursor: pointer; } .sms-app-mobile-trigger:hover, .sms-app-mobile-trigger:focus-visible, .sms-app-drawer-close:hover, .sms-app-drawer-close:focus-visible { border-color: color-mix(in srgb, var(--sms-primary) 45%, var(--sms-border)); color: var(--sms-primary); } .sms-app-mobile-trigger .sms-icon, .sms-app-drawer-close .sms-icon { inline-size: 20px; block-size: 20px; } .sms-app-drawer-header { display: none; } .sms-app-drawer-close { inline-size: 40px; block-size: 40px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--sms-border); border-radius: 12px; background: var(--sms-surface-soft); color: var(--sms-muted-strong); cursor: pointer; } .sms-app-drawer-backdrop { display: none; } @media (max-width: 1279px) { .sms-app-topbar__inner { grid-template-columns: 220px minmax(260px, 1fr) auto; } .sms-app-shell { grid-template-columns: 220px minmax(0, 1fr); } .sms-app-mobile-trigger--context { display: grid; } .sms-app-rail--right { position: absolute; z-index: 40; inset-block: 0; inset-inline-end: 0; inline-size: min(88vw, 360px); display: grid; grid-template-rows: auto minmax(0, 1fr); border-inline-start: 1px solid var(--sms-border); background: var(--sms-surface-soft); box-shadow: -20px 0 55px rgba(22, 30, 50, 0.16); visibility: hidden; pointer-events: none; transform: translateX(105%); transition: transform 190ms ease, visibility 190ms step-end; } .sms-app-rail--right .sms-app-drawer-header { display: flex; } .sms-app-drawer-backdrop { position: absolute; z-index: 30; inset: 0; inline-size: 100%; block-size: 100%; display: block; background: rgba(18, 24, 39, 0.42); opacity: 0; visibility: hidden; pointer-events: none; cursor: pointer; transition: opacity 180ms ease, visibility 180ms step-end; } .sms-app-root[data-open-drawer="context"] .sms-app-rail--right { visibility: visible; pointer-events: auto; transform: translateX(0); transition: transform 190ms ease, visibility 0s; } .sms-app-root[data-open-drawer] .sms-app-drawer-backdrop { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 180ms ease, visibility 0s; } } @media (max-width: 1023px) { .sms-app-topbar__inner { grid-template-columns: auto auto minmax(220px, 1fr) auto; padding-inline: max(18px, var(--sms-safe-left)) max(18px, var(--sms-safe-right)); gap: 14px; } .sms-app-mobile-trigger--navigation { display: grid; } .sms-app-brand__name, .sms-app-account__copy, .sms-app-action--create > span { display: none; } .sms-app-action--create { inline-size: 42px; padding-inline: 0; } .sms-app-shell { grid-template-columns: minmax(0, 1fr); } .sms-app-rail--left { position: absolute; z-index: 40; inset-block: 0; inset-inline-start: 0; inline-size: min(88vw, 340px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border-inline-end: 1px solid var(--sms-border); background: var(--sms-surface-soft); box-shadow: 20px 0 55px rgba(22, 30, 50, 0.16); visibility: hidden; pointer-events: none; transform: translateX(-105%); transition: transform 190ms ease, visibility 190ms step-end; } .sms-app-rail--left .sms-app-drawer-header { display: flex; } .sms-app-root[data-open-drawer="navigation"] .sms-app-rail--left { visibility: visible; pointer-events: auto; transform: translateX(0); transition: transform 190ms ease, visibility 0s; } .sms-app-centre__stream { inline-size: min(100%, calc(var(--sms-feed-width) + 40px)); } } .sms-app-drawer-header { min-block-size: 68px; padding: 12px max(16px, var(--sms-safe-right)) 12px max(16px, var(--sms-safe-left)); align-items: center; justify-content: space-between; gap: 16px; border-block-end: 1px solid var(--sms-border); background: var(--sms-surface); } .sms-app-drawer-header span, .sms-app-drawer-header strong { display: block; } .sms-app-drawer-header span { color: var(--sms-primary); font-size: 10px; font-weight: 820; letter-spacing: 0.08em; text-transform: uppercase; } .sms-app-drawer-header strong { margin-block-start: 2px; font-size: 16px; } body.sms-drawer-open .sms-app-centre { overflow: hidden; } @media (max-width: 767px) { .sms-app-root { --sms-topbar-height: 60px; } .sms-app-topbar__inner { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: max(10px, var(--sms-safe-left)) max(10px, var(--sms-safe-right)); gap: 8px; } .sms-app-brand { justify-self: center; } .sms-app-search, .sms-app-action, .sms-app-account { display: none; } .sms-app-topbar__actions { display: contents; } .sms-app-mobile-trigger--context { grid-column: 3; } .sms-app-brand__mark, .sms-app-mobile-trigger { inline-size: 40px; block-size: 40px; } .sms-app-brand__name { display: block; font-size: 17px; } .sms-app-centre__stream { inline-size: 100%; padding: 16px max(12px, var(--sms-safe-right)) max(42px, calc(24px + var(--sms-safe-bottom))) max(12px, var(--sms-safe-left)); } .sms-app-view-heading { min-block-size: 46px; margin-block-end: 12px; } .sms-app-view-heading h1 { font-size: 21px; } .sms-app-live-status { display: none; } .sms-app-hero { padding: 24px 20px; border-radius: 20px; } .sms-app-hero h2 { font-size: 31px; } .sms-app-contract, .sms-app-reserved { padding: 20px; border-radius: 20px; } .sms-app-contract__grid { grid-template-columns: 1fr; } .sms-app-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; } .sms-app-centre__footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 3px; } } @media screen and (max-width: 782px) { .admin-bar .sms-app-root { --sms-admin-offset: 0px; } } @media (max-width: 390px) { .sms-app-brand__name { display: none; } .sms-app-hero h2 { font-size: 28px; } .sms-app-hero__tags { display: grid; } .sms-app-hero__tags span { justify-content: flex-start; } .sms-app-empty-state { grid-template-columns: 1fr; } } @media (max-width: 340px) { .sms-app-centre__stream { padding-inline: max(8px, var(--sms-safe-left)) max(8px, var(--sms-safe-right)); } .sms-app-hero, .sms-app-contract, .sms-app-reserved { padding-inline: 16px; } } @media (prefers-reduced-motion: reduce) { .sms-app-root *, .sms-app-root *::before, .sms-app-root *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } body.sms-app-page.sms-color-mode-dark { color-scheme: dark; --sms-primary-soft: color-mix(in srgb, var(--sms-primary) 17%, #171a25); --sms-surface: #171a25; --sms-surface-soft: #1d2130; --sms-surface-strong: #252b3a; --sms-text: #f3f5fb; --sms-muted: #a5aec2; --sms-muted-strong: #c4cada; --sms-border: #303648; --sms-border-strong: #3a4257; --sms-success-soft: #17352a; --sms-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.16); --sms-shadow: 0 20px 55px rgba(0, 0, 0, 0.24); } .sms-color-mode-dark .sms-app-root { color-scheme: dark; --sms-primary-soft: color-mix(in srgb, var(--sms-primary) 17%, #171a25); --sms-surface: #171a25; --sms-surface-soft: #1d2130; --sms-surface-strong: #252b3a; --sms-text: #f3f5fb; --sms-muted: #a5aec2; --sms-muted-strong: #c4cada; --sms-border: #303648; --sms-border-strong: #3a4257; --sms-success-soft: #17352a; --sms-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.16); --sms-shadow: 0 20px 55px rgba(0, 0, 0, 0.24); background: #10131b; } .sms-color-mode-dark .sms-app-centre { background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--sms-primary) 9%, transparent), transparent 25rem), #10131b; } @media (prefers-color-scheme: dark) { body.sms-app-page.sms-color-mode-system { color-scheme: dark; --sms-primary-soft: color-mix(in srgb, var(--sms-primary) 17%, #171a25); --sms-surface: #171a25; --sms-surface-soft: #1d2130; --sms-surface-strong: #252b3a; --sms-text: #f3f5fb; --sms-muted: #a5aec2; --sms-muted-strong: #c4cada; --sms-border: #303648; --sms-border-strong: #3a4257; --sms-success-soft: #17352a; --sms-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.16); --sms-shadow: 0 20px 55px rgba(0, 0, 0, 0.24); } .sms-color-mode-system .sms-app-root { color-scheme: dark; --sms-primary-soft: color-mix(in srgb, var(--sms-primary) 17%, #171a25); --sms-surface: #171a25; --sms-surface-soft: #1d2130; --sms-surface-strong: #252b3a; --sms-text: #f3f5fb; --sms-muted: #a5aec2; --sms-muted-strong: #c4cada; --sms-border: #303648; --sms-border-strong: #3a4257; --sms-success-soft: #17352a; --sms-shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.16); --sms-shadow: 0 20px 55px rgba(0, 0, 0, 0.24); background: #10131b; } .sms-color-mode-system .sms-app-centre { background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--sms-primary) 9%, transparent), transparent 25rem), #10131b; } } .admin-bar .sms-app-skip { inset-block-start: 42px; } @media screen and (max-width: 782px) { .admin-bar .sms-app-skip { inset-block-start: 56px; } } /* 0.3.0-alpha.4 progressive router states. */ .sms-app-centre { isolation: isolate; } .sms-app-centre.is-router-loading > .sms-app-centre__stream { opacity: 0.42; pointer-events: none; transition: opacity 120ms ease; } .sms-app-router-skeleton { position: absolute; z-index: 5; inset: 24px max(20px, var(--sms-safe-right)) auto max(20px, var(--sms-safe-left)); inline-size: min(calc(100% - 40px), var(--sms-feed-width)); min-block-size: 430px; margin-inline: auto; padding: 4px; pointer-events: none; } .sms-app-router-skeleton__line, .sms-app-router-skeleton__card { display: block; overflow: hidden; border-radius: 999px; background: linear-gradient(90deg, var(--sms-surface-strong) 20%, var(--sms-surface) 40%, var(--sms-surface-strong) 60%); background-size: 220% 100%; animation: sms-router-shimmer 1.1s linear infinite; } .sms-app-router-skeleton__line--short { inline-size: 26%; block-size: 10px; margin-block-start: 8px; } .sms-app-router-skeleton__line--title { inline-size: 48%; block-size: 26px; margin-block-start: 12px; } .sms-app-router-skeleton__card { inline-size: 100%; block-size: 235px; margin-block-start: 27px; border-radius: var(--sms-radius-lg); } .sms-app-router-skeleton__card--small { block-size: 130px; margin-block-start: 16px; } .sms-app-centre__stream[data-sms-router-view] { animation: sms-router-view-in 180ms ease-out; } @keyframes sms-router-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } } @keyframes sms-router-view-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .sms-app-router-skeleton__line, .sms-app-router-skeleton__card, .sms-app-centre__stream[data-sms-router-view] { animation: none; } } /* 0.3.0-alpha.5 lifecycle/performance state markers. */ .sms-app-root[data-lifecycle-mounted="true"] .sms-app-live-status i { animation-duration: 2.4s; } /* 0.4.0-alpha.2 public profile and private settings workspace. */ .sms-app-account { text-decoration:none; color:inherit; } .sms-app-account__avatar { overflow:hidden; } .sms-app-account__avatar img { inline-size:100%; block-size:100%; object-fit:cover; } .sms-profile-card,.sms-profile-stream,.sms-profile-settings,.sms-profile-state { border:1px solid var(--sms-border); border-radius:var(--sms-radius-lg); background:var(--sms-surface); box-shadow:var(--sms-shadow-sm); overflow:hidden; } .sms-profile-cover { position:relative; block-size:220px; background:linear-gradient(135deg,color-mix(in srgb,var(--sms-primary) 85%,#211a5e),color-mix(in srgb,var(--sms-primary) 35%,#66c8df)); } .sms-profile-cover img { inline-size:100%; block-size:100%; object-fit:cover; } .sms-profile-cover.is-placeholder::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 25% 30%,rgba(255,255,255,.26),transparent 34%),linear-gradient(120deg,transparent,rgba(255,255,255,.12)); } .sms-profile-main { display:grid; grid-template-columns:auto 1fr auto; align-items:end; gap:18px; padding:0 28px 16px; margin-block-start:-58px; position:relative; } .sms-profile-avatar { inline-size:116px; block-size:116px; border:5px solid var(--sms-surface); border-radius:50%; overflow:hidden; background:var(--sms-primary); color:#fff; display:grid; place-items:center; font-size:42px; font-weight:800; box-shadow:var(--sms-shadow-sm); } .sms-profile-avatar img { inline-size:100%; block-size:100%; object-fit:cover; } .sms-profile-identity { padding-block-end:8px; min-inline-size:0; } .sms-profile-identity h2 { margin:0; color:var(--sms-text); font-size:28px; overflow-wrap:anywhere; } .sms-profile-identity p { margin:3px 0 0; color:var(--sms-muted); } .sms-profile-button { appearance:none; border:0; border-radius:12px; background:var(--sms-primary); color:#fff; min-block-size:42px; padding:10px 16px; display:inline-flex; gap:8px; align-items:center; justify-content:center; text-decoration:none; font:inherit; font-weight:700; cursor:pointer; } .sms-profile-button.is-secondary { background:var(--sms-surface-strong); color:var(--sms-text); border:1px solid var(--sms-border); } .sms-profile-button:disabled { opacity:.5; cursor:not-allowed; } .sms-profile-bio { padding:0 28px 20px; } .sms-profile-bio p { margin:0 0 12px; color:var(--sms-text); white-space:pre-line; overflow-wrap:anywhere; } .sms-profile-visibility { display:inline-flex; gap:7px; align-items:center; color:var(--sms-muted); font-size:13px; } .sms-profile-visibility .sms-icon { inline-size:16px; } .sms-profile-counts { display:grid; grid-template-columns:repeat(3,1fr); border-block-start:1px solid var(--sms-border); } .sms-profile-counts div { padding:16px; text-align:center; border-inline-end:1px solid var(--sms-border); } .sms-profile-counts div:last-child { border:0; } .sms-profile-counts strong,.sms-profile-counts span { display:block; } .sms-profile-counts strong { font-size:20px; color:var(--sms-text); } .sms-profile-counts span { color:var(--sms-muted); font-size:12px; margin-block-start:3px; } .sms-profile-stream { margin-block-start:18px; padding:0 24px 24px; } .sms-profile-stream nav { display:flex; gap:24px; border-block-end:1px solid var(--sms-border); margin-block-end:22px; } .sms-profile-stream nav span { padding:17px 2px 13px; color:var(--sms-muted); font-weight:700; } .sms-profile-stream nav .is-active { color:var(--sms-primary); border-block-end:2px solid var(--sms-primary); } .sms-profile-state { min-block-size:300px; padding:42px; display:flex; gap:20px; align-items:flex-start; } .sms-profile-state > span { inline-size:54px; block-size:54px; border-radius:16px; display:grid; place-items:center; color:var(--sms-primary); background:var(--sms-primary-soft); flex:0 0 auto; } .sms-profile-state h2 { margin:0 0 8px; color:var(--sms-text); } .sms-profile-state p { margin:0 0 20px; color:var(--sms-muted); max-inline-size:600px; } .sms-profile-settings { padding:28px; } .sms-profile-settings__intro { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; border-block-end:1px solid var(--sms-border); padding-block-end:22px; } .sms-profile-settings__intro h2 { margin:5px 0 8px; color:var(--sms-text); } .sms-profile-settings__intro p { margin:0; max-inline-size:600px; color:var(--sms-muted); } .sms-profile-settings__intro > a { display:inline-flex; gap:7px; align-items:center; white-space:nowrap; color:var(--sms-primary); text-decoration:none; font-weight:700; } .sms-profile-notice { margin-block:18px 0; padding:12px 14px; border-radius:10px; background:var(--sms-success-soft); color:var(--sms-text); } .sms-profile-notice[data-kind="error"] { background:color-mix(in srgb,#d64a4a 14%,var(--sms-surface)); color:#b32d2e; } .sms-profile-form { display:grid; gap:18px; padding-block:24px; max-inline-size:680px; } .sms-profile-form label { display:grid; gap:7px; color:var(--sms-text); font-weight:700; } .sms-profile-form input,.sms-profile-form textarea,.sms-profile-form select { inline-size:100%; border:1px solid var(--sms-border-strong); border-radius:11px; background:var(--sms-surface-soft); color:var(--sms-text); padding:11px 12px; font:inherit; box-sizing:border-box; } .sms-profile-form textarea { resize:vertical; min-block-size:120px; } .sms-profile-form small,.sms-profile-media-editor p { color:var(--sms-muted); font-weight:400; } .sms-profile-form button { justify-self:start; } .sms-profile-media-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; border-block-start:1px solid var(--sms-border); padding-block-start:24px; } .sms-profile-media-editor { border:1px solid var(--sms-border); border-radius:16px; background:var(--sms-surface-soft); padding:16px; display:grid; gap:16px; grid-template-columns:120px 1fr; align-items:start; } .sms-profile-media-preview { overflow:hidden; background:var(--sms-surface-strong); display:grid; place-items:center; color:#fff; font-size:34px; font-weight:800; } .sms-profile-media-preview img { inline-size:100%; block-size:100%; object-fit:cover; } .sms-profile-media-preview--avatar { inline-size:110px; block-size:110px; border-radius:50%; background:var(--sms-primary); } .sms-profile-media-preview--cover { inline-size:120px; block-size:82px; border-radius:12px; background:linear-gradient(135deg,var(--sms-primary),#66c8df); } .sms-profile-media-editor h3 { margin:0; color:var(--sms-text); } .sms-profile-media-editor p { margin:5px 0 12px; font-size:12px; } .sms-profile-media-editor input[type=file] { max-inline-size:100%; color:var(--sms-muted); } .sms-profile-media-actions { display:flex; gap:8px; margin-block-start:12px; } .sms-profile-media-actions .sms-profile-button { min-block-size:36px; padding:7px 11px; font-size:13px; } @media (max-width:767px) { .sms-profile-cover { block-size:150px; } .sms-profile-main { grid-template-columns:auto 1fr; padding-inline:18px; margin-block-start:-44px; } .sms-profile-avatar { inline-size:88px; block-size:88px; font-size:32px; } .sms-profile-main > .sms-profile-button { grid-column:1/-1; inline-size:100%; } .sms-profile-identity h2 { font-size:23px; } .sms-profile-bio { padding-inline:18px; } .sms-profile-counts div { padding:12px 5px; } .sms-profile-settings { padding:20px 16px; } .sms-profile-settings__intro { flex-direction:column; } .sms-profile-media-grid { grid-template-columns:1fr; } .sms-profile-media-editor { grid-template-columns:90px 1fr; } .sms-profile-media-preview--avatar { inline-size:82px; block-size:82px; } .sms-profile-media-preview--cover { inline-size:90px; block-size:70px; } .sms-profile-state { padding:28px 20px; flex-direction:column; } } @media (max-width:390px) { .sms-profile-main { grid-template-columns:1fr; margin-block-start:-42px; align-items:start; } .sms-profile-avatar { inline-size:84px; block-size:84px; } .sms-profile-counts { grid-template-columns:1fr; } .sms-profile-counts div { border-inline-end:0; border-block-end:1px solid var(--sms-border); } .sms-profile-media-editor { grid-template-columns:1fr; } } /* 0.4.0-alpha.3 explicit People search. */ .sms-app-search { cursor:text; padding-inline:12px; } .sms-app-search input { min-inline-size:0; inline-size:100%; border:0; outline:0; background:transparent; color:var(--sms-text); font:inherit; font-size:13px; } .sms-app-search input::placeholder { color:var(--sms-muted); } .sms-app-search button { display:none; } .sms-people-search { display:grid; gap:14px; } .sms-people-search__intro { display:grid; grid-template-columns:minmax(0,1fr) minmax(330px,460px); align-items:end; gap:22px; padding:18px; border:1px solid var(--sms-border); border-radius:18px; background:var(--sms-surface); box-shadow:var(--sms-shadow-sm); } .sms-people-search__copy { min-inline-size:0; } .sms-people-search__intro h2 { margin:4px 0 5px; color:var(--sms-text); font-size:1.12rem; line-height:1.25; } .sms-people-search__intro p { margin:0; max-inline-size:620px; color:var(--sms-muted); font-size:.76rem; line-height:1.5; } .sms-people-search__form { display:grid; gap:6px; min-inline-size:0; } .sms-people-search__form > label { color:var(--sms-text); font-size:.72rem; font-weight:800; } .sms-people-search__field { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; min-block-size:40px; border:1px solid var(--sms-border); border-radius:12px; background:var(--sms-surface-soft); padding:4px 4px 4px 11px; } .sms-people-search__field:focus-within { border-color:color-mix(in srgb,var(--sms-primary) 48%,var(--sms-border)); box-shadow:0 0 0 3px color-mix(in srgb,var(--sms-primary) 10%,transparent); } .sms-people-search__field .sms-icon { inline-size:18px; color:var(--sms-muted); } .sms-people-search__field input { min-inline-size:0; inline-size:100%; min-block-size:30px; border:0!important; outline:0!important; box-shadow:none!important; background:transparent!important; color:var(--sms-text); font:inherit; font-size:.78rem; padding:4px 0!important; } .sms-people-search__field button { min-block-size:32px; border:0; border-radius:9px; background:var(--sms-primary); color:#fff; padding:6px 12px; font:inherit; font-size:.72rem; font-weight:800; cursor:pointer; } .sms-people-search__form > small { display:block; color:var(--sms-muted); font-size:.66rem; line-height:1.4; } .sms-people-search__status { min-block-size:18px; margin:0 2px; color:var(--sms-muted); font-size:.7rem; } .sms-people-search[data-loading="true"] .sms-people-search__status { color:var(--sms-primary); } .sms-people-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .sms-people-results>.sms-app-empty-state { grid-column:1/-1; padding:14px 16px; border-radius:14px; } .sms-person-card { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; min-inline-size:0; border:1px solid var(--sms-border); border-radius:14px; background:var(--sms-surface); padding:11px; box-shadow:var(--sms-shadow-sm); } .sms-person-card__avatar { inline-size:46px; block-size:46px; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--sms-primary); color:#fff; text-decoration:none; font-weight:800; font-size:16px; } .sms-person-card__avatar img { inline-size:100%; block-size:100%; object-fit:cover; } .sms-person-card__copy { min-inline-size:0; } .sms-person-card__copy > a { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; color:var(--sms-text); text-decoration:none; } .sms-person-card__copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.8rem; } .sms-person-card__copy span { color:var(--sms-muted); font-size:.68rem; } .sms-person-card__copy p { display:-webkit-box; overflow:hidden; margin:3px 0 0; color:var(--sms-muted); font-size:.68rem; line-height:1.4; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; } .sms-person-card__open { inline-size:32px; block-size:32px; border-radius:9px; display:grid; place-items:center; color:var(--sms-primary); background:var(--sms-primary-soft); text-decoration:none; } .sms-person-card__open .sms-icon { inline-size:16px; } @media (max-width:900px) { .sms-people-search__intro { grid-template-columns:1fr; align-items:stretch; } .sms-people-search__form { max-inline-size:none; } } @media (max-width:767px) { .sms-people-search { gap:12px; } .sms-people-search__intro { padding:14px; border-radius:16px; gap:14px; } .sms-people-search__intro h2 { font-size:1rem; } .sms-people-results { grid-template-columns:1fr; } .sms-person-card { grid-template-columns:auto minmax(0,1fr); } .sms-person-card__open { display:none; } .sms-people-search__field { grid-template-columns:auto minmax(0,1fr) auto; } .sms-people-search__field button { min-block-size:36px; padding-inline:13px; } } @media (max-width:390px) { .sms-people-search__field { grid-template-columns:auto minmax(0,1fr); } .sms-people-search__field button { grid-column:1/-1; inline-size:100%; } .sms-person-card { align-items:start; } .sms-person-card__avatar { inline-size:44px; block-size:44px; } } /* 0.5.0-alpha.1 — canonical Activity model and one card renderer. */ .sms-activity-foundation{display:flex;justify-content:space-between;gap:24px;padding:24px;border:1px solid var(--sms-border);border-radius:var(--sms-card-radius,18px);background:var(--sms-surface);box-shadow:var(--sms-card-shadow,0 8px 30px rgba(24,28,45,.05))}.sms-activity-foundation h2{margin:5px 0 8px;font-size:clamp(1.25rem,2vw,1.65rem)}.sms-activity-foundation p{margin:0;max-width:650px;color:var(--sms-muted);line-height:1.65}.sms-activity-foundation dl{display:grid;grid-template-columns:repeat(3,minmax(82px,1fr));gap:10px;margin:0}.sms-activity-foundation dl div{display:flex;flex-direction:column;justify-content:center;min-width:88px;padding:12px;border:1px solid var(--sms-border);border-radius:14px;background:var(--sms-surface-soft)}.sms-activity-foundation dt{font-size:.72rem;color:var(--sms-muted);text-transform:uppercase;letter-spacing:.06em}.sms-activity-foundation dd{margin:4px 0 0;font-size:1.05rem;font-weight:750}.sms-activity-stream{display:grid;gap:14px}.sms-activity-card{overflow:hidden;border:1px solid var(--sms-border);border-radius:var(--sms-card-radius,18px);background:var(--sms-surface);box-shadow:var(--sms-card-shadow,0 8px 30px rgba(24,28,45,.05))}.sms-activity-card__header{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:11px;padding:16px 18px}.sms-activity-card__avatar{display:grid;place-items:center;width:44px;height:44px;overflow:hidden;border-radius:50%;background:var(--sms-primary);color:#fff;font-weight:800;text-decoration:none}.sms-activity-card__avatar img{width:100%;height:100%;object-fit:cover}.sms-activity-card__header>div{min-width:0}.sms-activity-card__header a{text-decoration:none;color:var(--sms-text)}.sms-activity-card__header strong,.sms-activity-card__header span{display:block}.sms-activity-card__header span{margin-top:2px;color:var(--sms-muted);font-size:.78rem}.sms-activity-card__visibility{padding:5px 8px;border-radius:999px;background:var(--sms-surface-soft);font-size:.72rem!important}.sms-activity-card__body{padding:0 18px 17px}.sms-activity-card__body h3{margin:0 0 8px}.sms-activity-card__body p{margin:0;white-space:normal;overflow-wrap:anywhere;line-height:1.65}.sms-activity-card__media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}.sms-activity-card__media figure{margin:0;min-height:180px;background:var(--sms-surface-soft)}.sms-activity-card__media img{width:100%;height:100%;object-fit:cover}.sms-activity-card__footer{display:flex;justify-content:space-between;gap:12px;padding:11px 18px;border-top:1px solid var(--sms-border);color:var(--sms-muted);font-size:.74rem}.sms-profile-stream>.sms-activity-stream,.sms-profile-stream>.sms-app-empty-state{margin:14px} @media(max-width:767px){.sms-activity-foundation{flex-direction:column;padding:18px}.sms-activity-foundation dl{grid-template-columns:repeat(3,1fr)}.sms-activity-foundation dl div{min-width:0;padding:9px}.sms-activity-card__header{grid-template-columns:40px minmax(0,1fr);padding:14px}.sms-activity-card__avatar{width:40px;height:40px}.sms-activity-card__visibility{display:none!important}.sms-activity-card__body{padding:0 14px 14px}.sms-activity-card__footer{flex-direction:column;padding:10px 14px}.sms-activity-card__media{grid-template-columns:1fr}} /* 0.5.0-alpha.2 — text and image Composer. */ .sms-composer{margin-block-end:16px;border:1px solid var(--sms-border);border-radius:var(--sms-card-radius,18px);background:var(--sms-surface);box-shadow:var(--sms-card-shadow,0 8px 30px rgba(24,28,45,.05));overflow:hidden}.sms-profile-card+.sms-composer{margin-block-start:18px}.sms-composer__header{display:flex;align-items:center;gap:12px;padding:16px 18px;border-block-end:1px solid var(--sms-border)}.sms-composer__avatar{inline-size:42px;block-size:42px;border-radius:50%;display:grid;place-items:center;background:var(--sms-primary);color:#fff;font-weight:800}.sms-composer__header strong,.sms-composer__header span{display:block}.sms-composer__header span{margin-block-start:2px;color:var(--sms-muted);font-size:.78rem}.sms-composer__notice{margin:14px 18px 0;padding:10px 12px;border-radius:10px;background:var(--sms-success-soft);color:var(--sms-text)}.sms-composer__notice[data-kind=error]{background:color-mix(in srgb,#d64a4a 14%,var(--sms-surface));color:#b32d2e}.sms-composer__modes{display:flex;gap:6px;padding:14px 18px 0}.sms-composer__modes button{border:1px solid var(--sms-border);border-radius:999px;background:var(--sms-surface-soft);color:var(--sms-muted);padding:7px 13px;font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}.sms-composer__modes button.is-active{border-color:color-mix(in srgb,var(--sms-primary) 45%,var(--sms-border));background:var(--sms-primary-soft);color:var(--sms-primary)}.sms-composer form{padding:12px 18px 16px}.sms-composer__text{display:block;position:relative}.sms-composer__text textarea{inline-size:100%;min-block-size:110px;resize:vertical;box-sizing:border-box;border:0;outline:0;background:transparent;color:var(--sms-text);font:inherit;font-size:1rem;line-height:1.55;padding:8px 2px 22px}.sms-composer__text small{position:absolute;inset-inline-end:2px;inset-block-end:4px;color:var(--sms-muted);font-size:.72rem}.sms-composer__images{padding-block:7px 12px}.sms-composer__picker{display:grid;place-items:center;gap:4px;border:1px dashed var(--sms-border-strong);border-radius:14px;background:var(--sms-surface-soft);padding:18px;text-align:center;cursor:pointer}.sms-composer__picker input{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0)}.sms-composer__picker span{color:var(--sms-primary);font-weight:800}.sms-composer__picker small{color:var(--sms-muted)}.sms-composer__previews{display:grid;gap:8px;margin-block-start:10px}.sms-composer-preview{display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-surface-soft);padding:8px}.sms-composer-preview__image{inline-size:70px;block-size:58px;border-radius:9px;overflow:hidden;background:var(--sms-surface-strong)}.sms-composer-preview__image img{inline-size:100%;block-size:100%;object-fit:cover}.sms-composer-preview__copy{min-inline-size:0}.sms-composer-preview__copy strong,.sms-composer-preview__copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sms-composer-preview__copy strong{font-size:.82rem}.sms-composer-preview__copy span{color:var(--sms-muted);font-size:.72rem;margin-block:3px}.sms-composer-preview progress{display:block;inline-size:100%;block-size:5px}.sms-composer-preview button{inline-size:32px;block-size:32px;border:0;border-radius:9px;background:var(--sms-surface-strong);color:var(--sms-muted);font:inherit;font-size:1.25rem;cursor:pointer}.sms-composer-preview[data-status=failed]{border-color:color-mix(in srgb,#d64a4a 45%,var(--sms-border))}.sms-composer__footer{display:flex;align-items:end;justify-content:space-between;gap:14px;padding-block-start:12px;border-block-start:1px solid var(--sms-border)}.sms-composer__footer>label{display:grid;gap:4px;color:var(--sms-muted);font-size:.72rem}.sms-composer__footer select{border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface-soft);color:var(--sms-text);padding:8px 10px;font:inherit}.sms-composer__footer>div{display:flex;gap:8px}.sms-composer__reset,.sms-composer__publish{border:0;border-radius:11px;padding:9px 15px;font:inherit;font-weight:800;cursor:pointer}.sms-composer__cancel{display:none;background:transparent;color:var(--sms-text);border:1px solid var(--sms-border)!important}.sms-composer__reset{background:var(--sms-surface-strong);color:var(--sms-text)}.sms-composer__publish{background:var(--sms-primary);color:#fff}.sms-composer__publish:disabled{opacity:.5;cursor:not-allowed} @media(max-width:767px){.sms-composer__header{padding:14px}.sms-composer form{padding:10px 14px 14px}.sms-composer__modes{padding-inline:14px}.sms-composer__footer{align-items:stretch;flex-direction:column}.sms-composer__footer>div{display:grid;grid-template-columns:1fr 1fr}.sms-composer-preview{grid-template-columns:58px minmax(0,1fr) auto}.sms-composer-preview__image{inline-size:58px;block-size:52px}} .sms-activity-insertion{min-inline-size:0}.sms-profile-stream>.sms-activity-insertion{margin:14px}.sms-activity-card__media--1{grid-template-columns:1fr}.sms-activity-card__media--1 figure{max-block-size:620px} /* 0.5.0-alpha.3 — native media and polls */ .sms-composer__modes{flex-wrap:wrap}.sms-composer__panel{padding-block:7px 12px}.sms-composer__native-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sms-composer-preview__image.is-file{display:grid;place-items:center;color:var(--sms-primary);font-size:.68rem;font-weight:900;letter-spacing:.08em}.sms-composer-preview__copy{position:relative}.sms-composer-preview__retry{display:inline-flex!important;width:auto!important;height:auto!important;margin-top:5px;padding:4px 8px!important;border:1px solid var(--sms-border)!important;border-radius:8px!important;background:var(--sms-surface)!important;color:var(--sms-primary)!important;font-size:.7rem!important}.sms-composer-preview__retry[hidden]{display:none!important}.sms-composer__poll{display:grid;gap:12px}.sms-composer__poll>label,.sms-composer__poll [data-sms-poll-options] label,.sms-composer__poll-actions label{display:grid;gap:5px;color:var(--sms-muted);font-size:.75rem}.sms-composer__poll input,.sms-composer__poll select{width:100%;box-sizing:border-box;border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface-soft);color:var(--sms-text);padding:10px;font:inherit}.sms-composer__poll [data-sms-poll-options]{display:grid;gap:8px}.sms-composer__poll [data-sms-poll-options] label{position:relative}.sms-composer__poll [data-sms-poll-options] label button{position:absolute;right:6px;bottom:6px;width:30px;height:30px;border:0;border-radius:8px;background:var(--sms-surface-strong);color:var(--sms-muted);cursor:pointer}.sms-composer__poll-actions{display:flex;justify-content:space-between;align-items:end;gap:12px}.sms-composer__poll-actions>button{border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface-soft);color:var(--sms-primary);padding:9px 12px;font:inherit;font-weight:750;cursor:pointer}.sms-activity-card__native{background:#090b11}.sms-activity-card__native video{display:block;width:100%;max-height:720px;background:#090b11}.sms-activity-card__audio{padding:14px 18px;border-top:1px solid var(--sms-border)}.sms-activity-card__audio audio{display:block;width:100%}.sms-activity-card__poll{margin:0 18px 18px;padding:16px;border:1px solid var(--sms-border);border-radius:14px;background:var(--sms-surface-soft)}.sms-activity-card__poll h3{margin:0 0 12px}.sms-activity-card__poll>div{display:grid;gap:8px}.sms-activity-card__poll button{display:flex;justify-content:space-between;gap:10px;width:100%;border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface);color:var(--sms-text);padding:10px 12px;text-align:left}.sms-activity-card__poll button small{color:var(--sms-muted)}.sms-activity-card__poll p{margin:10px 0 0;color:var(--sms-muted);font-size:.75rem} @media(max-width:767px){.sms-composer__native-grid{grid-template-columns:1fr}.sms-composer__poll-actions{align-items:stretch;flex-direction:column}.sms-composer__poll-actions>*{width:100%}.sms-activity-card__poll{margin-inline:14px}} /* 0.5.0-alpha.4 — external content */ .sms-composer__link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}.sms-composer__link>label{display:grid;gap:5px;color:var(--sms-muted);font-size:.75rem}.sms-composer__link input{width:100%;box-sizing:border-box;border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface-soft);color:var(--sms-text);padding:10px;font:inherit}.sms-composer__link>button{border:0;border-radius:10px;background:var(--sms-primary);color:#fff;padding:10px 14px;font:inherit;font-weight:800;cursor:pointer}.sms-composer__link>button:disabled{opacity:.5;cursor:not-allowed}.sms-composer__link>small,.sms-composer__link-preview{grid-column:1/-1}.sms-composer__link>small{color:var(--sms-muted);line-height:1.5}.sms-composer-link-card{display:grid;grid-template-columns:120px minmax(0,1fr);overflow:hidden;border:1px solid var(--sms-border);border-radius:13px;background:var(--sms-surface-soft)}.sms-composer-link-card[data-kind=embed]{grid-template-columns:1fr}.sms-composer-link-card__image{min-height:94px;background:var(--sms-surface-strong)}.sms-composer-link-card__image img{width:100%;height:100%;object-fit:cover}.sms-composer-link-card__copy{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12px;min-width:0}.sms-composer-link-card__copy small{color:var(--sms-primary);font-weight:800;text-transform:uppercase;letter-spacing:.04em}.sms-composer-link-card__copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sms-composer-link-card__copy span{display:-webkit-box;overflow:hidden;color:var(--sms-muted);font-size:.8rem;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}.sms-activity-card__embed{position:relative;width:100%;background:#000;overflow:hidden}.sms-activity-card__embed--16x9{aspect-ratio:16/9}.sms-activity-card__embed--9x16{aspect-ratio:9/16;max-width:390px;margin-inline:auto}.sms-activity-card__embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.sms-activity-card__article{display:grid;grid-template-columns:minmax(150px,34%) minmax(0,1fr);margin:0 18px 18px;overflow:hidden;border:1px solid var(--sms-border);border-radius:14px;background:var(--sms-surface-soft);color:var(--sms-text);text-decoration:none}.sms-activity-card__article:hover{border-color:color-mix(in srgb,var(--sms-primary) 45%,var(--sms-border))}.sms-activity-card__article-image{min-height:145px;background:var(--sms-surface-strong)}.sms-activity-card__article-image img{width:100%;height:100%;object-fit:cover}.sms-activity-card__article-copy{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:16px;min-width:0}.sms-activity-card__article-copy small{color:var(--sms-primary);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.sms-activity-card__article-copy strong{font-size:1rem;line-height:1.35}.sms-activity-card__article-copy>span{display:-webkit-box;overflow:hidden;color:var(--sms-muted);font-size:.82rem;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:3} @media(max-width:767px){.sms-composer__link{grid-template-columns:1fr}.sms-composer__link>button{width:100%}.sms-composer-link-card{grid-template-columns:86px minmax(0,1fr)}.sms-activity-card__article{grid-template-columns:1fr;margin:0 14px 14px}.sms-activity-card__article-image{max-height:220px}.sms-activity-card__article-copy{padding:13px}} /* 0.5.0-alpha.5 — Article Reader */ html.sms-reader-open,body.sms-reader-open{overflow:hidden!important;overscroll-behavior:none}.sms-article-reader{position:fixed;z-index:2147482000;inset:0;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:rgba(18,22,33,.64);backdrop-filter:blur(8px)}.sms-article-reader[hidden]{display:none!important}.sms-article-reader__dialog{display:grid;grid-template-rows:auto minmax(0,1fr);width:min(920px,100%);height:min(92vh,960px);max-height:calc(100dvh - 36px);overflow:hidden;border:1px solid var(--sms-border);border-radius:22px;background:var(--sms-surface,#fff);box-shadow:0 30px 90px rgba(0,0,0,.3);color:var(--sms-text,#172033);outline:none}.sms-article-reader__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:10px 14px 10px 18px;border-bottom:1px solid var(--sms-border);background:var(--sms-surface,#fff)}.sms-article-reader__brand{display:flex;align-items:center;gap:10px;min-width:0}.sms-article-reader__brand>span{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--sms-primary);color:#fff;font-size:.75rem;font-weight:900;letter-spacing:.05em}.sms-article-reader__brand>span.has-logo{overflow:hidden;background:var(--sms-surface-strong);border:1px solid var(--sms-border)}.sms-article-reader__brand>span.has-logo img{display:block;width:100%;height:100%;object-fit:contain;background:#fff}.sms-article-reader__brand div{display:grid;gap:1px}.sms-article-reader__brand strong{font-size:.86rem}.sms-article-reader__brand small{color:var(--sms-muted);font-size:.68rem}.sms-article-reader__close{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:var(--sms-surface-strong);color:var(--sms-text);font:inherit;font-size:1.75rem;line-height:1;cursor:pointer}.sms-article-reader__close:hover,.sms-article-reader__close:focus-visible{outline:2px solid color-mix(in srgb,var(--sms-primary) 55%,transparent);outline-offset:2px}.sms-article-reader__viewport{overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:0}.sms-article-reader__article{width:min(100%,760px);margin-inline:auto;background:var(--sms-surface);min-height:100%}.sms-article-reader__hero{aspect-ratio:16/8.7;overflow:hidden;background:var(--sms-surface-strong)}.sms-article-reader__hero img{display:block;width:100%;height:100%;object-fit:cover}.sms-article-reader__header{padding:34px 38px 20px}.sms-article-reader__header>span{display:block;margin-bottom:9px;color:var(--sms-primary);font-size:.72rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.sms-article-reader__header h1{margin:0;color:var(--sms-text);font-size:clamp(1.7rem,3.2vw,2.65rem);line-height:1.12;letter-spacing:-.025em;overflow-wrap:anywhere}.sms-article-reader__meta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:17px;padding-top:14px;border-top:1px solid var(--sms-border);color:var(--sms-muted);font-size:.78rem}.sms-article-reader__meta a{flex:0 0 auto;color:var(--sms-primary);font-weight:800;text-decoration:none}.sms-article-reader__meta a:hover{text-decoration:underline}.sms-article-reader__fallback{margin:0 38px 22px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--sms-primary) 25%,var(--sms-border));border-radius:12px;background:var(--sms-primary-soft);color:var(--sms-muted-strong);font-size:.8rem;line-height:1.5}.sms-article-reader__content{padding:4px 38px 34px;color:var(--sms-text);font-family:ui-serif,Georgia,Cambria,"Times New Roman",serif;font-size:1.04rem;line-height:1.78;overflow-wrap:anywhere}.sms-article-reader__content *{float:none!important;columns:auto!important;column-count:auto!important;writing-mode:horizontal-tb!important;max-width:100%!important;position:static!important}.sms-article-reader__content h2,.sms-article-reader__content h3,.sms-article-reader__content h4,.sms-article-reader__content h5{font-family:inherit;line-height:1.28;color:var(--sms-text);margin:1.65em 0 .65em}.sms-article-reader__content h2{font-size:1.5em}.sms-article-reader__content h3{font-size:1.28em}.sms-article-reader__content p{margin:0 0 1.15em}.sms-article-reader__content ul,.sms-article-reader__content ol{padding-inline-start:1.5em;margin:0 0 1.2em}.sms-article-reader__content li{margin:.35em 0}.sms-article-reader__content blockquote{margin:1.4em 0;padding:.2em 0 .2em 1.15em;border-left:3px solid var(--sms-primary);color:var(--sms-muted-strong);font-style:italic}.sms-article-reader__content pre{overflow:auto;white-space:pre-wrap;padding:14px;border-radius:12px;background:var(--sms-surface-strong);font:500 .85rem/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}.sms-article-reader__content hr{border:0;border-top:1px solid var(--sms-border);margin:2em 0}.sms-article-reader__comments{margin:0 38px 38px;padding:20px;border:1px solid var(--sms-border);border-radius:16px;background:var(--sms-surface-soft)}.sms-article-reader__comments h2{margin:0 0 6px;font-size:1rem}.sms-article-reader__comments p{margin:0;color:var(--sms-muted);font-size:.8rem;line-height:1.5}.sms-article-reader__state{min-height:340px;display:grid;place-items:center;align-content:center;gap:13px;padding:40px;text-align:center;color:var(--sms-muted)}.sms-article-reader__state strong{color:var(--sms-text)}.sms-article-reader__state p{max-width:520px;margin:0}.sms-article-reader__spinner{width:34px;height:34px;border:3px solid var(--sms-border);border-top-color:var(--sms-primary);border-radius:50%;animation:sms-reader-spin .8s linear infinite}.sms-article-reader__state--error{color:#b32d2e}.sms-activity-card__article[aria-haspopup=dialog]{cursor:pointer}.sms-activity-card__article[aria-haspopup=dialog] .sms-activity-card__article-copy strong::after{content:" ↗";color:var(--sms-primary);font-size:.85em}@keyframes sms-reader-spin{to{transform:rotate(360deg)}}@media(max-width:767px){.sms-article-reader{padding:0;background:var(--sms-surface)}.sms-article-reader__dialog{width:100%;height:100dvh;max-height:none;border:0;border-radius:0}.sms-article-reader__bar{padding-top:max(10px,env(safe-area-inset-top));padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right));min-height:58px}.sms-article-reader__viewport{padding-bottom:env(safe-area-inset-bottom)}.sms-article-reader__hero{aspect-ratio:16/10}.sms-article-reader__header{padding:24px 20px 16px}.sms-article-reader__meta{align-items:flex-start;flex-direction:column;gap:8px}.sms-article-reader__fallback{margin:0 20px 18px}.sms-article-reader__content{padding:2px 20px 28px;font-size:1rem;line-height:1.72}.sms-article-reader__comments{margin:0 20px 28px}}@media(prefers-reduced-motion:reduce){.sms-article-reader__spinner{animation:none}} /* 0.6.0-alpha.1 — canonical reactions */ .sms-reactions{border-top:1px solid var(--sms-border);background:var(--sms-surface)}.sms-reactions__summary{min-height:31px;display:flex;align-items:center;gap:7px;padding:5px 18px 0;color:var(--sms-muted);font-size:.74rem}.sms-reactions__stack{display:flex;align-items:center}.sms-reactions__stack>span{display:grid;place-items:center;width:23px;height:23px;margin-left:-5px;border:2px solid var(--sms-surface);border-radius:50%;background:var(--sms-surface-soft);color:var(--sms-primary)}.sms-reactions__stack>span:first-child{margin-left:0}.sms-reactions__stack:empty+.sms-reactions__total:empty{display:none}.sms-activity-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 12px 10px}.sms-reaction-control{position:relative}.sms-reaction-trigger{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 12px;border:0;border-radius:10px;background:transparent;color:var(--sms-muted-strong);font:inherit;font-size:.8rem;font-weight:750;cursor:pointer}.sms-reaction-trigger:hover,.sms-reaction-trigger:focus-visible,.sms-reaction-control.is-active .sms-reaction-trigger{background:var(--sms-primary-soft);color:var(--sms-primary);outline:none}.sms-reaction-trigger:disabled{opacity:.55;cursor:not-allowed}.sms-reaction-icon{display:block;width:21px;height:21px;flex:0 0 21px}.sms-reaction-icon--love{color:#e54868}.sms-reaction-icon--smile{color:#d29a00}.sms-reaction-icon--surprised{color:#d68300}.sms-reaction-icon--angry{color:#d84b3e}.sms-reaction-icon--confused{color:#8b6cb8}.sms-reaction-icon--sad{color:#548ac8}.sms-reaction-picker{position:absolute;z-index:30;left:0;bottom:calc(100% + 7px);display:flex;align-items:flex-end;gap:3px;padding:7px;border:1px solid var(--sms-border);border-radius:999px;background:var(--sms-surface);box-shadow:0 14px 38px rgba(20,24,38,.18);opacity:0;visibility:hidden;transform:translateY(6px) scale(.96);transform-origin:left bottom;transition:opacity .14s ease,transform .14s ease,visibility .14s}.sms-reaction-control:hover .sms-reaction-picker,.sms-reaction-control:focus-within .sms-reaction-picker,.sms-reaction-picker.is-open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.sms-reaction-picker button{position:relative;display:grid;place-items:center;width:39px;height:39px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;transition:transform .12s ease,background .12s ease}.sms-reaction-picker button:hover,.sms-reaction-picker button:focus-visible,.sms-reaction-picker button.is-selected{transform:translateY(-3px) scale(1.11);background:var(--sms-surface-soft);outline:none}.sms-reaction-picker button small{position:absolute;right:-1px;bottom:-2px;display:grid;place-items:center;min-width:15px;height:15px;padding:0 3px;border-radius:999px;background:var(--sms-text);color:var(--sms-surface);font-size:.55rem;line-height:1}.sms-reaction-picker button small:empty{display:none}.sms-activity-actions__future{color:var(--sms-muted);font-size:.7rem}.sms-reactions.is-busy{opacity:.72}.sms-reactions.has-error .sms-reaction-trigger{color:var(--sms-danger,#b32d2e)} @media(max-width:767px){.sms-reactions__summary{padding-inline:14px}.sms-activity-actions{padding-inline:8px}.sms-reaction-picker{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));max-width:calc(100vw - 24px);transform:translate(-50%,8px) scale(.96);transform-origin:center bottom}.sms-reaction-control:hover .sms-reaction-picker,.sms-reaction-control:focus-within .sms-reaction-picker{opacity:0;visibility:hidden;transform:translate(-50%,8px) scale(.96)}.sms-reaction-picker.is-open{opacity:1!important;visibility:visible!important;transform:translate(-50%,0) scale(1)!important}.sms-reaction-picker button{width:42px;height:42px}.sms-activity-actions__future{display:none}} @media(prefers-reduced-motion:reduce){.sms-reaction-picker,.sms-reaction-picker button{transition:none}} /* 0.6.0-alpha.2 — canonical comments */ .sms-comment-trigger{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 12px;border:0;border-radius:10px;background:transparent;color:var(--sms-muted-strong);font:inherit;font-size:.8rem;font-weight:750;cursor:pointer}.sms-comment-trigger:hover,.sms-comment-trigger:focus-visible,.sms-comment-trigger[aria-expanded=true]{background:var(--sms-primary-soft);color:var(--sms-primary);outline:none}.sms-comment-trigger small{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--sms-surface-strong);font-size:.64rem}.sms-comment-trigger small:empty{display:none}.sms-comment-icon{width:20px;height:20px;display:block;flex:0 0 20px}.sms-comments{border-top:1px solid var(--sms-border);padding:14px 18px 18px;background:var(--sms-surface-soft)}.sms-comments[hidden]{display:none!important}.sms-comments__mount{display:grid;gap:12px}.sms-comments__header{display:flex;align-items:center;justify-content:space-between;gap:12px}.sms-comments__header strong{font-size:.88rem}.sms-comments__header span{color:var(--sms-muted);font-size:.72rem}.sms-comments__header span.is-error{color:var(--sms-danger,#b32d2e)}.sms-comments__list{display:grid;gap:10px}.sms-comments__empty{margin:2px 0;color:var(--sms-muted);font-size:.78rem}.sms-comment{display:grid;grid-template-columns:34px 1fr;column-gap:10px;row-gap:5px;padding:10px 11px;border:1px solid var(--sms-border);border-radius:13px;background:var(--sms-surface)}.sms-comment--reply{margin-left:30px;background:var(--sms-surface-soft)}.sms-comment__author{grid-column:1/-1;display:flex;align-items:center;gap:8px}.sms-comment__avatar{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;overflow:visible;background:transparent;color:var(--sms-primary);font-size:.7rem;font-weight:850;isolation:isolate}.sms-comment__avatar-media{position:relative;z-index:2;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border-radius:50%;background:var(--sms-primary-soft);color:var(--sms-primary)}.sms-comment__avatar img{width:100%;height:100%;object-fit:cover}.sms-comment__author>div{display:grid;gap:1px}.sms-comment__author strong{font-size:.78rem;line-height:1.2}.sms-comment__author small{color:var(--sms-muted);font-size:.64rem}.sms-comment__body{grid-column:1/-1;color:var(--sms-text);font-size:.82rem;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.sms-comment__meta{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--sms-muted);font-size:.64rem}.sms-comment__meta button{padding:0;border:0;background:transparent;color:var(--sms-primary);font:inherit;font-weight:750;cursor:pointer}.sms-comment__meta button.is-danger{color:var(--sms-danger,#b32d2e)}.sms-comment__replies{grid-column:1/-1;display:grid;gap:8px;margin-top:5px}.sms-comment.is-hidden{border-style:dashed;opacity:.82}.sms-comment.is-deleted .sms-comment__body{color:var(--sms-muted);font-style:italic}.sms-comments__composer{display:grid;gap:8px;padding-top:2px}.sms-comments__context{color:var(--sms-primary);font-size:.7rem;font-weight:750}.sms-comments__composer textarea{width:100%;min-height:70px;max-height:180px;resize:vertical;padding:10px 11px;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-surface);color:var(--sms-text);font:inherit;font-size:.82rem;line-height:1.45;outline:none}.sms-comments__composer textarea:focus{border-color:color-mix(in srgb,var(--sms-primary) 55%,var(--sms-border));box-shadow:0 0 0 3px color-mix(in srgb,var(--sms-primary) 12%,transparent)}.sms-comments__composer-actions{display:flex;justify-content:flex-end;gap:8px}.sms-comments__composer-actions button,.sms-comments__more{min-height:34px;padding:7px 11px;border:1px solid var(--sms-border);border-radius:9px;background:var(--sms-surface);color:var(--sms-text);font:inherit;font-size:.72rem;font-weight:750;cursor:pointer}.sms-comments__composer-actions button[type=submit]{border-color:var(--sms-primary);background:var(--sms-primary);color:#fff}.sms-comments__more{justify-self:center}.sms-comments__signin{margin:0;color:var(--sms-muted);font-size:.72rem}.sms-comments--reader{margin:0 38px 38px}.sms-comments--reader.sms-article-reader__comments{padding:18px;border:1px solid var(--sms-border);border-radius:16px;background:var(--sms-surface-soft)} @media(max-width:767px){.sms-comments{padding-inline:14px}.sms-comment-trigger{padding-inline:9px}.sms-comment--reply{margin-left:16px}.sms-comments--reader{margin:0 20px 28px}.sms-activity-actions{justify-content:flex-start}.sms-activity-actions__future{display:none}} /* 0.6.0-alpha.3 — Unified Share Modal */ /* 0.7.0-alpha.3.1 — Modal Surface Hotfix * Share, Saved and Article Reader are body-level portals. Their dialogs must * always be opaque; only the backdrop is translucent/blurred. */ .sms-share-control{margin-left:auto}.sms-share-trigger{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:7px 12px;border:0;border-radius:10px;background:transparent;color:var(--sms-muted-strong);font:inherit;font-size:.8rem;font-weight:750;cursor:pointer}.sms-share-trigger:hover,.sms-share-trigger:focus-visible,.sms-share-control.is-shared .sms-share-trigger{background:var(--sms-primary-soft);color:var(--sms-primary);outline:none}.sms-share-trigger small{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--sms-surface-strong);font-size:.64rem}.sms-share-trigger small:empty{display:none}.sms-share-icon{display:block;width:20px;height:20px;flex:0 0 20px}.sms-shared-preview{margin:2px 18px 14px;padding:13px 14px;border:1px solid var(--sms-border);border-radius:14px;background:var(--sms-surface-soft);overflow:hidden}.sms-shared-preview__author{display:flex;align-items:baseline;gap:7px;margin-bottom:8px}.sms-shared-preview__author a{display:flex;align-items:baseline;gap:7px;color:inherit;text-decoration:none}.sms-shared-preview__author strong{font-size:.82rem}.sms-shared-preview__author span{color:var(--sms-muted);font-size:.7rem}.sms-shared-preview p{margin:0;color:var(--sms-text);font-size:.82rem;line-height:1.5;overflow-wrap:anywhere}.sms-shared-preview>img{display:block;width:100%;max-height:340px;object-fit:cover;margin-top:11px;border-radius:11px}.sms-shared-preview--missing{display:grid;gap:4px;color:var(--sms-muted)}.sms-shared-preview--missing strong{color:var(--sms-text);font-size:.8rem}.sms-shared-preview--missing span{font-size:.72rem}.sms-share-modal-open{overflow:hidden}.sms-share-modal{position:fixed;z-index:100100;inset:0;display:grid;place-items:center;padding:24px;background:rgba(18,22,33,.55);backdrop-filter:blur(4px)}.sms-share-modal__dialog{width:min(560px,100%);max-height:min(760px,calc(100dvh - 48px));overflow:auto;border:1px solid var(--sms-border);border-radius:20px;background:var(--sms-surface,#fff);box-shadow:0 24px 70px rgba(15,20,35,.24);color:var(--sms-text,#172033)}.sms-share-modal__dialog>header{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 14px;border-bottom:1px solid var(--sms-border);background:var(--sms-surface,#fff);backdrop-filter:none}.sms-share-modal__dialog>header span{display:block;color:var(--sms-primary);font-size:.68rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.sms-share-modal__dialog>header h2{margin:4px 0 0;font-size:1.12rem}.sms-share-modal__dialog>header button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface-soft);color:var(--sms-text);font-size:1.35rem;line-height:1;cursor:pointer}.sms-share-modal__body{display:grid;gap:16px;padding:18px 20px 20px}.sms-share-modal__commentary{display:grid;gap:7px}.sms-share-modal__commentary>span{font-size:.78rem;font-weight:800}.sms-share-modal__commentary textarea{width:100%;min-height:82px;resize:vertical;padding:10px 11px;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-surface-soft);color:var(--sms-text);font:inherit;font-size:.82rem;line-height:1.45;outline:none}.sms-share-modal__commentary textarea:focus{border-color:color-mix(in srgb,var(--sms-primary) 55%,var(--sms-border));box-shadow:0 0 0 3px color-mix(in srgb,var(--sms-primary) 12%,transparent)}.sms-share-modal__commentary small{justify-self:end;color:var(--sms-muted);font-size:.65rem}.sms-share-modal__signin{margin:0;padding:10px 12px;border-radius:11px;background:var(--sms-surface-soft);color:var(--sms-muted);font-size:.76rem}.sms-share-modal__targets{display:grid;grid-template-columns:1fr 1fr;gap:9px}.sms-share-target{display:grid;gap:3px;min-height:76px;padding:12px 13px;border:1px solid var(--sms-border);border-radius:13px;background:var(--sms-surface);color:var(--sms-text);text-align:left;cursor:pointer}.sms-share-target strong{font-size:.78rem}.sms-share-target span{color:var(--sms-muted);font-size:.68rem;line-height:1.35}.sms-share-target:hover:not(:disabled),.sms-share-target:focus-visible:not(:disabled),.sms-share-target.is-primary{border-color:color-mix(in srgb,var(--sms-primary) 45%,var(--sms-border));background:var(--sms-primary-soft);outline:none}.sms-share-target:disabled{opacity:.48;cursor:not-allowed}.sms-share-modal__status{min-height:18px;margin:0;color:var(--sms-primary);font-size:.72rem;font-weight:750}.sms-share-modal__status.is-error{color:var(--sms-danger,#b32d2e)}.sms-share-modal.is-busy .sms-share-modal__dialog{cursor:progress} @media(max-width:767px){.sms-share-control{margin-left:0}.sms-share-trigger{padding-inline:9px}.sms-shared-preview{margin-inline:14px}.sms-share-modal{place-items:end center;padding:0;background:rgba(18,22,33,.52)}.sms-share-modal__dialog{width:100%;max-height:90dvh;border-width:1px 0 0;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom)}.sms-share-modal__dialog>header{padding-top:16px}.sms-share-modal__targets{grid-template-columns:1fr}.sms-share-target{min-height:64px}} @media(prefers-reduced-motion:reduce){.sms-share-modal{backdrop-filter:none}} /* 0.6.0-alpha.4 — private Saved & Collections */ .sms-save-control{display:inline-flex;align-items:center;gap:2px}.sms-save-trigger,.sms-save-collections-trigger{display:inline-flex;align-items:center;justify-content:center;min-height:36px;border:0;border-radius:10px;background:transparent;color:var(--sms-muted-strong);font:inherit;font-size:.8rem;font-weight:750;cursor:pointer}.sms-save-trigger{gap:7px;padding:7px 10px}.sms-save-collections-trigger{min-width:32px;padding:7px 8px;font-size:.72rem;letter-spacing:.06em}.sms-save-trigger:hover,.sms-save-trigger:focus-visible,.sms-save-collections-trigger:hover,.sms-save-collections-trigger:focus-visible,.sms-save-control.is-saved .sms-save-trigger{background:var(--sms-primary-soft);color:var(--sms-primary);outline:none}.sms-save-control.is-saved .sms-save-icon{fill:currentColor}.sms-save-trigger:disabled{opacity:.48;cursor:not-allowed}.sms-save-icon{display:block;width:19px;height:19px;flex:0 0 19px}.sms-save-control.is-busy{opacity:.65;pointer-events:none}.sms-save-control.has-error .sms-save-trigger{color:var(--sms-danger,#b32d2e)} .sms-saved-library{display:grid;gap:16px}.sms-saved-library__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:18px;border:1px solid var(--sms-border);border-radius:18px;background:var(--sms-surface);box-shadow:var(--sms-shadow-sm)}.sms-saved-library__toolbar h2{margin:4px 0 5px;font-size:1.1rem}.sms-saved-library__toolbar p{max-width:620px;margin:0;color:var(--sms-muted);font-size:.76rem;line-height:1.5}.sms-saved-filters{display:flex;align-items:center;gap:8px;max-width:100%;overflow:auto;padding:2px 1px 5px;scrollbar-width:none}.sms-saved-filters::-webkit-scrollbar{display:none}.sms-saved-filters a{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;min-height:34px;padding:7px 11px;border:1px solid var(--sms-border);border-radius:999px;background:var(--sms-surface);color:var(--sms-muted-strong);font-size:.72rem;font-weight:750;text-decoration:none}.sms-saved-filters a:hover,.sms-saved-filters a:focus-visible,.sms-saved-filters a.is-active{border-color:color-mix(in srgb,var(--sms-primary) 42%,var(--sms-border));background:var(--sms-primary-soft);color:var(--sms-primary);outline:none}.sms-saved-filters a small{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--sms-surface-strong);font-size:.6rem}.sms-saved-library__manage{display:flex;justify-content:flex-end;margin-top:-6px} .sms-saved-modal-open{overflow:hidden}.sms-saved-modal{position:fixed;z-index:100110;inset:0;display:grid;place-items:center;padding:24px;background:rgba(18,22,33,.55);backdrop-filter:blur(4px)}.sms-saved-modal__dialog{width:min(520px,100%);max-height:min(760px,calc(100dvh - 48px));overflow:auto;border:1px solid var(--sms-border);border-radius:20px;background:var(--sms-surface,#fff);box-shadow:0 24px 70px rgba(15,20,35,.24);color:var(--sms-text,#172033)}.sms-saved-modal__dialog>header{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 14px;border-bottom:1px solid var(--sms-border);background:var(--sms-surface,#fff);backdrop-filter:none}.sms-saved-modal__dialog>header span{display:block;color:var(--sms-primary);font-size:.68rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.sms-saved-modal__dialog>header h2{margin:4px 0 0;font-size:1.12rem}.sms-saved-modal__dialog>header button{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface-soft);color:var(--sms-text);font-size:1.35rem;line-height:1;cursor:pointer}.sms-saved-modal__body{display:grid;gap:14px;padding:18px 20px 20px}.sms-saved-modal__intro{margin:0;color:var(--sms-muted);font-size:.76rem;line-height:1.5}.sms-saved-modal__collections{display:grid;gap:7px}.sms-saved-collection-option{display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-surface-soft);cursor:pointer}.sms-saved-collection-option input{width:18px;height:18px;accent-color:var(--sms-primary)}.sms-saved-collection-option>span{display:grid;gap:2px}.sms-saved-collection-option strong{font-size:.78rem}.sms-saved-collection-option small{color:var(--sms-muted);font-size:.66rem}.sms-saved-modal__empty{margin:0;padding:12px;border:1px dashed var(--sms-border);border-radius:12px;color:var(--sms-muted);font-size:.74rem}.sms-saved-modal__create,.sms-saved-modal__manage{display:grid;gap:9px}.sms-saved-modal__create:not(.sms-saved-modal__create--standalone){grid-template-columns:minmax(0,1fr) auto}.sms-saved-modal__create label,.sms-saved-modal__manage label{display:grid;gap:6px}.sms-saved-modal__create label span,.sms-saved-modal__manage label span{font-size:.72rem;font-weight:800}.sms-saved-modal__create input,.sms-saved-modal__manage input{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface-soft);color:var(--sms-text);font:inherit;font-size:.78rem;outline:none}.sms-saved-modal__create input:focus,.sms-saved-modal__manage input:focus{border-color:color-mix(in srgb,var(--sms-primary) 55%,var(--sms-border));box-shadow:0 0 0 3px color-mix(in srgb,var(--sms-primary) 12%,transparent)}.sms-saved-modal__create button,.sms-saved-modal__manage button{min-height:40px;padding:8px 13px;border:0;border-radius:10px;background:var(--sms-primary);color:#fff;font:inherit;font-size:.74rem;font-weight:800;cursor:pointer}.sms-saved-modal__manage>div{display:flex;gap:8px;justify-content:flex-end}.sms-saved-modal__manage button.is-danger{background:var(--sms-danger,#b32d2e)}.sms-saved-modal__status{min-height:18px;margin:0;color:var(--sms-primary);font-size:.7rem;font-weight:750}.sms-saved-modal__status.is-error{color:var(--sms-danger,#b32d2e)} @media(max-width:767px){.sms-activity-actions{gap:4px;flex-wrap:wrap}.sms-save-trigger{padding-inline:8px}.sms-save-collections-trigger{min-width:30px}.sms-saved-library__toolbar{align-items:stretch;flex-direction:column}.sms-saved-library__toolbar .sms-profile-button{align-self:flex-start}.sms-saved-modal{place-items:end center;padding:0;background:rgba(18,22,33,.52)}.sms-saved-modal__dialog{width:100%;max-height:90dvh;border-width:1px 0 0;border-radius:20px 20px 0 0;padding-bottom:env(safe-area-inset-bottom)}.sms-saved-modal__dialog>header{padding-top:16px}.sms-saved-modal__create:not(.sms-saved-modal__create--standalone){grid-template-columns:1fr}.sms-saved-modal__manage>div{display:grid}.sms-saved-modal__manage button{width:100%}} /* 0.7.0-alpha.1 canonical Social Graph. */ .sms-profile-counts{grid-template-columns:repeat(4,minmax(0,1fr))} .sms-social-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;min-inline-size:0;padding-block-end:2px} .sms-social-actions .sms-profile-button{min-block-size:38px;padding:8px 12px;font-size:13px} .sms-profile-button.is-danger{border-color:color-mix(in srgb,var(--sms-danger,#b32d2e) 28%,var(--sms-border));color:var(--sms-danger,#b32d2e);background:color-mix(in srgb,var(--sms-danger,#b32d2e) 7%,var(--sms-surface))} .sms-profile-button.is-danger:hover,.sms-profile-button.is-danger:focus-visible{border-color:color-mix(in srgb,var(--sms-danger,#b32d2e) 48%,var(--sms-border));background:color-mix(in srgb,var(--sms-danger,#b32d2e) 12%,var(--sms-surface));outline:none} .sms-social-actions [data-sms-social-status]{flex-basis:100%;min-block-size:16px;color:var(--sms-muted);font-size:11px;text-align:right} .sms-social-actions [data-sms-social-status].is-error,.sms-network-card [data-sms-social-status].is-error{color:var(--sms-danger,#b32d2e)} .sms-social-actions.is-busy{cursor:progress} .sms-network{display:grid;gap:18px} .sms-network__summary,.sms-network__section{border:1px solid var(--sms-border);border-radius:var(--sms-radius-lg);background:var(--sms-surface);box-shadow:var(--sms-shadow-sm)} .sms-network__summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;padding:26px 28px} .sms-network__summary h2{margin:5px 0 8px;color:var(--sms-text);font-size:25px;line-height:1.15} .sms-network__summary p{max-inline-size:680px;margin:0;color:var(--sms-muted);font-size:13px;line-height:1.6} .sms-network__summary dl{display:grid;grid-template-columns:repeat(4,minmax(78px,1fr));gap:8px;margin:0} .sms-network__summary dl>div{min-inline-size:82px;padding:11px 12px;border:1px solid var(--sms-border);border-radius:13px;background:var(--sms-surface-soft);text-align:center} .sms-network__summary dt{color:var(--sms-muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.045em} .sms-network__summary dd{margin:4px 0 0;color:var(--sms-text);font-size:20px;font-weight:850;line-height:1} .sms-network__section{overflow:hidden} .sms-network__section>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-block-end:1px solid var(--sms-border)} .sms-network__section>header h3{margin:0;color:var(--sms-text);font-size:15px} .sms-network__section>header span{display:grid;place-items:center;min-inline-size:26px;block-size:26px;padding-inline:7px;border-radius:999px;background:var(--sms-surface-strong);color:var(--sms-muted-strong);font-size:11px;font-weight:800} .sms-network__list{display:grid} .sms-network__empty{padding:20px 18px;color:var(--sms-muted);font-size:13px} .sms-network-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:center;padding:13px 18px;border-block-end:1px solid var(--sms-border)} .sms-network-card:last-child{border-block-end:0} .sms-network-card__avatar{display:grid;place-items:center;inline-size:46px;block-size:46px;overflow:hidden;border-radius:50%;background:var(--sms-primary);color:#fff;text-decoration:none;font-weight:850} .sms-network-card__avatar img{inline-size:100%;block-size:100%;object-fit:cover} .sms-network-card>div{min-inline-size:0} .sms-network-card>div>a{display:flex;align-items:baseline;gap:7px;min-inline-size:0;color:var(--sms-text);text-decoration:none} .sms-network-card strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px} .sms-network-card small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sms-muted);font-size:11px} .sms-network-card p{margin:3px 0 0;color:var(--sms-muted);font-size:11px} .sms-network-card [data-sms-social-status]{display:block;min-block-size:0;margin-block-start:3px;color:var(--sms-muted);font-size:10px} .sms-network-card .sms-profile-button{min-block-size:36px;padding:7px 11px;font-size:12px} @media(max-width:1100px){ .sms-network__summary{grid-template-columns:1fr} .sms-network__summary dl{inline-size:100%} } @media(max-width:767px){ .sms-message-media-viewer{padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))} .sms-message-media-viewer__stage>img{max-inline-size:100vw;max-block-size:calc(100dvh - 82px);border-radius:0} .sms-profile-main>.sms-social-actions{grid-column:1/-1;inline-size:100%;justify-content:stretch;padding-block-end:0} .sms-social-actions .sms-profile-button{flex:1 1 100px} .sms-social-actions [data-sms-social-status]{text-align:left} .sms-network{gap:12px} .sms-network__summary{padding:20px 18px;gap:18px} .sms-network__summary dl{grid-template-columns:repeat(2,minmax(0,1fr))} .sms-network__summary dl>div{min-inline-size:0} .sms-network-card{grid-template-columns:auto minmax(0,1fr);padding:12px 14px} .sms-network-card>.sms-profile-button{grid-column:2;justify-self:start;min-inline-size:110px} } @media(max-width:390px){ .sms-profile-counts{grid-template-columns:repeat(2,minmax(0,1fr))} .sms-profile-counts div{border-inline-end:1px solid var(--sms-border);border-block-end:1px solid var(--sms-border)} .sms-profile-counts div:nth-child(2n){border-inline-end:0} .sms-profile-counts div:nth-last-child(-n+2){border-block-end:0} .sms-social-actions{display:grid;grid-template-columns:1fr 1fr} .sms-social-actions .sms-profile-button:last-of-type{grid-column:1/-1} .sms-social-actions [data-sms-social-status]{grid-column:1/-1} .sms-network__summary h2{font-size:22px} .sms-network-card{grid-template-columns:auto minmax(0,1fr)} } .sms-network-card__actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap} .sms-network-card__actions .sms-profile-button{min-block-size:36px;padding:7px 11px;font-size:12px} @media(max-width:767px){.sms-network-card__actions{grid-column:2;justify-content:flex-start}.sms-network-card__actions .sms-profile-button{min-inline-size:96px}} /* 0.7.0-alpha.2 — Notifications */ .sms-app-notification-action{position:relative;text-decoration:none} .sms-app-notification-badge{position:absolute;inset-block-start:-5px;inset-inline-end:-6px;min-inline-size:18px;block-size:18px;padding-inline:4px;border-radius:999px;background:var(--sms-primary,#5b55ea);color:#fff;font-size:10px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px var(--sms-surface,#fff)} .sms-app-notification-action.has-unread{color:var(--sms-primary,#5b55ea)} .sms-notifications{display:grid;gap:18px} .sms-notifications__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px;border:1px solid var(--sms-border,#e6e8ef);border-radius:20px;background:var(--sms-surface,#fff)} .sms-notifications__toolbar h2{margin:4px 0 6px;font-size:24px}.sms-notifications__toolbar p{margin:0;color:var(--sms-muted,#6b7280)} .sms-notifications__toolbar>div:last-child{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .sms-notifications__list{display:grid;gap:10px} .sms-notification{display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--sms-border,#e6e8ef);border-radius:16px;background:var(--sms-surface,#fff)} .sms-notification.is-unread{border-color:color-mix(in srgb,var(--sms-primary,#5b55ea) 28%,var(--sms-border,#e6e8ef));background:color-mix(in srgb,var(--sms-primary,#5b55ea) 5%,var(--sms-surface,#fff))} .sms-notification__avatar{inline-size:46px;block-size:46px;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--sms-primary,#5b55ea) 12%,var(--sms-surface,#fff));display:grid;place-items:center;font-weight:800}.sms-notification__avatar img{inline-size:100%;block-size:100%;object-fit:cover} .sms-notification__body{min-inline-size:0}.sms-notification__body p{margin:0 0 4px;line-height:1.45}.sms-notification__body a{color:inherit;text-decoration:none}.sms-notification__body a:hover{text-decoration:underline}.sms-notification__body small{color:var(--sms-muted,#6b7280)} .sms-notification__read{inline-size:34px;block-size:34px;border:1px solid var(--sms-border,#e6e8ef);border-radius:10px;background:transparent;color:var(--sms-primary,#5b55ea);cursor:pointer;font-weight:800} .sms-notification-preferences{display:grid;gap:16px;padding:22px;border:1px solid var(--sms-border,#e6e8ef);border-radius:20px;background:var(--sms-surface,#fff)}.sms-notification-preferences h3{margin:0 0 4px}.sms-notification-preferences p{margin:0;color:var(--sms-muted,#6b7280)} .sms-notification-preferences__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sms-notification-preferences__grid label{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--sms-border,#e6e8ef);border-radius:12px}.sms-notification-preferences__grid input{inline-size:18px;block-size:18px}.sms-notification-preferences>button{justify-self:start}.sms-notification-preferences>small{min-block-size:18px;color:var(--sms-muted,#6b7280)} @media (max-width:767px){.sms-notifications__toolbar{padding:16px;flex-direction:column}.sms-notifications__toolbar>div:last-child{justify-content:flex-start}.sms-notification{grid-template-columns:40px minmax(0,1fr) auto;padding:12px}.sms-notification__avatar{inline-size:40px;block-size:40px;border-radius:12px}.sms-notification-preferences{padding:16px}.sms-notification-preferences__grid{grid-template-columns:1fr}} /* 0.7.0-alpha.3 — Discover & Ranking */ .sms-discover{display:grid;gap:14px;min-width:0}.sms-discover__intro{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;border:1px solid var(--sms-border,#e5e7eb);border-radius:18px;background:var(--sms-surface,#fff);box-shadow:var(--sms-shadow-sm)}.sms-discover__copy{min-width:0}.sms-discover__intro .sms-app-kicker{font-size:.65rem!important;letter-spacing:.07em!important}.sms-discover__intro h2{margin:4px 0 5px!important;font-size:1.1rem!important;line-height:1.24!important;color:var(--sms-text,#101828)!important}.sms-discover__intro p{margin:0!important;max-width:650px!important;color:var(--sms-muted,#667085)!important;font-size:.76rem!important;line-height:1.5!important}.sms-discover__sort,.sms-discover__tabs{display:flex;gap:8px;flex-wrap:wrap}.sms-discover__sort{flex:0 0 auto}.sms-discover__sort a,.sms-discover__tabs a{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 11px;border:1px solid var(--sms-border,#e5e7eb);border-radius:999px;background:var(--sms-surface,#fff);color:var(--sms-muted-strong,#475467);font-size:.72rem!important;font-weight:750;text-decoration:none}.sms-discover__sort a:hover,.sms-discover__sort a:focus-visible,.sms-discover__tabs a:hover,.sms-discover__tabs a:focus-visible,.sms-discover__sort a.is-active,.sms-discover__tabs a.is-active{border-color:color-mix(in srgb,var(--sms-primary) 42%,var(--sms-border));background:var(--sms-primary-soft);color:var(--sms-primary);outline:none}.sms-discover__tabs{max-width:100%;overflow:auto;padding:2px 1px 5px;flex-wrap:nowrap;scrollbar-width:none}.sms-discover__tabs::-webkit-scrollbar{display:none}.sms-discover__tabs a{flex:0 0 auto}.sms-discover__stream{display:grid;gap:12px}.sms-discover-result{display:grid;gap:6px;min-width:0}.sms-discover-result__why{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:0 4px;color:var(--sms-muted,#667085);font-size:.66rem!important}.sms-discover-result__why strong{color:var(--sms-text,#101828);font-size:.62rem!important;text-transform:uppercase;letter-spacing:.06em}.sms-discover-result__why small{margin-left:auto;color:var(--sms-muted,#667085);font-size:.62rem!important}.sms-discover__signals{padding:11px 13px;border:1px solid var(--sms-border,#e5e7eb);border-radius:14px;background:var(--sms-surface,#fff);color:var(--sms-muted,#667085);font-size:.7rem!important}.sms-discover__signals summary{cursor:pointer;color:var(--sms-text,#101828);font-size:.72rem!important;font-weight:750}.sms-discover__signals ul{margin:9px 0 0;padding-left:18px;display:grid;gap:4px}.sms-discover__signals li{line-height:1.4}.sms-discover>.sms-app-empty-state{padding:14px 16px;border-radius:14px}.sms-discover .sms-group-grid--discover,.sms-discover .sms-page-grid--discover{margin-top:0} @media (max-width:767px){.sms-discover{gap:11px}.sms-discover__intro{display:grid;align-items:stretch;padding:14px;border-radius:16px;gap:12px}.sms-discover__intro h2{font-size:1rem!important}.sms-discover__intro p{font-size:.72rem!important}.sms-discover__sort{width:100%;gap:6px}.sms-discover__sort a{flex:1;min-height:38px}.sms-discover__tabs{gap:6px;padding-bottom:4px}.sms-discover__tabs a{min-height:36px;padding:7px 10px}.sms-discover-result__why small{width:100%;margin-left:0}.sms-discover__signals{border-radius:13px;padding:10px 12px}} /* 0.7.0-alpha.3.2 — Compact Feed & Modal Composer */ html.sms-composer-modal-open,body.sms-composer-modal-open{overflow:hidden!important;overscroll-behavior:none} .sms-app-centre__stream[data-sms-route="feed"]>.sms-app-view-heading{display:none} .sms-app-centre__stream[data-sms-route="feed"]{padding-block-start:18px} .sms-composer{margin-block-end:14px;overflow:visible;border:0;border-radius:16px;background:transparent;box-shadow:none} .sms-profile-card+.sms-composer{margin-block-start:14px} .sms-composer-launcher{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--sms-border);border-radius:16px;background:var(--sms-surface);box-shadow:var(--sms-card-shadow,0 8px 30px rgba(24,28,45,.05))} .sms-composer-launcher__avatar,.sms-composer__avatar{display:grid;place-items:center;overflow:hidden;border-radius:50%;background:var(--sms-primary);color:#fff;font-weight:850;flex:0 0 auto} .sms-composer-launcher__avatar{inline-size:42px;block-size:42px} .sms-composer__avatar{inline-size:44px;block-size:44px} .sms-composer-launcher__avatar img,.sms-composer__avatar img{inline-size:100%;block-size:100%;object-fit:cover} .sms-composer-launcher__prompt{min-inline-size:0;min-block-size:42px;padding:9px 14px;border:0;border-radius:999px;background:var(--sms-surface-soft);color:var(--sms-muted-strong);font:inherit;font-size:.9rem;text-align:start;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sms-composer-launcher__prompt:hover,.sms-composer-launcher__prompt:focus-visible{background:var(--sms-surface-strong);color:var(--sms-text);outline:2px solid color-mix(in srgb,var(--sms-primary) 35%,transparent);outline-offset:2px} .sms-composer-launcher__quick{display:flex;align-items:center;gap:3px} .sms-composer-launcher__quick button{display:grid;place-items:center;inline-size:38px;block-size:38px;padding:0;border:0;border-radius:11px;background:transparent;color:var(--sms-muted-strong);cursor:pointer} .sms-composer-launcher__quick button:hover,.sms-composer-launcher__quick button:focus-visible{background:var(--sms-primary-soft);color:var(--sms-primary);outline:none} .sms-composer-launcher__quick svg,.sms-composer__modes svg{inline-size:21px;block-size:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .sms-composer__overlay{position:fixed;z-index:2147482200;inset:0;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));background:rgba(18,22,33,.64);backdrop-filter:blur(8px)} .sms-composer__overlay[hidden],.sms-composer__panel[hidden],.sms-composer__link-preview[hidden],.sms-composer__notice[hidden]{display:none!important} .sms-composer__dialog{display:grid;grid-template-rows:auto auto minmax(0,1fr);inline-size:min(680px,100%);max-block-size:min(90dvh,820px);overflow:hidden;border:1px solid var(--sms-border);border-radius:22px;background:var(--sms-surface,#fff);box-shadow:0 30px 90px rgba(0,0,0,.3);color:var(--sms-text);outline:none} .sms-composer__modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-block-size:66px;padding:11px 14px 11px 20px;border-block-end:1px solid var(--sms-border);background:var(--sms-surface)} .sms-composer__modal-header>div{display:grid;gap:1px}.sms-composer__modal-header h2{margin:0;font-size:1.25rem;letter-spacing:-.02em}.sms-composer__eyebrow{color:var(--sms-primary);font-size:.65rem;font-weight:900;letter-spacing:.09em} .sms-composer__close{display:grid;place-items:center;inline-size:42px;block-size:42px;padding:0;border:1px solid var(--sms-border);border-radius:13px;background:var(--sms-surface-soft);color:var(--sms-text);font:inherit;font-size:1.7rem;line-height:1;cursor:pointer}.sms-composer__close-mobile{display:none}.sms-composer__close:hover,.sms-composer__close:focus-visible{background:var(--sms-surface-strong);outline:2px solid color-mix(in srgb,var(--sms-primary) 45%,transparent);outline-offset:2px} .sms-composer__notice{margin:12px 18px 0;padding:9px 11px;border-radius:10px;background:var(--sms-success-soft);color:var(--sms-text);font-size:.8rem}.sms-composer__notice[data-kind=error]{background:color-mix(in srgb,#d64a4a 14%,var(--sms-surface));color:#b32d2e} .sms-composer__dialog form{min-block-size:0;overflow:auto;overscroll-behavior:contain;padding:14px 20px 18px;background:var(--sms-surface)} .sms-composer__identity-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-end:8px}.sms-composer__identity{display:flex;align-items:center;gap:10px;min-inline-size:0}.sms-composer__identity>div:last-child{display:grid;gap:2px;min-inline-size:0}.sms-composer__identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}.sms-composer__identity small{color:var(--sms-muted);font-size:.68rem} .sms-composer__visibility select{max-inline-size:145px;border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface-soft);color:var(--sms-text);padding:7px 9px;font:inherit;font-size:.74rem;font-weight:700} .sms-composer__text{display:block;position:relative}.sms-composer__text textarea{inline-size:100%;min-block-size:145px;max-block-size:300px;resize:vertical;box-sizing:border-box;border:0;outline:0;background:transparent;color:var(--sms-text);font:inherit;font-size:1.05rem;line-height:1.55;padding:14px 2px 26px}.sms-composer__text textarea::placeholder{color:var(--sms-muted)}.sms-composer__text small{position:absolute;inset-inline-end:2px;inset-block-end:5px;color:var(--sms-muted);font-size:.7rem} .sms-composer__panel{padding-block:8px 4px}.sms-composer__picker{padding:14px;border-radius:13px}.sms-composer__previews{margin-block:8px 2px} .sms-composer__add-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-start:12px;padding:8px 10px;border:1px solid var(--sms-border);border-radius:14px;background:var(--sms-surface-soft)}.sms-composer__add-row>strong{font-size:.78rem;white-space:nowrap} .sms-composer__modes{display:flex;align-items:center;justify-content:flex-end;gap:3px;padding:0;flex-wrap:wrap}.sms-composer__modes button{display:grid;place-items:center;inline-size:38px;block-size:38px;padding:0;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--sms-muted-strong);cursor:pointer}.sms-composer__modes button:hover,.sms-composer__modes button:focus-visible{background:var(--sms-surface-strong);color:var(--sms-primary);outline:none}.sms-composer__modes button.is-active{border-color:color-mix(in srgb,var(--sms-primary) 35%,var(--sms-border));background:var(--sms-primary-soft);color:var(--sms-primary)} .sms-composer__footer{display:grid;grid-template-columns:auto minmax(150px,1fr);align-items:center;gap:10px;margin-block-start:12px;padding-block-start:12px;border-block-start:1px solid var(--sms-border)}.sms-composer__cancel,.sms-composer__reset,.sms-composer__publish{min-block-size:42px;border:0;border-radius:11px;padding:9px 16px;font:inherit;font-weight:800;cursor:pointer}.sms-composer__reset{background:var(--sms-surface-strong);color:var(--sms-text)}.sms-composer__publish{background:var(--sms-primary);color:#fff}.sms-composer__publish:disabled{opacity:.5;cursor:not-allowed} .sms-composer__poll{gap:10px}.sms-composer__poll-actions{gap:10px}.sms-composer__link{gap:8px}.sms-composer-link-card{border-radius:12px} .sms-activity-stream{gap:12px}.sms-activity-card__header{padding:13px 16px}.sms-activity-card__body{padding:0 16px 14px}.sms-activity-card__footer{padding:9px 16px}.sms-activity-card__body p{line-height:1.55} @media(max-width:767px){ .sms-app-centre__stream[data-sms-route="feed"]{padding-block-start:10px} .sms-composer{margin-block-end:10px} .sms-composer-launcher{grid-template-columns:auto minmax(0,1fr);gap:9px;padding:9px 10px;border-radius:14px} .sms-composer-launcher__avatar{inline-size:38px;block-size:38px}.sms-composer-launcher__prompt{min-block-size:38px;padding:8px 12px;font-size:.84rem} .sms-composer-launcher__quick{grid-column:1/-1;justify-content:space-around;border-block-start:1px solid var(--sms-border);padding-block-start:7px}.sms-composer-launcher__quick button{inline-size:44px;block-size:34px} .sms-composer__overlay{padding:0;background:var(--sms-surface,#fff);backdrop-filter:none} .sms-composer__dialog{inline-size:100%;block-size:100dvh;max-block-size:none;border:0;border-radius:0} .sms-composer__modal-header{position:relative;z-index:3;min-block-size:58px;padding-block-start:max(8px,env(safe-area-inset-top));padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))}.sms-composer__modal-header h2{font-size:1.08rem}.sms-composer__close{order:-1;display:inline-flex;align-items:center;justify-content:center;inline-size:auto;min-inline-size:76px;block-size:38px;gap:5px;padding:0 10px;border-radius:11px;font-size:.82rem;font-weight:800}.sms-composer__close-desktop{display:none}.sms-composer__close-mobile{display:inline-flex;align-items:center;gap:4px}.sms-composer__modal-header>div{flex:1;min-inline-size:0} .sms-composer__dialog form{padding:12px max(14px,env(safe-area-inset-right)) max(16px,calc(12px + env(safe-area-inset-bottom))) max(14px,env(safe-area-inset-left))} .sms-composer__avatar{inline-size:40px;block-size:40px}.sms-composer__identity small{display:none}.sms-composer__visibility select{max-inline-size:118px;padding:6px 8px} .sms-composer__text textarea{min-block-size:120px;max-block-size:240px;font-size:1rem;padding-block-start:10px} .sms-composer__native-grid{grid-template-columns:1fr}.sms-composer__poll-actions{align-items:stretch;flex-direction:column}.sms-composer__poll-actions>*{width:100%}.sms-composer__link{grid-template-columns:1fr}.sms-composer__link>button{width:100%} .sms-composer__add-row{padding:7px 8px}.sms-composer__add-row>strong{font-size:.72rem}.sms-composer__modes{gap:1px}.sms-composer__modes button{inline-size:34px;block-size:34px}.sms-composer__modes svg{inline-size:19px;block-size:19px} .sms-composer__footer{grid-template-columns:92px 1fr;position:sticky;inset-block-end:0;padding-block-end:max(0px,env(safe-area-inset-bottom));background:var(--sms-surface)} .sms-activity-stream{gap:10px}.sms-activity-card{border-radius:15px}.sms-activity-card__header{padding:12px 13px}.sms-activity-card__body{padding:0 13px 12px}.sms-activity-card__footer{padding:8px 13px} } @media(max-width:390px){.sms-composer-launcher__quick button{inline-size:38px}.sms-composer__identity-row{align-items:flex-start}.sms-composer__add-row{align-items:flex-start;flex-direction:column}.sms-composer__modes{inline-size:100%;justify-content:space-between}.sms-composer__modes button{inline-size:40px}.sms-composer__footer{grid-template-columns:80px 1fr}} @media(prefers-reduced-motion:reduce){.sms-composer__overlay{scroll-behavior:auto}} /* 0.7.0-alpha.3.3 — Feed Highlights */ .sms-feed-highlights{display:grid;gap:9px;margin-block:0 12px;padding:12px;border:1px solid var(--sms-border);border-radius:17px;background:var(--sms-surface);box-shadow:var(--sms-card-shadow,0 8px 30px rgba(24,28,45,.05));min-inline-size:0} .sms-feed-highlights__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-inline:2px}.sms-feed-highlights__header>div:first-child{display:grid;gap:1px;min-inline-size:0}.sms-feed-highlights__header span{color:var(--sms-primary);font-size:.62rem;font-weight:900;letter-spacing:.09em}.sms-feed-highlights__header strong{font-size:.9rem;line-height:1.25}.sms-feed-highlights__controls{display:flex;gap:5px}.sms-feed-highlights__controls button{display:none;place-items:center;inline-size:30px;block-size:30px;padding:0;border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface-soft);color:var(--sms-text);font:inherit;font-size:1.3rem;line-height:1;cursor:pointer}.sms-feed-highlights.is-scrollable .sms-feed-highlights__controls button{display:grid}.sms-feed-highlights__controls button:disabled{opacity:.34;cursor:default}.sms-feed-highlights__controls button:not(:disabled):hover,.sms-feed-highlights__controls button:not(:disabled):focus-visible{border-color:color-mix(in srgb,var(--sms-primary) 35%,var(--sms-border));background:var(--sms-primary-soft);color:var(--sms-primary);outline:none} .sms-feed-highlights__track{display:grid;grid-auto-flow:column;grid-auto-columns:112px;gap:8px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline mandatory;scrollbar-width:none;padding:3px 3px 5px;outline:none}.sms-feed-highlights__track::-webkit-scrollbar{display:none}.sms-feed-highlights__track:focus-visible{border-radius:12px;box-shadow:0 0 0 2px color-mix(in srgb,var(--sms-primary) 34%,transparent)} .sms-highlight-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate;min-inline-size:0;block-size:150px;overflow:hidden;padding:9px;border:1px solid var(--sms-border);border-radius:15px;background:linear-gradient(145deg,var(--sms-surface-strong),var(--sms-primary-soft));color:#fff;text-align:start;text-decoration:none;scroll-snap-align:start;cursor:pointer;box-shadow:0 5px 15px rgba(18,24,40,.08)}.sms-highlight-card::after{content:"";position:absolute;z-index:-1;inset:30% 0 0;background:linear-gradient(to bottom,transparent,rgba(7,12,24,.82))}.sms-highlight-card:hover{transform:translateY(-1px);box-shadow:0 9px 22px rgba(18,24,40,.14)}.sms-highlight-card:focus-visible{transform:none;outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--sms-primary) 62%,transparent) inset,0 7px 18px rgba(18,24,40,.13)}.sms-highlight-card__image{position:absolute;z-index:-2;inset:0;inline-size:100%;block-size:100%;object-fit:cover}.sms-highlight-card.is-text-only{color:var(--sms-text);background:linear-gradient(145deg,var(--sms-primary-soft),var(--sms-surface-strong))}.sms-highlight-card.is-text-only::after{background:linear-gradient(to bottom,transparent 20%,color-mix(in srgb,var(--sms-surface) 88%,transparent) 66%,var(--sms-surface) 100%)} .sms-highlight-card__avatar{position:absolute;inset-block-start:9px;inset-inline-start:9px;display:grid;place-items:center;inline-size:31px;block-size:31px;overflow:hidden;border:2px solid var(--sms-surface);border-radius:50%;background:var(--sms-primary);color:#fff;font-size:.7rem;font-weight:900;box-shadow:0 2px 8px rgba(0,0,0,.18)}.sms-highlight-card__avatar img{inline-size:100%;block-size:100%;object-fit:cover}.sms-highlight-card__type{position:absolute;inset-block-start:10px;inset-inline-end:8px;max-inline-size:66px;padding:3px 6px;border-radius:999px;background:rgba(15,23,42,.66);color:#fff;font-size:.52rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;backdrop-filter:blur(5px)}.sms-highlight-card.is-text-only .sms-highlight-card__type{background:color-mix(in srgb,var(--sms-primary) 13%,var(--sms-surface));color:var(--sms-primary)} .sms-highlight-card__copy{display:grid;gap:3px;min-inline-size:0}.sms-highlight-card__copy strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;font-size:.78rem;line-height:1.22;text-wrap:pretty}.sms-highlight-card__copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.78);font-size:.62rem}.sms-highlight-card.is-text-only .sms-highlight-card__copy small{color:var(--sms-muted)} .sms-highlight-card--create{align-items:center;justify-content:center;gap:9px;border-style:dashed;background:var(--sms-surface-soft);color:var(--sms-text);text-align:center}.sms-highlight-card--create::after{display:none}.sms-highlight-card__create-mark{display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:50%;background:var(--sms-primary);color:#fff;font-size:1.75rem;font-weight:300;box-shadow:0 7px 18px color-mix(in srgb,var(--sms-primary) 28%,transparent)}.sms-highlight-card--create .sms-highlight-card__copy{justify-items:center}.sms-highlight-card--create .sms-highlight-card__copy strong{font-size:.8rem}.sms-highlight-card--create .sms-highlight-card__copy small{color:var(--sms-muted);font-size:.62rem;white-space:normal} .sms-activity-card.is-highlight-target{animation:sms-highlight-target-flash 1.15s ease-out}@keyframes sms-highlight-target-flash{0%{box-shadow:0 0 0 3px color-mix(in srgb,var(--sms-primary) 42%,transparent),var(--sms-card-shadow,0 8px 30px rgba(24,28,45,.05))}100%{box-shadow:var(--sms-card-shadow,0 8px 30px rgba(24,28,45,.05))}} @media(max-width:767px){.sms-feed-highlights{margin-block-end:9px;padding:9px 9px 8px;border-radius:15px}.sms-feed-highlights__header{padding-inline:1px}.sms-feed-highlights__header strong{font-size:.82rem}.sms-feed-highlights__controls{display:none}.sms-feed-highlights__track{grid-auto-columns:147px;gap:10px;margin-inline:0;padding-block-end:2px}.sms-highlight-card{block-size:204px;padding:12px;border-radius:20px}.sms-highlight-card__avatar{inset-block-start:10px;inset-inline-start:10px;inline-size:42px;block-size:42px}.sms-highlight-card__type{inset-block-start:12px;inset-inline-end:9px;max-inline-size:82px;font-size:.7rem}.sms-highlight-card__copy strong{font-size:1.05rem}.sms-highlight-card__copy small{font-size:.84rem}.sms-highlight-card__create-mark{inline-size:59px;block-size:59px;font-size:2.25rem}} @media(prefers-reduced-motion:reduce){.sms-highlight-card{transition:none}.sms-activity-card.is-highlight-target{animation:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--sms-primary) 42%,transparent),var(--sms-card-shadow,0 8px 30px rgba(24,28,45,.05))}} /* 0.7.0-alpha.3.3.1 — Mobile Composer Exit Hotfix: explicit Back control + browser/hardware Back interception. */ /* 0.7.0-alpha.3.4 public social profile redesign. */ .sms-public-profile{display:grid;gap:14px;min-inline-size:0} .sms-public-profile__hero{overflow:hidden;border:1px solid var(--sms-border);border-radius:var(--sms-card-radius,20px);background:var(--sms-surface);box-shadow:var(--sms-card-shadow,var(--sms-shadow-sm))} .sms-public-profile__cover{position:relative;block-size:clamp(190px,27vw,300px);overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--sms-primary) 88%,#211a5e),color-mix(in srgb,var(--sms-primary) 32%,#77c7dc))} .sms-public-profile__cover img{display:block;inline-size:100%;block-size:100%;object-fit:cover} .sms-public-profile__cover.is-placeholder::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 22% 24%,rgba(255,255,255,.28),transparent 30%),radial-gradient(circle at 76% 64%,rgba(255,255,255,.13),transparent 34%)} .sms-public-profile__cover-shade{position:absolute;inset:auto 0 0;block-size:42%;background:linear-gradient(transparent,rgba(9,13,24,.28));pointer-events:none} .sms-public-profile__summary{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:18px;padding:0 26px 14px;margin-block-start:-52px} .sms-public-profile__avatar{display:grid;place-items:center;inline-size:112px;block-size:112px;overflow:hidden;border:5px solid var(--sms-surface);border-radius:50%;background:var(--sms-primary);box-shadow:0 10px 30px rgba(17,24,39,.2);color:#fff;font-size:2.35rem;font-weight:850} .sms-public-profile__avatar img{inline-size:100%;block-size:100%;object-fit:cover} .sms-public-profile__identity{min-inline-size:0;padding-block-end:5px} .sms-public-profile__identity h1{margin:0;color:var(--sms-text);font-size:clamp(1.55rem,2.4vw,2.05rem);line-height:1.08;letter-spacing:-.02em;overflow-wrap:anywhere} .sms-public-profile__identity p{margin:5px 0 0;color:var(--sms-muted);font-size:.9rem} .sms-public-profile__presence-label{display:inline-flex;align-items:center;min-height:18px;margin-top:4px;color:var(--sms-muted);font-size:.76rem;font-weight:720;letter-spacing:.005em}.sms-public-profile__presence-label.is-online{color:var(--sms-success)}.sms-public-profile__presence-label[hidden]{display:none!important} .sms-public-profile__actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-block-end:4px} .sms-public-profile__actions .sms-social-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px} .sms-public-profile__actions .sms-social-actions small{flex-basis:100%;text-align:end} .sms-public-profile__bio{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:4px 26px 18px} .sms-public-profile__bio p{max-inline-size:680px;margin:0;color:var(--sms-text);line-height:1.55;white-space:pre-line;overflow-wrap:anywhere} .sms-public-profile__bio>span{display:inline-flex;flex:0 0 auto;align-items:center;gap:6px;color:var(--sms-muted);font-size:.76rem} .sms-public-profile__bio .sms-icon{inline-size:15px} .sms-public-profile__stats{display:flex;gap:0;border-block-start:1px solid var(--sms-border);background:color-mix(in srgb,var(--sms-surface-soft) 45%,var(--sms-surface))} .sms-public-profile__stats div{display:flex;align-items:baseline;gap:6px;min-inline-size:0;padding:13px 20px;border-inline-end:1px solid var(--sms-border)} .sms-public-profile__stats div:last-child{border-inline-end:0} .sms-public-profile__stats strong{color:var(--sms-text);font-size:1rem} .sms-public-profile__stats span{color:var(--sms-muted);font-size:.76rem} .sms-public-profile__tabs{position:sticky;z-index:8;top:calc(var(--sms-header-height) + var(--sms-admin-offset));display:flex;align-items:center;gap:4px;padding:7px;border:1px solid var(--sms-border);border-radius:15px;background:color-mix(in srgb,var(--sms-surface) 94%,transparent);box-shadow:var(--sms-shadow-sm);backdrop-filter:blur(14px)} .sms-public-profile__tabs button{appearance:none;min-block-size:38px;padding:8px 18px;border:0;border-radius:10px;background:transparent;color:var(--sms-muted);font:inherit;font-size:.85rem;font-weight:750;cursor:pointer} .sms-public-profile__tabs button:hover,.sms-public-profile__tabs button:focus-visible{background:var(--sms-surface-soft);color:var(--sms-text);outline:none} .sms-public-profile__tabs button.is-active{background:var(--sms-primary-soft);color:var(--sms-primary)} .sms-public-profile__panel{display:grid;gap:14px;min-inline-size:0} .sms-public-profile__panel[hidden]{display:none!important} .sms-public-profile__panel>.sms-composer{margin-block:0} .sms-public-profile__panel>.sms-activity-stream{display:grid;gap:12px} .sms-public-profile__media-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;overflow:hidden;border:1px solid var(--sms-border);border-radius:18px;background:var(--sms-surface)} .sms-public-profile__media-item{position:relative;aspect-ratio:1/1;overflow:hidden;border:0;background:var(--sms-surface-strong);padding:0;cursor:pointer} .sms-public-profile__media-item img,.sms-public-profile__media-item video{display:block;inline-size:100%;block-size:100%;object-fit:cover;transition:transform .18s ease,filter .18s ease} .sms-public-profile__media-item:hover img,.sms-public-profile__media-item:hover video,.sms-public-profile__media-item:focus-visible img,.sms-public-profile__media-item:focus-visible video{transform:scale(1.025);filter:brightness(.9)} .sms-public-profile__media-item:focus-visible{outline:3px solid var(--sms-primary);outline-offset:-3px} .sms-public-profile__media-badge{position:absolute;inset-block-start:10px;inset-inline-end:10px;display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:50%;background:rgba(9,13,24,.72);color:#fff;font-size:.72rem} .sms-public-profile__about-card{padding:24px;border:1px solid var(--sms-border);border-radius:18px;background:var(--sms-surface);box-shadow:var(--sms-shadow-sm)} .sms-public-profile__about-card h2{margin:5px 0 0;color:var(--sms-text);font-size:1.35rem} .sms-public-profile__about-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0 0} .sms-public-profile__about-card dl div{padding:14px;border:1px solid var(--sms-border);border-radius:13px;background:var(--sms-surface-soft)} .sms-public-profile__about-card dl .is-wide{grid-column:1/-1} .sms-public-profile__about-card dt{color:var(--sms-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em} .sms-public-profile__about-card dd{margin:5px 0 0;color:var(--sms-text);line-height:1.5;white-space:pre-line;overflow-wrap:anywhere} .sms-public-profile .sms-activity-card.is-highlighted{outline:2px solid color-mix(in srgb,var(--sms-primary) 65%,transparent);outline-offset:2px} .sms-route-profile .sms-app-centre__stream{padding-block-start:18px} @media(max-width:767px){ .sms-route-profile .sms-app-centre__stream{padding-block-start:8px} .sms-public-profile{gap:10px} .sms-public-profile__hero{border-radius:0;border-inline:0} .sms-public-profile__cover{block-size:180px} .sms-public-profile__summary{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:12px;padding:0 15px 10px;margin-block-start:-42px} .sms-public-profile__avatar{inline-size:88px;block-size:88px;border-width:4px;font-size:1.85rem} .sms-public-profile__identity{padding-block-end:1px} .sms-public-profile__identity h1{font-size:1.38rem} .sms-public-profile__actions{grid-column:1/-1;justify-content:stretch;padding:2px 0 0} .sms-public-profile__actions>a{inline-size:100%} .sms-public-profile__actions .sms-social-actions{inline-size:100%;display:grid;grid-template-columns:1fr 1fr auto;gap:7px} .sms-public-profile__actions .sms-social-actions .sms-profile-button{min-inline-size:0;padding-inline:10px} .sms-public-profile__actions .sms-social-actions small{grid-column:1/-1;text-align:start} .sms-public-profile__bio{display:grid;gap:9px;padding:7px 15px 14px} .sms-public-profile__bio>span{justify-self:start} .sms-public-profile__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .sms-public-profile__stats div{display:grid;gap:2px;padding:10px 4px;text-align:center;border-inline-end:1px solid var(--sms-border)} .sms-public-profile__stats strong{font-size:.92rem} .sms-public-profile__stats span{font-size:.64rem;overflow:hidden;text-overflow:ellipsis} .sms-public-profile__tabs{top:calc(var(--sms-mobile-header-height) + var(--sms-admin-offset));margin-inline:10px;padding:5px;border-radius:13px} .sms-public-profile__tabs button{flex:1 1 0;padding-inline:8px} .sms-public-profile__panel{padding-inline:10px} .sms-public-profile__media-grid{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:14px} .sms-public-profile__about-card{padding:16px} .sms-public-profile__about-card dl{grid-template-columns:1fr} .sms-public-profile__about-card dl .is-wide{grid-column:auto} } @media(max-width:390px){ .sms-public-profile__cover{block-size:154px} .sms-public-profile__summary{margin-block-start:-36px} .sms-public-profile__avatar{inline-size:76px;block-size:76px} .sms-public-profile__identity h1{font-size:1.2rem} .sms-public-profile__stats span{font-size:.58rem} } /* 0.7.0-alpha.3.5 highlighted short text posts. */ .sms-composer__text-style-tools{display:flex;align-items:center;gap:8px;min-block-size:44px;margin-block:4px 2px;color:var(--sms-muted)} .sms-composer__text-style-tools>small{font-size:.68rem;line-height:1.35;margin-inline-start:auto;text-align:end} .sms-composer__text-style-tools[hidden],.sms-composer__text-style-picker[hidden]{display:none!important} .sms-composer__text-style-toggle{display:grid;place-items:center;flex:0 0 auto;inline-size:40px;block-size:40px;padding:0;border:1px solid var(--sms-border);border-radius:11px;background:linear-gradient(135deg,#7c3aed,#ec4899,#fb923c);color:#fff;font:inherit;font-size:.9rem;font-weight:900;cursor:pointer;box-shadow:0 4px 12px rgba(37,34,65,.12)} .sms-composer__text-style-toggle:hover,.sms-composer__text-style-toggle:focus-visible{outline:2px solid color-mix(in srgb,var(--sms-primary) 45%,transparent);outline-offset:2px} .sms-composer__text-style-toggle:disabled{opacity:.42;cursor:not-allowed} .sms-composer__text-style-picker{display:flex;align-items:center;gap:7px;min-inline-size:0;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;padding:3px 2px}.sms-composer__text-style-picker::-webkit-scrollbar{display:none} .sms-composer__text-style-choice{flex:0 0 auto;inline-size:34px;block-size:34px;padding:0;border:2px solid transparent;border-radius:10px;background:var(--sms-surface-strong);color:var(--sms-muted-strong);cursor:pointer;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sms-border) 80%,transparent)} .sms-composer__text-style-choice.is-plain{display:grid;place-items:center;font-size:.8rem;font-weight:900} .sms-composer__text-style-choice.is-selected{border-color:var(--sms-surface);outline:2px solid var(--sms-primary);outline-offset:1px} .sms-text-highlight--violet{--sms-text-highlight-bg:linear-gradient(135deg,#6d28d9 0%,#c026d3 52%,#ec4899 100%);--sms-text-highlight-color:#fff} .sms-text-highlight--royal{--sms-text-highlight-bg:linear-gradient(135deg,#1d4ed8 0%,#2563eb 48%,#60a5fa 100%);--sms-text-highlight-color:#fff} .sms-text-highlight--sunset{--sms-text-highlight-bg:linear-gradient(135deg,#f97316 0%,#f43f5e 48%,#c026d3 100%);--sms-text-highlight-color:#fff} .sms-text-highlight--ember{--sms-text-highlight-bg:linear-gradient(135deg,#9f1239 0%,#e11d48 48%,#f59e0b 100%);--sms-text-highlight-color:#fff} .sms-text-highlight--night{--sms-text-highlight-bg:linear-gradient(135deg,#020617 0%,#172554 52%,#312e81 100%);--sms-text-highlight-color:#fff} .sms-text-highlight--aurora{--sms-text-highlight-bg:linear-gradient(135deg,#115e59 0%,#059669 48%,#84cc16 100%);--sms-text-highlight-color:#fff} .sms-text-highlight--ocean{--sms-text-highlight-bg:linear-gradient(135deg,#075985 0%,#0284c7 48%,#22d3ee 100%);--sms-text-highlight-color:#fff} .sms-text-highlight--mint{--sms-text-highlight-bg:linear-gradient(135deg,#065f46 0%,#10b981 52%,#6ee7b7 100%);--sms-text-highlight-color:#fff} .sms-text-highlight--rose{--sms-text-highlight-bg:linear-gradient(135deg,#9d174d 0%,#db2777 48%,#fb7185 100%);--sms-text-highlight-color:#fff} .sms-text-highlight--graphite{--sms-text-highlight-bg:linear-gradient(135deg,#0f172a 0%,#334155 52%,#64748b 100%);--sms-text-highlight-color:#fff} .sms-composer__text[data-text-style]:not([data-text-style=""]){display:grid;place-items:center;min-block-size:250px;margin-block:8px;padding:22px;border-radius:18px;background:var(--sms-text-highlight-bg);color:var(--sms-text-highlight-color);overflow:hidden} .sms-composer__text[data-text-style]:not([data-text-style=""]) textarea{min-block-size:190px;max-block-size:250px;resize:none;padding:24px 4px;background:transparent;color:inherit;text-align:center;font-size:clamp(1.55rem,3vw,2.05rem);font-weight:850;line-height:1.18;letter-spacing:-.025em} .sms-composer__text[data-text-style]:not([data-text-style=""]) textarea::placeholder{color:color-mix(in srgb,var(--sms-text-highlight-color) 72%,transparent)} .sms-composer__text[data-text-style]:not([data-text-style=""]) small{inset-inline-end:14px;inset-block-end:10px;color:color-mix(in srgb,var(--sms-text-highlight-color) 78%,transparent);font-weight:800} .sms-composer__text[data-text-style="violet"]{--sms-text-highlight-bg:linear-gradient(135deg,#6d28d9 0%,#c026d3 52%,#ec4899 100%);--sms-text-highlight-color:#fff}.sms-composer__text[data-text-style="royal"]{--sms-text-highlight-bg:linear-gradient(135deg,#1d4ed8 0%,#2563eb 48%,#60a5fa 100%);--sms-text-highlight-color:#fff}.sms-composer__text[data-text-style="sunset"]{--sms-text-highlight-bg:linear-gradient(135deg,#f97316 0%,#f43f5e 48%,#c026d3 100%);--sms-text-highlight-color:#fff}.sms-composer__text[data-text-style="ember"]{--sms-text-highlight-bg:linear-gradient(135deg,#9f1239 0%,#e11d48 48%,#f59e0b 100%);--sms-text-highlight-color:#fff}.sms-composer__text[data-text-style="night"]{--sms-text-highlight-bg:linear-gradient(135deg,#020617 0%,#172554 52%,#312e81 100%);--sms-text-highlight-color:#fff}.sms-composer__text[data-text-style="aurora"]{--sms-text-highlight-bg:linear-gradient(135deg,#115e59 0%,#059669 48%,#84cc16 100%);--sms-text-highlight-color:#fff}.sms-composer__text[data-text-style="ocean"]{--sms-text-highlight-bg:linear-gradient(135deg,#075985 0%,#0284c7 48%,#22d3ee 100%);--sms-text-highlight-color:#fff}.sms-composer__text[data-text-style="mint"]{--sms-text-highlight-bg:linear-gradient(135deg,#065f46 0%,#10b981 52%,#6ee7b7 100%);--sms-text-highlight-color:#fff}.sms-composer__text[data-text-style="rose"]{--sms-text-highlight-bg:linear-gradient(135deg,#9d174d 0%,#db2777 48%,#fb7185 100%);--sms-text-highlight-color:#fff}.sms-composer__text[data-text-style="graphite"]{--sms-text-highlight-bg:linear-gradient(135deg,#0f172a 0%,#334155 52%,#64748b 100%);--sms-text-highlight-color:#fff} .sms-activity-card__body--highlight{display:grid;place-items:center;min-block-size:300px;padding:34px 28px!important;background:var(--sms-text-highlight-bg);color:var(--sms-text-highlight-color);text-align:center;overflow:hidden} .sms-activity-card__body--highlight p{margin:0!important;max-inline-size:22ch;color:inherit;font-size:clamp(1.65rem,4.5vw,2.5rem);font-weight:850;line-height:1.16!important;letter-spacing:-.035em;overflow-wrap:anywhere} .sms-activity-card__body--highlight h3{color:inherit} .sms-shared-preview__highlight{display:grid;place-items:center;min-block-size:180px;margin:10px 0 0;padding:22px;border-radius:14px;background:var(--sms-text-highlight-bg);color:var(--sms-text-highlight-color);text-align:center} .sms-shared-preview__highlight p{margin:0!important;color:inherit!important;font-size:1.2rem;font-weight:800;line-height:1.2} .sms-highlight-card.has-text-presentation{background:var(--sms-text-highlight-bg)!important;color:var(--sms-text-highlight-color)} .sms-highlight-card.has-text-presentation::after{background:linear-gradient(180deg,transparent 18%,rgba(0,0,0,.22) 100%)} .sms-highlight-card.has-text-presentation .sms-highlight-card__copy,.sms-highlight-card.has-text-presentation .sms-highlight-card__type{color:var(--sms-text-highlight-color)} @media(max-width:767px){.sms-composer__text-style-tools{align-items:flex-start;flex-wrap:wrap}.sms-composer__text-style-tools>small{flex:1 1 100%;margin-inline-start:0;text-align:start}.sms-composer__text-style-picker{flex:1 1 calc(100% - 50px)}.sms-composer__text[data-text-style]:not([data-text-style=""]){min-block-size:230px;padding:16px}.sms-composer__text[data-text-style]:not([data-text-style=""]) textarea{min-block-size:175px;font-size:clamp(1.45rem,7vw,1.95rem)}.sms-activity-card__body--highlight{min-block-size:250px;padding:28px 20px!important}.sms-activity-card__body--highlight p{font-size:clamp(1.45rem,8vw,2.15rem)}} @media(prefers-reduced-motion:reduce){.sms-composer__text-style-choice{transition:none}} .sms-composer__text-style-choice.sms-text-highlight--violet,.sms-composer__text-style-choice.sms-text-highlight--royal,.sms-composer__text-style-choice.sms-text-highlight--sunset,.sms-composer__text-style-choice.sms-text-highlight--ember,.sms-composer__text-style-choice.sms-text-highlight--night,.sms-composer__text-style-choice.sms-text-highlight--aurora,.sms-composer__text-style-choice.sms-text-highlight--ocean,.sms-composer__text-style-choice.sms-text-highlight--mint,.sms-composer__text-style-choice.sms-text-highlight--rose,.sms-composer__text-style-choice.sms-text-highlight--graphite{background:var(--sms-text-highlight-bg);color:var(--sms-text-highlight-color)} /* 0.7.0-alpha.3.5.1 — Mobile Composer Exit + WordPress Toolbar hardening. */ /* SMSocial is an isolated app: wp-admin toolbar/chrome is never rendered here. */ body.sms-app-page #wpadminbar{display:none!important;visibility:hidden!important} html{margin-top:0!important} body.sms-app-page.admin-bar .sms-app-root{--sms-admin-offset:0px!important} /* Composer is portalled to body so it always sits above fixed App Shell chrome. */ body.sms-app-page>.sms-composer__overlay{z-index:2147483600!important} @media(max-width:767px){ body.sms-app-page>.sms-composer__overlay{position:fixed!important;inset:0!important;display:grid!important;padding:0!important;background:var(--sms-surface,#fff)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} body.sms-app-page>.sms-composer__overlay[hidden]{display:none!important} body.sms-app-page>.sms-composer__overlay .sms-composer__dialog{inline-size:100%!important;block-size:100dvh!important;max-block-size:none!important;border:0!important;border-radius:0!important} body.sms-app-page>.sms-composer__overlay .sms-composer__modal-header{position:sticky!important;inset-block-start:0!important;z-index:10!important;background:var(--sms-surface,#fff)!important} .sms-composer__footer{grid-template-columns:auto auto minmax(120px,1fr)!important} .sms-composer__cancel{display:inline-flex!important;align-items:center;justify-content:center} } @media(max-width:390px){.sms-composer__footer{grid-template-columns:72px 72px minmax(110px,1fr)!important}.sms-composer__cancel,.sms-composer__reset,.sms-composer__publish{padding-inline:8px!important;font-size:.82rem}} /* 0.7.0-alpha.3.5.2 — canonical icon-only Activity action bar */ .sms-action-label{position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .sms-activity-actions{justify-content:flex-start;gap:6px;padding:6px 14px 10px} .sms-reaction-control,.sms-share-control,.sms-save-control{margin:0} .sms-reaction-trigger,.sms-comment-trigger,.sms-share-trigger,.sms-save-trigger,.sms-save-collections-trigger{position:relative;display:inline-grid;place-items:center;inline-size:40px;block-size:40px;min-inline-size:40px;min-block-size:40px;padding:0!important;gap:0;border-radius:11px} .sms-reaction-trigger .sms-reaction-icon,.sms-comment-trigger .sms-comment-icon,.sms-share-trigger .sms-share-icon,.sms-save-trigger .sms-save-icon{inline-size:22px;block-size:22px;flex:0 0 22px} .sms-more-icon{display:block;inline-size:22px;block-size:22px} .sms-comment-trigger small,.sms-share-trigger small{position:absolute;inset-block-start:2px;inset-inline-end:1px;min-inline-size:16px;block-size:16px;padding:0 4px;border:2px solid var(--sms-surface);background:var(--sms-primary);color:#fff;font-size:.55rem;line-height:12px} .sms-save-control{display:inline-flex;align-items:center;gap:2px} .sms-save-collections-trigger{font-size:0;letter-spacing:0} @media(max-width:767px){.sms-activity-actions{justify-content:space-around;gap:3px;padding-inline:8px}.sms-reaction-trigger,.sms-comment-trigger,.sms-share-trigger,.sms-save-trigger,.sms-save-collections-trigger{inline-size:38px;block-size:38px;min-inline-size:38px;min-block-size:38px}.sms-reaction-trigger .sms-reaction-icon,.sms-comment-trigger .sms-comment-icon,.sms-share-trigger .sms-share-icon,.sms-save-trigger .sms-save-icon,.sms-more-icon{inline-size:21px;block-size:21px}} /* 0.7.0-alpha.3.5.3 — desktop public profile + edit profile refinement */ .sms-profile-media-input{ position:absolute!important; inline-size:1px!important; block-size:1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; white-space:nowrap!important; } .sms-profile-media-editor__content{min-inline-size:0} .sms-profile-media-editor__heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .sms-profile-media-editor__badge{display:inline-flex;align-items:center;min-block-size:26px;padding:4px 8px;border:1px solid var(--sms-border);border-radius:999px;background:var(--sms-surface);color:var(--sms-muted);font-size:.68rem;font-weight:750;white-space:nowrap} .sms-profile-media-picker{display:flex;align-items:center;gap:10px;min-inline-size:0} .sms-profile-media-picker>span{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sms-muted);font-size:.75rem} @media (min-width:768px){ .sms-route-profile .sms-app-centre__stream{inline-size:min(100%,980px)} .sms-public-profile{gap:10px} .sms-public-profile__cover{block-size:210px} .sms-public-profile__summary{grid-template-columns:auto minmax(0,1fr) auto;gap:14px;padding:0 22px 10px;margin-block-start:-44px;align-items:end} .sms-public-profile__avatar{inline-size:96px;block-size:96px;border-width:4px;font-size:2rem} .sms-public-profile__identity{padding-block-end:3px} .sms-public-profile__identity h1{font-size:1.55rem;line-height:1.08;font-weight:780;letter-spacing:-.025em} .sms-public-profile__identity p{margin-block-start:3px;font-size:.82rem} .sms-public-profile__actions{padding-block-end:2px} .sms-public-profile__actions>.sms-profile-button, .sms-public-profile__actions .sms-profile-button{min-block-size:36px;padding:7px 11px;border-radius:10px;gap:6px;font-size:.8rem;font-weight:750} .sms-public-profile__actions .sms-profile-button .sms-icon{inline-size:16px;block-size:16px} .sms-public-profile__bio{padding:3px 22px 13px;align-items:center} .sms-public-profile__bio p{font-size:.9rem;line-height:1.45} .sms-public-profile__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))} .sms-public-profile__stats div{justify-content:center;padding:10px 12px} .sms-public-profile__stats strong{font-size:.92rem} .sms-public-profile__stats span{font-size:.7rem} .sms-public-profile__tabs{position:sticky;gap:2px;padding:5px;border-radius:13px} .sms-public-profile__tabs button{min-block-size:34px;padding:6px 14px;border-radius:9px;font-size:.78rem} .sms-public-profile__about-card{padding:18px} .sms-public-profile__about-card h2{font-size:1.12rem} .sms-public-profile__about-card dl{gap:9px;margin-block-start:14px} .sms-public-profile__about-card dl div{padding:11px 12px} .sms-public-profile__about-card dd{font-size:.9rem} .sms-route-settings .sms-app-centre__stream{inline-size:min(100%,980px)} .sms-profile-settings{padding:22px;border-radius:18px} .sms-profile-settings__intro{align-items:center;padding-block-end:16px} .sms-profile-settings__intro h2{margin:3px 0 5px;font-size:1.28rem} .sms-profile-settings__intro p{max-inline-size:620px;font-size:.82rem;line-height:1.45} .sms-profile-settings__intro>a{font-size:.8rem} .sms-profile-form{grid-template-columns:minmax(0,1fr) minmax(220px,.62fr);gap:14px 16px;max-inline-size:none;padding-block:18px} .sms-profile-form>label:nth-child(1){grid-column:1} .sms-profile-form>label:nth-child(2){grid-column:1/-1} .sms-profile-form>label:nth-child(3){grid-column:2;grid-row:1} .sms-profile-form>button{grid-column:1/-1;min-block-size:38px;padding:8px 14px} .sms-profile-form label{gap:5px;font-size:.82rem} .sms-profile-form input,.sms-profile-form textarea,.sms-profile-form select{padding:9px 11px;border-radius:10px;font-size:.9rem} .sms-profile-form textarea{min-block-size:88px;max-block-size:150px} .sms-profile-form small{font-size:.7rem} .sms-profile-media-grid{grid-template-columns:1fr;gap:12px;padding-block-start:18px} .sms-profile-media-editor{grid-template-columns:96px minmax(0,1fr);gap:14px;padding:14px;border-radius:14px;align-items:center} .sms-profile-media-preview--avatar{inline-size:88px;block-size:88px} .sms-profile-media-editor[data-sms-media-editor="cover"]{grid-template-columns:minmax(260px,42%) minmax(0,1fr);align-items:stretch} .sms-profile-media-editor[data-sms-media-editor="cover"] .sms-profile-media-preview--cover{inline-size:100%;block-size:auto;min-block-size:132px;aspect-ratio:16/6;border-radius:12px} .sms-profile-media-editor h3{font-size:1rem} .sms-profile-media-editor p{margin:3px 0 9px} .sms-profile-media-picker{margin-block-start:4px} .sms-profile-media-picker .sms-profile-button{min-block-size:34px;padding:6px 10px;font-size:.75rem} .sms-profile-media-actions{margin-block-start:9px} .sms-profile-media-actions .sms-profile-button{min-block-size:34px;padding:6px 10px;font-size:.75rem} } /* 0.8.0-alpha.1 — Groups Foundation */ .sms-groups,.sms-group-view{display:grid;gap:18px}.sms-groups__intro{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:20px;padding:20px}.sms-groups__intro h2{margin:4px 0 6px;font-size:clamp(22px,2vw,30px)}.sms-groups__intro p{margin:0;color:var(--sms-muted);max-width:720px}.sms-group-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.sms-group-card{display:grid;grid-template-columns:150px minmax(0,1fr);min-height:150px;text-decoration:none;color:var(--sms-text);background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:18px;overflow:hidden;transition:transform .16s ease,border-color .16s ease}.sms-group-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--sms-primary) 45%,var(--sms-border))}.sms-group-card__cover{display:block;background:linear-gradient(135deg,color-mix(in srgb,var(--sms-primary) 78%,#6aa7ff),color-mix(in srgb,var(--sms-primary) 45%,#99e6d2));min-height:100%}.sms-group-card__cover img{width:100%;height:100%;object-fit:cover}.sms-group-card__body{display:flex;flex-direction:column;gap:6px;padding:16px}.sms-group-card__body small{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--sms-primary)}.sms-group-card__body strong{font-size:19px}.sms-group-card__body span{color:var(--sms-muted);font-size:14px;line-height:1.45}.sms-group-card__body em{margin-top:auto;font-style:normal;font-size:13px;color:var(--sms-muted)}.sms-group-create-modal{position:fixed;inset:0;z-index:100050;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.58);backdrop-filter:blur(5px)}.sms-group-create-modal[hidden]{display:none}.sms-group-create-modal__dialog{width:min(620px,100%);max-height:min(760px,calc(100vh - 40px));overflow:auto;background:var(--sms-surface);color:var(--sms-text);border:1px solid var(--sms-border);border-radius:22px;box-shadow:0 24px 70px rgba(15,23,42,.28)}.sms-group-create-modal__dialog>header{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--sms-border)}.sms-group-create-modal__dialog header span{font-size:12px;color:var(--sms-primary);font-weight:900;letter-spacing:.08em}.sms-group-create-modal__dialog h2{margin:3px 0 0}.sms-group-create-modal__dialog header button{width:42px;height:42px;border:0;border-radius:14px;background:var(--sms-surface-muted);color:var(--sms-text);font-size:27px}.sms-group-create-modal form{display:grid;gap:16px;padding:22px}.sms-group-create-modal label{display:grid;gap:7px;font-weight:700}.sms-group-create-modal input,.sms-group-create-modal select,.sms-group-create-modal textarea{width:100%;box-sizing:border-box;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-surface-muted);color:var(--sms-text);padding:12px 14px;font:inherit}.sms-group-create-modal__actions{display:flex;justify-content:flex-end;gap:10px}.sms-group-hero{overflow:hidden;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:22px}.sms-group-hero__cover{position:relative;aspect-ratio:16/5;min-height:190px;background:linear-gradient(135deg,#5b4ee8,#5f9ce7)}.sms-group-hero__cover img{width:100%;height:100%;object-fit:cover}.sms-group-cover-action{position:absolute;right:18px;bottom:16px;display:inline-flex;cursor:pointer}.sms-group-cover-action input{position:absolute;opacity:0;pointer-events:none}.sms-group-cover-action span{display:flex;gap:8px;align-items:center;padding:10px 13px;border-radius:12px;background:rgba(17,24,39,.76);color:#fff;font-size:13px;font-weight:800;backdrop-filter:blur(6px)}.sms-group-cover-action svg{width:18px;height:18px}.sms-group-hero__content{padding:18px 22px 20px}.sms-group-back{display:inline-flex;margin-bottom:12px;color:var(--sms-primary);text-decoration:none;font-weight:750}.sms-group-hero__title{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.sms-group-hero__title h1{margin:3px 0 4px;font-size:clamp(28px,3vw,40px);line-height:1.05}.sms-group-hero__title span{color:var(--sms-primary);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.sms-group-hero__title p,.sms-group-hero__description{color:var(--sms-muted)}.sms-group-hero__description{margin:14px 0 0;max-width:760px;line-height:1.55}.sms-group-hero__actions{display:flex;gap:8px;flex-wrap:wrap}.sms-group-tabs{display:flex;gap:6px;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:16px;padding:7px}.sms-group-tabs button{border:0;background:transparent;color:var(--sms-muted);padding:10px 16px;border-radius:11px;font:inherit;font-weight:750}.sms-group-tabs button.is-active{background:color-mix(in srgb,var(--sms-primary) 12%,var(--sms-surface));color:var(--sms-primary)}.sms-group-panel[hidden]{display:none!important}.sms-group-panel{display:grid;gap:16px}.sms-group-about{background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:18px;padding:20px}.sms-group-about h2{margin:4px 0 16px}.sms-group-about dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}.sms-group-about dl>div{background:var(--sms-surface-muted);border:1px solid var(--sms-border);border-radius:14px;padding:14px}.sms-group-about dl>div.is-wide{grid-column:1/-1}.sms-group-about dt{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--sms-muted)}.sms-group-about dd{margin:6px 0 0}.sms-group-members{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.sms-group-members>a{display:flex;align-items:center;gap:11px;padding:12px;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:14px;text-decoration:none;color:var(--sms-text)}.sms-group-members>a>span{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--sms-primary);color:#fff;font-weight:900;overflow:hidden}.sms-group-members img{width:100%;height:100%;object-fit:cover}.sms-group-members strong,.sms-group-members small{display:block}.sms-group-members small{margin-top:3px;color:var(--sms-muted)}.sms-group-grid--discover{margin-top:14px}.sms-group-modal-open{overflow:hidden} @media(max-width:900px){.sms-group-grid{grid-template-columns:1fr}.sms-group-card{grid-template-columns:120px minmax(0,1fr)}.sms-group-members{grid-template-columns:1fr}.sms-group-hero__title{flex-direction:column}.sms-group-hero__cover{aspect-ratio:16/6;min-height:150px}} @media(max-width:600px){.sms-groups__intro{padding:15px;flex-direction:column}.sms-group-card{grid-template-columns:100px minmax(0,1fr);min-height:126px}.sms-group-card__body{padding:12px}.sms-group-card__body span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sms-group-hero{border-radius:0;border-left:0;border-right:0}.sms-group-hero__cover{min-height:130px}.sms-group-hero__content{padding:14px 16px}.sms-group-hero__title h1{font-size:27px}.sms-group-tabs{border-radius:0;border-left:0;border-right:0;overflow-x:auto}.sms-group-tabs button{flex:1;min-width:max-content}.sms-group-create-modal{padding:0;align-items:end}.sms-group-create-modal__dialog{width:100%;max-height:94vh;border-radius:22px 22px 0 0}.sms-group-about dl{grid-template-columns:1fr}.sms-group-about dl>div.is-wide{grid-column:auto}} .sms-group-cover-actions{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:8px;z-index:2}.sms-group-cover-remove{border:1px solid rgba(255,255,255,.72);background:rgba(20,24,35,.72);color:#fff;border-radius:12px;padding:9px 12px;font:inherit;cursor:pointer;backdrop-filter:blur(8px)}.sms-group-cover-remove:hover{background:rgba(20,24,35,.88)} .sms-group-cover-actions .sms-group-cover-action{position:relative;right:auto;bottom:auto} /* 0.8.0-alpha.2 — Groups Moderation */ .sms-group-tab-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--sms-primary);color:#fff;font-size:11px;font-weight:800;margin-left:6px}.sms-group-rules{margin-top:18px;padding-top:18px;border-top:1px solid var(--sms-border)}.sms-group-rules h3{margin:0 0 10px}.sms-group-rules ol{margin:0;padding-left:22px;display:grid;gap:8px}.sms-group-member-report{margin-left:auto;width:34px;height:34px;border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface);color:var(--sms-muted);font-weight:900}.sms-group-manage__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.sms-group-manage-card{background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:18px;padding:18px;min-width:0}.sms-group-manage-card.is-wide{grid-column:1/-1}.sms-group-manage-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.sms-group-manage-card h3{margin:2px 0 0;font-size:18px}.sms-group-manage-card form{display:grid;gap:14px}.sms-group-manage-card label{display:grid;gap:7px;font-weight:700}.sms-group-manage-card textarea,.sms-group-manage-card input[type="search"],.sms-group-manage-card input[type="text"],.sms-group-manage-card select{width:100%;border:1px solid var(--sms-border);background:var(--sms-soft);color:var(--sms-text);border-radius:12px;padding:11px 12px;font:inherit}.sms-group-manage-list,.sms-group-manage-members{display:grid;gap:10px}.sms-group-manage-list>article,.sms-group-manage-members>article{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--sms-border);border-radius:14px}.sms-group-manage-list article>div:first-child,.sms-group-manage-members article>div:first-child{min-width:0;display:grid;gap:3px}.sms-group-manage-list small,.sms-group-manage-members small{color:var(--sms-muted);overflow-wrap:anywhere}.sms-group-manage-list article>div:last-child,.sms-group-manage-members article>div:last-child{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.sms-group-manage-list button,.sms-group-manage-members button{border:1px solid var(--sms-border);background:var(--sms-soft);color:var(--sms-text);border-radius:10px;padding:8px 10px;font-weight:700}.sms-group-manage-list button.is-danger,.sms-group-manage-members button.is-danger{color:var(--sms-danger,#b42318)}.sms-group-report-modal{position:fixed;inset:0;z-index:100100;display:grid;place-items:center;padding:20px;background:rgba(16,24,40,.52);backdrop-filter:blur(8px)}.sms-group-report-modal[hidden]{display:none}.sms-group-report-modal>section{width:min(520px,100%);background:var(--sms-surface,#fff);color:var(--sms-text,#101828);border:1px solid var(--sms-border,#e4e7ec);border-radius:22px;box-shadow:0 24px 80px rgba(16,24,40,.22);overflow:hidden}.sms-group-report-modal header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--sms-border)}.sms-group-report-modal header span{color:var(--sms-primary);font-size:12px;font-weight:900;letter-spacing:.08em}.sms-group-report-modal header h2{margin:3px 0 0;font-size:22px}.sms-group-report-modal header button{width:40px;height:40px;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-soft);font-size:24px}.sms-group-report-modal form{padding:20px;display:grid;gap:14px}.sms-group-report-modal label{display:grid;gap:7px;font-weight:700}.sms-group-report-modal select,.sms-group-report-modal textarea{width:100%;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-soft);color:var(--sms-text);padding:11px 12px;font:inherit}.sms-group-report-modal form>div{display:flex;justify-content:flex-end;gap:10px}@media(max-width:767px){.sms-group-manage__grid{grid-template-columns:1fr}.sms-group-manage-card.is-wide{grid-column:auto}.sms-group-manage-list>article,.sms-group-manage-members>article{align-items:flex-start;flex-direction:column}.sms-group-manage-list article>div:last-child,.sms-group-manage-members article>div:last-child{width:100%;justify-content:flex-start}.sms-group-report-modal{padding:0;align-items:end}.sms-group-report-modal>section{width:100%;border-radius:22px 22px 0 0;max-height:90dvh;overflow:auto}} .sms-group-announcement{display:grid;gap:4px;margin:0 0 14px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--sms-primary) 28%,var(--sms-border));border-radius:14px;background:color-mix(in srgb,var(--sms-primary) 8%,var(--sms-surface));}.sms-group-announcement span{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--sms-primary)}.sms-group-announcement strong{font-size:14px;line-height:1.45} /* 0.8.0-alpha.2.1.1 — Group Feed Cleanup: inactive Group tab panels must remain hidden. */ /* 0.8.0-alpha.2.1 — Separate Group Workspace */ .sms-group-manage-badge{display:inline-grid;place-items:center;min-inline-size:20px;block-size:20px;padding:0 6px;margin-inline-start:2px;border-radius:999px;background:var(--sms-primary);color:#fff;font-size:11px;font-style:normal;font-weight:850} .sms-group-workspace{display:grid;gap:16px;inline-size:min(100%,1040px);margin-inline:auto} .sms-group-workspace__header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:20px 22px;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:20px} .sms-group-workspace__header h1{margin:4px 0 6px;font-size:clamp(26px,3vw,36px);line-height:1.08}.sms-group-workspace__header p{margin:0;max-inline-size:720px;color:var(--sms-muted);line-height:1.5} .sms-group-workspace__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.sms-group-workspace__stats>div{display:grid;gap:4px;padding:13px 14px;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:14px}.sms-group-workspace__stats span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--sms-muted);font-weight:800}.sms-group-workspace__stats strong{font-size:18px} .sms-group-workspace__nav{position:sticky;top:calc(var(--sms-topbar-height,64px) + 8px);z-index:7;display:flex;gap:6px;overflow-x:auto;padding:6px;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:14px}.sms-group-workspace__nav a{flex:0 0 auto;padding:8px 12px;border-radius:9px;color:var(--sms-muted);text-decoration:none;font-size:13px;font-weight:750}.sms-group-workspace__nav a:hover,.sms-group-workspace__nav a:focus-visible{background:color-mix(in srgb,var(--sms-primary) 10%,var(--sms-surface));color:var(--sms-primary)} .sms-group-workspace__cover{position:relative;overflow:hidden;aspect-ratio:16/5;min-block-size:170px;border:1px solid var(--sms-border);border-radius:15px;background:linear-gradient(135deg,#5b4ee8,#5f9ce7)}.sms-group-workspace__cover img{inline-size:100%;block-size:100%;object-fit:cover}.sms-group-workspace__cover .sms-group-cover-actions{right:14px;bottom:14px} .sms-group-workspace .sms-group-manage-card{scroll-margin-top:140px} @media(max-width:900px){.sms-group-workspace__header{flex-direction:column}.sms-group-workspace__stats{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:600px){.sms-group-workspace{gap:12px}.sms-group-workspace__header{padding:15px;border-radius:15px}.sms-group-workspace__header h1{font-size:25px}.sms-group-workspace__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.sms-group-workspace__stats>div{padding:10px 11px}.sms-group-workspace__nav{top:calc(var(--sms-mobile-topbar-height,56px) + 6px);border-radius:12px}.sms-group-workspace__cover{aspect-ratio:16/7;min-block-size:130px}.sms-group-workspace__cover .sms-group-cover-actions{right:8px;bottom:8px}} /* 0.8.0-alpha.2.2 — External Article Reader Hardening */ .sms-article-reader__back{display:none;align-items:center;gap:6px;min-height:40px;padding:0 11px;border:0;border-radius:12px;background:var(--sms-surface-strong);color:var(--sms-text);font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}.sms-article-reader__back:hover,.sms-article-reader__back:focus-visible{outline:2px solid color-mix(in srgb,var(--sms-primary) 55%,transparent);outline-offset:2px}.sms-article-reader__notice{margin:0 38px 20px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--sms-primary) 25%,var(--sms-border));border-radius:13px;background:var(--sms-primary-soft);color:var(--sms-muted-strong);font-size:.8rem;line-height:1.5}.sms-article-reader__source-link{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:7px 11px;border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface);color:var(--sms-primary)!important;text-decoration:none!important}.sms-article-reader__read-full-wrap{display:flex;justify-content:flex-start;padding:0 38px 30px}.sms-article-reader__read-full{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 16px;border-radius:12px;background:var(--sms-primary);color:#fff!important;font-weight:850;text-decoration:none!important}.sms-article-reader__read-full::after{content:" ↗"}.sms-article-reader__comments-heading{display:grid;gap:2px;margin-bottom:10px}.sms-article-reader__comments-heading strong{font-size:.9rem;color:var(--sms-text)}.sms-article-reader__comments-heading span{font-size:.7rem;color:var(--sms-muted);line-height:1.45}.sms-activity-card__article[aria-haspopup=dialog] .sms-activity-card__article-copy strong::after{content:""!important} @media(max-width:767px){.sms-article-reader__bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}.sms-article-reader__back{display:inline-flex}.sms-article-reader__brand{justify-self:start;min-width:0}.sms-article-reader__brand>span{display:none}.sms-article-reader__brand strong{font-size:.78rem}.sms-article-reader__brand small{font-size:.64rem}.sms-article-reader__notice{margin:0 20px 16px}.sms-article-reader__read-full-wrap{padding:0 20px 24px}.sms-article-reader__read-full{width:100%}.sms-article-reader__comments-heading span{font-size:.68rem}} /* 0.8.0-alpha.2.3 — Highlights Full-screen Viewer */ /* 0.8.0-alpha.2.3.1 — Highlights Video Viewer sizing/header hotfix */ .sms-highlight-card:is(button){font:inherit;appearance:none;-webkit-appearance:none} html.sms-highlight-viewer-open,body.sms-highlight-viewer-open{overflow:hidden!important;overscroll-behavior:none} .sms-highlight-viewer{position:fixed;z-index:2147483650;inset:0;display:grid;place-items:center;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:rgba(5,8,15,.86);backdrop-filter:blur(10px)} .sms-highlight-viewer[hidden]{display:none!important} .sms-highlight-viewer__dialog{display:grid;grid-template-rows:auto minmax(0,1fr);inline-size:min(1080px,100%);block-size:min(94dvh,960px);overflow:hidden;border:1px solid color-mix(in srgb,var(--sms-border) 65%,transparent);border-radius:22px;background:#070b13;color:#fff;box-shadow:0 28px 90px rgba(0,0,0,.45);outline:none} .sms-highlight-viewer__bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-block-size:60px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.12);background:rgba(7,11,19,.98)} .sms-highlight-viewer__back,.sms-highlight-viewer__close{display:grid;place-items:center;inline-size:40px;min-inline-size:40px;max-inline-size:40px;block-size:40px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.08);color:#fff;font:inherit;font-weight:800;cursor:pointer;justify-self:center} .sms-highlight-viewer__back{display:none;grid-column:1;grid-auto-flow:column;gap:6px;inline-size:auto;max-inline-size:none;padding-inline:10px;justify-self:start}.sms-highlight-viewer__close{grid-column:3;justify-self:end;font-size:1.65rem;line-height:1} .sms-highlight-viewer__back:focus-visible,.sms-highlight-viewer__close:focus-visible{outline:2px solid #fff;outline-offset:2px} .sms-highlight-viewer__meta{grid-column:2;display:grid;gap:2px;min-inline-size:0;text-align:start}.sms-highlight-viewer__meta strong,.sms-highlight-viewer__meta small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sms-highlight-viewer__meta strong{font-size:.86rem}.sms-highlight-viewer__meta small{color:rgba(255,255,255,.68);font-size:.68rem} .sms-highlight-viewer__stage{display:grid;place-items:center;min-inline-size:0;min-block-size:0;overflow:hidden;background:#000;contain:layout paint}.sms-highlight-viewer__stage img{display:block;inline-size:100%;block-size:100%;max-inline-size:100%;max-block-size:100%;object-fit:contain;background:#000}.sms-highlight-viewer__stage video{display:block;inline-size:auto!important;block-size:auto!important;max-inline-size:min(100%,960px)!important;max-block-size:100%!important;object-fit:contain!important;background:#000;outline:none} .sms-highlight-viewer__dialog[data-media-orientation=portrait] .sms-highlight-viewer__stage video{block-size:100%!important;inline-size:auto!important;max-inline-size:min(100%,560px)!important;max-block-size:100%!important} .sms-highlight-viewer__dialog[data-media-orientation=landscape] .sms-highlight-viewer__stage video{inline-size:100%!important;block-size:auto!important;max-inline-size:100%!important;max-block-size:100%!important} @media(max-width:767px){.sms-highlight-viewer{padding:0;background:#000;backdrop-filter:none}.sms-highlight-viewer__dialog{inline-size:100%;block-size:100dvh;border:0;border-radius:0}.sms-highlight-viewer__bar{min-block-size:58px;padding-block-start:max(9px,env(safe-area-inset-top));padding-inline-start:max(10px,env(safe-area-inset-left));padding-inline-end:max(10px,env(safe-area-inset-right))}.sms-highlight-viewer__back{display:grid}.sms-highlight-viewer__stage{padding-block-end:env(safe-area-inset-bottom)}.sms-highlight-viewer__stage video,.sms-highlight-viewer__dialog[data-media-orientation=portrait] .sms-highlight-viewer__stage video,.sms-highlight-viewer__dialog[data-media-orientation=landscape] .sms-highlight-viewer__stage video{inline-size:100%!important;block-size:100%!important;max-inline-size:100%!important;max-block-size:100%!important;object-fit:contain!important}} /* 0.8.0-alpha.2.3.3 — Highlights carousel navigation + explicit playback control */ .sms-highlight-viewer__stage-shell{position:relative;display:grid;min-inline-size:0;min-block-size:0;overflow:hidden;background:#000} .sms-highlight-viewer__stage-shell>.sms-highlight-viewer__stage{inline-size:100%;block-size:100%} .sms-highlight-viewer__nav,.sms-highlight-viewer__playback{position:absolute;z-index:4;display:grid;place-items:center;border:1px solid rgba(255,255,255,.22);background:rgba(7,11,19,.72);color:#fff;backdrop-filter:blur(8px);cursor:pointer;box-shadow:0 8px 28px rgba(0,0,0,.24)} .sms-highlight-viewer__nav{inset-block-start:50%;inline-size:46px;block-size:46px;margin-block-start:-23px;padding:0;border-radius:999px;font-size:2rem;line-height:1} .sms-highlight-viewer__nav--prev{inset-inline-start:14px}.sms-highlight-viewer__nav--next{inset-inline-end:14px} .sms-highlight-viewer__nav:disabled{opacity:.2;cursor:default} .sms-highlight-viewer__nav:not(:disabled):hover,.sms-highlight-viewer__playback:hover{background:rgba(30,41,59,.9)} .sms-highlight-viewer__nav:focus-visible,.sms-highlight-viewer__playback:focus-visible{outline:2px solid #fff;outline-offset:3px} .sms-highlight-viewer__playback{inset-block-start:14px;inset-inline-start:14px;inline-size:46px;block-size:46px;padding:0;border-radius:999px;font-size:1rem;font-weight:900;line-height:1} .sms-highlight-viewer__playback[hidden]{display:none!important} @media(max-width:767px){.sms-highlight-viewer__nav{inline-size:42px;block-size:42px;margin-block-start:-21px;font-size:1.75rem}.sms-highlight-viewer__nav--prev{inset-inline-start:max(8px,env(safe-area-inset-left))}.sms-highlight-viewer__nav--next{inset-inline-end:max(8px,env(safe-area-inset-right))}.sms-highlight-viewer__playback{inset-block-start:10px;inset-inline-start:max(10px,env(safe-area-inset-left));inline-size:42px;block-size:42px}.sms-highlight-viewer__stage-shell{touch-action:pan-y}} /* 0.9.0-alpha.1 — Pages Foundation */ .sms-pages{display:grid;gap:18px}.sms-pages__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 22px;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:20px}.sms-pages__toolbar h2{margin:4px 0 6px;font-size:28px}.sms-pages__toolbar p{margin:0;max-width:720px;color:var(--sms-muted);line-height:1.5}.sms-page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.sms-page-card{min-width:0;overflow:hidden;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:18px}.sms-page-card>a{display:block;color:var(--sms-text);text-decoration:none}.sms-page-card__cover{aspect-ratio:16/5;background:linear-gradient(135deg,color-mix(in srgb,var(--sms-primary) 72%,#7aa7ff),color-mix(in srgb,var(--sms-primary) 42%,#8fe4cf));overflow:hidden}.sms-page-card__cover img{width:100%;height:100%;object-fit:cover}.sms-page-card__identity{display:flex;align-items:center;gap:12px;padding:14px 16px 8px}.sms-page-card__avatar{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;overflow:hidden;background:var(--sms-primary);color:#fff;font-weight:900;flex:0 0 auto}.sms-page-card__avatar img{width:100%;height:100%;object-fit:cover}.sms-page-card__identity strong,.sms-page-card__identity small{display:block}.sms-page-card__identity small{margin-top:3px;color:var(--sms-muted)}.sms-page-card__stats{display:flex;gap:14px;padding:0 16px 15px;color:var(--sms-muted);font-size:13px}.sms-page-create-modal{position:fixed;inset:0;z-index:100100;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.58);backdrop-filter:blur(6px)}.sms-page-create-modal[hidden]{display:none!important}.sms-page-create-dialog{width:min(620px,100%);max-height:min(760px,calc(100dvh - 40px));overflow:auto;background:var(--sms-surface);color:var(--sms-text);border:1px solid var(--sms-border);border-radius:22px;box-shadow:0 24px 70px rgba(15,23,42,.28)}.sms-page-create-dialog>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:19px 21px;border-bottom:1px solid var(--sms-border)}.sms-page-create-dialog h2{margin:4px 0 0}.sms-page-create-dialog>header button{width:42px;height:42px;border:1px solid var(--sms-border);border-radius:13px;background:var(--sms-surface-muted);color:var(--sms-text);font-size:25px}.sms-page-create-dialog form{display:grid;gap:15px;padding:21px}.sms-page-create-dialog label{display:grid;gap:7px;font-weight:750}.sms-page-create-dialog input,.sms-page-create-dialog textarea{width:100%;box-sizing:border-box;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-surface-muted);color:var(--sms-text);padding:11px 13px;font:inherit}.sms-page-create-dialog footer{display:flex;justify-content:flex-end;gap:10px}.sms-page-detail{display:grid;gap:16px}.sms-page-hero{overflow:hidden;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:22px}.sms-page-hero__cover{aspect-ratio:16/5;min-height:190px;background:linear-gradient(135deg,color-mix(in srgb,var(--sms-primary) 80%,#5fa9ff),color-mix(in srgb,var(--sms-primary) 44%,#8ce2cd));overflow:hidden}.sms-page-hero__cover img{width:100%;height:100%;object-fit:cover}.sms-page-hero__body{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:0 22px 18px;margin-top:-34px;position:relative}.sms-page-hero__identity{display:flex;align-items:flex-end;gap:15px;min-width:0}.sms-page-hero__avatar{width:92px;height:92px;border-radius:22px;border:5px solid var(--sms-surface);display:grid;place-items:center;overflow:hidden;background:var(--sms-primary);color:#fff;font-size:30px;font-weight:900;flex:0 0 auto}.sms-page-hero__avatar img{width:100%;height:100%;object-fit:cover}.sms-page-hero__identity h1{margin:0 0 4px;font-size:clamp(28px,3vw,38px);line-height:1.05}.sms-page-hero__identity p{margin:0;color:var(--sms-muted)}.sms-page-hero__actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}.sms-page-foundation-note{font-size:12px;color:var(--sms-muted)}.sms-page-hero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--sms-border)}.sms-page-hero__stats>div{padding:13px 18px;border-right:1px solid var(--sms-border)}.sms-page-hero__stats>div:last-child{border-right:0}.sms-page-hero__stats strong,.sms-page-hero__stats span{display:block}.sms-page-hero__stats span{margin-top:2px;color:var(--sms-muted);font-size:13px}.sms-page-tabs{display:flex;gap:6px;padding:7px;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:16px}.sms-page-tabs button{border:0;background:transparent;color:var(--sms-muted);padding:9px 16px;border-radius:11px;font:inherit;font-weight:750}.sms-page-tabs button.is-active{background:color-mix(in srgb,var(--sms-primary) 12%,var(--sms-surface));color:var(--sms-primary)}.sms-page-panel[hidden]{display:none!important}.sms-page-panel{display:grid;gap:16px}.sms-page-about{padding:20px;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:18px}.sms-page-about h2{margin:4px 0 10px}.sms-page-about>p{margin:0;color:var(--sms-muted);line-height:1.6}.sms-page-about__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.sms-page-about__meta>div{padding:14px;border:1px solid var(--sms-border);border-radius:14px;background:var(--sms-surface-muted)}.sms-page-about__meta small,.sms-page-about__meta strong{display:block}.sms-page-about__meta small{text-transform:uppercase;letter-spacing:.06em;color:var(--sms-muted);font-size:11px}.sms-page-about__meta strong{margin-top:5px}.sms-page-detail>[data-sms-page-status][data-kind="error"],.sms-pages [data-sms-page-status][data-kind="error"]{color:var(--sms-danger,#b42318)} @media(max-width:767px){.sms-pages__toolbar{padding:16px;align-items:stretch;flex-direction:column}.sms-page-grid{grid-template-columns:1fr}.sms-page-create-modal{padding:0;align-items:end}.sms-page-create-dialog{width:100%;max-height:94dvh;border-radius:22px 22px 0 0}.sms-page-hero__cover{min-height:128px}.sms-page-hero__body{align-items:flex-start;flex-direction:column;margin-top:-28px;padding:0 16px 15px}.sms-page-hero__identity{align-items:flex-end}.sms-page-hero__avatar{width:76px;height:76px;border-radius:19px}.sms-page-hero__identity h1{font-size:27px}.sms-page-hero__actions{width:100%;justify-content:flex-start}.sms-page-hero__stats>div{padding:11px 12px}.sms-page-tabs{overflow-x:auto}.sms-page-about__meta{grid-template-columns:1fr}} /* 0.9.0-alpha.1.1 — canonical Activity More menu + owner delete */ .sms-activity-more{position:relative;display:inline-flex;align-items:center}.sms-activity-more-trigger{display:inline-grid;place-items:center;inline-size:40px;block-size:40px;min-inline-size:40px;min-block-size:40px;padding:0;border:0;border-radius:11px;background:transparent;color:var(--sms-muted-strong);cursor:pointer}.sms-activity-more-trigger:hover,.sms-activity-more-trigger:focus-visible,.sms-activity-more.is-open .sms-activity-more-trigger{background:var(--sms-primary-soft);color:var(--sms-primary);outline:none}.sms-activity-more-menu{position:absolute;z-index:60;inset-inline-end:0;inset-block-end:calc(100% + 7px);display:grid;min-inline-size:180px;padding:6px;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-surface,#fff);box-shadow:0 12px 34px rgba(15,20,35,.18);color:var(--sms-text)}.sms-activity-more-menu[hidden]{display:none!important}.sms-activity-more-menu button{inline-size:100%;min-block-size:38px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--sms-text);font:inherit;font-size:.76rem;font-weight:700;text-align:start;cursor:pointer}.sms-activity-more-menu button:hover,.sms-activity-more-menu button:focus-visible{background:var(--sms-primary-soft);outline:none}.sms-activity-more-menu button.is-danger{color:var(--sms-danger,#b32d2e)}.sms-activity-more.is-busy{opacity:.6;pointer-events:none}@media(max-width:767px){.sms-activity-more-trigger{inline-size:38px;block-size:38px;min-inline-size:38px;min-block-size:38px}.sms-activity-more-menu{position:fixed;inset-inline:12px;inset-block:auto max(12px,env(safe-area-inset-bottom));min-inline-size:0;padding:8px;border-radius:14px}.sms-activity-more-menu button{min-block-size:46px;font-size:.82rem}} .sms-composer__link-preview--automatic{margin:2px 0 10px}.sms-composer__link-preview--automatic .sms-composer-link-card{inline-size:100%} /* Page Workspace — 0.9.0-alpha.2 */ .sms-page-verified-mark{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:6px;border-radius:999px;background:var(--sms-primary);color:#fff;font-size:11px;font-weight:900;vertical-align:middle}.sms-page-workspace{display:grid;gap:16px}.sms-page-workspace__header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:22px}.sms-page-workspace__header h1{margin:5px 0 7px;font-size:clamp(26px,3vw,36px)}.sms-page-workspace__header p{margin:0;max-width:760px;color:var(--sms-muted);line-height:1.55}.sms-page-workspace__nav{display:flex;gap:7px;overflow-x:auto;padding:7px;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:16px}.sms-page-workspace__nav a{flex:0 0 auto;padding:9px 13px;border-radius:11px;color:var(--sms-text);font-weight:750;text-decoration:none}.sms-page-workspace__nav a:hover,.sms-page-workspace__nav a:focus-visible{background:var(--sms-surface-muted);color:var(--sms-primary)}.sms-page-workspace__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.sms-page-workspace-card{min-width:0;padding:20px;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:18px}.sms-page-workspace-card.is-wide{grid-column:1/-1}.sms-page-workspace-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.sms-page-workspace-card>header h2{margin:4px 0 0;font-size:21px}.sms-page-workspace-card>header>strong{font-size:22px}.sms-page-workspace__muted{margin:0 0 14px;color:var(--sms-muted);line-height:1.55}.sms-page-workspace__media-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,.7fr);gap:16px;margin-bottom:18px}.sms-page-workspace__media-grid>div>strong{display:block;margin-bottom:8px}.sms-page-workspace__cover{aspect-ratio:16/5;min-height:140px;overflow:hidden;border:1px solid var(--sms-border);border-radius:15px;background:linear-gradient(135deg,color-mix(in srgb,var(--sms-primary) 80%,#5fa9ff),color-mix(in srgb,var(--sms-primary) 44%,#8ce2cd))}.sms-page-workspace__cover img{width:100%;height:100%;object-fit:cover}.sms-page-workspace__avatar{width:128px;height:128px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--sms-border);border-radius:25px;background:var(--sms-primary);color:#fff;font-size:38px;font-weight:900}.sms-page-workspace__avatar img{width:100%;height:100%;object-fit:cover}.sms-page-workspace__media-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:9px}.sms-page-workspace__media-actions label,.sms-page-workspace__media-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 11px;border:1px solid var(--sms-border);border-radius:11px;background:var(--sms-surface-muted);color:var(--sms-text);font:inherit;font-weight:750;cursor:pointer}.sms-page-workspace__media-actions input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.sms-page-workspace-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.sms-page-workspace-form label{display:grid;gap:7px;font-weight:750}.sms-page-workspace-form .is-wide{grid-column:1/-1}.sms-page-workspace-form input,.sms-page-workspace-form textarea,.sms-page-team-add input,.sms-page-team-add select,.sms-page-team-actions select,.sms-page-verification-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-surface-muted);color:var(--sms-text);padding:10px 12px;font:inherit}.sms-page-team-add{display:grid;grid-template-columns:minmax(0,1fr) 160px auto;gap:9px;margin-bottom:14px}.sms-page-team-list{display:grid;gap:9px}.sms-page-team-list article{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px;border:1px solid var(--sms-border);border-radius:14px;background:var(--sms-surface-muted)}.sms-page-team-person{display:flex;align-items:center;gap:10px;min-width:0}.sms-page-team-person strong,.sms-page-team-person small{display:block}.sms-page-team-person small{margin-top:2px;color:var(--sms-muted)}.sms-page-team-avatar{width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;border-radius:12px;background:var(--sms-primary);color:#fff;font-weight:900}.sms-page-team-avatar img{width:100%;height:100%;object-fit:cover}.sms-page-team-actions{display:flex;align-items:center;gap:8px}.sms-page-team-actions select{width:auto;min-width:130px}.sms-page-team-actions button{min-height:38px;padding:7px 10px;border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface);color:var(--sms-text);font:inherit;font-weight:750}.sms-page-team-actions button.is-danger{color:var(--sms-danger,#b42318)}.sms-page-role-badge,.sms-page-verification-status{display:inline-flex;align-items:center;min-height:28px;padding:4px 9px;border-radius:999px;background:var(--sms-surface-muted);color:var(--sms-muted);font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}.sms-page-verification-status.is-verified{background:color-mix(in srgb,var(--sms-primary) 14%,var(--sms-surface));color:var(--sms-primary)}.sms-page-verification-form{display:grid;gap:10px}.sms-page-verification-form label{display:grid;gap:7px;font-weight:750}.sms-page-verification-review{display:flex;gap:9px;flex-wrap:wrap;margin-top:11px}.sms-page-insights{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.sms-page-insights>div{padding:12px;border:1px solid var(--sms-border);border-radius:13px;background:var(--sms-surface-muted)}.sms-page-insights span,.sms-page-insights strong{display:block}.sms-page-insights span{color:var(--sms-muted);font-size:12px}.sms-page-insights strong{margin-top:4px;font-size:23px}.sms-page-workspace>[data-sms-page-status][data-kind="error"]{color:var(--sms-danger,#b42318)}.sms-page-workspace>[data-sms-page-status][data-kind="success"]{color:var(--sms-primary)} @media(max-width:767px){.sms-page-workspace__header{flex-direction:column;padding:16px}.sms-page-workspace__grid{grid-template-columns:1fr}.sms-page-workspace-card{padding:15px}.sms-page-workspace__media-grid{grid-template-columns:1fr}.sms-page-workspace__cover{min-height:110px}.sms-page-workspace-form{grid-template-columns:1fr}.sms-page-workspace-form .is-wide{grid-column:auto}.sms-page-team-add{grid-template-columns:1fr}.sms-page-team-list article{align-items:flex-start;flex-direction:column}.sms-page-team-actions{width:100%;flex-wrap:wrap}.sms-page-team-actions select{flex:1 1 160px}.sms-page-insights{grid-template-columns:1fr 1fr}} /* Activity report dialog */ html.sms-activity-report-open,html.sms-activity-report-open body{overflow:hidden}.sms-activity-report-modal{position:fixed;inset:0;z-index:100120;display:grid;place-items:center;padding:20px;background:rgba(16,24,40,.52);backdrop-filter:blur(8px)}.sms-activity-report-modal[hidden]{display:none!important}.sms-activity-report-modal>section{width:min(520px,100%);background:var(--sms-surface,#fff);color:var(--sms-text,#101828);border:1px solid var(--sms-border,#e4e7ec);border-radius:22px;box-shadow:0 24px 80px rgba(16,24,40,.22);overflow:hidden}.sms-activity-report-modal header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 20px;border-bottom:1px solid var(--sms-border)}.sms-activity-report-modal header span{display:block;color:var(--sms-primary);font-size:11px;font-weight:900;letter-spacing:.08em}.sms-activity-report-modal header h2{margin:3px 0 0;font-size:21px}.sms-activity-report-modal header button{width:40px;height:40px;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-soft);color:var(--sms-text);font:inherit;font-size:24px;cursor:pointer}.sms-activity-report-modal form{display:grid;gap:14px;padding:20px}.sms-activity-report-modal label{display:grid;gap:7px;font-size:.88rem;font-weight:750}.sms-activity-report-modal select,.sms-activity-report-modal textarea{width:100%;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-soft);color:var(--sms-text);padding:11px 12px;font:inherit}.sms-activity-report-modal textarea{resize:vertical;min-height:100px}.sms-activity-report-modal form>div{display:flex;justify-content:flex-end;gap:10px}.sms-activity-report-modal form>div button{min-height:40px;padding:9px 14px;border:0;border-radius:10px;background:var(--sms-primary);color:#fff;font:inherit;font-weight:800;cursor:pointer}.sms-activity-report-modal form>div button.is-secondary{border:1px solid var(--sms-border);background:var(--sms-soft);color:var(--sms-text)}.sms-activity-report-modal form>div button:disabled{opacity:.55;cursor:not-allowed}.sms-activity-report-status{min-height:20px;margin:0;color:var(--sms-muted);font-size:.82rem}.sms-activity-report-status.has-error{color:var(--sms-danger,#b42318)}.sms-activity-report-status.is-success{color:var(--sms-success,#067647)}@media(max-width:767px){.sms-activity-report-modal{padding:0;align-items:end}.sms-activity-report-modal>section{width:100%;max-height:92dvh;overflow:auto;border-radius:22px 22px 0 0}.sms-activity-report-modal form>div{display:grid;grid-template-columns:1fr 1fr}.sms-activity-report-modal form>div button{width:100%}} /* 0.9.0-alpha.2.2 — compact post menu in the canonical top-right header position. */ .sms-activity-card__header-actions{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:max-content!important} .sms-activity-card__header-actions .sms-activity-card__visibility{display:inline-flex;align-items:center;margin-top:0} .sms-activity-card__header .sms-activity-more{position:relative;display:inline-flex;align-items:center} .sms-activity-card__header .sms-activity-more-trigger{display:inline-grid;place-items:center;inline-size:34px;block-size:34px;min-inline-size:34px;min-block-size:34px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--sms-muted-strong);cursor:pointer} .sms-activity-card__header .sms-activity-more-trigger:hover,.sms-activity-card__header .sms-activity-more-trigger:focus-visible,.sms-activity-card__header .sms-activity-more.is-open .sms-activity-more-trigger{background:var(--sms-primary-soft);color:var(--sms-primary);outline:none} .sms-activity-card__header .sms-more-icon{display:block;width:20px;height:20px} .sms-activity-card__header .sms-activity-more-menu{position:absolute!important;z-index:80;inset-inline-start:auto!important;inset-inline-end:0!important;inset-block-start:calc(100% + 6px)!important;inset-block-end:auto!important;inline-size:208px;min-inline-size:0!important;max-inline-size:calc(100vw - 28px);box-sizing:border-box;padding:5px;border:1px solid var(--sms-border);border-radius:11px;background:var(--sms-surface,#fff);box-shadow:0 10px 28px rgba(15,20,35,.16);color:var(--sms-text)} .sms-activity-card__header .sms-activity-more-menu[hidden]{display:none!important} .sms-activity-card__header .sms-activity-more-menu button{display:flex;align-items:center;inline-size:100%;min-block-size:36px;box-sizing:border-box;padding:8px 10px!important;border:0;border-radius:8px;background:transparent;color:var(--sms-text);font-family:inherit!important;font-size:14px!important;font-weight:650!important;line-height:1.2!important;letter-spacing:0!important;text-align:start;white-space:nowrap;cursor:pointer} .sms-activity-card__header .sms-activity-more-menu button:hover,.sms-activity-card__header .sms-activity-more-menu button:focus-visible{background:var(--sms-primary-soft);outline:none} .sms-activity-card__header .sms-activity-more-menu button.is-danger{color:var(--sms-danger,#b32d2e)} @media(max-width:767px){.sms-activity-card__header{grid-template-columns:40px minmax(0,1fr) auto}.sms-activity-card__header-actions{gap:0}.sms-activity-card__header .sms-activity-more-menu{position:absolute!important;inset-inline-start:auto!important;inset-inline-end:0!important;inset-block-start:calc(100% + 6px)!important;inset-block-end:auto!important;inline-size:196px;min-inline-size:0!important;max-inline-size:calc(100vw - 24px);padding:5px;border-radius:11px}.sms-activity-card__header .sms-activity-more-menu button{min-block-size:38px;font-size:14px!important}} /* 0.14.1-alpha.1.1 — Messaging Full-Screen Experience */ .sms-app-message-action{position:relative} .sms-messages{inline-size:min(100%,1120px);margin-inline:auto} .sms-messages__appbar{min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px 10px 16px;border:1px solid var(--sms-border);border-bottom:0;border-radius:20px 20px 0 0;background:var(--sms-surface);color:var(--sms-text)} .sms-messages__appbar>div{min-width:0;display:grid;gap:1px} .sms-messages__appbar strong{font-size:16px} .sms-messages__appbar small{color:var(--sms-muted);font-size:11px} .sms-message-shell-button{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-surface-muted);color:var(--sms-text);font:inherit;font-size:23px;line-height:1;cursor:pointer} .sms-message-shell-button:hover,.sms-message-shell-button:focus-visible{border-color:color-mix(in srgb,var(--sms-primary) 34%,var(--sms-border));background:var(--sms-primary-soft);outline:none} .sms-message-shell-button.is-back{display:none;font-size:20px} .sms-messages__layout{display:grid;grid-template-columns:minmax(270px,330px) minmax(0,1fr);height:min(720px,calc(100dvh - 150px));min-height:560px;overflow:hidden;border:1px solid var(--sms-border);border-radius:0 0 20px 20px;background:var(--sms-surface);box-shadow:var(--sms-card-shadow,0 10px 30px rgba(16,24,40,.06))} .sms-messages__sidebar{display:flex;min-width:0;min-height:0;flex-direction:column;border-inline-end:1px solid var(--sms-border);background:var(--sms-surface)} .sms-message-start{display:grid;gap:7px;padding:14px;border-bottom:1px solid var(--sms-border);background:color-mix(in srgb,var(--sms-surface) 97%,var(--sms-primary) 3%)} .sms-message-start label{display:grid;gap:7px;font-size:12px;font-weight:850;color:var(--sms-muted)} .sms-message-start label>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px} .sms-message-start input{width:100%;min-width:0;border:1px solid var(--sms-border);border-radius:11px;background:var(--sms-surface-muted);color:var(--sms-text);padding:9px 10px;font:inherit} .sms-message-start .sms-profile-button{min-height:40px;padding:8px 11px} .sms-message-start>small,.sms-message-start>[data-sms-message-status]{color:var(--sms-muted);font-size:11px;line-height:1.4} .sms-message-conversation-list{display:grid;min-height:0;align-content:start;overflow:auto;overscroll-behavior:contain} .sms-message-conversation{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 13px;border-bottom:1px solid var(--sms-border);color:var(--sms-text);text-decoration:none} .sms-message-conversation:hover,.sms-message-conversation:focus-visible,.sms-message-conversation.is-active{background:var(--sms-primary-soft);outline:none} .sms-message-avatar{display:grid;place-items:center;inline-size:44px;block-size:44px;overflow:hidden;border-radius:50%;background:linear-gradient(135deg,var(--sms-primary),#8a72ef);color:#fff;font-weight:900} .sms-message-avatar img{width:100%;height:100%;object-fit:cover} .sms-message-conversation__copy{min-width:0;display:grid;gap:3px} .sms-message-conversation__copy strong{display:flex;align-items:center;gap:5px;min-width:0;font-size:14px} .sms-message-conversation__copy strong i{color:var(--sms-primary);font-style:normal} .sms-message-conversation__copy small{overflow:hidden;color:var(--sms-muted);font-size:12px;text-overflow:ellipsis;white-space:nowrap} .sms-message-conversation>b,.sms-page-inbox-item>b{display:grid;place-items:center;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:var(--sms-primary);color:#fff;font-size:10px} .sms-message-thread{display:flex;min-width:0;min-height:0;flex-direction:column;background:var(--sms-surface)} .sms-message-thread>.sms-app-empty-state{margin:auto 20px} .sms-message-thread__header{display:flex;align-items:center;gap:10px;min-height:68px;padding:10px 14px;border-bottom:1px solid var(--sms-border);background:color-mix(in srgb,var(--sms-surface) 97%,var(--sms-primary) 3%)} .sms-message-thread__header .sms-message-avatar{width:42px;height:42px} .sms-message-thread__identity{min-width:0;display:grid;gap:2px} .sms-message-thread__identity strong,.sms-message-thread__identity small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sms-message-thread__header strong{font-size:15px} .sms-message-thread__header small{color:var(--sms-muted);font-size:12px} .sms-message-thread__messages{display:flex;min-height:0;flex:1;flex-direction:column;gap:8px;overflow:auto;overscroll-behavior:contain;padding:16px 18px;background:color-mix(in srgb,var(--sms-surface-muted) 42%,var(--sms-surface))} .sms-message-thread__empty{margin:auto;color:var(--sms-muted);font-size:13px} .sms-message-bubble{inline-size:fit-content;align-self:flex-start;max-width:min(76%,560px);padding:8px 11px;border:1px solid var(--sms-border);border-radius:16px 16px 16px 5px;background:var(--sms-surface);color:var(--sms-text);box-shadow:0 2px 7px rgba(15,23,42,.035)} .sms-message-bubble.is-mine{align-self:flex-end;border-color:color-mix(in srgb,var(--sms-primary) 23%,var(--sms-border));border-radius:16px 16px 5px 16px;background:var(--sms-primary-soft)} .sms-message-bubble>small{display:block;margin-bottom:3px;color:var(--sms-muted);font-size:10px;font-weight:800} .sms-message-bubble p{margin:0;overflow-wrap:anywhere;font-size:14px;line-height:1.42} .sms-message-bubble time{display:block;margin-top:4px;color:var(--sms-muted);font-size:9px;text-align:end} .sms-message-attachment{display:grid;gap:1px;margin-top:7px;padding:7px 9px;border:1px solid var(--sms-border);border-radius:9px;background:var(--sms-surface);color:var(--sms-text);text-decoration:none} .sms-message-attachment strong{overflow-wrap:anywhere;font-size:12px} .sms-message-attachment small{color:var(--sms-muted);font-size:10px} .sms-message-attachment--image{appearance:none;-webkit-appearance:none;display:grid;gap:5px;inline-size:min(340px,72vw);max-inline-size:100%;padding:0;border:0;background:transparent;color:inherit;text-align:start;cursor:zoom-in;overflow:visible} .sms-message-attachment__image{display:block;inline-size:100%;block-size:auto;max-block-size:420px;object-fit:contain;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-surface-muted)} .sms-message-attachment__meta{display:flex;align-items:center;justify-content:space-between;gap:9px;min-inline-size:0;padding-inline:2px} .sms-message-attachment__meta strong{min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px} .sms-message-attachment__meta small{flex:0 0 auto;color:var(--sms-muted);font-size:9px} .sms-message-media-viewer{position:fixed;inset:0;z-index:100920;display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:stretch;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgba(4,7,15,.94);backdrop-filter:blur(12px);box-sizing:border-box} .sms-message-media-viewer[hidden]{display:none!important} .sms-message-media-viewer__stage{min-inline-size:0;min-block-size:0;display:grid;place-items:center;overflow:hidden} .sms-message-media-viewer__stage>img{display:block;max-inline-size:min(94vw,1440px);max-block-size:calc(100dvh - 112px);inline-size:auto;block-size:auto;object-fit:contain;border-radius:12px;box-shadow:0 28px 90px rgba(0,0,0,.44);user-select:none;-webkit-user-drag:none} .sms-message-media-viewer__close{position:fixed;z-index:2;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));inline-size:46px;block-size:46px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:rgba(15,23,42,.78);color:#fff;font:700 28px/1 system-ui;cursor:pointer} .sms-message-media-viewer__actions{display:flex;justify-content:center;align-items:center;min-block-size:48px;padding-top:8px} .sms-message-media-viewer__actions>a{display:inline-flex;align-items:center;justify-content:center;min-block-size:42px;padding:0 16px;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:rgba(255,255,255,.1);color:#fff;font-size:13px;font-weight:800;text-decoration:none} body.sms-message-media-viewer-open{overflow:hidden!important} .sms-message-compose{display:grid;gap:5px;padding:10px 12px;border-top:1px solid var(--sms-border);background:var(--sms-surface)} .sms-message-compose__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:8px} .sms-message-compose textarea{width:100%;min-height:44px;max-height:132px;resize:none;border:1px solid var(--sms-border);border-radius:15px;background:var(--sms-surface-muted);color:var(--sms-text);padding:11px 12px;font:inherit;line-height:1.4;overflow-y:auto} .sms-message-compose .sms-profile-button{min-height:44px;border-radius:13px;padding-inline:15px} .sms-message-compose>[data-sms-message-status]{min-height:13px;color:var(--sms-muted);font-size:10px} .sms-message-attach{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 10px;border:1px solid var(--sms-border);border-radius:13px;background:var(--sms-surface-muted);color:var(--sms-text);font-size:12px;font-weight:750;cursor:pointer} .sms-message-attach input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} /* Page Inbox keeps its own workspace layout; its redesign is a separate remediation step. */ .sms-page-inbox{display:grid;grid-template-columns:minmax(240px,310px) minmax(0,1fr);min-height:480px;overflow:hidden;border:1px solid var(--sms-border);border-radius:16px}.sms-page-inbox-list{display:grid;align-content:start;overflow:auto;border-inline-end:1px solid var(--sms-border)}.sms-page-inbox-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;padding:11px;border:0;border-bottom:1px solid var(--sms-border);background:var(--sms-surface);color:var(--sms-text);font:inherit;text-align:start;cursor:pointer}.sms-page-inbox-item:hover,.sms-page-inbox-item:focus-visible,.sms-page-inbox-item.is-active{background:var(--sms-primary-soft);outline:none}.sms-page-inbox-item .sms-message-avatar{width:42px;height:42px}.sms-page-inbox-item>span:nth-child(2){min-width:0}.sms-page-inbox-item strong,.sms-page-inbox-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sms-page-inbox-item strong{font-size:13px}.sms-page-inbox-item small{margin-top:3px;color:var(--sms-muted);font-size:11px}.sms-page-inbox-thread{display:flex;min-width:0;flex-direction:column}.sms-page-inbox-thread>.sms-app-empty-state{margin:auto 18px}.sms-page-inbox-thread[aria-busy="true"]{opacity:.65;pointer-events:none} @media(max-width:767px){ body.sms-messages-open{overflow:hidden!important;overscroll-behavior:none} body.sms-route-messages .sms-app-topbar,body.sms-route-messages .sms-app-rail,body.sms-route-messages .sms-app-drawer-backdrop{visibility:hidden!important;pointer-events:none!important} .sms-messages{position:fixed;z-index:100200;inset:0;inline-size:100vw;block-size:100dvh;margin:0;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--sms-surface);color:var(--sms-text);isolation:isolate} .sms-messages__appbar{min-height:calc(56px + env(safe-area-inset-top,0px));padding:calc(8px + env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) 8px max(14px,env(safe-area-inset-left,0px));border:0;border-bottom:1px solid var(--sms-border);border-radius:0;box-shadow:0 1px 0 rgba(15,23,42,.02)} .sms-messages__appbar strong{font-size:17px} .sms-message-shell-button{width:42px;height:42px;border-radius:50%} .sms-messages__layout{grid-template-columns:1fr;block-size:100%;min-block-size:0;border:0;border-radius:0;box-shadow:none} .sms-messages__sidebar{min-height:0;border:0} .sms-message-start{padding:11px max(10px,env(safe-area-inset-right,0px)) 10px max(10px,env(safe-area-inset-left,0px))} .sms-message-conversation-list{max-height:none;min-height:0;flex:1} .sms-message-conversation{grid-template-columns:48px minmax(0,1fr) auto;min-height:68px;padding:10px max(12px,env(safe-area-inset-right,0px)) 10px max(12px,env(safe-area-inset-left,0px))} .sms-message-conversation .sms-message-avatar{width:48px;height:48px} .sms-messages[data-active-conversation="false"] .sms-message-thread{display:none} .sms-messages[data-active-conversation="true"] .sms-messages__sidebar{display:none} .sms-messages[data-active-conversation="true"] .sms-message-thread{display:flex;min-height:0} .sms-message-thread__header{min-height:62px;padding:8px max(10px,env(safe-area-inset-right,0px)) 8px max(8px,env(safe-area-inset-left,0px));gap:8px} .sms-message-thread__header .sms-message-shell-button.is-back{display:grid} .sms-message-thread__header .sms-message-avatar{width:40px;height:40px} .sms-message-thread__messages{min-height:0;padding:12px max(10px,env(safe-area-inset-right,0px)) 12px max(10px,env(safe-area-inset-left,0px));gap:7px} .sms-message-bubble{max-width:82%;padding:8px 10px} .sms-message-bubble p{font-size:14px} .sms-message-compose{position:relative;z-index:4;padding:8px max(8px,env(safe-area-inset-right,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));box-shadow:0 -6px 18px rgba(15,23,42,.05)} .sms-message-compose__row{grid-template-columns:44px minmax(0,1fr) auto;gap:6px} .sms-message-attach{width:44px;min-height:44px;padding:0;border-radius:50%;font-size:0} .sms-message-attach span::before{content:"+";font-size:24px;font-weight:500;line-height:1} .sms-message-compose textarea{min-height:44px;padding:11px 12px;border-radius:18px} .sms-message-compose .sms-profile-button{min-width:58px;min-height:44px;padding:8px 12px;border-radius:18px} .sms-message-compose>[data-sms-message-status]{padding-inline:4px} .sms-page-inbox{grid-template-columns:1fr;min-height:0}.sms-page-inbox-list{max-height:260px;border-inline-end:0;border-bottom:1px solid var(--sms-border)}.sms-page-inbox-thread{min-height:440px}.sms-page-inbox-thread .sms-message-thread__messages{min-height:250px} } /* 0.10.1-alpha.1.2 — explicit, nonce-protected account sign-out. */ .sms-app-logout { inline-size: 38px; block-size: 38px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sms-border); border-radius: 12px; background: var(--sms-surface); color: var(--sms-muted-strong); text-decoration: none; transition: border-color 140ms ease, background 140ms ease, color 140ms ease; } .sms-app-logout:hover, .sms-app-logout:focus-visible { border-color: color-mix(in srgb, #c9354d 45%, var(--sms-border)); background: color-mix(in srgb, #c9354d 7%, var(--sms-surface)); color: #c9354d; } .sms-app-logout .sms-icon { inline-size: 19px; block-size: 19px; } .sms-app-logout-link strong { color: #c9354d; } @media (max-width: 767px) { .sms-app-logout--desktop { display: none; } } /* 0.12.3 adaptive video player */ .sms-video-player{position:relative;overflow:hidden;background:#090b11} .sms-video-quality{position:absolute;z-index:4;top:10px;right:10px;display:flex;align-items:center;max-width:120px;border:1px solid rgba(255,255,255,.22);border-radius:9px;background:rgba(8,10,15,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 14px rgba(0,0,0,.2)} .sms-video-quality[hidden]{display:none!important} .sms-video-quality select{appearance:none;-webkit-appearance:none;min-width:72px;max-width:116px;border:0!important;outline:0;background:transparent;color:#fff;padding:6px 22px 6px 9px;font:inherit;font-size:.72rem;font-weight:750;line-height:1.2;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);background-position:calc(100% - 11px) 50%,calc(100% - 7px) 50%;background-size:4px 4px,4px 4px;background-repeat:no-repeat} .sms-video-quality select option{color:#111;background:#fff} .sms-video-quality .screen-reader-text{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} @media (max-width:680px){.sms-video-quality{top:8px;right:8px}.sms-video-quality select{min-width:66px;padding:5px 20px 5px 8px;font-size:.68rem}} /* 0.12.6-alpha.1 — immersive TikTok/Reels-style native-video viewer */ html.sms-video-immersive-open,body.sms-video-immersive-open{overflow:hidden!important;overscroll-behavior:none!important} .sms-activity-card__native{position:relative} .sms-video-immersive-launch{position:absolute;z-index:6;inset-block-start:10px;inset-inline-start:10px;display:grid;place-items:center;inline-size:36px;block-size:36px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:11px;background:rgba(8,10,15,.68);color:#fff;box-shadow:0 5px 18px rgba(0,0,0,.2);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);cursor:pointer} .sms-video-immersive-launch svg{inline-size:19px;block-size:19px} .sms-activity-card.has-native-video:not(.sms-activity-card--immersive) .sms-activity-card__native{cursor:pointer} .sms-activity-card.has-native-video:not(.sms-activity-card--immersive) .sms-activity-card__native>video{pointer-events:none} .sms-video-stream .sms-activity-card:not(.sms-activity-card--immersive) .sms-video-quality{pointer-events:none} /* Videos route: compact discovery grid. The canonical Activity card is preserved so immersive playback keeps the same reactions/comments/share/save state. */ .sms-video-stream .sms-activity-stream{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive){display:flex;flex-direction:column;min-inline-size:0;overflow:hidden;border-radius:16px;box-shadow:0 8px 24px rgba(24,28,45,.08);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive):hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--sms-primary) 28%,var(--sms-border));box-shadow:0 12px 28px rgba(24,28,45,.12)} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__native{order:1;inline-size:100%;aspect-ratio:4/5;max-block-size:none;overflow:hidden;background:#07090e} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__native>video{inline-size:100%;block-size:100%;max-block-size:none;object-fit:cover;background:#07090e} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__header{order:2;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:9px 10px 10px;min-block-size:49px} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__header .sms-activity-card__avatar{inline-size:30px;block-size:30px} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__header>div:nth-child(2){overflow:hidden} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__header>div:nth-child(2)>a strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;line-height:1.2} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__header>div:nth-child(2)>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:.66rem} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__header .sms-activity-card__header-actions, .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__body, .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-reactions{display:none!important} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive) .sms-video-immersive-launch{inset-block-start:8px;inset-inline-start:8px;inline-size:34px;block-size:34px;background:rgba(8,10,14,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive) .sms-video-quality{display:none!important} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive) .sms-video-compatibility-warning{display:none!important} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive) video::-webkit-media-controls{display:none!important} @media(max-width:900px){.sms-video-stream .sms-activity-stream{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}} /* Mobile Videos route is deliberately its own compact discovery surface rather than a shrunken desktop/feed layout. Two portrait cards remain visible side by side, while secondary timestamp chrome is removed from the grid only. */ @media(max-width:680px){ .sms-video-stream .sms-activity-stream{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;align-items:start} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive){border-radius:12px;box-shadow:0 4px 14px rgba(24,28,45,.07)} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive):hover{transform:none;box-shadow:0 4px 14px rgba(24,28,45,.07)} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__native{aspect-ratio:4/5} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__header{grid-template-columns:22px minmax(0,1fr);gap:6px;padding:6px 7px;min-block-size:36px} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__header .sms-activity-card__avatar{inline-size:22px;block-size:22px} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__header>div:nth-child(2)>a{display:block;min-inline-size:0} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__header>div:nth-child(2)>a strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.69rem;line-height:1.15} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__header>div:nth-child(2)>span{display:none!important} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive) .sms-video-immersive-launch{inset-block-start:6px;inset-inline-start:6px;inline-size:29px;block-size:29px;border-radius:9px} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive) .sms-video-immersive-launch svg{inline-size:16px;block-size:16px} } @media(max-width:360px){ .sms-video-stream .sms-activity-stream{gap:5px} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive){border-radius:10px} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__header{grid-template-columns:20px minmax(0,1fr);gap:5px;padding:5px 6px;min-block-size:32px} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__header .sms-activity-card__avatar{inline-size:20px;block-size:20px} .sms-video-stream .sms-activity-card.has-native-video:not(.sms-activity-card--immersive)>.sms-activity-card__header>div:nth-child(2)>a strong{font-size:.64rem} } /* 0.17.1-alpha.81 — YouTube/Shorts are canonical external-video Activities. The Videos route uses remote thumbnails instead of re-hosting the media; the fullscreen shell reserves a separate action rail so SMSocial controls never cover the embedded YouTube player. */ .sms-external-video-thumbnail,.sms-external-video-provider,.sms-external-video-launch{display:none} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive){display:flex;flex-direction:column;min-inline-size:0;overflow:hidden;border-radius:16px;box-shadow:0 8px 24px rgba(24,28,45,.08);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive):hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--sms-primary) 28%,var(--sms-border));box-shadow:0 12px 28px rgba(24,28,45,.12)} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__embed--youtube{order:1;position:relative;inline-size:100%;aspect-ratio:4/5;overflow:hidden;background:#07090e;cursor:pointer} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__embed--youtube iframe{display:none!important} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive) .sms-external-video-thumbnail{display:block;position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;background:#07090e} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive) .sms-external-video-provider{display:inline-flex;position:absolute;z-index:5;inset-inline-end:8px;inset-block-start:8px;align-items:center;min-block-size:25px;padding:0 8px;border-radius:999px;background:rgba(190,0,0,.88);color:#fff;font-size:.62rem;font-weight:850;letter-spacing:.02em;box-shadow:0 3px 12px rgba(0,0,0,.24);pointer-events:none} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive) .sms-external-video-launch{display:grid;inset-block-start:8px;inset-inline-start:8px;inline-size:34px;block-size:34px} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__header{order:2;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:9px 10px 10px;min-block-size:49px} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__header .sms-activity-card__avatar{inline-size:30px;block-size:30px} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__header>div:nth-child(2){overflow:hidden} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__header>div:nth-child(2)>a strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;line-height:1.2} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__header>div:nth-child(2)>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-size:.66rem} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__header .sms-activity-card__header-actions, .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__body, .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-reactions{display:none!important} @media(max-width:680px){ .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive){border-radius:12px;box-shadow:0 4px 14px rgba(24,28,45,.07)} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive):hover{transform:none;box-shadow:0 4px 14px rgba(24,28,45,.07)} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__header{grid-template-columns:22px minmax(0,1fr);gap:6px;padding:6px 7px;min-block-size:36px} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__header .sms-activity-card__avatar{inline-size:22px;block-size:22px} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__header>div:nth-child(2)>a{display:block;min-inline-size:0} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__header>div:nth-child(2)>a strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.69rem;line-height:1.15} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__header>div:nth-child(2)>span{display:none!important} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive) .sms-external-video-launch{inset-block-start:6px;inset-inline-start:6px;inline-size:29px;block-size:29px;border-radius:9px} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive) .sms-external-video-provider{inset-block-start:6px;inset-inline-end:6px;min-block-size:21px;padding-inline:6px;font-size:.55rem} } @media(max-width:360px){ .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive){border-radius:10px} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__header{grid-template-columns:20px minmax(0,1fr);gap:5px;padding:5px 6px;min-block-size:32px} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__header .sms-activity-card__avatar{inline-size:20px;block-size:20px} .sms-video-stream .sms-activity-card.has-external-video:not(.sms-activity-card--immersive)>.sms-activity-card__header>div:nth-child(2)>a strong{font-size:.64rem} } /* YouTube fullscreen: provider media stays in a dedicated viewport. SMSocial interaction controls live in the reserved right rail, not over the iframe. */ .sms-video-immersive .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--youtube{position:absolute;z-index:1;inset-block-start:max(62px,calc(env(safe-area-inset-top) + 58px));inset-block-end:max(150px,calc(env(safe-area-inset-bottom) + 138px));inset-inline-start:0;inset-inline-end:74px;display:grid;place-items:center;inline-size:auto;block-size:auto;max-inline-size:none;margin:0;background:#050608;overflow:hidden} .sms-video-immersive .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--youtube iframe{position:relative;inset:auto;display:block!important;inline-size:100%;block-size:auto;max-inline-size:100%;max-block-size:100%;aspect-ratio:16/9;border:0;background:#000} .sms-video-immersive .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--9x16 iframe{inline-size:auto;block-size:100%;aspect-ratio:9/16} .sms-video-immersive .sms-activity-card--immersive.has-external-video .sms-external-video-thumbnail, .sms-video-immersive .sms-activity-card--immersive.has-external-video .sms-external-video-provider, .sms-video-immersive .sms-activity-card--immersive.has-external-video .sms-external-video-launch{display:none!important} .sms-video-immersive .sms-activity-card--immersive.has-external-video .sms-activity-card__header{inset-inline:16px 86px;inset-block-end:max(72px,calc(env(safe-area-inset-bottom) + 64px));text-shadow:none} .sms-video-immersive .sms-activity-card--immersive.has-external-video .sms-activity-card__body{display:none!important} .sms-video-immersive .sms-activity-card--immersive.has-external-video::after{display:none!important} @media(max-width:680px){ .sms-video-immersive .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--youtube{inset-inline-end:68px;inset-block-start:max(60px,calc(env(safe-area-inset-top) + 55px));inset-block-end:max(142px,calc(env(safe-area-inset-bottom) + 130px))} .sms-video-immersive .sms-activity-card--immersive.has-external-video .sms-activity-card__header{inset-inline:12px 78px;inset-block-end:max(68px,calc(env(safe-area-inset-bottom) + 60px))} } .sms-video-immersive{position:fixed;z-index:100050;inset:0;background:#050608;color:#fff;isolation:isolate} .sms-video-immersive__topbar{position:fixed;z-index:100090;inset-block-start:0;inset-inline:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;block-size:58px;padding:env(safe-area-inset-top) 18px 0;background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,0));pointer-events:none} .sms-video-immersive__topbar strong{justify-self:start;font-size:.88rem;font-weight:850;letter-spacing:.02em;text-shadow:0 1px 8px rgba(0,0,0,.6)} .sms-video-immersive__topbar span{justify-self:center;font-size:.72rem;font-weight:750;color:rgba(255,255,255,.8);text-shadow:0 1px 8px rgba(0,0,0,.6)} .sms-video-immersive__close{pointer-events:auto;justify-self:end;display:grid;place-items:center;inline-size:38px;block-size:38px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(8,10,14,.66);color:#fff;font:inherit;font-size:1.65rem;line-height:1;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .sms-video-immersive__close:hover,.sms-video-immersive__close:focus-visible{background:rgba(255,255,255,.16);outline:2px solid rgba(255,255,255,.75);outline-offset:2px} .sms-video-immersive__rail{position:absolute;inset:0;block-size:100dvh;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior-y:contain;scrollbar-width:none;touch-action:pan-y} .sms-video-immersive__rail::-webkit-scrollbar{display:none} .sms-video-immersive__slide{position:relative;display:grid;place-items:center;inline-size:100%;block-size:100dvh;min-block-size:100dvh;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#050608} .sms-video-immersive__slide::before{content:"";position:absolute;z-index:0;inset:0;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.055),transparent 46%);pointer-events:none} .sms-video-immersive__navigation{position:fixed;z-index:100085;inset-inline-end:22px;inset-block-start:50%;display:grid;gap:9px;transform:translateY(-50%)} .sms-video-immersive__navigation button{display:grid;place-items:center;inline-size:42px;block-size:42px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(8,10,14,.62);color:#fff;font:inherit;font-size:1.05rem;font-weight:850;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .sms-video-immersive__navigation button:disabled{opacity:.25;cursor:default} .sms-video-immersive__navigation button:not(:disabled):hover,.sms-video-immersive__navigation button:not(:disabled):focus-visible{background:rgba(255,255,255,.16);outline:2px solid rgba(255,255,255,.65);outline-offset:2px} .sms-video-immersive .sms-activity-card--immersive{position:relative;display:block;inline-size:min(100%,560px);block-size:100dvh;max-block-size:100dvh;overflow:hidden;border:0!important;border-radius:0!important;background:#050608!important;box-shadow:none!important;color:#fff} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__native{position:absolute;z-index:1;inset:0;display:grid;place-items:center;inline-size:100%;block-size:100%;background:#050608} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__native>video{display:block;inline-size:100%;block-size:100%;max-block-size:none;object-fit:contain;background:#050608} .sms-video-immersive .sms-activity-card--immersive .sms-video-immersive-launch{display:none!important} .sms-video-immersive .sms-activity-card--immersive .sms-video-quality{inset-block-start:max(66px,calc(env(safe-area-inset-top) + 58px));inset-inline-end:12px;z-index:14} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__header{position:absolute;z-index:12;inset-inline:18px 82px;inset-block-end:112px;display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;padding:0;color:#fff;pointer-events:auto;text-shadow:0 1px 10px rgba(0,0,0,.75)} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__avatar{inline-size:42px;block-size:42px;border:1px solid rgba(255,255,255,.42)} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__header a,.sms-video-immersive .sms-activity-card--immersive .sms-activity-card__header strong{color:#fff} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__header span{color:rgba(255,255,255,.78)} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__visibility{display:none!important} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__header-actions{align-self:start} .sms-video-immersive .sms-activity-card--immersive .sms-activity-more-trigger{border-color:rgba(255,255,255,.18);background:rgba(0,0,0,.42);color:#fff} .sms-video-immersive .sms-activity-card--immersive .sms-activity-more-menu{inset-inline:auto 0;background:#15171d;color:#fff;border-color:rgba(255,255,255,.16)} .sms-video-immersive .sms-activity-card--immersive .sms-activity-more-menu button{color:#fff} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__body{position:absolute;z-index:11;inset-inline:18px 86px;inset-block-end:56px;padding:0;color:#fff;pointer-events:none;text-shadow:0 1px 10px rgba(0,0,0,.82)} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__body h3{margin:0 0 5px;font-size:.94rem} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__body p{display:-webkit-box;overflow:hidden;margin:0;color:#fff;font-size:.82rem;line-height:1.45;-webkit-line-clamp:3;-webkit-box-orient:vertical} .sms-video-immersive .sms-activity-card--immersive::after{content:"";position:absolute;z-index:8;inset-inline:0;inset-block-end:0;block-size:43%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72));pointer-events:none} .sms-video-immersive .sms-activity-card--immersive>.sms-reactions{position:absolute;z-index:13;inset-inline-end:12px;inset-block-end:64px;display:flex;flex-direction:column;align-items:center;border:0;background:transparent;color:#fff} .sms-video-immersive .sms-activity-card--immersive>.sms-reactions>.sms-reactions__summary{min-block-size:0;padding:0 0 5px;color:#fff} .sms-video-immersive .sms-activity-card--immersive>.sms-reactions>.sms-reactions__summary .sms-reactions__stack{display:none} .sms-video-immersive .sms-activity-card--immersive>.sms-reactions>.sms-reactions__summary .sms-reactions__total{min-inline-size:30px;text-align:center;font-size:.68rem;font-weight:800;text-shadow:0 1px 8px rgba(0,0,0,.75)} .sms-video-immersive .sms-activity-card--immersive .sms-activity-actions{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding:0} .sms-video-immersive .sms-activity-card--immersive .sms-reaction-trigger,.sms-video-immersive .sms-activity-card--immersive .sms-comment-trigger,.sms-video-immersive .sms-activity-card--immersive .sms-share-trigger,.sms-video-immersive .sms-activity-card--immersive .sms-save-trigger,.sms-video-immersive .sms-activity-card--immersive .sms-save-collections-trigger{inline-size:46px;block-size:46px;min-inline-size:46px;min-block-size:46px;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(8,10,14,.52);color:#fff;box-shadow:0 5px 16px rgba(0,0,0,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)} .sms-video-immersive .sms-activity-card--immersive .sms-reaction-trigger:hover,.sms-video-immersive .sms-activity-card--immersive .sms-comment-trigger:hover,.sms-video-immersive .sms-activity-card--immersive .sms-share-trigger:hover,.sms-video-immersive .sms-activity-card--immersive .sms-save-trigger:hover{background:rgba(255,255,255,.16);color:#fff} .sms-video-immersive .sms-activity-card--immersive .sms-reaction-control.is-active .sms-reaction-trigger,.sms-video-immersive .sms-activity-card--immersive .sms-save-control.is-saved .sms-save-trigger{color:#ff5a73} .sms-video-immersive .sms-activity-card--immersive .sms-comment-trigger small,.sms-video-immersive .sms-activity-card--immersive .sms-share-trigger small{border-color:#050608} .sms-video-immersive .sms-activity-card--immersive .sms-share-control{margin-inline-start:0} .sms-video-immersive .sms-activity-card--immersive .sms-save-control{display:flex;flex-direction:column;gap:6px} .sms-video-immersive .sms-activity-card--immersive .sms-reaction-picker{inset-inline:auto calc(100% + 9px);inset-block-end:0;transform-origin:right bottom;background:#171920;border-color:rgba(255,255,255,.15)} .sms-video-immersive .sms-activity-card--immersive .sms-reaction-control:hover .sms-reaction-picker,.sms-video-immersive .sms-activity-card--immersive .sms-reaction-control:focus-within .sms-reaction-picker,.sms-video-immersive .sms-activity-card--immersive .sms-reaction-picker.is-open{transform:translateY(0) scale(1)} .sms-video-immersive .sms-activity-card--immersive .sms-comments.is-immersive-comments:not([hidden]){position:fixed;z-index:100080;inset:auto auto 0 50%;transform:translateX(-50%);inline-size:min(560px,calc(100vw - 40px));max-block-size:min(72dvh,720px);overflow:auto;border:1px solid rgba(255,255,255,.12);border-block-end:0;border-radius:22px 22px 0 0;padding:18px;background:var(--sms-surface,#fff);color:var(--sms-text,#172033);box-shadow:0 -22px 56px rgba(0,0,0,.34),0 0 0 100vmax rgba(0,0,0,.28)} .sms-video-immersive .sms-activity-card--immersive .sms-comments.is-immersive-comments:not([hidden])~*{pointer-events:auto} @media(min-width:900px){ .sms-video-immersive .sms-activity-card--immersive{inline-size:min(54vw,590px);border-inline:1px solid rgba(255,255,255,.08)!important} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__native>video{object-fit:contain} } @media(max-width:767px){ .sms-video-immersive__topbar{block-size:52px;padding-inline:12px} .sms-video-immersive__topbar strong{font-size:.8rem} .sms-video-immersive__navigation{display:none} .sms-video-immersive .sms-activity-card--immersive{inline-size:100%;block-size:100dvh;max-block-size:100dvh} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__native>video{object-fit:contain} .sms-video-immersive .sms-activity-card--immersive .sms-video-quality{inset-block-start:max(58px,calc(env(safe-area-inset-top) + 50px));inset-inline-end:9px} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__header{inset-inline:14px 70px;inset-block-end:max(112px,calc(env(safe-area-inset-bottom) + 96px));grid-template-columns:38px minmax(0,1fr) auto} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__avatar{inline-size:38px;block-size:38px} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__body{inset-inline:14px 76px;inset-block-end:max(52px,calc(env(safe-area-inset-bottom) + 42px))} .sms-video-immersive .sms-activity-card--immersive>.sms-reactions{inset-inline-end:8px;inset-block-end:max(52px,calc(env(safe-area-inset-bottom) + 40px))} .sms-video-immersive .sms-activity-card--immersive .sms-activity-actions{justify-content:flex-end;gap:7px} .sms-video-immersive .sms-activity-card--immersive .sms-reaction-trigger,.sms-video-immersive .sms-activity-card--immersive .sms-comment-trigger,.sms-video-immersive .sms-activity-card--immersive .sms-share-trigger,.sms-video-immersive .sms-activity-card--immersive .sms-save-trigger,.sms-video-immersive .sms-activity-card--immersive .sms-save-collections-trigger{inline-size:43px;block-size:43px;min-inline-size:43px;min-block-size:43px} .sms-video-immersive .sms-activity-card--immersive .sms-reaction-picker{position:fixed;inset-inline-start:50%;inset-inline-end:auto;inset-block-end:max(18px,env(safe-area-inset-bottom));transform:translate(-50%,8px) scale(.96);transform-origin:center bottom} .sms-video-immersive .sms-activity-card--immersive .sms-reaction-picker.is-open{transform:translate(-50%,0) scale(1)!important} .sms-video-immersive .sms-activity-card--immersive .sms-comments.is-immersive-comments:not([hidden]){inset:auto auto 0 50%;transform:translateX(-50%);inline-size:100%;max-block-size:min(72dvh,690px);border-inline:0;border-block-end:0;border-block-start:1px solid var(--sms-border);border-radius:20px 20px 0 0;padding:16px 14px max(18px,env(safe-area-inset-bottom));box-shadow:0 -22px 56px rgba(0,0,0,.34),0 0 0 100vmax rgba(0,0,0,.22)} .sms-video-immersive-launch{inset-block-start:8px;inset-inline-start:8px;inline-size:34px;block-size:34px} } @media(prefers-reduced-motion:reduce){.sms-video-immersive__rail{scroll-behavior:auto}.sms-video-immersive__navigation button,.sms-video-immersive__close{transition:none}} /* 0.13.0 Events Foundation */ .sms-events,.sms-event-detail{display:grid;gap:16px}.sms-events__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:20px}.sms-events__toolbar h2{margin:4px 0 6px;font-size:clamp(23px,2.2vw,31px)}.sms-events__toolbar p{margin:0;max-width:760px;color:var(--sms-muted);line-height:1.55}.sms-event-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.sms-event-card{display:grid;grid-template-columns:92px minmax(0,1fr);gap:0;overflow:hidden;min-height:150px;color:var(--sms-text);text-decoration:none;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:18px;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.sms-event-card:hover,.sms-event-card:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--sms-primary) 38%,var(--sms-border));box-shadow:0 12px 28px rgba(15,23,42,.07)}.sms-event-card__date{display:grid;align-content:center;justify-items:center;padding:15px 10px;background:linear-gradient(160deg,color-mix(in srgb,var(--sms-primary) 18%,var(--sms-surface)),color-mix(in srgb,#61c8db 12%,var(--sms-surface)))}.sms-event-card__date strong{font-size:38px;line-height:1;font-weight:850}.sms-event-card__date span{margin-top:5px;color:var(--sms-primary);font-size:13px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.sms-event-card__copy{display:flex;min-width:0;flex-direction:column;padding:15px 16px}.sms-event-card__copy>small{color:var(--sms-primary);font-weight:850;text-transform:uppercase;letter-spacing:.04em}.sms-event-card__copy h3{margin:5px 0 6px;font-size:19px;line-height:1.3}.sms-event-card__copy p{margin:0;color:var(--sms-muted)}.sms-event-card__copy footer{display:flex;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px;color:var(--sms-muted);font-size:12px}.sms-event-create-modal{position:fixed;inset:0;z-index:100050;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.58);backdrop-filter:blur(5px)}.sms-event-create-modal[hidden]{display:none}.sms-event-create-dialog{width:min(720px,100%);max-height:min(820px,calc(100dvh - 40px));overflow:auto;background:var(--sms-surface);color:var(--sms-text);border:1px solid var(--sms-border);border-radius:22px;box-shadow:0 24px 70px rgba(15,23,42,.25)}.sms-event-create-dialog>header{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--sms-border)}.sms-event-create-dialog>header span{font-size:12px;color:var(--sms-primary);font-weight:900;letter-spacing:.08em}.sms-event-create-dialog>header h2{margin:3px 0 0}.sms-event-create-dialog>header button{width:40px;height:40px;border:0;border-radius:12px;background:var(--sms-surface-muted);color:var(--sms-text);font-size:25px;cursor:pointer}.sms-event-create-dialog form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:22px}.sms-event-create-dialog label{display:grid;gap:7px;font-weight:750}.sms-event-create-dialog .is-wide{grid-column:1/-1}.sms-event-create-dialog input,.sms-event-create-dialog select,.sms-event-create-dialog textarea{width:100%;box-sizing:border-box;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-surface-muted);color:var(--sms-text);padding:11px 12px;font:inherit}.sms-event-create-actions{display:flex;justify-content:flex-end;gap:9px}.sms-event-back{display:inline-flex;width:max-content;color:var(--sms-primary);font-weight:800;text-decoration:none}.sms-event-hero{overflow:hidden;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:22px}.sms-event-hero__visual{min-height:220px;display:flex;align-items:center;justify-content:center;gap:22px;padding:28px;background:radial-gradient(circle at 18% 20%,color-mix(in srgb,#70d5dc 38%,transparent),transparent 34%),linear-gradient(135deg,color-mix(in srgb,var(--sms-primary) 88%,#4d78f0),color-mix(in srgb,var(--sms-primary) 40%,#65d7c6));color:#fff}.sms-event-hero__calendar{width:126px;height:136px;display:grid;grid-template-rows:38px 1fr;overflow:hidden;border-radius:24px;background:rgba(255,255,255,.96);color:#111827;box-shadow:0 18px 42px rgba(15,23,42,.2)}.sms-event-hero__calendar span{display:grid;place-items:center;background:var(--sms-primary);color:#fff;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.sms-event-hero__calendar strong{display:grid;place-items:center;font-size:57px}.sms-event-hero__visual-copy{display:grid;gap:4px}.sms-event-hero__visual-copy span{font-size:14px;font-weight:850;text-transform:uppercase;letter-spacing:.1em}.sms-event-hero__visual-copy strong{font-size:34px;line-height:1}.sms-event-hero__visual-copy small{opacity:.86}.sms-event-hero__body{padding:21px 22px}.sms-event-hero__body h1{margin:4px 0 8px;font-size:clamp(28px,3.5vw,43px);line-height:1.08}.sms-event-hero__body>p{margin:0;color:var(--sms-muted)}.sms-event-hero__actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:17px}.sms-event-hero__actions .sms-profile-button.is-active{background:var(--sms-primary);border-color:var(--sms-primary);color:#fff}.sms-event-hero__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--sms-border)}.sms-event-hero__stats>div{padding:13px 18px;border-right:1px solid var(--sms-border)}.sms-event-hero__stats>div:last-child{border-right:0}.sms-event-hero__stats strong,.sms-event-hero__stats span{display:block}.sms-event-hero__stats span{margin-top:2px;color:var(--sms-muted);font-size:12px}.sms-event-detail__grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.7fr);gap:16px}.sms-event-info,.sms-event-attendees{padding:20px;background:var(--sms-surface);border:1px solid var(--sms-border);border-radius:18px}.sms-event-info h2,.sms-event-attendees h2{margin:0 0 13px;font-size:20px}.sms-event-info>p{margin:0;color:var(--sms-muted);line-height:1.65}.sms-event-info dl{display:grid;gap:9px;margin:18px 0 0}.sms-event-info dl>div{padding:12px 13px;border:1px solid var(--sms-border);border-radius:13px;background:var(--sms-surface-muted)}.sms-event-info dt{color:var(--sms-muted);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.sms-event-info dd{margin:4px 0 0;font-weight:700}.sms-event-info dd a{color:var(--sms-primary)}.sms-event-attendees>p{margin:0;color:var(--sms-muted)}.sms-event-attendee-list{display:grid;gap:8px}.sms-event-attendee-list a{display:flex;align-items:center;gap:10px;padding:9px;border-radius:12px;color:var(--sms-text);text-decoration:none;background:var(--sms-surface-muted);border:1px solid transparent}.sms-event-attendee-list a:hover{border-color:var(--sms-border)}.sms-event-attendee-list a>span{width:38px;height:38px;flex:0 0 auto;display:grid;place-items:center;overflow:hidden;border-radius:11px;background:var(--sms-primary);color:#fff;font-weight:900}.sms-event-attendee-list img{width:100%;height:100%;object-fit:cover}.sms-event-attendee-list strong,.sms-event-attendee-list small{display:block}.sms-event-attendee-list small{margin-top:2px;color:var(--sms-muted);font-size:11px}.sms-events>[data-sms-event-status][data-kind="error"],.sms-event-detail>[data-sms-event-status][data-kind="error"]{color:var(--sms-danger,#b42318)} @media(max-width:900px){.sms-event-grid{grid-template-columns:1fr}.sms-event-detail__grid{grid-template-columns:1fr}} @media(max-width:767px){.sms-events__toolbar{align-items:stretch;flex-direction:column;padding:16px}.sms-event-create-modal{padding:0;align-items:end}.sms-event-create-dialog{width:100%;max-height:94dvh;border-radius:22px 22px 0 0}.sms-event-create-dialog form{grid-template-columns:1fr;padding:17px}.sms-event-create-dialog .is-wide{grid-column:auto}.sms-event-card{grid-template-columns:78px minmax(0,1fr)}.sms-event-card__date strong{font-size:32px}.sms-event-card__copy footer{flex-direction:column;gap:3px}.sms-event-hero__visual{min-height:170px;padding:20px}.sms-event-hero__calendar{width:100px;height:112px;border-radius:19px}.sms-event-hero__calendar strong{font-size:46px}.sms-event-hero__visual-copy strong{font-size:28px}.sms-event-hero__body{padding:17px}.sms-event-hero__stats>div{padding:11px}.sms-event-hero__stats strong{font-size:14px}.sms-event-info,.sms-event-attendees{padding:16px}} /* 0.13.0-alpha.1.1 — immersive viewer shell / fullscreen isolation hotfix */ body.sms-video-immersive-open .sms-app-root{visibility:hidden!important;pointer-events:none!important;user-select:none!important} body.sms-video-immersive-open>.sms-video-immersive{visibility:visible!important;pointer-events:auto!important;z-index:2147483000!important} .sms-video-immersive__back{pointer-events:auto;justify-self:start;display:inline-flex;align-items:center;gap:8px;min-block-size:40px;padding:0 13px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(8,10,14,.66);color:#fff;font:inherit;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .sms-video-immersive__back>span{font-size:1.1rem;line-height:1;transform:translateY(-1px)} .sms-video-immersive__back>strong{font-size:.8rem;font-weight:800;color:#fff;text-shadow:none} .sms-video-immersive__back:hover,.sms-video-immersive__back:focus-visible{background:rgba(255,255,255,.16);outline:2px solid rgba(255,255,255,.75);outline-offset:2px} @media(max-width:680px){.sms-video-immersive__back{min-block-size:38px;padding:0 11px;gap:6px}.sms-video-immersive__back>strong{font-size:.76rem}} /* 0.13.0-alpha.1.2 — unified mobile-first overlay actions for immersive native video. */ .sms-video-immersive .sms-activity-card--immersive>.sms-reactions{ position:absolute; z-index:24; inset-inline-end:max(12px,env(safe-area-inset-right,0px)); inset-block-end:max(142px,calc(env(safe-area-inset-bottom,0px) + 128px)); inline-size:56px; border:0!important; background:transparent!important; color:#fff; pointer-events:auto; } .sms-video-immersive .sms-activity-card--immersive>.sms-reactions>.sms-reactions__summary{ position:absolute; z-index:3; inset-block-start:-5px; inset-inline-end:-2px; display:grid; place-items:center; min-block-size:0; padding:0; pointer-events:none; } .sms-video-immersive .sms-activity-card--immersive>.sms-reactions>.sms-reactions__summary .sms-reactions__stack{display:none!important} .sms-video-immersive .sms-activity-card--immersive>.sms-reactions>.sms-reactions__summary .sms-reactions__total{ display:grid; place-items:center; min-inline-size:18px; block-size:18px; padding-inline:4px; border:2px solid #050608; border-radius:999px; background:var(--sms-primary,#7467ff); color:#fff; font-size:.56rem; font-weight:850; line-height:1; box-shadow:0 3px 10px rgba(0,0,0,.28); text-shadow:none; } .sms-video-immersive .sms-activity-card--immersive>.sms-reactions>.sms-reactions__summary .sms-reactions__total:empty{display:none} .sms-video-immersive .sms-activity-card--immersive .sms-activity-actions{ display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:17px; padding:0; } .sms-video-immersive .sms-activity-card--immersive .sms-reaction-control, .sms-video-immersive .sms-activity-card--immersive .sms-share-control, .sms-video-immersive .sms-activity-card--immersive .sms-save-control{margin:0;display:block} .sms-video-immersive .sms-activity-card--immersive .sms-reaction-trigger, .sms-video-immersive .sms-activity-card--immersive .sms-comment-trigger, .sms-video-immersive .sms-activity-card--immersive .sms-share-trigger, .sms-video-immersive .sms-activity-card--immersive .sms-save-trigger{ position:relative; display:grid; place-items:center; inline-size:50px; block-size:50px; min-inline-size:50px; min-block-size:50px; padding:0!important; overflow:visible; border:1px solid rgba(255,255,255,.17); border-radius:50%; background:rgba(8,10,14,.58); color:#fff; box-shadow:0 7px 22px rgba(0,0,0,.22); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:transform .14s ease,background-color .14s ease,border-color .14s ease,color .14s ease; } .sms-video-immersive .sms-activity-card--immersive .sms-reaction-trigger:hover, .sms-video-immersive .sms-activity-card--immersive .sms-reaction-trigger:focus-visible, .sms-video-immersive .sms-activity-card--immersive .sms-comment-trigger:hover, .sms-video-immersive .sms-activity-card--immersive .sms-comment-trigger:focus-visible, .sms-video-immersive .sms-activity-card--immersive .sms-share-trigger:hover, .sms-video-immersive .sms-activity-card--immersive .sms-share-trigger:focus-visible, .sms-video-immersive .sms-activity-card--immersive .sms-save-trigger:hover, .sms-video-immersive .sms-activity-card--immersive .sms-save-trigger:focus-visible{ transform:scale(1.045); background:rgba(255,255,255,.17); border-color:rgba(255,255,255,.3); color:#fff; outline:none; } .sms-video-immersive .sms-activity-card--immersive .sms-reaction-trigger .sms-reaction-icon, .sms-video-immersive .sms-activity-card--immersive .sms-comment-trigger .sms-comment-icon, .sms-video-immersive .sms-activity-card--immersive .sms-share-trigger .sms-share-icon, .sms-video-immersive .sms-activity-card--immersive .sms-save-trigger .sms-save-icon{ inline-size:24px; block-size:24px; flex:0 0 24px; } .sms-video-immersive .sms-activity-card--immersive .sms-action-label{ position:absolute!important; inset-block-start:calc(100% + 3px)!important; inset-inline-start:50%!important; inline-size:max-content!important; block-size:auto!important; max-inline-size:68px; margin:0!important; padding:0!important; overflow:visible!important; clip:auto!important; white-space:nowrap!important; transform:translateX(-50%); border:0!important; color:rgba(255,255,255,.94); font-size:.58rem; font-weight:800; line-height:1.1; text-shadow:0 1px 7px rgba(0,0,0,.95); } .sms-video-immersive .sms-activity-card--immersive .sms-comment-trigger small, .sms-video-immersive .sms-activity-card--immersive .sms-share-trigger small{ position:absolute; inset-block-start:-4px; inset-inline-end:-4px; display:grid; place-items:center; min-inline-size:18px; block-size:18px; padding:0 4px; border:2px solid #050608; border-radius:999px; background:var(--sms-primary,#7467ff); color:#fff; font-size:.56rem; font-weight:850; line-height:1; box-shadow:0 3px 10px rgba(0,0,0,.28); } .sms-video-immersive .sms-activity-card--immersive .sms-comment-trigger small:empty, .sms-video-immersive .sms-activity-card--immersive .sms-share-trigger small:empty{display:none} .sms-video-immersive .sms-activity-card--immersive .sms-reaction-control.is-active .sms-reaction-trigger{color:#ff5a73;border-color:rgba(255,90,115,.42);background:rgba(32,10,15,.66)} .sms-video-immersive .sms-activity-card--immersive .sms-share-control.is-shared .sms-share-trigger{color:#c4b9ff;border-color:rgba(196,185,255,.4);background:rgba(24,19,54,.62)} .sms-video-immersive .sms-activity-card--immersive .sms-save-control.is-saved .sms-save-trigger{color:#c4b9ff;border-color:rgba(196,185,255,.4);background:rgba(24,19,54,.62)} .sms-video-immersive .sms-activity-card--immersive .sms-save-control.is-saved .sms-save-icon{fill:currentColor} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__header{inset-inline-end:94px} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__body{inset-inline-end:98px} @media(max-width:767px){ .sms-video-immersive .sms-activity-card--immersive>.sms-reactions{ inset-inline-end:max(8px,env(safe-area-inset-right,0px)); inset-block-end:max(148px,calc(env(safe-area-inset-bottom,0px) + 132px)); inline-size:54px; } .sms-video-immersive .sms-activity-card--immersive .sms-activity-actions{gap:16px} .sms-video-immersive .sms-activity-card--immersive .sms-reaction-trigger, .sms-video-immersive .sms-activity-card--immersive .sms-comment-trigger, .sms-video-immersive .sms-activity-card--immersive .sms-share-trigger, .sms-video-immersive .sms-activity-card--immersive .sms-save-trigger{ inline-size:48px; block-size:48px; min-inline-size:48px; min-block-size:48px; } .sms-video-immersive .sms-activity-card--immersive .sms-reaction-trigger .sms-reaction-icon, .sms-video-immersive .sms-activity-card--immersive .sms-comment-trigger .sms-comment-icon, .sms-video-immersive .sms-activity-card--immersive .sms-share-trigger .sms-share-icon, .sms-video-immersive .sms-activity-card--immersive .sms-save-trigger .sms-save-icon{inline-size:23px;block-size:23px} .sms-video-immersive .sms-activity-card--immersive .sms-action-label{font-size:.56rem} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__header{inset-inline:14px 84px} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__body{inset-inline:14px 88px} } @media(max-width:380px){ .sms-video-immersive .sms-activity-card--immersive>.sms-reactions{inset-inline-end:max(5px,env(safe-area-inset-right,0px));inline-size:50px} .sms-video-immersive .sms-activity-card--immersive .sms-activity-actions{gap:14px} .sms-video-immersive .sms-activity-card--immersive .sms-reaction-trigger, .sms-video-immersive .sms-activity-card--immersive .sms-comment-trigger, .sms-video-immersive .sms-activity-card--immersive .sms-share-trigger, .sms-video-immersive .sms-activity-card--immersive .sms-save-trigger{inline-size:46px;block-size:46px;min-inline-size:46px;min-block-size:46px} .sms-video-immersive .sms-activity-card--immersive .sms-action-label{font-size:.53rem} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__header{inset-inline-end:78px} .sms-video-immersive .sms-activity-card--immersive .sms-activity-card__body{inset-inline-end:82px} } /* Share / Save dialogs opened from the immersive rail must remain above the fullscreen portal. */ body.sms-video-immersive-open>.sms-share-modal, body.sms-video-immersive-open>.sms-saved-modal{z-index:2147483200!important} /* 0.13.0-alpha.1.3 — immersive comments close control. */ .sms-comments__close{display:none;place-items:center;flex:0 0 auto;inline-size:42px;block-size:42px;min-inline-size:42px;min-block-size:42px;padding:0!important;border:1px solid var(--sms-border)!important;border-radius:999px!important;background:var(--sms-surface,#fff)!important;color:var(--sms-text,#172033)!important;font:inherit!important;font-size:1.55rem!important;font-weight:500!important;line-height:1!important;cursor:pointer} .sms-comments__close span{display:block;transform:translateY(-1px)} .sms-comments.is-immersive-comments .sms-comments__header .sms-comments__close{display:grid} .sms-comments.is-immersive-comments .sms-comments__header>span[data-sms-comments-status]{margin-inline-start:auto} .sms-comments.is-immersive-comments .sms-comments__close:hover,.sms-comments.is-immersive-comments .sms-comments__close:focus-visible{border-color:color-mix(in srgb,var(--sms-primary) 45%,var(--sms-border))!important;background:var(--sms-primary-soft)!important;color:var(--sms-primary)!important;outline:2px solid color-mix(in srgb,var(--sms-primary) 30%,transparent);outline-offset:2px} @media(max-width:767px){.sms-comments.is-immersive-comments .sms-comments__close{inline-size:46px;block-size:46px;min-inline-size:46px;min-block-size:46px}.sms-comments.is-immersive-comments .sms-comments__header{position:sticky;top:0;z-index:2;background:var(--sms-surface,#fff);padding-block:2px 6px}} /* 0.13.0-alpha.1.4 — comments are an overlay in front of immersive video on every viewport. */ .sms-video-immersive .sms-comments.is-immersive-comments:not([hidden]){overscroll-behavior:contain;-webkit-overflow-scrolling:touch} .sms-video-immersive .sms-comments.is-immersive-comments:not([hidden]) .sms-comments__header{position:sticky;top:0;z-index:3;background:var(--sms-surface,#fff)} @media(min-width:900px){.sms-video-immersive .sms-activity-card--immersive .sms-comments.is-immersive-comments:not([hidden]){inline-size:min(590px,54vw);padding:18px 18px 22px}} /* 0.13.0-alpha.1.7 — stable vertical Reels navigation. */ .sms-video-immersive__rail{ -webkit-overflow-scrolling:touch; touch-action:pan-y pinch-zoom; scroll-snap-type:y mandatory; } .sms-video-immersive__slide{ scroll-snap-align:start; scroll-snap-stop:always; } .sms-video-immersive.is-interaction-layer-open .sms-video-immersive__rail{ overflow-y:hidden; touch-action:none; } .sms-video-immersive .sms-comments.is-immersive-comments:not([hidden]){ overscroll-behavior:contain; touch-action:pan-y; } @media (hover:none) and (pointer:coarse){ .sms-video-immersive__navigation{display:none} } /* SMSocial 0.14.0-alpha.1 — Marketplace Foundation */ .sms-marketplace,.sms-marketplace-detail{display:grid;gap:18px}.sms-marketplace__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.sms-marketplace__toolbar h2{margin:4px 0 6px}.sms-marketplace__toolbar p{margin:0;max-width:720px;color:var(--sms-muted,#667085)}.sms-marketplace-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.sms-marketplace-card{display:block;overflow:hidden;border:1px solid var(--sms-border,#e6e8ee);border-radius:16px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 8px 28px rgba(15,23,42,.05);transition:transform .16s ease,box-shadow .16s ease}.sms-marketplace-card:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(15,23,42,.09)}.sms-marketplace-card__media{aspect-ratio:4/3;display:grid;place-items:center;background:#f6f7fb;overflow:hidden}.sms-marketplace-card__media img{width:100%;height:100%;object-fit:cover}.sms-marketplace-card__media>span{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;background:#fff}.sms-marketplace-card__body{padding:14px}.sms-marketplace-card__body>strong{font-size:20px}.sms-marketplace-card__body h3{font-size:15px;line-height:1.35;margin:5px 0}.sms-marketplace-card__body p,.sms-marketplace-card__body small{margin:0;color:var(--sms-muted,#667085)}.sms-marketplace-create-modal{position:fixed;inset:0;z-index:100020;display:grid;place-items:center;padding:20px;background:rgba(15,23,42,.5);backdrop-filter:blur(8px)}.sms-marketplace-create-modal[hidden]{display:none}.sms-marketplace-create-dialog{width:min(720px,100%);max-height:min(760px,calc(100dvh - 40px));overflow:auto;border-radius:20px;background:#fff;box-shadow:0 28px 80px rgba(15,23,42,.24)}.sms-marketplace-create-dialog>header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--sms-border,#e6e8ee)}.sms-marketplace-create-dialog>header span{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--sms-primary,#6d5dfc)}.sms-marketplace-create-dialog>header h2{margin:3px 0 0}.sms-marketplace-create-dialog>header button{width:38px;height:38px;border:0;border-radius:12px;background:#f4f5f7;font-size:24px;cursor:pointer}.sms-marketplace-create-dialog form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:20px}.sms-marketplace-create-dialog label{display:grid;gap:6px}.sms-marketplace-create-dialog label>span{font-size:13px;font-weight:700}.sms-marketplace-create-dialog input,.sms-marketplace-create-dialog textarea,.sms-marketplace-create-dialog select{width:100%;box-sizing:border-box;border:1px solid var(--sms-border,#dfe3ea);border-radius:12px;background:#fff;padding:11px 12px;font:inherit}.sms-marketplace-create-dialog .is-wide{grid-column:1/-1}.sms-marketplace-create-actions{display:flex;justify-content:flex-end;gap:10px}.sms-marketplace-detail__card{display:grid;grid-template-columns:minmax(280px,46%) 1fr;overflow:hidden;border:1px solid var(--sms-border,#e6e8ee);border-radius:20px;background:#fff;box-shadow:0 10px 36px rgba(15,23,42,.06)}.sms-marketplace-detail__media{min-height:420px;display:grid;place-items:center;background:#f6f7fb}.sms-marketplace-detail__media img{width:100%;height:100%;object-fit:cover}.sms-marketplace-detail__media>span{width:72px;height:72px;display:grid;place-items:center;border-radius:20px;background:#fff}.sms-marketplace-detail__body{padding:24px;min-width:0}.sms-marketplace-detail__body h1{margin:5px 0 8px}.sms-marketplace-detail__price{display:block;font-size:28px;margin-bottom:18px}.sms-marketplace-detail__body dl{display:grid;gap:8px;margin:18px 0}.sms-marketplace-detail__body dl div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid #eef0f3}.sms-marketplace-detail__body dt{color:var(--sms-muted,#667085)}.sms-marketplace-detail__body dd{margin:0;font-weight:700}.sms-marketplace-seller{display:flex;align-items:center;gap:10px;margin-top:20px;padding:14px;border-radius:16px;background:#f8f9fb}.sms-marketplace-seller>span{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;overflow:hidden;background:#fff;font-weight:800}.sms-marketplace-seller>span img{width:100%;height:100%;object-fit:cover}.sms-marketplace-seller>div{display:grid;flex:1}.sms-marketplace-seller small{color:var(--sms-muted,#667085)}.sms-marketplace-owner-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} @media(max-width:900px){.sms-marketplace-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sms-marketplace-detail__card{grid-template-columns:1fr}.sms-marketplace-detail__media{min-height:0;aspect-ratio:4/3}} @media(max-width:640px){.sms-marketplace__toolbar{align-items:stretch;flex-direction:column}.sms-marketplace__toolbar>.sms-profile-button{align-self:flex-start}.sms-marketplace-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.sms-marketplace-card{border-radius:13px}.sms-marketplace-card__body{padding:10px}.sms-marketplace-card__body>strong{font-size:17px}.sms-marketplace-card__body h3{font-size:13px}.sms-marketplace-card__body p,.sms-marketplace-card__body small{font-size:11px}.sms-marketplace-create-modal{padding:0;align-items:end}.sms-marketplace-create-dialog{width:100%;max-height:92dvh;border-radius:20px 20px 0 0;padding-bottom:max(0px,env(safe-area-inset-bottom))}.sms-marketplace-create-dialog form{grid-template-columns:1fr;padding:16px}.sms-marketplace-create-dialog .is-wide{grid-column:auto}.sms-marketplace-create-actions{position:sticky;bottom:0;margin:0 -16px -16px;padding:12px 16px max(12px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--sms-border,#e6e8ee)}.sms-marketplace-detail__body{padding:18px}.sms-marketplace-detail__price{font-size:24px}.sms-marketplace-seller{align-items:flex-start;flex-wrap:wrap}.sms-marketplace-seller .sms-profile-button{width:100%;justify-content:center}.sms-marketplace-owner-actions .sms-profile-button{flex:1 1 auto;justify-content:center}} /* Full-system localisation switcher: intentionally compact in the context rail. */ .sms-app-language-card{border:1px solid var(--sms-line,#e4e7ec);border-radius:18px;background:#fff;padding:14px 16px;display:grid;gap:11px}.sms-app-language-card__copy{display:grid;gap:3px}.sms-app-language-card__copy strong{font-size:14px;color:var(--sms-ink,#172033)}.sms-app-language-card__copy small{font-size:11px;line-height:1.4;color:var(--sms-muted,#8290a7)}.sms-app-language-card__options{display:flex;flex-wrap:wrap;gap:6px 11px}.sms-app-language-card__options button{appearance:none;border:0;background:transparent;padding:2px 0;color:#667085;font:inherit;font-size:12px;cursor:pointer}.sms-app-language-card__options button:hover,.sms-app-language-card__options button:focus-visible,.sms-app-language-card__options button.is-active{color:#6f52ed;font-weight:800}.sms-app-language-card__options button.is-active{text-decoration:underline;text-underline-offset:3px} /* SMSocial 0.14.1-alpha.1.2 — Events UI Alignment */ body.sms-app-page .sms-events, body.sms-app-page .sms-event-detail{gap:14px} body.sms-app-page .sms-events__toolbar{ align-items:center; padding:16px 18px; border-radius:18px; box-shadow:var(--sms-shadow-sm); } body.sms-app-page .sms-events__toolbar>div{min-inline-size:0} body.sms-app-page .sms-events__toolbar h2{ margin:2px 0 4px; color:var(--sms-text); font-size:21px; line-height:1.25; letter-spacing:-.02em; } body.sms-app-page .sms-events__toolbar p{ max-inline-size:660px; font-size:13px; line-height:1.5; } body.sms-app-page .sms-events__toolbar>.sms-profile-button{ flex:0 0 auto; min-block-size:40px; padding:8px 13px; border-radius:12px; } body.sms-app-page .sms-event-grid{gap:12px} body.sms-app-page .sms-event-card{ grid-template-columns:76px minmax(0,1fr); min-block-size:126px; border-radius:16px; box-shadow:none; } body.sms-app-page .sms-event-card__date{padding:12px 8px} body.sms-app-page .sms-event-card__date strong{font-size:31px} body.sms-app-page .sms-event-card__date span{font-size:11px} body.sms-app-page .sms-event-card__copy{padding:12px 14px} body.sms-app-page .sms-event-card__copy>small{font-size:10px} body.sms-app-page .sms-event-card__copy h3{margin:4px 0;font-size:16px} body.sms-app-page .sms-event-card__copy p{font-size:12px} body.sms-app-page .sms-event-card__copy footer{padding-top:8px;font-size:10.5px} body.sms-app-page .sms-event-create-modal{ z-index:100060; padding:24px; background:rgba(23,32,51,.52); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } body.sms-app-page .sms-event-create-dialog{ inline-size:min(640px,100%); max-block-size:calc(100dvh - 48px); overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr); border:1px solid var(--sms-border); border-radius:20px; background:var(--sms-surface); box-shadow:0 28px 80px rgba(23,32,51,.24); } body.sms-app-page .sms-event-create-dialog>header{ position:relative; z-index:2; padding:16px 18px; background:var(--sms-surface); } body.sms-app-page .sms-event-create-dialog>header span{ display:block; color:var(--sms-primary); font-size:10px; line-height:1.2; letter-spacing:.11em; } body.sms-app-page .sms-event-create-dialog>header h2{ margin:3px 0 0; color:var(--sms-text); font-size:19px; line-height:1.25; letter-spacing:-.02em; } body.sms-app-page .sms-event-create-dialog>header button{ inline-size:36px; block-size:36px; min-inline-size:36px; min-block-size:36px; padding:0; border:1px solid var(--sms-border); border-radius:999px; background:var(--sms-surface-soft); color:var(--sms-muted-strong); font-size:21px; line-height:1; } body.sms-app-page .sms-event-create-dialog>header button:hover, body.sms-app-page .sms-event-create-dialog>header button:focus-visible{ border-color:color-mix(in srgb,var(--sms-primary) 35%,var(--sms-border)); background:var(--sms-primary-soft); color:var(--sms-primary); } body.sms-app-page .sms-event-create-dialog form{ min-block-size:0; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:18px; background:var(--sms-surface); } body.sms-app-page .sms-event-create-dialog label{ min-inline-size:0; gap:5px; color:var(--sms-text); font-size:12.5px; font-weight:730; line-height:1.35; } body.sms-app-page .sms-event-create-dialog label>span{display:block} body.sms-app-page .sms-event-create-dialog input, body.sms-app-page .sms-event-create-dialog select, body.sms-app-page .sms-event-create-dialog textarea{ appearance:none; -webkit-appearance:none; inline-size:100%; max-inline-size:100%; min-block-size:42px; margin:0; padding:9px 11px; border:1px solid var(--sms-border-strong); border-radius:11px; outline:0; background:var(--sms-surface-soft); color:var(--sms-text); font-family:inherit; font-size:13px; font-weight:500; line-height:1.35; box-shadow:none; transition:border-color .15s ease,box-shadow .15s ease,background .15s ease; } body.sms-app-page .sms-event-create-dialog input, body.sms-app-page .sms-event-create-dialog select{block-size:42px} body.sms-app-page .sms-event-create-dialog textarea{ min-block-size:104px; block-size:auto; resize:vertical; } body.sms-app-page .sms-event-create-dialog input:focus, body.sms-app-page .sms-event-create-dialog select:focus, body.sms-app-page .sms-event-create-dialog textarea:focus{ border-color:color-mix(in srgb,var(--sms-primary) 55%,var(--sms-border)); background:var(--sms-surface); box-shadow:0 0 0 3px color-mix(in srgb,var(--sms-primary) 12%,transparent); } body.sms-app-page .sms-event-create-actions{ position:sticky; z-index:2; inset-block-end:-18px; align-items:center; margin:4px -18px -18px; padding:12px 18px; border-block-start:1px solid var(--sms-border); background:color-mix(in srgb,var(--sms-surface) 96%,transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } body.sms-app-page .sms-event-create-actions .sms-profile-button{ min-block-size:40px; padding:8px 14px; border-radius:11px; } body.sms-app-page .sms-event-hero, body.sms-app-page .sms-event-info, body.sms-app-page .sms-event-attendees{border-radius:18px;box-shadow:var(--sms-shadow-sm)} body.sms-app-page .sms-event-hero__body{padding:18px} body.sms-app-page .sms-event-hero__body h1{font-size:clamp(25px,3vw,36px)} body.sms-app-page .sms-event-detail__grid{gap:14px} body.sms-app-page .sms-event-info, body.sms-app-page .sms-event-attendees{padding:17px} @media(max-width:767px){ body.sms-app-page .sms-events__toolbar{align-items:stretch;padding:14px} body.sms-app-page .sms-events__toolbar h2{font-size:19px} body.sms-app-page .sms-events__toolbar>.sms-profile-button{align-self:flex-start} body.sms-app-page .sms-event-create-modal{ align-items:end; padding:0; background:rgba(23,32,51,.42); } body.sms-app-page .sms-event-create-dialog{ inline-size:100%; max-block-size:96dvh; border-inline:0; border-block-end:0; border-radius:20px 20px 0 0; grid-template-rows:auto minmax(0,1fr); padding-block-end:max(0px,env(safe-area-inset-bottom)); } body.sms-app-page .sms-event-create-dialog>header{ padding:14px max(16px,env(safe-area-inset-right)) 13px max(16px,env(safe-area-inset-left)); } body.sms-app-page .sms-event-create-dialog form{ grid-template-columns:1fr; gap:11px; padding:15px max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left)); } body.sms-app-page .sms-event-create-dialog .is-wide{grid-column:auto} body.sms-app-page .sms-event-create-dialog input, body.sms-app-page .sms-event-create-dialog select{min-block-size:44px;block-size:44px;font-size:16px} body.sms-app-page .sms-event-create-dialog textarea{font-size:16px;min-block-size:96px} body.sms-app-page .sms-event-create-actions{ inset-block-end:-16px; margin:3px max(-16px,calc(env(safe-area-inset-right) * -1)) -16px max(-16px,calc(env(safe-area-inset-left) * -1)); padding:11px max(16px,env(safe-area-inset-right)) max(11px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); } body.sms-app-page .sms-event-create-actions .sms-profile-button{flex:1 1 0;justify-content:center} body.sms-app-page .sms-event-card{grid-template-columns:68px minmax(0,1fr);min-block-size:112px} body.sms-app-page .sms-event-card__date strong{font-size:28px} body.sms-app-page .sms-event-card__copy{padding:11px 12px} } /* SMSocial 0.14.1-alpha.1.2.1 — compact event detail + event cover media */ body.sms-app-page .sms-event-cover-field{gap:7px} body.sms-app-page .sms-event-cover-picker{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:12px;padding:10px;border:1px dashed var(--sms-border-strong);border-radius:13px;background:var(--sms-surface-soft)} body.sms-app-page .sms-event-cover-preview{position:relative;display:grid;place-items:center;inline-size:84px;block-size:58px;overflow:hidden;border-radius:10px;background:color-mix(in srgb,var(--sms-primary) 9%,var(--sms-surface));color:var(--sms-primary)} body.sms-app-page .sms-event-cover-preview svg{inline-size:22px;block-size:22px} body.sms-app-page .sms-event-cover-preview img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover} body.sms-app-page .sms-event-cover-picker__copy{display:grid;gap:3px;min-inline-size:0} body.sms-app-page .sms-event-cover-picker__copy strong{font-size:12.5px} body.sms-app-page .sms-event-cover-picker__copy small{color:var(--sms-muted);font-size:11px;font-weight:500} body.sms-app-page .sms-event-cover-picker__copy input[type="file"]{block-size:auto;min-block-size:0;padding:5px 0;border:0;border-radius:0;background:transparent;font-size:11.5px} body.sms-app-page .sms-event-cover-picker__copy input[type="file"]::file-selector-button{margin-inline-end:8px;padding:6px 9px;border:1px solid var(--sms-border);border-radius:9px;background:var(--sms-surface);color:var(--sms-text);font:inherit;font-weight:700;cursor:pointer} body.sms-app-page .sms-event-card__date{position:relative;overflow:hidden} body.sms-app-page .sms-event-card__date.has-cover{padding:0;background:#111827} body.sms-app-page .sms-event-card__date.has-cover>img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;opacity:.88} body.sms-app-page .sms-event-card__date.has-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(15,23,42,.64))} body.sms-app-page .sms-event-card__date-badge{position:absolute;z-index:1;inset-inline-start:8px;inset-block-end:8px;display:grid;justify-items:center;min-inline-size:44px;padding:5px 6px;border:1px solid rgba(255,255,255,.55);border-radius:10px;background:rgba(255,255,255,.9);color:#111827;box-shadow:0 5px 14px rgba(15,23,42,.18);backdrop-filter:blur(8px)} body.sms-app-page .sms-event-card__date-badge strong{font-size:18px;line-height:1} body.sms-app-page .sms-event-card__date-badge span{margin:2px 0 0;color:var(--sms-primary);font-size:9px;font-weight:900;letter-spacing:.07em;text-transform:uppercase} body.sms-app-page .sms-event-detail{gap:12px;max-inline-size:900px;margin-inline:auto} body.sms-app-page .sms-event-back{font-size:13px} body.sms-app-page .sms-event-hero{display:grid;grid-template-columns:minmax(240px,.78fr) minmax(0,1.45fr);align-items:stretch;overflow:hidden;border-radius:17px} body.sms-app-page .sms-event-hero__visual{position:relative;min-block-size:0;block-size:218px;padding:16px;overflow:hidden} body.sms-app-page .sms-event-hero__visual-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:14px;inline-size:100%;block-size:100%} body.sms-app-page .sms-event-hero__cover{position:absolute;inset:0;z-index:0;inline-size:100%;block-size:100%;object-fit:cover} body.sms-app-page .sms-event-hero.has-cover .sms-event-hero__visual:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,23,42,.10),rgba(15,23,42,.62))} body.sms-app-page .sms-event-hero__calendar{inline-size:84px;block-size:94px;grid-template-rows:27px 1fr;border-radius:16px;box-shadow:0 10px 28px rgba(15,23,42,.2)} body.sms-app-page .sms-event-hero__calendar span{font-size:11px} body.sms-app-page .sms-event-hero__calendar strong{font-size:39px} body.sms-app-page .sms-event-hero__visual-copy span{font-size:10px} body.sms-app-page .sms-event-hero__visual-copy strong{font-size:27px} body.sms-app-page .sms-event-hero__visual-copy small{font-size:10.5px} body.sms-app-page .sms-event-hero__body{display:flex;flex-direction:column;justify-content:center;padding:17px 19px} body.sms-app-page .sms-event-hero__body h1{margin:4px 0 7px;font-size:clamp(23px,2.25vw,31px);line-height:1.08} body.sms-app-page .sms-event-hero__body>p{font-size:13px} body.sms-app-page .sms-event-hero__actions{gap:7px;margin-top:13px} body.sms-app-page .sms-event-hero__actions .sms-profile-button{min-block-size:37px;padding:7px 12px;border-radius:10px;font-size:13px} body.sms-app-page .sms-event-hero__stats{grid-column:1/-1} body.sms-app-page .sms-event-hero__stats>div{padding:9px 14px} body.sms-app-page .sms-event-hero__stats strong{font-size:14px} body.sms-app-page .sms-event-hero__stats span{font-size:10.5px} body.sms-app-page .sms-event-detail__grid{grid-template-columns:minmax(0,1.75fr) minmax(220px,.62fr);gap:12px} body.sms-app-page .sms-event-info,body.sms-app-page .sms-event-attendees{padding:15px;border-radius:15px} body.sms-app-page .sms-event-info h2,body.sms-app-page .sms-event-attendees h2{margin-block-end:10px;font-size:17px} body.sms-app-page .sms-event-info>p{font-size:13.5px;line-height:1.55} body.sms-app-page .sms-event-info dl{gap:7px;margin-top:13px} body.sms-app-page .sms-event-info dl>div{padding:9px 10px;border-radius:10px} body.sms-app-page .sms-event-attendee-list a{padding:7px} body.sms-app-page .sms-event-attendee-list a>span{inline-size:34px;block-size:34px} @media(max-width:767px){ body.sms-app-page .sms-event-cover-picker{grid-template-columns:72px minmax(0,1fr)} body.sms-app-page .sms-event-cover-preview{inline-size:72px;block-size:54px} body.sms-app-page .sms-event-detail{max-inline-size:none} body.sms-app-page .sms-event-hero{grid-template-columns:1fr} body.sms-app-page .sms-event-hero__visual{block-size:184px;padding:14px} body.sms-app-page .sms-event-hero__body{padding:14px 15px} body.sms-app-page .sms-event-hero__body h1{font-size:22px} body.sms-app-page .sms-event-hero__stats{grid-column:auto} body.sms-app-page .sms-event-detail__grid{grid-template-columns:1fr} } /* SMSocial 0.14.1-alpha.1.2.2 — event detail visual refinement */ body.sms-app-page .sms-event-detail{gap:10px;max-inline-size:860px} body.sms-app-page .sms-event-back{margin-block-end:1px;font-size:12.5px} body.sms-app-page .sms-event-hero{ grid-template-columns:210px minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; min-block-size:205px; border-radius:16px; box-shadow:0 8px 24px rgba(15,23,42,.055) } body.sms-app-page .sms-event-hero__visual{ grid-column:1; grid-row:1/3; block-size:auto; min-block-size:205px; padding:15px; background:linear-gradient(145deg,color-mix(in srgb,var(--sms-primary) 82%,#5c79e9),color-mix(in srgb,#69c6dc 56%,var(--sms-primary))) } body.sms-app-page .sms-event-hero__visual-inner{justify-content:flex-start;align-items:flex-end;gap:10px} body.sms-app-page .sms-event-hero__calendar{ inline-size:64px; block-size:72px; grid-template-rows:22px 1fr; border-radius:13px; box-shadow:0 7px 20px rgba(15,23,42,.18) } body.sms-app-page .sms-event-hero__calendar span{font-size:9px} body.sms-app-page .sms-event-hero__calendar strong{font-size:30px} body.sms-app-page .sms-event-hero__visual-copy{gap:2px;padding-block-end:2px} body.sms-app-page .sms-event-hero__visual-copy span{font-size:9px} body.sms-app-page .sms-event-hero__visual-copy strong{font-size:22px} body.sms-app-page .sms-event-hero__visual-copy small{max-inline-size:105px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px} body.sms-app-page .sms-event-hero.has-cover .sms-event-hero__visual:after{background:linear-gradient(180deg,rgba(15,23,42,.04) 30%,rgba(15,23,42,.74))} body.sms-app-page .sms-event-hero__body{ grid-column:2; grid-row:1; justify-content:flex-start; padding:16px 18px 11px } body.sms-app-page .sms-event-hero__body .sms-app-kicker{font-size:10px} body.sms-app-page .sms-event-hero__body h1{ max-inline-size:640px; margin:4px 0 6px; font-size:clamp(21px,2vw,27px); line-height:1.12; letter-spacing:-.018em } body.sms-app-page .sms-event-hero__body>p{font-size:12px} body.sms-app-page .sms-event-hero__actions{gap:6px;margin-top:11px} body.sms-app-page .sms-event-hero__actions .sms-profile-button{ min-block-size:34px; padding:6px 10px; border-radius:9px; font-size:12px } body.sms-app-page .sms-event-hero__stats{ grid-column:2; grid-row:2; border-top:1px solid var(--sms-border); background:color-mix(in srgb,var(--sms-surface-muted) 58%,var(--sms-surface)) } body.sms-app-page .sms-event-hero__stats>div{padding:7px 12px} body.sms-app-page .sms-event-hero__stats strong{font-size:12.5px;line-height:1.2} body.sms-app-page .sms-event-hero__stats span{font-size:9.5px} body.sms-app-page .sms-event-detail__grid{grid-template-columns:minmax(0,1fr) 210px;gap:10px} body.sms-app-page .sms-event-info,body.sms-app-page .sms-event-attendees{padding:14px;border-radius:14px;box-shadow:0 6px 18px rgba(15,23,42,.04)} body.sms-app-page .sms-event-info h2,body.sms-app-page .sms-event-attendees h2{margin-block-end:8px;font-size:16px} body.sms-app-page .sms-event-info>p{font-size:12.75px;line-height:1.52} body.sms-app-page .sms-event-info dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:11px} body.sms-app-page .sms-event-info dl>div{min-inline-size:0;padding:8px 9px;border-radius:9px} body.sms-app-page .sms-event-info dt{font-size:9.5px} body.sms-app-page .sms-event-info dd{margin-top:3px;font-size:12px;line-height:1.35;overflow-wrap:anywhere} body.sms-app-page .sms-event-attendee-list{gap:6px} body.sms-app-page .sms-event-attendee-list a{gap:8px;padding:6px;border-radius:10px} body.sms-app-page .sms-event-attendee-list a>span{inline-size:31px;block-size:31px;border-radius:9px} body.sms-app-page .sms-event-attendee-list strong{font-size:12px} body.sms-app-page .sms-event-attendee-list small{font-size:9.5px} @media(max-width:900px){ body.sms-app-page .sms-event-detail__grid{grid-template-columns:1fr} body.sms-app-page .sms-event-attendees{order:2} } @media(max-width:767px){ body.sms-app-page .sms-event-detail{gap:9px} body.sms-app-page .sms-event-hero{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-block-size:0;border-radius:14px} body.sms-app-page .sms-event-hero__visual{grid-column:1;grid-row:1;block-size:150px;min-block-size:150px;padding:12px} body.sms-app-page .sms-event-hero__visual-inner{align-items:flex-end} body.sms-app-page .sms-event-hero__calendar{inline-size:58px;block-size:66px} body.sms-app-page .sms-event-hero__calendar strong{font-size:27px} body.sms-app-page .sms-event-hero__visual-copy strong{font-size:20px} body.sms-app-page .sms-event-hero__body{grid-column:1;grid-row:2;padding:13px 14px 10px} body.sms-app-page .sms-event-hero__body h1{font-size:20px;line-height:1.14} body.sms-app-page .sms-event-hero__stats{grid-column:1;grid-row:3} body.sms-app-page .sms-event-hero__stats>div{padding:7px 9px} body.sms-app-page .sms-event-detail__grid{grid-template-columns:1fr;gap:9px} body.sms-app-page .sms-event-info,body.sms-app-page .sms-event-attendees{padding:13px} body.sms-app-page .sms-event-info dl{grid-template-columns:1fr} } /* SMSocial 0.14.1-alpha.1.2.3 — event feed publishing + card polish */ body.sms-app-page .sms-event-grid{ grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)); align-items:stretch } body.sms-app-page .sms-event-card{ grid-template-columns:132px minmax(0,1fr); min-block-size:154px; max-inline-size:760px; border-radius:18px; box-shadow:0 7px 22px rgba(15,23,42,.045) } body.sms-app-page .sms-event-card__date{ min-block-size:154px; background:linear-gradient(145deg,color-mix(in srgb,var(--sms-primary) 18%,#fff),color-mix(in srgb,#74c8df 18%,#fff)) } body.sms-app-page .sms-event-card__date.has-cover>img{opacity:1} body.sms-app-page .sms-event-card__date.has-cover:after{background:linear-gradient(180deg,rgba(15,23,42,.02) 35%,rgba(15,23,42,.48))} body.sms-app-page .sms-event-card__date-badge{ inset-inline-start:10px; inset-block-end:10px; min-inline-size:50px; padding:6px 7px; border-radius:11px } body.sms-app-page .sms-event-card__date-badge strong{font-size:21px} body.sms-app-page .sms-event-card__copy{padding:14px 16px} body.sms-app-page .sms-event-card__copy>small{font-size:10px;letter-spacing:.055em} body.sms-app-page .sms-event-card__copy h3{ display:-webkit-box; overflow:hidden; margin:5px 0 6px; font-size:17px; line-height:1.28; -webkit-box-orient:vertical; -webkit-line-clamp:2 } body.sms-app-page .sms-event-card__copy p{font-size:12px} body.sms-app-page .sms-event-card__copy footer{ align-items:center; gap:8px; padding-top:10px; font-size:10.5px } body.sms-app-page .sms-event-card__copy footer span:last-child{ padding:4px 7px; border-radius:999px; background:var(--sms-surface-muted) } /* Canonical Event Activity preview inside Feed/Profile/Group/Page activity cards. */ body.sms-app-page .sms-activity-event-preview{ display:grid; grid-template-columns:148px minmax(0,1fr); min-block-size:150px; overflow:hidden; margin:0 14px 12px; color:var(--sms-text); text-decoration:none; border:1px solid var(--sms-border); border-radius:16px; background:var(--sms-surface); box-shadow:0 6px 18px rgba(15,23,42,.04); transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease } body.sms-app-page .sms-activity-event-preview:hover, body.sms-app-page .sms-activity-event-preview:focus-visible{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--sms-primary) 34%,var(--sms-border)); box-shadow:0 10px 25px rgba(15,23,42,.07) } body.sms-app-page .sms-activity-event-preview__visual{ position:relative; min-block-size:150px; overflow:hidden; display:grid; place-items:center; background:linear-gradient(145deg,color-mix(in srgb,var(--sms-primary) 74%,#5579e9),color-mix(in srgb,#69c6dc 58%,var(--sms-primary))) } body.sms-app-page .sms-activity-event-preview__visual>img{ position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover } body.sms-app-page .sms-activity-event-preview__visual:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(15,23,42,.42)) } body.sms-app-page .sms-activity-event-preview__date{ position:relative; z-index:1; display:grid; justify-items:center; min-inline-size:58px; padding:8px 9px; border:1px solid rgba(255,255,255,.68); border-radius:13px; background:rgba(255,255,255,.92); color:#111827; box-shadow:0 8px 20px rgba(15,23,42,.18); backdrop-filter:blur(8px) } body.sms-app-page .sms-activity-event-preview__date strong{font-size:25px;line-height:1} body.sms-app-page .sms-activity-event-preview__date small{margin-top:3px;color:var(--sms-primary);font-size:9px;font-weight:900;letter-spacing:.08em} body.sms-app-page .sms-activity-event-preview__body{ display:flex; min-width:0; flex-direction:column; padding:14px 15px } body.sms-app-page .sms-activity-event-preview__body .sms-app-kicker{font-size:9px} body.sms-app-page .sms-activity-event-preview__body h3{ display:-webkit-box; overflow:hidden; margin:4px 0 8px; font-size:17px; line-height:1.28; -webkit-box-orient:vertical; -webkit-line-clamp:2 } body.sms-app-page .sms-activity-event-preview__body p{display:grid;gap:2px;margin:0;color:var(--sms-muted);font-size:11px} body.sms-app-page .sms-activity-event-preview__body p strong{color:var(--sms-text);font-size:11px} body.sms-app-page .sms-activity-event-preview__body footer{ display:flex; justify-content:space-between; gap:10px; margin-top:auto; padding-top:10px; color:var(--sms-muted); font-size:10px } body.sms-app-page .sms-activity-event-preview__body footer strong{color:var(--sms-primary);white-space:nowrap} @media(max-width:767px){ body.sms-app-page .sms-event-card{grid-template-columns:104px minmax(0,1fr);min-block-size:132px} body.sms-app-page .sms-event-card__date{min-block-size:132px} body.sms-app-page .sms-event-card__copy{padding:12px 13px} body.sms-app-page .sms-event-card__copy h3{font-size:15px} body.sms-app-page .sms-event-card__copy footer{align-items:flex-start;flex-direction:column} body.sms-app-page .sms-activity-event-preview{grid-template-columns:112px minmax(0,1fr);min-block-size:132px;margin:0 10px 10px;border-radius:14px} body.sms-app-page .sms-activity-event-preview__visual{min-block-size:132px} body.sms-app-page .sms-activity-event-preview__body{padding:12px} body.sms-app-page .sms-activity-event-preview__body h3{font-size:15px} body.sms-app-page .sms-activity-event-preview__body footer{align-items:flex-start;flex-direction:column;gap:4px} } /* SMSocial 0.14.1-alpha.1.3 — compact Page Workspace redesign */ .sms-page-workspace{ inline-size:min(100%,960px); margin-inline:auto; gap:12px; } .sms-page-workspace__header{ align-items:center; gap:14px; padding:15px 16px; border-radius:16px; box-shadow:0 10px 28px rgba(16,24,40,.045); } .sms-page-workspace__header>div{min-width:0} .sms-page-workspace__header .sms-group-back{ display:inline-flex; align-items:center; margin-bottom:7px; color:var(--sms-muted); font-size:12px; font-weight:750; text-decoration:none; } .sms-page-workspace__header .sms-app-kicker{font-size:10px;letter-spacing:.09em} .sms-page-workspace__header h1{ margin:3px 0 4px; font-size:clamp(22px,2.4vw,28px); line-height:1.12; } .sms-page-workspace__header p{ max-width:660px; font-size:12.5px; line-height:1.45; } .sms-page-workspace__header>.sms-profile-button{ flex:0 0 auto; min-height:36px; padding:7px 11px; border-radius:10px; font-size:12px; white-space:nowrap; } .sms-page-workspace>[data-sms-page-status]{ min-height:0; margin:0 2px; font-size:12px; } .sms-page-workspace__nav{ position:sticky; top:calc(var(--sms-topbar-height,64px) + 7px); z-index:8; gap:4px; padding:5px; border-radius:13px; box-shadow:0 8px 22px rgba(16,24,40,.035); } .sms-page-workspace__nav a{ min-height:34px; display:inline-flex; align-items:center; padding:7px 10px; border-radius:8px; font-size:12px; font-weight:750; } .sms-page-workspace__grid{gap:12px} .sms-page-workspace-card{ padding:15px; border-radius:15px; box-shadow:0 8px 24px rgba(16,24,40,.035); scroll-margin-top:120px; } .sms-page-workspace-card>header{ align-items:center; margin-bottom:11px; } .sms-page-workspace-card>header .sms-app-kicker{font-size:9px;letter-spacing:.09em} .sms-page-workspace-card>header h2{ margin-top:2px; font-size:17px; line-height:1.2; } .sms-page-workspace-card>header>strong{font-size:17px} .sms-page-workspace__muted{margin-bottom:10px;font-size:12.5px;line-height:1.45} .sms-page-workspace__media-grid{ grid-template-columns:minmax(0,1fr) 118px; gap:13px; margin-bottom:13px; align-items:start; } .sms-page-workspace__media-grid>div>strong{ margin-bottom:6px; font-size:12px; } .sms-page-workspace__cover{ min-height:104px; aspect-ratio:16/4.35; border-radius:12px; } .sms-page-workspace__avatar{ inline-size:82px; block-size:82px; border-radius:18px; font-size:25px; } .sms-page-workspace__media-actions{ gap:6px; margin-top:6px; } .sms-page-workspace__media-actions label, .sms-page-workspace__media-actions button{ min-height:32px; padding:6px 8px; border-radius:8px; font-size:11px; font-weight:750; } .sms-page-workspace-form{gap:10px} .sms-page-workspace-form label, .sms-page-verification-form label{gap:5px;font-size:12px} .sms-page-workspace-form input, .sms-page-workspace-form textarea, .sms-page-team-add input, .sms-page-team-add select, .sms-page-team-actions select, .sms-page-verification-form textarea{ min-height:38px; padding:8px 10px; border-radius:9px; font-size:13px; } .sms-page-workspace-form textarea, .sms-page-verification-form textarea{min-height:94px;resize:vertical} .sms-page-workspace-form .sms-profile-button, .sms-page-team-add .sms-profile-button{ min-height:36px; padding:7px 11px; border-radius:9px; font-size:12px; } .sms-page-team-add{ grid-template-columns:minmax(0,1fr) 135px auto; gap:7px; margin-bottom:10px; } .sms-page-team-list{gap:7px} .sms-page-team-list article{ gap:10px; padding:9px 10px; border-radius:11px; } .sms-page-team-avatar{ width:36px; height:36px; border-radius:10px; } .sms-page-team-person{gap:8px} .sms-page-team-person strong{font-size:12.5px} .sms-page-team-person small{font-size:10.5px} .sms-page-team-actions{gap:6px} .sms-page-team-actions select{min-width:112px;min-height:34px;font-size:11px} .sms-page-team-actions button{ min-height:34px; padding:6px 8px; border-radius:8px; font-size:11px; } .sms-page-role-badge,.sms-page-verification-status{ min-height:24px; padding:3px 7px; font-size:10px; } .sms-page-verification-form{gap:8px} .sms-page-verification-review{gap:7px;margin-top:8px} .sms-page-insights{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; } .sms-page-insights>div{ padding:10px; border-radius:10px; } .sms-page-insights span{font-size:10.5px} .sms-page-insights strong{margin-top:2px;font-size:18px} .sms-page-workspace #page-content .sms-activity-card{border-radius:14px} .sms-page-workspace #page-inbox{padding-bottom:13px} .sms-page-workspace .sms-page-inbox{ min-height:390px; border-radius:12px; } .sms-page-workspace .sms-page-inbox-item{padding:9px} .sms-page-workspace .sms-page-inbox-thread>.sms-app-empty-state{margin:14px} @media(max-width:900px){ .sms-page-workspace{inline-size:100%} .sms-page-workspace__header{align-items:flex-start} .sms-page-insights{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:767px){ .sms-page-workspace{gap:9px} .sms-page-workspace__header{ flex-direction:row; align-items:center; padding:12px; border-radius:13px; } .sms-page-workspace__header p{display:none} .sms-page-workspace__header h1{font-size:20px} .sms-page-workspace__header>.sms-profile-button{ min-height:34px; padding:6px 8px; font-size:0; } .sms-page-workspace__header>.sms-profile-button::after{ content:'↗'; font-size:16px; } .sms-page-workspace__nav{ top:calc(var(--sms-mobile-topbar-height,56px) + 5px); padding:4px; border-radius:11px; } .sms-page-workspace__nav a{min-height:32px;padding:6px 9px;font-size:11px} .sms-page-workspace__grid{gap:9px} .sms-page-workspace-card{padding:12px;border-radius:13px} .sms-page-workspace-card>header{margin-bottom:9px} .sms-page-workspace-card>header h2{font-size:16px} .sms-page-workspace__media-grid{ grid-template-columns:minmax(0,1fr) 88px; gap:9px; } .sms-page-workspace__cover{min-height:82px;aspect-ratio:16/5} .sms-page-workspace__avatar{width:68px;height:68px;border-radius:15px;font-size:21px} .sms-page-workspace__media-actions label,.sms-page-workspace__media-actions button{min-height:30px;padding:5px 7px;font-size:10px} .sms-page-workspace-form{grid-template-columns:1fr;gap:8px} .sms-page-workspace-form .is-wide{grid-column:auto} .sms-page-team-add{grid-template-columns:1fr 115px;gap:6px} .sms-page-team-add .sms-profile-button{grid-column:1/-1;width:100%} .sms-page-team-list article{align-items:center;flex-direction:row} .sms-page-team-actions{width:auto;margin-left:auto} .sms-page-team-actions select{flex:0 1 108px;min-width:92px} .sms-page-insights{grid-template-columns:repeat(2,minmax(0,1fr))} .sms-page-workspace .sms-page-inbox{min-height:0} } @media(max-width:460px){ .sms-page-workspace__header .sms-app-kicker{display:none} .sms-page-workspace__media-grid{grid-template-columns:1fr} .sms-page-workspace__avatar{width:72px;height:72px} .sms-page-team-list article{align-items:flex-start;flex-direction:column} .sms-page-team-actions{width:100%;margin-left:0} .sms-page-team-actions select{flex:1 1 110px} } /* SMSocial 0.14.1-alpha.1.3.1 — Page public view + workspace navigation refinement */ .sms-page-detail{ inline-size:min(100%,980px); margin-inline:auto; gap:12px; } .sms-page-hero{ border-radius:18px; box-shadow:0 10px 30px rgba(16,24,40,.045); } .sms-page-hero__cover{ aspect-ratio:auto; min-height:0; block-size:clamp(150px,18vw,210px); } .sms-page-hero__body{ align-items:flex-end; gap:14px; margin-top:-28px; padding:0 18px 14px; } .sms-page-hero__identity{gap:12px} .sms-page-hero__avatar{ width:76px; height:76px; border-width:4px; border-radius:18px; font-size:24px; } .sms-page-hero__identity h1{ margin-bottom:3px; font-size:clamp(24px,2.5vw,30px); line-height:1.08; } .sms-page-hero__identity p{font-size:13px} .sms-page-hero__actions{gap:7px} .sms-page-hero__actions .sms-profile-button{ min-height:36px; padding:7px 10px; border-radius:10px; font-size:12px; line-height:1.1; } .sms-page-hero__stats{ grid-template-columns:repeat(3,minmax(0,1fr)); } .sms-page-hero__stats>div{ padding:9px 14px; } .sms-page-hero__stats strong{font-size:16px} .sms-page-hero__stats span{font-size:11px} .sms-page-tabs{ inline-size:max-content; max-inline-size:100%; gap:3px; padding:4px; border-radius:12px; } .sms-page-tabs button{ min-height:34px; padding:6px 12px; border-radius:8px; font-size:12px; } .sms-page-about{padding:15px;border-radius:15px} .sms-page-about h2{font-size:20px} .sms-page-about__meta{gap:9px;margin-top:12px} .sms-page-about__meta>div{padding:11px;border-radius:11px} @media(min-width:901px){ .sms-page-workspace{ grid-template-columns:168px minmax(0,1fr); align-items:start; column-gap:12px; } .sms-page-workspace__header, .sms-page-workspace>[data-sms-page-status]{ grid-column:1/-1; } .sms-page-workspace__nav{ grid-column:1; display:grid; align-content:start; gap:3px; padding:6px; overflow:visible; border-radius:14px; } .sms-page-workspace__nav a{ width:100%; min-height:34px; justify-content:flex-start; padding:7px 9px; border-radius:9px; font-size:11.5px; color:var(--sms-muted); } .sms-page-workspace__nav a:hover, .sms-page-workspace__nav a:focus-visible{ background:color-mix(in srgb,var(--sms-primary) 9%,var(--sms-surface)); color:var(--sms-primary); } .sms-page-workspace__nav a::after{ content:'›'; margin-inline-start:auto; color:color-mix(in srgb,var(--sms-muted) 70%,transparent); font-size:15px; line-height:1; } .sms-page-workspace__grid{ grid-column:2; grid-template-columns:1fr; gap:10px; } .sms-page-workspace-card, .sms-page-workspace-card.is-wide{ grid-column:auto; } .sms-page-workspace-card{padding:14px} .sms-page-workspace-card>header{margin-bottom:10px} .sms-page-workspace__media-grid{ grid-template-columns:minmax(0,1fr) 104px; gap:11px; } .sms-page-workspace__cover{min-height:92px} .sms-page-workspace__avatar{width:74px;height:74px;border-radius:16px;font-size:22px} .sms-page-workspace-form input, .sms-page-workspace-form textarea, .sms-page-team-add input, .sms-page-team-add select, .sms-page-team-actions select, .sms-page-verification-form textarea{ min-height:36px; padding:7px 9px; font-size:12.5px; } .sms-page-workspace-form textarea, .sms-page-verification-form textarea{min-height:82px} } @media(max-width:900px){ .sms-page-workspace{ grid-template-columns:1fr; } .sms-page-workspace__header, .sms-page-workspace>[data-sms-page-status], .sms-page-workspace__nav, .sms-page-workspace__grid{ grid-column:1; } } @media(max-width:767px){ .sms-page-detail{gap:9px} .sms-page-hero{border-radius:15px} .sms-page-hero__cover{block-size:128px} .sms-page-hero__body{ margin-top:-22px; padding:0 12px 11px; gap:9px; } .sms-page-hero__identity{gap:9px} .sms-page-hero__avatar{width:64px;height:64px;border-radius:15px;font-size:20px} .sms-page-hero__identity h1{font-size:22px} .sms-page-hero__identity p{font-size:11px} .sms-page-hero__actions{width:100%;gap:6px} .sms-page-hero__actions .sms-profile-button{min-height:34px;padding:6px 9px;font-size:11px} .sms-page-hero__stats>div{padding:8px 9px} .sms-page-hero__stats strong{font-size:15px} .sms-page-hero__stats span{font-size:10px} .sms-page-tabs{inline-size:100%;overflow-x:auto} .sms-page-tabs button{flex:0 0 auto} .sms-page-workspace__nav{ display:flex; overflow-x:auto; gap:3px; scrollbar-width:none; } .sms-page-workspace__nav::-webkit-scrollbar{display:none} } /* SMSocial 0.14.1-alpha.1.4 — Marketplace UI alignment */ .sms-marketplace, .sms-marketplace-detail{ inline-size:min(100%,980px); margin-inline:auto; gap:12px; } .sms-marketplace__toolbar{ align-items:center; padding:15px 16px; border:1px solid var(--sms-border,#e6e8ee); border-radius:16px; background:var(--sms-surface,#fff); box-shadow:0 8px 26px rgba(16,24,40,.04); } .sms-marketplace__toolbar h2{ margin:2px 0 4px; font-size:clamp(21px,2vw,26px); line-height:1.12; } .sms-marketplace__toolbar p{ max-width:590px; font-size:12.5px; line-height:1.45; } .sms-marketplace__toolbar>.sms-profile-button{ min-height:38px; padding:8px 12px; border-radius:10px; font-size:12px; white-space:nowrap; } .sms-marketplace-grid{gap:11px} .sms-marketplace-card{ border-radius:15px; box-shadow:0 7px 22px rgba(16,24,40,.045); } .sms-marketplace-card__media{aspect-ratio:16/11} .sms-marketplace-card__body{padding:11px 12px 12px} .sms-marketplace-card__body>strong{font-size:17px;line-height:1.1} .sms-marketplace-card__body h3{ display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; min-height:2.55em; margin:5px 0 4px; font-size:13.5px; } .sms-marketplace-card__body p,.sms-marketplace-card__body small{font-size:11px} .sms-marketplace-create-modal{ padding:18px; background:rgba(15,23,42,.56); backdrop-filter:blur(10px); } .sms-marketplace-create-dialog{ width:min(660px,100%); max-height:min(690px,calc(100dvh - 36px)); border:1px solid color-mix(in srgb,var(--sms-border,#e6e8ee) 90%,transparent); border-radius:18px; box-shadow:0 30px 90px rgba(15,23,42,.28); } .sms-marketplace-create-dialog>header{ position:sticky; top:0; z-index:2; padding:13px 15px; background:rgba(255,255,255,.97); backdrop-filter:blur(10px); } .sms-marketplace-create-dialog>header span{font-size:9px;letter-spacing:.11em} .sms-marketplace-create-dialog>header h2{font-size:21px;line-height:1.15} .sms-marketplace-create-dialog>header button{ width:34px; height:34px; border:1px solid var(--sms-border,#e6e8ee); border-radius:10px; background:#fff; font-size:20px; } .sms-marketplace-create-dialog form{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 11px; padding:14px 15px 15px; } .sms-marketplace-create-dialog label{gap:4px} .sms-marketplace-create-dialog label>span{font-size:11.5px} .sms-marketplace-create-dialog input, .sms-marketplace-create-dialog textarea, .sms-marketplace-create-dialog select{ min-height:38px; padding:8px 10px; border-radius:10px; font-size:12.5px; line-height:1.35; } .sms-marketplace-create-dialog textarea{ min-height:84px; resize:vertical; } .sms-marketplace-create-dialog input[type="file"]{ min-height:0; padding:7px; background:#f8f9fb; font-size:11px; } .sms-marketplace-cover-control{ display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; gap:10px; } .sms-marketplace-cover-preview{ aspect-ratio:4/3; overflow:hidden; display:grid; place-items:center; border:1px dashed color-mix(in srgb,var(--sms-primary,#6d5dfc) 28%,var(--sms-border,#e6e8ee)); border-radius:11px; background:color-mix(in srgb,var(--sms-primary,#6d5dfc) 4%,#fff); color:var(--sms-primary,#6d5dfc); } .sms-marketplace-cover-preview img{width:100%;height:100%;object-fit:cover} .sms-marketplace-cover-preview span{width:28px;height:28px;display:grid;place-items:center} .sms-marketplace-create-actions{ position:sticky; bottom:-15px; z-index:2; margin:2px -15px -15px; padding:10px 15px 12px; border-top:1px solid var(--sms-border,#e6e8ee); background:rgba(255,255,255,.97); backdrop-filter:blur(10px); } .sms-marketplace-create-actions .sms-profile-button{ min-height:36px; padding:7px 11px; border-radius:9px; font-size:12px; } .sms-marketplace-detail__card{ grid-template-columns:minmax(260px,40%) minmax(0,1fr); border-radius:17px; box-shadow:0 8px 28px rgba(16,24,40,.05); } .sms-marketplace-detail__media{min-height:330px} .sms-marketplace-detail__body{padding:18px} .sms-marketplace-detail__body h1{font-size:clamp(24px,2.5vw,31px);line-height:1.08} .sms-marketplace-detail__price{font-size:23px;margin-bottom:12px} .sms-marketplace-detail__body>p{font-size:13px;line-height:1.55} .sms-marketplace-detail__body dl{gap:0;margin:14px 0} .sms-marketplace-detail__body dl div{padding:7px 0;font-size:12px} .sms-marketplace-seller{margin-top:14px;padding:10px;border-radius:12px} .sms-marketplace-seller>span{width:36px;height:36px} .sms-marketplace-seller .sms-profile-button{min-height:34px;padding:6px 9px;font-size:11px} .sms-marketplace-owner-actions{margin-top:12px;gap:6px} .sms-marketplace-owner-actions .sms-profile-button{min-height:34px;padding:6px 9px;font-size:11px} @media(max-width:900px){ .sms-marketplace-detail__card{grid-template-columns:1fr} .sms-marketplace-detail__media{min-height:0;aspect-ratio:16/10} } @media(max-width:640px){ .sms-marketplace,.sms-marketplace-detail{gap:9px} .sms-marketplace__toolbar{align-items:stretch;padding:12px;border-radius:14px} .sms-marketplace__toolbar p{font-size:11.5px} .sms-marketplace__toolbar>.sms-profile-button{align-self:flex-start} .sms-marketplace-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .sms-marketplace-card__body{padding:9px} .sms-marketplace-card__body>strong{font-size:15px} .sms-marketplace-card__body h3{font-size:12px} .sms-marketplace-create-modal{padding:0;align-items:end} .sms-marketplace-create-dialog{ width:100%; max-height:94dvh; border:0; border-radius:18px 18px 0 0; padding-bottom:max(0px,env(safe-area-inset-bottom)); } .sms-marketplace-create-dialog>header{padding:12px 14px} .sms-marketplace-create-dialog form{grid-template-columns:1fr;padding:12px 14px 14px} .sms-marketplace-create-dialog .is-wide{grid-column:auto} .sms-marketplace-cover-control{grid-template-columns:88px minmax(0,1fr);gap:9px} .sms-marketplace-create-actions{ bottom:calc(-14px - env(safe-area-inset-bottom)); margin:2px -14px -14px; padding:10px 14px max(12px,env(safe-area-inset-bottom)); } .sms-marketplace-detail__body{padding:14px} .sms-marketplace-detail__body h1{font-size:23px} .sms-marketplace-detail__price{font-size:21px} } /* SMSocial 0.14.1-alpha.1.4.1 — Marketplace create dialog compactness hotfix */ @media (min-width:641px){ .sms-marketplace-create-modal{padding:14px} .sms-marketplace-create-dialog{ width:min(620px,calc(100vw - 28px)); max-height:min(640px,calc(100dvh - 28px)); border-radius:16px; } .sms-marketplace-create-dialog>header{padding:10px 12px} .sms-marketplace-create-dialog>header span{font-size:8.5px} .sms-marketplace-create-dialog>header h2{margin:2px 0 0;font-size:18px;line-height:1.1} .sms-marketplace-create-dialog>header button{width:32px;height:32px;border-radius:9px;font-size:18px;line-height:1} .sms-marketplace-create-dialog form{gap:7px 9px;padding:11px 12px 12px} .sms-marketplace-create-dialog label{gap:3px} .sms-marketplace-create-dialog label>span{font-size:10.5px;line-height:1.2} .sms-marketplace-create-dialog input:not([type="file"]), .sms-marketplace-create-dialog select{ height:34px !important; min-height:34px !important; padding:5px 9px !important; border-radius:9px !important; font-size:12px !important; line-height:1.2 !important; } .sms-marketplace-create-dialog textarea{ height:68px !important; min-height:68px !important; max-height:92px !important; padding:7px 9px !important; border-radius:9px !important; font-size:12px !important; line-height:1.3 !important; } .sms-marketplace-cover-control{grid-template-columns:82px minmax(0,1fr);gap:8px} .sms-marketplace-cover-preview{aspect-ratio:4/3;border-radius:9px} .sms-marketplace-create-dialog input[type="file"]{ min-height:32px !important; padding:5px 6px !important; border-radius:9px !important; font-size:10.5px !important; } .sms-marketplace-create-actions{ bottom:-12px; margin:1px -12px -12px; padding:8px 12px 9px; } .sms-marketplace-create-actions .sms-profile-button{ min-height:32px !important; padding:5px 10px !important; border-radius:8px !important; font-size:11px !important; } } @media (max-width:640px){ .sms-marketplace-create-dialog>header h2{font-size:19px} .sms-marketplace-create-dialog input:not([type="file"]), .sms-marketplace-create-dialog select{min-height:44px !important;height:44px !important;padding:8px 10px !important;font-size:14px !important} .sms-marketplace-create-dialog textarea{min-height:82px !important;height:82px !important;padding:9px 10px !important;font-size:14px !important} .sms-marketplace-create-dialog label>span{font-size:12px} .sms-marketplace-cover-control{grid-template-columns:76px minmax(0,1fr)} } /* 0.14.1-alpha.1.4.2 — Compact listing detail + image lightbox */ .sms-marketplace-detail{max-width:920px;margin:0 auto;gap:10px} .sms-marketplace-detail__card{grid-template-columns:minmax(240px,38%) minmax(0,1fr);border-radius:16px;box-shadow:0 8px 28px rgba(15,23,42,.05)} .sms-marketplace-detail__media{min-height:0;aspect-ratio:4/5;background:#f7f8fb;overflow:hidden} .sms-marketplace-detail__image-button{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in;overflow:hidden} .sms-marketplace-detail__image-button img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .18s ease} .sms-marketplace-detail__image-button:hover img{transform:scale(1.015)} .sms-marketplace-detail__body{padding:16px 18px} .sms-marketplace-detail__body h1{margin:4px 0 6px;font-size:clamp(22px,2vw,28px);line-height:1.08;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .sms-marketplace-detail__price{font-size:21px;margin:0 0 10px} .sms-marketplace-detail__body>p{margin:0;font-size:12.5px;line-height:1.48;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:auto;max-height:132px;padding-right:4px} .sms-marketplace-detail__body dl{margin:12px 0 0;border:1px solid var(--sms-border,#e6e8ee);border-radius:12px;overflow:hidden} .sms-marketplace-detail__body dl div{padding:7px 10px;border-bottom:1px solid #eef0f3;font-size:11.5px} .sms-marketplace-detail__body dl div:last-child{border-bottom:0} .sms-marketplace-seller{margin-top:10px;padding:9px 10px;border-radius:11px} .sms-marketplace-seller>span{width:34px;height:34px} .sms-marketplace-seller strong{font-size:13px} .sms-marketplace-seller small{font-size:10px} .sms-marketplace-seller .sms-profile-button,.sms-marketplace-owner-actions .sms-profile-button{min-height:32px;padding:5px 8px;font-size:10.5px;border-radius:9px} .sms-marketplace-owner-actions{margin-top:9px;gap:5px} .sms-marketplace-lightbox{position:fixed;inset:0;z-index:100060;display:grid;place-items:center;padding:clamp(14px,3vw,34px);background:rgba(4,7,15,.88);backdrop-filter:blur(10px)} .sms-marketplace-lightbox[hidden]{display:none} .sms-marketplace-lightbox>img{display:block;max-width:min(94vw,1280px);max-height:88dvh;width:auto;height:auto;object-fit:contain;border-radius:14px;box-shadow:0 28px 90px rgba(0,0,0,.42)} .sms-marketplace-lightbox__close{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:2;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.24);border-radius:50%;background:rgba(15,23,42,.72);color:#fff;font-size:28px;line-height:1;cursor:pointer} .sms-marketplace-lightbox__close:focus-visible{outline:3px solid rgba(255,255,255,.8);outline-offset:3px} @media(max-width:900px){.sms-marketplace-detail{max-width:680px}.sms-marketplace-detail__card{grid-template-columns:1fr}.sms-marketplace-detail__media{aspect-ratio:16/10}.sms-marketplace-detail__body>p{-webkit-line-clamp:6;max-height:118px}} @media(max-width:640px){.sms-marketplace-detail{max-width:none}.sms-marketplace-detail__card{border-radius:14px}.sms-marketplace-detail__media{aspect-ratio:4/3}.sms-marketplace-detail__body{padding:13px}.sms-marketplace-detail__body h1{font-size:21px;-webkit-line-clamp:2}.sms-marketplace-detail__body>p{font-size:12px;max-height:108px;-webkit-line-clamp:6}.sms-marketplace-lightbox{padding:0}.sms-marketplace-lightbox>img{max-width:100vw;max-height:100dvh;border-radius:0}.sms-marketplace-lightbox__close{width:48px;height:48px}} /* 0.14.1-alpha.1.4.3 — Network UI alignment to Saved / Events / Marketplace */ .sms-network{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .sms-network__summary{ grid-column:1 / -1; display:flex !important; align-items:center !important; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:18px 20px !important; border-radius:18px !important; } .sms-network__summary>div:first-child{ flex:1 1 390px; min-width:0; } .sms-network__summary .sms-app-kicker{ font-size:.66rem; letter-spacing:.06em; } .sms-network__summary h2{ margin:4px 0 5px !important; font-size:1.1rem !important; line-height:1.2 !important; } .sms-network__summary p{ max-width:620px !important; margin:0 !important; font-size:.76rem !important; line-height:1.5 !important; } .sms-network__summary dl{ flex:0 1 500px; width:min(100%,500px) !important; display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:8px !important; margin:0 !important; } .sms-network__summary dl>div{ min-width:0 !important; min-height:64px; display:grid; place-items:center; align-content:center; gap:4px; padding:9px 8px !important; border-radius:12px !important; } .sms-network__summary dt{ font-size:.61rem !important; line-height:1.15; } .sms-network__summary dd{ margin:0 !important; font-size:1.15rem !important; line-height:1 !important; } .sms-network__section{ min-width:0; border-radius:16px !important; box-shadow:var(--sms-shadow-sm) !important; } .sms-network__section>header{ min-height:46px; padding:11px 14px !important; } .sms-network__section>header h3{ font-size:.78rem !important; line-height:1.2; } .sms-network__section>header span{ min-inline-size:22px !important; block-size:22px !important; padding-inline:6px !important; font-size:.62rem !important; } .sms-network__empty{ min-height:56px; display:flex; align-items:center; padding:13px 14px !important; font-size:.72rem !important; } .sms-network-card{ gap:10px !important; padding:10px 14px !important; } .sms-network-card__avatar{ inline-size:38px !important; block-size:38px !important; } .sms-network-card strong{font-size:.76rem !important} .sms-network-card small{font-size:.65rem !important} .sms-network-card p{font-size:.65rem !important;line-height:1.35} .sms-network-card__actions{gap:5px !important} .sms-network-card__actions .sms-profile-button, .sms-network-card .sms-profile-button{ min-block-size:31px !important; padding:5px 8px !important; border-radius:9px !important; font-size:.65rem !important; } @media(max-width:900px){ .sms-network{grid-template-columns:1fr} .sms-network__summary{grid-column:auto;align-items:flex-start !important} .sms-network__summary>div:first-child{flex-basis:100%} .sms-network__summary dl{flex-basis:100%;width:100% !important;max-width:none} } @media(max-width:640px){ .sms-network{gap:10px} .sms-network__summary{padding:14px !important;gap:12px;border-radius:15px !important} .sms-network__summary h2{font-size:1rem !important} .sms-network__summary p{font-size:.72rem !important;line-height:1.45 !important} .sms-network__summary dl{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:7px !important} .sms-network__summary dl>div{min-height:58px;padding:8px 7px !important} .sms-network__section{border-radius:14px !important} .sms-network-card{grid-template-columns:auto minmax(0,1fr) !important;padding:10px 12px !important} .sms-network-card__actions{grid-column:2;justify-content:flex-start !important} .sms-network-card__actions .sms-profile-button{min-inline-size:0 !important} } /* 0.14.1-alpha.1.4.4 — Notifications UI alignment to Saved / Events / Marketplace */ .sms-notifications{ gap:12px; } .sms-notifications__toolbar{ align-items:center; gap:16px; padding:18px 20px !important; border-radius:18px !important; box-shadow:var(--sms-shadow-sm) !important; } .sms-notifications__toolbar>div:first-child{ flex:1 1 420px; min-width:0; } .sms-notifications__toolbar .sms-app-kicker{ font-size:.66rem; letter-spacing:.06em; } .sms-notifications__toolbar h2{ margin:4px 0 5px !important; font-size:1.1rem !important; line-height:1.2 !important; } .sms-notifications__toolbar p{ margin:0 !important; color:var(--sms-muted,#6b7280); font-size:.76rem !important; line-height:1.45 !important; } .sms-notifications__toolbar>div:last-child{ flex:0 0 auto; align-items:center; gap:6px; } .sms-notifications__toolbar .sms-profile-button{ min-height:34px !important; padding:6px 10px !important; border-radius:10px !important; font-size:.68rem !important; line-height:1.15 !important; } .sms-notifications__list{ gap:8px; } .sms-notification{ grid-template-columns:38px minmax(0,1fr) auto; gap:10px; min-height:58px; padding:10px 12px; border-radius:14px; box-shadow:var(--sms-shadow-sm); } .sms-notification__avatar{ inline-size:38px; block-size:38px; border-radius:11px; font-size:.76rem; } .sms-notification__body p{ margin:0 0 2px; font-size:.74rem; line-height:1.4; } .sms-notification__body small{ font-size:.64rem; } .sms-notification__read{ inline-size:30px; block-size:30px; border-radius:9px; font-size:.72rem; } .sms-notification-preferences{ gap:12px; padding:16px 18px; border-radius:16px; box-shadow:var(--sms-shadow-sm); } .sms-notification-preferences>div:first-child{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; } .sms-notification-preferences h3{ margin:0 0 3px; font-size:.9rem; line-height:1.2; } .sms-notification-preferences p{ margin:0; max-width:680px; font-size:.7rem; line-height:1.45; } .sms-notification-preferences__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .sms-notification-preferences__grid label{ min-height:42px; gap:8px; padding:8px 10px; border-radius:11px; background:var(--sms-surface-soft,#f8f9fc); font-size:.7rem; line-height:1.25; } .sms-notification-preferences__grid input{ inline-size:16px; block-size:16px; flex:0 0 auto; } .sms-notification-preferences>button{ min-height:34px !important; padding:6px 11px !important; border-radius:10px !important; font-size:.68rem !important; } .sms-notification-preferences>small{ min-block-size:14px; font-size:.64rem; } @media(max-width:900px){ .sms-notification-preferences__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:640px){ .sms-notifications{gap:10px} .sms-notifications__toolbar{ align-items:stretch; padding:14px !important; gap:11px; border-radius:15px !important; } .sms-notifications__toolbar>div:last-child{ display:flex; width:100%; justify-content:flex-start; flex-wrap:wrap; } .sms-notifications__toolbar .sms-profile-button{ flex:0 0 auto; min-height:36px !important; } .sms-notification{ grid-template-columns:36px minmax(0,1fr) auto; gap:9px; min-height:56px; padding:9px 10px; border-radius:13px; } .sms-notification__avatar{inline-size:36px;block-size:36px;border-radius:10px} .sms-notification__body p{font-size:.72rem} .sms-notification-preferences{padding:14px;border-radius:14px} .sms-notification-preferences__grid{grid-template-columns:1fr 1fr;gap:7px} .sms-notification-preferences__grid label{min-height:40px;padding:8px 9px;font-size:.68rem} } @media(max-width:430px){ .sms-notification-preferences__grid{grid-template-columns:1fr} } /* 0.14.1-alpha.1.4.5 — Groups UI alignment to Saved / Events / Marketplace */ .sms-groups,.sms-group-view{gap:12px} .sms-groups__intro{ align-items:center !important; gap:16px !important; padding:18px 20px !important; border-radius:18px !important; box-shadow:var(--sms-shadow-sm) !important; } .sms-groups__intro>div:first-child{flex:1 1 520px;min-width:0} .sms-groups__intro .sms-app-kicker{font-size:.66rem;letter-spacing:.06em} .sms-groups__intro h2{margin:4px 0 5px !important;font-size:1.08rem !important;line-height:1.22 !important} .sms-groups__intro p{max-width:680px !important;font-size:.75rem !important;line-height:1.46 !important} .sms-groups__intro>.sms-profile-button{ flex:0 0 auto; min-height:34px !important; padding:6px 10px !important; border-radius:10px !important; font-size:.7rem !important; } .sms-group-grid{gap:10px !important} .sms-group-card{ grid-template-columns:112px minmax(0,1fr) !important; min-height:118px !important; border-radius:15px !important; box-shadow:var(--sms-shadow-sm) !important; } .sms-group-card:hover{transform:translateY(-1px)} .sms-group-card__cover{min-height:118px !important} .sms-group-card__body{gap:4px !important;padding:12px 13px !important} .sms-group-card__body small{font-size:.61rem !important;letter-spacing:.055em !important} .sms-group-card__body strong{font-size:.9rem !important;line-height:1.2 !important} .sms-group-card__body span{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:.7rem !important; line-height:1.4 !important; } .sms-group-card__body em{font-size:.65rem !important} .sms-group-create-modal{padding:20px !important;background:rgba(15,23,42,.54)} .sms-group-create-modal__dialog{ width:min(500px,100%) !important; max-height:min(650px,calc(100dvh - 40px)) !important; border-radius:18px !important; box-shadow:0 22px 64px rgba(15,23,42,.24) !important; } .sms-group-create-modal__dialog>header{padding:15px 17px 12px !important} .sms-group-create-modal__dialog header span{font-size:.64rem !important;letter-spacing:.06em !important} .sms-group-create-modal__dialog h2{margin:3px 0 0 !important;font-size:1.05rem !important} .sms-group-create-modal__dialog header button{ width:34px !important;height:34px !important;border:1px solid var(--sms-border) !important; border-radius:10px !important;background:var(--sms-surface-soft) !important;font-size:1.35rem !important; } .sms-group-create-modal form{gap:11px !important;padding:15px 17px 17px !important} .sms-group-create-modal label{gap:5px !important;font-size:.72rem !important} .sms-group-create-modal input,.sms-group-create-modal select,.sms-group-create-modal textarea{ min-height:38px !important;padding:8px 10px !important;border-radius:10px !important;font-size:.76rem !important; } .sms-group-create-modal textarea{min-height:82px !important;max-height:130px !important;resize:vertical} .sms-group-create-modal__actions{gap:7px !important} .sms-group-create-modal__actions .sms-profile-button{min-height:34px !important;padding:6px 10px !important;font-size:.68rem !important;border-radius:9px !important} .sms-group-hero{border-radius:18px !important;box-shadow:var(--sms-shadow-sm)} .sms-group-hero__cover{aspect-ratio:16/4.2 !important;min-height:138px !important} .sms-group-hero__content{padding:14px 18px 16px !important} .sms-group-back{margin-bottom:8px !important;font-size:.7rem !important} .sms-group-hero__title{gap:12px !important;align-items:center !important} .sms-group-hero__title span{font-size:.62rem !important;letter-spacing:.06em !important} .sms-group-hero__title h1{margin:3px 0 !important;font-size:clamp(1.35rem,2.2vw,1.85rem) !important;line-height:1.1 !important} .sms-group-hero__title p{margin:0 !important;font-size:.7rem !important} .sms-group-hero__description{margin:9px 0 0 !important;max-width:720px !important;font-size:.73rem !important;line-height:1.46 !important} .sms-group-hero__actions{gap:6px !important} .sms-group-hero__actions .sms-profile-button{min-height:34px !important;padding:6px 10px !important;border-radius:10px !important;font-size:.68rem !important} .sms-group-tabs{gap:4px !important;padding:5px !important;border-radius:13px !important} .sms-group-tabs button{min-height:32px !important;padding:6px 11px !important;border-radius:8px !important;font-size:.69rem !important} .sms-group-panel{gap:12px !important} .sms-group-about{padding:16px !important;border-radius:15px !important} .sms-group-about h2{margin:3px 0 12px !important;font-size:1rem !important} .sms-group-about dl{gap:8px !important} .sms-group-about dl>div{padding:11px !important;border-radius:11px !important} .sms-group-about dt{font-size:.6rem !important;letter-spacing:.06em !important} .sms-group-about dd{margin:4px 0 0 !important;font-size:.72rem !important;line-height:1.4 !important} .sms-group-members{gap:8px !important} .sms-group-members>a{gap:9px !important;padding:9px 10px !important;border-radius:12px !important} .sms-group-members>a>span{width:38px !important;height:38px !important} .sms-group-members strong{font-size:.76rem !important} .sms-group-members small{font-size:.64rem !important} .sms-group-member-report{width:32px !important;height:32px !important;border-radius:9px !important} @media(max-width:900px){ .sms-groups__intro{align-items:flex-start !important;flex-wrap:wrap} .sms-groups__intro>.sms-profile-button{margin-left:auto} .sms-group-grid{grid-template-columns:1fr !important} .sms-group-card{grid-template-columns:104px minmax(0,1fr) !important} .sms-group-hero__title{align-items:flex-start !important;flex-direction:column} } @media(max-width:600px){ .sms-groups,.sms-group-view{gap:10px} .sms-groups__intro{padding:14px !important;border-radius:15px !important;flex-direction:column !important} .sms-groups__intro h2{font-size:.98rem !important} .sms-groups__intro p{font-size:.72rem !important} .sms-groups__intro>.sms-profile-button{margin-left:0;min-height:40px !important} .sms-group-card{grid-template-columns:92px minmax(0,1fr) !important;min-height:108px !important;border-radius:13px !important} .sms-group-card__cover{min-height:108px !important} .sms-group-card__body{padding:10px 11px !important} .sms-group-create-modal{padding:0 !important;align-items:end !important} .sms-group-create-modal__dialog{width:100% !important;max-height:91dvh !important;border-radius:18px 18px 0 0 !important;padding-bottom:env(safe-area-inset-bottom)} .sms-group-create-modal input,.sms-group-create-modal select{min-height:44px !important} .sms-group-create-modal textarea{min-height:96px !important} .sms-group-create-modal__actions .sms-profile-button{min-height:42px !important} .sms-group-hero{border-radius:15px !important;border-left:1px solid var(--sms-border) !important;border-right:1px solid var(--sms-border) !important} .sms-group-hero__cover{aspect-ratio:16/7 !important;min-height:116px !important} .sms-group-hero__content{padding:12px 13px 14px !important} .sms-group-hero__title h1{font-size:1.3rem !important} .sms-group-hero__actions .sms-profile-button{min-height:40px !important} .sms-group-tabs{border-left:1px solid var(--sms-border) !important;border-right:1px solid var(--sms-border) !important;border-radius:12px !important} .sms-group-tabs button{min-height:38px !important} .sms-group-about{padding:13px !important} .sms-group-about dl{grid-template-columns:1fr !important} .sms-group-members{grid-template-columns:1fr !important} } /* SMSocial 0.14.1-alpha.1.4.6 — Pages UI Alignment */ .sms-pages{ inline-size:min(100%,960px); margin-inline:auto; gap:12px !important; } .sms-pages__toolbar{ align-items:center !important; gap:16px !important; padding:18px 20px !important; border-radius:18px !important; box-shadow:var(--sms-shadow-sm) !important; } .sms-pages__toolbar>div{flex:1 1 520px;min-width:0} .sms-pages__toolbar .sms-app-kicker{font-size:.66rem !important;letter-spacing:.06em !important} .sms-pages__toolbar h2{margin:4px 0 5px !important;font-size:1.08rem !important;line-height:1.22 !important} .sms-pages__toolbar p{max-width:680px !important;font-size:.75rem !important;line-height:1.46 !important} .sms-pages__toolbar>.sms-profile-button{ flex:0 0 auto; min-height:34px !important; padding:6px 10px !important; border-radius:10px !important; font-size:.7rem !important; white-space:nowrap; } .sms-page-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; } .sms-page-card{ border-radius:15px !important; box-shadow:var(--sms-shadow-sm) !important; transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; } .sms-page-card:hover, .sms-page-card:focus-within{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--sms-primary) 28%,var(--sms-border)); box-shadow:0 9px 24px rgba(15,23,42,.06) !important; } .sms-page-card>a{ display:grid !important; grid-template-columns:108px minmax(0,1fr) !important; grid-template-rows:auto auto !important; min-height:112px; } .sms-page-card__cover{ grid-row:1 / span 2; aspect-ratio:auto !important; min-height:112px; border-right:1px solid var(--sms-border); } .sms-page-card__identity{ align-items:center !important; gap:9px !important; min-width:0; padding:12px 13px 5px !important; } .sms-page-card__avatar{ width:38px !important; height:38px !important; border-radius:11px !important; font-size:.78rem !important; } .sms-page-card__identity>div{min-width:0} .sms-page-card__identity strong{ overflow:hidden; display:block; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem !important; line-height:1.25; } .sms-page-card__identity small{ overflow:hidden; margin-top:2px !important; text-overflow:ellipsis; white-space:nowrap; font-size:.65rem !important; } .sms-page-card__stats{ align-self:start; gap:9px !important; padding:0 13px 12px !important; font-size:.64rem !important; } .sms-page-card__stats span{ padding:4px 7px; border-radius:999px; background:var(--sms-surface-soft); white-space:nowrap; } .sms-page-create-modal{padding:20px !important;background:rgba(15,23,42,.54)} .sms-page-create-dialog{ width:min(500px,100%) !important; max-height:min(650px,calc(100dvh - 40px)) !important; border-radius:18px !important; box-shadow:0 22px 64px rgba(15,23,42,.24) !important; } .sms-page-create-dialog>header{padding:15px 17px 12px !important} .sms-page-create-dialog>header .sms-app-kicker{font-size:.64rem !important;letter-spacing:.06em !important} .sms-page-create-dialog h2{margin:3px 0 0 !important;font-size:1.05rem !important} .sms-page-create-dialog>header button{ width:34px !important; height:34px !important; border-radius:10px !important; font-size:1.35rem !important; } .sms-page-create-dialog form{gap:11px !important;padding:15px 17px 17px !important} .sms-page-create-dialog label{gap:5px !important;font-size:.72rem !important} .sms-page-create-dialog input, .sms-page-create-dialog textarea{ min-height:38px !important; padding:8px 10px !important; border-radius:10px !important; font-size:.76rem !important; } .sms-page-create-dialog textarea{min-height:82px !important;max-height:130px !important;resize:vertical} .sms-page-create-dialog footer{gap:7px !important} .sms-page-create-dialog footer .sms-profile-button{ min-height:34px !important; padding:6px 10px !important; border-radius:9px !important; font-size:.68rem !important; } @media(max-width:900px){ .sms-pages__toolbar{align-items:flex-start !important;flex-wrap:wrap} .sms-pages__toolbar>.sms-profile-button{margin-left:auto} .sms-page-grid{grid-template-columns:1fr !important} } @media(max-width:600px){ .sms-pages{gap:10px !important} .sms-pages__toolbar{padding:14px !important;border-radius:15px !important;flex-direction:column !important} .sms-pages__toolbar h2{font-size:.98rem !important} .sms-pages__toolbar p{font-size:.72rem !important} .sms-pages__toolbar>.sms-profile-button{margin-left:0;min-height:40px !important} .sms-page-card{border-radius:13px !important} .sms-page-card>a{grid-template-columns:92px minmax(0,1fr) !important;min-height:104px} .sms-page-card__cover{min-height:104px} .sms-page-card__identity{padding:10px 11px 4px !important} .sms-page-card__avatar{width:36px !important;height:36px !important} .sms-page-card__stats{padding:0 11px 10px !important;gap:6px !important;flex-wrap:wrap} .sms-page-create-modal{padding:0 !important;align-items:end !important} .sms-page-create-dialog{width:100% !important;max-height:91dvh !important;border-radius:18px 18px 0 0 !important;padding-bottom:env(safe-area-inset-bottom)} .sms-page-create-dialog input{min-height:44px !important} .sms-page-create-dialog textarea{min-height:96px !important} .sms-page-create-dialog footer .sms-profile-button{min-height:42px !important} } /* SMSocial 0.14.1-alpha.1.4.7 — Group Workspace UI Alignment */ @media(min-width:768px){ .sms-group-workspace{ grid-template-columns:168px minmax(0,1fr); column-gap:12px; row-gap:12px; inline-size:min(100%,980px); } .sms-group-workspace__header, .sms-group-workspace>[data-sms-group-status], .sms-group-workspace__stats{ grid-column:1/-1; } .sms-group-workspace__header{ align-items:center; padding:15px 17px; border-radius:17px; gap:16px; } .sms-group-workspace__header>div{min-width:0} .sms-group-workspace__header .sms-group-back{ margin-bottom:7px; font-size:12px; } .sms-group-workspace__header .sms-app-kicker{ font-size:9.5px; letter-spacing:.09em; } .sms-group-workspace__header h1{ margin:3px 0 4px; font-size:clamp(21px,2.3vw,28px); line-height:1.08; } .sms-group-workspace__header p{ max-inline-size:620px; font-size:12.5px; line-height:1.42; } .sms-group-workspace__header>.sms-profile-button{ flex:0 0 auto; min-height:34px; padding:7px 11px; border-radius:10px; font-size:11.5px; } .sms-group-workspace__stats{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; } .sms-group-workspace__stats>div{ min-height:58px; padding:9px 11px; border-radius:12px; align-content:center; } .sms-group-workspace__stats span{font-size:9.5px} .sms-group-workspace__stats strong{font-size:16px} .sms-group-workspace__nav{ grid-column:1; grid-row:auto / span 1; position:sticky; top:calc(var(--sms-topbar-height,64px) + 10px); align-self:start; display:grid; gap:4px; overflow:visible; padding:6px; border-radius:13px; } .sms-group-workspace__nav a{ width:100%; min-height:34px; display:flex; align-items:center; padding:7px 9px; border-radius:9px; font-size:11.5px; } .sms-group-workspace__nav a::after{ content:'›'; margin-left:auto; color:var(--sms-muted); font-size:15px; line-height:1; } .sms-group-manage__grid{ grid-column:2; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .sms-group-manage-card{ padding:13px; border-radius:14px; } .sms-group-manage-card>header{ gap:8px; margin-bottom:10px; } .sms-group-manage-card .sms-app-kicker{font-size:9px;letter-spacing:.08em} .sms-group-manage-card h3{font-size:15px} .sms-group-manage-card form{gap:9px} .sms-group-manage-card label{gap:5px;font-size:11.5px} .sms-group-manage-card textarea, .sms-group-manage-card input[type="search"], .sms-group-manage-card input[type="text"], .sms-group-manage-card select{ min-height:34px; padding:7px 9px; border-radius:9px; font-size:12px; } .sms-group-manage-card textarea{min-height:72px} .sms-group-workspace__cover{ aspect-ratio:16/4; min-block-size:112px; max-block-size:150px; border-radius:12px; } .sms-group-workspace__cover .sms-group-cover-actions{right:9px;bottom:9px} .sms-group-workspace__cover .sms-group-cover-action span, .sms-group-workspace__cover .sms-group-cover-remove{ min-height:32px; padding:6px 9px; border-radius:9px; font-size:10.5px; } .sms-group-manage-list, .sms-group-manage-members{gap:7px} .sms-group-manage-list>article, .sms-group-manage-members>article{ gap:8px; padding:9px 10px; border-radius:11px; font-size:11.5px; } .sms-group-manage-list small, .sms-group-manage-members small{font-size:10.5px} .sms-group-manage-list article>div:last-child, .sms-group-manage-members article>div:last-child{gap:5px} .sms-group-manage-list button, .sms-group-manage-members button{ min-height:31px; padding:5px 8px; border-radius:8px; font-size:10.5px; } .sms-group-manage-members select{min-width:105px;width:auto} .sms-group-workspace .sms-group-manage-card{scroll-margin-top:86px} } @media(max-width:767px){ .sms-group-workspace{gap:10px;inline-size:100%} .sms-group-workspace__header{ padding:13px; border-radius:14px; gap:10px; } .sms-group-workspace__header h1{font-size:21px} .sms-group-workspace__header p{font-size:11.5px;line-height:1.4} .sms-group-workspace__header>.sms-profile-button{ min-height:38px; padding:8px 10px; font-size:11px; } .sms-group-workspace__stats{gap:6px} .sms-group-workspace__stats>div{min-height:54px;padding:8px 9px;border-radius:11px} .sms-group-workspace__stats span{font-size:9px} .sms-group-workspace__stats strong{font-size:15px} .sms-group-workspace__nav{ position:sticky; top:calc(var(--sms-mobile-topbar-height,56px) + 5px); gap:4px; padding:5px; border-radius:11px; scrollbar-width:none; } .sms-group-workspace__nav::-webkit-scrollbar{display:none} .sms-group-workspace__nav a{min-height:32px;padding:6px 9px;font-size:10.5px} .sms-group-manage__grid{gap:8px} .sms-group-manage-card{padding:11px;border-radius:12px} .sms-group-manage-card>header{margin-bottom:8px} .sms-group-manage-card h3{font-size:14px} .sms-group-workspace__cover{aspect-ratio:16/6;min-block-size:100px;border-radius:11px} .sms-group-workspace__cover .sms-group-cover-actions{right:7px;bottom:7px} } /* SMSocial 0.14.1-alpha.1.4.8 — People UI Alignment */ /* SMSocial 0.15.1-alpha.1 — Accessibility Foundation */ .sms-visually-hidden{position:absolute!important;inline-size:1px!important;block-size:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important} #smsocial-app :where(a[href],button,input,select,textarea,[tabindex]:not([tabindex="-1"]),[contenteditable="true"]):focus-visible{outline:3px solid color-mix(in srgb,var(--sms-primary,#6b4eff) 72%,#000);outline-offset:3px} #smsocial-app :where(input,select,textarea)[aria-invalid="true"]{border-color:var(--sms-danger,#b32d2e)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--sms-danger,#b32d2e) 24%,transparent)!important} #smsocial-app [role="dialog"][aria-modal="true"]:focus{outline:none} #smsocial-app .sms-app-skip:focus-visible{outline:3px solid #111;outline-offset:3px} @media(prefers-reduced-motion:reduce){#smsocial-app *,#smsocial-app *::before,#smsocial-app *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}} @media(prefers-contrast:more){#smsocial-app{--sms-border:color-mix(in srgb,currentColor 42%,transparent)}#smsocial-app :where(.sms-profile-button,.sms-app-navigation__item,.sms-app-context-card,.sms-activity-card,.sms-event-card,.sms-marketplace-card){border-width:2px}} @media(forced-colors:active){#smsocial-app :where(a[href],button,input,select,textarea,[tabindex]:not([tabindex="-1"])){forced-color-adjust:auto}#smsocial-app :where(button,.sms-profile-button,.sms-app-navigation__item,.sms-app-context-card,.sms-activity-card){border:1px solid ButtonText}#smsocial-app :where(a[href],button,input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible{outline:3px solid Highlight;outline-offset:3px}} /* 0.17.0-alpha.1 — central white-label brand surface. */ .sms-app-brand__mark.has-image{padding:0;overflow:hidden;background:#fff;border:1px solid var(--sms-border);box-shadow:var(--sms-shadow-sm)} .sms-app-brand__mark.has-image img{inline-size:100%;block-size:100%;object-fit:cover;display:block} .sms-app-root{background:var(--sms-brand-background,#f4f6fb)} /* 0.17.0-alpha.1.1 — client-facing right context rail */ .sms-app-user-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--sms-border);border-radius:18px;background:var(--sms-surface);box-shadow:var(--sms-shadow-sm)} .sms-app-user-card__avatar{inline-size:42px;block-size:42px;border-radius:14px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,var(--sms-primary),#8b5cf6);color:#fff;font-weight:800}.sms-app-user-card__avatar img{inline-size:100%;block-size:100%;object-fit:cover}.sms-app-user-card__copy{display:grid;gap:2px;min-inline-size:0}.sms-app-user-card__copy strong{font-size:14px;color:var(--sms-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sms-app-user-card__copy small{font-size:11px;color:var(--sms-muted)} .sms-app-context-links{display:grid;gap:7px;margin-block-start:10px}.sms-app-context-link{min-block-size:52px;padding:9px 11px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid var(--sms-border);border-radius:16px;background:var(--sms-surface);color:var(--sms-text);text-decoration:none;box-shadow:var(--sms-shadow-sm);transition:border-color 150ms ease,transform 150ms ease,background 150ms ease}.sms-app-context-link:hover,.sms-app-context-link:focus-visible{border-color:color-mix(in srgb,var(--sms-primary) 32%,var(--sms-border));background:color-mix(in srgb,var(--sms-primary) 3%,#fff);transform:translateY(-1px)}.sms-app-context-link>.sms-icon:first-child{inline-size:19px;block-size:19px;color:var(--sms-primary)}.sms-app-context-link>.sms-icon:last-child{inline-size:15px;block-size:15px;color:var(--sms-muted)}.sms-app-context-link span{display:grid;gap:1px;min-inline-size:0}.sms-app-context-link span strong{font-size:12px;line-height:1.25}.sms-app-context-link span small{font-size:10px;line-height:1.3;color:var(--sms-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sms-app-context-link__badge{min-inline-size:22px;block-size:22px;padding-inline:6px;border-radius:999px;display:grid;place-items:center;background:var(--sms-primary);color:#fff;font-size:10px;line-height:1;font-weight:800} .sms-app-language-card{margin-block-start:10px}.sms-app-context-section-label{margin:14px 2px 6px;color:var(--sms-primary);font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.sms-app-context-links--admin{margin-block-start:0}.sms-app-context-link--logout{margin-block-start:10px}.sms-app-context-link--logout>.sms-icon:first-child,.sms-app-context-link--logout span strong{color:#d9485f} @media(max-width:1040px){.sms-app-user-card,.sms-app-context-link,.sms-app-language-card{border-radius:16px}.sms-app-context-link{min-block-size:56px}} /* SMSocial 0.17.0-alpha.1.4 — Mobile directory intro height hotfix * Desktop intro rows use a large flex-basis to reserve horizontal copy space. * Once those rows become columns on phones, that basis must be reset or it * becomes vertical height and creates a large empty card. */ @media(max-width:640px){ .sms-notifications__toolbar>div:first-child, .sms-groups__intro>div:first-child, .sms-pages__toolbar>div:first-child{ flex:0 1 auto !important; inline-size:100%; min-block-size:0; } } /* 0.17.0-alpha.1.23 video compatibility guard */ .sms-video-compatibility-warning{position:absolute;z-index:5;inset-inline:14px;inset-block-end:14px;display:grid;gap:4px;max-inline-size:520px;padding:11px 13px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(8,10,15,.86);color:#fff;box-shadow:0 8px 28px rgba(0,0,0,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none} .sms-video-compatibility-warning[hidden]{display:none!important}.sms-video-compatibility-warning strong{font-size:.82rem}.sms-video-compatibility-warning span{font-size:.72rem;line-height:1.35;color:rgba(255,255,255,.78)} @media(max-width:640px){.sms-video-compatibility-warning{inset-inline:8px;inset-block-end:8px;padding:9px 10px}.sms-video-compatibility-warning span{font-size:.68rem}} /* 0.17.1-alpha.59 — immersive action rail + terminal compatibility notice polish. */ .sms-video-immersive .sms-video-compatibility-warning{ inset-inline:14px 86px; inset-block-end:max(18px,env(safe-area-inset-bottom,0px)); max-inline-size:420px; padding:9px 11px; opacity:.94; } @media(max-width:767px){ .sms-video-immersive .sms-video-compatibility-warning{ inset-inline:10px 78px; inset-block-end:max(12px,env(safe-area-inset-bottom,0px)); max-inline-size:none; } } /* 0.17.0-alpha.1.25 — Core UX QA hotfixes. */ /* Public-facing build/version labels are removed in the PHP/JS renderers. */ /* Messages: keep the useful focus emphasis, but make it deterministic and reversible. */ .sms-message-start input{ font-size:14px; transform:scale(1); transform-origin:left center; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background-color .16s ease; } .sms-message-start input:focus{ position:relative; z-index:2; transform:scale(1.018); border-color:color-mix(in srgb,var(--sms-primary) 44%,var(--sms-border)); background:var(--sms-surface); box-shadow:0 0 0 3px color-mix(in srgb,var(--sms-primary) 10%,transparent); outline:none; } .sms-message-start input:not(:focus){transform:scale(1);box-shadow:none} /* Messages desktop: slightly tighter, denser shell without changing behavior. */ @media(min-width:768px){ .sms-messages{inline-size:min(100%,980px)} .sms-messages__appbar{min-height:52px;padding:8px 10px 8px 14px;border-radius:17px 17px 0 0} .sms-message-shell-button{width:36px;height:36px;border-radius:10px;font-size:21px} .sms-messages__layout{ grid-template-columns:minmax(235px,285px) minmax(0,1fr); height:min(650px,calc(100dvh - 170px)); min-height:500px; border-radius:0 0 17px 17px; } .sms-message-start{gap:6px;padding:10px} .sms-message-start label{gap:5px;font-size:11px} .sms-message-start label>div{gap:6px} .sms-message-start input{padding:8px 9px} .sms-message-start .sms-profile-button{min-height:36px;padding:7px 9px} .sms-message-conversation{grid-template-columns:40px minmax(0,1fr) auto;gap:8px;padding:8px 10px} .sms-message-conversation .sms-message-avatar{inline-size:40px;block-size:40px} .sms-message-conversation__copy strong{font-size:13px} .sms-message-conversation__copy small{font-size:11px} .sms-message-thread__header{min-height:58px;padding:8px 11px;gap:8px} .sms-message-thread__header .sms-message-avatar{width:38px;height:38px} .sms-message-thread__header strong{font-size:14px} .sms-message-thread__header small{font-size:11px} .sms-message-thread__messages{gap:7px;padding:12px 14px} .sms-message-bubble{max-width:min(74%,520px);padding:7px 10px} .sms-message-compose{padding:8px 10px} .sms-message-compose__row{gap:7px} .sms-message-compose textarea{min-height:40px;padding:9px 11px} .sms-message-compose .sms-profile-button,.sms-message-attach{min-height:40px} } /* Mobile browsers must not auto-zoom the person search field. */ @media(max-width:767px){ .sms-message-start input{font-size:16px;transform:scale(1)} .sms-message-start input:focus{transform:scale(1.01)} } /* Page cover/avatar pickers: make the whole visual button a real tappable file input on touch devices. */ .sms-page-workspace__media-actions label{position:relative;overflow:hidden;isolation:isolate} .sms-page-workspace__media-actions label>span{position:relative;z-index:1;pointer-events:none} .sms-page-workspace__media-actions label input[type="file"]{ position:absolute!important; z-index:2; inset:0!important; inline-size:100%!important; block-size:100%!important; min-inline-size:100%!important; min-block-size:100%!important; margin:0!important; padding:0!important; opacity:0!important; pointer-events:auto!important; cursor:pointer; } @media(max-width:767px){ .sms-page-workspace__media-actions label,.sms-page-workspace__media-actions button{min-height:42px!important} .sms-page-workspace__media-actions{align-items:stretch} } /* Create Group: stay inside the phone viewport and scroll internally instead of expanding the page. */ @media(max-width:600px){ .sms-group-create-modal{ inline-size:100vw!important; block-size:100dvh!important; max-inline-size:100vw!important; overflow:hidden!important; padding:0!important; align-items:end!important; } .sms-group-create-modal__dialog{ display:flex!important; flex-direction:column!important; inline-size:100%!important; max-inline-size:100%!important; max-block-size:calc(92dvh - env(safe-area-inset-top,0px))!important; overflow:hidden!important; box-sizing:border-box!important; border-radius:18px 18px 0 0!important; padding-bottom:env(safe-area-inset-bottom,0px)!important; } .sms-group-create-modal__dialog>header{flex:0 0 auto} .sms-group-create-modal form{ min-block-size:0!important; overflow-y:auto!important; overflow-x:hidden!important; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))!important; } .sms-group-create-modal input, .sms-group-create-modal select, .sms-group-create-modal textarea{font-size:16px!important;max-inline-size:100%!important} .sms-group-create-modal__actions{ position:sticky; z-index:2; inset-block-end:calc(-16px - env(safe-area-inset-bottom,0px)); padding-block:10px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--sms-surface); } } /* 0.17.0-alpha.1.26 — Legal & Safety footer: compact links live at the lower-right context rail. */ .sms-app-rail--right{grid-template-rows:minmax(0,1fr) auto} .sms-app-context-footer{display:grid;gap:10px;padding:13px max(16px,var(--sms-safe-right)) max(14px,var(--sms-safe-bottom)) max(16px,var(--sms-safe-left));border-top:1px solid var(--sms-border);background:color-mix(in srgb,var(--sms-surface-soft) 94%,transparent);font-size:11px;line-height:1.35} .sms-app-context-footer nav{display:flex;flex-wrap:wrap;gap:6px 10px} .sms-app-context-footer a{color:var(--sms-muted);text-decoration:none;opacity:.86} .sms-app-context-footer a:hover,.sms-app-context-footer a:focus-visible{color:var(--sms-ink);opacity:1;text-decoration:underline} .sms-app-context-footer__public{padding-top:8px;border-top:1px solid color-mix(in srgb,var(--sms-border) 70%,transparent)} .sms-app-context-footer__product{padding-top:8px;border-top:1px solid color-mix(in srgb,var(--sms-border) 70%,transparent)} .sms-app-context-footer__product a.is-primary{color:var(--sms-accent);font-weight:800;opacity:1} @media(max-width:1279px){.sms-app-rail--right{grid-template-rows:auto minmax(0,1fr) auto}} @media(max-width:767px){.sms-app-context-footer{padding-block-end:max(16px,var(--sms-safe-bottom));font-size:12px}} /* 0.17.0-alpha.1.27 — asynchronous feed synchronization */ .sms-activity-card.is-sms-sync-new{animation:smsFeedSyncArrival .7s ease both} @keyframes smsFeedSyncArrival{from{opacity:.45;transform:translateY(-8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.sms-activity-card.is-sms-sync-new{animation:none}} /* 0.17.0-alpha.1.27.1 — compact create Event + Marketplace dialogs */ @media (min-width:768px){ body.sms-app-page .sms-event-create-modal, body.sms-app-page .sms-marketplace-create-modal{ padding:clamp(18px,3vh,30px); align-items:center; } body.sms-app-page .sms-event-create-dialog, body.sms-app-page .sms-marketplace-create-dialog{ inline-size:min(570px,calc(100vw - 56px)); max-inline-size:570px; max-block-size:min(620px,calc(100dvh - 72px)); overflow:hidden; display:grid; grid-template-rows:auto minmax(0,1fr); border-radius:17px; box-shadow:0 24px 64px rgba(15,23,42,.22); } body.sms-app-page .sms-event-create-dialog>header, body.sms-app-page .sms-marketplace-create-dialog>header{ position:relative; inset:auto; padding:11px 14px 10px; border-block-end:1px solid var(--sms-border,#e6e8ee); background:var(--sms-surface,#fff); } body.sms-app-page .sms-event-create-dialog>header span, body.sms-app-page .sms-marketplace-create-dialog>header span{ font-size:8.5px; line-height:1.15; letter-spacing:.1em; } body.sms-app-page .sms-event-create-dialog>header h2, body.sms-app-page .sms-marketplace-create-dialog>header h2{ margin:2px 0 0; font-size:18px; line-height:1.12; } body.sms-app-page .sms-event-create-dialog>header button, body.sms-app-page .sms-marketplace-create-dialog>header button{ inline-size:31px; block-size:31px; min-inline-size:31px; min-block-size:31px; border-radius:9px; font-size:18px; } body.sms-app-page .sms-event-create-dialog form, body.sms-app-page .sms-marketplace-create-dialog form{ min-block-size:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 10px; padding:11px 13px 12px; } body.sms-app-page .sms-event-create-dialog label, body.sms-app-page .sms-marketplace-create-dialog label{ gap:3px; font-size:11px; line-height:1.2; } body.sms-app-page .sms-event-create-dialog label>span, body.sms-app-page .sms-marketplace-create-dialog label>span{ font-size:10.5px; line-height:1.2; } body.sms-app-page .sms-event-create-dialog input:not([type="file"]), body.sms-app-page .sms-event-create-dialog select, body.sms-app-page .sms-marketplace-create-dialog input:not([type="file"]), body.sms-app-page .sms-marketplace-create-dialog select{ min-block-size:34px !important; block-size:34px !important; padding:5px 9px !important; border-radius:9px !important; font-size:12px !important; line-height:1.2 !important; } body.sms-app-page .sms-event-create-dialog textarea, body.sms-app-page .sms-marketplace-create-dialog textarea{ min-block-size:68px !important; block-size:68px !important; max-block-size:110px !important; padding:7px 9px !important; border-radius:9px !important; font-size:12px !important; line-height:1.3 !important; resize:vertical; } body.sms-app-page .sms-event-create-dialog input[type="file"], body.sms-app-page .sms-marketplace-create-dialog input[type="file"]{ min-block-size:30px !important; padding:4px 5px !important; font-size:10.5px !important; } body.sms-app-page .sms-event-cover-picker{ grid-template-columns:70px minmax(0,1fr); gap:8px; padding:7px; border-radius:10px; } body.sms-app-page .sms-event-cover-preview{ inline-size:70px; block-size:48px; border-radius:8px; } body.sms-app-page .sms-event-cover-picker__copy strong{font-size:11px} body.sms-app-page .sms-event-cover-picker__copy small{font-size:9.5px} body.sms-app-page .sms-marketplace-cover-control{ grid-template-columns:76px minmax(0,1fr); gap:8px; } body.sms-app-page .sms-marketplace-cover-preview{border-radius:8px} body.sms-app-page .sms-event-create-actions, body.sms-app-page .sms-marketplace-create-actions{ position:sticky; inset-block-end:-12px; bottom:-12px; z-index:3; margin:1px -13px -12px; padding:8px 13px 9px; border-block-start:1px solid var(--sms-border,#e6e8ee); background:color-mix(in srgb,var(--sms-surface,#fff) 97%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } body.sms-app-page .sms-event-create-actions .sms-profile-button, body.sms-app-page .sms-marketplace-create-actions .sms-profile-button{ min-block-size:33px !important; padding:5px 10px !important; border-radius:9px !important; font-size:11px !important; } } @media (max-width:767px){ body.sms-app-page .sms-event-create-dialog, body.sms-app-page .sms-marketplace-create-dialog{ max-block-size:89dvh; } body.sms-app-page .sms-event-create-dialog>header, body.sms-app-page .sms-marketplace-create-dialog>header{ padding-block:11px 10px; } body.sms-app-page .sms-event-create-dialog>header h2, body.sms-app-page .sms-marketplace-create-dialog>header h2{font-size:18px} body.sms-app-page .sms-event-create-dialog form, body.sms-app-page .sms-marketplace-create-dialog form{ gap:8px; padding-block:11px 13px; } body.sms-app-page .sms-event-create-dialog label>span, body.sms-app-page .sms-marketplace-create-dialog label>span{font-size:11px} body.sms-app-page .sms-event-create-dialog textarea, body.sms-app-page .sms-marketplace-create-dialog textarea{ min-block-size:76px !important; block-size:76px !important; } body.sms-app-page .sms-event-cover-picker{ grid-template-columns:68px minmax(0,1fr); gap:8px; padding:7px; } body.sms-app-page .sms-event-cover-preview{inline-size:68px;block-size:48px} body.sms-app-page .sms-marketplace-cover-control{grid-template-columns:70px minmax(0,1fr)} body.sms-app-page .sms-event-create-actions, body.sms-app-page .sms-marketplace-create-actions{ padding-block:8px max(9px,env(safe-area-inset-bottom)); } } /* 0.17.0-alpha.1.30 — controlled Core runtime entitlement gates. */ .sms-app-navigation__item.is-locked { opacity: .66; } .sms-app-navigation__item.is-locked:hover, .sms-app-navigation__item.is-locked:focus-visible { opacity: 1; } .sms-app-navigation__item.is-locked small { border-color: color-mix(in srgb, var(--sms-primary) 22%, var(--sms-border)); background: color-mix(in srgb, var(--sms-primary) 8%, var(--sms-surface)); color: var(--sms-primary); } .sms-entitlement-lock-screen { min-block-size: min(56vh, 520px); display: grid; place-items: center; align-content: center; gap: 12px; padding: clamp(28px, 6vw, 72px); border: 1px solid var(--sms-border); border-radius: 24px; background: var(--sms-surface); text-align: center; box-shadow: var(--sms-shadow-soft); } .sms-entitlement-lock-screen__icon { inline-size: 62px; block-size: 62px; display: grid; place-items: center; border-radius: 20px; background: color-mix(in srgb, var(--sms-primary) 10%, var(--sms-surface)); font-size: 28px; } .sms-entitlement-lock-screen h2 { margin: 0; max-inline-size: 720px; color: var(--sms-text); font-size: clamp(24px, 4vw, 38px); line-height: 1.12; } .sms-entitlement-lock-screen p { margin: 0; max-inline-size: 700px; color: var(--sms-muted-strong); font-size: 15px; line-height: 1.7; } .sms-entitlement-lock-screen__actions { margin-block-start: 8px; display: flex; justify-content: center; } @media (max-width: 680px) { .sms-entitlement-lock-screen { min-block-size: 46vh; padding: 28px 18px; border-radius: 18px; } } /* 0.17.0-alpha.1.30.3.3 — True right-rail component parity for the left navigation. * The right context rail is intentionally untouched. * The left navigation no longer carries the legacy .sms-app-navigation__item class, * so old compact-nav typography, uppercase pills, active dots and sizing cannot leak in. */ .sms-app-root{ --sms-left-rail:308px; } .sms-app-rail--left .sms-app-rail__scroll{ padding:22px max(16px,var(--sms-safe-right)) max(28px,var(--sms-safe-bottom)) max(16px,var(--sms-safe-left)); } .sms-app-rail--left .sms-app-navigation{ display:grid; gap:7px; } .sms-app-rail--left .sms-app-left-link{ inline-size:100%; min-inline-size:0; margin:0; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none; } /* Keep the same typography as the proven right-side component. */ .sms-app-rail--left .sms-app-left-link span{ display:grid; gap:1px; min-inline-size:0; } .sms-app-rail--left .sms-app-left-link span strong{ margin:0; padding:0; border:0; border-radius:0; background:transparent; color:inherit; font-size:12px; line-height:1.25; font-weight:700; letter-spacing:0; text-transform:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sms-app-rail--left .sms-app-left-link span small{ margin:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--sms-muted); font-size:10px; line-height:1.3; font-weight:400; letter-spacing:0; text-transform:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sms-app-rail--left .sms-app-left-link > .sms-icon:first-child{ inline-size:19px; block-size:19px; color:var(--sms-primary); } .sms-app-rail--left .sms-app-left-link > .sms-icon:last-child{ inline-size:15px; block-size:15px; color:var(--sms-muted); } /* Active keeps the same card language; only a quiet border/background cue is added. */ .sms-app-rail--left .sms-app-left-link.is-active{ border-color:color-mix(in srgb,var(--sms-primary) 32%,var(--sms-border)); background:color-mix(in srgb,var(--sms-primary) 3%,#fff); } .sms-app-rail--left .sms-app-left-link:active{ transform:translateY(0) scale(.985); } .sms-app-rail--left .sms-app-left-link.is-locked{ opacity:.72; } .sms-app-rail--left .sms-app-left-link.is-locked:hover, .sms-app-rail--left .sms-app-left-link.is-locked:focus-visible{ opacity:1; } .sms-app-rail--left .sms-app-navigation__pro-badge{ min-inline-size:34px; block-size:22px; padding-inline:8px; border-radius:999px; display:grid; place-items:center; background:var(--sms-primary); color:#fff; font-size:9px; line-height:1; font-weight:800; letter-spacing:0; text-transform:none; } @media(max-width:1279px) and (min-width:1024px){ .sms-app-topbar__inner{ grid-template-columns:308px minmax(260px,1fr) auto; } .sms-app-shell{ grid-template-columns:308px minmax(0,1fr); } } @media(max-width:1023px){ .sms-app-rail--left{ inline-size:min(88vw,360px); } .sms-app-rail--left .sms-app-left-link{ min-block-size:56px; } } @media(max-width:640px){ .sms-app-rail--left .sms-app-rail__scroll{ padding:16px max(16px,var(--sms-safe-right)) max(24px,var(--sms-safe-bottom)) max(16px,var(--sms-safe-left)); } .sms-app-rail--left .sms-app-navigation{ gap:8px; } } /* 0.17.0-alpha.1.30.5 — Profile Privacy & Account Controls. */ .sms-profile-privacy-panel, .sms-profile-account-panel{ margin-block-start:22px; padding-block-start:22px; border-block-start:1px solid var(--sms-border); } .sms-profile-section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-block-end:14px} .sms-profile-section-heading h3{margin:4px 0 6px;color:var(--sms-text);font-size:1.08rem;letter-spacing:-.018em} .sms-profile-section-heading p{margin:0;max-inline-size:720px;color:var(--sms-muted);font-size:.8rem;line-height:1.45} .sms-profile-privacy-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px} .sms-profile-privacy-option{ min-block-size:66px; padding:10px 11px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid var(--sms-border); border-radius:16px; background:var(--sms-surface); color:var(--sms-text); box-shadow:var(--sms-shadow-sm); cursor:pointer; transition:border-color 150ms ease,transform 150ms ease,background 150ms ease; } .sms-profile-privacy-option:hover, .sms-profile-privacy-option:focus-within{border-color:color-mix(in srgb,var(--sms-primary) 32%,var(--sms-border));background:color-mix(in srgb,var(--sms-primary) 3%,#fff);transform:translateY(-1px)} .sms-profile-privacy-option.is-emphasis{grid-column:1/-1;border-color:color-mix(in srgb,var(--sms-primary) 24%,var(--sms-border));background:color-mix(in srgb,var(--sms-primary) 2%,var(--sms-surface))} .sms-profile-privacy-option__icon{display:grid;place-items:center;color:var(--sms-primary)} .sms-profile-privacy-option__icon .sms-icon{inline-size:19px;block-size:19px} .sms-profile-privacy-option__copy{display:grid;gap:2px;min-inline-size:0} .sms-profile-privacy-option__copy strong{font-size:.8rem;line-height:1.25} .sms-profile-privacy-option__copy small{color:var(--sms-muted);font-size:.7rem;font-weight:400;line-height:1.35} .sms-profile-switch{position:relative;display:inline-grid;inline-size:42px;block-size:24px;flex:0 0 auto} .sms-profile-switch input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none} .sms-profile-switch>span{position:absolute;inset:0;border:1px solid var(--sms-border-strong);border-radius:999px;background:var(--sms-surface-strong);transition:background 150ms ease,border-color 150ms ease} .sms-profile-switch>span::after{content:"";position:absolute;inset-block-start:3px;inset-inline-start:3px;inline-size:16px;block-size:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(27,35,58,.22);transition:transform 150ms ease} .sms-profile-switch input:checked+span{border-color:var(--sms-primary);background:var(--sms-primary)} .sms-profile-switch input:checked+span::after{transform:translateX(18px)} .sms-profile-switch input:focus-visible+span{outline:2px solid color-mix(in srgb,var(--sms-primary) 45%,transparent);outline-offset:2px} .sms-profile-context-action{ grid-column:1/-1; inline-size:100%; min-block-size:56px; margin-block-start:2px; padding:9px 11px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; border:1px solid var(--sms-border); border-radius:16px; background:var(--sms-surface); color:var(--sms-text); text-align:start; box-shadow:var(--sms-shadow-sm); font:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:border-color 150ms ease,transform 150ms ease,background 150ms ease; } .sms-profile-context-action:hover, .sms-profile-context-action:focus-visible{border-color:color-mix(in srgb,var(--sms-primary) 32%,var(--sms-border));background:color-mix(in srgb,var(--sms-primary) 3%,#fff);transform:translateY(-1px);outline:none} .sms-profile-context-action:active{transform:scale(.985)} .sms-profile-context-action:disabled{opacity:.55;cursor:not-allowed;transform:none} .sms-profile-context-action>.sms-icon, .sms-profile-context-action>span:first-child .sms-icon{inline-size:19px;block-size:19px;color:var(--sms-primary)} .sms-profile-context-action>.sms-icon:last-child{inline-size:15px;block-size:15px;color:var(--sms-muted)} .sms-profile-context-action>span:nth-child(2){display:grid;gap:1px;min-inline-size:0} .sms-profile-context-action strong{font-size:12px;line-height:1.25} .sms-profile-context-action small{font-size:10px;line-height:1.3;color:var(--sms-muted)} .sms-profile-context-action.is-danger{border-color:color-mix(in srgb,var(--sms-danger,#b32d2e) 22%,var(--sms-border));background:color-mix(in srgb,var(--sms-danger,#b32d2e) 3%,var(--sms-surface))} .sms-profile-context-action.is-danger>span:first-child .sms-icon, .sms-profile-context-action.is-danger strong{color:var(--sms-danger,#b32d2e)} .sms-profile-freeze-form{display:grid;grid-template-columns:minmax(220px,360px) minmax(260px,1fr);gap:10px;align-items:end} .sms-profile-freeze-form>label{display:grid;gap:6px;color:var(--sms-text);font-size:.8rem;font-weight:700} .sms-profile-freeze-form input{inline-size:100%;border:1px solid var(--sms-border-strong);border-radius:11px;background:var(--sms-surface-soft);color:var(--sms-text);padding:10px 11px;font:inherit;box-sizing:border-box} .sms-profile-freeze-form small{color:var(--sms-muted);font-size:.69rem;font-weight:400;line-height:1.35} .sms-profile-freeze-form .sms-profile-context-action{margin:0} @media(max-width:767px){ .sms-profile-privacy-panel,.sms-profile-account-panel{margin-block-start:18px;padding-block-start:18px} .sms-profile-privacy-form{grid-template-columns:1fr} .sms-profile-privacy-option.is-emphasis{grid-column:auto} .sms-profile-privacy-option{min-block-size:68px} .sms-profile-freeze-form{grid-template-columns:1fr} .sms-profile-context-action{min-block-size:58px} } /* 0.17.0-alpha.1.30.6 — Protected permanent profile deletion. */ .sms-profile-delete-panel{border-block-start-color:color-mix(in srgb,var(--sms-danger,#b32d2e) 18%,var(--sms-border))} .sms-profile-delete-form{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:10px;align-items:end} .sms-profile-delete-form>label{display:grid;gap:6px;color:var(--sms-text);font-size:.8rem;font-weight:700} .sms-profile-delete-form input{inline-size:100%;border:1px solid var(--sms-border-strong);border-radius:11px;background:var(--sms-surface-soft);color:var(--sms-text);padding:10px 11px;font:inherit;box-sizing:border-box} .sms-profile-delete-form small{color:var(--sms-muted);font-size:.69rem;font-weight:400;line-height:1.35} .sms-profile-delete-form .sms-profile-context-action{grid-column:1/-1;margin:0} .sms-profile-account-note{min-block-size:56px;padding:9px 11px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;border:1px solid var(--sms-border);border-radius:16px;background:var(--sms-surface);box-shadow:var(--sms-shadow-sm)} .sms-profile-account-note>span:first-child{color:var(--sms-primary);display:grid;place-items:center}.sms-profile-account-note .sms-icon{inline-size:19px;block-size:19px} .sms-profile-account-note>span:last-child{display:grid;gap:2px}.sms-profile-account-note strong{font-size:12px}.sms-profile-account-note small{font-size:10px;line-height:1.35;color:var(--sms-muted)} @media(max-width:767px){.sms-profile-delete-form{grid-template-columns:1fr}.sms-profile-delete-form .sms-profile-context-action{grid-column:auto}} /* 0.17.0-alpha.1.30.7.1 profile-scoped Photos & Albums UI hotfix. */ .sms-profile-gallery{display:grid;gap:16px;min-inline-size:0}.sms-profile-gallery__header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:20px;border:1px solid var(--sms-border);border-radius:18px;background:var(--sms-surface)}.sms-profile-gallery__header h2{margin:2px 0 0;color:var(--sms-text);font-size:1.35rem}.sms-profile-gallery__header p{margin:5px 0 0;color:var(--sms-muted);font-size:.82rem}.sms-profile-gallery__header-actions{display:grid;grid-template-columns:repeat(2,minmax(154px,184px));justify-content:end;gap:8px}.sms-profile-gallery__action{appearance:none;min-block-size:52px;padding:9px 11px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid var(--sms-border);border-radius:16px;background:var(--sms-surface);color:var(--sms-text);text-align:start;box-shadow:var(--sms-shadow-sm);font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:border-color 150ms ease,transform 150ms ease,background 150ms ease}.sms-profile-gallery__action:hover,.sms-profile-gallery__action:focus-visible{border-color:color-mix(in srgb,var(--sms-primary) 32%,var(--sms-border));background:color-mix(in srgb,var(--sms-primary) 3%,#fff);transform:translateY(-1px);outline:none}.sms-profile-gallery__action:active{transform:scale(.985)}.sms-profile-gallery__action>.sms-icon:first-child{inline-size:19px;block-size:19px;color:var(--sms-primary)}.sms-profile-gallery__action>.sms-icon:last-child{inline-size:15px;block-size:15px;color:var(--sms-muted)}.sms-profile-gallery__action>span{display:grid;gap:1px;min-inline-size:0}.sms-profile-gallery__action strong{font-size:12px;line-height:1.25}.sms-profile-gallery__action small{font-size:10px;line-height:1.3;color:var(--sms-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sms-profile-gallery__uploadbar{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid var(--sms-border);border-radius:14px;background:var(--sms-surface-soft)}.sms-profile-gallery__uploadbar label{display:grid;gap:4px;color:var(--sms-muted);font-size:.72rem}.sms-profile-gallery__uploadbar select{min-inline-size:190px;border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface);color:var(--sms-text);padding:8px 10px;font:inherit}.sms-profile-gallery__uploadbar [data-sms-gallery-status]{color:var(--sms-muted);font-size:.78rem}.sms-profile-gallery__uploadbar [data-sms-gallery-status][data-kind=error]{color:var(--sms-danger,#b32d2e)}.sms-profile-gallery__albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.sms-profile-gallery__album-card{position:relative;min-inline-size:0}.sms-profile-gallery__album{appearance:none;display:grid;inline-size:100%;gap:8px;text-align:start;border:1px solid var(--sms-border);border-radius:14px;background:var(--sms-surface);color:var(--sms-text);padding:8px;cursor:pointer}.sms-profile-gallery__album:hover,.sms-profile-gallery__album:focus-visible,.sms-profile-gallery__album.is-active{border-color:color-mix(in srgb,var(--sms-primary) 42%,var(--sms-border));box-shadow:0 0 0 2px color-mix(in srgb,var(--sms-primary) 11%,transparent);outline:none}.sms-profile-gallery__album-cover{position:relative;display:block;inline-size:100%;aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:var(--sms-surface-strong)}.sms-profile-gallery__album-cover img{inline-size:100%;block-size:100%;object-fit:cover}.sms-profile-gallery__album-cover.is-placeholder::before,.sms-profile-gallery__album-cover.is-library::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--sms-primary) 18%,var(--sms-surface-strong)),var(--sms-surface-strong))}.sms-profile-gallery__album-cover.is-library::after{content:"▦";position:absolute;inset:0;display:grid;place-items:center;color:var(--sms-primary);font-size:2rem;font-weight:800}.sms-profile-gallery__album strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sms-profile-gallery__album small{color:var(--sms-muted);font-size:.72rem}.sms-profile-gallery__album-actions{position:absolute;inset-block-start:14px;inset-inline-end:14px;display:flex;gap:4px}.sms-profile-gallery__album-actions button,.sms-profile-gallery__photo-actions button{display:grid;place-items:center;inline-size:30px;block-size:30px;border:1px solid color-mix(in srgb,var(--sms-border) 76%,transparent);border-radius:8px;background:color-mix(in srgb,var(--sms-surface) 92%,transparent);color:var(--sms-text);font:inherit;cursor:pointer;backdrop-filter:blur(8px)}.sms-profile-gallery__album-actions button:disabled{opacity:.35;cursor:not-allowed}.sms-profile-gallery__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.sms-profile-gallery__photo{position:relative;min-inline-size:0;aspect-ratio:1/1;overflow:hidden;border-radius:12px;background:var(--sms-surface-strong)}.sms-profile-gallery__photo[hidden]{display:none}.sms-profile-gallery__photo-open{appearance:none;display:block;inline-size:100%;block-size:100%;border:0;padding:0;background:transparent;cursor:zoom-in}.sms-profile-gallery__photo-open img{display:block;inline-size:100%;block-size:100%;object-fit:cover;transition:transform .18s ease}.sms-profile-gallery__photo-open:hover img,.sms-profile-gallery__photo-open:focus-visible img{transform:scale(1.025)}.sms-profile-gallery__photo-actions{position:absolute;inset-inline:7px;inset-block-end:7px;display:flex;align-items:center;gap:4px;padding:4px;border-radius:10px;background:color-mix(in srgb,var(--sms-surface) 88%,transparent);box-shadow:var(--sms-shadow-sm);backdrop-filter:blur(10px)}.sms-profile-gallery__photo-actions select{min-inline-size:0;max-inline-size:116px;border:0;background:transparent;color:var(--sms-text);font:inherit;font-size:.72rem}.sms-profile-gallery__photo-actions button.is-danger{color:var(--sms-danger,#b32d2e)}.sms-profile-gallery__modal,.sms-profile-gallery__viewer{position:fixed;z-index:100090;inset:0;display:grid;place-items:center;padding:20px;background:rgba(11,15,24,.62)}.sms-profile-gallery__modal[hidden],.sms-profile-gallery__viewer[hidden]{display:none}.sms-profile-gallery__modal>section{inline-size:min(520px,100%);max-block-size:88dvh;overflow:auto;border:1px solid var(--sms-border);border-radius:18px;background:var(--sms-surface);box-shadow:0 28px 80px rgba(0,0,0,.26)}.sms-profile-gallery__modal header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-block-end:1px solid var(--sms-border)}.sms-profile-gallery__modal header h3{margin:0}.sms-profile-gallery__modal header button,.sms-profile-gallery__viewer [data-sms-gallery-viewer-close]{display:grid;place-items:center;inline-size:38px;block-size:38px;border:0;border-radius:10px;background:var(--sms-surface-strong);color:var(--sms-text);font:inherit;font-size:1.45rem;cursor:pointer}.sms-profile-gallery__modal form{display:grid;gap:14px;padding:20px}.sms-profile-gallery__modal form label{display:grid;gap:6px;color:var(--sms-muted);font-size:.78rem}.sms-profile-gallery__modal input,.sms-profile-gallery__modal textarea{inline-size:100%;box-sizing:border-box;border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface-soft);color:var(--sms-text);padding:10px 12px;font:inherit}.sms-profile-gallery__modal form>p{margin:0;color:var(--sms-muted);font-size:.76rem}.sms-profile-gallery__modal form>div{display:flex;justify-content:flex-end;gap:8px}.sms-profile-gallery__modal form>div [data-sms-gallery-album-delete]{margin-inline-end:auto}.sms-profile-gallery__viewer>section{position:relative;display:grid;gap:10px;inline-size:min(1120px,100%);max-block-size:92dvh;place-items:center;outline:none}.sms-profile-gallery__viewer img{display:block;max-inline-size:100%;max-block-size:82dvh;object-fit:contain;border-radius:12px;background:#000}.sms-profile-gallery__viewer [data-sms-gallery-viewer-close]{position:absolute;z-index:2;inset-block-start:8px;inset-inline-end:8px}.sms-profile-gallery__viewer p{margin:0;max-inline-size:820px;color:#fff;text-align:center}.sms-modal-open{overflow:hidden} @media(max-width:900px){.sms-profile-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sms-profile-gallery__photo-actions{inset-inline:5px;inset-block-end:5px;gap:3px}.sms-profile-gallery__photo-actions select{max-inline-size:90px}.sms-profile-gallery__photo-actions button{inline-size:28px;block-size:28px}} @media(max-width:767px){.sms-profile-gallery__header{align-items:stretch;flex-direction:column;padding:16px}.sms-profile-gallery__header-actions{grid-template-columns:repeat(2,minmax(0,1fr));justify-content:stretch}.sms-profile-gallery__action{inline-size:100%}.sms-profile-gallery__uploadbar{align-items:stretch;flex-direction:column}.sms-profile-gallery__uploadbar select{inline-size:100%}.sms-profile-gallery__albums{display:flex;overflow-x:auto;grid-template-columns:none;padding-block-end:4px;scroll-snap-type:x proximity}.sms-profile-gallery__album-card,.sms-profile-gallery__albums>.sms-profile-gallery__album{flex:0 0 142px;scroll-snap-align:start}.sms-profile-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.sms-profile-gallery__photo{border-radius:6px}.sms-profile-gallery__photo-actions{opacity:0;pointer-events:none}.sms-profile-gallery__photo:focus-within .sms-profile-gallery__photo-actions{opacity:1;pointer-events:auto}.sms-profile-gallery__modal{place-items:end center;padding:0}.sms-profile-gallery__modal>section{inline-size:100%;max-block-size:90dvh;border-radius:20px 20px 0 0}.sms-profile-gallery__viewer{padding:0;background:#000}.sms-profile-gallery__viewer>section{inline-size:100%;block-size:100dvh;max-block-size:none}.sms-profile-gallery__viewer img{max-inline-size:100%;max-block-size:100dvh;border-radius:0}.sms-profile-gallery__viewer p{position:absolute;inset-inline:14px;inset-block-end:calc(14px + env(safe-area-inset-bottom));padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.48)}} @media(max-width:460px){.sms-profile-gallery__header-actions{grid-template-columns:1fr}} @media(max-width:420px){.sms-profile-gallery__grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* 0.17.0-alpha.1.30.8 — profile Gallery social integration. */ .sms-activity-gallery-reference{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 14px;margin:0 18px 12px;padding:12px 14px;border:1px solid var(--sms-border);border-radius:14px;background:var(--sms-surface-soft);color:var(--sms-text);text-decoration:none;transition:border-color 150ms ease,background 150ms ease,transform 150ms ease}.sms-activity-gallery-reference:hover,.sms-activity-gallery-reference:focus-visible{border-color:color-mix(in srgb,var(--sms-primary) 35%,var(--sms-border));background:color-mix(in srgb,var(--sms-primary) 4%,var(--sms-surface));transform:translateY(-1px);outline:none}.sms-activity-gallery-reference .sms-app-kicker{grid-column:1/2}.sms-activity-gallery-reference strong{grid-column:1/2;font-size:.9rem}.sms-activity-gallery-reference>span:last-child{grid-column:2/3;grid-row:1/3;align-self:center;color:var(--sms-primary);font-size:.76rem;font-weight:750}.sms-activity-card__gallery-media{display:block;inline-size:100%;block-size:100%;color:inherit;text-decoration:none}.sms-activity-card__gallery-media img{inline-size:100%;block-size:100%;object-fit:cover} .sms-profile-gallery__album-contexts:empty{display:none}.sms-profile-gallery__album-context{display:grid;gap:0;border:1px solid var(--sms-border);border-radius:16px;background:var(--sms-surface);overflow:hidden}.sms-profile-gallery__album-context[hidden]{display:none}.sms-profile-gallery__album-context-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 16px}.sms-profile-gallery__album-context-head>div{display:grid;gap:3px;min-inline-size:0}.sms-profile-gallery__album-context-head strong{color:var(--sms-text);font-size:.94rem}.sms-profile-gallery__album-context-head p{margin:2px 0 0;color:var(--sms-muted);font-size:.78rem;line-height:1.45}.sms-profile-gallery__album-context-head>a,.sms-profile-gallery__viewer-meta>a{flex:0 0 auto;color:var(--sms-primary);font-size:.74rem;font-weight:750;text-decoration:none}.sms-profile-gallery__album-context-head>a:hover,.sms-profile-gallery__album-context-head>a:focus-visible,.sms-profile-gallery__viewer-meta>a:hover,.sms-profile-gallery__viewer-meta>a:focus-visible{text-decoration:underline;outline:none}.sms-profile-gallery__album-context>.sms-reactions{border-top:1px solid var(--sms-border)}.sms-profile-gallery__social-source[hidden]{display:none!important} .sms-profile-gallery__viewer{padding:18px;background:rgba(8,10,16,.86);backdrop-filter:blur(5px)}.sms-profile-gallery__viewer>section{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(310px,380px);grid-template-rows:minmax(0,1fr);gap:0;inline-size:min(1180px,100%);block-size:min(820px,92dvh);max-block-size:92dvh;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:#080a0f;box-shadow:0 30px 90px rgba(0,0,0,.5);outline:none}.sms-profile-gallery__viewer-visual{display:grid;place-items:center;min-inline-size:0;min-block-size:0;background:#050609;touch-action:pan-y}.sms-profile-gallery__viewer-visual img{display:block;inline-size:100%;block-size:100%;max-inline-size:100%;max-block-size:100%;object-fit:contain;border-radius:0;background:#050609;user-select:none;-webkit-user-drag:none}.sms-profile-gallery__viewer-side{display:grid;grid-template-rows:auto minmax(0,1fr);min-inline-size:0;min-block-size:0;border-inline-start:1px solid var(--sms-border);background:var(--sms-surface);color:var(--sms-text);overflow:hidden}.sms-profile-gallery__viewer-meta{display:grid;gap:5px;padding:18px 18px 14px;border-block-end:1px solid var(--sms-border)}.sms-profile-gallery__viewer-meta p{position:static;inset:auto;margin:0;padding:0;max-inline-size:none;border-radius:0;background:transparent;color:var(--sms-text);text-align:start;font-size:.84rem;line-height:1.45}.sms-profile-gallery__viewer-meta p:empty{display:none}.sms-profile-gallery__viewer-social{min-block-size:0;overflow:auto;overscroll-behavior:contain;background:var(--sms-surface)}.sms-profile-gallery__viewer-social>.sms-reactions{min-block-size:100%;border-top:0}.sms-profile-gallery__viewer [data-sms-gallery-viewer-close]{position:absolute;z-index:6;inset-block-start:10px;inset-inline-end:10px;background:rgba(19,22,30,.82);color:#fff;box-shadow:0 4px 18px rgba(0,0,0,.24);backdrop-filter:blur(10px)}.sms-profile-gallery__viewer-nav{position:absolute;z-index:5;inset-block-start:50%;display:grid;place-items:center;inline-size:44px;block-size:52px;margin-block-start:-26px;border:1px solid rgba(255,255,255,.18);border-radius:13px;background:rgba(13,15,21,.64);color:#fff;font:inherit;font-size:2rem;line-height:1;cursor:pointer;backdrop-filter:blur(8px);transition:background 150ms ease,transform 150ms ease}.sms-profile-gallery__viewer-nav:hover,.sms-profile-gallery__viewer-nav:focus-visible{background:rgba(36,39,51,.86);transform:scale(1.03);outline:none}.sms-profile-gallery__viewer-nav.is-prev{inset-inline-start:12px}.sms-profile-gallery__viewer-nav.is-next{inset-inline-end:392px}.sms-profile-gallery__viewer-nav:disabled{opacity:.35;cursor:not-allowed}.sms-profile-gallery__viewer-social .sms-comments{max-block-size:none} @media(max-width:900px){.sms-profile-gallery__viewer>section{grid-template-columns:minmax(0,1fr) minmax(290px,340px)}.sms-profile-gallery__viewer-nav.is-next{inset-inline-end:352px}} @media(max-width:767px){.sms-activity-gallery-reference{margin-inline:14px}.sms-profile-gallery__album-context-head{align-items:stretch;flex-direction:column;gap:8px}.sms-profile-gallery__viewer{padding:0;background:#050609;backdrop-filter:none}.sms-profile-gallery__viewer>section{grid-template-columns:1fr;grid-template-rows:minmax(0,62dvh) minmax(0,38dvh);inline-size:100%;block-size:100dvh;max-block-size:none;border:0;border-radius:0}.sms-profile-gallery__viewer-visual{grid-row:1}.sms-profile-gallery__viewer-side{grid-row:2;border-inline-start:0;border-block-start:1px solid var(--sms-border);border-radius:18px 18px 0 0;z-index:3}.sms-profile-gallery__viewer-meta{padding:12px 14px 9px}.sms-profile-gallery__viewer-meta .sms-app-kicker{font-size:.64rem}.sms-profile-gallery__viewer-meta p{font-size:.78rem}.sms-profile-gallery__viewer-social{padding-block-end:env(safe-area-inset-bottom)}.sms-profile-gallery__viewer [data-sms-gallery-viewer-close]{inset-block-start:max(10px,env(safe-area-inset-top));inset-inline-end:max(10px,env(safe-area-inset-right));}.sms-profile-gallery__viewer-nav{inset-block-start:31dvh;inline-size:40px;block-size:46px;margin-block-start:-23px;border-radius:12px}.sms-profile-gallery__viewer-nav.is-prev{inset-inline-start:max(8px,env(safe-area-inset-left))}.sms-profile-gallery__viewer-nav.is-next{inset-inline-end:max(8px,env(safe-area-inset-right))}.sms-profile-gallery__viewer-social .sms-reaction-picker{z-index:100120}.sms-profile-gallery__viewer-social .sms-comments{padding-block-end:max(12px,env(safe-area-inset-bottom))}} .sms-profile-gallery__viewer>section{place-items:stretch}.sms-shared-preview .sms-activity-gallery-reference{margin:8px 0} /* 0.17.0-alpha.1.30.9 — Gallery privacy & security. */ .sms-profile-gallery__privacy-badge{display:inline-flex;align-items:center;max-inline-size:100%;inline-size:max-content;margin-block-start:2px;padding:3px 7px;border:1px solid var(--sms-border);border-radius:999px;background:var(--sms-surface-soft);color:var(--sms-muted);font-size:.66rem;font-weight:650;line-height:1.2;white-space:nowrap}.sms-profile-gallery__modal select{inline-size:100%;box-sizing:border-box;border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface-soft);color:var(--sms-text);padding:10px 12px;font:inherit}.sms-profile-gallery__photo-actions{max-inline-size:calc(100% - 14px);flex-wrap:wrap}.sms-profile-gallery__photo-actions select[data-sms-gallery-photo-visibility]{max-inline-size:96px}.sms-profile-gallery__photo-actions select:focus-visible,.sms-profile-gallery__modal select:focus-visible{outline:2px solid color-mix(in srgb,var(--sms-primary) 28%,transparent);outline-offset:1px} @media(max-width:900px){.sms-profile-gallery__photo-actions select[data-sms-gallery-photo-visibility]{max-inline-size:78px}} /* 0.17.0-alpha.1.30.10 — Profile & Gallery QA / UX Polish. * Normal gallery browsing is media-first. Management UI is opt-in and batch * uploads render as one compact social card. */ .sms-profile-gallery__header{align-items:center;padding:16px 18px}.sms-profile-gallery__header-actions{grid-template-columns:repeat(3,minmax(140px,172px));gap:7px}.sms-profile-gallery__action{min-block-size:48px;padding:8px 10px;border-radius:14px;box-shadow:none}.sms-profile-gallery__action strong{font-size:11.5px}.sms-profile-gallery__action small{font-size:9.5px}.sms-profile-gallery__action--manage[aria-pressed=true]{border-color:color-mix(in srgb,var(--sms-primary) 42%,var(--sms-border));background:color-mix(in srgb,var(--sms-primary) 7%,var(--sms-surface))}.sms-profile-gallery__uploadbar{min-block-size:48px;padding:8px 12px;border-radius:13px;background:color-mix(in srgb,var(--sms-surface-soft) 72%,transparent)}.sms-profile-gallery__uploadbar label{grid-template-columns:auto minmax(150px,220px);align-items:center;gap:8px}.sms-profile-gallery__uploadbar select{min-inline-size:0;padding:7px 9px}.sms-profile-gallery__albums{grid-template-columns:repeat(auto-fill,minmax(145px,178px));justify-content:start;gap:10px}.sms-profile-gallery__album{gap:6px;padding:7px;border-radius:13px;box-shadow:none}.sms-profile-gallery__album-cover{aspect-ratio:1.22/1;border-radius:9px}.sms-profile-gallery__album strong{font-size:.9rem}.sms-profile-gallery__privacy-badge{font-size:.61rem;padding:2px 6px}.sms-profile-gallery__album-actions{display:none;inset-block-start:10px;inset-inline-end:10px;z-index:8}.sms-profile-gallery.is-managing .sms-profile-gallery__album-actions{display:flex}.sms-profile-gallery.is-managing .sms-profile-gallery__album{border-color:color-mix(in srgb,var(--sms-primary) 18%,var(--sms-border))} .sms-profile-gallery__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.sms-profile-gallery__photo{overflow:visible;border-radius:12px;background:transparent}.sms-profile-gallery__photo-open{overflow:hidden;border-radius:12px;background:var(--sms-surface-strong);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sms-border) 60%,transparent)}.sms-profile-gallery__photo-menu-trigger{display:none;position:absolute;z-index:15;inset-block-start:7px;inset-inline-end:7px;inline-size:32px;block-size:30px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:9px;background:rgba(15,18,25,.72);color:#fff;font:700 14px/1 system-ui,sans-serif;letter-spacing:1px;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.2);backdrop-filter:blur(10px)}.sms-profile-gallery.is-managing .sms-profile-gallery__photo-menu-trigger{display:grid}.sms-profile-gallery__photo.has-open-menu{z-index:30}.sms-profile-gallery__photo-actions{position:absolute;z-index:25;inset:auto 7px auto auto;inset-block-start:42px;display:grid;align-items:stretch;gap:7px;inline-size:min(236px,calc(100vw - 42px));max-inline-size:none;padding:8px;border:1px solid color-mix(in srgb,var(--sms-border) 82%,transparent);border-radius:12px;background:color-mix(in srgb,var(--sms-surface) 97%,transparent);box-shadow:0 16px 34px rgba(22,27,40,.2);backdrop-filter:blur(14px)}.sms-profile-gallery__photo-actions[hidden]{display:none!important}.sms-profile-gallery__photo-action-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}.sms-profile-gallery__photo-action-row:has(select:only-child){grid-template-columns:1fr}.sms-profile-gallery__photo-actions select,.sms-profile-gallery__photo-actions select[data-sms-gallery-photo-visibility]{inline-size:100%;max-inline-size:none;min-inline-size:0;padding:7px 8px;border:1px solid var(--sms-border);border-radius:8px;background:var(--sms-surface-soft);font-size:.72rem}.sms-profile-gallery__photo-action-icons{display:grid;grid-template-columns:repeat(4,30px);justify-content:end;gap:5px}.sms-profile-gallery__photo-actions button{inline-size:30px;block-size:30px;border-radius:8px;background:var(--sms-surface-soft);backdrop-filter:none}.sms-profile-gallery:not(.is-managing) .sms-profile-gallery__photo-actions{display:none!important} .sms-profile-gallery__album-context{border-radius:14px;box-shadow:none}.sms-profile-gallery__album-context-head{padding:11px 13px}.sms-profile-gallery__album-context-head strong{font-size:.9rem}.sms-profile-gallery__album-context-head p{font-size:.74rem}.sms-profile-gallery__album-context>.sms-reactions{background:var(--sms-surface)} .sms-profile-gallery__viewer{position:fixed!important;z-index:2147483000!important;inset:0!important;padding:0!important;background:#08090d!important;backdrop-filter:none!important}.sms-profile-gallery__viewer>section{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-rows:100dvh;gap:0;inline-size:100vw!important;block-size:100dvh!important;max-inline-size:none!important;max-block-size:none!important;border:0!important;border-radius:0!important;background:#08090d!important;box-shadow:none!important}.sms-profile-gallery__viewer-visual{position:relative;display:grid;place-items:center;min-inline-size:0;min-block-size:0;padding:54px 54px 24px;background:#08090d;touch-action:pan-y}.sms-profile-gallery__viewer-visual img{inline-size:100%;block-size:100%;max-inline-size:100%;max-block-size:100%;object-fit:contain;background:transparent}.sms-profile-gallery__viewer-topbar{position:absolute;z-index:7;inset:0 360px auto 0;display:flex;align-items:center;justify-content:center;min-block-size:48px;padding:8px 70px 8px 18px;background:linear-gradient(180deg,rgba(0,0,0,.54),rgba(0,0,0,0));color:rgba(255,255,255,.82);pointer-events:none}.sms-profile-gallery__viewer-topbar span{font-size:.76rem;font-weight:700;letter-spacing:.04em}.sms-profile-gallery__viewer-side{display:grid;grid-template-rows:auto minmax(0,1fr);min-inline-size:0;min-block-size:0;border-inline-start:1px solid var(--sms-border);background:var(--sms-surface);color:var(--sms-text);overflow:hidden}.sms-profile-gallery__viewer-meta{padding:16px 16px 12px}.sms-profile-gallery__viewer-meta .sms-app-kicker{font-size:.62rem}.sms-profile-gallery__viewer-meta p{font-size:.8rem;line-height:1.42}.sms-profile-gallery__viewer-social{overflow:auto;overscroll-behavior:contain}.sms-profile-gallery__viewer-social .sms-activity-actions{position:sticky;z-index:4;inset-block-start:0;background:var(--sms-surface)}.sms-profile-gallery__viewer [data-sms-gallery-viewer-close]{position:absolute;z-index:10;inset-block-start:11px;inset-inline-end:11px;inline-size:38px;block-size:38px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(15,17,23,.82);color:#fff;font-size:1.35rem;box-shadow:0 5px 18px rgba(0,0,0,.24);backdrop-filter:blur(10px)}.sms-profile-gallery__viewer-nav{inset-block-start:50%;inline-size:42px;block-size:50px;margin-block-start:-25px;border-radius:12px;background:rgba(15,17,23,.66)}.sms-profile-gallery__viewer-nav.is-prev{inset-inline-start:12px}.sms-profile-gallery__viewer-nav.is-next{inset-inline-end:372px} .sms-activity-gallery-summary{display:flex;align-items:center;gap:8px;padding:0 18px 11px;color:var(--sms-muted);font-size:.78rem}.sms-activity-gallery-summary>span{display:grid;place-items:center;inline-size:24px;block-size:24px;border-radius:8px;background:color-mix(in srgb,var(--sms-primary) 9%,var(--sms-surface-soft));color:var(--sms-primary);font-size:.9rem}.sms-activity-gallery-summary strong{color:var(--sms-text);font-size:.8rem;font-weight:680}.sms-activity-gallery-grid{display:grid;gap:2px;overflow:hidden;background:var(--sms-surface-strong)}.sms-activity-gallery-grid figure{position:relative;margin:0;min-inline-size:0;min-block-size:0;overflow:hidden;background:var(--sms-surface-strong)}.sms-activity-gallery-grid .sms-activity-card__gallery-media{position:relative;display:block;inline-size:100%;block-size:100%;overflow:hidden}.sms-activity-gallery-grid img{display:block;inline-size:100%;block-size:100%;object-fit:cover;transition:transform .18s ease}.sms-activity-gallery-grid a:hover img,.sms-activity-gallery-grid a:focus-visible img{transform:scale(1.018)}.sms-activity-gallery-grid--1{grid-template-columns:1fr;background:#0b0c10}.sms-activity-gallery-grid--1 figure{max-block-size:610px}.sms-activity-gallery-grid--1 img{inline-size:100%;block-size:auto;max-block-size:610px;object-fit:contain;margin:auto;background:#0b0c10}.sms-activity-gallery-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));block-size:420px}.sms-activity-gallery-grid--3{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));block-size:430px}.sms-activity-gallery-grid--3 figure:first-child{grid-row:1/3}.sms-activity-gallery-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));block-size:430px}.sms-activity-gallery-grid__more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(7,9,14,.54);color:#fff;font-size:2rem;font-weight:800;letter-spacing:-.03em;text-shadow:0 2px 10px rgba(0,0,0,.35)}.sms-activity-gallery-reference{margin:0 18px 12px;padding:10px 12px;border-radius:12px;box-shadow:none} @media(max-width:980px){.sms-profile-gallery__header-actions{grid-template-columns:repeat(3,minmax(126px,1fr))}.sms-profile-gallery__viewer>section{grid-template-columns:minmax(0,1fr) 330px}.sms-profile-gallery__viewer-topbar{inset-inline-end:330px}.sms-profile-gallery__viewer-nav.is-next{inset-inline-end:342px}} @media(max-width:767px){.sms-profile-gallery__header{gap:12px;padding:14px}.sms-profile-gallery__header-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.sms-profile-gallery__action{grid-template-columns:auto minmax(0,1fr);min-block-size:46px;padding:7px 8px}.sms-profile-gallery__action>.sms-icon:last-child{display:none}.sms-profile-gallery__action small{display:none}.sms-profile-gallery__uploadbar{align-items:center;flex-direction:row}.sms-profile-gallery__uploadbar label{grid-template-columns:auto minmax(0,1fr);inline-size:100%}.sms-profile-gallery__albums{gap:8px}.sms-profile-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.sms-profile-gallery__photo{border-radius:7px}.sms-profile-gallery__photo-open{border-radius:7px}.sms-profile-gallery__photo-menu-trigger{inset-block-start:5px;inset-inline-end:5px;inline-size:29px;block-size:28px}.sms-profile-gallery__photo-actions{position:fixed;z-index:2147482500;inset:auto 10px calc(10px + env(safe-area-inset-bottom)) 10px;inline-size:auto;max-inline-size:none;padding:10px;border-radius:15px}.sms-profile-gallery__photo-action-icons{grid-template-columns:repeat(4,34px)}.sms-profile-gallery__photo-actions button{inline-size:34px;block-size:34px}.sms-profile-gallery__viewer>section{grid-template-columns:1fr;grid-template-rows:minmax(0,68dvh) minmax(0,32dvh)}.sms-profile-gallery__viewer-visual{grid-row:1;padding:46px 0 8px}.sms-profile-gallery__viewer-side{grid-row:2;border-inline-start:0;border-block-start:1px solid var(--sms-border);border-radius:18px 18px 0 0;z-index:3}.sms-profile-gallery__viewer-topbar{inset:0 0 auto 0}.sms-profile-gallery__viewer-nav{inset-block-start:34dvh}.sms-profile-gallery__viewer-nav.is-next{inset-inline-end:max(8px,env(safe-area-inset-right))}.sms-profile-gallery__viewer-meta{padding:10px 13px 8px}.sms-activity-gallery-summary{padding-inline:14px}.sms-activity-gallery-grid--1 figure{max-block-size:72dvh}.sms-activity-gallery-grid--1 img{max-block-size:72dvh}.sms-activity-gallery-grid--2{block-size:300px}.sms-activity-gallery-grid--3,.sms-activity-gallery-grid--4{block-size:320px}.sms-activity-gallery-grid__more{font-size:1.55rem}} @media(max-width:480px){.sms-profile-gallery__header-actions{grid-template-columns:1fr 1fr}.sms-profile-gallery__action--manage{grid-column:1/-1}.sms-profile-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sms-activity-gallery-grid--2{block-size:250px}.sms-activity-gallery-grid--3,.sms-activity-gallery-grid--4{block-size:280px}} /* 0.17.0-alpha.1.30.12 — Compact Gallery / Album modal UX hotfix. */ .sms-profile-gallery{gap:11px} .sms-profile-gallery__header{align-items:center;gap:12px;padding:13px 15px;border-radius:16px} .sms-profile-gallery__header h2{font-size:1.12rem;line-height:1.2} .sms-profile-gallery__header p{margin-top:3px;font-size:.72rem} .sms-profile-gallery__header-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px} .sms-profile-gallery__action{display:inline-grid;grid-template-columns:auto auto;inline-size:auto;min-inline-size:0;min-block-size:38px;padding:6px 9px;gap:7px;border-radius:11px;box-shadow:none} .sms-profile-gallery__action>span{display:block} .sms-profile-gallery__action strong{font-size:11px;white-space:nowrap} .sms-profile-gallery__action small,.sms-profile-gallery__action>.sms-icon:last-child{display:none} .sms-profile-gallery__action>.sms-icon:first-child{inline-size:16px;block-size:16px} .sms-profile-gallery__uploadbar{min-block-size:42px;padding:6px 9px;border-radius:11px} .sms-profile-gallery__uploadbar label{grid-template-columns:auto minmax(135px,190px);gap:6px} .sms-profile-gallery__uploadbar select{min-inline-size:0;padding:6px 8px;border-radius:8px;font-size:.74rem} .sms-profile-gallery__albums{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px} .sms-profile-gallery__album-card,.sms-profile-gallery__albums>.sms-profile-gallery__album{flex:0 0 136px;inline-size:136px} .sms-profile-gallery__album{position:relative;gap:5px;padding:6px;border-radius:11px;box-shadow:none} .sms-profile-gallery__album-cover{aspect-ratio:16/10;border-radius:8px} .sms-profile-gallery__album-cover.is-library::after{font-size:1.45rem} .sms-profile-gallery__album-copy{display:grid;gap:1px;min-inline-size:0} .sms-profile-gallery__album strong{font-size:.78rem;line-height:1.2} .sms-profile-gallery__album small{font-size:.63rem} .sms-profile-gallery__privacy-badge{justify-self:start;font-size:.56rem;line-height:1;padding:2px 5px;border-radius:999px} .sms-profile-gallery__album-actions{display:none;inset-block-start:8px;inset-inline-end:8px;gap:3px} .sms-profile-gallery__album-card:hover .sms-profile-gallery__album-actions,.sms-profile-gallery__album-card:focus-within .sms-profile-gallery__album-actions{display:flex} .sms-profile-gallery__album-actions button{inline-size:26px;block-size:26px;border-radius:7px;font-size:.7rem} .sms-profile-gallery__album-contexts{display:none!important} .sms-profile-gallery__grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px} .sms-profile-gallery__photo{border-radius:9px} .sms-profile-gallery__photo-open{border-radius:9px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sms-border) 52%,transparent)} .sms-profile-gallery__photo-menu-trigger{display:none;inset-block-start:6px;inset-inline-end:6px;inline-size:29px;block-size:27px;border-radius:8px;font-size:12px;opacity:.92} .sms-profile-gallery__photo:hover>.sms-profile-gallery__photo-menu-trigger,.sms-profile-gallery__photo:focus-within>.sms-profile-gallery__photo-menu-trigger,.sms-profile-gallery__photo.has-open-menu>.sms-profile-gallery__photo-menu-trigger{display:grid} .sms-profile-gallery__photo-actions{inset-block-start:38px;inset-inline-end:6px;inline-size:min(218px,calc(100vw - 34px));padding:7px;gap:6px;border-radius:10px} .sms-profile-gallery__photo-actions select,.sms-profile-gallery__photo-actions select[data-sms-gallery-photo-visibility]{padding:6px 7px;border-radius:7px;font-size:.68rem} .sms-profile-gallery__photo-action-icons{grid-template-columns:repeat(4,28px);gap:4px} .sms-profile-gallery__photo-actions button{inline-size:28px;block-size:28px;border-radius:7px} .sms-profile-gallery:not(.is-managing) .sms-profile-gallery__photo-actions{display:grid} .sms-profile-gallery__photo-actions[hidden]{display:none!important} .sms-profile-gallery__album-viewer{position:fixed;z-index:2147482700;inset:0;display:grid;place-items:center;padding:28px;background:rgba(17,21,31,.46);backdrop-filter:blur(4px)} .sms-profile-gallery__album-viewer[hidden]{display:none!important} .sms-profile-gallery__album-viewer>section{display:grid;grid-template-rows:auto auto minmax(0,1fr);inline-size:min(850px,calc(100vw - 56px));max-block-size:78dvh;overflow:hidden;border:1px solid color-mix(in srgb,var(--sms-border) 88%,transparent);border-radius:18px;background:var(--sms-surface);box-shadow:0 24px 70px rgba(18,24,38,.24);outline:none} .sms-profile-gallery__album-viewer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-block-size:50px;padding:9px 11px 9px 14px;border-block-end:1px solid var(--sms-border)} .sms-profile-gallery__album-viewer-title{display:grid;gap:1px;min-inline-size:0} .sms-profile-gallery__album-viewer-title strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;line-height:1.2;color:var(--sms-text)} .sms-profile-gallery__album-viewer-title span{font-size:.64rem;color:var(--sms-muted)} .sms-profile-gallery__album-viewer-tools{display:flex;align-items:center;gap:5px} .sms-profile-gallery__icon-button{display:grid;place-items:center;inline-size:31px;block-size:31px;padding:0;border:1px solid var(--sms-border);border-radius:9px;background:var(--sms-surface-soft);color:var(--sms-text);font:700 .9rem/1 system-ui,sans-serif;cursor:pointer;box-shadow:none} .sms-profile-gallery__icon-button:hover,.sms-profile-gallery__icon-button:focus-visible{border-color:color-mix(in srgb,var(--sms-primary) 32%,var(--sms-border));background:color-mix(in srgb,var(--sms-primary) 5%,var(--sms-surface));outline:none} .sms-profile-gallery__album-viewer-description{margin:0;padding:8px 14px 0;color:var(--sms-muted);font-size:.72rem;line-height:1.4} .sms-profile-gallery__album-viewer-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;min-block-size:150px;max-block-size:calc(78dvh - 58px);overflow:auto;padding:11px 12px 13px;align-content:start;overscroll-behavior:contain} .sms-profile-gallery__album-viewer-photo{position:relative;aspect-ratio:1/1;min-inline-size:0;overflow:hidden;border-radius:9px;background:var(--sms-surface-strong)} .sms-profile-gallery__album-viewer-photo-open{display:block;inline-size:100%;block-size:100%;padding:0;border:0;background:transparent;cursor:zoom-in} .sms-profile-gallery__album-viewer-photo-open img{display:block;inline-size:100%;block-size:100%;object-fit:cover;transition:transform .16s ease} .sms-profile-gallery__album-viewer-photo:hover img,.sms-profile-gallery__album-viewer-photo:focus-within img{transform:scale(1.025)} .sms-profile-gallery__album-viewer-photo-delete{display:none;position:absolute;z-index:4;inset-block-start:6px;inset-inline-end:6px;place-items:center;inline-size:28px;block-size:28px;padding:0;border:1px solid rgba(255,255,255,.56);border-radius:8px;background:rgba(18,21,28,.72);color:#fff;font:700 1rem/1 system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.18);backdrop-filter:blur(8px)} .sms-profile-gallery__album-viewer-photo:hover .sms-profile-gallery__album-viewer-photo-delete,.sms-profile-gallery__album-viewer-photo:focus-within .sms-profile-gallery__album-viewer-photo-delete{display:grid} .sms-profile-gallery__album-viewer-photo-delete:hover,.sms-profile-gallery__album-viewer-photo-delete:focus-visible{background:var(--sms-danger,#b32d2e);outline:none} .sms-profile-gallery__album-viewer-empty{display:grid;place-items:center;min-block-size:170px;padding:20px;color:var(--sms-muted);font-size:.78rem} /* Keep photo viewing inside a framed SMSocial modal instead of taking over the complete viewport. */ .sms-profile-gallery__viewer{position:fixed!important;z-index:2147482900!important;inset:0!important;display:grid!important;place-items:center!important;padding:30px!important;background:rgba(13,16,23,.56)!important;backdrop-filter:blur(5px)!important} .sms-profile-gallery__viewer[hidden]{display:none!important} .sms-profile-gallery__viewer>section{position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) 300px!important;grid-template-rows:minmax(0,1fr)!important;gap:0!important;inline-size:min(1040px,calc(100vw - 60px))!important;block-size:min(720px,82dvh)!important;max-inline-size:1040px!important;max-block-size:82dvh!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.11)!important;border-radius:20px!important;background:#0b0d12!important;box-shadow:0 28px 90px rgba(0,0,0,.34)!important;outline:none} .sms-profile-gallery__viewer-visual{padding:42px 46px 22px!important;background:#0b0d12!important} .sms-profile-gallery__viewer-visual img{object-fit:contain!important} .sms-profile-gallery__viewer-topbar{inset:0 300px auto 0!important;min-block-size:42px!important;padding:8px 58px 8px 14px!important;background:linear-gradient(180deg,rgba(0,0,0,.48),rgba(0,0,0,0))!important} .sms-profile-gallery__viewer-topbar span{font-size:.68rem!important} .sms-profile-gallery__viewer-side{border-inline-start:1px solid var(--sms-border)!important;background:var(--sms-surface)!important} .sms-profile-gallery__viewer-meta{padding:12px 13px 9px!important} .sms-profile-gallery__viewer-meta .sms-app-kicker{font-size:.56rem!important} .sms-profile-gallery__viewer-meta p{font-size:.74rem!important} .sms-profile-gallery__viewer [data-sms-gallery-viewer-close]{inset-block-start:9px!important;inset-inline-end:9px!important;inline-size:32px!important;block-size:32px!important;border-radius:9px!important;font-size:1rem!important} .sms-profile-gallery__viewer-nav{inline-size:34px!important;block-size:42px!important;margin-block-start:-21px!important;border-radius:9px!important} .sms-profile-gallery__viewer-nav.is-prev{inset-inline-start:9px!important} .sms-profile-gallery__viewer-nav.is-next{inset-inline-end:309px!important} /* Compact gallery cards in the main Feed. */ .sms-activity-gallery-summary{padding:0 14px 7px;font-size:.72rem} .sms-activity-gallery-summary>span{inline-size:21px;block-size:21px;border-radius:7px;font-size:.78rem} .sms-activity-gallery-summary strong{font-size:.74rem} .sms-activity-gallery-grid{margin:0 13px 9px;border-radius:13px;gap:2px} .sms-activity-gallery-grid--1 figure,.sms-activity-gallery-grid--1 img{max-block-size:470px} .sms-activity-gallery-grid--2{block-size:310px} .sms-activity-gallery-grid--3,.sms-activity-gallery-grid--4{block-size:330px} .sms-activity-gallery-reference{margin:0 13px 9px;padding:8px 10px;border-radius:10px} @media(max-width:1100px){ .sms-profile-gallery__grid{grid-template-columns:repeat(4,minmax(0,1fr))} .sms-profile-gallery__album-viewer-grid{grid-template-columns:repeat(4,minmax(0,1fr))} } @media(hover:none){ .sms-profile-gallery__photo-menu-trigger{display:grid;opacity:.82} .sms-profile-gallery__album-actions{display:flex} .sms-profile-gallery__album-viewer-photo-delete{display:grid;opacity:.9} } @media(max-width:767px){ .sms-profile-gallery{gap:8px} .sms-profile-gallery__header{align-items:flex-start;padding:11px 12px} .sms-profile-gallery__header-actions{gap:5px} .sms-profile-gallery__action{min-block-size:35px;padding:5px 8px} .sms-profile-gallery__uploadbar{padding:6px 8px} .sms-profile-gallery__albums{gap:6px;flex-wrap:nowrap;overflow-x:auto;padding-block-end:2px;scrollbar-width:none} .sms-profile-gallery__albums::-webkit-scrollbar{display:none} .sms-profile-gallery__album-card,.sms-profile-gallery__albums>.sms-profile-gallery__album{flex-basis:118px;inline-size:118px} .sms-profile-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px} .sms-profile-gallery__album-viewer{padding:10px} .sms-profile-gallery__album-viewer>section{inline-size:calc(100vw - 20px);max-block-size:82dvh;border-radius:16px} .sms-profile-gallery__album-viewer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;padding:8px;max-block-size:calc(82dvh - 54px)} .sms-profile-gallery__album-viewer-head{min-block-size:46px;padding:7px 8px 7px 11px} .sms-profile-gallery__viewer{padding:10px!important} .sms-profile-gallery__viewer>section{grid-template-columns:1fr!important;grid-template-rows:minmax(0,58%) minmax(0,42%)!important;inline-size:calc(100vw - 20px)!important;block-size:min(760px,84dvh)!important;max-block-size:84dvh!important;border-radius:16px!important} .sms-profile-gallery__viewer-visual{grid-row:1!important;padding:38px 8px 8px!important} .sms-profile-gallery__viewer-side{grid-row:2!important;border-inline-start:0!important;border-block-start:1px solid var(--sms-border)!important;border-radius:0!important} .sms-profile-gallery__viewer-topbar{inset:0 0 auto 0!important} .sms-profile-gallery__viewer-nav{inset-block-start:29%!important} .sms-profile-gallery__viewer-nav.is-next{inset-inline-end:8px!important} .sms-activity-gallery-grid{margin-inline:9px} .sms-activity-gallery-grid--1 figure,.sms-activity-gallery-grid--1 img{max-block-size:58dvh} .sms-activity-gallery-grid--2{block-size:230px} .sms-activity-gallery-grid--3,.sms-activity-gallery-grid--4{block-size:250px} } @media(max-width:430px){ .sms-profile-gallery__header{display:grid} .sms-profile-gallery__header-actions{justify-content:flex-start} .sms-profile-gallery__album-viewer-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } .sms-profile-gallery__modal>section{inline-size:min(480px,calc(100vw - 28px));border-radius:16px} .sms-profile-gallery__modal header{padding:13px 14px} .sms-profile-gallery__modal header h3{font-size:.96rem} .sms-profile-gallery__modal header button{inline-size:31px;block-size:31px;border-radius:9px;font-size:1rem} .sms-profile-gallery__modal form{gap:10px;padding:14px} .sms-profile-gallery__modal input,.sms-profile-gallery__modal textarea{padding:8px 9px;border-radius:9px;font-size:.8rem} .sms-profile-gallery__modal form>div{gap:6px} .sms-profile-gallery__modal form>div .sms-profile-button{inline-size:auto;min-inline-size:0;min-block-size:34px;padding:6px 10px;border-radius:9px;font-size:.72rem;box-shadow:none} /* 0.17.0-alpha.1.30.12.2 — feed gallery click/viewer + owner photo controls. */ .sms-profile-gallery__viewer-tools{position:absolute;z-index:14;inset-block-start:17px;inset-inline-end:309px;display:flex;align-items:center;gap:5px} .sms-profile-gallery__viewer-tool{display:grid;place-items:center;inline-size:32px;block-size:32px;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:rgba(15,17,23,.76);color:#fff;cursor:pointer;box-shadow:0 5px 18px rgba(0,0,0,.2);backdrop-filter:blur(10px)} .sms-profile-gallery__viewer-tool svg{inline-size:16px;block-size:16px;pointer-events:none} .sms-profile-gallery__viewer-tool:hover,.sms-profile-gallery__viewer-tool:focus-visible{background:rgba(31,35,47,.92);outline:none} .sms-profile-gallery__viewer-tool.is-danger:hover,.sms-profile-gallery__viewer-tool.is-danger:focus-visible{background:var(--sms-danger,#b32d2e);border-color:transparent} .sms-profile-gallery__viewer-tool:disabled{opacity:.45;cursor:wait} .sms-profile-gallery__viewer-tools [data-sms-gallery-viewer-close]{position:static!important;inset:auto!important;inline-size:32px!important;block-size:32px!important;border-radius:9px!important;background:rgba(15,17,23,.76)!important;color:#fff!important;font-size:1rem!important} .sms-profile-gallery__viewer-edit-form{display:grid;gap:8px;margin-block-start:10px;padding-block-start:10px;border-block-start:1px solid var(--sms-border)} .sms-profile-gallery__viewer-edit-form[hidden]{display:none!important} .sms-profile-gallery__viewer-edit-form label{display:grid;gap:5px;color:var(--sms-muted);font-size:.68rem} .sms-profile-gallery__viewer-edit-form textarea{inline-size:100%;box-sizing:border-box;resize:vertical;min-block-size:76px;max-block-size:150px;border:1px solid var(--sms-border);border-radius:9px;background:var(--sms-surface-soft);color:var(--sms-text);padding:8px 9px;font:inherit;font-size:.76rem;line-height:1.4} .sms-profile-gallery__viewer-edit-form>div{display:flex;justify-content:flex-end;gap:5px} .sms-profile-gallery__viewer-form-button{min-block-size:31px;padding:5px 9px;border:1px solid var(--sms-border);border-radius:8px;background:var(--sms-surface-soft);color:var(--sms-text);font:650 .68rem/1 system-ui,sans-serif;cursor:pointer} .sms-profile-gallery__viewer-form-button.is-primary{border-color:color-mix(in srgb,var(--sms-primary) 42%,var(--sms-border));background:color-mix(in srgb,var(--sms-primary) 10%,var(--sms-surface));color:var(--sms-primary)} .sms-feed-gallery-viewer__status{min-block-size:0!important;margin:0!important;color:var(--sms-danger,#b32d2e)!important;text-align:start!important;font-size:.66rem!important} .sms-feed-gallery-viewer .sms-profile-gallery__viewer-side{grid-template-rows:auto minmax(0,1fr)!important} .sms-feed-gallery-viewer .sms-profile-gallery__viewer-meta{overflow:auto} .sms-activity-gallery-grid [data-sms-feed-gallery-open]{cursor:zoom-in} @media(max-width:767px){ .sms-profile-gallery__viewer-tools{inset-block-start:max(14px,env(safe-area-inset-top));inset-inline-end:8px} .sms-profile-gallery__viewer-tool,.sms-profile-gallery__viewer-tools [data-sms-gallery-viewer-close]{inline-size:31px!important;block-size:31px!important} .sms-feed-gallery-viewer .sms-profile-gallery__viewer-side{grid-template-rows:auto minmax(0,1fr)!important} } /* 0.17.0-alpha.1.30.12.3 — Gallery viewer one-tap interaction reliability. */ .sms-feed-gallery-viewer__interaction-card{margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important} .sms-feed-gallery-viewer__interaction-card>.sms-reactions{min-block-size:100%;border-top:0!important} .sms-feed-gallery-viewer .sms-activity-actions{padding-block-start:12px!important;padding-block-end:11px!important} .sms-feed-gallery-viewer .sms-reaction-trigger, .sms-feed-gallery-viewer .sms-comment-trigger, .sms-feed-gallery-viewer .sms-share-trigger, .sms-feed-gallery-viewer .sms-save-trigger, .sms-feed-gallery-viewer .sms-save-collections-trigger{touch-action:manipulation;-webkit-tap-highlight-color:transparent;pointer-events:auto;user-select:none;-webkit-user-select:none;cursor:pointer} .sms-feed-gallery-viewer .sms-comments:not([hidden]){scroll-margin-block:8px} html.sms-gallery-viewer-open body>.sms-share-modal, html.sms-gallery-viewer-open body>.sms-saved-modal{z-index:2147483600!important} @media(max-width:767px){ .sms-feed-gallery-viewer .sms-activity-actions{padding-block-start:10px!important} } .sms-feed-gallery-viewer .sms-reaction-trigger:active, .sms-feed-gallery-viewer .sms-comment-trigger:active, .sms-feed-gallery-viewer .sms-share-trigger:active, .sms-feed-gallery-viewer .sms-save-trigger:active{transform:scale(.94);background:var(--sms-primary-soft);color:var(--sms-primary)} /* 0.17.0-alpha.1.31.0.1 — One-tap left/right shell navigation reliability. * Rail links activate on pointer-up with a movement threshold, so a deliberate * tap is immediate while touch scrolling remains safe. Pending state is visible * from the first tap instead of looking unresponsive during the route request. */ .sms-app-rail--left a[data-sms-router-link], .sms-app-rail--right a[data-sms-router-link]{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; cursor:pointer; } .sms-app-rail--left a[data-sms-router-link].is-router-pressing, .sms-app-rail--right a[data-sms-router-link].is-router-pressing{ transform:translateY(0) scale(.985); border-color:color-mix(in srgb,var(--sms-primary) 28%,var(--sms-border)); background:color-mix(in srgb,var(--sms-primary) 5%,var(--sms-surface)); } .sms-app-rail--left a[data-sms-router-pending="true"], .sms-app-rail--right a[data-sms-router-pending="true"]{ border-color:color-mix(in srgb,var(--sms-primary) 42%,var(--sms-border)); background:color-mix(in srgb,var(--sms-primary) 7%,var(--sms-surface)); box-shadow:0 0 0 2px color-mix(in srgb,var(--sms-primary) 8%,transparent),var(--sms-shadow-sm); } .sms-app-rail--left a[data-sms-router-pending="true"] > .sms-icon:first-child, .sms-app-rail--right a[data-sms-router-pending="true"] > .sms-icon:first-child{ color:var(--sms-primary); } /* 0.17.1-alpha.7 — canonical feed text truncation across Main, Groups and Pages. */ .sms-activity-card__body[data-sms-component="feed-text-toggle"]{--sms-feed-text-lines:5} .sms-activity-card__body--with-media[data-sms-component="feed-text-toggle"]{--sms-feed-text-lines:4} .sms-activity-card__text.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--sms-feed-text-lines);overflow:hidden} .sms-activity-card__text.is-expanded{display:block;overflow:visible} .sms-activity-card__text-toggle{appearance:none;margin:7px 0 0;padding:0;border:0;background:transparent;color:var(--sms-primary);font:inherit;font-size:.82rem;font-weight:800;line-height:1.3;cursor:pointer;text-decoration:none} .sms-activity-card__text-toggle:hover{text-decoration:underline;text-underline-offset:3px} .sms-activity-card__text-toggle:focus-visible{outline:2px solid var(--sms-primary);outline-offset:4px;border-radius:5px} .sms-activity-card__body--highlight[data-sms-component="feed-text-toggle"]{--sms-feed-text-lines:4} .sms-activity-card__body--highlight .sms-activity-card__text-toggle{margin-top:14px;padding:8px 13px;border:1px solid color-mix(in srgb,currentColor 42%,transparent);border-radius:999px;background:color-mix(in srgb,#000 15%,transparent);color:inherit;text-decoration:none} .sms-activity-card__body--highlight .sms-activity-card__text-toggle:hover{background:color-mix(in srgb,#000 23%,transparent)} @media(max-width:767px){.sms-activity-card__body[data-sms-component="feed-text-toggle"]{--sms-feed-text-lines:4}.sms-activity-card__body--with-media[data-sms-component="feed-text-toggle"]{--sms-feed-text-lines:3}.sms-activity-card__body--highlight[data-sms-component="feed-text-toggle"]{--sms-feed-text-lines:4}.sms-activity-card__text-toggle{font-size:.8rem}} /* 0.17.1-alpha.8 — canonical phone bottom navigation. */ .sms-mobile-bottom-nav{display:none} @media(max-width:767px){ .sms-app-centre__stream{padding-block-end:max(104px,calc(88px + var(--sms-safe-bottom)))} .sms-mobile-bottom-nav{ position:absolute; z-index:25; inset-inline:0; inset-block-end:0; min-block-size:calc(66px + var(--sms-safe-bottom)); padding:6px max(8px,var(--sms-safe-right)) max(6px,var(--sms-safe-bottom)) max(8px,var(--sms-safe-left)); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:end; gap:2px; border-block-start:1px solid color-mix(in srgb,var(--sms-border) 88%,transparent); background:color-mix(in srgb,var(--sms-surface) 94%,transparent); box-shadow:0 -12px 34px rgba(23,32,51,.08); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); } .sms-mobile-bottom-nav__item{ position:relative; min-inline-size:0; min-block-size:54px; padding:6px 2px 4px; border:0; border-radius:13px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:transparent; color:var(--sms-muted); font:inherit; font-size:10px; font-weight:760; line-height:1.05; text-align:center; cursor:pointer; -webkit-tap-highlight-color:transparent; } .sms-mobile-bottom-nav__item>.sms-icon, .sms-mobile-bottom-nav__icon-wrap>.sms-icon{ inline-size:22px; block-size:22px; } .sms-mobile-bottom-nav__item>span:last-child{ max-inline-size:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sms-mobile-bottom-nav__item.is-active, .sms-app-root[data-open-drawer="context"] .sms-mobile-bottom-nav__item--me{ color:var(--sms-primary); background:var(--sms-primary-soft); } .sms-mobile-bottom-nav__item.is-active::after, .sms-app-root[data-open-drawer="context"] .sms-mobile-bottom-nav__item--me::after{ content:""; position:absolute; inset-block-end:2px; inline-size:18px; block-size:2px; border-radius:999px; background:var(--sms-primary); } .sms-mobile-bottom-nav__icon-wrap{position:relative;display:grid;place-items:center} .sms-mobile-bottom-nav__badge{ position:absolute; inset-block-start:-7px; inset-inline-end:-10px; min-inline-size:17px; block-size:17px; padding-inline:4px; display:grid; place-items:center; border:2px solid var(--sms-surface); border-radius:999px; background:#e5484d; color:#fff; font-size:8px; font-weight:900; line-height:1; } .sms-mobile-bottom-nav__item--create{ overflow:visible; justify-content:flex-end; padding-block-start:0; color:var(--sms-primary); background:transparent!important; } .sms-mobile-bottom-nav__item--create::after{display:none!important} .sms-mobile-bottom-nav__create-mark{ inline-size:54px; block-size:54px; margin-block-start:-24px; display:grid; place-items:center; border:5px solid color-mix(in srgb,var(--sms-surface) 96%,transparent); border-radius:50%; background:var(--sms-primary); color:#fff; box-shadow:0 10px 24px color-mix(in srgb,var(--sms-primary) 30%,transparent); } .sms-mobile-bottom-nav__create-mark>.sms-icon{inline-size:25px;block-size:25px;stroke-width:2.15} .sms-mobile-bottom-nav__item--create>span:last-child{margin-block-start:1px} html.sms-composer-modal-open .sms-mobile-bottom-nav, body.sms-composer-modal-open .sms-mobile-bottom-nav{pointer-events:none;opacity:0} } @media(max-width:359px){ .sms-mobile-bottom-nav{padding-inline:max(4px,var(--sms-safe-left)) max(4px,var(--sms-safe-right));gap:0} .sms-mobile-bottom-nav__item{font-size:9px} .sms-mobile-bottom-nav__create-mark{inline-size:50px;block-size:50px} } @media(max-width:767px){ .sms-mobile-bottom-nav{z-index:100300} body.sms-route-messages .sms-messages{ inset-block-end:calc(66px + var(--sms-safe-bottom)); block-size:auto; } .sms-app-root[data-open-drawer] .sms-mobile-bottom-nav{z-index:35} body.sms-route-messages .sms-app-root[data-open-drawer="context"] .sms-app-rail--right{ position:fixed; z-index:100450!important; inset:0 0 0 auto; block-size:100dvh; visibility:visible!important; pointer-events:auto!important; } body.sms-route-messages .sms-app-root[data-open-drawer="context"] .sms-app-drawer-backdrop{ position:fixed; z-index:100400!important; inset:0; visibility:visible!important; pointer-events:auto!important; } } /* SMSocial 0.17.1-alpha.15 — Mobile profile media card readability */ @media (max-width: 680px) { .sms-profile-media-card, .sms-profile-image-card, .sms-profile-cover-card, .sms-profile-settings-media-card, [class*="profile"][class*="media"][class*="card"], [class*="profile"][class*="cover"][class*="card"] { min-width: 0; } .sms-profile-media-card__body, .sms-profile-image-card__body, .sms-profile-cover-card__body, .sms-profile-settings-media-card__body, [class*="profile"][class*="media"][class*="body"], [class*="profile"][class*="cover"][class*="body"] { display: grid !important; grid-template-columns: minmax(72px, 104px) minmax(0, 1fr) !important; gap: 14px !important; align-items: start !important; } .sms-profile-media-card__title, .sms-profile-image-card__title, .sms-profile-cover-card__title, .sms-profile-settings-media-card__title, [class*="profile"][class*="media"] h3, [class*="profile"][class*="cover"] h3, [class*="profile"][class*="media"] strong, [class*="profile"][class*="cover"] strong { min-width: 0 !important; width: auto !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; line-height: 1.25 !important; } .sms-profile-media-card__actions, .sms-profile-image-card__actions, .sms-profile-cover-card__actions, .sms-profile-settings-media-card__actions, [class*="profile"][class*="media"][class*="actions"], [class*="profile"][class*="cover"][class*="actions"] { grid-column: 1 / -1 !important; display: flex !important; flex-wrap: wrap !important; gap: 10px !important; min-width: 0 !important; } .sms-profile-media-card button, .sms-profile-image-card button, .sms-profile-cover-card button, .sms-profile-settings-media-card button { min-width: 0 !important; max-width: 100% !important; white-space: normal !important; } } /* 0.17.1-alpha.15 — canonical global theme mode */ .sms-app-theme-card{margin:14px 0;padding:14px;border:1px solid var(--sms-border);border-radius:18px;background:var(--sms-surface)} .sms-app-theme-card__copy{display:flex;flex-direction:column;gap:3px;margin-bottom:10px} .sms-app-theme-card__copy strong{color:var(--sms-text);font-size:14px;font-weight:850} .sms-app-theme-card__copy small{color:var(--sms-muted);font-size:11px;line-height:1.35} .sms-app-theme-card__options{display:flex;align-items:center;gap:8px} .sms-app-theme-card__options button{display:inline-grid;place-items:center;flex:0 0 42px;width:42px;height:42px;min-width:42px;min-height:42px;padding:0;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-surface-soft);color:var(--sms-text);font:inherit;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease} .sms-app-theme-card__options button:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--sms-primary) 28%,var(--sms-border))} .sms-app-theme-card__options button.is-active{border-color:color-mix(in srgb,var(--sms-primary) 55%,var(--sms-border));background:color-mix(in srgb,var(--sms-primary) 13%,var(--sms-surface));color:var(--sms-primary)} .sms-app-theme-card__options button:focus-visible{outline:3px solid color-mix(in srgb,var(--sms-primary) 30%,transparent);outline-offset:2px} .sms-app-theme-card__icon{width:19px;height:19px;stroke-width:1.9} body.sms-app-page.sms-color-mode-light,.sms-color-mode-light .sms-app-root{color-scheme:light;--sms-primary-soft:color-mix(in srgb,var(--sms-primary) 10%,#fff);--sms-surface:#fff;--sms-surface-soft:#f7f8fb;--sms-surface-strong:#eef1f6;--sms-text:#172033;--sms-muted:#748096;--sms-muted-strong:#59657a;--sms-border:#e2e7f0;--sms-border-strong:#d5dce8;--sms-success-soft:#e9f8f0;--sms-shadow-sm:0 8px 24px rgba(30,40,70,.07);--sms-shadow:0 20px 55px rgba(30,40,70,.10)} .sms-color-mode-light .sms-app-root{background:#f4f6fb} .sms-color-mode-light .sms-app-centre{background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--sms-primary) 7%,transparent),transparent 25rem),#f4f6fb} @media(max-width:680px){.sms-app-theme-card{margin-inline:0}.sms-app-theme-card__options button{flex-basis:44px;width:44px;height:44px;min-width:44px;min-height:44px}} /* 0.17.1-alpha.21 — premium floating mobile app dock. */ @media(max-width:767px){ .sms-app-centre__stream{padding-block-end:max(112px,calc(96px + var(--sms-safe-bottom)))} .sms-mobile-bottom-nav{ position:fixed; z-index:100300; inset-inline:max(10px,var(--sms-safe-left)) max(10px,var(--sms-safe-right)); inset-block-end:max(8px,var(--sms-safe-bottom)); min-block-size:62px; padding:6px 7px; gap:4px; border:1px solid color-mix(in srgb,var(--sms-border) 82%,transparent); border-radius:22px; background:var(--sms-surface); box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; isolation:isolate; } .sms-mobile-bottom-nav__item{ min-block-size:48px; padding:5px 3px 4px; gap:2px; border-radius:14px; font-size:9.5px; font-weight:780; transition:background-color .16s ease,color .16s ease,transform .12s ease; } .sms-mobile-bottom-nav__item:active{transform:scale(.96)} .sms-mobile-bottom-nav__item>.sms-icon, .sms-mobile-bottom-nav__icon-wrap>.sms-icon{inline-size:21px;block-size:21px;stroke-width:2} .sms-mobile-bottom-nav__item.is-active, .sms-app-root[data-open-drawer="context"] .sms-mobile-bottom-nav__item--me{ color:var(--sms-primary); background:color-mix(in srgb,var(--sms-primary) 11%,var(--sms-surface)); } .sms-mobile-bottom-nav__item.is-active::after, .sms-app-root[data-open-drawer="context"] .sms-mobile-bottom-nav__item--me::after{display:none} .sms-mobile-bottom-nav__badge{ inset-block-start:-6px; inset-inline-end:-9px; min-inline-size:16px; block-size:16px; border-width:2px; font-size:8px; } .sms-mobile-bottom-nav__item--create{justify-content:center;padding:0 2px 3px} .sms-mobile-bottom-nav__create-mark{ inline-size:48px; block-size:48px; margin-block-start:-18px; border:3px solid var(--sms-surface); box-shadow:0 9px 22px color-mix(in srgb,var(--sms-primary) 28%,transparent),0 2px 6px rgba(15,23,42,.10); } .sms-mobile-bottom-nav__create-mark>.sms-icon{inline-size:23px;block-size:23px;stroke-width:2.1} .sms-mobile-bottom-nav__item--create>span:last-child{margin-block-start:-1px} body.sms-route-messages .sms-messages{inset-block-end:calc(78px + var(--sms-safe-bottom))} } @media(max-width:359px){ .sms-mobile-bottom-nav{inset-inline:max(6px,var(--sms-safe-left)) max(6px,var(--sms-safe-right));padding-inline:5px;gap:2px} .sms-mobile-bottom-nav__item{font-size:8.8px} .sms-mobile-bottom-nav__create-mark{inline-size:46px;block-size:46px} } /* 0.17.1-alpha.21 — deterministic one-tap navigation feedback. */ @media(max-width:767px){ .sms-mobile-bottom-nav__item{touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent} .sms-mobile-bottom-nav__item.is-router-pressing, .sms-mobile-bottom-nav__item.is-navigation-pending, .sms-mobile-bottom-nav__item[data-sms-router-pending="true"]{ color:var(--sms-primary)!important; background:color-mix(in srgb,var(--sms-primary) 15%,var(--sms-surface))!important; transform:scale(.965); } .sms-mobile-bottom-nav__item.is-navigation-pending .sms-icon, .sms-mobile-bottom-nav__item[data-sms-router-pending="true"] .sms-icon{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--sms-primary) 30%,transparent))} } /* 0.17.1-alpha.21 — long-stream rendering containment. */ @supports (content-visibility: auto) { .sms-activity-stream > .sms-activity-card:nth-child(n + 4) { content-visibility: auto; contain-intrinsic-size: auto 680px; } .sms-people-results > .sms-person-card:nth-child(n + 9) { content-visibility: auto; contain-intrinsic-size: auto 180px; } .sms-group-grid > .sms-group-card:nth-child(n + 7), .sms-page-grid > .sms-page-card:nth-child(n + 7) { content-visibility: auto; contain-intrinsic-size: auto 300px; } .sms-event-grid > .sms-event-card:nth-child(n + 7), .sms-marketplace-grid > .sms-marketplace-card:nth-child(n + 7) { content-visibility: auto; contain-intrinsic-size: auto 340px; } } .is-sms-module-loading { opacity: .72; cursor: progress !important; pointer-events: none; } /* SMSocial 0.17.1-alpha.25 — cursor Feed pagination */ .sms-feed-pagination{display:grid;place-items:center;min-block-size:28px;padding:4px 0 18px} .sms-feed-pagination__sentinel{inline-size:100%;block-size:1px;pointer-events:none} .sms-feed-pagination__status{min-block-size:20px;color:var(--sms-muted);font-size:.72rem;font-weight:700;text-align:center} .sms-activity-insertion.is-loading-next-page .sms-feed-pagination__status::before{content:"";display:inline-block;inline-size:8px;block-size:8px;margin-inline-end:7px;border-radius:50%;background:var(--sms-primary);animation:sms-feed-page-pulse .8s ease-in-out infinite alternate} @keyframes sms-feed-page-pulse{from{opacity:.3;transform:scale(.8)}to{opacity:1;transform:scale(1)}} /* SMSocial 0.17.1-alpha.27 — Phase 3C comments + notifications pagination */ .sms-notifications__pagination{min-height:18px;padding:4px 0 12px} .sms-notifications__sentinel{height:1px;width:100%;pointer-events:none} .sms-notifications__pagination-status{min-height:18px;text-align:center;color:var(--sms-muted,#697386);font-size:13px} .sms-notifications__pagination[hidden]{display:none!important} /* SMSocial 0.17.1-alpha.34 — Gallery upload queue */ .sms-profile-gallery__upload-queue{display:grid;gap:10px;padding:12px;border:1px solid var(--sms-border);border-radius:16px;background:var(--sms-surface);box-shadow:var(--sms-shadow-sm)} .sms-profile-gallery__upload-queue[hidden]{display:none} .sms-profile-gallery__upload-queue-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,220px) auto;align-items:center;gap:12px} .sms-profile-gallery__upload-queue-head>div{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0} .sms-profile-gallery__upload-queue-head strong{font-size:.82rem;color:var(--sms-text)} .sms-profile-gallery__upload-queue-head span{font-size:.76rem;font-weight:800;color:var(--sms-primary)} .sms-profile-gallery__upload-queue-head progress,.sms-profile-gallery__upload-item progress{inline-size:100%;block-size:7px;accent-color:var(--sms-primary)} .sms-profile-gallery__upload-items{display:grid;gap:8px} .sms-profile-gallery__upload-item{display:grid;grid-template-columns:58px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px;border:1px solid color-mix(in srgb,var(--sms-border) 88%,transparent);border-radius:12px;background:var(--sms-surface-soft);min-width:0} .sms-profile-gallery__upload-item[data-status=failed]{border-color:color-mix(in srgb,var(--sms-danger,#b32d2e) 42%,var(--sms-border))} .sms-profile-gallery__upload-item[data-status=complete]{border-color:color-mix(in srgb,#2e9d62 36%,var(--sms-border))} .sms-profile-gallery__upload-thumb{inline-size:58px;block-size:58px;overflow:hidden;border-radius:10px;background:var(--sms-surface-strong)} .sms-profile-gallery__upload-thumb img{display:block;inline-size:100%;block-size:100%;object-fit:cover} .sms-profile-gallery__upload-copy{display:grid;gap:4px;min-width:0} .sms-profile-gallery__upload-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sms-text);font-size:.78rem} .sms-profile-gallery__upload-copy span{color:var(--sms-muted);font-size:.7rem} .sms-profile-gallery__upload-actions{display:flex;align-items:center;gap:6px} .sms-profile-gallery__upload-actions button{min-block-size:34px;padding:6px 9px;border:1px solid var(--sms-border);border-radius:9px;background:var(--sms-surface);color:var(--sms-text);font:inherit;font-size:.7rem;font-weight:750;cursor:pointer;touch-action:manipulation} .sms-profile-gallery__upload-actions [data-sms-gallery-upload-cancel]{color:var(--sms-danger,#b32d2e)} @media(max-width:767px){ .sms-profile-gallery__upload-queue{padding:9px;border-radius:14px} .sms-profile-gallery__upload-queue-head{grid-template-columns:1fr;gap:7px} .sms-profile-gallery__upload-queue-head .sms-button{justify-self:start} .sms-profile-gallery__upload-item{grid-template-columns:52px minmax(0,1fr);gap:9px} .sms-profile-gallery__upload-thumb{inline-size:52px;block-size:52px} .sms-profile-gallery__upload-actions{grid-column:1/-1;justify-content:flex-end} } /* 0.17.1-alpha.34 optimistic action feedback */ .is-optimistic,[data-sms-saved].is-optimistic,.sms-reactions.is-optimistic{transition:transform 120ms ease,opacity 120ms ease}.is-optimistic button,[data-sms-saved].is-optimistic button,.sms-reactions.is-optimistic button{transition:transform 120ms ease}.is-optimistic button:active,[data-sms-saved].is-optimistic button:active,.sms-reactions.is-optimistic button:active{transform:scale(.97)} /* Phase 3F — private Network cursor pagination */ .sms-network__pagination{min-block-size:1px;position:relative} .sms-network__pagination[hidden]{display:none!important} .sms-network__pagination [data-sms-network-sentinel]{display:block;inline-size:100%;block-size:2px;pointer-events:none} /* Phase 3F — Group member cursor sentinel */ .sms-group-members-pagination{min-block-size:1px} .sms-group-members-pagination[hidden]{display:none!important} .sms-group-members-pagination [data-sms-group-members-sentinel]{display:block;inline-size:100%;block-size:2px;pointer-events:none} /* 0.17.1-alpha.43 — Phase 5A Web Push preference card */ .sms-push-preferences{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 18px;align-items:center;padding:16px;border:1px solid var(--sms-border,#e6e8ef);border-radius:16px;background:color-mix(in srgb,var(--sms-surface,#fff) 92%,var(--sms-accent,#6b55f4) 8%)} .sms-push-preferences strong{display:block;margin:0 0 3px;font-size:.95rem}.sms-push-preferences p{margin:0;color:var(--sms-muted,#6b7280);font-size:.84rem;line-height:1.45}.sms-push-preferences__actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.sms-push-preferences>small{grid-column:1/-1;min-height:18px;color:var(--sms-muted,#6b7280)} .sms-push-preferences[data-push-enabled="true"]{border-color:color-mix(in srgb,var(--sms-accent,#6b55f4) 38%,var(--sms-border,#e6e8ef))} @media(max-width:767px){.sms-push-preferences{grid-template-columns:1fr;padding:13px}.sms-push-preferences__actions{justify-content:flex-start}.sms-push-preferences__actions .sms-profile-button{width:100%;justify-content:center}} /* 0.17.1-alpha.49 — Desktop canonical notification toast */ .sms-notification-toast{position:fixed;inset-inline-end:24px;inset-block-end:24px;z-index:1600;inline-size:min(370px,calc(100vw - 48px));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;padding:10px;border:1px solid color-mix(in srgb,var(--sms-border,#e6e8ef) 88%,transparent);border-radius:18px;background:color-mix(in srgb,var(--sms-surface,#fff) 96%,transparent);box-shadow:0 18px 54px rgba(15,23,42,.18),0 2px 12px rgba(15,23,42,.08);backdrop-filter:blur(18px);opacity:0;transform:translate3d(0,18px,0) scale(.985);transition:opacity .18s ease,transform .18s ease;color:var(--sms-ink,#111827)} .sms-notification-toast.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1)} .sms-notification-toast.is-leaving{opacity:0;transform:translate3d(0,10px,0) scale(.99)} .sms-notification-toast__content{min-inline-size:0;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px;padding:6px;border:0;background:transparent;color:inherit;text-align:start;cursor:pointer;border-radius:13px} .sms-notification-toast__content:hover{background:color-mix(in srgb,var(--sms-primary,#5b55ea) 6%,transparent)} .sms-notification-toast__content:focus-visible,.sms-notification-toast__close:focus-visible{outline:3px solid color-mix(in srgb,var(--sms-primary,#5b55ea) 42%,transparent);outline-offset:2px} .sms-notification-toast__avatar{inline-size:48px;block-size:48px;border-radius:14px;overflow:hidden;display:grid;place-items:center;background:color-mix(in srgb,var(--sms-primary,#5b55ea) 12%,var(--sms-surface,#fff));font-weight:850;color:var(--sms-primary,#5b55ea)} .sms-notification-toast__avatar img{inline-size:100%;block-size:100%;object-fit:cover} .sms-notification-toast__copy{min-inline-size:0;display:grid;gap:2px} .sms-notification-toast__eyebrow{font-size:11px;line-height:1.2;font-weight:850;letter-spacing:.035em;color:var(--sms-primary,#5b55ea)} .sms-notification-toast__copy strong{min-inline-size:0;font-size:13px;line-height:1.35;font-weight:760;overflow-wrap:anywhere} .sms-notification-toast__copy small{font-size:11px;line-height:1.3;color:var(--sms-muted,#6b7280)} .sms-notification-toast__close{inline-size:32px;block-size:32px;border:0;border-radius:10px;background:transparent;color:var(--sms-muted,#6b7280);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center} .sms-notification-toast__close:hover{background:color-mix(in srgb,var(--sms-muted,#6b7280) 10%,transparent);color:var(--sms-ink,#111827)} @media(max-width:899px),(hover:none),(pointer:coarse){.sms-notification-toast{display:none!important}} @media(prefers-reduced-motion:reduce){.sms-notification-toast{transition:none}} /* 0.17.1-alpha.52 — in-app Blog / News grid */ .sms-blog-news{display:grid;gap:18px}.sms-blog-news__intro{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:2px 2px 0}.sms-blog-news__intro>div{max-width:720px}.sms-blog-news__intro h2{margin:4px 0 6px;color:var(--sms-text);font-size:1.2rem;line-height:1.2}.sms-blog-news__intro p{margin:0;color:var(--sms-muted);font-size:.82rem;line-height:1.55}.sms-blog-news__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.sms-blog-news-card{min-width:0;border:1px solid var(--sms-border);border-radius:18px;background:var(--sms-surface);overflow:hidden;box-shadow:0 8px 24px color-mix(in srgb,var(--sms-text) 6%,transparent);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.sms-blog-news-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--sms-primary) 34%,var(--sms-border));box-shadow:0 14px 34px color-mix(in srgb,var(--sms-text) 10%,transparent)}.sms-blog-news-card__link{display:flex;height:100%;flex-direction:column;color:inherit;text-decoration:none!important}.sms-blog-news-card__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--sms-surface-soft)}.sms-blog-news-card__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s ease}.sms-blog-news-card:hover .sms-blog-news-card__media img{transform:scale(1.025)}.sms-blog-news-card__placeholder{display:grid;width:100%;height:100%;place-items:center;color:var(--sms-primary);background:linear-gradient(135deg,var(--sms-primary-soft),var(--sms-surface-soft))}.sms-blog-news-card__placeholder .sms-icon{width:44px;height:44px}.sms-blog-news-card__category{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:6px 9px;border-radius:999px;background:color-mix(in srgb,var(--sms-surface) 92%,transparent);box-shadow:0 2px 10px color-mix(in srgb,var(--sms-text) 12%,transparent);color:var(--sms-text);font-size:.66rem;font-weight:800;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(8px)}.sms-blog-news-card__body{display:flex;flex:1;flex-direction:column;padding:14px 15px 15px}.sms-blog-news-card__meta{display:flex;align-items:center;gap:7px;min-height:18px;color:var(--sms-muted);font-size:.66rem}.sms-blog-news-card__meta span:not(:first-child)::before{content:"·";margin-right:7px}.sms-blog-news-card__body h3{display:-webkit-box;margin:7px 0 8px;overflow:hidden;color:var(--sms-text);font-size:1rem;line-height:1.28;-webkit-box-orient:vertical;-webkit-line-clamp:2}.sms-blog-news-card__body p{display:-webkit-box;margin:0 0 14px;overflow:hidden;color:var(--sms-muted-strong);font-size:.76rem;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:3}.sms-blog-news-card__read{display:flex;align-items:center;gap:6px;margin-top:auto;color:var(--sms-primary);font-size:.72rem;font-weight:850}.sms-blog-news-card__read span{transition:transform .18s ease}.sms-blog-news-card:hover .sms-blog-news-card__read span{transform:translateX(3px)} @media(max-width:1050px){.sms-blog-news__grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){.sms-blog-news{gap:14px}.sms-blog-news__intro{padding:0 2px}.sms-blog-news__intro h2{font-size:1.08rem}.sms-blog-news__grid{grid-template-columns:1fr;gap:13px}.sms-blog-news-card{border-radius:16px}.sms-blog-news-card__body{padding:13px 14px 14px}.sms-blog-news-card__body h3{font-size:1rem}.sms-blog-news-card__body p{-webkit-line-clamp:2}} @media(prefers-reduced-motion:reduce){.sms-blog-news-card,.sms-blog-news-card__media img,.sms-blog-news-card__read span{transition:none}.sms-blog-news-card:hover{transform:none}.sms-blog-news-card:hover .sms-blog-news-card__media img{transform:none}} /* 0.17.1-alpha.61 — immersive action rail interaction hardening. */ .sms-video-immersive .sms-activity-card--immersive>.sms-reactions, .sms-video-immersive .sms-activity-card--immersive .sms-activity-actions{ pointer-events:auto!important; touch-action:manipulation; } .sms-video-immersive .sms-activity-card--immersive .sms-reaction-trigger, .sms-video-immersive .sms-activity-card--immersive .sms-comment-trigger, .sms-video-immersive .sms-activity-card--immersive .sms-share-trigger, .sms-video-immersive .sms-activity-card--immersive .sms-save-trigger, .sms-video-immersive .sms-activity-card--immersive .sms-save-collections-trigger{ position:relative; z-index:2; pointer-events:auto!important; touch-action:manipulation; -webkit-tap-highlight-color:transparent; } /* 0.17.1-alpha.62 — Profile About fields with per-field visibility. */ .sms-profile-about-fields{grid-column:1/-1;margin:0;padding:16px;border:1px solid var(--sms-border);border-radius:16px;background:var(--sms-surface-soft)} .sms-profile-about-fields legend{padding:0 8px;color:var(--sms-text);font-weight:800} .sms-profile-about-fields__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .sms-profile-about-field{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,.42fr);gap:10px;align-items:end;padding:12px;border:1px solid var(--sms-border);border-radius:13px;background:var(--sms-surface)} .sms-profile-about-field>label{min-width:0} .sms-profile-about-field__visibility select{min-width:0} @media(max-width:767px){ .sms-profile-about-fields{padding:12px} .sms-profile-about-fields__grid{grid-template-columns:1fr;gap:9px} .sms-profile-about-field{grid-template-columns:minmax(0,1fr) 118px;gap:8px;padding:10px} .sms-profile-about-field label{font-size:.78rem} } @media(max-width:420px){ .sms-profile-about-field{grid-template-columns:1fr} } /* 0.17.1-alpha.63 — Social graph count visibility. */ .sms-profile-graph-visibility{grid-column:1/-1;display:grid;gap:8px;margin:2px 0 0;padding:12px;border:1px solid var(--sms-border);border-radius:16px;background:var(--sms-surface-soft)} .sms-profile-graph-visibility>legend{padding:0 5px;color:var(--sms-text);font-size:.8rem;font-weight:750} .sms-profile-graph-visibility>p{margin:0;color:var(--sms-muted);font-size:.7rem;line-height:1.4} .sms-profile-graph-visibility__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .sms-profile-graph-visibility__grid>label{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:9px;min-inline-size:0;padding:9px 10px;border:1px solid var(--sms-border);border-radius:12px;background:var(--sms-surface)} .sms-profile-graph-visibility__grid>label>span{display:grid;gap:2px;min-inline-size:0} .sms-profile-graph-visibility__grid strong{font-size:.74rem;line-height:1.2;color:var(--sms-text)} .sms-profile-graph-visibility__grid small{font-size:.64rem;line-height:1.3;color:var(--sms-muted);font-weight:400} .sms-profile-graph-visibility__grid select{min-inline-size:112px;max-inline-size:132px;border:1px solid var(--sms-border-strong);border-radius:9px;background:var(--sms-surface);color:var(--sms-text);padding:7px 8px;font:650 .68rem/1.2 system-ui,sans-serif} @media(max-width:900px){.sms-profile-graph-visibility__grid{grid-template-columns:1fr}.sms-profile-graph-visibility__grid>label{grid-template-columns:minmax(0,1fr) 118px}.sms-profile-graph-visibility__grid select{inline-size:100%;min-inline-size:0;max-inline-size:none}} @media(max-width:430px){.sms-profile-graph-visibility{padding:10px}.sms-profile-graph-visibility__grid>label{grid-template-columns:1fr}.sms-profile-graph-visibility__grid select{inline-size:100%}} /* alpha.67 — Event management workspace */ body.sms-app-page .sms-event-hero__eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px} body.sms-app-page .sms-event-status-pill{display:inline-flex;align-items:center;min-block-size:24px;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:850;letter-spacing:.04em;text-transform:uppercase} body.sms-app-page .sms-event-status-pill.is-cancelled{background:color-mix(in srgb,var(--sms-danger,#b32d2e) 10%,var(--sms-surface));color:var(--sms-danger,#b32d2e)} body.sms-app-page .sms-event-cancel-button{border-color:color-mix(in srgb,var(--sms-danger,#b32d2e) 30%,var(--sms-border));color:var(--sms-danger,#b32d2e)} body.sms-app-page .sms-event-cancel-button:hover,body.sms-app-page .sms-event-cancel-button:focus-visible{border-color:var(--sms-danger,#b32d2e);background:color-mix(in srgb,var(--sms-danger,#b32d2e) 7%,var(--sms-surface));color:var(--sms-danger,#b32d2e)} body.sms-app-page .sms-event-cancelled-notice{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 14px;border:1px solid color-mix(in srgb,var(--sms-danger,#b32d2e) 20%,var(--sms-border));border-radius:13px;background:color-mix(in srgb,var(--sms-danger,#b32d2e) 4%,var(--sms-surface));color:var(--sms-muted);font-size:12px} body.sms-app-page .sms-event-cancelled-notice strong{color:var(--sms-danger,#b32d2e)} @media (max-width:640px){body.sms-app-page .sms-event-cancelled-notice{align-items:flex-start;flex-direction:column;gap:3px}} body.sms-app-page .sms-activity-event-preview__eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:7px} /* 0.17.1-alpha.83 — format-aware immersive YouTube layout. Landscape YouTube videos use a wide 16:9 stage; Shorts use a tall 9:16 stage. The SMSocial action rail remains outside the provider iframe. */ @media(min-width:900px){ .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video{ inline-size:min(94vw,1180px); max-inline-size:1180px; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--youtube{ inset-block-start:max(66px,calc(env(safe-area-inset-top) + 60px)); inset-block-end:max(154px,calc(env(safe-area-inset-bottom) + 142px)); inset-inline-start:22px; inset-inline-end:92px; display:grid; place-items:center; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--16x9 iframe{ inline-size:min(100%,calc((100dvh - 230px) * 1.7777778)); block-size:auto; max-inline-size:100%; max-block-size:100%; aspect-ratio:16/9; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-activity-card__header{ inset-inline:26px 104px; inset-block-end:max(56px,calc(env(safe-area-inset-bottom) + 48px)); } .sms-video-immersive__slide--portrait .sms-activity-card--immersive.has-external-video{ inline-size:min(100%,620px); max-inline-size:620px; } .sms-video-immersive__slide--portrait .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--youtube{ inset-block-start:max(60px,calc(env(safe-area-inset-top) + 54px)); inset-block-end:max(122px,calc(env(safe-area-inset-bottom) + 112px)); inset-inline-start:8px; inset-inline-end:82px; display:grid; place-items:center; } .sms-video-immersive__slide--portrait .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--9x16 iframe{ inline-size:auto; block-size:100%; max-inline-size:100%; max-block-size:100%; aspect-ratio:9/16; } .sms-video-immersive__slide--portrait .sms-activity-card--immersive.has-external-video .sms-activity-card__header{ inset-inline:18px 92px; inset-block-end:max(52px,calc(env(safe-area-inset-bottom) + 44px)); } } @media(max-width:899px){ .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--youtube{ inset-block-start:max(54px,calc(env(safe-area-inset-top) + 50px)); inset-block-end:max(168px,calc(env(safe-area-inset-bottom) + 154px)); inset-inline-start:8px; inset-inline-end:64px; display:grid; place-items:center; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--16x9 iframe{ inline-size:100%; block-size:auto; max-inline-size:100%; max-block-size:100%; aspect-ratio:16/9; } .sms-video-immersive__slide--portrait .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--youtube{ inset-block-start:max(54px,calc(env(safe-area-inset-top) + 50px)); inset-block-end:max(118px,calc(env(safe-area-inset-bottom) + 106px)); inset-inline-start:4px; inset-inline-end:62px; display:grid; place-items:center; } .sms-video-immersive__slide--portrait .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--9x16 iframe{ inline-size:auto; block-size:100%; max-inline-size:100%; max-block-size:100%; aspect-ratio:9/16; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-activity-card__header, .sms-video-immersive__slide--portrait .sms-activity-card--immersive.has-external-video .sms-activity-card__header{ inset-inline:12px 72px; inset-block-end:max(54px,calc(env(safe-area-inset-bottom) + 46px)); } } /* 0.17.1-alpha.84 — dedicated phone layouts for external YouTube playback. Standard videos use a compact watch-style 16:9 stage with horizontal SMSocial actions below it; Shorts keep a tall 9:16 reels stage and the right-side action rail. Provider iframe controls remain unobstructed. */ @media(max-width:767px){ /* Normal YouTube: treat the phone as a watch page, not a Reels canvas. */ .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video{ inline-size:100vw!important; max-inline-size:100vw!important; block-size:100dvh!important; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--youtube{ inset:auto!important; inset-inline-start:50%!important; inset-block-start:max(calc(env(safe-area-inset-top) + 66px),18dvh)!important; inline-size:min(100vw,105dvh)!important; block-size:auto!important; aspect-ratio:16/9!important; transform:translateX(-50%)!important; border-radius:0!important; overflow:hidden!important; background:#000!important; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--16x9 iframe{ position:absolute!important; inset:0!important; inline-size:100%!important; block-size:100%!important; max-inline-size:none!important; max-block-size:none!important; aspect-ratio:16/9!important; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-activity-card__header{ inset:auto 12px auto 12px!important; inset-block-start:calc(max(calc(env(safe-area-inset-top) + 66px),18dvh) + min(56.25vw,59.0625dvh) + 14px)!important; grid-template-columns:38px minmax(0,1fr) auto!important; gap:9px!important; padding:0!important; text-shadow:0 1px 8px rgba(0,0,0,.75)!important; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video>.sms-reactions{ inset:auto 12px auto 12px!important; inset-block-start:calc(max(calc(env(safe-area-inset-top) + 66px),18dvh) + min(56.25vw,59.0625dvh) + 70px)!important; inline-size:auto!important; display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; gap:8px!important; pointer-events:auto!important; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video>.sms-reactions>.sms-reactions__summary{ display:none!important; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-activity-actions{ display:flex!important; flex-direction:row!important; align-items:flex-start!important; justify-content:flex-start!important; gap:14px!important; inline-size:100%!important; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-reaction-control, .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-share-control, .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-save-control, .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-comment-trigger{ flex:0 0 auto!important; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-reaction-trigger, .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-comment-trigger, .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-share-trigger, .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-save-trigger{ inline-size:46px!important; block-size:46px!important; min-inline-size:46px!important; min-block-size:46px!important; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-reaction-picker{ position:fixed!important; inset-inline-start:50%!important; inset-inline-end:auto!important; inset-block-end:max(18px,env(safe-area-inset-bottom))!important; transform:translate(-50%,8px) scale(.96)!important; transform-origin:center bottom!important; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-reaction-picker.is-open{ transform:translate(-50%,0) scale(1)!important; } /* YouTube Shorts: true portrait/Reels stage with a protected action gutter. */ .sms-video-immersive__slide--portrait .sms-activity-card--immersive.has-external-video{ inline-size:100vw!important; max-inline-size:100vw!important; block-size:100dvh!important; } .sms-video-immersive__slide--portrait .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--youtube{ inset:auto!important; inset-inline-start:calc((100vw - 62px) / 2)!important; inset-block-start:50%!important; inline-size:min(calc(100vw - 70px),46dvh)!important; block-size:auto!important; aspect-ratio:9/16!important; transform:translate(-50%,-50%)!important; border-radius:10px!important; overflow:hidden!important; background:#000!important; } .sms-video-immersive__slide--portrait .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--9x16 iframe{ position:absolute!important; inset:0!important; inline-size:100%!important; block-size:100%!important; max-inline-size:none!important; max-block-size:none!important; aspect-ratio:9/16!important; } .sms-video-immersive__slide--portrait .sms-activity-card--immersive.has-external-video .sms-activity-card__header{ inset-inline:14px 76px!important; inset-block-start:auto!important; inset-block-end:max(26px,calc(env(safe-area-inset-bottom) + 18px))!important; padding:0!important; } .sms-video-immersive__slide--portrait .sms-activity-card--immersive.has-external-video>.sms-reactions{ inset-inline-start:auto!important; inset-inline-end:max(7px,env(safe-area-inset-right))!important; inset-block-start:auto!important; inset-block-end:max(116px,calc(env(safe-area-inset-bottom) + 102px))!important; inline-size:52px!important; display:flex!important; flex-direction:column!important; align-items:center!important; } .sms-video-immersive__slide--portrait .sms-activity-card--immersive.has-external-video .sms-activity-actions{ flex-direction:column!important; align-items:center!important; justify-content:flex-end!important; gap:15px!important; } } /* Very short phone viewports: keep standard YouTube controls and SMSocial actions visible instead of allowing the watch layout to run below screen. */ @media(max-width:767px) and (max-height:520px){ .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-activity-card__embed--youtube{ inset-block-start:max(calc(env(safe-area-inset-top) + 50px),8px)!important; inline-size:min(100vw,92dvh)!important; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-activity-card__header{ inset-block-start:auto!important; inset-block-end:max(64px,calc(env(safe-area-inset-bottom) + 56px))!important; inset-inline-end:72px!important; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video>.sms-reactions{ inset-block-start:auto!important; inset-block-end:max(10px,env(safe-area-inset-bottom))!important; inset-inline:12px!important; } .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-activity-actions{gap:10px!important} .sms-video-immersive__slide--landscape .sms-activity-card--immersive.has-external-video .sms-action-label{display:none!important} } /* 0.17.1-alpha.90 — mobile notification bell + canonical unread badge. */ .sms-app-notification-action .sms-app-notification-badge{ background:#dc2626; color:#fff; box-shadow:0 0 0 2px var(--sms-surface,#fff),0 3px 10px rgba(220,38,38,.28); } .sms-app-notification-focus{ outline:3px solid color-mix(in srgb,var(--sms-primary) 65%,transparent)!important; outline-offset:3px; animation:sms-notification-focus-pulse 1.7s ease-out 1; } .sms-comment.sms-notification-focus{ border-color:color-mix(in srgb,var(--sms-primary) 55%,var(--sms-border))!important; background:color-mix(in srgb,var(--sms-primary) 8%,var(--sms-surface))!important; } @keyframes sms-notification-focus-pulse{ 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sms-primary) 34%,transparent)} 60%{box-shadow:0 0 0 14px transparent} 100%{box-shadow:none} } @media(max-width:767px){ .sms-app-topbar__inner{ grid-template-columns:auto minmax(0,1fr) 40px 40px; } .sms-app-notification-action{ display:grid!important; grid-column:3; inline-size:40px; block-size:40px; padding:0; place-items:center; border:1px solid var(--sms-border); border-radius:12px; background:var(--sms-surface); color:var(--sms-muted-strong); } .sms-app-notification-action .sms-icon{inline-size:21px;block-size:21px} .sms-app-mobile-trigger--context{grid-column:4} .sms-app-notification-action .sms-app-notification-badge{ inset-block-start:-5px; inset-inline-end:-5px; min-inline-size:18px; block-size:18px; line-height:18px; font-size:10px; } } .sms-notification[role="link"]{cursor:pointer} .sms-notification[role="link"]:hover, .sms-notification[role="link"]:focus-visible{border-color:color-mix(in srgb,var(--sms-primary) 35%,var(--sms-border));outline:none;box-shadow:0 8px 24px rgba(20,28,48,.08)} /* Unified cover reposition editor — profile, group and Page covers. */ [data-sms-cover-frame]{position:relative} [data-sms-cover-frame]>img{object-fit:cover;object-position:50% 50%} [data-sms-cover-frame].is-repositioning{outline:2px solid color-mix(in srgb,var(--sms-primary) 76%,#fff);outline-offset:2px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none} [data-sms-cover-frame].is-repositioning.is-dragging{cursor:grabbing} [data-sms-cover-frame].is-repositioning>img{pointer-events:none;user-select:none;-webkit-user-drag:none;transition:none!important} .sms-cover-reposition-controls{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;background:linear-gradient(180deg,rgba(8,12,22,.38),transparent 38%,transparent 62%,rgba(8,12,22,.56));padding:12px;box-sizing:border-box} .sms-cover-reposition-hint{align-self:center;max-width:min(92%,520px);padding:8px 12px;border-radius:999px;background:rgba(10,14,24,.78);color:#fff;font-size:12px;font-weight:800;line-height:1.25;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.18);backdrop-filter:blur(10px)} .sms-cover-reposition-buttons{display:flex;align-items:center;justify-content:flex-end;gap:8px;pointer-events:auto} .sms-cover-reposition-buttons .sms-profile-button{min-height:38px;padding:8px 13px;border-radius:11px;box-shadow:0 8px 24px rgba(0,0,0,.14)} .sms-group-cover-reposition{border:1px solid rgba(255,255,255,.72);background:rgba(20,24,35,.72);color:#fff;border-radius:12px;padding:9px 12px;font:inherit;font-weight:750;cursor:pointer;backdrop-filter:blur(8px)} .sms-group-cover-reposition:hover{background:rgba(20,24,35,.88)} .sms-group-workspace__cover.is-repositioning>.sms-group-cover-actions{opacity:0;pointer-events:none} .sms-profile-media-preview--cover.is-repositioning{inline-size:min(100%,620px);block-size:auto;min-block-size:132px;aspect-ratio:16/6} @media(max-width:600px){ .sms-cover-reposition-controls{padding:8px} .sms-cover-reposition-hint{font-size:11px;padding:7px 9px} .sms-cover-reposition-buttons{gap:6px} .sms-cover-reposition-buttons .sms-profile-button{min-height:36px;padding:7px 10px;font-size:12px} .sms-group-cover-reposition{padding:8px 10px} } @media(max-width:767px){ .sms-profile-media-editor:has(.sms-profile-media-preview--cover.is-repositioning){grid-template-columns:1fr} .sms-profile-media-editor .sms-profile-media-preview--cover.is-repositioning{grid-column:1/-1;inline-size:100%;block-size:auto;min-block-size:118px;aspect-ratio:16/6} } /* 1.12.0-beta.45.5.1 — Unified Management Workspace UX + inline identity media editing. */ [data-sms-management-panel][hidden]{display:none!important} @media (min-width:1024px){ body.sms-management-focus .sms-app-shell{ inline-size:min(100%,1440px); grid-template-columns:minmax(0,1fr); } body.sms-management-focus .sms-app-rail--left, body.sms-management-focus .sms-app-rail--right{ display:none!important; } body.sms-management-focus .sms-app-centre{ grid-column:1; inline-size:100%; } body.sms-management-focus .sms-app-centre__stream{ inline-size:min(100%,1240px); padding-inline:32px; padding-block-start:22px; } body.sms-management-focus .sms-group-workspace, body.sms-management-focus .sms-page-workspace{ inline-size:100%; max-inline-size:none; grid-template-columns:232px minmax(0,1fr); column-gap:18px; row-gap:14px; } body.sms-management-focus .sms-group-workspace__header, body.sms-management-focus .sms-group-workspace>[data-sms-group-status], body.sms-management-focus .sms-group-workspace__stats, body.sms-management-focus .sms-page-workspace__header, body.sms-management-focus .sms-page-workspace>[data-sms-page-status]{ grid-column:1/-1; } body.sms-management-focus .sms-group-workspace__nav, body.sms-management-focus .sms-page-workspace__nav, body.sms-management-focus .sms-profile-settings__nav{ grid-column:1; align-self:start; position:sticky; top:calc(var(--sms-topbar-height,64px) + 14px); display:grid; gap:5px; padding:8px; overflow:visible; border:1px solid var(--sms-border); border-radius:16px; background:var(--sms-surface); box-shadow:var(--sms-shadow-sm); } body.sms-management-focus .sms-group-workspace__nav a, body.sms-management-focus .sms-page-workspace__nav a, body.sms-management-focus .sms-profile-settings__nav button{ inline-size:100%; min-block-size:42px; display:flex; align-items:center; gap:8px; padding:9px 11px; border:0; border-radius:11px; background:transparent; color:var(--sms-muted-strong); text-align:start; text-decoration:none; font:inherit; font-size:12.5px; font-weight:780; cursor:pointer; } body.sms-management-focus .sms-group-workspace__nav a::after, body.sms-management-focus .sms-page-workspace__nav a::after, body.sms-management-focus .sms-profile-settings__nav button::after{ content:'›'; margin-inline-start:auto; color:var(--sms-muted); font-size:17px; line-height:1; } body.sms-management-focus .sms-group-workspace__nav a.is-active, body.sms-management-focus .sms-page-workspace__nav a.is-active, body.sms-management-focus .sms-profile-settings__nav button.is-active{ background:color-mix(in srgb,var(--sms-primary) 10%,var(--sms-surface)); color:var(--sms-primary); } body.sms-management-focus .sms-group-manage__grid, body.sms-management-focus .sms-page-workspace__grid{ grid-column:2; display:grid; grid-template-columns:minmax(0,1fr); gap:14px; min-inline-size:0; } body.sms-management-focus .sms-group-manage-card, body.sms-management-focus .sms-group-manage-card.is-wide, body.sms-management-focus .sms-page-workspace-card, body.sms-management-focus .sms-page-workspace-card.is-wide{ grid-column:1; inline-size:100%; padding:20px; border-radius:18px; } body.sms-management-focus .sms-group-manage-card textarea, body.sms-management-focus .sms-group-manage-card input[type="text"], body.sms-management-focus .sms-group-manage-card input[type="search"], body.sms-management-focus .sms-group-manage-card select, body.sms-management-focus .sms-page-workspace-form input, body.sms-management-focus .sms-page-workspace-form textarea, body.sms-management-focus .sms-page-team-add input, body.sms-management-focus .sms-page-team-add select{ min-block-size:44px; font-size:13px; } body.sms-management-focus .sms-group-manage-card textarea, body.sms-management-focus .sms-page-workspace-form textarea{min-block-size:112px} body.sms-management-focus .sms-profile-settings{ inline-size:100%; max-inline-size:none; display:grid; grid-template-columns:232px minmax(0,1fr); gap:18px; padding:22px; overflow:visible; border-radius:20px; } body.sms-management-focus .sms-profile-settings__intro, body.sms-management-focus .sms-profile-notice{ grid-column:1/-1; } body.sms-management-focus .sms-profile-settings__intro{ padding:0 0 18px; } body.sms-management-focus .sms-profile-settings__panel{ grid-column:2; margin:0; padding:20px; border:1px solid var(--sms-border); border-radius:18px; background:var(--sms-surface); box-shadow:var(--sms-shadow-sm); } body.sms-management-focus form.sms-profile-settings__panel{ display:grid; } body.sms-management-focus .sms-profile-privacy-panel, body.sms-management-focus .sms-profile-account-panel{ margin-block-start:0; padding-block-start:20px; border-block-start:1px solid var(--sms-border); } body.sms-management-focus .sms-profile-account-panel + .sms-profile-account-panel:not([hidden]){ margin-block-start:14px; } } .sms-inline-media-actions{ position:absolute; z-index:8; inset-inline-end:12px; inset-block-end:12px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; } .sms-inline-media-actions label, .sms-inline-media-actions button{ min-block-size:36px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:7px 11px; border:1px solid color-mix(in srgb,#fff 32%,transparent); border-radius:11px; background:color-mix(in srgb,#111827 82%,transparent); color:#fff; box-shadow:0 8px 24px rgba(15,23,42,.18); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font:inherit; font-size:11px; font-weight:800; cursor:pointer; } .sms-inline-media-actions label:hover, .sms-inline-media-actions button:hover{background:color-mix(in srgb,var(--sms-primary) 82%,#111827)} .sms-inline-media-actions .is-danger{color:#fff} .sms-inline-media-actions input, .sms-inline-avatar-actions input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none} .sms-inline-media-actions .sms-icon{inline-size:16px;block-size:16px} .sms-public-profile__cover, .sms-group-hero__cover, .sms-page-hero__cover{position:relative} .sms-public-profile__cover .sms-inline-media-actions{z-index:12} .sms-public-profile__cover-shade{pointer-events:none} .sms-inline-avatar-actions{ position:absolute; z-index:9; inset-inline-end:-7px; inset-block-end:-7px; display:flex; gap:5px; } .sms-inline-avatar-action, .sms-inline-avatar-actions button{ inline-size:34px; block-size:34px; display:grid; place-items:center; padding:0; border:2px solid var(--sms-surface); border-radius:50%; background:var(--sms-primary); color:#fff; box-shadow:0 7px 18px rgba(15,23,42,.2); cursor:pointer; } .sms-inline-avatar-actions button{background:#7f1d1d;font:inherit;font-weight:900} .sms-inline-avatar-action .sms-icon{inline-size:16px;block-size:16px} .sms-public-profile__avatar, .sms-page-hero__avatar{position:relative;overflow:visible} .sms-inline-media-status{display:block;margin:0 20px 8px;color:var(--sms-muted);font-size:11px} .sms-inline-media-status[data-kind="error"]{color:var(--sms-danger,#b42318)} @media (max-width:1023px){ body.sms-management-focus .sms-app-centre__stream{inline-size:100%} .sms-inline-media-actions{inset-inline-end:8px;inset-block-end:8px;gap:5px} .sms-inline-media-actions label,.sms-inline-media-actions button{min-block-size:34px;padding:6px 9px;font-size:10px} } @media (max-width:767px){ body.sms-management-focus .sms-profile-settings{ display:block; padding:14px; border-radius:16px; } body.sms-management-focus .sms-profile-settings__nav, body.sms-management-focus .sms-group-workspace__nav, body.sms-management-focus .sms-page-workspace__nav{ position:sticky; top:calc(var(--sms-mobile-topbar-height,56px) + 6px); z-index:9; display:flex; gap:5px; overflow-x:auto; padding:6px; scrollbar-width:none; } body.sms-management-focus .sms-profile-settings__nav::-webkit-scrollbar, body.sms-management-focus .sms-group-workspace__nav::-webkit-scrollbar, body.sms-management-focus .sms-page-workspace__nav::-webkit-scrollbar{display:none} body.sms-management-focus .sms-profile-settings__nav button, body.sms-management-focus .sms-group-workspace__nav a, body.sms-management-focus .sms-page-workspace__nav a{ flex:0 0 auto; inline-size:auto; min-block-size:38px; padding:8px 11px; } body.sms-management-focus .sms-profile-settings__nav button::after, body.sms-management-focus .sms-group-workspace__nav a::after, body.sms-management-focus .sms-page-workspace__nav a::after{display:none} body.sms-management-focus .sms-profile-settings__panel{margin-block-start:12px;padding:15px;border-radius:15px} .sms-inline-media-actions{max-inline-size:calc(100% - 16px);justify-content:flex-end} .sms-inline-avatar-actions{inset-inline-end:-4px;inset-block-end:-4px} } .sms-public-profile__avatar>img,.sms-page-hero__avatar>img{border-radius:inherit} [data-sms-cover-frame].is-repositioning>.sms-inline-media-actions{opacity:0;pointer-events:none} /* 1.12.0-beta.45.5.2 — Profile Header Media Actions, phase 1. */ .sms-public-profile__hero{position:relative} .sms-public-profile__avatar-media{ display:grid; place-items:center; inline-size:100%; block-size:100%; overflow:hidden; border-radius:inherit; } .sms-public-profile__avatar-media>img{ display:block; inline-size:100%; block-size:100%; object-fit:cover; } .sms-header-media-control{ position:absolute; z-index:18; } .sms-header-media-control--cover{ inset-block-start:12px; inset-inline-end:12px; } .sms-header-media-control--avatar{ inset-inline-end:-5px; inset-block-end:-5px; } .sms-header-media-input{ position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none; } .sms-header-media-trigger{ appearance:none; min-block-size:36px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:7px 11px; border:1px solid color-mix(in srgb,#fff 30%,transparent); border-radius:11px; background:color-mix(in srgb,#111827 82%,transparent); color:#fff; box-shadow:0 7px 20px rgba(15,23,42,.16); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font:inherit; font-size:11px; font-weight:800; line-height:1; cursor:pointer; } .sms-header-media-trigger:hover, .sms-header-media-trigger:focus-visible{ background:color-mix(in srgb,var(--sms-primary) 82%,#111827); outline:none; } .sms-header-media-trigger .sms-icon{ inline-size:16px; block-size:16px; } .sms-header-media-trigger--icon{ inline-size:34px; block-size:34px; min-block-size:34px; padding:0; border:3px solid var(--sms-surface); border-radius:50%; background:var(--sms-primary); box-shadow:0 6px 16px rgba(15,23,42,.18); } .sms-header-media-trigger--icon:hover, .sms-header-media-trigger--icon:focus-visible{ background:color-mix(in srgb,var(--sms-primary) 82%,#111827); } .sms-header-media-menu{ position:absolute; z-index:30; inset-block-start:calc(100% + 7px); inset-inline-end:0; min-inline-size:190px; display:grid; gap:3px; padding:6px; border:1px solid var(--sms-border); border-radius:14px; background:var(--sms-surface); box-shadow:0 16px 42px rgba(15,23,42,.22); } .sms-header-media-menu[hidden]{display:none!important} .sms-header-media-menu button{ appearance:none; inline-size:100%; min-block-size:38px; display:flex; align-items:center; justify-content:flex-start; gap:9px; padding:8px 10px; border:0; border-radius:9px; background:transparent; color:var(--sms-text); font:inherit; font-size:12px; font-weight:750; text-align:start; cursor:pointer; } .sms-header-media-menu button:hover, .sms-header-media-menu button:focus-visible{ background:var(--sms-surface-soft); outline:none; } .sms-header-media-menu button.is-danger{ color:var(--sms-danger,#b42318); } .sms-header-media-menu button:disabled{ opacity:.55; cursor:progress; } .sms-header-media-menu .sms-icon{ flex:0 0 auto; inline-size:17px; block-size:17px; } .sms-header-media-menu--avatar{ inset-block-start:calc(100% + 8px); min-inline-size:184px; } /* 1.12.0-beta.45.5.3 — Profile header media menus float above clipping contexts. */ .sms-header-media-menu.is-floating{ position:fixed; z-index:100300; inset-block-start:auto; inset-block-end:auto; inset-inline-start:auto; inset-inline-end:auto; margin:0; max-inline-size:min(240px,calc(100vw - 20px)); font-size:12px; } @media(max-width:767px){ .sms-header-media-control--cover{inset-block-start:8px;inset-inline-end:8px} .sms-header-media-control--cover .sms-header-media-trigger{ inline-size:36px; min-block-size:36px; padding:0; border-radius:10px; } .sms-header-media-control--cover .sms-header-media-trigger>span{display:none} .sms-header-media-control--avatar{inset-inline-end:-4px;inset-block-end:-4px} .sms-header-media-trigger--icon{inline-size:32px;block-size:32px;min-block-size:32px} .sms-header-media-menu{min-inline-size:176px} } .sms-public-profile__cover.is-repositioning + .sms-header-media-control--cover{display:none} /* 1.12.0-beta.45.5.4 — Group + Page unified floating header media actions. */ .sms-page-hero__avatar>[data-sms-page-avatar-media]{ display:grid; place-items:center; inline-size:100%; block-size:100%; overflow:hidden; border-radius:inherit; } .sms-page-hero__avatar>[data-sms-page-avatar-media]>img{ display:block; inline-size:100%; block-size:100%; object-fit:cover; } [data-sms-cover-frame].is-repositioning>.sms-header-media-control--cover{display:none} .sms-group-hero__cover>.sms-header-media-control--cover, .sms-page-hero__cover>.sms-header-media-control--cover{z-index:18} /* 1.12.0-beta.45.5.6 — Unified Header Media Controls visual polish. * Profile, Group and Page public headers now share one compact visual language. * Runtime/menu binding is unchanged from beta.45.5.3/.4. */ .sms-header-media-control--cover{ inset-block-start:10px; inset-inline-end:10px; } .sms-header-media-trigger{ min-block-size:34px; gap:6px; padding:6px 10px; border:1px solid rgba(255,255,255,.24); border-radius:10px; background:rgba(15,23,42,.72); color:#fff; box-shadow:0 5px 16px rgba(15,23,42,.14); backdrop-filter:blur(10px) saturate(1.08); -webkit-backdrop-filter:blur(10px) saturate(1.08); font-size:11px; font-weight:760; letter-spacing:0; transition:background-color .14s ease,border-color .14s ease,transform .14s ease,box-shadow .14s ease; } .sms-header-media-trigger:hover{ background:rgba(15,23,42,.86); border-color:rgba(255,255,255,.36); transform:translateY(-1px); box-shadow:0 7px 18px rgba(15,23,42,.18); } .sms-header-media-trigger:focus-visible{ background:rgba(15,23,42,.86); outline:2px solid color-mix(in srgb,var(--sms-primary) 72%,#fff); outline-offset:2px; } .sms-header-media-trigger .sms-icon{ inline-size:15px; block-size:15px; stroke-width:1.9; } .sms-header-media-trigger--icon{ inline-size:31px; block-size:31px; min-block-size:31px; padding:0; border:2px solid var(--sms-surface); border-radius:50%; background:rgba(15,23,42,.82); box-shadow:0 5px 14px rgba(15,23,42,.18); } .sms-header-media-trigger--icon:hover, .sms-header-media-trigger--icon:focus-visible{ background:color-mix(in srgb,var(--sms-primary) 72%,#111827); } .sms-header-media-menu{ min-inline-size:198px; max-inline-size:224px; gap:2px; padding:5px; border:1px solid color-mix(in srgb,var(--sms-border) 82%,transparent); border-radius:12px; background:color-mix(in srgb,var(--sms-surface) 97%,transparent); box-shadow:0 14px 38px rgba(15,23,42,.18),0 2px 8px rgba(15,23,42,.08); backdrop-filter:blur(16px) saturate(1.05); -webkit-backdrop-filter:blur(16px) saturate(1.05); } .sms-header-media-menu button{ min-block-size:36px; gap:8px; padding:7px 9px; border-radius:8px; font-size:12px; font-weight:690; line-height:1.2; } .sms-header-media-menu button:hover, .sms-header-media-menu button:focus-visible{ background:color-mix(in srgb,var(--sms-primary) 8%,var(--sms-surface-soft)); color:var(--sms-text); } .sms-header-media-menu button:focus-visible{ outline:2px solid color-mix(in srgb,var(--sms-primary) 45%,transparent); outline-offset:-2px; } .sms-header-media-menu button.is-danger{ margin-block-start:3px; border-block-start:1px solid var(--sms-border); border-start-start-radius:0; border-start-end-radius:0; color:var(--sms-danger,#b42318); } .sms-header-media-menu button.is-danger:hover, .sms-header-media-menu button.is-danger:focus-visible{ background:color-mix(in srgb,var(--sms-danger,#b42318) 8%,var(--sms-surface)); color:var(--sms-danger,#b42318); } .sms-header-media-menu .sms-icon{ inline-size:16px; block-size:16px; opacity:.92; } .sms-header-media-menu--avatar{ min-inline-size:190px; } .sms-header-media-menu.is-floating{ max-inline-size:min(224px,calc(100vw - 16px)); } .sms-public-profile__avatar .sms-header-media-control--avatar, .sms-page-hero__avatar .sms-header-media-control--avatar{ inset-inline-end:-3px; inset-block-end:-3px; } @media(max-width:767px){ .sms-header-media-control--cover{ inset-block-start:7px; inset-inline-end:7px; } .sms-header-media-control--cover .sms-header-media-trigger{ inline-size:34px; min-block-size:34px; padding:0; border-radius:9px; } .sms-header-media-control--avatar{ inset-inline-end:-2px; inset-block-end:-2px; } .sms-header-media-trigger--icon{ inline-size:30px; block-size:30px; min-block-size:30px; } .sms-header-media-menu, .sms-header-media-menu--avatar{ min-inline-size:188px; } .sms-header-media-menu button{ min-block-size:38px; padding:8px 10px; font-size:12px; } } @media(prefers-reduced-motion:reduce){ .sms-header-media-trigger{transition:none} } /* 1.12.0-beta.45.6 — Online Presence Phase 1: Profile header only. */ .sms-public-profile__avatar[data-sms-presence-handle]{isolation:isolate} .sms-public-profile__avatar[data-sms-presence-handle]::before, .sms-public-profile__avatar[data-sms-presence-handle]::after{ content:""; position:absolute; pointer-events:none; opacity:0; transition:opacity 180ms ease; } .sms-public-profile__avatar[data-sms-presence-online="true"]::before{ inset:-6px; z-index:0; padding:2px; border-radius:50%; background:conic-gradient(from 0deg,rgba(34,197,94,.08),rgba(74,222,128,.95),rgba(45,212,191,.65),rgba(34,197,94,.08) 72%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:drop-shadow(0 0 5px rgba(34,197,94,.48)); animation:sms-presence-ring-spin 5.8s linear infinite; opacity:.9; } .sms-public-profile__avatar[data-sms-presence-online="true"]::after{ z-index:14; inset-inline-start:4px; inset-block-end:4px; inline-size:13px; block-size:13px; border:3px solid var(--sms-surface); border-radius:50%; background:#22c55e; box-shadow:0 0 0 2px rgba(34,197,94,.16),0 0 10px rgba(34,197,94,.58); opacity:1; } .sms-public-profile__avatar[data-sms-presence-handle] .sms-public-profile__avatar-media{position:relative;z-index:2} @keyframes sms-presence-ring-spin{to{transform:rotate(360deg)}} @media(max-width:767px){ .sms-public-profile__avatar[data-sms-presence-online="true"]::before{inset:-5px;padding:2px} .sms-public-profile__avatar[data-sms-presence-online="true"]::after{inline-size:11px;block-size:11px;border-width:2px;inset-inline-start:3px;inset-block-end:3px} } @media(prefers-reduced-motion:reduce){ .sms-public-profile__avatar[data-sms-presence-online="true"]::before{animation:none} } /* 1.12.0-beta.45.6.3 — Online Presence Phase 2: canonical Feed avatars. */ .sms-activity-card__avatar[data-sms-presence-handle]{ position:relative; overflow:visible; isolation:isolate; } .sms-activity-card__avatar[data-sms-presence-handle]>img, .sms-activity-card__avatar[data-sms-presence-handle]>span{ position:relative; z-index:2; inline-size:100%; block-size:100%; border-radius:inherit; } .sms-activity-card__avatar[data-sms-presence-handle]>img{object-fit:cover} .sms-activity-card__avatar[data-sms-presence-handle]>span{ display:grid; place-items:center; margin:0; background:inherit; color:inherit; } .sms-activity-card__avatar[data-sms-presence-handle]::before, .sms-activity-card__avatar[data-sms-presence-handle]::after{ content:""; position:absolute; pointer-events:none; opacity:0; transition:opacity 160ms ease; } .sms-activity-card__avatar[data-sms-presence-online="true"]::before{ inset:-4px; z-index:0; padding:1.5px; border-radius:50%; background:conic-gradient(from 0deg,rgba(34,197,94,.05),rgba(74,222,128,.9),rgba(45,212,191,.58),rgba(34,197,94,.05) 72%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:drop-shadow(0 0 4px rgba(34,197,94,.4)); animation:sms-presence-ring-spin 5.8s linear infinite; opacity:.86; } .sms-activity-card__avatar[data-sms-presence-online="true"]::after{ z-index:4; inset-inline-start:0; inset-block-end:0; inline-size:10px; block-size:10px; border:2px solid var(--sms-surface); border-radius:50%; background:#22c55e; box-shadow:0 0 0 1px rgba(34,197,94,.14),0 0 7px rgba(34,197,94,.48); opacity:1; } .sms-video-stream .sms-activity-card__avatar[data-sms-presence-online="true"]::before{inset:-3px;padding:1px} .sms-video-stream .sms-activity-card__avatar[data-sms-presence-online="true"]::after{ inline-size:7px; block-size:7px; border-width:1.5px; inset-inline-start:-1px; inset-block-end:-1px; } @media(max-width:767px){ .sms-activity-card__avatar[data-sms-presence-online="true"]::before{inset:-3px;padding:1.5px} .sms-activity-card__avatar[data-sms-presence-online="true"]::after{inline-size:9px;block-size:9px;border-width:2px} } @media(prefers-reduced-motion:reduce){ .sms-activity-card__avatar[data-sms-presence-online="true"]::before{animation:none} } /* 1.12.0-beta.45.6.6 — Online Presence Phase 3: canonical Comment + Reply avatars. */ .sms-comment__avatar[data-sms-presence-handle]::before, .sms-comment__avatar[data-sms-presence-handle]::after{ content:""; position:absolute; pointer-events:none; opacity:0; transition:opacity 150ms ease; } .sms-comment__avatar[data-sms-presence-online="true"]::before{ inset:-3px; z-index:0; padding:1.25px; border-radius:50%; background:conic-gradient(from 0deg,rgba(34,197,94,.04),rgba(74,222,128,.9),rgba(45,212,191,.56),rgba(34,197,94,.04) 72%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:drop-shadow(0 0 3px rgba(34,197,94,.38)); animation:sms-presence-ring-spin 5.8s linear infinite; opacity:.84; } .sms-comment__avatar[data-sms-presence-online="true"]::after{ z-index:4; inset-inline-start:-1px; inset-block-end:-1px; inline-size:8px; block-size:8px; border:1.5px solid var(--sms-surface); border-radius:50%; background:#22c55e; box-shadow:0 0 0 1px rgba(34,197,94,.12),0 0 6px rgba(34,197,94,.44); opacity:1; } @media(prefers-reduced-motion:reduce){ .sms-comment__avatar[data-sms-presence-online="true"]::before{animation:none} } /* 1.12.0-beta.45.6.7 — Online Presence Phase 4: Messages + Page Inbox user avatars. */ .sms-message-avatar[data-sms-presence-handle]{ position:relative; overflow:visible; isolation:isolate; } .sms-message-avatar[data-sms-presence-handle]>img{ position:relative; z-index:2; inline-size:100%; block-size:100%; border-radius:inherit; object-fit:cover; } .sms-message-avatar[data-sms-presence-handle]::before, .sms-message-avatar[data-sms-presence-handle]::after{ content:""; position:absolute; pointer-events:none; opacity:0; transition:opacity 150ms ease; } .sms-message-avatar[data-sms-presence-online="true"]::before{ inset:-4px; z-index:0; padding:1.4px; border-radius:50%; background:conic-gradient(from 0deg,rgba(34,197,94,.04),rgba(74,222,128,.9),rgba(45,212,191,.56),rgba(34,197,94,.04) 72%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:drop-shadow(0 0 3px rgba(34,197,94,.38)); animation:sms-presence-ring-spin 5.8s linear infinite; opacity:.84; } .sms-message-avatar[data-sms-presence-online="true"]::after{ z-index:4; inset-inline-start:-1px; inset-block-end:-1px; inline-size:9px; block-size:9px; border:2px solid var(--sms-surface); border-radius:50%; background:#22c55e; box-shadow:0 0 0 1px rgba(34,197,94,.12),0 0 6px rgba(34,197,94,.44); opacity:1; } @media(max-width:767px){ .sms-message-avatar[data-sms-presence-online="true"]::before{inset:-3px;padding:1.25px} .sms-message-avatar[data-sms-presence-online="true"]::after{inline-size:8px;block-size:8px;border-width:1.5px} } @media(prefers-reduced-motion:reduce){ .sms-message-avatar[data-sms-presence-online="true"]::before{animation:none} } /* 1.12.0-beta.45.6.8 — Online Presence Phase 5: People, Network and Group member lists. */ .sms-presence-list-avatar[data-sms-presence-handle]{ position:relative; overflow:visible!important; isolation:isolate; } .sms-presence-list-avatar[data-sms-presence-handle]>img, .sms-presence-list-avatar[data-sms-presence-handle]>span{ position:relative; z-index:2; border-radius:inherit; } .sms-presence-list-avatar[data-sms-presence-handle]>img{ inline-size:100%; block-size:100%; object-fit:cover; } .sms-presence-list-avatar[data-sms-presence-handle]::before, .sms-presence-list-avatar[data-sms-presence-handle]::after{ content:""; position:absolute; pointer-events:none; opacity:0; transition:opacity 150ms ease; } .sms-presence-list-avatar[data-sms-presence-online="true"]::before{ inset:-4px; z-index:0; padding:1.35px; border-radius:50%; background:conic-gradient(from 0deg,rgba(34,197,94,.04),rgba(74,222,128,.9),rgba(45,212,191,.56),rgba(34,197,94,.04) 72%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:drop-shadow(0 0 3px rgba(34,197,94,.38)); animation:sms-presence-ring-spin 5.8s linear infinite; opacity:.84; } .sms-presence-list-avatar[data-sms-presence-online="true"]::after{ z-index:4; inset-inline-start:-1px; inset-block-end:-1px; inline-size:9px; block-size:9px; border:2px solid var(--sms-surface); border-radius:50%; background:#22c55e; box-shadow:0 0 0 1px rgba(34,197,94,.12),0 0 6px rgba(34,197,94,.44); opacity:1; } @media(max-width:767px){ .sms-presence-list-avatar[data-sms-presence-online="true"]::before{inset:-3px;padding:1.2px} .sms-presence-list-avatar[data-sms-presence-online="true"]::after{inline-size:8px;block-size:8px;border-width:1.5px} } @media(prefers-reduced-motion:reduce){ .sms-presence-list-avatar[data-sms-presence-online="true"]::before{animation:none} } /* 1.12.0-beta.45.6.11 — Compact Incognito quick toggle in personal context rail. */ .sms-app-incognito-card{margin:9px 0;padding:9px 10px;border:1px solid var(--sms-border);border-radius:14px;background:var(--sms-surface);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-block-size:50px;box-sizing:border-box} .sms-app-incognito-card__copy{display:flex;min-width:0;flex-direction:column;gap:0} .sms-app-incognito-card__copy strong{color:var(--sms-text);font-size:13px;line-height:1.2;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sms-app-incognito-card__copy small{display:none} .sms-app-incognito-toggle{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 5px 4px 8px;border:1px solid var(--sms-border);border-radius:999px;background:var(--sms-surface-soft);color:var(--sms-muted);font:inherit;font-size:10px;line-height:1;font-weight:850;cursor:pointer;transition:border-color .16s ease,background .16s ease,color .16s ease,opacity .16s ease} .sms-app-incognito-toggle i{position:relative;display:block;width:30px;height:18px;border-radius:999px;background:color-mix(in srgb,var(--sms-muted) 26%,transparent);transition:background .16s ease} .sms-app-incognito-toggle i::after{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--sms-surface);box-shadow:0 1px 4px rgba(15,23,42,.2);transition:transform .16s ease} .sms-app-incognito-toggle.is-active{border-color:color-mix(in srgb,var(--sms-primary) 48%,var(--sms-border));background:color-mix(in srgb,var(--sms-primary) 10%,var(--sms-surface));color:var(--sms-primary)} .sms-app-incognito-toggle.is-active i{background:var(--sms-primary)} .sms-app-incognito-toggle.is-active i::after{transform:translateX(12px)} .sms-app-incognito-toggle:disabled{opacity:.58;cursor:wait} .sms-app-incognito-toggle:focus-visible{outline:3px solid color-mix(in srgb,var(--sms-primary) 30%,transparent);outline-offset:2px} .sms-app-incognito-card__status{grid-column:1/-1;min-height:0;margin-top:-2px;color:var(--sms-muted);font-size:10px;line-height:1.25} .sms-app-incognito-card__status:empty{display:none} @media(max-width:680px){.sms-app-incognito-card{margin-inline:0;padding:8px 9px;min-block-size:52px}.sms-app-incognito-toggle{min-height:40px;padding-inline-start:9px}.sms-app-incognito-card__copy strong{font-size:12.5px}} @media(prefers-reduced-motion:reduce){.sms-app-incognito-toggle,.sms-app-incognito-toggle i,.sms-app-incognito-toggle i::after{transition:none}} /* 1.12.0-beta.45.6.14 — Last Active UX / Messages Phase 2. */ .sms-message-thread__presence{ display:inline-flex; align-items:center; min-block-size:15px; margin-block-start:1px; color:var(--sms-muted); font-size:11px; font-weight:720; line-height:1.2; } .sms-message-thread__presence.is-online{color:var(--sms-success,#16a34a)} .sms-message-thread__presence[hidden]{display:none!important} @media(max-width:767px){.sms-message-thread__presence{font-size:10.5px}} /* 1.12.0-beta.45.6.17 — icon-only mobile bottom navigation. */ @media(max-width:767px){ .sms-mobile-bottom-nav__label{ position:absolute!important; inline-size:1px!important; block-size:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important; } .sms-mobile-bottom-nav{min-block-size:58px;padding-block:5px} .sms-mobile-bottom-nav__item{min-block-size:48px;padding:4px 3px;gap:0} .sms-mobile-bottom-nav__item>.sms-icon, .sms-mobile-bottom-nav__icon-wrap>.sms-icon{ inline-size:26px; block-size:26px; stroke-width:2.15; } .sms-mobile-bottom-nav__item.is-active>.sms-icon, .sms-mobile-bottom-nav__item.is-active .sms-mobile-bottom-nav__icon-wrap>.sms-icon, .sms-app-root[data-open-drawer="context"] .sms-mobile-bottom-nav__item--me>.sms-icon{ transform:scale(1.06); } .sms-mobile-bottom-nav__icon-wrap{inline-size:30px;block-size:30px} .sms-mobile-bottom-nav__badge{inset-block-start:-4px;inset-inline-end:-7px} .sms-mobile-bottom-nav__item--create{padding:0 2px} .sms-mobile-bottom-nav__create-mark{inline-size:50px;block-size:50px;margin-block-start:-17px} .sms-mobile-bottom-nav__create-mark>.sms-icon{inline-size:27px;block-size:27px;stroke-width:2.15} } /* 2.0.8 — Composer draft/upload reliability states. */ .sms-composer-preview[data-status="queued"],.sms-composer-preview[data-status="paused"]{border-color:color-mix(in srgb,var(--sms-primary) 28%,var(--sms-border))}.sms-composer-preview[data-status="paused"] .sms-composer-preview__copy span{color:var(--sms-muted-strong)} /* 2.0.9 — Global Search + granular notification controls. */ .sms-global-search{ position:fixed; z-index:190; inset-block-start:calc(var(--sms-safe-top, env(safe-area-inset-top, 0px)) + 66px); inset-inline-start:50%; transform:translateX(-50%); inline-size:min(720px,calc(100vw - 28px)); max-block-size:min(72vh,680px); overflow:auto; padding:12px; border:1px solid var(--sms-border,#e6e8ef); border-radius:18px; background:var(--sms-surface,#fff); box-shadow:var(--sms-shadow-lg,0 18px 50px rgba(0,0,0,.16)); overscroll-behavior:contain; } .sms-global-search[hidden]{display:none!important} .sms-global-search>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 4px 10px} .sms-global-search>header strong{font-size:.84rem} .sms-global-search__close{display:grid;place-items:center;inline-size:34px;block-size:34px;padding:0;border:1px solid var(--sms-border,#e6e8ef);border-radius:10px;background:var(--sms-surface-soft,#f8f9fc);color:var(--sms-text);font-size:1.25rem;line-height:1;cursor:pointer} .sms-global-search__status{min-block-size:18px;padding:0 4px;color:var(--sms-muted,#6b7280);font-size:.7rem} .sms-global-search__sections{display:grid;gap:10px} .sms-global-search__section{display:grid;gap:6px} .sms-global-search__section h3{margin:0;padding:3px 4px;color:var(--sms-muted-strong,var(--sms-muted,#6b7280));font-size:.66rem;text-transform:uppercase;letter-spacing:.055em} .sms-global-search__list{display:grid;gap:4px} .sms-global-search__item{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;min-block-size:54px;padding:6px 8px;border-radius:12px;color:var(--sms-text);text-decoration:none} .sms-global-search__item:hover,.sms-global-search__item:focus-visible{background:var(--sms-surface-soft,#f8f9fc);outline:none} .sms-global-search__media{display:grid;place-items:center;inline-size:42px;block-size:42px;overflow:hidden;border-radius:12px;background:var(--sms-surface-soft,#f8f9fc);font-size:.78rem;font-weight:800} .sms-global-search__media img{inline-size:100%;block-size:100%;object-fit:cover} .sms-global-search__copy{display:grid;gap:2px;min-inline-size:0} .sms-global-search__copy strong,.sms-global-search__copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .sms-global-search__copy strong{font-size:.75rem} .sms-global-search__copy small{color:var(--sms-muted,#6b7280);font-size:.66rem} .sms-notification-preferences__section{display:grid;gap:7px} .sms-notification-preferences__section>strong{font-size:.72rem} .sms-notification-quiet-hours{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 14px;padding:11px 12px;border:1px solid var(--sms-border,#e6e8ef);border-radius:12px;background:var(--sms-surface-soft,#f8f9fc)} .sms-notification-quiet-hours__toggle{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:750} .sms-notification-quiet-hours__toggle input{inline-size:16px;block-size:16px} .sms-notification-quiet-hours__times{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap} .sms-notification-quiet-hours__times label{display:flex;align-items:center;gap:6px;color:var(--sms-muted,#6b7280);font-size:.66rem} .sms-notification-quiet-hours__times input{min-block-size:34px;padding:5px 7px;border:1px solid var(--sms-border,#e6e8ef);border-radius:9px;background:var(--sms-surface,#fff);color:var(--sms-text)} .sms-notification-quiet-hours>small{grid-column:1/-1;color:var(--sms-muted,#6b7280);font-size:.64rem;line-height:1.4} @media(max-width:767px){ .sms-global-search{inset-block-start:calc(var(--sms-safe-top, env(safe-area-inset-top, 0px)) + 58px);inline-size:calc(100vw - 18px);max-block-size:calc(100vh - var(--sms-safe-top, env(safe-area-inset-top, 0px)) - var(--sms-safe-bottom, env(safe-area-inset-bottom, 0px)) - 76px);padding:9px;border-radius:14px} .sms-global-search__item{grid-template-columns:38px minmax(0,1fr);min-block-size:50px;padding:5px 6px} .sms-global-search__media{inline-size:38px;block-size:38px;border-radius:10px} .sms-notification-quiet-hours{grid-template-columns:1fr;gap:9px} .sms-notification-quiet-hours__times{justify-content:flex-start} } /* SMSocial 2.1.16 — premium navigation icon system refresh */ .sms-app-context-link{ min-block-size:72px; padding:14px 16px; gap:14px; border-radius:22px; border:1px solid color-mix(in srgb,var(--sms-primary) 12%,var(--sms-border)); box-shadow:0 12px 30px rgba(17,24,39,.05); } .sms-app-context-link:hover, .sms-app-context-link:focus-visible{ background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--sms-primary) 3%,#fff) 100%); box-shadow:0 16px 36px rgba(17,24,39,.08); } .sms-app-left-link[aria-current="page"]{ border-color:color-mix(in srgb,var(--sms-primary) 42%,var(--sms-border)); box-shadow:0 0 0 2px color-mix(in srgb,var(--sms-primary) 10%,transparent),0 18px 40px rgba(124,58,237,.10); } .sms-app-context-link>.sms-icon:first-child{ inline-size:46px; block-size:46px; padding:10px; border-radius:16px; background:linear-gradient(145deg,#f6f0ff 0%,#ede9fe 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 18px rgba(124,58,237,.10); color:var(--sms-primary); stroke-width:2.05; } .sms-app-context-link>.sms-icon:last-child{ inline-size:30px; block-size:30px; padding:7px; border-radius:999px; background:color-mix(in srgb,var(--sms-primary) 8%,#fff); color:color-mix(in srgb,var(--sms-primary) 70%,var(--sms-muted)); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sms-primary) 10%,transparent); } .sms-app-context-link span strong{font-size:15px;line-height:1.2;letter-spacing:-.02em} .sms-app-context-link span small{font-size:12px;line-height:1.28} .sms-app-context-link__badge{min-inline-size:26px;block-size:26px;font-size:11px;box-shadow:0 8px 18px rgba(124,58,237,.20)} .sms-app-context-link--logout>.sms-icon:first-child{background:linear-gradient(145deg,#fff1f4 0%,#ffe4ea 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 8px 18px rgba(217,72,95,.12)} .sms-app-context-link--logout>.sms-icon:last-child{background:color-mix(in srgb,#d9485f 8%,#fff);color:#d9485f} .sms-app-left-link[data-sms-route="feed"]>.sms-icon:first-child{background:linear-gradient(145deg,#f2eaff 0%,#e9ddff 100%);color:#7c3aed} .sms-app-left-link[data-sms-route="news"]>.sms-icon:first-child{background:linear-gradient(145deg,#f5f0ff 0%,#ede9fe 100%);color:#8b5cf6} .sms-app-left-link[data-sms-route="groups"]>.sms-icon:first-child, .sms-app-context-link[data-sms-route="groups"]>.sms-icon:first-child, .sms-app-context-link[data-sms-route="network"]>.sms-icon:first-child{background:linear-gradient(145deg,#eafaf2 0%,#dcfce7 100%);color:#16a34a} .sms-app-left-link[data-sms-route="pages"]>.sms-icon:first-child{background:linear-gradient(145deg,#ecf4ff 0%,#dbeafe 100%);color:#2563eb} .sms-app-left-link[data-sms-route="videos"]>.sms-icon:first-child{background:linear-gradient(145deg,#fff1f4 0%,#ffe4ea 100%);color:#e11d48} .sms-app-left-link[data-sms-route="discover"]>.sms-icon:first-child{background:linear-gradient(145deg,#fff6e8 0%,#ffedd5 100%);color:#ea580c} .sms-app-left-link[data-sms-route="people"]>.sms-icon:first-child{background:linear-gradient(145deg,#ecfeff 0%,#e0f2fe 100%);color:#0891b2} .sms-app-left-link[data-sms-route="events"]>.sms-icon:first-child{background:linear-gradient(145deg,#f3edff 0%,#ede9fe 100%);color:#7c3aed} .sms-app-left-link[data-sms-route="marketplace"]>.sms-icon:first-child{background:linear-gradient(145deg,#edfdf4 0%,#dcfce7 100%);color:#16a34a} .sms-app-left-link[data-sms-route="learn"]>.sms-icon:first-child{background:linear-gradient(145deg,#eef2ff 0%,#e0e7ff 100%);color:#4f46e5} .sms-app-context-link[data-sms-route="profile"]>.sms-icon:first-child, .sms-app-context-link[data-sms-route="home"]>.sms-icon:first-child{background:linear-gradient(145deg,#f3edff 0%,#ede9fe 100%);color:#7c3aed} .sms-app-context-link[data-sms-route="notifications"]>.sms-icon:first-child{background:linear-gradient(145deg,#fff1f4 0%,#ffe4ea 100%);color:#ec4899} .sms-app-context-link[data-sms-route="messages"]>.sms-icon:first-child{background:linear-gradient(145deg,#f5f3ff 0%,#ede9fe 100%);color:#7c3aed} .sms-app-context-link[data-sms-route="saved"]>.sms-icon:first-child{background:linear-gradient(145deg,#f7f4ff 0%,#ede9fe 100%);color:#8b5cf6} .sms-app-context-link[data-sms-route="recent"]>.sms-icon:first-child{background:linear-gradient(145deg,#f5f3ff 0%,#ede9fe 100%);color:#7c3aed} .sms-app-context-link[data-sms-route="settings"]>.sms-icon:first-child{background:linear-gradient(145deg,#f5f3ff 0%,#ede9fe 100%);color:#7c3aed} .sms-app-hero__icon, .sms-app-context-card__icon{ inline-size:56px; block-size:56px; border-radius:18px; background:linear-gradient(145deg,#f5f0ff 0%,#ede9fe 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 10px 24px rgba(124,58,237,.10); } .sms-app-hero__icon .sms-icon, .sms-app-context-card__icon .sms-icon{ inline-size:28px; block-size:28px; stroke-width:2.05; } @media(max-width:1040px){ .sms-app-context-link{min-block-size:68px;padding:13px 14px;border-radius:20px} .sms-app-context-link>.sms-icon:first-child{inline-size:42px;block-size:42px;padding:9px;border-radius:15px} } /* SMSocial 2.1.18 — clearer compact navigation icons */ .sms-app-context-link>.sms-icon:first-child{inline-size:30px;block-size:30px;padding:6px;border-radius:12px}.sms-app-context-link>.sms-icon:last-child{inline-size:20px;block-size:20px;padding:4px}.sms-app-context-link>.sms-icon:first-child *,.sms-app-context-link>.sms-icon:last-child *{stroke-width:2.15}.sms-app-context-link span strong{font-size:14px}.sms-app-context-link span small{font-size:11px}.sms-app-context-link{min-block-size:68px}.sms-app-hero__icon,.sms-app-context-card__icon{inline-size:52px;block-size:52px}.sms-app-hero__icon .sms-icon,.sms-app-context-card__icon .sms-icon{inline-size:26px;block-size:26px}.sms-app-left-link>.sms-icon:first-child{box-shadow:inset 0 0 0 1px rgba(124,58,237,.06),0 6px 14px rgba(124,58,237,.08)}@media(max-width:1040px){.sms-app-context-link>.sms-icon:first-child{inline-size:28px;block-size:28px;padding:5px}.sms-app-context-link>.sms-icon:last-child{inline-size:18px;block-size:18px;padding:3px}} /* SMSocial 2.1.19 — left navigation icon parity hotfix * The left rail had older high-specificity 19px/15px rules that overrode * the premium navigation system. Match the proven right-side dimensions. */ .sms-app-rail--left .sms-app-left-link > .sms-icon:first-child{ inline-size:30px; block-size:30px; } .sms-app-rail--left .sms-app-left-link > .sms-icon:last-child{ inline-size:20px; block-size:20px; } @media(max-width:1040px){ .sms-app-rail--left .sms-app-left-link > .sms-icon:first-child{ inline-size:28px; block-size:28px; } .sms-app-rail--left .sms-app-left-link > .sms-icon:last-child{ inline-size:18px; block-size:18px; } } /* SMSocial 2.1.20 — Feed composer Story/Video shortcuts + three latest news */ .sms-feed-composer-shortcuts{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.95fr);gap:12px;margin-top:0}.sms-composer>.sms-feed-composer-shortcuts{margin-top:12px}.sms-feed-shortcuts-slot--above-composer{margin-bottom:12px}.sms-feed-shortcuts-slot--below-composer{margin-top:-2px;margin-bottom:14px}.sms-feed-shortcuts-slot--after-posts{margin:0} .sms-feed-composer-shortcuts__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0} .sms-feed-shortcut-card{position:relative;min-height:138px;padding:16px;display:grid;align-content:end;justify-items:start;gap:7px;overflow:hidden;border:0;border-radius:18px;color:#fff;text-align:left;font:inherit;cursor:pointer;box-shadow:0 10px 26px rgba(29,35,54,.10);transition:transform .16s ease,box-shadow .16s ease} .sms-feed-shortcut-card:hover,.sms-feed-shortcut-card:focus-visible{transform:translateY(-1px);box-shadow:0 14px 32px rgba(29,35,54,.14);outline:2px solid color-mix(in srgb,#fff 72%,transparent);outline-offset:2px} .sms-feed-shortcut-card--story{background:linear-gradient(145deg,#7657f4 0%,#955bf1 48%,#b565e7 100%)} .sms-feed-shortcut-card--video{background:linear-gradient(145deg,#ef477f 0%,#f1606d 48%,#fb8a45 100%)} .sms-feed-shortcut-card__plus{position:absolute;top:12px;left:12px;width:30px;height:30px;display:grid;place-items:center;border-radius:999px;background:#fff;color:#111827;font-size:22px;font-weight:600;line-height:1;box-shadow:0 5px 14px rgba(0,0,0,.12)} .sms-feed-shortcut-card__icon{position:absolute;inset:14px 14px auto auto;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.94);color:#7c3aed;box-shadow:0 8px 20px rgba(0,0,0,.10)} .sms-feed-shortcut-card--video .sms-feed-shortcut-card__icon{color:#e94270} .sms-feed-shortcut-card__icon .sms-icon{width:23px;height:23px} .sms-feed-shortcut-card__copy{display:grid;gap:2px;position:relative;z-index:1} .sms-feed-shortcut-card__copy strong{font-size:16px;line-height:1.15;letter-spacing:-.02em} .sms-feed-shortcut-card__copy small{font-size:11px;line-height:1.25;color:rgba(255,255,255,.90)} .sms-feed-top-news{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;min-width:0} .sms-feed-top-news__item{display:grid;grid-template-columns:86px minmax(0,1fr);align-items:center;gap:10px;min-height:0;padding:7px 9px 7px 7px;border:1px solid var(--sms-border);border-radius:14px;background:var(--sms-surface);color:var(--sms-text);text-decoration:none!important;box-shadow:var(--sms-shadow-sm);transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease} .sms-feed-top-news__item:hover,.sms-feed-top-news__item:focus-visible{transform:translateY(-1px);border-color:color-mix(in srgb,var(--sms-primary) 28%,var(--sms-border));box-shadow:0 10px 24px color-mix(in srgb,var(--sms-text) 8%,transparent);outline:none} .sms-feed-top-news__thumb{display:block;width:86px;aspect-ratio:16/9;overflow:hidden;border-radius:10px;background:var(--sms-surface-soft)} .sms-feed-top-news__thumb img{display:block;width:100%;height:100%;object-fit:cover} .sms-feed-top-news__thumb.is-placeholder{display:grid;place-items:center;color:var(--sms-primary);background:linear-gradient(145deg,var(--sms-primary-soft),var(--sms-surface-soft))} .sms-feed-top-news__thumb.is-placeholder .sms-icon{width:21px;height:21px} .sms-feed-top-news__item strong{display:-webkit-box;overflow:hidden;color:var(--sms-text);font-size:12px;line-height:1.28;font-weight:800;letter-spacing:-.01em;-webkit-box-orient:vertical;-webkit-line-clamp:3} @media(max-width:900px){.sms-feed-composer-shortcuts{grid-template-columns:1fr}.sms-feed-shortcut-card{min-height:112px}.sms-feed-top-news{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none}.sms-feed-top-news__item{grid-template-columns:70px minmax(0,1fr)}.sms-feed-top-news__thumb{width:70px}} @media(max-width:620px){.sms-feed-composer-shortcuts{gap:9px}.sms-composer>.sms-feed-composer-shortcuts{margin-top:9px}.sms-feed-shortcuts-slot--above-composer{margin-bottom:9px}.sms-feed-shortcuts-slot--below-composer{margin-top:-1px;margin-bottom:10px}.sms-feed-shortcuts-slot--after-posts{margin:0}.sms-feed-composer-shortcuts__actions{gap:8px}.sms-feed-shortcut-card{min-height:92px;padding:12px;border-radius:15px}.sms-feed-shortcut-card__plus{top:9px;left:9px;width:25px;height:25px;font-size:18px}.sms-feed-shortcut-card__icon{top:9px;right:9px;width:37px;height:37px}.sms-feed-shortcut-card__icon .sms-icon{width:19px;height:19px}.sms-feed-shortcut-card__copy strong{font-size:14px}.sms-feed-shortcut-card__copy small{font-size:10px}.sms-feed-top-news{grid-template-columns:1fr;gap:6px}.sms-feed-top-news__item{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:96px;padding:6px;border-radius:12px}.sms-feed-top-news__thumb{width:100%}.sms-feed-top-news__item strong{font-size:11px;-webkit-line-clamp:4}} /* SMSocial 2.1.22 — category-driven Classifieds form */ .sms-marketplace-create-dialog [data-sms-classified-field][hidden], .sms-marketplace-create-dialog [data-sms-classified-meta][hidden]{display:none!important} .sms-classified-category-field select{font-weight:750;border-color:color-mix(in srgb,var(--sms-primary,#6d5dfc) 24%,var(--sms-border,#dfe3ea));background:color-mix(in srgb,var(--sms-primary,#6d5dfc) 3%,#fff)} .sms-marketplace-create-dialog [data-sms-classified-meta]{animation:sms-classified-field-in .16s ease both} @keyframes sms-classified-field-in{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.sms-marketplace-create-dialog [data-sms-classified-meta]{animation:none}} /* SMSocial 2.1.23 — Classifieds browse and filters */ .sms-classified-category-nav{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}.sms-classified-category-nav::-webkit-scrollbar{display:none}.sms-classified-category-chip{flex:0 0 auto;padding:9px 13px;border:1px solid var(--sms-border);border-radius:999px;background:var(--sms-surface);color:var(--sms-muted-strong);font-size:12px;font-weight:800;text-decoration:none;white-space:nowrap;box-shadow:var(--sms-shadow-sm);transition:.16s ease}.sms-classified-category-chip:hover,.sms-classified-category-chip:focus-visible{transform:translateY(-1px);border-color:color-mix(in srgb,var(--sms-primary) 34%,var(--sms-border));color:var(--sms-primary)}.sms-classified-category-chip.is-active{background:var(--sms-primary);border-color:var(--sms-primary);color:#fff;box-shadow:0 8px 22px color-mix(in srgb,var(--sms-primary) 24%,transparent)} .sms-classified-filter-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:14px;border:1px solid var(--sms-border);border-radius:18px;background:color-mix(in srgb,var(--sms-surface) 94%,var(--sms-primary-soft));box-shadow:var(--sms-shadow-sm)}.sms-classified-filter-bar label{display:grid;gap:5px;min-width:0}.sms-classified-filter-bar label.is-wide{grid-column:span 2}.sms-classified-filter-bar label>span{font-size:10px;font-weight:850;color:var(--sms-muted);letter-spacing:.03em}.sms-classified-filter-bar input,.sms-classified-filter-bar select{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--sms-border);border-radius:11px;background:var(--sms-surface);color:var(--sms-text);font:inherit;font-size:12px}.sms-classified-filter-bar [hidden]{display:none!important}.sms-classified-filter-bar__actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}.sms-classified-results-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 2px;color:var(--sms-muted);font-size:12px}.sms-classified-results-heading strong{color:var(--sms-text);font-size:13px}.sms-classified-results-heading span{padding:5px 8px;border-radius:999px;background:var(--sms-primary-soft);color:var(--sms-primary);font-weight:800} .sms-marketplace-card__media{position:relative}.sms-classified-card__category{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--sms-surface) 92%,transparent);color:var(--sms-text);font-size:10px;font-weight:850;box-shadow:0 3px 12px rgba(15,23,42,.12);backdrop-filter:blur(8px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sms-classified-card__meta{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0}.sms-classified-card__meta span{padding:4px 7px;border-radius:999px;background:var(--sms-primary-soft);color:var(--sms-primary);font-size:9.5px;font-weight:800;line-height:1.2}.sms-classified-card__deposit{display:block;margin-top:3px;color:var(--sms-muted-strong)!important;font-weight:700} @media(max-width:900px){.sms-classified-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.sms-classified-filter-bar{grid-template-columns:1fr;padding:12px}.sms-classified-filter-bar label.is-wide{grid-column:auto}.sms-classified-filter-bar__actions{grid-column:auto;display:grid;grid-template-columns:1fr 1fr}.sms-classified-filter-bar__actions .sms-profile-button{justify-content:center}.sms-classified-category-nav{margin-inline:-2px}} /* SMSocial 2.1.25 — classifieds category card grid */ .sms-classified-category-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;overflow:visible;padding:0;margin:0 0 14px;scrollbar-width:auto} .sms-classified-category-nav::-webkit-scrollbar{display:none} .sms-classified-category-card{display:flex;align-items:center;gap:12px;min-width:0;padding:14px 16px;border:1px solid color-mix(in srgb,var(--sms-primary) 16%,var(--sms-border));border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--sms-surface) 95%,#fff) 0%,color-mix(in srgb,var(--sms-primary-soft) 32%,#fff) 100%);box-shadow:var(--sms-shadow-sm);color:var(--sms-text);text-decoration:none;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease} .sms-classified-category-card:hover,.sms-classified-category-card:focus-visible{transform:translateY(-1px);border-color:color-mix(in srgb,var(--sms-primary) 34%,var(--sms-border));box-shadow:0 14px 32px color-mix(in srgb,var(--sms-primary) 14%,transparent)} .sms-classified-category-card__icon{flex:0 0 auto;display:grid;place-items:center;inline-size:40px;block-size:40px;border-radius:14px;background:color-mix(in srgb,var(--sms-primary) 10%,#fff);color:var(--sms-primary);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sms-primary) 8%,transparent)} .sms-classified-category-card__icon .sms-icon{inline-size:20px;block-size:20px;stroke-width:2.1} .sms-classified-category-card__label{display:block;min-width:0;font-size:14px;font-weight:800;line-height:1.2;color:inherit} .sms-classified-category-card.is-active{background:linear-gradient(135deg,var(--sms-primary) 0%,color-mix(in srgb,var(--sms-primary) 75%,#b054ff) 100%);border-color:var(--sms-primary);color:#fff;box-shadow:0 18px 38px color-mix(in srgb,var(--sms-primary) 30%,transparent)} .sms-classified-category-card.is-active .sms-classified-category-card__icon{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} @media(max-width:1100px){.sms-classified-category-nav{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){.sms-classified-category-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.sms-classified-category-card{padding:13px 14px;border-radius:20px}.sms-classified-category-card__icon{inline-size:36px;block-size:36px;border-radius:12px}.sms-classified-category-card__label{font-size:13px}} @media(max-width:520px){.sms-classified-category-nav{grid-template-columns:1fr}} /* SMSocial 2.1.26 — classifieds category cards compact gradient refinement */ .sms-classified-category-nav{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 12px} .sms-classified-category-card{gap:10px;min-block-size:72px;padding:10px 13px;border-radius:18px;border:1px solid color-mix(in srgb,var(--sms-primary) 12%,var(--sms-border));background:linear-gradient(135deg,color-mix(in srgb,var(--sms-primary) 12%,#ffffff) 0%,#ffffff 52%,color-mix(in srgb,var(--sms-success,#148052) 12%,#ffffff) 100%);box-shadow:0 10px 24px rgba(22,28,45,.05)} .sms-classified-category-card:hover,.sms-classified-category-card:focus-visible{transform:translateY(-1px);border-color:color-mix(in srgb,var(--sms-success,#148052) 22%,color-mix(in srgb,var(--sms-primary) 22%,var(--sms-border)));box-shadow:0 14px 28px color-mix(in srgb,var(--sms-primary) 10%,transparent)} .sms-classified-category-card__icon{inline-size:34px;block-size:34px;border-radius:11px;background:linear-gradient(135deg,color-mix(in srgb,var(--sms-primary) 14%,#ffffff) 0%,color-mix(in srgb,var(--sms-success,#148052) 12%,#ffffff) 100%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sms-primary) 7%,var(--sms-success,#148052))} .sms-classified-category-card__icon .sms-icon{inline-size:17px;block-size:17px;stroke-width:2} .sms-classified-category-card__label{font-size:12px;line-height:1.18;font-weight:800} .sms-classified-category-card.is-active{background:linear-gradient(135deg,color-mix(in srgb,var(--sms-primary) 88%,#8b73ff) 0%,color-mix(in srgb,var(--sms-success,#148052) 72%,var(--sms-primary) 28%) 62%,#ffffff 160%);border-color:color-mix(in srgb,var(--sms-primary) 38%,var(--sms-success,#148052));color:#fff;box-shadow:0 16px 32px color-mix(in srgb,var(--sms-primary) 18%,transparent)} .sms-classified-category-card.is-active .sms-classified-category-card__icon{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} @media(max-width:1100px){.sms-classified-category-card{min-block-size:68px;padding:10px 12px}.sms-classified-category-card__label{font-size:11.5px}} @media(max-width:760px){.sms-classified-category-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.sms-classified-category-card{min-block-size:64px;padding:9px 11px;border-radius:16px}.sms-classified-category-card__icon{inline-size:32px;block-size:32px}.sms-classified-category-card__label{font-size:11px}} @media(max-width:520px){.sms-classified-category-nav{grid-template-columns:1fr}.sms-classified-category-card{min-block-size:60px}} /* SMSocial 2.1.27 — classifieds category cards low-profile height */ .sms-classified-category-nav{gap:9px;margin-block-end:10px} .sms-classified-category-card{gap:8px;min-block-size:54px;padding:7px 11px;border-radius:15px} .sms-classified-category-card__icon{inline-size:28px;block-size:28px;border-radius:9px} .sms-classified-category-card__icon .sms-icon{inline-size:15px;block-size:15px} .sms-classified-category-card__label{font-size:11.5px;line-height:1.12} @media(max-width:1100px){.sms-classified-category-card{min-block-size:52px;padding:6px 10px}.sms-classified-category-card__icon{inline-size:27px;block-size:27px}.sms-classified-category-card__label{font-size:11px}} @media(max-width:760px){.sms-classified-category-nav{gap:8px}.sms-classified-category-card{min-block-size:50px;padding:6px 9px;border-radius:14px}.sms-classified-category-card__icon{inline-size:26px;block-size:26px}.sms-classified-category-card__label{font-size:10.8px}} @media(max-width:520px){.sms-classified-category-nav{grid-template-columns:1fr}.sms-classified-category-card{min-block-size:48px}} /* SMSocial 2.1.28 — marketplace create dialog spacious desktop redesign */ .sms-marketplace-photo-control{display:grid;gap:10px} .sms-marketplace-photo-preview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px;padding:10px;border:1px dashed color-mix(in srgb,var(--sms-primary) 28%,var(--sms-border));border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--sms-primary) 4%,#fff) 0%,color-mix(in srgb,var(--sms-success,#148052) 4%,#fff) 100%)} .sms-marketplace-photo-placeholder{min-block-size:94px;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.86);color:var(--sms-muted-strong);font-weight:800;text-align:center} .sms-marketplace-photo-placeholder .sms-icon{inline-size:22px;block-size:22px;color:var(--sms-primary)} .sms-marketplace-existing-photos{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px} .sms-marketplace-existing-photo{position:relative;display:block;aspect-ratio:1;border-radius:14px;overflow:hidden;border:1px solid var(--sms-border);background:#fff} .sms-marketplace-existing-photo img{width:100%;height:100%;object-fit:cover;display:block} .sms-marketplace-existing-photo button{position:absolute;top:6px;right:6px;inline-size:24px;block-size:24px;border:0;border-radius:999px;background:rgba(17,24,39,.72);color:#fff;font-size:15px;line-height:1;cursor:pointer} @media(min-width:768px){ .sms-marketplace-create-modal{padding:24px;place-items:center} .sms-marketplace-create-dialog{width:min(1040px,calc(100vw - 48px));max-width:1040px;max-height:min(860px,calc(100dvh - 40px));display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;border-radius:24px;border:1px solid color-mix(in srgb,var(--sms-primary) 10%,var(--sms-border));box-shadow:0 32px 90px rgba(15,23,42,.22);background:linear-gradient(180deg,#ffffff 0%,color-mix(in srgb,var(--sms-primary-soft) 38%,#fff) 100%)} .sms-marketplace-create-dialog>header{padding:18px 20px 16px;border-bottom:1px solid color-mix(in srgb,var(--sms-primary) 8%,var(--sms-border));background:linear-gradient(135deg,color-mix(in srgb,var(--sms-primary) 7%,#fff) 0%,#fff 55%,color-mix(in srgb,var(--sms-success,#148052) 6%,#fff) 100%)} .sms-marketplace-create-dialog>header span{font-size:11px;letter-spacing:.12em;color:var(--sms-primary);font-weight:900} .sms-marketplace-create-dialog>header h2{margin:4px 0 0;font-size:33px;line-height:1.05;letter-spacing:-.03em} .sms-marketplace-create-dialog>header button{width:48px;height:48px;border-radius:14px;background:#fff;box-shadow:0 10px 24px rgba(15,23,42,.08);font-size:24px} .sms-marketplace-create-dialog form{overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 16px;padding:18px 20px 20px;background:transparent} .sms-marketplace-create-dialog .is-wide{grid-column:1/-1} .sms-marketplace-create-dialog label{gap:6px} .sms-marketplace-create-dialog label>span{font-size:12px;font-weight:850;color:var(--sms-muted-strong)} .sms-marketplace-create-dialog input:not([type="file"]),.sms-marketplace-create-dialog textarea,.sms-marketplace-create-dialog select{min-height:46px;padding:10px 13px;border-radius:14px;border:1px solid color-mix(in srgb,var(--sms-primary) 8%,var(--sms-border));background:rgba(255,255,255,.9);font-size:14px;line-height:1.35;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)} .sms-marketplace-create-dialog textarea{min-height:96px;max-height:180px} .sms-marketplace-create-dialog input[type="file"]{min-height:44px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--sms-primary) 8%,var(--sms-border));border-radius:14px;background:#fff;font-size:13px} .sms-marketplace-create-actions{position:sticky;bottom:-20px;z-index:3;margin:2px -20px -20px;padding:14px 20px 16px;border-top:1px solid color-mix(in srgb,var(--sms-primary) 8%,var(--sms-border));background:rgba(255,255,255,.96);backdrop-filter:blur(10px)} .sms-marketplace-create-actions .sms-profile-button{min-height:48px;padding:10px 16px;border-radius:14px;font-size:14px;font-weight:800} .sms-marketplace-create-dialog small[data-sms-marketplace-status]{font-size:12px;color:var(--sms-muted)} } @media(min-width:768px) and (max-width:980px){.sms-marketplace-create-dialog{width:min(900px,calc(100vw - 40px))}.sms-marketplace-create-dialog form{grid-template-columns:repeat(2,minmax(0,1fr))}} /* SMSocial 2.1.29 — inline marketplace create panel */ .sms-marketplace-create-panel{position:relative;z-index:auto;display:block;margin:18px 0 4px;padding:0;background:transparent;backdrop-filter:none} .sms-marketplace-create-panel[hidden]{display:none!important} .sms-marketplace-create-panel__card{width:100%;max-width:none;max-height:none;overflow:visible;border:1px solid color-mix(in srgb,var(--sms-primary) 10%,var(--sms-border));border-radius:22px;background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--sms-primary-soft) 30%,#fff) 100%);box-shadow:0 18px 46px rgba(15,23,42,.08)} .sms-marketplace-create-panel__card>header{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 15px;border-bottom:1px solid color-mix(in srgb,var(--sms-primary) 8%,var(--sms-border));background:linear-gradient(135deg,color-mix(in srgb,var(--sms-primary) 7%,#fff) 0%,#fff 58%,color-mix(in srgb,var(--sms-success,#148052) 6%,#fff) 100%);border-radius:22px 22px 0 0} .sms-marketplace-create-panel__card>header span{display:block;color:var(--sms-primary);font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase} .sms-marketplace-create-panel__card>header h2{margin:4px 0 0;font-size:26px;line-height:1.08;letter-spacing:-.025em} .sms-marketplace-create-panel__card>header button{display:grid;place-items:center;inline-size:40px;block-size:40px;min-inline-size:40px;border:1px solid var(--sms-border);border-radius:12px;background:#fff;color:var(--sms-text);font-size:21px;line-height:1;cursor:pointer;box-shadow:0 8px 20px rgba(15,23,42,.06)} .sms-marketplace-create-panel__card form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 15px;padding:18px 20px 20px;overflow:visible} .sms-marketplace-create-panel__card .is-wide{grid-column:1/-1} .sms-marketplace-create-panel__card label{display:grid;gap:5px;min-width:0} .sms-marketplace-create-panel__card label>span{font-size:11px;font-weight:850;color:var(--sms-muted-strong)} .sms-marketplace-create-panel__card input:not([type="file"]),.sms-marketplace-create-panel__card select,.sms-marketplace-create-panel__card textarea{width:100%;min-height:42px;padding:8px 11px;border:1px solid color-mix(in srgb,var(--sms-primary) 8%,var(--sms-border));border-radius:12px;background:#fff;color:var(--sms-text);font:inherit;font-size:13px;line-height:1.35;outline:none} .sms-marketplace-create-panel__card input:focus,.sms-marketplace-create-panel__card select:focus,.sms-marketplace-create-panel__card textarea:focus{border-color:color-mix(in srgb,var(--sms-primary) 48%,var(--sms-border));box-shadow:0 0 0 3px color-mix(in srgb,var(--sms-primary) 10%,transparent)} .sms-marketplace-create-panel__card textarea{min-height:88px;resize:vertical} .sms-marketplace-create-panel__card input[type="file"]{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--sms-border);border-radius:12px;background:#fff;font-size:12px} .sms-marketplace-create-panel__card .sms-marketplace-photo-preview-grid{min-height:90px} .sms-marketplace-create-panel__card .sms-marketplace-photo-placeholder{min-block-size:72px} .sms-marketplace-create-panel__card .sms-marketplace-create-actions{position:static;grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;margin:2px 0 0;padding:14px 0 0;border-top:1px solid color-mix(in srgb,var(--sms-primary) 7%,var(--sms-border));background:transparent;backdrop-filter:none} .sms-marketplace-create-panel__card .sms-marketplace-create-actions .sms-profile-button{min-height:40px;padding:8px 14px;border-radius:11px;font-size:12px} @media(max-width:980px){.sms-marketplace-create-panel__card form{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.sms-marketplace-create-panel{margin-top:12px}.sms-marketplace-create-panel__card{border-radius:18px}.sms-marketplace-create-panel__card>header{padding:14px 15px 12px;border-radius:18px 18px 0 0}.sms-marketplace-create-panel__card>header h2{font-size:21px}.sms-marketplace-create-panel__card form{grid-template-columns:1fr;gap:10px;padding:14px 15px 16px}.sms-marketplace-create-panel__card .is-wide{grid-column:auto}.sms-marketplace-create-panel__card .sms-marketplace-create-actions{display:grid;grid-template-columns:1fr 1fr}.sms-marketplace-create-panel__card .sms-marketplace-create-actions .sms-profile-button{justify-content:center}} /* SMSocial 2.1.30 — classifieds mobile two-up category grid */ @media(max-width:520px){ .sms-classified-category-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-block-end:10px} .sms-classified-category-card{min-block-size:46px;padding:6px 8px;border-radius:13px;gap:7px} .sms-classified-category-card__icon{inline-size:24px;block-size:24px;border-radius:8px} .sms-classified-category-card__icon .sms-icon{inline-size:13px;block-size:13px} .sms-classified-category-card__label{font-size:10.4px;line-height:1.08;letter-spacing:-.01em} } /* SMSocial 2.2.0 — inline Events creation screen */ .sms-event-create-panel{position:relative;z-index:auto;display:block;margin:18px 0 4px;padding:0;background:transparent;backdrop-filter:none} .sms-event-create-panel[hidden]{display:none!important} .sms-event-create-panel__card{width:100%;max-width:none;overflow:visible;border:1px solid color-mix(in srgb,var(--sms-primary) 10%,var(--sms-border));border-radius:22px;background:linear-gradient(180deg,#fff 0%,color-mix(in srgb,var(--sms-primary-soft) 28%,#fff) 100%);box-shadow:0 18px 46px rgba(15,23,42,.08)} .sms-event-create-panel__card>header{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 20px 15px;border-bottom:1px solid color-mix(in srgb,var(--sms-primary) 8%,var(--sms-border));background:linear-gradient(135deg,color-mix(in srgb,var(--sms-primary) 7%,#fff) 0%,#fff 58%,color-mix(in srgb,var(--sms-success,#148052) 6%,#fff) 100%);border-radius:22px 22px 0 0} .sms-event-create-panel__card>header span{display:block;color:var(--sms-primary);font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase} .sms-event-create-panel__card>header h2{margin:4px 0 3px;font-size:26px;line-height:1.08;letter-spacing:-.025em} .sms-event-create-panel__card>header p{margin:0;color:var(--sms-muted);font-size:12px;line-height:1.45} .sms-event-create-panel__card>header button{display:grid;place-items:center;inline-size:40px;block-size:40px;min-inline-size:40px;border:1px solid var(--sms-border);border-radius:12px;background:#fff;color:var(--sms-text);font-size:21px;line-height:1;cursor:pointer;box-shadow:0 8px 20px rgba(15,23,42,.06)} .sms-event-create-panel__card form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 15px;padding:18px 20px 20px;overflow:visible} .sms-event-create-panel__card .is-wide{grid-column:1/-1} .sms-event-create-panel__card label{display:grid;gap:5px;min-width:0;font-weight:750} .sms-event-create-panel__card label>span{font-size:11px;font-weight:850;color:var(--sms-muted-strong)} .sms-event-create-panel__card input:not([type="file"]),.sms-event-create-panel__card select,.sms-event-create-panel__card textarea{width:100%;min-height:42px;padding:8px 11px;border:1px solid color-mix(in srgb,var(--sms-primary) 8%,var(--sms-border));border-radius:12px;background:#fff;color:var(--sms-text);font:inherit;font-size:13px;line-height:1.35;outline:none;box-sizing:border-box} .sms-event-create-panel__card input:focus,.sms-event-create-panel__card select:focus,.sms-event-create-panel__card textarea:focus{border-color:color-mix(in srgb,var(--sms-primary) 48%,var(--sms-border));box-shadow:0 0 0 3px color-mix(in srgb,var(--sms-primary) 10%,transparent)} .sms-event-create-panel__card textarea{min-height:92px;resize:vertical} .sms-event-create-panel__card input[type="file"]{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--sms-border);border-radius:12px;background:#fff;font-size:12px} .sms-event-create-panel__card .sms-event-cover-picker{grid-template-columns:92px minmax(0,1fr);gap:10px;padding:9px;border-radius:14px;background:color-mix(in srgb,var(--sms-primary) 3%,#fff)} .sms-event-create-panel__card .sms-event-cover-preview{inline-size:92px;block-size:64px;border-radius:10px} .sms-event-create-panel__card .sms-event-create-actions{position:static;grid-column:1/-1;display:flex;justify-content:flex-end;gap:10px;margin:2px 0 0;padding:14px 0 0;border-top:1px solid color-mix(in srgb,var(--sms-primary) 7%,var(--sms-border));background:transparent;backdrop-filter:none} .sms-event-create-panel__card .sms-event-create-actions .sms-profile-button{min-height:40px;padding:8px 14px;border-radius:11px;font-size:12px} @media(max-width:980px){.sms-event-create-panel__card form{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:640px){.sms-event-create-panel{margin-top:12px}.sms-event-create-panel__card{border-radius:18px}.sms-event-create-panel__card>header{padding:14px 15px 12px;border-radius:18px 18px 0 0}.sms-event-create-panel__card>header h2{font-size:21px}.sms-event-create-panel__card>header p{font-size:11px}.sms-event-create-panel__card form{grid-template-columns:1fr;gap:10px;padding:14px 15px 16px}.sms-event-create-panel__card .is-wide{grid-column:auto}.sms-event-create-panel__card .sms-event-cover-picker{grid-template-columns:72px minmax(0,1fr)}.sms-event-create-panel__card .sms-event-cover-preview{inline-size:72px;block-size:52px}.sms-event-create-panel__card .sms-event-create-actions{display:grid;grid-template-columns:1fr 1fr}.sms-event-create-panel__card .sms-event-create-actions .sms-profile-button{justify-content:center}} /* Classified Activity cards: canonical listing preview inside the main feed. */ .sms-activity-classified-preview{display:grid;grid-template-columns:minmax(190px,38%) minmax(0,1fr);margin:0 16px 14px;overflow:hidden;border:1px solid var(--sms-border,#e6e8ee);border-radius:18px;background:var(--sms-surface,#fff);color:var(--sms-text,#152033);text-decoration:none;box-shadow:0 10px 30px rgba(15,23,42,.06);transition:transform .16s ease,box-shadow .16s ease}.sms-activity-classified-preview:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(15,23,42,.10)}.sms-activity-classified-preview__visual{position:relative;min-height:180px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,var(--sms-primary-soft,#f0ebff),color-mix(in srgb,var(--sms-success,#138a61) 12%,#fff))}.sms-activity-classified-preview__visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.sms-activity-classified-preview__visual>span{padding:10px 12px;border-radius:12px;background:var(--sms-surface,#fff);font-size:11px;font-weight:900;letter-spacing:.08em;line-height:1;color:var(--sms-primary,#7657f5)}.sms-activity-classified-preview__visual b,.sms-activity-classified-preview__visual em{position:absolute;z-index:1;top:12px;padding:6px 9px;border-radius:999px;background:color-mix(in srgb,var(--sms-surface,#fff) 92%,transparent);box-shadow:0 4px 14px rgba(15,23,42,.12);font-size:10px;font-style:normal;font-weight:850;backdrop-filter:blur(8px)}.sms-activity-classified-preview__visual b{left:12px;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sms-activity-classified-preview__visual em{right:12px;background:#fff1f2;color:#be123c}.sms-activity-classified-preview__body{min-width:0;display:flex;flex-direction:column;justify-content:center;padding:18px 20px}.sms-activity-classified-preview__body h3{margin:5px 0 8px;font-size:20px;line-height:1.25}.sms-activity-classified-preview__body>strong{font-size:22px;line-height:1.15;color:var(--sms-success,#138a61)}.sms-activity-classified-preview__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.sms-activity-classified-preview__meta span{padding:5px 8px;border-radius:999px;background:var(--sms-primary-soft,#f0ebff);color:var(--sms-primary,#7657f5);font-size:10px;font-weight:800}.sms-activity-classified-preview footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--sms-border,#e6e8ee);color:var(--sms-muted,#667085);font-size:12px}.sms-activity-classified-preview footer span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sms-activity-classified-preview footer strong{flex:0 0 auto;color:var(--sms-primary,#7657f5)} @media(max-width:640px){.sms-activity-classified-preview{grid-template-columns:1fr;margin:0 10px 12px;border-radius:15px}.sms-activity-classified-preview__visual{min-height:0;aspect-ratio:16/9}.sms-activity-classified-preview__body{padding:13px 14px}.sms-activity-classified-preview__body h3{font-size:16px}.sms-activity-classified-preview__body>strong{font-size:19px}.sms-activity-classified-preview footer{margin-top:11px;padding-top:10px}} /* 2.4.0 — Page-owned albums + Facebook-style public Page focus layout. */ .sms-page-gallery{inline-size:100%} .sms-page-gallery__uploadbar [data-sms-page-gallery-status]{color:var(--sms-muted);font-size:.78rem} .sms-page-gallery__uploadbar [data-sms-page-gallery-status][data-kind="error"]{color:var(--sms-danger,#b32d2e)} .sms-page-gallery__albums .sms-profile-gallery__album.is-active{border-color:color-mix(in srgb,var(--sms-primary) 42%,var(--sms-border));box-shadow:0 0 0 2px color-mix(in srgb,var(--sms-primary) 11%,transparent)} .sms-page-gallery.is-busy{opacity:.82;pointer-events:none} .sms-page-gallery .sms-profile-gallery__photo-actions[hidden]{display:none!important} .sms-page-gallery .sms-profile-gallery__viewer-edit-form select{inline-size:100%;box-sizing:border-box;border:1px solid var(--sms-border);border-radius:10px;background:var(--sms-surface-soft);color:var(--sms-text);padding:10px 12px;font:inherit} @media (min-width:1280px){ body.sms-page-detail-focus .sms-app-shell{ grid-template-columns:minmax(0,1fr) var(--sms-right-rail); } body.sms-page-detail-focus .sms-app-rail--left{ display:none!important; } body.sms-page-detail-focus .sms-app-centre{ grid-column:1; inline-size:100%; } body.sms-page-detail-focus .sms-app-rail--right{ grid-column:2; display:grid; } body.sms-page-detail-focus .sms-app-centre__stream[data-sms-route="pages"]{ inline-size:100%; max-inline-size:none; padding-inline:28px; padding-block-start:22px; } body.sms-page-detail-focus .sms-page-detail{ inline-size:100%; max-inline-size:none; margin-inline:0; gap:14px; } body.sms-page-detail-focus .sms-page-hero{ border-radius:20px; } body.sms-page-detail-focus .sms-page-hero__cover{ block-size:clamp(270px,20vw,350px); min-block-size:270px; } body.sms-page-detail-focus .sms-page-hero__body{ margin-top:-38px; padding:0 28px 20px; gap:20px; } body.sms-page-detail-focus .sms-page-hero__identity{ gap:16px; min-inline-size:0; } /* 2.4.2 — Compact desktop Page header: preserve more visible cover space. */ body.sms-page-detail-focus .sms-page-hero__identity>div{ min-inline-size:0; max-inline-size:min(720px,62vw); } body.sms-page-detail-focus .sms-page-hero__avatar{ width:112px; height:112px; border-width:5px; border-radius:50%; font-size:34px; } body.sms-page-detail-focus .sms-page-hero__identity h1{ max-inline-size:100%; margin-block-end:3px; font-size:clamp(24px,2vw,30px); line-height:1.08; letter-spacing:-.025em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; } body.sms-page-detail-focus .sms-page-hero__identity p{ max-inline-size:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; } body.sms-page-detail-focus .sms-page-hero__actions{ max-inline-size:420px; } body.sms-page-detail-focus .sms-page-tabs{ inline-size:100%; max-inline-size:none; justify-content:flex-start; padding:6px; } body.sms-page-detail-focus .sms-page-tabs button{ min-height:38px; padding-inline:18px; font-size:13px; } body.sms-page-detail-focus .sms-page-panel{ inline-size:100%; } } /* 2.4.6 — Page Gallery viewer parity: body-level lightbox with visible close and social rail. */ .sms-page-gallery__viewer [data-sms-page-gallery-viewer-close]{display:grid!important;place-items:center!important;inline-size:32px!important;block-size:32px!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:9px!important;background:rgba(15,17,23,.82)!important;color:#fff!important;font-size:1rem!important;cursor:pointer!important} .sms-page-gallery__viewer .sms-profile-gallery__viewer-social>.sms-reactions{min-block-size:100%;border-top:0!important} .sms-page-gallery__viewer .sms-profile-gallery__viewer-meta>[data-sms-page-gallery-viewer-post]{color:var(--sms-primary);font-size:.72rem;font-weight:750;text-decoration:none} .sms-page-gallery__viewer .sms-profile-gallery__viewer-meta>[data-sms-page-gallery-viewer-post]:hover{text-decoration:underline} /* 2.4.10 — Photo viewer toolbar anchored to the image canvas, not the social rail. */ .sms-profile-gallery__viewer-visual>.sms-profile-gallery__viewer-tools{position:absolute!important;z-index:14!important;inset-block-start:max(12px,env(safe-area-inset-top))!important;inset-inline-start:max(12px,env(safe-area-inset-left))!important;inset-inline-end:auto!important;inset-block-end:auto!important;display:flex!important;align-items:center!important;gap:2px!important;padding:4px!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:13px!important;background:rgba(15,17,23,.68)!important;box-shadow:0 8px 26px rgba(0,0,0,.24)!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;pointer-events:auto!important} .sms-profile-gallery__viewer-visual>.sms-profile-gallery__viewer-tools>.sms-profile-gallery__viewer-tool{position:static!important;inset:auto!important;inline-size:34px!important;block-size:34px!important;padding:0!important;border:0!important;border-radius:9px!important;background:transparent!important;color:#fff!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important} .sms-profile-gallery__viewer-visual>.sms-profile-gallery__viewer-tools>.sms-profile-gallery__viewer-tool:hover,.sms-profile-gallery__viewer-visual>.sms-profile-gallery__viewer-tools>.sms-profile-gallery__viewer-tool:focus-visible{background:rgba(255,255,255,.12)!important;outline:none!important} .sms-profile-gallery__viewer-visual>.sms-profile-gallery__viewer-tools>.sms-profile-gallery__viewer-tool.is-danger:hover,.sms-profile-gallery__viewer-visual>.sms-profile-gallery__viewer-tools>.sms-profile-gallery__viewer-tool.is-danger:focus-visible{background:rgba(179,45,46,.9)!important} .sms-profile-gallery__viewer-visual>.sms-profile-gallery__viewer-tools>.sms-profile-gallery__viewer-tool svg{inline-size:16px!important;block-size:16px!important} @media(max-width:767px){.sms-profile-gallery__viewer-visual>.sms-profile-gallery__viewer-tools{inset-block-start:max(10px,env(safe-area-inset-top))!important;inset-inline-start:max(10px,env(safe-area-inset-left))!important}.sms-profile-gallery__viewer-visual>.sms-profile-gallery__viewer-tools>.sms-profile-gallery__viewer-tool{inline-size:32px!important;block-size:32px!important}} /* 2.4.8 — Page Gallery batch composer and compact protected-photo grid. */ .sms-page-gallery__uploadbar{display:grid;grid-template-columns:minmax(190px,240px) minmax(280px,1fr);align-items:end;gap:10px 14px} .sms-page-gallery__uploadbar .sms-page-gallery__destination,.sms-page-gallery__uploadbar .sms-page-gallery__comment{display:grid;gap:5px;min-inline-size:0} .sms-page-gallery__uploadbar .sms-page-gallery__comment{inline-size:100%} .sms-page-gallery__comment textarea{inline-size:100%;min-block-size:64px;max-block-size:150px;box-sizing:border-box;resize:vertical;border:1px solid var(--sms-border);border-radius:11px;background:var(--sms-surface);color:var(--sms-text);padding:9px 11px;font:inherit;font-size:.82rem;line-height:1.4;outline:none} .sms-page-gallery__comment textarea:focus{border-color:color-mix(in srgb,var(--sms-primary) 46%,var(--sms-border));box-shadow:0 0 0 3px color-mix(in srgb,var(--sms-primary) 10%,transparent)} .sms-page-gallery__uploadbar [data-sms-page-gallery-status]{grid-column:1/-1;min-block-size:18px} .sms-page-gallery__grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px} .sms-page-gallery__grid .sms-profile-gallery__photo{overflow:hidden;border:1px solid color-mix(in srgb,var(--sms-border) 72%,transparent);border-radius:11px;background:linear-gradient(145deg,var(--sms-surface-strong),color-mix(in srgb,var(--sms-primary) 5%,var(--sms-surface-strong)));box-shadow:0 4px 14px rgba(15,23,42,.045)} .sms-page-gallery__grid .sms-profile-gallery__photo-open{border-radius:10px;box-shadow:none} .sms-page-gallery__grid .sms-profile-gallery__photo-open img{background:var(--sms-surface-strong)} @media(max-width:767px){.sms-page-gallery__uploadbar{grid-template-columns:1fr;align-items:stretch}.sms-page-gallery__uploadbar [data-sms-page-gallery-status]{grid-column:auto}.sms-page-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.sms-page-gallery__grid .sms-profile-gallery__photo{border-radius:7px}} /* 2.4.12 — Short public Activity permalink keeps the timestamp visually native. */ .sms-activity-permalink{color:inherit;text-decoration:none} .sms-activity-permalink:hover,.sms-activity-permalink:focus-visible{text-decoration:underline;outline:none} /* 2.4.14 — Guest-safe share controls and canonical article share action. */ .sms-article-reader__meta-actions{display:flex;align-items:center;gap:8px;margin-inline-start:auto} .sms-article-reader__share{appearance:none;border:1px solid var(--sms-border);border-radius:9px;background:var(--sms-surface-soft);color:var(--sms-primary);padding:7px 10px;font:800 .72rem/1 system-ui,sans-serif;cursor:pointer} .sms-article-reader__share:hover,.sms-article-reader__share:focus-visible{border-color:color-mix(in srgb,var(--sms-primary) 42%,var(--sms-border));outline:none} @media(max-width:767px){.sms-article-reader__meta-actions{inline-size:100%;justify-content:flex-start;margin-inline-start:0}}