.mobile-blocspace-shell-header {
    position: fixed !important;
    top: var(--blocspace-shell-top-offset, env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10007 !important;
    background: var(--background-color);
    border-bottom: none;
    padding: 8px 16px 0 16px !important;
    margin: 0 !important;
    transform: none !important;
    box-shadow: none;
}

.mobile-blocspace-header-top {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 40px;
}

/* Glass circle: a frosted disc that lifts the control off whatever sits
   behind the header without turning it into a solid chip. */
.mobile-blocspace-header-button {
    appearance: none;
    -webkit-appearance: none;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--surface-color) 62%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
    border-radius: 999px;
    box-shadow: 0 1px 2px color-mix(in srgb, #000 6%, transparent),
                inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
    color: var(--text-primary);
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 15px;
    transition: transform 140ms cubic-bezier(.2,.8,.2,1), background 140ms ease;
}

.mobile-blocspace-header-button:active {
    transform: scale(0.92);
    background: color-mix(in srgb, var(--surface-color) 78%, transparent);
}

/* Dark: the inner highlight reads as glare on glass, so it dims down. */
html[data-theme="dark"] .mobile-blocspace-header-button,
body[data-theme="dark"] .mobile-blocspace-header-button {
    background: color-mix(in srgb, #ffffff 8%, transparent);
    border-color: color-mix(in srgb, #ffffff 14%, transparent);
    box-shadow: 0 1px 2px color-mix(in srgb, #000 30%, transparent),
                inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent);
}

.mobile-blocspace-header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.mobile-blocspace-title-stack {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}

.mobile-blocspace-title-avatar {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: color-mix(in srgb, var(--text-primary) 9%, transparent);
    background-size: cover;
    background-position: center;
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
}

.mobile-blocspace-title-avatar.has-image {
    border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.mobile-blocspace-title-main {
    font-size: 14px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-primary);
    max-width: 176px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-blocspace-tab-rail {
    /* The rail carries its own height so the modal can reserve exactly this
       much room for it, rather than both sides guessing at a number. */
    --blocspace-rail-height: calc(64px + env(safe-area-inset-bottom, 0px));

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10008;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    min-height: var(--blocspace-rail-height);
    padding: 4px max(16px, env(safe-area-inset-left, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-right, 0px));
    overflow: hidden;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--text-primary, CanvasText) 10%, transparent);
    border-radius: 0;
    background: color-mix(in srgb, var(--background-color, Canvas) 96%, transparent);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.mobile-blocspace-tab-rail::-webkit-scrollbar {
    display: none;
}

/* `html` is pinned to 100vh and pulled up by a negative safe-area margin (see
   the "NUCLEAR OPTION" block in mobile.html). On iOS Safari/Chrome 100vh is the
   *large* viewport -- it assumes the URL bar is hidden -- so a plain
   `bottom: 0` anchors the rail below the visible area and the URL bar covers
   it. Anchoring off 100dvh instead tracks the viewport as the URL bar shows and
   hides. Scoped to the modal so the global rule is left alone.
   @supports keeps this from firing on engines without dvh, which fall back to
   the `bottom: 0` above.

   Translating by the vh/dvh difference pins the rail's BOTTOM edge to the
   visible viewport. Deriving `top` instead would need the rail's exact rendered
   height, which content can change; this holds whatever the rail measures. The
   difference is 0 on desktop and whenever the URL bar is hidden, so the rail
   sits unchanged in those cases. */
@supports (height: 100dvh) {
    body.blocspace-modal-open .mobile-blocspace-tab-rail {
        transform: translateY(calc(100dvh - 100vh));
    }
}

.mobile-blocspace-shell-tab {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    min-width: 0;
    min-height: 58px;
    padding: 0 2px;
    color: var(--text-secondary);
    font-size: 8px;
    font-weight: 760;
    letter-spacing: 0;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    box-shadow: none;
    outline: none;
    transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.mobile-blocspace-shell-tab::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 3px;
    width: 18px;
    height: 3px;
    border-radius: 999px;
    background: transparent;
    transform: translateX(-50%);
    transition: background 0.18s ease, width 0.18s ease;
}

.mobile-blocspace-shell-tab i {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    color: currentColor;
}

.mobile-blocspace-shell-tab.is-active {
    color: var(--text-primary);
    font-weight: 900;
    background: color-mix(in srgb, var(--text-primary, #111111) 8%, transparent);
    border-radius: 12px;
}

.mobile-blocspace-shell-tab.is-active::after {
    background: var(--text-primary);
    width: 24px;
}

.mobile-blocspace-shell-tab.is-active i {
    transform: translateY(-1px);
}

.mobile-blocspace-nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 10008;
}

.mobile-blocspace-nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.mobile-blocspace-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 82vw);
    background: var(--background-color);
    border-right: 1px solid var(--border-color);
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    z-index: 10009;
    display: flex;
    flex-direction: column;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 18px;
}

.mobile-blocspace-nav-drawer.is-open {
    transform: translateX(0);
}

.mobile-blocspace-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.mobile-blocspace-nav-title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.mobile-blocspace-nav-close {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}

.mobile-blocspace-nav-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-blocspace-nav-item {
    width: 100%;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    text-align: left;
}

.mobile-blocspace-nav-item i {
    width: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

.mobile-blocspace-nav-item-label {
    flex: 1;
}

.mobile-blocspace-nav-item.is-active {
    background: rgba(255,255,255,0.06);
    border-color: var(--border-color);
}

.mobile-blocspace-nav-item.is-active i,
.mobile-blocspace-nav-item.is-active .mobile-blocspace-nav-item-label {
    color: var(--text-primary);
}

.mobile-blocspace-dashboard-email-shell {
    display: none;
    height: min(620px, calc(100dvh - 250px));
    min-height: 460px;
    margin: 2px -6px 0;
    border-radius: 0;
    overflow: hidden;
    background: var(--background-color, #fff);
}

.mobile-blocspace-dashboard-email-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: var(--background-color, #fff);
}

.mobile-blocspace-messages-shell.is-email-fullscreen .mobile-blocspace-dashboard-email-shell {
    display: block;
    position: fixed;
    top: max(92px, calc(env(safe-area-inset-top, 0px) + 70px));
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483600;
    width: 100vw;
    height: calc(100dvh - max(92px, calc(env(safe-area-inset-top, 0px) + 70px)));
    min-height: 0;
    margin: 0;
    border-radius: 0;
    background: #ffffff;
}

.mobile-blocspace-messages-shell.is-email-pane .mobile-blocspace-dashboard-email-shell {
    display: none !important;
}

.mobile-blocspace-messages-shell.is-email-pane .mobile-blocspace-messages-latest {
    display: grid;
}

.mobile-blocspace-messages-shell.is-email-pane .mobile-blocspace-messages-searchbar.is-open {
    display: grid;
}

.mobile-blocspace-messages-shell.is-email-fullscreen .mobile-blocspace-dashboard-email-frame {
    height: 100%;
}

.mobile-blocspace-messages-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 0 10px;
}

.mobile-blocspace-messages-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    margin-bottom: -2px;
}

.mobile-blocspace-messages-kicker {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mobile-blocspace-messages-head h2 {
    margin: 4px 0 0;
    color: var(--text-primary);
    font-size: clamp(28px, 7vw, 40px);
    line-height: 0.95;
    font-weight: 950;
    letter-spacing: 0;
}

.mobile-blocspace-messages-head p {
    margin: 7px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 760;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-blocspace-messages-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.mobile-blocspace-messages-actions button {
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color) 50%, transparent);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
}

.mobile-blocspace-messages-actions button[data-mobile-message-compose],
.mobile-blocspace-messages-actions button[data-mobile-message-call],
.mobile-blocspace-messages-actions button[data-mobile-message-fullscreen] {
    background: color-mix(in srgb, var(--surface-color) 82%, transparent);
    border-color: color-mix(in srgb, var(--text-primary) 9%, transparent);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}

.mobile-blocspace-messages-searchbar {
    min-height: 0;
    height: 0;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-color) 82%, transparent);
    color: var(--text-primary);
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
    padding: 0 7px 0 13px;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--text-primary) 5%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
    overflow: hidden;
}

.mobile-blocspace-messages-searchbar.is-open {
    min-height: 40px;
    height: 46px;
    padding-top: 6px;
    padding-bottom: 6px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity 140ms ease, transform 140ms ease;
}

.mobile-blocspace-messages-searchbar > i {
    color: var(--text-secondary);
    font-size: 13px;
}

.mobile-blocspace-messages-searchbar input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent !important;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    font: inherit;
    font-size: 15px;
    font-weight: 850;
}

.mobile-blocspace-messages-searchbar input::placeholder {
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
}

.mobile-blocspace-messages-searchbar button {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-blocspace-messages-overview {
    display: none;
    grid-template-columns: minmax(118px, 0.58fr) minmax(0, 1.42fr);
    gap: 9px;
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
    border-radius: 14px;
    background:
        linear-gradient(90deg, color-mix(in srgb, #22c55e 8%, transparent), transparent 42%),
        color-mix(in srgb, var(--surface-color) 76%, transparent);
}

.mobile-blocspace-messages-filters {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: none;
    min-width: 0;
}

.mobile-blocspace-messages-filters::-webkit-scrollbar {
    display: none;
}

.mobile-blocspace-messages-filters button {
    flex: 0 0 auto;
    min-height: 38px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    padding: 0 2px 7px;
    font: inherit;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: none;
    position: relative;
}

.mobile-blocspace-messages-filters button.is-active {
    background: transparent;
    border-color: transparent;
    color: var(--primary-color) !important;
    -webkit-text-fill-color: var(--primary-color);
}

.mobile-blocspace-messages-filters button.is-active::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 0;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
}

.mobile-blocspace-messages-ring {
    min-height: 122px;
    padding-right: 12px;
    border-right: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-blocspace-messages-ring-inner {
    width: min(116px, 100%);
    aspect-ratio: 1;
    border-radius: 999px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        conic-gradient(#22c55e var(--messages-score, 0%), color-mix(in srgb, var(--text-primary) 9%, transparent) 0),
        color-mix(in srgb, var(--background-color) 86%, transparent);
    box-shadow: inset 0 0 0 12px color-mix(in srgb, var(--background-color) 82%, transparent);
}

.mobile-blocspace-messages-ring-inner span,
.mobile-blocspace-messages-ring-inner em {
    color: var(--text-secondary);
    font-size: 9px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-style: normal;
}

.mobile-blocspace-messages-ring-inner strong {
    margin: 5px 0 4px;
    color: var(--text-primary);
    font-size: clamp(32px, 9vw, 48px);
    line-height: 0.9;
    font-weight: 950;
    letter-spacing: 0;
}

.mobile-blocspace-messages-metrics {
    min-width: 0;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0;
}

.mobile-blocspace-messages-metric {
    min-width: 0;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    column-gap: 9px;
    padding: 5px 0;
}

.mobile-blocspace-messages-metric + .mobile-blocspace-messages-metric {
    border-top: 1px solid color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.mobile-blocspace-messages-metric i {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #22c55e;
    font-size: 12px;
}

.mobile-blocspace-messages-metric span {
    min-width: 0;
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-blocspace-messages-metric strong {
    grid-column: 2;
    min-width: 0;
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.05;
    font-weight: 950;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-blocspace-messages-latest {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 0;
    padding-top: 2px;
}

.mobile-blocspace-messages-latest:empty {
    display: none;
}

.mobile-blocspace-messages-row {
    width: 100%;
    min-height: 74px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-color) 82%, transparent);
    color: var(--text-primary);
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 36px;
    align-items: center;
    gap: 10px;
    padding: 7px;
    text-align: left;
    font: inherit;
    cursor: pointer;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--text-primary) 5%, transparent);
    overflow: hidden;
}

.mobile-blocspace-messages-row:active {
    transform: scale(0.992);
}

.mobile-blocspace-messages-row.is-unread .mobile-blocspace-messages-row-copy strong,
.mobile-blocspace-messages-row.is-unread .mobile-blocspace-messages-row-copy em {
    color: var(--text-primary);
}

.mobile-blocspace-messages-avatar {
    width: 36px;
    height: 36px;
    min-width: 42px;
    max-width: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 950;
    overflow: hidden;
    position: relative;
    flex: 0 0 42px;
}

.mobile-blocspace-messages-avatar img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: inherit !important;
    flex: 0 0 auto !important;
}

.mobile-blocspace-messages-avatar i {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    opacity: 0.18;
}

.mobile-blocspace-messages-avatar span {
    position: relative;
    z-index: 1;
}

.mobile-blocspace-messages-row-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mobile-blocspace-messages-row-copy strong,
.mobile-blocspace-messages-row-copy span,
.mobile-blocspace-messages-row-copy em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-blocspace-messages-row-copy strong {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.05;
    font-weight: 950;
}

.mobile-blocspace-messages-row-copy span {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.1;
    font-weight: 820;
}

.mobile-blocspace-messages-row-copy span b {
    display: inline-flex;
    align-items: center;
    margin-right: 7px;
    color: var(--text-primary);
    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mobile-blocspace-messages-row-copy em {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.2;
    font-style: normal;
    font-weight: 720;
}

.mobile-blocspace-messages-row-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1;
    font-weight: 850;
    white-space: nowrap;
}

.mobile-blocspace-messages-row-meta b {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
}

.mobile-blocspace-messages-row-delete {
    width: 34px;
    height: 34px;
    border-radius: 13px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
    background: color-mix(in srgb, var(--surface-color) 94%, transparent);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--text-primary) 5%, transparent);
    cursor: pointer;
}

.mobile-blocspace-messages-row-delete i {
    color: inherit;
    -webkit-text-fill-color: inherit;
    font-size: 12px;
    pointer-events: none;
}

.mobile-blocspace-messages-row-delete:active {
    transform: scale(0.96);
}

html[data-theme="light"] .mobile-blocspace-messages-row-delete,
body[data-theme="light"] .mobile-blocspace-messages-row-delete,
html[data-theme="light-accent"] .mobile-blocspace-messages-row-delete,
body[data-theme="light-accent"] .mobile-blocspace-messages-row-delete {
    background: #ffffff !important;
    border-color: rgba(5, 5, 5, 0.12) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

.mobile-blocspace-messages-empty {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary);
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
}

.mobile-blocspace-messages-empty i {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
    color: var(--text-primary);
}

.mobile-blocspace-messages-empty strong {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 950;
}

.mobile-blocspace-messages-empty span {
    max-width: 240px;
    font-size: 12px;
    font-weight: 760;
}

/* Light accent final surface pass for Bloc Space tabs. */
html[data-theme="light-accent"],
body[data-theme="light-accent"] {
    --blocspace-light-accent-bg: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 5%, #ffffff 95%);
    --blocspace-light-accent-surface: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 7%, #ffffff 93%);
    --blocspace-light-accent-card: rgba(255, 255, 255, 0.88);
    --blocspace-light-accent-border: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 18%, rgba(5, 5, 5, 0.12));
}

html[data-theme="light-accent"] .mobile-blocspace-shell,
body[data-theme="light-accent"] .mobile-blocspace-shell,
html[data-theme="light-accent"] .mobile-blocspace-tab-panel,
body[data-theme="light-accent"] .mobile-blocspace-tab-panel {
    background:
        radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 10%, transparent), transparent 34%),
        linear-gradient(180deg, var(--blocspace-light-accent-bg), #ffffff 42%, var(--blocspace-light-accent-bg)) !important;
    color: #050505 !important;
}

html[data-theme="light-accent"] .mobile-blocspace-shell-header,
body[data-theme="light-accent"] .mobile-blocspace-shell-header,
html[data-theme="light-accent"] .mobile-blocspace-tab-rail,
body[data-theme="light-accent"] .mobile-blocspace-tab-rail,
html[data-theme="light-accent"] .mobile-blocspace-nav-drawer,
body[data-theme="light-accent"] .mobile-blocspace-nav-drawer {
    background: color-mix(in srgb, var(--blocspace-light-accent-bg) 88%, rgba(255, 255, 255, 0.82)) !important;
    border-color: var(--blocspace-light-accent-border) !important;
    color: #050505 !important;
}

html[data-theme="light-accent"] .mobile-blocspace-messages-shell,
body[data-theme="light-accent"] .mobile-blocspace-messages-shell,
html[data-theme="light-accent"] .mobile-blocspace-messages-overview,
body[data-theme="light-accent"] .mobile-blocspace-messages-overview,
html[data-theme="light-accent"] .mobile-blocspace-dashboard-email-shell,
body[data-theme="light-accent"] .mobile-blocspace-dashboard-email-shell,
html[data-theme="light-accent"] .mobile-blocspace-dashboard-email-frame,
body[data-theme="light-accent"] .mobile-blocspace-dashboard-email-frame {
    background: var(--blocspace-light-accent-card) !important;
    border-color: var(--blocspace-light-accent-border) !important;
    color: #050505 !important;
    box-shadow: 0 18px 42px rgba(5, 5, 5, 0.07) !important;
}

html[data-theme="light-accent"] .mobile-blocspace-messages-actions button,
body[data-theme="light-accent"] .mobile-blocspace-messages-actions button,
html[data-theme="light-accent"] .mobile-blocspace-messages-filters button,
body[data-theme="light-accent"] .mobile-blocspace-messages-filters button,
html[data-theme="light-accent"] .mobile-blocspace-messages-row,
body[data-theme="light-accent"] .mobile-blocspace-messages-row {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: var(--blocspace-light-accent-border) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light-accent"] .mobile-blocspace-messages-filters button,
body[data-theme="light-accent"] .mobile-blocspace-messages-filters button {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html[data-theme="light-accent"] .mobile-blocspace-messages-searchbar,
body[data-theme="light-accent"] .mobile-blocspace-messages-searchbar {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: var(--blocspace-light-accent-border) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light-accent"] .mobile-blocspace-messages-actions button[data-mobile-message-compose],
body[data-theme="light-accent"] .mobile-blocspace-messages-actions button[data-mobile-message-compose],
html[data-theme="light-accent"] .mobile-blocspace-messages-actions button[data-mobile-message-call],
body[data-theme="light-accent"] .mobile-blocspace-messages-actions button[data-mobile-message-call] {
    background: rgba(255, 255, 255, 0.78) !important;
    border-color: var(--blocspace-light-accent-border) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active,
body[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--accent-color, var(--primary-color, #ff4d2e)) !important;
    -webkit-text-fill-color: var(--accent-color, var(--primary-color, #ff4d2e)) !important;
}

html[data-theme="light"] .mobile-blocspace-messages-filters button.is-active,
body[data-theme="light"] .mobile-blocspace-messages-filters button.is-active,
html[data-theme="light"] .mobile-blocspace-messages-filters button.is-active *,
body[data-theme="light"] .mobile-blocspace-messages-filters button.is-active *,
html[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active *,
body[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active * {
    color: var(--accent-color, var(--primary-color, #ff4d2e)) !important;
    -webkit-text-fill-color: var(--accent-color, var(--primary-color, #ff4d2e)) !important;
}

html[data-theme="light-accent"] .mobile-blocspace-messages-head h2,
html[data-theme="light-accent"] .mobile-blocspace-messages-row-copy strong,
html[data-theme="light-accent"] .mobile-blocspace-messages-row-copy span b,
html[data-theme="light-accent"] .mobile-blocspace-messages-metric strong,
html[data-theme="light-accent"] .mobile-blocspace-messages-ring-inner strong,
body[data-theme="light-accent"] .mobile-blocspace-messages-head h2,
body[data-theme="light-accent"] .mobile-blocspace-messages-row-copy strong,
body[data-theme="light-accent"] .mobile-blocspace-messages-row-copy span b,
body[data-theme="light-accent"] .mobile-blocspace-messages-metric strong,
body[data-theme="light-accent"] .mobile-blocspace-messages-ring-inner strong {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

.mobile-blocspace-message-composer {
    position: fixed;
    inset: 0;
    z-index: 2147483646 !important;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    isolation: isolate;
}

.mobile-blocspace-message-composer.is-open {
    pointer-events: auto;
}

.mobile-blocspace-message-composer-scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.36);
    opacity: 0;
    transition: opacity 180ms ease;
}

.mobile-blocspace-message-composer.is-open .mobile-blocspace-message-composer-scrim {
    opacity: 1;
}

.mobile-blocspace-message-composer-panel {
    position: relative;
    z-index: 1;
    width: min(430px, calc(100vw - 20px));
    max-height: min(76vh, 690px);
    margin: 0 10px max(10px, env(safe-area-inset-bottom));
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface-color) 96%, var(--background-color) 4%);
    color: var(--text-primary);
    padding: 10px 14px 14px;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
    transform: translateY(24px);
    opacity: 0;
    transition: transform 220ms ease, opacity 180ms ease;
    overflow: hidden;
}

.mobile-blocspace-message-composer.is-open .mobile-blocspace-message-composer-panel {
    transform: translateY(0);
    opacity: 1;
}

.mobile-blocspace-message-composer-grabber {
    width: 42px;
    height: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 18%, transparent);
    margin: 2px auto 12px;
}

.mobile-blocspace-message-composer-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 12px;
    align-items: center;
}

.mobile-blocspace-message-composer-head strong,
.mobile-blocspace-message-composer-head span {
    display: block;
}

.mobile-blocspace-message-composer-head strong {
    color: var(--text-primary);
    font-size: 26px;
    line-height: 1;
    font-weight: 950;
}

.mobile-blocspace-message-composer-head span {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 760;
}

.mobile-blocspace-message-composer-head button {
    width: 40px;
    height: 40px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color) 84%, transparent);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-blocspace-message-composer-search {
    min-height: 50px;
    margin-top: 14px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--background-color) 64%, transparent);
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 0 13px;
}

.mobile-blocspace-message-composer-search i {
    color: var(--text-secondary);
    font-size: 13px;
}

.mobile-blocspace-message-composer-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent !important;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    font: inherit;
    font-size: 15px;
    font-weight: 850;
}

.mobile-blocspace-message-composer-list {
    max-height: calc(min(76vh, 690px) - 174px);
    overflow-y: auto;
    display: grid;
    gap: 10px;
    margin-top: 0;
}

.mobile-blocspace-message-contact-row {
    min-height: 66px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-color) 82%, transparent);
    color: var(--text-primary);
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 9px;
    padding: 10px;
}

.mobile-blocspace-message-contact-avatar {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    background: color-mix(in srgb, var(--text-primary) 7%, transparent);
    color: var(--text-primary);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 950;
}

.mobile-blocspace-message-contact-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-blocspace-message-contact-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.mobile-blocspace-message-contact-copy strong,
.mobile-blocspace-message-contact-copy em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-blocspace-message-contact-copy strong {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 920;
}

.mobile-blocspace-message-contact-copy em {
    color: var(--text-secondary);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
}

.mobile-blocspace-message-contact-row button {
    min-width: 40px;
    height: 38px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--background-color) 70%, transparent);
    color: var(--text-primary);
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    padding: 0 12px;
}

.mobile-blocspace-message-contact-row button:last-child {
    min-width: 38px;
    width: 38px;
    padding: 0;
    background: color-mix(in srgb, var(--surface-color) 82%, transparent);
    border-color: color-mix(in srgb, var(--text-primary) 8%, transparent);
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
}

.mobile-blocspace-message-composer-empty {
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 14px;
    padding: 18px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 800;
}

html[data-theme="light"] .mobile-blocspace-message-composer-panel,
body[data-theme="light"] .mobile-blocspace-message-composer-panel,
html[data-theme="light-accent"] .mobile-blocspace-message-composer-panel,
body[data-theme="light-accent"] .mobile-blocspace-message-composer-panel,
html[data-theme="light"] .mobile-blocspace-message-contact-row,
body[data-theme="light"] .mobile-blocspace-message-contact-row,
html[data-theme="light-accent"] .mobile-blocspace-message-contact-row,
body[data-theme="light-accent"] .mobile-blocspace-message-contact-row {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(5, 5, 5, 0.1) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .mobile-blocspace-message-composer-search,
body[data-theme="light"] .mobile-blocspace-message-composer-search,
html[data-theme="light-accent"] .mobile-blocspace-message-composer-search,
body[data-theme="light-accent"] .mobile-blocspace-message-composer-search,
html[data-theme="light"] .mobile-blocspace-message-composer-head button,
body[data-theme="light"] .mobile-blocspace-message-composer-head button,
html[data-theme="light-accent"] .mobile-blocspace-message-composer-head button,
body[data-theme="light-accent"] .mobile-blocspace-message-composer-head button {
    background: #ffffff !important;
    border-color: rgba(5, 5, 5, 0.12) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .mobile-blocspace-message-contact-row button:last-child,
body[data-theme="light"] .mobile-blocspace-message-contact-row button:last-child,
html[data-theme="light-accent"] .mobile-blocspace-message-contact-row button:last-child,
body[data-theme="light-accent"] .mobile-blocspace-message-contact-row button:last-child {
    background: #ffffff !important;
    border-color: rgba(5, 5, 5, 0.12) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}


/* Bloc Space in-page email inbox/thread UI */
.mobile-blocspace-messages-row.is-email-row .mobile-blocspace-messages-row-copy span,
.mobile-blocspace-messages-row.is-email-row .mobile-blocspace-messages-row-copy em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-blocspace-messages-avatar.is-email {
    position: relative;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 10%, var(--text-primary) 5%, transparent);
    color: var(--text-primary);
}

.mobile-blocspace-messages-avatar.is-email i {
    font-size: 17px;
    opacity: 0.72;
}

.mobile-blocspace-messages-avatar.is-email.has-logo {
    background: #ffffff;
}

.mobile-blocspace-messages-avatar.is-email.has-logo i {
    display: none;
}

.mobile-blocspace-messages-avatar.is-email.has-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-blocspace-email-reader {
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    background: var(--background-color, #fff);
    color: var(--text-primary, #050505);
    isolation: isolate;
}

.mobile-blocspace-email-reader-panel {
    height: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--background-color, #fff);
    color: var(--text-primary, #050505);
}

.mobile-blocspace-email-reader-head {
    min-height: 54px;
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 18px 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
    background: color-mix(in srgb, var(--background-color, #fff) 96%, var(--surface-color, #fff) 4%);
}

.mobile-blocspace-email-reader-head button {
    width: 42px;
    height: 42px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-color, #fff) 92%, transparent);
    color: var(--text-primary, #050505);
    -webkit-text-fill-color: var(--text-primary, #050505);
    box-shadow: 0 10px 24px rgba(0,0,0,.07);
}

.mobile-blocspace-email-reader-head span,
.mobile-blocspace-email-reader-head strong {
    display: block;
    min-width: 0;
}

.mobile-blocspace-email-reader-head span {
    text-transform: uppercase;
    letter-spacing: .16em;
    font-size: 10px;
    font-weight: 820;
    color: var(--text-secondary, #666);
}

.mobile-blocspace-email-reader-head strong {
    margin-top: 7px;
    font-size: 16px;
    line-height: 1.1;
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary, #050505);
}

.mobile-blocspace-email-reader-body {
    min-height: 0;
    overflow-y: auto;
    padding: 10px 0 calc(150px + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
}

.mobile-blocspace-email-thread-card {
    border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
    border-radius: 16px;
    background: color-mix(in srgb, var(--surface-color, #fff) 86%, transparent);
    color: var(--text-primary, #050505);
    box-shadow: 0 14px 36px rgba(0,0,0,.05);
}


.mobile-blocspace-email-thread-card.is-email-summary {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    padding: 2px 16px 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.mobile-blocspace-email-summary-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.mobile-blocspace-email-summary-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.mobile-blocspace-email-summary-top strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #050505);
    font-size: 14px;
    font-weight: 760;
}

.mobile-blocspace-email-summary-top small,
.mobile-blocspace-email-summary-copy em,
.mobile-blocspace-email-summary-copy span {
    color: var(--text-secondary, #666);
    font-size: 10px;
    font-style: normal;
    font-weight: 650;
}

.mobile-blocspace-email-summary-copy em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-blocspace-email-summary-copy h1 {
    margin: 4px 0 0;
    color: var(--text-primary, #050505);
    font-size: clamp(14px, 3.8vw, 17px);
    line-height: 1.2;
    font-weight: 680;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.mobile-blocspace-email-thread-card.is-sender {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px;
}

.mobile-blocspace-email-thread-avatar {
    width: 34px;
    height: 34px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 12%, transparent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 950;
}

.mobile-blocspace-email-thread-card.is-sender strong,
.mobile-blocspace-email-thread-card.is-sender em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-blocspace-email-thread-card.is-sender strong {
    font-size: 15px;
    font-weight: 820;
    color: var(--text-primary, #050505);
}

.mobile-blocspace-email-thread-card.is-subject {
    padding: 16px 18px;
    display: grid;
    gap: 7px;
    background: #ffffff;
}

.mobile-blocspace-email-thread-card.is-subject span {
    color: var(--text-secondary, #666);
    font-size: 11px;
    font-weight: 860;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.mobile-blocspace-email-thread-card.is-subject h1 {
    margin: 0;
    color: var(--text-primary, #050505);
    font-size: clamp(15px, 4vw, 18px);
    line-height: 1.08;
    font-weight: 680;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.mobile-blocspace-email-thread-card.is-subject em {
    color: var(--text-secondary, #666);
    font-size: 12px;
    font-style: normal;
    font-weight: 760;
}

.mobile-blocspace-email-thread-card.is-sender em,
.mobile-blocspace-email-thread-card small {
    font-size: 12px;
    font-style: normal;
    color: var(--text-secondary, #666);
}

.mobile-blocspace-email-thread-card.is-incoming,
.mobile-blocspace-email-thread-card.is-outgoing {
    width: min(88%, 760px);
    padding: 15px 16px;
}

.mobile-blocspace-email-thread-card.is-outgoing {
    margin-left: auto;
    background: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 12%, #ffffff 88%);
    border-color: color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 35%, transparent);
}

.mobile-blocspace-email-thread-message-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 10px;
}

.mobile-blocspace-email-thread-message-head strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 840;
    color: var(--text-primary, #050505);
}

.mobile-blocspace-email-thread-card p {
    margin: 0;
    color: var(--text-primary, #050505);
    font-size: 13px;
    line-height: 1.42;
    font-weight: 520;
    overflow-wrap: anywhere;
}

.mobile-blocspace-email-clean-body {
    white-space: pre-wrap;
}

.mobile-blocspace-email-thread-card.has-original {
    width: 100%;
}

.mobile-blocspace-email-original {
    margin-top: 14px;
    border-top: 1px solid rgba(5,5,5,.08);
    padding-top: 10px;
}

.mobile-blocspace-email-original summary {
    cursor: pointer;
    color: var(--text-secondary, #666);
    font-size: 12px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.mobile-blocspace-email-original[open] summary {
    margin-bottom: 10px;
    color: var(--text-primary, #050505);
}

.mobile-blocspace-email-thread-card.has-html {
    width: 100%;
    max-width: 100%;
    padding: 4px 0 0;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.mobile-blocspace-email-thread-card.has-html .mobile-blocspace-email-thread-message-head {
    padding: 0 14px 6px;
}

.mobile-blocspace-email-html-frame {
    display: block;
    width: 100%;
    min-height: 180px;
    height: 180px;
    margin-top: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    overflow: hidden;
}


.mobile-blocspace-email-html-direct {
    display: none;
}


.mobile-blocspace-email-html-direct h1,
.mobile-blocspace-email-html-direct h2,
.mobile-blocspace-email-html-direct h3 {
    font-size: clamp(18px, 6vw, 26px) !important;
    line-height: 1.12 !important;
}

.mobile-blocspace-email-html-direct img {
    display: block !important;
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

.mobile-blocspace-email-html-direct a {
    color: #2563eb;
}

.mobile-blocspace-email-text-details {
    margin-top: 12px;
    color: var(--text-primary, #050505);
}

.mobile-blocspace-email-text-details summary {
    cursor: pointer;
    color: var(--text-secondary, #666);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.mobile-blocspace-email-text-fallback {
    margin-top: 0 !important;
    padding: 14px 16px;
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 14px;
    background: rgba(255,255,255,.92);
}

.mobile-blocspace-email-text-fallback.is-empty {
    color: var(--text-secondary, #777);
}

.mobile-blocspace-email-reply {
    position: fixed;
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 10;
    border: 1px solid rgba(5,5,5,.08);
    border-radius: 24px;
    background: #ffffff;
    color: #050505;
    color-scheme: light;
    padding: 7px;
    box-shadow: 0 18px 54px rgba(0,0,0,.18);
    backdrop-filter: none;
}

.mobile-blocspace-email-reply::before {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(118px + env(safe-area-inset-bottom, 0px));
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to top, #ffffff 76%, rgba(255,255,255,.92) 90%, rgba(255,255,255,0));
}

.mobile-blocspace-email-reply label {
    display: block;
    margin: 0 8px 6px;
    color: #303030;
    font-size: 12px;
    font-weight: 760;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-blocspace-email-reply div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: 8px;
    align-items: end;
}

.mobile-blocspace-email-reply textarea {
    appearance: none;
    -webkit-appearance: none;
    min-height: 40px;
    max-height: 78px;
    resize: none;
    border: 1px solid rgba(5,5,5,.10);
    border-radius: 14px;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    caret-color: #050505;
    color-scheme: light;
    outline: 0;
    padding: 9px 12px;
    font: inherit;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 650;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}

.mobile-blocspace-email-reply textarea::placeholder {
    color: rgba(5,5,5,.42);
    -webkit-text-fill-color: rgba(5,5,5,.42);
}

.mobile-blocspace-email-reply button {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 17px;
    background: var(--accent-color, var(--primary-color, #ff4d2e));
    color: #050505;
    -webkit-text-fill-color: #050505;
    font-size: 17px;
    box-shadow: 0 18px 36px color-mix(in srgb, var(--accent-color, var(--primary-color, #ff4d2e)) 30%, transparent);
}

.mobile-blocspace-email-reply button:disabled {
    opacity: .55;
}

.mobile-blocspace-email-reply > span {
    display: block;
    margin: 8px 8px 0;
    color: #b42318;
    font-size: 12px;
    font-weight: 780;
}

html[data-theme="light"] .mobile-blocspace-email-reader,
body[data-theme="light"] .mobile-blocspace-email-reader,
html[data-theme="light-accent"] .mobile-blocspace-email-reader,
body[data-theme="light-accent"] .mobile-blocspace-email-reader,
html[data-theme="light"] .mobile-blocspace-email-reader-panel,
body[data-theme="light"] .mobile-blocspace-email-reader-panel,
html[data-theme="light-accent"] .mobile-blocspace-email-reader-panel,
body[data-theme="light-accent"] .mobile-blocspace-email-reader-panel {
    background: #ffffff !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .mobile-blocspace-email-thread-card,
body[data-theme="light"] .mobile-blocspace-email-thread-card,
html[data-theme="light-accent"] .mobile-blocspace-email-thread-card,
body[data-theme="light-accent"] .mobile-blocspace-email-thread-card,
html[data-theme="light"] .mobile-blocspace-email-reader-head button,
body[data-theme="light"] .mobile-blocspace-email-reader-head button,
html[data-theme="light-accent"] .mobile-blocspace-email-reader-head button,
body[data-theme="light-accent"] .mobile-blocspace-email-reader-head button {
    background: #ffffff !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    border-color: rgba(5,5,5,.10) !important;
}


.mobile-blocspace-messages-loading {
    min-height: 160px;
    border: 1px solid color-mix(in srgb, var(--text-primary) 7%, transparent);
    border-radius: 24px;
    background: color-mix(in srgb, var(--surface-color) 84%, transparent);
    display: grid;
    place-items: center;
    gap: 9px;
    padding: 24px;
    color: var(--text-secondary);
    text-align: center;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--text-primary) 5%, transparent);
}

.mobile-blocspace-messages-loading span {
    width: 44px;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 12%, transparent);
    animation: mobileBlocspaceMessagePulse 0.9s ease-in-out infinite alternate;
}

.mobile-blocspace-messages-loading span:nth-child(2) { width: 70px; animation-delay: .12s; }
.mobile-blocspace-messages-loading span:nth-child(3) { width: 54px; animation-delay: .24s; }
.mobile-blocspace-messages-loading strong { color: var(--text-primary); font-size: 13px; font-weight: 900; }

@keyframes mobileBlocspaceMessagePulse {
    from { opacity: .28; transform: scaleX(.82); }
    to { opacity: 1; transform: scaleX(1); }
}


#mobile-blocspace-email-reader .mobile-blocspace-email-reply,
#mobile-blocspace-email-reader .mobile-blocspace-email-reply div {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    color-scheme: light !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-reply textarea,
#mobile-blocspace-email-reader .mobile-blocspace-email-reply textarea:focus,
#mobile-blocspace-email-reader .mobile-blocspace-email-reply textarea:active {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    caret-color: #050505 !important;
    color-scheme: light !important;
    border: 1px solid rgba(5,5,5,.12) !important;
    outline: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-reply textarea::placeholder {
    color: rgba(5,5,5,.42) !important;
    -webkit-text-fill-color: rgba(5,5,5,.42) !important;
}


/* Light-mode mobile button safety: prevent black-filled buttons with hidden text. */
html[data-theme="light"] body .mobile-blocspace-shell button,
html[data-theme="light-accent"] body .mobile-blocspace-shell button,
body[data-theme="light"] .mobile-blocspace-shell button,
body[data-theme="light-accent"] .mobile-blocspace-shell button {
    color-scheme: light !important;
}

html[data-theme="light"] body .mobile-blocspace-shell button:not(.mobile-blocspace-email-reply button):not([data-mobile-primary]):not(.is-danger),
html[data-theme="light-accent"] body .mobile-blocspace-shell button:not(.mobile-blocspace-email-reply button):not([data-mobile-primary]):not(.is-danger),
body[data-theme="light"] .mobile-blocspace-shell button:not(.mobile-blocspace-email-reply button):not([data-mobile-primary]):not(.is-danger),
body[data-theme="light-accent"] .mobile-blocspace-shell button:not(.mobile-blocspace-email-reply button):not([data-mobile-primary]):not(.is-danger) {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
}

html[data-theme="light"] .mobile-blocspace-message-contact-row button,
html[data-theme="light-accent"] .mobile-blocspace-message-contact-row button,
body[data-theme="light"] .mobile-blocspace-message-contact-row button,
body[data-theme="light-accent"] .mobile-blocspace-message-contact-row button,
html[data-theme="light"] .mobile-blocspace-messages-searchbar button,
html[data-theme="light-accent"] .mobile-blocspace-messages-searchbar button,
body[data-theme="light"] .mobile-blocspace-messages-searchbar button,
body[data-theme="light-accent"] .mobile-blocspace-messages-searchbar button,
html[data-theme="light"] .mobile-blocspace-messages-actions button,
html[data-theme="light-accent"] .mobile-blocspace-messages-actions button,
body[data-theme="light"] .mobile-blocspace-messages-actions button,
body[data-theme="light-accent"] .mobile-blocspace-messages-actions button {
    background: #ffffff !important;
    border-color: rgba(5, 5, 5, 0.12) !important;
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    opacity: 1 !important;
}

html[data-theme="light"] .mobile-blocspace-messages-filters button.is-active,
html[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active,
body[data-theme="light"] .mobile-blocspace-messages-filters button.is-active,
body[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--accent-color, var(--primary-color, #ff4d2e)) !important;
    -webkit-text-fill-color: var(--accent-color, var(--primary-color, #ff4d2e)) !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-reply button,
html[data-theme="light"] #mobile-blocspace-email-reader .mobile-blocspace-email-reply button,
html[data-theme="light-accent"] #mobile-blocspace-email-reader .mobile-blocspace-email-reply button,
body[data-theme="light"] #mobile-blocspace-email-reader .mobile-blocspace-email-reply button,
body[data-theme="light-accent"] #mobile-blocspace-email-reader .mobile-blocspace-email-reply button {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
}

#mobile-blocspace-email-reader .mobile-blocspace-email-reply button i {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Bloc Space messages flatten pass */
.mobile-blocspace-messages-shell {
    gap: 14px;
}

.mobile-blocspace-messages-head {
    margin-bottom: 0;
}

.mobile-blocspace-messages-head h2 {
    font-size: clamp(24px, 6.2vw, 34px);
    line-height: 1.02;
}

.mobile-blocspace-messages-head p {
    max-width: 42vw;
    text-align: right;
}

.mobile-blocspace-messages-actions {
    gap: 12px;
}

.mobile-blocspace-messages-actions button,
html[data-theme="light"] .mobile-blocspace-messages-actions button,
html[data-theme="light-accent"] .mobile-blocspace-messages-actions button,
body[data-theme="light"] .mobile-blocspace-messages-actions button,
body[data-theme="light-accent"] .mobile-blocspace-messages-actions button {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-primary, #050505) !important;
    -webkit-text-fill-color: var(--text-primary, #050505) !important;
}

.mobile-blocspace-messages-searchbar,
html[data-theme="light-accent"] .mobile-blocspace-messages-searchbar,
body[data-theme="light-accent"] .mobile-blocspace-messages-searchbar {
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 0;
    padding-right: 0;
}

.mobile-blocspace-messages-searchbar button,
html[data-theme="light"] .mobile-blocspace-messages-searchbar button,
html[data-theme="light-accent"] .mobile-blocspace-messages-searchbar button,
body[data-theme="light"] .mobile-blocspace-messages-searchbar button,
body[data-theme="light-accent"] .mobile-blocspace-messages-searchbar button {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-blocspace-messages-filters {
    gap: 18px;
    padding: 0 0 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent);
}

.mobile-blocspace-messages-filters button,
html[data-theme="light-accent"] .mobile-blocspace-messages-filters button,
body[data-theme="light-accent"] .mobile-blocspace-messages-filters button {
    min-width: 64px;
    min-height: 36px;
    padding: 0 0 8px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--text-secondary, #666) !important;
    -webkit-text-fill-color: var(--text-secondary, #666) !important;
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 7px;
}

.mobile-blocspace-messages-filters button span,
.mobile-blocspace-messages-filters button b {
    display: inline-flex;
    min-width: 0;
    color: inherit;
    -webkit-text-fill-color: inherit;
}

.mobile-blocspace-messages-filters button b {
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    opacity: 0.62;
}

.mobile-blocspace-messages-filters button.is-active,
html[data-theme="light"] .mobile-blocspace-messages-filters button.is-active,
html[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active,
body[data-theme="light"] .mobile-blocspace-messages-filters button.is-active,
body[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active,
html[data-theme="light"] .mobile-blocspace-messages-filters button.is-active *,
html[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active *,
body[data-theme="light"] .mobile-blocspace-messages-filters button.is-active *,
body[data-theme="light-accent"] .mobile-blocspace-messages-filters button.is-active * {
    color: var(--text-primary, #050505) !important;
    -webkit-text-fill-color: var(--text-primary, #050505) !important;
}

.mobile-blocspace-messages-latest {
    gap: 0;
    padding-top: 0;
}

.mobile-blocspace-messages-row,
html[data-theme="light-accent"] .mobile-blocspace-messages-row,
body[data-theme="light-accent"] .mobile-blocspace-messages-row {
    min-height: 78px;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    grid-template-columns: 38px minmax(0, 1fr) auto 30px;
    gap: 12px;
    padding: 13px 0;
}

.mobile-blocspace-messages-row:active {
    transform: none;
}

.mobile-blocspace-messages-avatar {
    width: 34px;
    height: 34px;
    min-width: 34px;
    max-width: 34px;
    flex-basis: 34px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.mobile-blocspace-messages-avatar.is-email {
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.mobile-blocspace-messages-row-copy {
    gap: 4px;
}

.mobile-blocspace-messages-row-copy strong {
    font-size: 15px;
}

.mobile-blocspace-messages-row-copy span {
    font-size: 12px;
}

.mobile-blocspace-messages-row-copy span:empty {
    display: none;
}

.mobile-blocspace-messages-row-copy em {
    font-size: 12px;
}

.mobile-blocspace-messages-row-meta {
    gap: 8px;
    font-size: 11px;
}

.mobile-blocspace-messages-row-delete,
html[data-theme="light"] .mobile-blocspace-messages-row-delete,
html[data-theme="light-accent"] .mobile-blocspace-messages-row-delete,
body[data-theme="light"] .mobile-blocspace-messages-row-delete,
body[data-theme="light-accent"] .mobile-blocspace-messages-row-delete {
    width: 30px;
    height: 30px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-secondary, #666) !important;
    -webkit-text-fill-color: var(--text-secondary, #666) !important;
}

.mobile-blocspace-messages-empty,
.mobile-blocspace-messages-loading {
    min-height: 160px;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-blocspace-messages-empty i {
    width: 34px;
    height: 34px;
    border-radius: 0;
    background: transparent;
}

.mobile-blocspace-message-contact-row,
html[data-theme="light"] .mobile-blocspace-message-contact-row,
html[data-theme="light-accent"] .mobile-blocspace-message-contact-row,
body[data-theme="light"] .mobile-blocspace-message-contact-row,
body[data-theme="light-accent"] .mobile-blocspace-message-contact-row {
    min-height: 70px;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 12px 0;
}

.mobile-blocspace-message-contact-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}

.mobile-blocspace-message-contact-row button,
.mobile-blocspace-message-contact-row button:last-child,
html[data-theme="light"] .mobile-blocspace-message-contact-row button,
html[data-theme="light-accent"] .mobile-blocspace-message-contact-row button,
body[data-theme="light"] .mobile-blocspace-message-contact-row button,
body[data-theme="light-accent"] .mobile-blocspace-message-contact-row button,
html[data-theme="light"] .mobile-blocspace-message-contact-row button:last-child,
html[data-theme="light-accent"] .mobile-blocspace-message-contact-row button:last-child,
body[data-theme="light"] .mobile-blocspace-message-contact-row button:last-child,
body[data-theme="light-accent"] .mobile-blocspace-message-contact-row button:last-child {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--text-primary, #050505) !important;
    -webkit-text-fill-color: var(--text-primary, #050505) !important;
}

.mobile-blocspace-email-reader-head {
    background: #ffffff;
}

.mobile-blocspace-email-reader-head button,
html[data-theme="light"] .mobile-blocspace-email-reader-head button,
html[data-theme="light-accent"] .mobile-blocspace-email-reader-head button,
body[data-theme="light"] .mobile-blocspace-email-reader-head button,
body[data-theme="light-accent"] .mobile-blocspace-email-reader-head button {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-blocspace-email-reader-body {
    gap: 0;
    padding-top: 0;
}

.mobile-blocspace-email-thread-card,
html[data-theme="light"] .mobile-blocspace-email-thread-card,
html[data-theme="light-accent"] .mobile-blocspace-email-thread-card,
body[data-theme="light"] .mobile-blocspace-email-thread-card,
body[data-theme="light-accent"] .mobile-blocspace-email-thread-card {
    border: 0 !important;
    border-bottom: 1px solid rgba(5, 5, 5, 0.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mobile-blocspace-email-thread-card.is-incoming,
.mobile-blocspace-email-thread-card.is-outgoing,
.mobile-blocspace-email-thread-card.has-original {
    width: 100%;
    margin-left: 0;
    padding: 16px 18px;
}

.mobile-blocspace-email-thread-card.is-email-summary {
    padding: 14px 18px 12px;
}

.mobile-blocspace-email-thread-avatar {
    border-radius: 10px;
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}

/* Analytics canvas: indigo accent, lifted in dark so it stays readable. */
.mobile-blocspace-analytics-canvas {
    --analytics-accent: #4B4CE0;
}

html[data-theme="dark"] .mobile-blocspace-analytics-canvas,
body[data-theme="dark"] .mobile-blocspace-analytics-canvas {
    --analytics-accent: #8F90FF;
}

/* Qualified with html body and the modal id to outrank the theme rule
   `html[data-theme="light"] body [id*="modal"] *`, which paints every
   descendant black and would flatten the accent number to ink. */
html body #blocspace-modal .mobile-blocspace-analytics-canvas .is-accent-metric,
html body .mobile-blocspace-analytics-canvas .is-accent-metric {
    color: var(--analytics-accent) !important;
    -webkit-text-fill-color: var(--analytics-accent) !important;
}

/* Calendar activity dots. Backgrounds aren't hit by the blanket colour rule,
   but they are declared here so both dots stay in one place. */
html body .mobile-blocspace-analytics-canvas .is-activity-dot {
    background: color-mix(in srgb, var(--text-primary) 34%, transparent);
}

html body .mobile-blocspace-analytics-canvas .is-accent-dot {
    background: var(--analytics-accent);
}

/* Wallet text-link (connect stripe). Qualified with html body to outrank the
   blanket `[id*="modal"] *` colour rule, same pattern as the accent metric. */
html body #blocspace-modal .is-wallet-textlink,
html body .is-wallet-textlink {
    color: var(--analytics-accent, #4B4CE0) !important;
    -webkit-text-fill-color: var(--analytics-accent, #4B4CE0) !important;
}

#blocspace-wallet-finance {
    --analytics-accent: #4B4CE0;
}

html[data-theme="dark"] #blocspace-wallet-finance,
body[data-theme="dark"] #blocspace-wallet-finance {
    --analytics-accent: #8F90FF;
}

/* Member tag reads in the accent, qualified to outrank the blanket rule. */
html body #blocspace-modal .mobile-blocspace-analytics-canvas .is-member-tag,
html body .mobile-blocspace-analytics-canvas .is-member-tag {
    color: var(--analytics-accent) !important;
    -webkit-text-fill-color: var(--analytics-accent) !important;
}

/* Top Engagers rows read as an open list, not cards. The global
   `button, .btn` glass rule in mobile.html hands every button a blur and a
   drop shadow; inline styles can't cancel a shadow they never set, so the
   rows picked up grey card edges against the white ground. Strip the glass
   here and let the hairline dividers carry the structure. */
html body #blocspace-modal .mobile-blocspace-engager-row,
html body .mobile-blocspace-engager-row {
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

html body #blocspace-modal .mobile-blocspace-engager-row:active,
html body .mobile-blocspace-engager-row:active {
    background: rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="dark"] body .mobile-blocspace-engager-row,
body[data-theme="dark"] .mobile-blocspace-engager-row {
    border-bottom-color: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="dark"] body .mobile-blocspace-engager-row:active,
body[data-theme="dark"] .mobile-blocspace-engager-row:active {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Member grid tiles and the detail sheet draw their own borders. The global
   `button, .btn` glass rule in mobile.html would add a blur and drop shadow on
   top, which reads as a doubled card edge -- same trap as the engager rows. */
html body #blocspace-modal .mobile-blocspace-member-card,
html body .mobile-blocspace-member-card,
html body #blocspace-modal .mobile-blocspace-member-sheet button,
html body .mobile-blocspace-member-sheet button {
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html body #blocspace-modal .mobile-blocspace-member-card:active,
html body .mobile-blocspace-member-card:active {
    background: rgba(15, 23, 42, 0.04) !important;
}

html[data-theme="dark"] body .mobile-blocspace-member-card,
body[data-theme="dark"] .mobile-blocspace-member-card {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

html[data-theme="dark"] body .mobile-blocspace-member-card:active,
body[data-theme="dark"] .mobile-blocspace-member-card:active {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* Closed drawers were parked with transform: translateX(100%) only, which slides
   them out of sight but leaves them laid out -- the body measured 948px against a
   430px viewport, so the whole app could be dragged sideways into dead space on
   iOS (overflow-x:hidden does not stop touch panning there).
   visibility:hidden keeps the slide animation (unlike display:none) while taking
   the closed drawer out of the scrollable area. */
html body #market-drawer.market-drawer-hidden,
html body #ai-drawer.ai-drawer-hidden {
    /* visibility:hidden still occupies layout, so it did not shrink the page.
       Pinning the closed drawer to the viewport's own right edge keeps it
       off-screen without extending the scrollable width, and leaves the
       translateX slide animation untouched. */
    visibility: hidden;
    /* !important because #ai-drawer sets left/width inline, which otherwise wins. */
    left: auto !important;
    right: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* BlocSpace fills the screen, so nothing behind it should pan. The body already
   carries overflow:hidden while the modal is open, but it still accepted a
   horizontal scroll offset -- the page could be dragged sideways off the app,
   exposing a blank gutter. Clamp the width so there is nothing to scroll to. */
html body.blocspace-modal-open {
    max-width: 100vw !important;
    overflow-x: clip !important;
    overscroll-behavior-x: none !important;
}

html body.blocspace-modal-open #blocspace-modal {
    max-width: 100vw;
    overscroll-behavior-x: none;
}