/* Remaining surfaces share the flat workspace system; loaded after legacy page rules. */
:root {
    --ui-canvas: #000;
    --ui-panel: #111;
    --ui-control: #1b1b1b;
    --ui-hover: #292929;
    --ui-line: #303030;
    --ui-line-strong: #545454;
    --ui-ink: #fff;
    --ui-muted: #b0b0b0;
    --ui-blue: #0060ff;
    --ui-blue-ink: #8ab4ff;
    --ui-blue-panel: #061a36;
    --ui-danger-panel: #2c1019;
    --ui-radius: 16px;
    --ui-control-radius: 10px;
}

/* Server settings are a workspace, not a narrow generic alert. */
.room-page .server-settings-dialog {
    width: min(1280px, calc(100vw - 48px));
    height: min(900px, calc(100dvh - 48px));
    max-width: none;
    max-height: none;
    border: 1px solid var(--ui-line-strong);
    border-radius: 24px;
    background: var(--ui-panel);
    box-shadow: 0 24px 80px #0008;
}

.server-settings-dialog::backdrop {
    background: #000c;
    backdrop-filter: blur(4px);
}

.server-settings-dialog .server-settings-head {
    min-height: 92px;
    padding: 18px 24px;
    background: var(--ui-panel);
    border-bottom: 1px solid var(--ui-line);
    gap: 16px;
}

.settings-server-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.settings-server-identity>div {
    min-width: 0;
}

.settings-server-identity h2 {
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.settings-server-identity>div>span {
    font-size: 13px;
    color: var(--ui-muted);
}

.settings-server-avatar {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border: 1px solid var(--ui-line);
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: var(--ui-control);
    color: var(--ui-blue-ink);
    font-size: 22px;
    overflow: hidden;
}

.settings-server-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.server-settings-head .icon-button {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: var(--ui-control);
    border: 1px solid var(--ui-line);
    border-radius: 12px;
}

.server-settings-dialog .server-settings-layout {
    grid-template-columns: 230px minmax(0, 1fr);
    direction: rtl;
}

.server-settings-dialog .server-settings-nav {
    padding: 18px 12px;
    gap: 6px;
    border-right: 0;
    border-inline-end: 1px solid var(--ui-line);
    background: var(--ui-canvas);
    overflow-y: auto;
}

.server-settings-nav button {
    width: 100%;
    min-height: 64px;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 15px;
}

.server-settings-nav button>i {
    font-size: 18px;
    color: var(--ui-muted);
}

.server-settings-nav button>span {
    display: grid;
    gap: 2px;
}

.server-settings-nav strong {
    font-size: 14px;
    font-weight: 600;
}

.server-settings-nav small {
    font-size: 12px;
    font-weight: 400;
    color: var(--ui-muted);
}

.server-settings-nav button:hover {
    background: var(--ui-control);
    color: var(--ui-ink);
}

.server-settings-nav button.active {
    background: var(--ui-blue-panel);
    border-color: #17427c;
    color: var(--ui-ink);
}

.server-settings-nav button.active>i {
    color: var(--ui-blue-ink);
}

.server-settings-nav button[data-settings-tab=roles],
.server-settings-nav button[data-settings-tab=moderation] {
    margin-top: 12px;
}

.server-settings-content {
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scroll-padding: 24px;
    background: var(--ui-panel);
}

.server-settings-content .settings-tab {
    padding: clamp(20px, 3vw, 40px);
}

.settings-section-title {
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 28px;
}

.settings-section-title>i {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border: 1px solid var(--ui-line);
    border-radius: 14px;
    background: var(--ui-control);
    color: var(--ui-blue-ink);
    font-size: 20px;
}

.settings-section-title :is(h2, h3) {
    margin: 0 0 4px;
    font-size: 24px;
    line-height: 1.4;
}

.settings-section-title p {
    font-size: 14px;
    line-height: 1.8;
    color: var(--ui-muted);
}

.server-settings-form {
    max-width: none;
    gap: 18px;
}

.server-settings-form label {
    color: #e0e0e0;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
}

.server-settings-form label small {
    font-size: 12px;
    color: var(--ui-muted);
}

.server-settings-form :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=color]), textarea),
.workbench-channel input,
.invite-url input {
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid var(--ui-line-strong);
    border-radius: var(--ui-control-radius);
    background: var(--ui-control);
    color: var(--ui-ink);
    font-size: 15px;
}

.server-settings-form :is(input, textarea):focus-visible,
.workbench-channel input:focus-visible {
    border-color: var(--ui-blue-ink);
    outline: 2px solid var(--ui-blue-ink);
    outline-offset: 2px;
    box-shadow: none;
}

.server-settings-form .select-trigger,
.workbench-channel .select-trigger {
    min-height: 48px;
    border: 1px solid var(--ui-line-strong);
    border-radius: var(--ui-control-radius);
    font-size: 14px;
    background: var(--ui-control) !important;
}

.server-settings-form button,
.invite-box button {
    min-height: 44px;
    border: 1px solid var(--ui-blue);
    padding: 10px 16px;
    border-radius: var(--ui-control-radius);
    background: var(--ui-blue);
    font-size: 14px;
}

.server-settings-form button:hover,
.invite-box button:hover {
    background: #2476ff;
}

.server-settings-form>button,
.server-settings-form .role-actions {
    justify-self: start;
}

.server-settings-form .settings-upload-button,
.server-settings-form #removeServerImage,
.server-settings-form [data-banner-remove] {
    background: var(--ui-control);
    border: 1px solid var(--ui-line-strong);
}

.server-settings-dialog :is(.server-image-field, .server-banner-editor) {
    padding: 20px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-canvas);
}

.server-image-field>div {
    min-width: 0;
}

.server-image-field small {
    line-height: 1.8;
}

.server-settings-form .check-row {
    padding: 14px;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    background: var(--ui-control);
}

.server-settings-dialog :is(.invite-box, .settings-empty, .report-settings-list article) {
    border: 1px solid var(--ui-line);
    background: var(--ui-control);
    box-shadow: none;
}

.server-settings-dialog .settings-empty {
    color: var(--ui-muted);
    font-size: 14px;
    line-height: 1.9;
}

.server-settings-dialog .invite-url {
    gap: 8px;
}

.server-settings-dialog .invite-url :is(input, button) {
    border-radius: 10px;
}

.server-settings-dialog .invite-url input {
    direction: ltr;
    text-align: left;
}

.server-settings-dialog .audit-settings-list article {
    min-height: 76px;
    padding: 16px 0;
}

.server-settings-dialog .audit-settings-list small {
    font-size: 13px;
    line-height: 1.8;
}

.server-settings-dialog :is(.role-card, .permission-channel-list article, .member-role-list) {
    background: var(--ui-canvas);
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
}

.server-settings-dialog .role-card>summary {
    padding: 18px;
    font-size: 15px;
}

.server-settings-dialog .role-card>form,
.server-settings-dialog .role-editor {
    padding: 20px;
}

.server-settings-dialog .role-editor {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-canvas);
}

.server-settings-dialog .role-card>form {
    border: 0;
    border-radius: 0;
}

.server-settings-dialog .role-identity {
    grid-template-columns: minmax(0, 1fr) 80px minmax(120px, .7fr);
    gap: 16px;
}

.server-settings-dialog input[type=color] {
    height: 48px;
    border: 1px solid var(--ui-line-strong);
    background: var(--ui-control);
    border-radius: 10px;
    padding: 5px;
}

.server-settings-dialog .permission-fields {
    gap: 12px;
}

.server-settings-dialog .permission-fields>label {
    padding: 12px;
    border: 1px solid var(--ui-line);
    background: var(--ui-panel);
    border-radius: 12px;
}

.server-settings-dialog .permission-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

.server-settings-dialog .channel-role-permissions>summary {
    padding: 14px 16px;
    font-size: 14px;
}

.server-settings-dialog .channel-role-permissions>form {
    padding: 16px;
}

.server-settings-dialog .member-role-list {
    padding: 20px;
}

.server-settings-dialog .member-role-list form {
    padding-block: 12px;
    border-bottom: 1px solid var(--ui-line);
}

.server-settings-dialog .member-role-options {
    gap: 8px;
}

.server-settings-dialog .member-role-options label {
    min-height: 38px;
    padding: 8px;
    background: var(--ui-control);
    border-radius: 8px;
}

.server-settings-dialog .danger,
.workbench-channel .danger {
    color: #ff9ab5;
    background: var(--ui-danger-panel);
    border-color: #733246;
}

/* The same channel editor is used in the call dialog and its standalone route. */
.channel-create-grid {
    display: grid;
    grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
    gap: 16px;
    align-items: start;
}

.channel-create-card {
    padding: 22px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-canvas);
}

.workbench-card-title {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.workbench-card-title>i {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--ui-control);
    color: var(--ui-blue-ink);
}

.workbench-card-title h4 {
    margin: 0 0 4px;
    font-size: 19px;
}

.workbench-card-title p,
.field-help {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    color: var(--ui-muted);
}

.channel-live-preview {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px;
    border: 1px solid #17427c;
    border-radius: 12px;
    background: var(--ui-blue-panel);
}

.channel-live-preview>i {
    width: 28px;
    color: var(--ui-blue-ink);
    text-align: center;
}

.channel-live-preview>div {
    min-width: 0;
    flex: 1;
}

.channel-live-preview strong {
    display: block;
    font-size: 15px;
    overflow-wrap: anywhere;
}

.channel-live-preview p {
    margin: 4px 0 0;
    color: #c5d8f4;
    font-size: 12px;
    line-height: 1.8;
}

.channel-live-preview>span {
    padding: 4px 8px;
    border: 1px solid #17427c;
    border-radius: 8px;
    color: #c5d8f4;
    font-size: 12px;
}

.workbench-list-heading {
    margin: 32px 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.workbench-list-heading h4 {
    margin: 0;
    font-size: 20px;
}

.workbench-list-heading>span {
    color: var(--ui-muted);
    font-size: 13px;
}

.workbench-category-list {
    gap: 16px;
    padding: 0;
    margin: 0;
}

.workbench-category {
    overflow: hidden;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-canvas);
}

.workbench-category>header {
    min-height: 60px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ui-line);
}

.workbench-category>header h4 {
    flex: 1;
    margin: 0;
    color: var(--ui-ink);
    font-size: 16px;
}

.workbench-category>header>i {
    color: var(--ui-blue-ink);
}

.workbench-category>header>span {
    font-size: 12px;
    color: var(--ui-muted);
}

.channel-settings-list .workbench-channel {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 140px;
    padding: 18px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--ui-line);
    border-radius: 0;
    gap: 12px;
    background: var(--ui-canvas);
    align-items: end;
}

.workbench-channel:last-child {
    border-bottom: 0;
}

.workbench-channel label {
    display: grid;
    gap: 6px;
    font-size: 13px;
}

.workbench-channel .channel-type-icon {
    width: 40px;
    height: 48px;
    display: grid;
    place-items: center;
    color: var(--ui-blue-ink);
    background: var(--ui-control);
    border-radius: 10px;
}

.workbench-channel .channel-topic {
    grid-column: 2;
}

.workbench-channel .channel-setting-actions {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    align-self: end;
    gap: 8px;
    justify-content: flex-end;
}

.workbench-channel .channel-setting-actions button {
    width: 44px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    border: 1px solid var(--ui-line-strong);
    border-radius: 10px;
    background: var(--ui-control);
    color: var(--ui-ink);
}

.workbench-channel .channel-setting-actions .danger {
    color: #ff9ab5;
    border-color: #733246;
    background: var(--ui-danger-panel);
}

.server-structure-page .community-shell {
    width: min(1320px, calc(100% - 48px));
    padding-block: 32px 64px;
}

.server-structure-page .community-hero {
    background: var(--ui-panel);
    border-radius: 20px;
    padding: 28px;
}

.server-structure-page .community-hero h1 {
    font-size: clamp(26px, 3vw, 40px);
}

.structure-workspace {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
    margin-top: 28px;
}

.structure-nav {
    position: sticky;
    top: 110px;
    padding: 12px;
    border: 1px solid var(--ui-line);
    border-radius: 16px;
    display: grid;
    gap: 8px;
    background: var(--ui-panel);
}

.settings-nav-label {
    padding: 8px;
    color: var(--ui-muted);
    font-size: 12px;
}

.structure-nav>a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    min-height: 64px;
    border-radius: 10px;
    color: var(--ui-ink);
    text-decoration: none;
}

.structure-nav>a:hover {
    background: var(--ui-blue-panel);
}

.structure-nav>a>i {
    color: var(--ui-blue-ink);
}

.structure-nav>a>span {
    display: grid;
    gap: 4px;
}

.structure-nav small {
    color: var(--ui-muted);
    font-size: 12px;
}

.structure-content {
    min-width: 0;
}

.structure-discovery {
    margin-top: 24px;
    padding: 24px;
    border: 1px solid var(--ui-line);
    border-radius: 16px;
    background: var(--ui-panel);
    scroll-margin-top: 100px;
}

/* Marketing keeps the same palette but gives the actual product the full canvas. */
.marketing-page :is(.marketing-noise, .marketing-glow) {
    display: none;
}

.marketing-page .site-header {
    background: var(--ui-canvas);
    border-bottom: 1px solid var(--ui-line);
    backdrop-filter: none;
}

.marketing-page .site-header.scrolled {
    background: var(--ui-canvas);
}

.marketing-page .site-nav {
    width: min(1320px, calc(100% - 48px));
    min-height: 84px;
}

.marketing-page .site-brand img {
    width: 44px;
    height: 44px;
    box-shadow: none;
    border-radius: 14px;
}

.marketing-page .site-brand strong {
    font-size: 22px;
}

.marketing-page .site-brand small {
    color: var(--ui-muted);
    font-size: 12px;
}

.marketing-page .nav-links {
    gap: 24px;
}

.marketing-page .nav-links a {
    font-size: 15px;
    color: var(--ui-muted);
}

.marketing-page .nav-actions a {
    font-size: 14px;
    min-height: 44px;
    box-shadow: none;
    border-radius: 10px;
}

.landing-refresh .hero-section {
    width: min(1320px, calc(100% - 48px));
    min-height: 0;
    display: block;
    padding: 72px 0 24px;
}

.landing-refresh .hero-copy {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    column-gap: 64px;
    align-items: center;
}

.landing-refresh .release-chip {
    grid-column: 1;
    padding: 8px 12px;
    color: var(--ui-muted);
    font-size: 13px;
    background: var(--ui-panel);
    border: 1px solid var(--ui-line);
}

.landing-refresh .release-chip>span {
    background: var(--ui-blue);
    box-shadow: none;
}

.landing-refresh .hero-copy h1 {
    grid-column: 1;
    grid-row: 2 / 4;
    max-width: 820px;
    margin: 24px 0 16px;
    font-size: clamp(46px, 5.5vw, 80px);
    line-height: 1.2;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.landing-refresh .hero-copy h1 em {
    color: var(--ui-blue-ink);
    display: block;
    text-shadow: none;
}

.landing-refresh .hero-lead {
    grid-column: 2;
    grid-row: 2;
    font-size: 18px;
    color: var(--ui-muted);
    line-height: 1.9;
}

.landing-refresh .hero-actions {
    grid-column: 2;
    grid-row: 3;
    margin-top: 20px;
}

.landing-refresh .hero-actions a {
    min-height: 52px;
    font-size: 15px;
    box-shadow: none;
    border-radius: 12px;
    transform: none;
}

.landing-refresh .hero-proof {
    grid-column: 1 / -1;
    margin: 20px 0 36px;
    border-block: 1px solid var(--ui-line);
    padding-block: 18px;
    gap: 24px;
}

.landing-refresh .hero-proof>span {
    min-width: 210px;
    padding: 0;
    grid-template-columns: 36px 1fr;
    column-gap: 10px;
    border: 0;
}

.landing-refresh .hero-proof i {
    width: 36px;
    height: 36px;
    background: var(--ui-control);
    color: var(--ui-blue-ink);
    font-size: 16px;
}

.landing-refresh .hero-proof b {
    font-size: 14px;
}

.landing-refresh .hero-proof small {
    font-size: 12px;
    color: var(--ui-muted);
}

.landing-refresh .hero-product {
    perspective: none;
}

.product-preview-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 0 4px 14px;
    font-size: 14px;
}

.product-preview-heading>span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-preview-heading i {
    color: var(--ui-blue-ink);
}

.product-preview-heading small,
.product-demo-status {
    color: var(--ui-muted);
    font-size: 13px;
    line-height: 1.8;
}

.product-demo-status {
    min-height: 24px;
    text-align: center;
    margin: 14px 0 0;
}

.landing-refresh .product-window {
    transform: none;
    border: 1px solid var(--ui-line-strong);
    border-radius: 20px;
    background: var(--ui-panel);
    box-shadow: none;
}

.landing-refresh .product-window::after {
    display: none;
}

.landing-refresh .window-bar {
    min-height: 48px;
    background: var(--ui-control);
}

.landing-refresh .window-route,
.landing-refresh .window-status {
    color: var(--ui-muted);
    font-size: 12px;
}

.landing-refresh .window-body {
    min-height: 460px;
    grid-template-columns: 64px 210px minmax(0, 1fr) 250px;
}

.landing-refresh .server-rail {
    background: var(--ui-canvas);
    padding: 16px 10px;
    gap: 12px;
}

.landing-refresh .server-rail> :is(img, span) {
    width: 40px;
    height: 40px;
    font-size: 14px;
    border-radius: 12px;
}

.landing-refresh .channel-rail,
.landing-refresh .chat-rail {
    background: var(--ui-panel);
}

.landing-refresh .preview-server {
    padding: 16px;
    min-height: 72px;
}

.landing-refresh .preview-server b {
    font-size: 16px;
}

.landing-refresh .preview-server small {
    font-size: 11px;
    color: var(--ui-muted);
}

.landing-refresh .channel-rail>p {
    margin: 18px 14px 8px;
    font-size: 11px;
    color: var(--ui-muted);
}

.landing-refresh .channel-rail>a {
    min-height: 36px;
    margin: 2px 10px;
    font-size: 13px;
    color: #e0e0e0;
}

.landing-refresh .channel-rail>a.selected {
    background: var(--ui-blue-panel);
    border: 1px solid #17427c;
}

.landing-refresh .voice-users {
    padding: 0 22px;
}

.landing-refresh .voice-users>span {
    min-height: 36px;
    gap: 8px;
    font-size: 12px;
}

.landing-refresh .avatar {
    width: 28px;
    height: 28px;
    font-size: 11px;
}

.landing-refresh .voice-users>span>i:last-child {
    font-size: 12px;
}

.landing-refresh .preview-account {
    min-height: 64px;
    padding: 12px;
}

.landing-refresh .preview-account b {
    font-size: 13px;
}

.landing-refresh .preview-account small {
    font-size: 11px;
}

.landing-refresh .preview-account>i:last-child {
    font-size: 16px;
}

.landing-refresh .call-stage {
    padding: 20px;
    gap: 14px;
    background: var(--ui-canvas);
}

.landing-refresh .call-stage>header {
    min-height: 48px;
}

.landing-refresh .stage-kicker {
    font-size: 12px;
    color: var(--ui-muted);
}

.landing-refresh .call-stage h2 {
    font-size: 22px;
}

.landing-refresh .live-badge {
    font-size: 12px;
}

.landing-refresh .screen-grid {
    gap: 12px;
    grid-template-columns: 1.3fr .7fr;
}

.landing-refresh :is(.screen-share, .camera-tile) {
    min-height: 250px;
    border-color: var(--ui-line);
    background: var(--ui-panel);
    border-radius: 14px;
}

.landing-refresh .share-center {
    gap: 10px;
}

.landing-refresh .share-center>i {
    color: var(--ui-blue-ink);
    font-size: 34px;
}

.landing-refresh .share-center b {
    font-size: 16px;
}

.landing-refresh .share-center small {
    font-size: 12px;
    color: var(--ui-muted);
}

.landing-refresh .screen-share>span {
    font-size: 11px;
}

.landing-refresh .camera-portrait {
    background: var(--ui-control);
}

.landing-refresh .camera-portrait>i {
    font-size: 52px;
    color: var(--ui-blue-ink);
}

.landing-refresh .camera-tile>span {
    padding: 12px;
    font-size: 12px;
}

.landing-refresh .call-controls {
    padding-top: 4px;
    gap: 10px;
}

.landing-refresh .call-controls button {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    background: var(--ui-control);
    border: 1px solid var(--ui-line-strong);
    color: var(--ui-ink);
    border-radius: 12px;
    font-size: 16px;
}

.landing-refresh .call-controls button[aria-pressed=true] {
    background: var(--ui-blue);
    border-color: var(--ui-blue);
}

.landing-refresh .call-controls [data-demo-control=mic][aria-pressed=true],
.landing-refresh .call-controls [data-demo-control=camera][aria-pressed=true] {
    background: var(--ui-danger-panel);
    border-color: #733246;
    color: #ff9ab5;
}

.landing-refresh .chat-rail>header {
    min-height: 72px;
    padding: 16px;
}

.landing-refresh .chat-rail header b {
    font-size: 15px;
}

.landing-refresh .chat-rail header small {
    font-size: 11px;
    color: var(--ui-muted);
}

.landing-refresh .preview-messages {
    padding: 18px 12px;
    gap: 18px;
}

.landing-refresh .preview-messages article>div {
    min-width: 0;
}

.landing-refresh .preview-messages b {
    font-size: 12px;
}

.landing-refresh .preview-messages time {
    font-size: 10px;
    color: var(--ui-muted);
}

.landing-refresh .preview-messages p {
    font-size: 12px;
    color: #e0e0e0;
    line-height: 1.8;
}

.landing-refresh .preview-composer {
    margin: auto 12px 12px;
    min-height: 42px;
    font-size: 11px;
    color: var(--ui-muted);
}

.landing-refresh .product-window.demo-camera .camera-portrait>i {
    opacity: .15;
}

.landing-refresh .product-window.demo-mic [data-demo-control=mic] i::before {
    content: '\f131';
}

.landing-refresh .product-window.demo-camera [data-demo-control=camera] i::before {
    content: '\f4e2';
}

.landing-refresh .product-window:not(.demo-screen) .code-lines {
    visibility: hidden;
}

.landing-refresh .product-window:not(.demo-chat) .preview-messages {
    visibility: hidden;
}

.landing-refresh .signal-strip {
    width: min(1320px, calc(100% - 48px));
    margin: 36px auto 0;
    padding: 24px 0;
    gap: 24px;
    border-block: 1px solid var(--ui-line);
}

.landing-refresh .signal-strip>span,
.landing-refresh .signal-strip strong {
    font-size: 14px;
    color: #e0e0e0;
}

.landing-refresh :is(.features-section, .experience-section, .steps-section, .faq-section) {
    width: min(1320px, calc(100% - 48px));
    margin-top: 96px;
}

.landing-refresh .section-heading h2 {
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.4;
    letter-spacing: 0;
}

.landing-refresh .section-heading>p {
    font-size: 16px;
    line-height: 1.9;
}

.landing-refresh .marketing-eyebrow {
    font-size: 13px;
    color: var(--ui-blue-ink);
}

.landing-refresh .marketing-eyebrow span {
    box-shadow: none;
}

.landing-refresh .bento-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.landing-refresh .bento-card {
    min-height: 340px;
    padding: 32px;
    border-radius: 20px;
    background: var(--ui-panel);
    box-shadow: none;
}

.landing-refresh .bento-card::after {
    display: none;
}

.landing-refresh .feature-icon {
    width: 48px;
    height: 48px;
    background: var(--ui-control);
    border-color: var(--ui-line);
    color: var(--ui-blue-ink);
    font-size: 20px;
}

.landing-refresh .feature-label {
    color: var(--ui-blue-ink);
    font-size: 12px;
    margin-top: 20px;
}

.landing-refresh .bento-card h3 {
    font-size: 24px;
    margin: 8px 0 12px;
}

.landing-refresh .bento-card p {
    font-size: 15px;
    color: var(--ui-muted);
}

.landing-refresh .bento-control {
    grid-template-columns: 1fr;
    gap: 24px;
}

.landing-refresh .permission-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-refresh .permission-board span {
    padding: 8px;
    grid-template-columns: 1fr;
    gap: 5px;
}

.landing-refresh .permission-board i {
    grid-row: auto;
}

.landing-refresh .permission-board b {
    font-size: 12px;
}

.landing-refresh .permission-board small {
    font-size: 11px;
    color: var(--ui-muted);
}

.landing-refresh .wave-visual i {
    background: var(--ui-blue);
    box-shadow: none;
    animation: none;
}

.landing-refresh .mini-channel-list span {
    font-size: 13px;
}

.landing-refresh .experience-panel {
    min-height: 440px;
    padding: 48px;
    border-color: var(--ui-line);
    border-radius: 20px;
    gap: 48px;
    background: var(--ui-panel);
}

.landing-refresh .experience-copy h2 {
    font-size: clamp(30px, 3.4vw, 44px);
    letter-spacing: 0;
    line-height: 1.4;
}

.landing-refresh .experience-copy>p:not(.marketing-eyebrow) {
    color: var(--ui-muted);
    font-size: 16px;
}

.landing-refresh .experience-copy li {
    font-size: 14px;
}

.landing-refresh .experience-copy>a {
    font-size: 14px;
    background: var(--ui-blue);
    box-shadow: none;
}

.landing-refresh :is(.floating-profile, .floating-notice, .floating-voice) {
    box-shadow: none;
    border-color: var(--ui-line-strong);
    background: var(--ui-canvas);
}

.landing-refresh .floating-profile .profile-banner {
    background: var(--ui-blue);
}

.landing-refresh .steps-grid {
    gap: 16px;
}

.landing-refresh .steps-grid article {
    padding: 28px;
    border-radius: 16px;
    background: var(--ui-panel);
}

.landing-refresh .steps-grid h3 {
    font-size: 22px;
}

.landing-refresh .steps-grid p {
    font-size: 15px;
    color: var(--ui-muted);
}

.landing-refresh .faq-list details {
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    background: var(--ui-panel);
}

.landing-refresh .faq-list summary {
    padding: 20px 24px;
    font-size: 16px;
}

.landing-refresh .faq-list details p {
    padding: 0 24px 20px;
    margin: 0;
    color: var(--ui-muted);
    font-size: 15px;
    line-height: 1.9;
}

.landing-refresh .final-cta {
    width: min(1320px, calc(100% - 48px));
    margin: 96px auto;
    padding: 48px;
    border: 1px solid #17427c;
    border-radius: 20px;
    background: var(--ui-blue-panel);
}

.landing-refresh .final-cta h2 {
    font-size: clamp(32px, 4vw, 52px);
    line-height: 1.4;
    letter-spacing: 0;
}

.landing-refresh .final-cta p {
    font-size: 16px;
    color: #c5d8f4;
}

.landing-refresh .final-cta>a {
    min-height: 52px;
    box-shadow: none;
    border-radius: 12px;
    font-size: 15px;
}

.marketing-page :is(.page-hero, .story-panel, .document-card, .contact-card, .download-card, .contact-info-card) {
    box-shadow: none;
}

.marketing-page .document-card article {
    padding-block: 24px;
    border-color: var(--ui-line);
}

.marketing-page .document-card article h2 {
    font-size: 22px;
}

.marketing-page .document-card article p,
.marketing-page .story-panel p {
    color: var(--ui-muted);
    font-size: 16px;
    line-height: 2;
}

.marketing-page .site-footer {
    border-color: var(--ui-line);
    background: var(--ui-panel);
}

.marketing-page .footer-main {
    width: min(1320px, calc(100% - 48px));
    padding-block: 48px;
}

.marketing-page .footer-main nav :is(b, a),
.marketing-page .footer-main>div>p {
    font-size: 14px;
}

.marketing-page .footer-bottom {
    color: var(--ui-muted);
    font-size: 12px;
}

.server-settings-dialog :is(button, input, textarea, summary, a):focus-visible,
.structure-workspace :is(button, input, summary, a):focus-visible,
.landing-refresh :is(button, a, summary):focus-visible {
    outline: 2px solid var(--ui-blue-ink);
    outline-offset: 3px;
}

@media (max-width:1100px) {
    .landing-refresh .window-body {
        grid-template-columns: 56px 180px minmax(0, 1fr);
    }

    .landing-refresh .chat-rail {
        display: none;
    }

    .landing-refresh .hero-copy {
        column-gap: 32px;
    }

    .marketing-page .nav-links {
        gap: 14px;
    }

    .structure-workspace {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 16px;
    }

    .channel-create-grid {
        grid-template-columns: 1fr;
    }

    .server-settings-dialog .server-settings-layout {
        grid-template-columns: 210px minmax(0, 1fr);
    }
}

@media (max-width:900px) {
    .structure-workspace {
        grid-template-columns: 1fr;
    }

    .structure-nav {
        position: static;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .structure-nav .settings-nav-label {
        display: none;
    }

    .structure-nav>a {
        justify-content: center;
    }

    .structure-nav small {
        display: none;
    }

    .landing-refresh .hero-copy {
        display: block;
    }

    .landing-refresh .hero-copy h1 {
        font-size: clamp(44px, 8vw, 66px);
    }

    .landing-refresh .hero-copy h1 em {
        display: inline;
    }

    .landing-refresh .hero-lead {
        max-width: 680px;
    }

    .landing-refresh .hero-proof {
        gap: 16px;
    }

    .landing-refresh .hero-proof>span {
        min-width: 180px;
    }

    .landing-refresh .experience-panel {
        grid-template-columns: 1fr;
    }

    .landing-refresh .experience-visual {
        min-height: 320px;
    }

    .landing-refresh .section-heading {
        align-items: start;
        gap: 20px;
    }
}

@media (max-width:720px) {
    .room-page .server-settings-dialog {
        width: calc(100vw - 16px);
        height: calc(100dvh - 16px);
        max-width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        border-radius: 16px;
    }

    .server-settings-dialog .server-settings-head {
        min-height: 80px;
        padding: 14px;
    }

    .settings-server-avatar {
        width: 44px;
        height: 44px;
        min-width: 44px;
        border-radius: 12px;
    }

    .settings-server-identity {
        gap: 10px;
    }

    .settings-server-identity h2 {
        font-size: 18px;
    }

    .server-settings-dialog .server-settings-layout {
        display: flex;
        flex-direction: column;
    }

    .server-settings-dialog .server-settings-nav {
        flex: 0 0 72px;
        min-height: 72px;
        height: 72px;
        padding: 6px;
        gap: 4px;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        border: 0;
        border-bottom: 1px solid var(--ui-line);
    }

    .server-settings-nav button {
        width: auto;
        min-width: 90px;
        min-height: 58px;
        padding: 8px;
        gap: 5px;
    }

    .server-settings-nav button>span {
        display: block;
        white-space: nowrap;
    }

    .server-settings-nav strong {
        font-size: 11px;
    }

    .server-settings-nav small {
        display: none;
    }

    .server-settings-nav button[data-settings-tab=roles],
    .server-settings-nav button[data-settings-tab=moderation] {
        margin-top: 0;
    }

    .server-settings-content {
        flex: 1;
        min-height: 0;
        height: auto;
    }

    .server-settings-content .settings-tab {
        padding: 20px 14px 32px;
    }

    .settings-section-title {
        margin-bottom: 22px;
        gap: 10px;
    }

    .settings-section-title :is(h2, h3) {
        font-size: 21px;
    }

    .settings-section-title>i {
        width: 40px;
        height: 40px;
        min-width: 40px;
        font-size: 18px;
    }

    .channel-create-card {
        padding: 18px;
    }

    .server-settings-dialog :is(.server-image-field, .server-banner-editor, .role-editor, .member-role-list) {
        padding: 16px;
    }

    .server-settings-dialog .role-identity {
        grid-template-columns: minmax(0, 1fr) 70px;
    }

    .server-settings-dialog .role-identity>label:last-child {
        grid-column: 1 / -1;
    }

    .server-settings-dialog .permission-fields {
        grid-template-columns: 1fr;
    }

    .channel-settings-list .workbench-channel {
        grid-template-columns: 36px minmax(0, 1fr);
        padding: 14px;
    }

    .workbench-channel>label,
    .workbench-channel .channel-topic {
        grid-column: 2;
    }

    .workbench-channel .channel-type-icon {
        width: 36px;
    }

    .workbench-channel .channel-setting-actions {
        grid-column: 2;
        grid-row: auto;
        justify-content: flex-start;
    }

    .workbench-list-heading {
        flex-direction: column;
        align-items: start;
        gap: 4px;
    }

    .channel-live-preview {
        flex-wrap: wrap;
    }

    .channel-live-preview>span {
        margin-inline-start: 38px;
    }

    .server-structure-page .community-shell {
        width: calc(100% - 24px);
        padding-block: 20px 40px;
    }

    .structure-nav {
        padding: 8px;
        gap: 4px;
    }

    .structure-nav>a {
        padding: 8px;
        flex-direction: column;
        gap: 6px;
    }

    .structure-nav strong {
        font-size: 12px;
    }

    .structure-discovery {
        padding: 18px;
    }

    .marketing-page .site-nav {
        width: calc(100% - 32px);
        min-height: 72px;
        gap: 12px;
    }

    .marketing-page .site-brand small {
        display: none;
    }

    .marketing-page .site-brand strong {
        font-size: 20px;
    }

    .marketing-page .nav-actions a {
        font-size: 12px;
        padding-inline: 12px;
    }

    .landing-refresh .hero-section {
        width: calc(100% - 32px);
        padding-top: 40px;
    }

    .landing-refresh .hero-copy h1 {
        font-size: clamp(38px, 8vw, 54px);
        margin-top: 24px;
    }

    .landing-refresh .hero-copy h1 em {
        display: block;
    }

    .landing-refresh .hero-lead {
        font-size: 16px;
    }

    .landing-refresh .hero-actions a {
        flex: 1;
        padding-inline: 12px;
        font-size: 14px;
    }

    .landing-refresh .hero-proof {
        gap: 16px 10px;
        margin-top: 24px;
        padding-block: 16px;
    }

    .landing-refresh .hero-proof>span {
        min-width: 0;
        flex: 1 1 130px;
    }

    .landing-refresh .hero-proof b {
        font-size: 12px;
    }

    .landing-refresh .hero-proof small {
        font-size: 11px;
    }

    .product-preview-heading {
        align-items: start;
        flex-direction: column;
        gap: 4px;
    }

    .landing-refresh .window-body {
        min-height: 360px;
        grid-template-columns: 1fr;
    }

    .landing-refresh .server-rail,
    .landing-refresh .channel-rail {
        display: none;
    }

    .landing-refresh .call-stage {
        padding: 16px;
    }

    .landing-refresh .screen-grid {
        grid-template-columns: 1.3fr .7fr;
    }

    .landing-refresh :is(.screen-share, .camera-tile) {
        min-height: 200px;
    }

    .landing-refresh .share-center b {
        font-size: 14px;
    }

    .landing-refresh .share-center small {
        font-size: 11px;
    }

    .landing-refresh .camera-portrait>i {
        font-size: 36px;
    }

    .landing-refresh .call-controls {
        padding-bottom: 0;
    }

    .landing-refresh :is(.signal-strip, .features-section, .experience-section, .steps-section, .faq-section, .final-cta) {
        width: calc(100% - 32px);
    }

    .landing-refresh .signal-strip {
        gap: 16px;
        justify-content: start;
    }

    .landing-refresh .signal-strip>span {
        flex-basis: 100%;
        color: var(--ui-muted);
    }

    .landing-refresh :is(.features-section, .experience-section, .steps-section, .faq-section) {
        margin-top: 64px;
    }

    .landing-refresh .section-heading {
        flex-direction: column;
    }

    .landing-refresh .section-heading h2 {
        font-size: 30px;
    }

    .landing-refresh .bento-grid {
        grid-template-columns: 1fr;
        grid-template-areas: 'voice' 'channels' 'chat' 'control';
    }

    .landing-refresh .bento-card {
        min-height: 0;
        padding: 24px;
        border-radius: 16px;
    }

    .landing-refresh .bento-card h3 {
        font-size: 22px;
    }

    .landing-refresh .experience-panel {
        padding: 24px;
        gap: 24px;
    }

    .landing-refresh .experience-copy h2 {
        font-size: 30px;
    }

    .landing-refresh .steps-grid {
        grid-template-columns: 1fr;
    }

    .landing-refresh .steps-grid article {
        padding: 24px;
    }

    .landing-refresh .faq-list summary {
        padding: 18px;
        font-size: 15px;
    }

    .landing-refresh .faq-list details p {
        padding: 0 18px 18px;
    }

    .landing-refresh .final-cta {
        margin-block: 64px;
        padding: 24px;
        align-items: start;
    }

    .landing-refresh .final-cta h2 {
        font-size: 32px;
    }

    .marketing-page .footer-main {
        width: calc(100% - 32px);
        padding-block: 32px;
    }
}

@media (max-height:500px) and (max-width:900px) {
    .server-settings-dialog .server-settings-head {
        min-height: 62px;
        padding: 8px 14px;
    }

    .server-settings-dialog .server-settings-nav {
        height: 58px;
        min-height: 58px;
        flex-basis: 58px;
    }

    .server-settings-nav button {
        min-height: 44px;
        flex-direction: row;
    }
}

@media (prefers-reduced-motion: reduce) {

    .landing-refresh *,
    .server-settings-dialog * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* Message tools, membership review and rich presence */
.message {
    position: relative
}

.message-actions {
    position: absolute;
    inset-block-start: -14px;
    inset-inline-end: 14px;
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid #242b36;
    border-radius: 10px;
    background: #0b0e13;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .32);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: .16s ease
}

.message:hover .message-actions,
.message:focus-within .message-actions {
    opacity: 1;
    transform: none;
    pointer-events: auto
}

.message-actions button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    color: #aeb8c7;
    background: transparent;
    cursor: pointer
}

.message-actions button:hover,
.message-actions button:focus-visible {
    color: #fff;
    background: #0060ff
}

.message.pinned {
    border-color: rgba(0, 96, 255, .48);
    box-shadow: inset -3px 0 #0060ff
}

.message-reply-reference {
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 8px;
    padding: 7px 9px;
    border: 0;
    border-inline-start: 2px solid #0060ff;
    color: #9aa6b6;
    background: #0b0e13;
    cursor: pointer;
    text-align: start
}

.message-reply-reference>span {
    min-width: 0;
    display: grid
}

.message-reply-reference strong {
    color: #75a7ff;
    font-size: .72rem
}

.message-reply-reference small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8a95a5
}

.reply-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 16px;
    padding: 9px 12px;
    border: 1px solid #263143;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: #0c1119
}

.reply-preview>span {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #75a7ff
}

.reply-preview>span>span {
    min-width: 0;
    display: grid
}

.reply-preview small {
    max-width: min(560px, 60vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8b96a8
}

.reply-preview button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 8px;
    color: #c8d1de;
    background: #171c24;
    cursor: pointer
}

.feature-dialog {
    width: min(540px, calc(100vw - 24px));
    max-height: min(760px, calc(100dvh - 24px));
    padding: 0;
    border: 1px solid #29303c;
    border-radius: 20px;
    color: #f8fafc;
    background: #090c11;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .66)
}

.feature-dialog::backdrop {
    background: rgba(0, 0, 0, .76);
    backdrop-filter: blur(5px)
}

.feature-dialog>form,
.feature-dialog>div {
    display: grid
}

.feature-dialog header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid #202630
}

.feature-dialog header span {
    color: #6f9fff;
    font-size: .72rem
}

.feature-dialog header h2 {
    margin: 2px 0 0;
    font-size: 1.15rem
}

.feature-dialog header button,
.feature-dialog footer button {
    min-height: 42px;
    border: 1px solid #29313d;
    border-radius: 10px;
    color: #dce4ef;
    background: #141920;
    cursor: pointer
}

.feature-dialog header button {
    width: 42px
}

.feature-dialog section,
.activity-dialog form>label,
.activity-dialog .field-help {
    margin: 0 20px;
    padding: 17px 0;
    border-bottom: 1px solid #1c222c
}

.feature-dialog section h3 {
    margin: 0 0 12px;
    font-size: .9rem
}

.feature-dialog label {
    display: grid;
    gap: 7px;
    color: #d4dce8
}

.feature-dialog .check-row {
    display: flex;
    margin-top: 12px
}

.feature-dialog footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 16px 20px
}

.feature-dialog footer button {
    padding: 0 17px
}

.feature-dialog footer .primary-btn {
    border-color: #0060ff;
    color: #fff;
    background: #0060ff
}

.pins-list {
    max-height: min(560px, 65dvh);
    overflow: auto;
    padding: 10px
}

.pins-list article {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer
}

.pins-list article:hover {
    background: #121720
}

.pin-avatar,
.review-avatar {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    color: #fff;
    background: #0060ff
}

.pin-avatar img,
.review-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.pins-list article div {
    min-width: 0
}

.pins-list article strong,
.pins-list article small {
    display: block
}

.pins-list article p {
    margin: 3px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #a8b2c1
}

.pins-list article small {
    color: #687486
}

.activity-preview {
    margin: 18px 20px 4px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px;
    border: 1px solid #243044;
    border-radius: 15px;
    background: #0c121b
}

.activity-preview>i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: #0060ff
}

.activity-preview span {
    display: grid
}

.activity-preview small {
    color: #8996a8
}

.activity-dialog input:not([type=checkbox]) {
    width: 100%
}

.membership-review {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #242c37;
    border-radius: 16px;
    background: #0b0f15
}

.membership-review>div:first-child {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.membership-review h4 {
    margin: 0;
    display: flex;
    gap: 8px;
    align-items: center
}

.membership-review article {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    background: #11161e
}

.membership-review article>div {
    min-width: 0;
    display: grid
}

.membership-review article small {
    color: #7f8b9c
}

.membership-review article button {
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid #24426f;
    border-radius: 9px;
    color: #bdd5ff;
    background: #10213b;
    cursor: pointer
}

.membership-review article button.danger {
    border-color: #65303b;
    color: #ffc0ca;
    background: #291219
}

.order-controls {
    display: flex;
    gap: 5px;
    margin-inline-start: auto
}

.order-controls button,
.channel-setting-actions button {
    min-width: 36px
}

.workbench-category>header>.order-controls button {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid #28313e;
    border-radius: 9px;
    color: #b9c4d2;
    background: #12171f;
    cursor: pointer
}

.video-item.play-required::after {
    content: 'برای پخش کلیک کنید';
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    padding: 8px 12px;
    border-radius: 10px;
    color: #fff;
    background: #0060ff;
    pointer-events: none
}

@media(max-width:640px) {
    .message-actions {
        position: static;
        margin-top: 8px;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        width: max-content
    }

    .reply-preview {
        margin-inline: 8px
    }

    .feature-dialog {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);
        border-radius: 16px
    }

    .membership-review article {
        grid-template-columns: 38px minmax(0, 1fr)
    }

    .membership-review article button {
        grid-row: 2
    }

    .membership-review article button:first-of-type {
        grid-column: 1
    }

    .membership-review article button:last-of-type {
        grid-column: 2
    }

    .workbench-category>header {
        flex-wrap: wrap
    }

    .order-controls {
        margin-inline-start: 0
    }
}

@media(prefers-reduced-motion:reduce) {
    .message-actions {
        transition: none
    }
}

.profile-activity {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    padding: 11px;
    border: 1px solid #263348;
    border-radius: 12px;
    background: #0c131e
}

.profile-activity[hidden] {
    display: none
}

.profile-activity>i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: #0060ff
}

.profile-activity span {
    min-width: 0;
    display: grid
}

.profile-activity small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #8d9bad
}