#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 Live empty state. The dark broadcast card borrows the signal-first
   hierarchy of the design reference while every control maps to a stream
   source the app can actually publish. */
#stream-empty {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 2px 118px;
    text-align: left;
}

.mobile-stream-empty-hero {
    position: relative;
    overflow: hidden;
    padding: 17px 16px 16px;
    border: 1px solid #292a2e;
    border-radius: 22px;
    background: #111214;
    box-shadow: 0 18px 38px -24px rgba(17, 18, 20, 0.75);
    color: #fbfbf9;
}

.mobile-stream-empty-kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8b8b85;
    -webkit-text-fill-color: #8b8b85;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.mobile-stream-empty-signal {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #6fe3c6;
    box-shadow: 0 0 0 4px rgba(111, 227, 198, 0.08);
}

.mobile-stream-empty-wave {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 54px;
    margin: 15px 0 17px;
    opacity: 0.95;
}

.mobile-stream-empty-wave span {
    width: 100%;
    min-width: 2px;
    border-radius: 2px;
    background: #2a2b2e;
}

.mobile-stream-empty-wave span:nth-child(6n + 1) { height: 24%; background: #6fe3c6; }
.mobile-stream-empty-wave span:nth-child(6n + 2) { height: 48%; }
.mobile-stream-empty-wave span:nth-child(6n + 3) { height: 72%; }
.mobile-stream-empty-wave span:nth-child(6n + 4) { height: 38%; }
.mobile-stream-empty-wave span:nth-child(6n + 5) { height: 88%; }
.mobile-stream-empty-wave span:nth-child(6n) { height: 58%; }

.mobile-stream-empty-hero .mobile-stream-empty-title {
    max-width: none;
    margin: 0;
    color: #fbfbf9;
    -webkit-text-fill-color: #fbfbf9;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.2;
    text-align: left;
}

.mobile-stream-empty-hero .mobile-stream-empty-copy {
    max-width: 340px;
    margin: 7px 0 0;
    color: #b9b9b3;
    -webkit-text-fill-color: #b9b9b3;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    opacity: 1;
    text-align: left;
}

/* mobile.html still contains broad, late-loading light-theme color rules.
   Keep those from washing out this intentionally dark card. */
#stream-main-area #stream-empty .mobile-stream-empty-hero,
#stream-main-area #stream-empty .mobile-stream-empty-hero .mobile-stream-empty-title {
    color: #fbfbf9 !important;
    -webkit-text-fill-color: #fbfbf9 !important;
}

#stream-main-area #stream-empty .mobile-stream-empty-hero .mobile-stream-empty-kicker,
#stream-main-area #stream-empty .mobile-stream-empty-hero .mobile-stream-empty-kicker span:not(.mobile-stream-empty-signal) {
    color: #8b8b85 !important;
    -webkit-text-fill-color: #8b8b85 !important;
}

#stream-main-area #stream-empty .mobile-stream-empty-hero .mobile-stream-empty-copy {
    color: #b9b9b3 !important;
    -webkit-text-fill-color: #b9b9b3 !important;
}

#stream-main-area #stream-empty .mobile-stream-empty-owner-actions .mobile-stream-empty-secondary,
#stream-main-area #stream-empty .mobile-stream-empty-owner-actions .mobile-stream-empty-secondary * {
    color: #fbfbf9 !important;
    -webkit-text-fill-color: #fbfbf9 !important;
}

.mobile-stream-empty-owner-actions {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 16px;
}

.mobile-stream-empty-owner-actions button {
    min-width: 0;
    height: 48px;
    margin: 0;
    padding: 0 12px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.11em;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.mobile-stream-empty-owner-actions button i { font-size: 12px; }

.mobile-stream-empty-secondary {
    border: 1px solid #34353a;
    background: transparent;
    color: #fbfbf9;
    -webkit-text-fill-color: #fbfbf9;
}

.mobile-stream-empty-owner-sources { margin-top: 22px; }

.mobile-stream-empty-owner-sources h4 {
    margin: 0 4px 10px;
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mobile-stream-empty-source-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.mobile-stream-empty-source-grid button {
    min-width: 0;
    min-height: 88px;
    padding: 12px;
    border: 1px solid var(--border-color, #eaeae6);
    border-radius: 16px;
    background: var(--surface-color, #fff);
    box-shadow: 0 1px 2px rgba(17, 18, 20, 0.03);
    color: var(--text-primary, var(--text-color));
    -webkit-text-fill-color: var(--text-primary, var(--text-color));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    cursor: pointer;
}

.mobile-stream-empty-source-grid button > span:last-of-type {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-stream-empty-source-grid strong {
    color: var(--text-primary, var(--text-color));
    -webkit-text-fill-color: var(--text-primary, var(--text-color));
    font-size: 13px;
    font-weight: 780;
    letter-spacing: -0.02em;
}

.mobile-stream-empty-source-grid small {
    overflow: hidden;
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 560;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-stream-source-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    -webkit-text-fill-color: #fff;
    font-size: 13px;
}

.mobile-stream-source-icon svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: #fff;
}

.mobile-stream-source-icon--twitch { background: #7c4de0; }
.mobile-stream-source-icon--youtube { background: #d92b1f; }
.mobile-stream-source-icon--kick { background: #53fc19; color: #111214; -webkit-text-fill-color: #111214; }
.mobile-stream-source-icon--kick svg { fill: #111214; }
.mobile-stream-source-icon--other { background: #2563eb; }

#stream-empty > .mobile-stream-empty-signup {
    width: min(100%, 360px);
    margin: 18px auto 0;
}

#stream-empty > .mobile-stream-empty-signup .mobile-stream-empty-signup-note {
    margin-bottom: 9px;
    text-align: center;
}

@media (max-width: 350px) {
    .mobile-stream-empty-owner-actions { grid-template-columns: 1fr; }
    .mobile-stream-empty-source-grid { grid-template-columns: 1fr; }
}

#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;
}