/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-lljm51xi2m] {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Fixed and out of the flex flow on purpose — see the comment above it in
   MainLayout.razor. ChatList's two-pane view is `height: 100vh` on its own root,
   so anything that took flow space above `.page` would push it past the viewport
   the instant it appeared. Always in the DOM and toggled with a transform +
   opacity pair rather than an `@if`, so showing/hiding it slides and fades
   instead of popping, and so it never participates in layout in either state. */
.connection-banner[b-lljm51xi2m] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: white;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.connection-banner--visible[b-lljm51xi2m] {
    transform: translateY(0);
    opacity: 1;
}

/* Connecting / Reconnecting — actively trying, nothing is wrong yet. */
.connection-banner--busy[b-lljm51xi2m] {
    background: #1976d2;
}

.connection-banner--offline[b-lljm51xi2m] {
    background: #616161;
}

.connection-banner--failed[b-lljm51xi2m] {
    background: #d32f2f;
}

.connection-banner--connected[b-lljm51xi2m] {
    background: #2e7d32;
}
/* /Pages/Auth.razor.rz.scp.css */
.auth-container[b-1k4fahjy3k] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

.auth-paper[b-1k4fahjy3k] {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    border-radius: 8px;
}

.auth-header[b-1k4fahjy3k] {
    text-align: center;
    margin-bottom: 30px;
}

.auth-header h2[b-1k4fahjy3k] {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
    color: #333;
}

.auth-header p[b-1k4fahjy3k] {
    margin: 8px 0 0 0;
    color: #666;
    font-size: 0.95rem;
}

.auth-form[b-1k4fahjy3k] {
    width: 100%;
}

.form-label[b-1k4fahjy3k] {
    font-size: 1rem;
    font-weight: 500;
    margin: 0 0 20px 0;
    color: #333;
}

.form-hint[b-1k4fahjy3k] {
    text-align: center;
    font-size: 0.85rem;
    color: #999;
    margin-top: 20px;
}

.form-hint code[b-1k4fahjy3k] {
    background: #f5f5f5;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Monaco', 'Courier New', monospace;
}

.text-muted[b-1k4fahjy3k] {
    color: #666;
    margin: 0 0 20px 0;
    font-size: 0.95rem;
}
/* /Pages/ChatList.razor.rz.scp.css */
.chat-layout[b-sxsmki67nt] {
    display: flex;
    height: 100vh;
}

.chat-sidebar[b-sxsmki67nt] {
    width: 320px;
    border-right: 1px solid #e0e0e0;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
}

.sidebar-header[b-sxsmki67nt] {
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
    background: white;
}

.sidebar-actions[b-sxsmki67nt] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

.chat-list[b-sxsmki67nt] {
    flex: 1;
    overflow-y: auto;
}

.chat-list-status[b-sxsmki67nt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    padding: 16px;
    color: #999;
}

.chat-item[b-sxsmki67nt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
}

.chat-avatar[b-sxsmki67nt] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.chat-avatar-img[b-sxsmki67nt] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Deterministic palette keyed off PeerId (see AvatarColorClass in ChatList.razor)
   so a peer's avatar colour stays the same across reloads instead of shifting
   with search results or dialog order. */
.chat-avatar.avatar-color-0[b-sxsmki67nt] { background: linear-gradient(135deg, #ff6b6b, #ee5a6f); }
.chat-avatar.avatar-color-1[b-sxsmki67nt] { background: linear-gradient(135deg, #f7b733, #fc4a1a); }
.chat-avatar.avatar-color-2[b-sxsmki67nt] { background: linear-gradient(135deg, #667eea, #764ba2); }
.chat-avatar.avatar-color-3[b-sxsmki67nt] { background: linear-gradient(135deg, #43cea2, #185a9d); }
.chat-avatar.avatar-color-4[b-sxsmki67nt] { background: linear-gradient(135deg, #11998e, #38ef7d); }
.chat-avatar.avatar-color-5[b-sxsmki67nt] { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.chat-avatar.avatar-color-6[b-sxsmki67nt] { background: linear-gradient(135deg, #fa709a, #fee140); }
.chat-avatar.avatar-color-7[b-sxsmki67nt] { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }

.chat-info[b-sxsmki67nt] {
    flex: 1;
    min-width: 0;
}

.chat-name-row[b-sxsmki67nt] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.chat-name[b-sxsmki67nt] {
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-time[b-sxsmki67nt] {
    font-size: 11px;
    color: #999;
    flex-shrink: 0;
}

.chat-preview[b-sxsmki67nt] {
    font-size: 13px;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-main[b-sxsmki67nt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: white;
}

.empty-chat[b-sxsmki67nt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 16px;
    color: #999;
}

.empty-icon[b-sxsmki67nt] {
    font-size: 64px;
    color: #ddd;
}

/* The "back to topics" bar shown above MessageView while a forum topic is
   open (see ChatList.razor's chat-main branch) — not part of ForumTopicList
   itself, which never renders once a topic is picked. */
.topic-header[b-sxsmki67nt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid #e0e0e0;
    background: white;
}

.topic-header-title[b-sxsmki67nt] {
    font-weight: 500;
    color: #333;
}

[b-sxsmki67nt] .mud-list-item.selected {
    background-color: #e3f2fd;
}

/* Search result groups: local matches reuse .chat-item exactly (see
   FsGram.Web/Pages/ChatList.razor's `chatRow` fragment); these are the extras for
   the group headers, the found-peer hint and the in-chat message hits. */
.search-group-label[b-sxsmki67nt] {
    padding: 10px 16px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #999;
}

.search-status[b-sxsmki67nt] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: #999;
    font-size: 13px;
}

.search-hint[b-sxsmki67nt] {
    font-style: italic;
}

.search-message-item[b-sxsmki67nt] {
    align-items: flex-start;
}

.search-message-icon[b-sxsmki67nt] {
    flex-shrink: 0;
    margin-top: 2px;
    color: #999;
}
/* /Pages/ForumTopicList.razor.rz.scp.css */
.topic-list[b-2g52xyge3a] {
    flex: 1;
    overflow-y: auto;
    height: 100%;
}

.topic-list-status[b-2g52xyge3a] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    padding: 16px;
    color: #999;
}

.topic-item[b-2g52xyge3a] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    width: 100%;
}

.topic-icon[b-2g52xyge3a] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.topic-info[b-2g52xyge3a] {
    flex: 1;
    min-width: 0;
}

.topic-name-row[b-2g52xyge3a] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.topic-name[b-2g52xyge3a] {
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topic-time[b-2g52xyge3a] {
    font-size: 11px;
    color: #999;
    flex-shrink: 0;
}

.topic-meta[b-2g52xyge3a] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #999;
}

.topic-meta-icon[b-2g52xyge3a] {
    font-size: 14px;
}
/* /Pages/MessageView.razor.rz.scp.css */
.message-view[b-e42wxd3a7i] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.message-header[b-e42wxd3a7i] {
    padding: 16px;
    border-bottom: 1px solid #e0e0e0;
    background: white;
    display: flex;
    align-items: center;
    gap: 12px;
}

.message-header h3[b-e42wxd3a7i] {
    margin: 0;
    font-size: 18px;
}

.message-header-info[b-e42wxd3a7i] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.message-presence[b-e42wxd3a7i] {
    font-size: 12px;
    color: #8a8a8a;
}

.message-presence.online[b-e42wxd3a7i] {
    color: #43a047;
}

.message-avatar[b-e42wxd3a7i] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    flex-shrink: 0;
}

.message-avatar-img[b-e42wxd3a7i] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Same palette as ChatList.razor.css's avatar-color-N. Blazor's CSS isolation
   scopes each component's stylesheet separately, so the rules have to be
   duplicated here for the header avatar to land on the same colour as the peer's
   row in the dialog list. */
.message-avatar.avatar-color-0[b-e42wxd3a7i] { background: linear-gradient(135deg, #ff6b6b, #ee5a6f); }
.message-avatar.avatar-color-1[b-e42wxd3a7i] { background: linear-gradient(135deg, #f7b733, #fc4a1a); }
.message-avatar.avatar-color-2[b-e42wxd3a7i] { background: linear-gradient(135deg, #667eea, #764ba2); }
.message-avatar.avatar-color-3[b-e42wxd3a7i] { background: linear-gradient(135deg, #43cea2, #185a9d); }
.message-avatar.avatar-color-4[b-e42wxd3a7i] { background: linear-gradient(135deg, #11998e, #38ef7d); }
.message-avatar.avatar-color-5[b-e42wxd3a7i] { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.message-avatar.avatar-color-6[b-e42wxd3a7i] { background: linear-gradient(135deg, #fa709a, #fee140); }
.message-avatar.avatar-color-7[b-e42wxd3a7i] { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }

/* Sits between the header and the scrollable .message-list, outside it —
   showing it must not change .message-list's scrollHeight while
   HandleScrolledToTopAsync/HandlePostRenderScrollAsync are mid-anchor-restore. */
.history-loading[b-e42wxd3a7i] {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}

.message-list[b-e42wxd3a7i] {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    /* ChatState.CurrentMessages is sorted oldest -> newest and is meant to be read
       top to bottom, so this stacks in normal document order (not reversed). */
    flex-direction: column;
    gap: 8px;
}

.no-messages[b-e42wxd3a7i] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #999;
}

.message-item[b-e42wxd3a7i] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 8px;
}

.message-item.incoming[b-e42wxd3a7i] {
    justify-content: flex-start;
}

.message-item.outgoing[b-e42wxd3a7i] {
    justify-content: flex-end;
}

.message-bubble[b-e42wxd3a7i] {
    padding: 12px 16px;
    border-radius: 12px;
    word-wrap: break-word;
    max-width: 100%;
}

/* Holds the bubble and its (always-visible, small) action row stacked below
   it, capped at the width `.message-bubble` used to carry itself — moved up
   here so the action row lines up under the bubble instead of stretching the
   full width of `.message-item`. */
.message-bubble-stack[b-e42wxd3a7i] {
    display: flex;
    flex-direction: column;
    max-width: 70%;
    min-width: 0;
}

.message-item.incoming .message-bubble-stack[b-e42wxd3a7i] {
    align-items: flex-start;
}

.message-item.outgoing .message-bubble-stack[b-e42wxd3a7i] {
    align-items: flex-end;
}

/* An optimistic echo still waiting on server confirmation (MessageInfo.IsPending). */
.message-bubble.pending[b-e42wxd3a7i] {
    opacity: 0.6;
}

/* A send that never got confirmed (MessageInfo.IsFailed) — visibly distinct
   from pending: dimmed but tinted red, not fading toward "probably fine". */
.message-bubble.failed[b-e42wxd3a7i] {
    opacity: 0.75;
    box-shadow: inset 0 0 0 1px rgba(211, 47, 47, 0.6);
}

.message-item.incoming .message-bubble[b-e42wxd3a7i] {
    background: #f0f0f0;
    color: #333;
}

.message-item.outgoing .message-bubble[b-e42wxd3a7i] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
}

/* One row's sender avatar, next to its bubble rather than inside it — see
   `.message-avatar`'s own rule above for the header's copy of this same
   shape. Sized down from that 40px: repeated once per incoming message in a
   group, it has to read as a small identity marker, not another header. */
.message-sender-avatar[b-e42wxd3a7i] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    flex-shrink: 0;
}

.message-sender-avatar-img[b-e42wxd3a7i] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Same palette as `.message-avatar.avatar-color-N` above — duplicated under
   this rule's own selector for the same CSS-isolation reason that one's
   comment already gives. */
.message-sender-avatar.avatar-color-0[b-e42wxd3a7i] { background: linear-gradient(135deg, #ff6b6b, #ee5a6f); }
.message-sender-avatar.avatar-color-1[b-e42wxd3a7i] { background: linear-gradient(135deg, #f7b733, #fc4a1a); }
.message-sender-avatar.avatar-color-2[b-e42wxd3a7i] { background: linear-gradient(135deg, #667eea, #764ba2); }
.message-sender-avatar.avatar-color-3[b-e42wxd3a7i] { background: linear-gradient(135deg, #43cea2, #185a9d); }
.message-sender-avatar.avatar-color-4[b-e42wxd3a7i] { background: linear-gradient(135deg, #11998e, #38ef7d); }
.message-sender-avatar.avatar-color-5[b-e42wxd3a7i] { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.message-sender-avatar.avatar-color-6[b-e42wxd3a7i] { background: linear-gradient(135deg, #fa709a, #fee140); }
.message-sender-avatar.avatar-color-7[b-e42wxd3a7i] { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }

.message-sender[b-e42wxd3a7i] {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px;
    color: #667eea;
}

.message-text[b-e42wxd3a7i] {
    word-break: break-word;
    white-space: pre-wrap;
}

/* A received or sent photo. Capped rather than filling the bubble's max-width
   outright: a landscape photo at `.message-bubble`'s 70% width would dwarf
   every text bubble around it, and a tiny one stretched up to it would look
   blurry — this bounds it in both directions and lets it size to content. */
.message-photo[b-e42wxd3a7i] {
    display: block;
    max-width: 320px;
    max-height: 320px;
    width: 100%;
    border-radius: 8px;
    object-fit: contain;
}

.message-text + .message-photo[b-e42wxd3a7i],
.message-photo + .message-text[b-e42wxd3a7i] {
    margin-top: 8px;
}

/* Shown while MediaCache.EnsureAsync's fetch is still in flight — fixed
   dimensions so the bubble does not visibly resize the instant the real
   photo replaces it. */
.message-photo-loading[b-e42wxd3a7i] {
    width: 220px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.06);
}

/* The named absent state for media this client cannot render — see
   MessageMediaKind.Unsupported. Dashed border reads as "something is here",
   not as a broken image or a missing style. */
.message-media-placeholder[b-e42wxd3a7i] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px dashed currentColor;
    border-radius: 8px;
    opacity: 0.8;
    font-size: 14px;
    font-style: italic;
}

.message-time[b-e42wxd3a7i] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    margin-top: 4px;
    opacity: 0.7;
}

/* The read (double-check) tick tints toward Telegram's own accent; the plain
   delivered (single-check) tick just inherits the bubble's text colour via
   MudIcon's Color="Color.Inherit". */
/* `::deep` is load-bearing here, not decoration — same reason
   `.photo-attach-button ::deep .photo-attach-input` needs it below.
   `Class="message-tick..."` is authored on this component's own MudIcon
   call site, but the actual `<svg>` it becomes is rendered by MudIcon's OWN
   component, which never receives this file's scope attribute — an
   unscoped `.message-tick.read` rule compiles to a selector nothing in the
   DOM ever carries, and the read-tick tint silently never applied. Caught by
   looking at the rendered page, not by reading this file — the fix Main
   flagged after `Stories.razor.css` and `.photo-attach-input` hit the same
   thing. */
[b-e42wxd3a7i] .message-tick.read {
    color: #7fd8ff;
}

/* Reply, react, pin — small and always visible rather than hover-revealed:
   this is a touch-first as much as a mouse-first client, and a control that
   only appears on hover is one a touch reader can never discover. */
.message-hover-actions[b-e42wxd3a7i] {
    display: flex;
    gap: 2px;
    margin-top: 2px;
}

.message-action-button[b-e42wxd3a7i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: #8a8a8a;
    cursor: pointer;
    padding: 0;
}

.message-action-button:hover[b-e42wxd3a7i] {
    background: rgba(102, 126, 234, 0.12);
    color: #667eea;
}

/* HandleToggleReactionPicker's own small popover — not a MudMenu: this
   client controls its open/close state directly (one message's picker at a
   time, closed the instant a pick or another action fires), which a fixed
   six-button row does not need a full menu component for. */
.reaction-picker[b-e42wxd3a7i] {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    margin-top: 4px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.reaction-picker-emoji[b-e42wxd3a7i] {
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}

.reaction-picker-emoji:hover[b-e42wxd3a7i] {
    background: rgba(102, 126, 234, 0.15);
}

/* The reactions already on a message — pills, not the picker above. Sits
   inside the bubble, below the text/media, same as real Telegram. */
.message-reactions[b-e42wxd3a7i] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.reaction-pill[b-e42wxd3a7i] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid rgba(127, 127, 127, 0.35);
    background: rgba(127, 127, 127, 0.12);
    color: inherit;
    font: inherit;
    font-size: 12px;
    line-height: 1.4;
    cursor: pointer;
}

/* This viewer's own reaction — MessageReaction.Mine, never inferred from the
   count (see that type's own doc comment). */
.reaction-pill.mine[b-e42wxd3a7i] {
    background: rgba(102, 126, 234, 0.3);
    border-color: #667eea;
}

.reaction-count[b-e42wxd3a7i] {
    font-weight: 600;
}

/* `::deep` — same MudIcon-scope reason as `.message-tick.read` above:
   `Class="message-pin-icon"` lands on a MudIcon-rendered `<svg>`, which
   this file's own scope attribute never reaches. */
[b-e42wxd3a7i] .message-pin-icon {
    opacity: 0.85;
}

/* The quoted preview inside a bubble that answers another message —
   MessageInfo.ReplyToId. `currentColor` for the accent bar so it reads
   correctly against both the light incoming bubble and the dark-gradient
   outgoing one without a second set of colours. */
.message-reply-preview[b-e42wxd3a7i] {
    padding: 4px 8px;
    margin-bottom: 6px;
    border-left: 3px solid currentColor;
    border-radius: 4px;
    background: rgba(127, 127, 127, 0.15);
}

.message-reply-sender[b-e42wxd3a7i] {
    font-size: 12px;
    font-weight: 600;
}

.message-reply-text[b-e42wxd3a7i] {
    font-size: 12px;
    opacity: 0.85;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The honest absent state when a reply's target is not in the loaded page —
   never a blank quote. See MessageView.razor's own comment at the render site. */
.message-reply-missing[b-e42wxd3a7i] {
    font-size: 12px;
    font-style: italic;
    opacity: 0.75;
}

/* Compose-time — "the next send will answer this", cleared on send or
   cancel. Never confused with `.message-reply-preview` above, which is a
   sent message's own, server-confirmed relationship. */
.reply-compose-bar[b-e42wxd3a7i] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: rgba(102, 126, 234, 0.08);
    border-left: 3px solid #667eea;
    border-radius: 6px;
    color: #667eea;
}

.reply-compose-info[b-e42wxd3a7i] {
    flex: 1;
    min-width: 0;
}

.reply-compose-sender[b-e42wxd3a7i] {
    font-size: 12px;
    font-weight: 600;
}

.reply-compose-text[b-e42wxd3a7i] {
    font-size: 12px;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-input[b-e42wxd3a7i] {
    padding: 16px;
    border-top: 1px solid #e0e0e0;
    background: white;
}

.message-compose-row[b-e42wxd3a7i] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.message-compose-row > .mud-input-control[b-e42wxd3a7i] {
    flex: 1;
    min-width: 0;
}

.photo-attach-button[b-e42wxd3a7i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    color: #667eea;
    cursor: pointer;
}

.photo-attach-button:hover[b-e42wxd3a7i] {
    background: rgba(102, 126, 234, 0.1);
}

/* Visually hidden, not `display: none` — a hidden-by-display input drops out
   of the tab order and some browsers stop forwarding the wrapping <label>'s
   click to it. This keeps it clickable and focusable while taking up no
   visible space; the MudIcon above is what the reader actually sees.

   `::deep` is load-bearing, not decoration. This file is scoped CSS, so every
   rule is rewritten to `.photo-attach-input[b-xxxxxxxxxx]` — and Blazor stamps
   that attribute on this component's own markup only, never on the markup a
   CHILD component renders. `<InputFile>` is a child component, so an unscoped
   selector matched nothing and the browser's raw "Choose File / No file chosen"
   control sat in the compose row, unstyled and overlapping. Confirmed on
   screen before the fix. */
.photo-attach-button[b-e42wxd3a7i]  .photo-attach-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.photo-upload-status[b-e42wxd3a7i] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 13px;
    color: #666;
}
/* /Pages/Settings.razor.rz.scp.css */
.settings-container[b-3jf9shhf2v] {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 20px 60px;
}

.settings-header[b-3jf9shhf2v] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.settings-header h2[b-3jf9shhf2v] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}

.settings-card[b-3jf9shhf2v] {
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.settings-card h3[b-3jf9shhf2v] {
    margin: 0 0 16px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

.settings-card--danger[b-3jf9shhf2v] {
    border: 1px solid rgba(211, 47, 47, 0.3);
}

.settings-current[b-3jf9shhf2v] {
    font-size: 0.85rem;
    color: #666;
    margin: 8px 0 0 0;
}

.settings-subheading[b-3jf9shhf2v] {
    font-size: 0.8rem;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 12px 0 8px 0;
}

.settings-actions[b-3jf9shhf2v] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.settings-birthday-fields[b-3jf9shhf2v] {
    display: flex;
    gap: 12px;
}

.settings-birthday-fields > *[b-3jf9shhf2v] {
    flex: 1;
}

.settings-privacy-row[b-3jf9shhf2v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.settings-privacy-row:last-child[b-3jf9shhf2v] {
    border-bottom: none;
}

.settings-privacy-row[b-3jf9shhf2v]  .mud-select {
    max-width: 220px;
}

.settings-privacy-label[b-3jf9shhf2v] {
    font-size: 0.95rem;
    color: #333;
}

.settings-emoji-swatches[b-3jf9shhf2v] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.settings-emoji-swatch[b-3jf9shhf2v] {
    border: 1px solid #ccc;
    background: #fafafa;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 0.85rem;
    font-family: 'Monaco', 'Courier New', monospace;
    cursor: pointer;
}

.settings-emoji-swatch:hover[b-3jf9shhf2v] {
    background: #f0f0f0;
}

.settings-emoji-swatch:disabled[b-3jf9shhf2v] {
    opacity: 0.6;
    cursor: default;
}

.settings-emoji-swatch--current[b-3jf9shhf2v] {
    border-color: #667eea;
    background: #eef0fd;
    color: #4a55b8;
    font-weight: 600;
}
/* /Pages/Stories.razor.rz.scp.css */
.stories-page[b-k1m9iz4omt] {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px 24px 32px;
}

.stories-header[b-k1m9iz4omt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.stories-header h2[b-k1m9iz4omt] {
    margin: 0;
    font-size: 20px;
}

.stories-ring-list[b-k1m9iz4omt] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 8px 4px 16px;
}

.story-ring-item[b-k1m9iz4omt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 76px;
    cursor: pointer;
    background: none;
    border: none;
}

.story-ring-avatar[b-k1m9iz4omt] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    flex-shrink: 0;
    /* The "has an active story" ring — a gradient border, same trick every
       stories tray uses to separate "worth opening" from a plain avatar. */
    box-shadow: 0 0 0 3px white, 0 0 0 5px #fa709a, 0 0 0 5px transparent;
    background-clip: padding-box;
}

.story-ring-avatar-img[b-k1m9iz4omt] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Same palette as ChatList.razor.css/MessageView.razor.css's avatar-color-N.
   Blazor's CSS isolation scopes each component's stylesheet separately, so
   the rules are duplicated here — see MessageView.razor.css's own comment
   on its copy. */
.story-ring-avatar.avatar-color-0[b-k1m9iz4omt] { background: linear-gradient(135deg, #ff6b6b, #ee5a6f); }
.story-ring-avatar.avatar-color-1[b-k1m9iz4omt] { background: linear-gradient(135deg, #f7b733, #fc4a1a); }
.story-ring-avatar.avatar-color-2[b-k1m9iz4omt] { background: linear-gradient(135deg, #667eea, #764ba2); }
.story-ring-avatar.avatar-color-3[b-k1m9iz4omt] { background: linear-gradient(135deg, #43cea2, #185a9d); }
.story-ring-avatar.avatar-color-4[b-k1m9iz4omt] { background: linear-gradient(135deg, #11998e, #38ef7d); }
.story-ring-avatar.avatar-color-5[b-k1m9iz4omt] { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.story-ring-avatar.avatar-color-6[b-k1m9iz4omt] { background: linear-gradient(135deg, #fa709a, #fee140); }
.story-ring-avatar.avatar-color-7[b-k1m9iz4omt] { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }

.story-ring-name[b-k1m9iz4omt] {
    font-size: 12px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-ring-count[b-k1m9iz4omt] {
    font-size: 11px;
    color: #8a8a8a;
}

/* The viewer overlay. Fixed and full-viewport like MainLayout's connection
   banner is deliberately outside the normal flex flow (see
   MainLayout.razor.css) — this has to sit above the whole app, not just
   this page's own content column. */
.story-viewer-overlay[b-k1m9iz4omt] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1300;
}

.story-viewer[b-k1m9iz4omt] {
    position: relative;
    width: min(420px, 92vw);
    height: min(760px, 88vh);
    background: #111;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: white;
}

.story-viewer-header[b-k1m9iz4omt] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.35);
    position: relative;
    z-index: 2;
}

.story-viewer-avatar[b-k1m9iz4omt] {
    width: 36px;
    height: 36px;
    font-size: 14px;
    box-shadow: none;
}

.story-viewer-title[b-k1m9iz4omt] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.story-viewer-name[b-k1m9iz4omt] {
    font-size: 14px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.story-viewer-position[b-k1m9iz4omt] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}

.story-viewer-media[b-k1m9iz4omt] {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.story-viewer-image[b-k1m9iz4omt] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.story-viewer-placeholder[b-k1m9iz4omt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.7);
}

.story-viewer-tap[b-k1m9iz4omt] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.story-viewer-tap-prev[b-k1m9iz4omt] {
    left: 0;
}

.story-viewer-tap-next[b-k1m9iz4omt] {
    right: 0;
}

.story-viewer-footer[b-k1m9iz4omt] {
    padding: 10px 14px 14px;
    background: rgba(0, 0, 0, 0.35);
    position: relative;
    z-index: 2;
}

.story-viewer-badges[b-k1m9iz4omt] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.story-viewer-badge[b-k1m9iz4omt] {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
}

.story-viewer-caption[b-k1m9iz4omt] {
    font-size: 14px;
    line-height: 1.4;
}

/* `::deep` is load-bearing on every rule below that targets a class handed
   to a MudBlazor component as its `Class` parameter, not a plain HTML tag
   this file writes directly — MessageView.razor.css hit the identical gap
   first (its own comment on `.photo-attach-input`): scoped CSS rewrites
   every selector to `.foo[b-xxxxxxxxxx]`, and Blazor stamps that attribute
   on THIS component's own markup only, never on what a CHILD component
   (MudIconButton, MudAlert) renders for itself. Without `::deep` these
   three rules matched nothing — confirmed on screen: the prev/next
   buttons rendered unpositioned, full-width, in normal document flow
   instead of as absolutely-positioned circular controls over the image. */
.story-viewer[b-k1m9iz4omt]  .story-viewer-error {
    margin: 0 14px 12px;
}

.story-viewer[b-k1m9iz4omt]  .story-viewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    color: white;
    background: rgba(0, 0, 0, 0.25);
}

.story-viewer[b-k1m9iz4omt]  .story-viewer-nav-prev {
    left: 8px;
}

.story-viewer[b-k1m9iz4omt]  .story-viewer-nav-next {
    right: 8px;
}