/* ---------------------------------------------------------------------------
   Notifications bell, phone tab bar, and the sign-in / sign-up layout.
--------------------------------------------------------------------------- */

/* Bell */
.app-bell {
    position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-left: 4px;
    border: 0; border-radius: 50%; background: transparent; color: var(--mud-palette-text-secondary); cursor: pointer;
}
.app-bell:hover { background: var(--bz-card); color: var(--mud-palette-text-primary); }
.app-bell:focus-visible { outline: 2px solid var(--bz-accent); }
.app-bell-count {
    position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--bz-bad); color: #fff; font: 700 .62rem/16px "Segoe UI", Arial, sans-serif; text-align: center;
    box-shadow: 0 0 0 2px var(--bz-window);
}
.app-bell-panel { width: min(380px, calc(100vw - 24px)); }
.app-bell-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 6px; }
.app-bell-list { max-height: 360px; overflow-y: auto; padding: 0 8px; }
.app-bell-list .unread .bz-activity-title { font-weight: 700; }
.app-bell-list .unread::before { content: ""; flex: 0 0 6px; height: 6px; margin-left: -2px; border-radius: 50%; background: var(--bz-accent); }
.app-bell-panel .bz-empty { padding: 14px; }
.app-bell-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px 10px; border-top: 1px solid var(--bz-line); color: var(--mud-palette-text-secondary); font-size: .76rem; }

/* Phone tab bar: replaces the rail under 600px */
.app-tabbar { display: none; }
@media (max-width: 600px) {
    .app-shell .app-drawer { display: none !important; }
    .app-shell .mud-main-content { margin-left: 0 !important; padding-left: 0 !important; padding-bottom: 64px; }
    .app-shell .app-topbar .app-status-dot,
    .app-shell .app-topbar .mud-icon-button.mud-icon-button-edge-start { display: none; }
    .app-tabbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300; display: grid; grid-template-columns: repeat(5, 1fr);
        height: 58px; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--bz-border);
        background: color-mix(in srgb, var(--bz-panel) 92%, transparent); backdrop-filter: blur(10px);
    }
    .app-tabbar a, .app-tabbar button {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; background: none;
        color: var(--mud-palette-text-secondary); font: 600 .66rem/1 "Segoe UI", Arial, sans-serif; text-decoration: none; cursor: pointer;
    }
    .app-tabbar a.active { color: var(--bz-accent); }
    .app-tabbar a.active .mud-icon-root { transform: translateY(-1px); }
}

/* Sign in / sign up, in the botzilla.dev homepage's look (deploy/site/styles11.css): the slate floor with its isometric
   dot lattice, the homepage headline and its simulated bots on the left (auth-bots.css), the form in a "window" card. */
.bz-auth {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, 1fr); min-height: 100vh; color: #E7EAEF;
    background-color: #363B44;
    background-image: radial-gradient(circle, rgba(166, 175, 187, .16) 1.1px, transparent 1.6px), radial-gradient(circle, rgba(166, 175, 187, .16) 1.1px, transparent 1.6px);
    background-size: 36px 20.78px; background-position: 0 0, 18px 10.39px;
}
/* Exactly one screen tall and pinned, so the showcase never makes the page scroll; the form side scrolls if it has to. */
.bz-auth-showcase { position: sticky; top: 0; z-index: 1; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 56px; overflow: hidden; }
.bz-auth-title { margin: 30px 0 0; font-size: clamp(30px, 3.3vw, 50px); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; }
.bz-auth-title span { color: #4CCD8D; }
/* The bots are the homepage's, scaled down with zoom (their inside layout stays the same) to fit the screen height. The
   tilted stack reaches well below its own box, so it gets room underneath. */
.bz-auth-showcase .bz-bots { width: 520px; max-width: 100%; margin: 30px auto 120px; zoom: .62; }
@media (max-height: 800px) { .bz-auth-showcase .bz-bots { zoom: .56; } }
@media (min-height: 880px) { .bz-auth-showcase .bz-bots { zoom: .74; } }
@media (min-height: 1040px) { .bz-auth-showcase .bz-bots { zoom: .86; } }
.bz-auth-form { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 32px 24px 16px; }
.bz-auth-form .login-card { position: relative; z-index: 1; }
/* The card is a homepage "window": surface colour, hard offset edge and a long soft floor shadow. */
.bz-auth .login-card.mud-paper {
    background: #2F343C; border: 1px solid #272B32; border-radius: 14px;
    box-shadow: 8px 8px 0 -1px #272B32, 28px 36px 48px -18px rgba(0, 0, 0, .55);
}
/* The homepage's main button: deep green with a hard offset edge that grows on hover and presses in on click. */
.bz-auth .login-card .mud-button-filled-primary {
    text-transform: none; font-weight: 600; letter-spacing: 0;
    background: #2E6B4D; border: 1px solid #3F8A64; border-radius: 10px; box-shadow: 4px 4px 0 #1B3F2D;
    transition: transform .18s cubic-bezier(.2, .75, .2, 1), box-shadow .18s cubic-bezier(.2, .75, .2, 1);
}
.bz-auth .login-card .mud-button-filled-primary:hover { background: #2E6B4D; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #1B3F2D; }
.bz-auth .login-card .mud-button-filled-primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #1B3F2D; }
.bz-auth .login-card .mud-button-filled-primary.mud-button-disabled { background: #353B44; border-color: #3A414B; box-shadow: none; transform: none; }
.bz-auth-footer { position: relative; z-index: 1; margin-top: auto; color: #A6AFBB; font-size: .76rem; }
@media (max-width: 900px) {
    .bz-auth { grid-template-columns: minmax(0, 1fr); }
    .bz-auth-showcase { display: none; }
}

.bz-signup-steps { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bz-signup-steps li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #A6AFBB; font-size: .7rem; text-align: center; }
.bz-signup-steps li span {
    display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1.5px solid #4E5764; border-radius: 50%;
    font-weight: 700; font-size: .72rem;
}
.bz-signup-steps li.current { color: #E7EAEF; font-weight: 600; }
.bz-signup-steps li.current span { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent); }
.bz-signup-steps li.done span { border-color: #4CCD8D; background: #4CCD8D; color: #10251a; }

/* Centre the card in the free space above the footer; the showcase already carries the logo on wide screens. */
.bz-auth-form > .login-card { margin-top: auto; }
@media (min-width: 901px) { .bz-auth-form .login-card .bz-brand { display: none; } }

/* Sign-in, sign-up and password forms: a real <form> so Enter submits; same spacing as the MudStack around it. */
.bz-auth-fields { display: flex; flex-direction: column; gap: 12px; margin: 0; }