#stream-empty {
    display: none;
    text-align: center;
    padding: 48px 22px 56px;
    color: var(--text-secondary);
}

/* The placeholder is the empty state with the words taken out. Same 82px mark,
   same rhythm down the page, so when the answer arrives the layout settles
   instead of jumping -- and a fast reply reads as one steady screen rather
   than two. It centers on the visible strip rather than the viewport: the tab
   already pads 60px of header plus the top inset above this box, and the nav
   pill floats over the bottom, so only what is left is fair to center in --
   otherwise the mark sits low, pushed down by a header it cannot see. */
#stream-loading-skeleton {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* 60px header and the top inset are the parent's padding; 96px is the nav
       pill plus its bottom inset. 32px trims this box's own 16px gutters. */
    min-height: calc(100dvh - 60px - env(safe-area-inset-top, 0px) - 96px - env(safe-area-inset-bottom, 0px) - 32px);
    padding: 24px 22px;
    background: var(--background-color);
    text-align: center;
}

.mobile-stream-loading-mark {
    position: relative;
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 10%, var(--border-color, rgba(0, 0, 0, 0.08)) 90%);
    border-radius: 26px;
    background:
        radial-gradient(circle at 34% 26%, color-mix(in srgb, var(--text-primary, #111) 5%, transparent) 0 28%, transparent 48%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-color, #fff) 96%, var(--text-primary, #111) 4%), var(--surface-color, #fff));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

/* Two rings ripple outward from the tower, the way a signal would. The empty
   state draws these same rings holding still; here they carry the waiting. */
.mobile-stream-loading-mark::before,
.mobile-stream-loading-mark::after {
    content: "";
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 12%, transparent);
    border-radius: 999px;
    animation: mobile-stream-loading-ripple 2.4s cubic-bezier(0.33, 0, 0.2, 1) infinite;
}

.mobile-stream-loading-mark::before {
    inset: 29px;
}

.mobile-stream-loading-mark::after {
    inset: 29px;
    animation-delay: 1.2s;
}

@keyframes mobile-stream-loading-ripple {
    0% { inset: 29px; opacity: 0; }
    18% { opacity: 0.58; }
    100% { inset: 8px; opacity: 0; }
}

.mobile-stream-loading-mark i {
    position: relative;
    z-index: 1;
    font-size: 24px;
    color: var(--text-primary, #111);
    -webkit-text-fill-color: var(--text-primary, #111);
    animation: mobile-stream-loading-pulse 2.4s ease-in-out infinite;
}

@keyframes mobile-stream-loading-pulse {
    0%, 100% { opacity: 0.45; }
    18% { opacity: 1; }
}

.mobile-stream-loading-title {
    max-width: 330px;
    margin: 0 auto 6px;
    color: var(--text-primary, var(--text-color));
    font-size: 21px;
    font-weight: 840;
    letter-spacing: 0;
    line-height: 1.18;
}

.mobile-stream-loading-copy {
    max-width: 315px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.55;
    opacity: 0.82;
}

@media (prefers-reduced-motion: reduce) {
    .mobile-stream-loading-mark::before,
    .mobile-stream-loading-mark::after,
    .mobile-stream-loading-mark i {
        animation: none;
    }
    .mobile-stream-loading-mark::before { inset: 18px; opacity: 0.58; }
    .mobile-stream-loading-mark::after { inset: 29px; opacity: 0.58; }
    .mobile-stream-loading-mark i { opacity: 1; }
}

.mobile-stream-empty-mark {
    position: relative;
    width: 82px;
    height: 82px;
    margin: 0 auto 18px;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 10%, var(--border-color, rgba(0, 0, 0, 0.08)) 90%);
    border-radius: 26px;
    background:
        radial-gradient(circle at 34% 26%, color-mix(in srgb, var(--text-primary, #111) 5%, transparent) 0 28%, transparent 48%),
        linear-gradient(145deg, color-mix(in srgb, var(--surface-color, #fff) 96%, var(--text-primary, #111) 4%), var(--surface-color, #fff));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

.mobile-stream-empty-mark::before,
.mobile-stream-empty-mark::after {
    content: "";
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 12%, transparent);
    border-radius: 999px;
    opacity: 0.58;
}

.mobile-stream-empty-mark::before {
    inset: 18px;
}

.mobile-stream-empty-mark::after {
    inset: 29px;
}

.mobile-stream-empty-mark i {
    position: relative;
    z-index: 1;
    font-size: 24px;
    color: var(--text-primary, #111);
    -webkit-text-fill-color: var(--text-primary, #111);
}

.mobile-stream-empty-title {
    max-width: 330px;
    margin: 0 auto 6px;
    color: var(--text-primary, var(--text-color));
    font-size: 21px;
    font-weight: 840;
    letter-spacing: 0;
    line-height: 1.18;
}

.mobile-stream-empty-copy {
    max-width: 315px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.55;
    opacity: 0.82;
}

.mobile-stream-empty-go-live {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    margin: 20px auto 0;
    padding: 0 24px;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 14%, var(--border-color, transparent));
    border-radius: 999px;
    background: var(--surface-color, #fff);
    color: var(--text-primary, var(--text-color));
    -webkit-text-fill-color: var(--text-primary, var(--text-color));
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.1);
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}

.mobile-stream-empty-go-live i,
.mobile-stream-empty-go-live span {
    color: currentColor;
    -webkit-text-fill-color: currentColor;
}

.mobile-stream-empty-go-live:disabled,
.mobile-stream-empty-form button:disabled {
    opacity: 0.72;
}

.mobile-stream-empty-note {
    display: none;
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.35;
    opacity: 0.62;
}

.mobile-stream-empty-signup {
    display: none;
    width: min(100%, 340px);
    margin: 14px auto 0;
}

.mobile-stream-empty-signup-note {
    margin-bottom: 12px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 780;
    line-height: 1.4;
}

.mobile-stream-empty-form {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 54px;
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 12%, var(--border-color) 88%);
    border-radius: 22px;
    background: var(--surface-color, #fff);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.mobile-stream-empty-form input {
    min-width: 0;
    flex: 1;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    padding: 0 13px;
    font-size: 13px;
    font-weight: 720;
    outline: none;
    box-sizing: border-box;
}

.mobile-stream-empty-form input::placeholder {
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    opacity: 0.72;
}

.mobile-stream-empty-form button {
    flex: 0 0 auto;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--text-primary, #111) 12%, var(--border-color, transparent));
    border-radius: 17px;
    background: color-mix(in srgb, var(--text-primary, #111) 4%, var(--surface-color, #fff) 96%);
    color: var(--text-primary, var(--text-color));
    -webkit-text-fill-color: var(--text-primary, var(--text-color));
    padding: 0 15px;
    font-size: 12px;
    font-weight: 880;
}

.mobile-stream-empty-status {
    min-height: 16px;
    margin-top: 9px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 760;
}

#stream-empty-state .mobile-stream-empty-signup {
    width: min(100%, 300px);
    margin-top: 0;
}

.mobile-stream-waitlist-summary {
    margin: -4px 0 12px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 720;
    line-height: 1.4;
}

.mobile-stream-waitlist-list {
    display: grid;
    gap: 8px;
}

.mobile-stream-waitlist-empty {
    padding: 14px;
    border: 1px dashed var(--border-color);
    border-radius: 16px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 720;
    line-height: 1.4;
}

.mobile-stream-waitlist-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 15px;
    background: color-mix(in srgb, var(--surface-color, transparent) 82%, transparent);
}

.mobile-stream-waitlist-row a {
    min-width: 0;
    overflow: hidden;
    color: var(--text-primary);
    -webkit-text-fill-color: var(--text-primary);
    font-size: 12px;
    font-weight: 840;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
}

.mobile-stream-waitlist-row span {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 780;
}