/* /Components/AboutSettings.razor.rz.scp.css */
.about-head[b-rahp5q5xjv] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3, 0.75rem);
    margin-bottom: var(--sp-2, 0.5rem);
}

.about-name[b-rahp5q5xjv] {
    margin: 0;
}

.about-version[b-rahp5q5xjv] {
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent, #6d5efc);
    background: var(--bg-selected, #eaecfb);
    border: 1px solid var(--border, #e5e6ea);
    padding: 2px var(--sp-2, 0.5rem);
    border-radius: 999px;
    white-space: nowrap;
    cursor: pointer;
    transition: var(--transition, all .15s ease);
}

.about-version:hover[b-rahp5q5xjv] {
    border-color: color-mix(in srgb, var(--accent, #6d5efc) 40%, transparent);
}

.about-version:active[b-rahp5q5xjv] {
    transform: translateY(0.5px);
}

/* Keyboard-shortcut cheat sheet: a tidy two-column key/description list. */
.about-keys[b-rahp5q5xjv] {
    margin: var(--sp-3, 0.75rem) 0 0;
}

.about-key-row[b-rahp5q5xjv] {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 0.75rem);
    padding: var(--sp-2, 0.5rem) 0;
    border-top: 1px solid var(--border, #e5e6ea);
}

.about-key-row:first-child[b-rahp5q5xjv] {
    border-top: none;
}

.about-key-row dt[b-rahp5q5xjv] {
    flex: none;
    display: inline-flex;
    gap: 4px;
    min-width: 5.5rem;
}

.about-key-row dd[b-rahp5q5xjv] {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary, #4b4f59);
}

.about-keys kbd[b-rahp5q5xjv] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px;
    color: var(--text-secondary, #4b4f59);
    background: var(--bg-muted, #f1f2f5);
    border: 1px solid var(--border-strong, #d4d6dd);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm, 6px);
    white-space: nowrap;
}

/* Clean, calm list rhythm — replaces the default browser bullet/indent look. */
.about-list[b-rahp5q5xjv] {
    margin: var(--sp-2, 0.5rem) 0 var(--sp-3, 0.75rem);
    padding-left: var(--sp-5, 1.25rem);
    color: var(--text-secondary, #4b4f59);
    font-size: 13px;
    line-height: 1.6;
}

.about-list li[b-rahp5q5xjv] {
    margin-bottom: var(--sp-2, 0.5rem);
}

.about-list li[b-rahp5q5xjv]::marker {
    color: var(--accent, #6d5efc);
}
/* /Components/BillingSettings.razor.rz.scp.css */
.billing[b-jq0jpxww1e] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    font-family: var(--font);
}

/* Header strip: credits + owned unlock chips */
.billing-header[b-jq0jpxww1e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

.billing-header[b-jq0jpxww1e]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad);
    opacity: 0.07;
    pointer-events: none;
}

.billing-balance[b-jq0jpxww1e] {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    position: relative;
    z-index: 1;
}

.billing-balance-label[b-jq0jpxww1e] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.billing-balance-value[b-jq0jpxww1e] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--accent); /* solid (flat) — was a gradient-clipped number */
}

.billing-balance-note[b-jq0jpxww1e] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.billing-unlocks[b-jq0jpxww1e] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    position: relative;
    z-index: 1;
}

.billing-unlocks-empty[b-jq0jpxww1e] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.billing-chip[b-jq0jpxww1e] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: var(--sp-1) var(--sp-3);
    border-radius: 999px;
    color: var(--text-primary);
    background: var(--bg-selected);
    border: 1px solid var(--border-strong);
}

.billing-intro[b-jq0jpxww1e] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.billing-wallet-hint[b-jq0jpxww1e] {
    font-size: 0.85rem;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.billing-loading[b-jq0jpxww1e],
.billing-empty[b-jq0jpxww1e] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.9rem;
    color: var(--text-secondary);
    padding: var(--sp-4) 0;
}

/* Catalog grid */
.billing-grid[b-jq0jpxww1e] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--sp-4);
}

.billing-card[b-jq0jpxww1e] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-5);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.billing-card:hover[b-jq0jpxww1e] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.billing-card.is-owned[b-jq0jpxww1e] {
    opacity: 0.85;
}

.billing-card-head[b-jq0jpxww1e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
}

.billing-card-title[b-jq0jpxww1e] {
    font-weight: 650;
    font-size: 0.98rem;
    color: var(--text-primary);
}

.billing-tag[b-jq0jpxww1e] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px var(--sp-2);
    border-radius: 999px;
}

.billing-tag-unlock[b-jq0jpxww1e] {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.billing-tag-credits[b-jq0jpxww1e] {
    color: var(--accent-3);
    background: color-mix(in srgb, var(--accent-3) 16%, transparent);
}

.billing-card-desc[b-jq0jpxww1e] {
    flex: 1 1 auto;
    font-size: 0.83rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.billing-card-foot[b-jq0jpxww1e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
}

.billing-price[b-jq0jpxww1e] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
}

.billing-price-cur[b-jq0jpxww1e] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-left: 2px;
}

.billing-buy[b-jq0jpxww1e] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Two pay options side-by-side (USDC + Bitcoin) */
.billing-actions[b-jq0jpxww1e] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.billing-buy[b-jq0jpxww1e],
.billing-buy-btc[b-jq0jpxww1e] {
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.82rem;
}

.billing-buy-btc[b-jq0jpxww1e] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Bitcoin invoice panel */
.billing-btc[b-jq0jpxww1e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
    padding: var(--sp-4);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    border: 1px solid var(--border);
}

.billing-btc-head[b-jq0jpxww1e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.billing-btc-title[b-jq0jpxww1e] {
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--text-primary);
}

.billing-btc-close[b-jq0jpxww1e] {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    color: var(--text-muted);
    padding: 2px var(--sp-1);
    border-radius: var(--radius-sm);
}

.billing-btc-close:hover[b-jq0jpxww1e] {
    color: var(--text-primary);
    background: var(--bg-selected);
}

.billing-btc-qr[b-jq0jpxww1e] {
    background: #fff;
    padding: var(--sp-2);
    border-radius: var(--radius-sm);
    line-height: 0;
}

.billing-btc-qr svg[b-jq0jpxww1e] {
    display: block;
    width: 160px;
    height: 160px;
}

.billing-btc-amount[b-jq0jpxww1e] {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}

.billing-btc-btc[b-jq0jpxww1e] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.billing-btc-usd[b-jq0jpxww1e] {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.billing-btc-addr-row[b-jq0jpxww1e] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
}

.billing-btc-addr[b-jq0jpxww1e] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    word-break: break-all;
    padding: var(--sp-2);
    border-radius: var(--radius-sm);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.billing-btc-copy[b-jq0jpxww1e] {
    flex: 0 0 auto;
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.78rem;
}

.billing-btc-status[b-jq0jpxww1e] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-align: center;
}

.billing-btc-expired[b-jq0jpxww1e] {
    font-size: 0.82rem;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.45;
}

.billing-owned[b-jq0jpxww1e] {
    font-size: 0.82rem;
    font-weight: 650;
    color: var(--green);
}

.billing-recheck[b-jq0jpxww1e] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

/* Inline status toasts */
.billing-toast[b-jq0jpxww1e] {
    font-size: 0.82rem;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    line-height: 1.4;
}

.billing-toast-ok[b-jq0jpxww1e] {
    color: var(--green);
    background: color-mix(in srgb, var(--green) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
    font-weight: 600;
}

.billing-toast-pending[b-jq0jpxww1e] {
    color: var(--text-secondary);
    background: var(--bg-muted);
    border: 1px solid var(--border);
}

/* A non-fatal hint shown under the pending message (e.g. a failed status check). */
.billing-pending-note[b-jq0jpxww1e] {
    margin-top: var(--sp-2);
    color: var(--danger);
    font-weight: 600;
}

.billing-card-error[b-jq0jpxww1e] {
    margin-top: var(--sp-1);
}

.spinner-sm[b-jq0jpxww1e] {
    width: 14px;
    height: 14px;
}

@media (max-width: 520px) {
    .billing-header[b-jq0jpxww1e] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --- Personal Pro subscription card (single-tier billing) ------------------------------ */
.billing-pro[b-jq0jpxww1e] {
    max-width: 460px;
    gap: var(--sp-3);
}

.billing-tag-active[b-jq0jpxww1e] {
    color: var(--success, #16a34a);
    background: color-mix(in srgb, var(--success, #16a34a) 16%, transparent);
}

.billing-pro-list[b-jq0jpxww1e] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.billing-pro-list li[b-jq0jpxww1e] {
    position: relative;
    padding-left: var(--sp-5);
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.billing-pro-list li[b-jq0jpxww1e]::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 700;
}

.billing-pro-renews[b-jq0jpxww1e] {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.billing-return-note[b-jq0jpxww1e] {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md, 10px);
    background: var(--surface-2, rgba(127, 127, 127, 0.08));
    color: var(--text-secondary);
    font-size: 0.85rem;
}
/* /Components/CommandPalette.razor.rz.scp.css */
/* ⌘K command palette. Class names MUST match the markup in CommandPalette.razor
   (cmdk-*). A previous rename left this file on a dead cp-* prefix, so the palette
   was rendering completely unstyled. */

.cmdk-backdrop[b-7d8vbbqh2x] {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 18vh var(--sp-4) var(--sp-4);
    background: rgba(8, 10, 20, 0.42);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    animation: cmdk-fade-b-7d8vbbqh2x 0.12s ease-out;
}

.cmdk-panel[b-7d8vbbqh2x] {
    width: 560px;
    max-width: 100%;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    font-family: var(--font);
    animation: cmdk-pop-b-7d8vbbqh2x 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}

.cmdk-input-row[b-7d8vbbqh2x] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0 var(--sp-5);
    border-bottom: 1px solid var(--border);
}

.cmdk-input-icon[b-7d8vbbqh2x] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

.cmdk-input[b-7d8vbbqh2x] {
    flex: 1 1 auto;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 1.0625rem;
    font-family: var(--font);
    line-height: 1.4;
    padding: var(--sp-4) 0;
}

.cmdk-input[b-7d8vbbqh2x]::placeholder {
    color: var(--text-muted);
}

.cmdk-list[b-7d8vbbqh2x] {
    max-height: 46vh;
    overflow-y: auto;
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Quiet caption above the default (unfiltered) command list. */
.cmdk-section[b-7d8vbbqh2x] {
    padding: var(--sp-2) var(--sp-3) var(--sp-1);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cmdk-item[b-7d8vbbqh2x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font);
    font-size: 0.9375rem;
    padding: var(--sp-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition);
}

.cmdk-item:hover[b-7d8vbbqh2x] {
    background: var(--bg-hover);
}

.cmdk-item.active[b-7d8vbbqh2x] {
    background: var(--bg-selected);
}

.cmdk-item-label[b-7d8vbbqh2x] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmdk-item-hint[b-7d8vbbqh2x] {
    flex: 0 0 auto;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.cmdk-item.active .cmdk-item-hint[b-7d8vbbqh2x] {
    color: var(--text-secondary);
}

.cmdk-empty[b-7d8vbbqh2x] {
    padding: var(--sp-6) var(--sp-4);
    text-align: center;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.cmdk-empty-title[b-7d8vbbqh2x] {
    color: var(--text-secondary);
    font-weight: 500;
}

.cmdk-empty-hint[b-7d8vbbqh2x] {
    margin-top: var(--sp-1);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Footer hint strip — a quiet reminder of the navigation keys. */
.cmdk-footer[b-7d8vbbqh2x] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-2) var(--sp-4);
    border-top: 1px solid var(--border);
    background: var(--bg-muted);
}

.cmdk-hint[b-7d8vbbqh2x] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cmdk-footer kbd[b-7d8vbbqh2x] {
    min-width: 16px;
    height: 16px;
    font-size: 10px;
}

/* Live match count, pushed to the trailing edge of the footer strip. */
.cmdk-count[b-7d8vbbqh2x] {
    margin-left: auto;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

@keyframes cmdk-fade-b-7d8vbbqh2x {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cmdk-pop-b-7d8vbbqh2x {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cmdk-backdrop[b-7d8vbbqh2x],
    .cmdk-panel[b-7d8vbbqh2x] { animation: none; }
}
/* /Components/CommercialUseBanner.razor.rz.scp.css */
/* Soft "looks like work" nudge. Same chrome language as InstallPrompt (sits under the topbar,
   uses shared panel/border/spacing tokens) so it reads as calm app chrome — deliberately NOT an
   alarming/warning colour. A subtle accent-tinted left edge gives it just enough presence. */
.cu-banner[b-jdxfiugi4s] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    flex-shrink: 0;
    animation: cu-in-b-jdxfiugi4s .3s ease both;
}

@keyframes cu-in-b-jdxfiugi4s {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cu-banner[b-jdxfiugi4s] { animation: none; }
}

.cu-icon[b-jdxfiugi4s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    color: var(--accent-text);
    background: var(--bg-selected);
}

.cu-icon svg[b-jdxfiugi4s] {
    width: 16px;
    height: 16px;
}

.cu-body[b-jdxfiugi4s] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cu-text[b-jdxfiugi4s] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.cu-error[b-jdxfiugi4s] {
    font-size: 0.78rem;
    color: var(--danger, #c0392b);
    line-height: 1.3;
}

.cu-actions[b-jdxfiugi4s] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 0 0 auto;
}

.cu-personal[b-jdxfiugi4s],
.cu-sales[b-jdxfiugi4s] {
    white-space: nowrap;
}

/* Quiet X — the gentlest, per-session dismiss. Matches the save-toast close affordance. */
.cu-dismiss[b-jdxfiugi4s] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.cu-dismiss:hover:not(:disabled)[b-jdxfiugi4s] {
    background: var(--bg-selected);
    color: var(--text-primary);
}

.cu-dismiss:disabled[b-jdxfiugi4s] {
    opacity: .5;
    cursor: default;
}

.cu-dismiss svg[b-jdxfiugi4s] {
    width: 15px;
    height: 15px;
}

@media (max-width: 600px) {
    .cu-banner[b-jdxfiugi4s] {
        flex-wrap: wrap;
    }

    .cu-actions[b-jdxfiugi4s] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Components/ComposeView.razor.rz.scp.css */
/* Header row: keep "New message" left and the close (X) pinned right, vertically centered.
   The close button gives a clear exit from the full-screen compose on phones (where the
   Discard button can sit far below the fold) without forcing a scroll. */
[b-villdsq42q] .compose-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

[b-villdsq42q] .compose-head .reader-subject {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

[b-villdsq42q] .compose-close {
    flex-shrink: 0;
}

/* Subtle, non-intrusive draft auto-save indicator — sits between the title and the close (X).
   Reads as ambient status, never demanding attention while you type. */
[b-villdsq42q] .draft-state {
    flex-shrink: 0;
    font-size: var(--type-sm);
    color: var(--text-muted);
    white-space: nowrap;
    transition: opacity .2s ease;
}

[b-villdsq42q] .draft-state.saving {
    opacity: .7;
}

[b-villdsq42q] .draft-state.saved {
    color: var(--green);
}

[b-villdsq42q] .compose-close:disabled {
    opacity: .5;
    cursor: default;
    pointer-events: none;
}

[b-villdsq42q] .compose-close svg {
    width: 18px;
    height: 18px;
}

/* Quiet keyboard hint next to Send — discoverable, never shouty. Hidden on touch where
   the shortcut can't be used. */
[b-villdsq42q] .send-hint {
    margin-right: auto;
    font-size: var(--type-xs);
    color: var(--text-muted);
    white-space: nowrap;
    align-self: center;
}

@media (pointer: coarse) {
    [b-villdsq42q] .send-hint { display: none; }
}

/* Undo-send hold banner: "Sending… [Undo]" shown for the brief grace window before dispatch. */
[b-villdsq42q] .compose-undo {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-muted);
    color: var(--text-secondary);
    font-size: var(--type-h3);
}
[b-villdsq42q] .compose-undo .btn-sm { margin-left: auto; }

/* Quiet recipient tally so a multi-recipient send is a deliberate, visible choice — never
   shouty, sits just under the address fields. */
[b-villdsq42q] .recip-count {
    margin: calc(-1 * var(--sp-1)) 0 0;
    font-size: var(--type-xs);
    color: var(--text-muted);
}

/* Make sent/in-flight fields read as locked rather than just inert. */
[b-villdsq42q] .field input:disabled,
[b-villdsq42q] .compose-text:disabled,
[b-villdsq42q] .select:disabled {
    opacity: .65;
    cursor: not-allowed;
}

/* Recipient autocomplete — a floating dropdown anchored to the To/Cc field. The field is
   position:relative so the list overlays the content below rather than reflowing the form. */
.ac-field[b-villdsq42q] {
    position: relative;
}

.ac-list[b-villdsq42q] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-menu);
    margin: var(--sp-1) 0 0;
    padding: var(--sp-1);
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-content);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.ac-item[b-villdsq42q] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.ac-item:hover[b-villdsq42q],
.ac-item.active[b-villdsq42q] {
    background: var(--bg-hover);
}

.ac-name[b-villdsq42q] {
    font-size: var(--type-body);
    font-weight: 600;
    color: var(--text-primary);
}

.ac-email[b-villdsq42q] {
    font-size: var(--type-sm);
    color: var(--text-muted);
}

/* ---- Body editor: formatting toolbar over a contenteditable (rich) or textarea (plain) ---- */
.compose-editor[b-villdsq42q] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-content);
}

.compose-toolbar[b-villdsq42q] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    background: var(--bg-muted);
    flex-wrap: wrap;
}

/* Compact toolbar buttons reuse the kit .btn-sm; just constrain to a square-ish glyph cell. */
.fmt-btn[b-villdsq42q] {
    min-width: 32px;
    padding: 0 var(--sp-2);
}

/* The rich-text on/off switch sits at the right edge of the toolbar. */
.fmt-toggle[b-villdsq42q] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

/* The rich contenteditable. Mirrors the plain textarea's metrics so toggling doesn't jump. */
.compose-rich[b-villdsq42q] {
    min-height: 180px;
    max-height: 50vh;
    overflow-y: auto;
    padding: var(--sp-3);
    font-size: var(--type-body);
    line-height: 1.55;
    color: var(--text-primary);
    outline: none;
}

.compose-rich:empty[b-villdsq42q]::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}

.compose-rich[contenteditable="false"][b-villdsq42q] { opacity: .65; cursor: not-allowed; }

/* The textarea sits inside the bordered editor shell, so drop its own border in plain mode. */
.compose-editor .compose-text[b-villdsq42q] {
    border: none;
    border-radius: 0;
}

/* ---- Attachments ---- */
.attach-bar[b-villdsq42q] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.attach-add[b-villdsq42q] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: var(--btn-h);
    padding: 0 var(--sp-3);
    font-size: var(--type-sm);
    font-weight: 600;
    color: var(--text-secondary);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    transition: var(--transition);
}

.attach-add:hover[b-villdsq42q] { border-color: var(--accent); color: var(--accent-text); }
.attach-add.disabled[b-villdsq42q] { opacity: .55; pointer-events: none; }

.attach-add svg[b-villdsq42q] { width: 16px; height: 16px; }

/* Hide the native file input; the styled label is the click target. */
.attach-add[b-villdsq42q]  input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.attach-total[b-villdsq42q] {
    font-size: var(--type-sm);
    color: var(--text-muted);
}

.attach-list[b-villdsq42q] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* Attachment chip = the kit .chip primitive (via <Chip Class="attach-chip">) sized to hold a
   filename + size + remove button. */
[b-villdsq42q] .attach-chip {
    max-width: 240px;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3);
    font-size: var(--type-sm);
}

.attach-name[b-villdsq42q] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-weight: 600;
}

.attach-size[b-villdsq42q] {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.attach-remove[b-villdsq42q] {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.attach-remove:hover:not(:disabled)[b-villdsq42q] { background: var(--bg-hover); color: var(--danger); }
.attach-remove:disabled[b-villdsq42q] { opacity: .5; cursor: default; }

/* ---- On-Gratin presence: a quiet, brand-tinted reassurance under the To field. ---- */
.gratin-net[b-villdsq42q] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: calc(-1 * var(--sp-1)) 0 0;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--type-sm);
    line-height: 1.45;
    border-radius: var(--radius-sm);
    color: var(--accent-text, var(--accent));
    background: var(--accent-soft, rgba(99, 102, 241, .1));
}

.gratin-net-glyph[b-villdsq42q] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: var(--type-sm);
    line-height: 1;
    border-radius: var(--radius-sm);
    color: #fff;
    background: var(--accent);
}

.gratin-net-text[b-villdsq42q] { min-width: 0; }

/* ---- TOFU key-change alert: an amber warning (no kit "warning" Alert variant exists). ---- */
.gratin-keywarn[b-villdsq42q] {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin: var(--sp-1) 0 0;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--type-sm);
    line-height: 1.5;
    border-radius: var(--radius-sm);
    color: #b45309;
    background: rgba(245, 158, 11, .12);
}

.gratin-keywarn-glyph[b-villdsq42q] {
    flex-shrink: 0;
    font-size: var(--type-h3);
    line-height: 1.4;
}
/* /Components/ConfirmDialog.razor.rz.scp.css */
.confirm-backdrop[b-1bohk6ciue] {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: rgba(8, 10, 20, .55);
    backdrop-filter: blur(2px);
    animation: confirm-fade-b-1bohk6ciue .15s ease-out;
}

.confirm-card[b-1bohk6ciue] {
    width: 100%;
    max-width: 420px;
    background: var(--bg-content);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-6);
    animation: confirm-pop-b-1bohk6ciue .18s ease-out;
}

.confirm-title[b-1bohk6ciue] {
    margin: 0 0 var(--sp-3);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.confirm-message[b-1bohk6ciue] {
    margin: 0 0 var(--sp-6);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.confirm-actions[b-1bohk6ciue] {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3);
}

.confirm-danger[b-1bohk6ciue] {
    background: var(--danger);
    border-color: var(--danger);
}

.confirm-danger:hover[b-1bohk6ciue] {
    filter: brightness(.92);
}

@keyframes confirm-fade-b-1bohk6ciue {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes confirm-pop-b-1bohk6ciue {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .confirm-backdrop[b-1bohk6ciue],
    .confirm-card[b-1bohk6ciue] { animation: none; }
}
/* /Components/DangerZoneSettings.razor.rz.scp.css */
.dz-hint[b-2loxjm77sy] {
    color: var(--text-secondary, #6b7280);
    font-size: 13px;
    margin-top: var(--sp-2, .5rem);
}

/* The destructive section gets a clear red accent border + tint. */
.dz-danger[b-2loxjm77sy] {
    border: 1px solid rgba(255, 84, 112, .35);
    box-shadow: inset 3px 0 0 var(--danger, #ff5470);
}

.dz-danger-title[b-2loxjm77sy] {
    color: var(--danger, #ff5470);
}

.dz-list[b-2loxjm77sy] {
    margin: var(--sp-2, .5rem) 0 var(--sp-3, .75rem);
    padding-left: var(--sp-5, 1.25rem);
    color: var(--text-secondary, #6b7280);
    font-size: 13px;
    line-height: 1.55;
}

.dz-list li[b-2loxjm77sy] {
    margin-bottom: var(--sp-1, .25rem);
}

/* The destructive primary button is red, not the brand accent, so a delete never
   looks like a routine confirm. (.confirm-danger was referenced but undefined.) */
.confirm-danger[b-2loxjm77sy] {
    background: var(--danger, #ff5470);
}

.confirm-danger:hover:not(:disabled)[b-2loxjm77sy] {
    background: color-mix(in srgb, var(--danger, #ff5470) 86%, #000);
    box-shadow: var(--shadow-md);
}

/* Live confirmation that the typed username matches — makes the disabled delete
   button's gate discoverable instead of silent. Mirrors the .pw-match pattern. */
.dz-match[b-2loxjm77sy] {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted, #9095a3);
}

.dz-match.ok[b-2loxjm77sy] {
    color: var(--green, #16a34a);
}

.dz-success[b-2loxjm77sy] {
    margin-top: var(--sp-3, .75rem);
    padding: var(--sp-2, .5rem) var(--sp-3, .75rem);
    border-radius: var(--radius-md, 12px);
    background: rgba(25, 195, 125, .10);
    border: 1px solid rgba(25, 195, 125, .28);
    color: var(--green, #16a34a);
    font-size: 13px;
    font-weight: 600;
}
/* /Components/EmptyState.razor.rz.scp.css */
.empty-state[b-z14hub9s2j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--sp-3);
    padding: var(--sp-10) var(--sp-6);
    max-width: 380px;
    /* margin:auto centers on BOTH axes inside a flex pane (mail list / reader),
       and horizontally in a normal block context (settings). */
    margin: auto;
    color: var(--text-muted);
}

.empty-icon[b-z14hub9s2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--sp-1);
    border-radius: var(--radius-lg);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    /* Gentle entrance so an appearing empty-state feels intentional, not abrupt. */
    animation: empty-icon-in-b-z14hub9s2j 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes empty-icon-in-b-z14hub9s2j {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .empty-icon[b-z14hub9s2j] { animation: none; }
}

.empty-icon[b-z14hub9s2j]  svg {
    width: 26px;
    height: 26px;
}

.empty-icon-text[b-z14hub9s2j] {
    font-size: 26px;
    line-height: 1;
}

.empty-title[b-z14hub9s2j] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-message[b-z14hub9s2j] {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Prominent empty-state CTA (e.g. "Reconnect …", "Connect a mailbox"). Override the global
   .btn-primary fixed 36px height with real vertical padding so it reads as a deliberate,
   inviting action rather than a cramped chip. Scoped attribute beats .btn-primary specificity. */
.empty-action[b-z14hub9s2j] {
    margin-top: var(--sp-4);
    height: auto;
    min-height: 46px;
    padding: 13px 28px;
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: .01em;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    text-decoration: none;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.empty-action:hover[b-z14hub9s2j] {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(79, 70, 229, .32);
}

.empty-action:active[b-z14hub9s2j] {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* Quiet supplementary hint under the action — e.g. "Tip: press ⌘K". Inline kbds
   inherit the global <kbd> cap styling. */
.empty-hint[b-z14hub9s2j] {
    margin: var(--sp-2) 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.empty-hint[b-z14hub9s2j]  kbd { vertical-align: baseline; }
/* /Components/IdentitySettings.razor.rz.scp.css */
.ident[b-0soa57jw6h] { margin-bottom: var(--sp-5, 24px); }

.ident-fpr[b-0soa57jw6h] {
    margin: var(--sp-2, 8px) 0 0;
    font-size: 12px;
    color: var(--text-muted, #9095a3);
}
.ident-fpr span[b-0soa57jw6h] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--text-secondary, #4b4f59);
    letter-spacing: 0.02em;
}

.ident-empty[b-0soa57jw6h] {
    font-size: 13px;
    color: var(--text-muted, #9095a3);
    margin: var(--sp-3, 12px) 0;
}

/* ---- per-address card ---- */
.ident-card[b-0soa57jw6h] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3, 12px);
    padding: var(--sp-4, 16px);
    border: 1px solid var(--border, #e5e6ea);
    border-radius: var(--radius-md, 12px);
    background: var(--bg-content, #fff);
    margin-top: var(--sp-3, 12px);
}
.ident-card.is-empty[b-0soa57jw6h] { border-style: dashed; }

.ident-card-head[b-0soa57jw6h] { display: flex; align-items: center; gap: var(--sp-3, 12px); }

.ident-pic[b-0soa57jw6h] {
    width: 48px; height: 48px; flex: none;
    border-radius: 50%;
    overflow: hidden;
    display: grid; place-items: center;
    background: var(--bg-subtle, #f3f4f7);
}
.ident-pic-img[b-0soa57jw6h] { width: 100%; height: 100%; object-fit: cover; }
.ident-pic-mono[b-0soa57jw6h] {
    width: 100%; height: 100%;
    display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: 17px;
}

.ident-card-id[b-0soa57jw6h] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ident-card-addr[b-0soa57jw6h] {
    display: flex; align-items: center; gap: var(--sp-2, 8px); flex-wrap: wrap;
    font-size: 13.5px; font-weight: 700; color: var(--text-primary, #14151a);
    overflow-wrap: anywhere;
}
.ident-card-handle[b-0soa57jw6h] {
    font-size: 12.5px; color: var(--text-secondary, #4b4f59);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ident-card-handle-empty[b-0soa57jw6h] { color: var(--text-muted, #9095a3); font-style: italic; font-family: inherit; }

.prof-badge[b-0soa57jw6h] {
    font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: 1px 6px; border-radius: 999px;
    background: rgba(109, 94, 252, .12);
    color: var(--accent, #6d5efc);
}
.ident-default-tag[b-0soa57jw6h] {
    font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: 1px 6px; border-radius: 999px;
    background: rgba(25, 195, 125, .12);
    color: var(--green, #16a34a);
}

/* ---- picture actions ---- */
.prof-pic-actions[b-0soa57jw6h] { display: flex; align-items: center; gap: var(--sp-2, 8px); }
.prof-pic-upload[b-0soa57jw6h] { position: relative; overflow: hidden; cursor: pointer; }
.prof-pic-upload input[type=file][b-0soa57jw6h] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.prof-pic-upload.is-disabled[b-0soa57jw6h] { opacity: .5; pointer-events: none; }

/* ---- fields ---- */
.ident-field[b-0soa57jw6h] { display: flex; flex-direction: column; gap: 4px; }
.prof-label[b-0soa57jw6h] { font-size: 12px; font-weight: 600; color: var(--text-secondary, #4b4f59); }

.prof-input[b-0soa57jw6h] {
    width: 100%;
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    border: 1px solid var(--border, #e5e6ea);
    border-radius: var(--radius-sm, 8px);
    background: var(--bg-content, #fff);
    color: var(--text-primary, #14151a);
    font-size: 14px;
}
.prof-input:focus-visible[b-0soa57jw6h] { outline: 2px solid var(--accent, #6d5efc); outline-offset: 1px; }

.prof-user-input[b-0soa57jw6h] { display: flex; align-items: center; }
.prof-user-at[b-0soa57jw6h] {
    display: grid; place-items: center;
    padding: var(--sp-2, 8px) 0 var(--sp-2, 8px) var(--sp-3, 12px);
    border: 1px solid var(--border, #e5e6ea); border-right: none;
    border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px);
    background: var(--bg-subtle, #f3f4f7);
    color: var(--text-muted, #9095a3); font-weight: 600;
}
.prof-user-input .prof-input[b-0soa57jw6h] { border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0; }

.prof-hint[b-0soa57jw6h] { font-size: 11.5px; color: var(--text-muted, #9095a3); }
.prof-hint.ok[b-0soa57jw6h] { color: var(--green, #16a34a); font-weight: 600; }
.prof-hint.warn[b-0soa57jw6h] { color: var(--amber, #d97706); font-weight: 600; }

.prof-alert[b-0soa57jw6h] { margin: 0; }
.prof-saved[b-0soa57jw6h] { font-size: 12.5px; color: var(--green, #16a34a); font-weight: 600; }

/* ---- kind segmented toggle ---- */
.ident-seg[b-0soa57jw6h] {
    display: inline-flex; align-self: flex-start;
    border: 1px solid var(--border, #e5e6ea);
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
    background: var(--bg-subtle, #f3f4f7);
}
.ident-seg-btn[b-0soa57jw6h] {
    appearance: none; border: none; background: transparent; cursor: pointer;
    padding: var(--sp-2, 8px) var(--sp-4, 16px);
    font-size: 13px; font-weight: 600;
    color: var(--text-secondary, #4b4f59);
}
.ident-seg-btn + .ident-seg-btn[b-0soa57jw6h] { border-left: 1px solid var(--border, #e5e6ea); }
.ident-seg-btn.on[b-0soa57jw6h] { background: var(--bg-content, #fff); color: var(--accent, #6d5efc); }
.ident-seg-btn:disabled[b-0soa57jw6h] { opacity: .5; cursor: not-allowed; }
.ident-seg-btn:focus-visible[b-0soa57jw6h] { outline: 2px solid var(--accent, #6d5efc); outline-offset: -2px; }

/* ---- discoverability radios ---- */
.ident-disco[b-0soa57jw6h] { display: flex; flex-direction: column; gap: var(--sp-2, 8px); }
.ident-disco-opt[b-0soa57jw6h] {
    display: flex; align-items: flex-start; gap: var(--sp-2, 8px);
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    border: 1px solid var(--border, #e5e6ea);
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
}
.ident-disco-opt.on[b-0soa57jw6h] { border-color: var(--accent, #6d5efc); background: rgba(109, 94, 252, .05); }
.ident-disco-opt input[b-0soa57jw6h] { margin-top: 2px; accent-color: var(--accent, #6d5efc); }
.ident-disco-opt:has(input:disabled)[b-0soa57jw6h] { opacity: .6; cursor: not-allowed; }
.ident-disco-text[b-0soa57jw6h] { display: flex; flex-direction: column; gap: 1px; }
.ident-disco-label[b-0soa57jw6h] { font-size: 13px; font-weight: 600; color: var(--text-primary, #14151a); }
.ident-disco-hint[b-0soa57jw6h] { font-size: 11.5px; color: var(--text-muted, #9095a3); }

/* ---- footer (default radio + save) ---- */
.ident-card-foot[b-0soa57jw6h] {
    display: flex; align-items: center; gap: var(--sp-3, 12px);
    justify-content: space-between; flex-wrap: wrap;
    border-top: 1px solid var(--border, #e5e6ea);
    padding-top: var(--sp-3, 12px);
}
.ident-default[b-0soa57jw6h] {
    display: inline-flex; align-items: center; gap: var(--sp-2, 8px);
    font-size: 13px; font-weight: 600; color: var(--text-secondary, #4b4f59);
    cursor: pointer;
}
.ident-default input[b-0soa57jw6h] { accent-color: var(--green, #16a34a); }
.ident-default.is-disabled[b-0soa57jw6h] { opacity: .5; cursor: not-allowed; }
.ident-save[b-0soa57jw6h] { min-width: 7rem; }

@media (prefers-reduced-motion: reduce) {
    .ident-card[b-0soa57jw6h], .prof-input[b-0soa57jw6h], .ident-seg-btn[b-0soa57jw6h], .ident-disco-opt[b-0soa57jw6h] { transition: none; }
}
/* /Components/InstallPrompt.razor.rz.scp.css */
/* Slim, tasteful install banner that sits just under the topbar. Uses the shared
   panel/border/spacing tokens so it reads as part of the app chrome, not a popup. */
.install-prompt[b-3l89tp5c1e] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-4);
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    animation: install-in-b-3l89tp5c1e .3s ease both;
}

@keyframes install-in-b-3l89tp5c1e {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .install-prompt[b-3l89tp5c1e] { animation: none; }
}

.install-icon[b-3l89tp5c1e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: var(--radius-sm);
    color: var(--accent-text);
    background: var(--bg-selected);
}

.install-icon svg[b-3l89tp5c1e] {
    width: 16px;
    height: 16px;
}

.install-body[b-3l89tp5c1e] {
    flex: 1 1 auto;
    min-width: 0;
}

.install-text[b-3l89tp5c1e] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* The iOS "Share" pill — mirrors how the share affordance reads on the device. */
.install-share[b-3l89tp5c1e] {
    display: inline-block;
    padding: 0 var(--sp-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
}

.install-actions[b-3l89tp5c1e] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 0 0 auto;
}

.install-btn[b-3l89tp5c1e],
.install-dismiss[b-3l89tp5c1e] {
    white-space: nowrap;
}

@media (max-width: 520px) {
    .install-prompt[b-3l89tp5c1e] {
        flex-wrap: wrap;
    }

    .install-actions[b-3l89tp5c1e] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Components/LegalFooter.razor.rz.scp.css */
.legal-footer[b-7zbfxso4ys] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: var(--sp-6);
    padding-top: var(--sp-2);
    font-size: 12.5px;
    color: var(--on-dark-dim);
}

.legal-footer-links[b-7zbfxso4ys] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.legal-footer-links[b-7zbfxso4ys]  a {
    color: var(--on-dark-dim);
    text-decoration: none;
    transition: color var(--transition);
}

.legal-footer-links[b-7zbfxso4ys]  a:hover,
.legal-footer-links[b-7zbfxso4ys]  a.active {
    color: var(--on-dark);
}

.legal-footer-sep[b-7zbfxso4ys] {
    color: var(--on-dark-dim);
    opacity: .5;
}

.legal-footer-copy[b-7zbfxso4ys] {
    color: var(--on-dark-dim);
}
/* /Components/LoadingPane.razor.rz.scp.css */
.loading-pane[b-aonvnliskc] {
    flex: 1;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    color: var(--text-muted);
    font-size: var(--type-body);
}
.loading-pane .spinner[b-aonvnliskc] { width: 22px; height: 22px; }
.loading-text[b-aonvnliskc] { font-size: var(--type-h3); }
/* /Components/MailAccountsSettings.razor.rz.scp.css */
/* Checkboxes pick up the brand accent instead of the OS default blue. */
.check input[type="checkbox"][b-fuoik8eg0z] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent, #6d5efc);
    cursor: pointer;
}

/* The OAuth "Connect" row reads as one unit: button + connected status, wrapping
   on narrow widths rather than overflowing the settings column. */
.oauth-connect[b-fuoik8eg0z] {
    flex-wrap: wrap;
}

/* Per-account signature box — mirrors the .field input look (the global rule only
   styles <input>, not <textarea>), with room to type a couple of lines. */
.acct-sig-text[b-fuoik8eg0z] {
    min-height: 84px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    background: var(--bg-content);
    color: var(--text-primary);
    transition: var(--transition);
}

.acct-sig-text:hover[b-fuoik8eg0z] { border-color: var(--text-muted); }
.acct-sig-text:focus[b-fuoik8eg0z] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79, 70, 229, .14); }

/* Per-account "Options" expander: a chevron on the row reveals a drawer with the
   Calendar/Contacts toggle switches + an Edit action — consistent with one expandable
   place for everything about a mailbox, instead of loose checkboxes on the row. */
.acct-chev[b-fuoik8eg0z] {
    width: 18px;
    height: 18px;
    color: var(--text-muted, #9095a3);
    transition: transform .18s ease;
}
.acct-chev.open[b-fuoik8eg0z] { transform: rotate(180deg); }

.acct-options[b-fuoik8eg0z] {
    margin: calc(-1 * var(--sp-1, 4px)) 0 var(--sp-2, 8px) var(--sp-10, 40px);
    padding: var(--sp-1, 4px) var(--sp-4, 16px);
    border: 1px solid var(--border, #e5e6ea);
    border-radius: var(--radius-md, 12px);
    background: var(--bg-muted, #f7f8fa);
    display: flex;
    flex-direction: column;
}

.acct-opt-row[b-fuoik8eg0z] {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 12px);
    padding: var(--sp-3, 12px) 0;
}
.acct-opt-row + .acct-opt-row[b-fuoik8eg0z] { border-top: 1px solid var(--border, #e5e6ea); }

.acct-opt-text[b-fuoik8eg0z] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.acct-opt-title[b-fuoik8eg0z] { font-size: 13px; font-weight: 600; color: var(--text-primary, #14151a); }
.acct-opt-sub[b-fuoik8eg0z] { font-size: 11.5px; color: var(--text-muted, #9095a3); }

.acct-opt-row .spinner[b-fuoik8eg0z] { margin: 0; flex: 0 0 auto; }

/* Disabled switch (unsupported provider) reads muted; the title attr explains why. */
.rule-toggle:has(input:disabled)[b-fuoik8eg0z] { opacity: .45; cursor: not-allowed; }

.acct-opt-actions[b-fuoik8eg0z] {
    padding: var(--sp-3, 12px) 0 var(--sp-1, 4px);
    border-top: 1px solid var(--border, #e5e6ea);
}
/* /Components/MessageBody.razor.rz.scp.css */
/* Scoped styling for the rendered message body. These classes had no styles in app.css,
   so this file gives plain-text and sanitized-HTML mail a sane, contained presentation
   using the shared tokens. ::deep is needed because the sanitized HTML is injected as a
   MarkupString (child content not owned by this component's scope). */

.mail-text[b-jrtowwu65j] {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    /* Plain-text / decrypted bodies stay themed (readable in both light + dark) but use the
       stronger primary text color instead of the muted reader-body default. */
    color: var(--text-primary);
}

.mail-text p[b-jrtowwu65j] {
    margin: 0 0 var(--sp-3);
    min-height: 1em; /* keep blank lines visible */
}

.mail-empty[b-jrtowwu65j] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-muted);
    font-style: italic;
}

.mail-empty svg[b-jrtowwu65j] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: .7;
}

/* Sanitized HTML email: contain it so wide tables / huge images can't blow out the reader.
   Images scale down; tables/pre scroll horizontally inside the pane instead of the page. */
.mail-html[b-jrtowwu65j] {
    max-width: 100%;
    overflow-x: auto;
    word-break: break-word;
    overflow-wrap: anywhere;
    /* Email HTML is authored for a LIGHT background with its own colors. Render it on a consistent
       light "paper" surface (Gmail/Outlook style) so it stays readable + self-consistent no matter
       the app's light/dark theme — dark mode otherwise turns dark email text invisible. The reader
       chrome around it still follows the theme; the message itself is an intentional light sheet. */
    background: #ffffff;
    color: #1b1b1b;
    color-scheme: light;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
}

/* Readable defaults INSIDE the paper for anything the email didn't style itself (inline email
   styles still win via specificity). Standard email-blue links read clearly on white. */
[b-jrtowwu65j] .mail-html a { color: #2563eb; }
[b-jrtowwu65j] .mail-html hr { border: none; border-top: 1px solid #e5e5e5; }

/* A remote image blocked for privacy (carries data-blocked-src, no src) renders a tidy dashed
   placeholder instead of the browser's broken-image glyph, so the layout + the reveal read clean. */
[b-jrtowwu65j] .mail-html img:not([src]) {
    min-width: 24px;
    min-height: 24px;
    background: #f1f1f4;
    border: 1px dashed #cfcfd6;
    border-radius: 4px;
    color: #8a8a93;
    font-size: 11px;
}

[b-jrtowwu65j] .mail-html img {
    max-width: 100%;
    height: auto;
}

[b-jrtowwu65j] .mail-html table {
    max-width: 100%;
}

[b-jrtowwu65j] .mail-html pre {
    white-space: pre-wrap;
    word-break: break-word;
}

[b-jrtowwu65j] .mail-html a {
    word-break: break-all;
}

/* Privacy banner for blocked remote images — wasn't styled anywhere. */
.remote-banner[b-jrtowwu65j] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-4);
    font-size: 12.5px;
    color: var(--text-secondary);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.remote-banner .remote-actions[b-jrtowwu65j] {
    margin-left: auto;
    display: flex;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.remote-banner button[b-jrtowwu65j] {
    height: 28px;
    padding: 0 var(--sp-3);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}

.remote-banner button:hover[b-jrtowwu65j] { border-color: var(--accent); color: var(--accent); }
.remote-banner button:focus-visible[b-jrtowwu65j] { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Gmail-style "•••" toggle that reveals collapsed quoted reply history. Quiet, themed pill that
   reads as a control without competing with the message body. Used for both plain-text (scoped) and
   the MarkupString HTML body (needs ::deep since that markup isn't owned by this component's scope). */
.mail-quote-toggle[b-jrtowwu65j],
[b-jrtowwu65j] .mail-quote-toggle {
    display: inline-flex;
    align-items: center;
    margin: var(--sp-2) 0;
    padding: 1px 10px;
    min-height: 20px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .5px;
    color: var(--text-secondary);
    background: var(--bg-muted);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.mail-quote-toggle:hover[b-jrtowwu65j],
[b-jrtowwu65j] .mail-quote-toggle:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.mail-quote-toggle:focus-visible[b-jrtowwu65j],
[b-jrtowwu65j] .mail-quote-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Copy-to-clipboard affordance on the decrypted-message banner. Quiet, pinned to the right,
   with a "Copied" confirmation. Inherits the banner's color so it reads as part of it. */
[b-jrtowwu65j] .copy-body {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 var(--sp-2);
    font-size: 11.5px;
    font-weight: 600;
    color: inherit;
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    opacity: .8;
    cursor: pointer;
    transition: opacity .12s ease;
}

[b-jrtowwu65j] .copy-body:hover { opacity: 1; }
[b-jrtowwu65j] .copy-body:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

[b-jrtowwu65j] .copy-body svg {
    width: 13px;
    height: 13px;
}
/* /Components/NotificationsSettings.razor.rz.scp.css */
.notify-row[b-x3o533oxne] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.notify-row-text[b-x3o533oxne] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.notify-row-title[b-x3o533oxne] {
    font-weight: 600;
    color: var(--text-primary);
}

.notify-row-sub[b-x3o533oxne] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Nudge the spinner to sit on the toggle's baseline rather than the text block top. */
.notify-row .spinner[b-x3o533oxne] {
    margin-left: auto;
    margin-top: 0.15rem;
    flex: 0 0 auto;
}
/* /Components/ProfileSettings.razor.rz.scp.css */
/* Identity header — avatar + username + copyable email, calm and tidy. */
.prof-identity[b-borshc6qlt] {
    display: flex;
    align-items: center;
    gap: var(--sp-4, 16px);
    padding: var(--sp-4, 16px) var(--sp-5, 20px);
    border: 1px solid var(--border, #e5e6ea);
    border-radius: var(--radius-lg, 16px);
    background: var(--bg-panel, #fff);
    margin-top: var(--sp-3, 12px);
}

.prof-avatar[b-borshc6qlt] {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 22px;
    background: var(--grad, #6d5efc);
    user-select: none;
}

.prof-identity-meta[b-borshc6qlt] {
    min-width: 0;
}

.prof-name[b-borshc6qlt] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary, #14151a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Email row doubles as a one-tap copy affordance — quiet until hovered. */
.prof-email[b-borshc6qlt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin: 3px 0 0 -6px;
    padding: 3px 6px;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm, 6px);
    color: var(--text-muted, #9095a3);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: var(--transition, all .15s ease);
}

.prof-email-text[b-borshc6qlt] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prof-email:hover[b-borshc6qlt] {
    background: var(--bg-hover, #eef0f3);
    color: var(--text-secondary, #4b4f59);
}

.prof-email-ico[b-borshc6qlt] {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity var(--transition, .15s ease);
}

.prof-email:hover .prof-email-ico[b-borshc6qlt] {
    opacity: .7;
}

/* The success check stays visible (green) regardless of hover. */
.prof-email[title="Copied"] .prof-email-ico[b-borshc6qlt],
.prof-email[aria-label="Email copied"] .prof-email-ico[b-borshc6qlt] {
    opacity: 1;
    color: var(--green, #16a34a);
}

/* Inline success confirmation — mirrors .form-error but in the success accent. */
.form-success[b-borshc6qlt] {
    margin-top: var(--sp-3, 0.75rem);
    padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);
    border-radius: var(--radius-md, 12px);
    background: rgba(25, 195, 125, .10);
    border: 1px solid rgba(25, 195, 125, .28);
    color: var(--green, #16a34a);
    font-size: 13px;
    font-weight: 600;
}

/* Advisory password-strength meter — a thin bar plus a one-line label. */
.pw-strength[b-borshc6qlt] {
    margin-top: 6px;
    height: 4px;
    border-radius: 999px;
    background: var(--bg-muted, #f1f2f5);
    overflow: hidden;
}

.pw-bar[b-borshc6qlt] {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width .2s ease, background .2s ease;
}

.pw-bar.weak[b-borshc6qlt]   { width: 25%;  background: var(--red, #dc2626); }
.pw-bar.fair[b-borshc6qlt]   { width: 50%;  background: #d99a16; }
.pw-bar.good[b-borshc6qlt]   { width: 75%;  background: #2f9e6f; }
.pw-bar.strong[b-borshc6qlt] { width: 100%; background: var(--green, #16a34a); }

.pw-hint[b-borshc6qlt] {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted, #9095a3);
}

.pw-hint.weak[b-borshc6qlt] { color: var(--red, #dc2626); }
.pw-hint.strong[b-borshc6qlt],
.pw-hint.good[b-borshc6qlt] { color: var(--green, #16a34a); }

/* Live confirm-match readout. */
.pw-match[b-borshc6qlt] {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted, #9095a3);
}

.pw-match.ok[b-borshc6qlt] {
    color: var(--green, #16a34a);
}
/* /Components/RecoverySettings.razor.rz.scp.css */
.rec-status[b-zvzxonpwst] {
    margin: var(--sp-3, 0.75rem) 0;
    font-size: 0.9rem;
    color: var(--text-secondary, #52525b);
}

.rec-status-ok[b-zvzxonpwst] {
    color: var(--green, #16a34a);
    font-weight: 600;
}

.rec-replace-note[b-zvzxonpwst] {
    margin-top: var(--sp-2, 0.5rem);
    font-size: 0.85rem;
}

.rec-warn[b-zvzxonpwst] {
    margin: var(--sp-3, 0.75rem) 0;
    padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);
    border-radius: var(--radius-md, 8px);
    background: var(--bg-muted, #f4f4f5);
    border: 1px solid var(--border, #e4e4e7);
    font-size: 0.85rem;
    color: var(--text-secondary, #52525b);
}

.rec-grid[b-zvzxonpwst] {
    list-style: none;
    counter-reset: word;
    margin: var(--sp-3, 0.75rem) 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2, 0.5rem);
}

.rec-grid li[b-zvzxonpwst] {
    counter-increment: word;
    display: flex;
    align-items: baseline;
    gap: var(--sp-2, 0.5rem);
    padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);
    background: var(--bg-panel, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: var(--radius-md, 8px);
    font-variant-numeric: tabular-nums;
}

.rec-grid li[b-zvzxonpwst]::before {
    content: counter(word);
    color: var(--text-muted, #888);
    font-size: 0.8em;
    min-width: 1.25em;
    text-align: right;
}

.rec-grid li span[b-zvzxonpwst] {
    font-weight: 600;
    color: var(--text-primary, #18181b);
}

.rec-confirm[b-zvzxonpwst] {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 0.5rem);
    font-size: 0.9rem;
    color: var(--text-secondary, #52525b);
    cursor: pointer;
}

.rec-confirm input[b-zvzxonpwst] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent, #6d5efc);
    cursor: pointer;
}

/* "I've saved it" sits left; Copy + Done group to the right. Wraps cleanly on
   narrow widths so nothing overflows the settings column. */
.rec-actions[b-zvzxonpwst] {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-3, 0.75rem);
}

.rec-actions-buttons[b-zvzxonpwst] {
    display: flex;
    gap: var(--sp-2, 0.5rem);
}

@media (max-width: 460px) {
    .rec-grid[b-zvzxonpwst] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/RulesManager.razor.rz.scp.css */
/* Disabled state for the enable/disable rule toggle: while a vault save is in flight
   the checkbox is disabled, so dim the switch and drop the pointer cursor instead of
   leaving it looking interactive. Mirrors the global .enc-toggle:disabled pattern. */
.rule-toggle:has(input:disabled)[b-ztrk63u3y9] {
    cursor: default;
}

.rule-toggle input:disabled + .rule-switch[b-ztrk63u3y9] {
    opacity: .5;
    cursor: default;
}

/* The real checkbox is visually hidden, so keyboard focus has no visible ring.
   Paint one on the switch when the input is focused via keyboard. */
.rule-toggle input:focus-visible + .rule-switch[b-ztrk63u3y9] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Live, human-readable preview of the rule being built — reassures the user the rule
   reads the way they intend before they commit it. */
.rule-preview[b-ztrk63u3y9] {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2, 0.5rem);
    margin: var(--sp-3, 0.75rem) 0 0;
    padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem);
    border-radius: var(--radius-sm, 8px);
    background: var(--bg-selected, #eaecfb);
    color: var(--text-secondary, #4b4f59);
    font-size: 13px;
    line-height: 1.5;
}

.rule-preview-label[b-ztrk63u3y9] {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent, #6d5efc);
}

/* Quiet free-tier usage readout that sits beside the New rule button. */
.rule-usage[b-ztrk63u3y9] {
    margin: var(--sp-2, 0.5rem) 0 0;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-muted, #9095a3);
}
/* /Components/SegmentedToggle.razor.rz.scp.css */
.seg[b-vqtfc2hlpd] {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bg-content);
}
.seg-btn[b-vqtfc2hlpd] {
    border: 0;
    background: transparent;
    padding: 6px 14px;
    font-size: var(--type-sm);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.seg-btn:hover[b-vqtfc2hlpd] { background: var(--bg-hover); }
.seg-btn.on[b-vqtfc2hlpd] { background: var(--accent); color: #fff; }
/* /Components/SettingsBody.razor.rz.scp.css */
/* ============================================================ settings body ===
   Two-pane settings surface shared by the side-panel and the /settings page. Chrome
   comes from the Chicon UI kit in app.css:
     - the section nav is a .panel (.panel-head + .panel-scroll.folders, .folder rows)
     - the content is a .full-pane (.reader) with a .panel-scroll + .settings-content column
   This scoped sheet only lays the two panes out, narrows the nav, and styles the
   stacked sections. The .set-page / .set-embedded modifiers tune the height source. */

.set[b-ryzm7gpt0c] {
    display: flex;
    min-width: 0;
    min-height: 0;
}

/* Full-page variant fills the app body; embedded (side-panel) variant fills the panel. */
.set-page[b-ryzm7gpt0c],
.set-embedded[b-ryzm7gpt0c] {
    flex: 1;
    height: 100%;
}

/* ----- section nav (a narrower .panel) ----- */
.set-nav[b-ryzm7gpt0c] {
    /* The kit .panel is 344px (a mail list); the settings section list is slimmer. */
    width: 240px;
    flex: 0 0 240px;
}

/* The kit .folder rows are <div>s in mail; here they're <button>s for keyboard/click
   semantics, so reset the UA button chrome back to a full-width, flush row. The hover/
   active tint + 3px accent bar still come from app.css .folder. */
.set-nav .folder[b-ryzm7gpt0c] {
    width: 100%;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    text-align: left;
}

/* .folder gives hover/active tint + the 3px accent bar; we only set the label flow. */
.set-nav-label[b-ryzm7gpt0c] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----- content surface ----- */
.set-content:focus[b-ryzm7gpt0c] {
    outline: none;
}

/* Generous bottom headroom so even the last (short) section can scroll up under the
   nav band and become the active scroll-spy target. .settings-content centers the
   readable column (max-width from app.css). */
.set-content-inner[b-ryzm7gpt0c] {
    padding: var(--sp-8) var(--sp-8) clamp(64px, 22vh, 240px);
}

/* Each section is an anchor target in the single scrollable page. */
.set-sec[b-ryzm7gpt0c] {
    scroll-margin-top: var(--sp-5);
}

.set-sec + .set-sec[b-ryzm7gpt0c] {
    margin-top: var(--sp-10);
    padding-top: var(--sp-8);
    border-top: 1px solid var(--border);
}

.set-section-head[b-ryzm7gpt0c] {
    margin-bottom: var(--sp-5);
}

.set-section-title[b-ryzm7gpt0c] {
    font-size: var(--type-h1);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}

.set-section-blurb[b-ryzm7gpt0c] {
    margin: var(--sp-2) 0 0;
    font-size: var(--type-h3);
    line-height: 1.6;
    color: var(--text-muted);
}

/* Sub-grouping within a section (e.g. Mailboxes, Account recovery). */
.set-group[b-ryzm7gpt0c] {
    padding-top: var(--sp-5);
    margin-top: var(--sp-5);
    border-top: 1px solid var(--border);
}

.set-group:first-of-type[b-ryzm7gpt0c] {
    padding-top: var(--sp-2);
    margin-top: var(--sp-2);
    border-top: none;
}

.set-group-head[b-ryzm7gpt0c] {
    margin-bottom: var(--sp-3);
}

.set-group-title[b-ryzm7gpt0c] {
    font-size: var(--type-h2);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0;
}

.set-group-sub[b-ryzm7gpt0c] {
    margin: var(--sp-1) 0 0;
    font-size: var(--type-sm);
    line-height: 1.55;
    color: var(--text-muted);
}

/* Advanced section collapsed behind a disclosure toggle — destructive controls aren't
   shown by default. Styled as a secondary, bordered control on the kit's --btn-h. */
.set-advanced-toggle[b-ryzm7gpt0c] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: var(--btn-h);
    padding: 0 var(--sp-3);
    border: 1px solid var(--border-strong);
    background: var(--bg-content);
    color: var(--text-secondary);
    font: inherit;
    font-size: var(--type-h3);
    font-weight: 600;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
}

.set-advanced-toggle:hover[b-ryzm7gpt0c] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.set-advanced-chevron[b-ryzm7gpt0c] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transition: transform var(--transition);
}

.set-advanced-chevron.open[b-ryzm7gpt0c] {
    transform: rotate(90deg);
}

/* ----- phone: stack the section nav above the content as a scrollable chip strip ----- */
@media (max-width: 640px) {
    .set[b-ryzm7gpt0c] {
        flex-direction: column;
    }

    .set-nav[b-ryzm7gpt0c] {
        width: 100%;
        flex: 0 0 auto;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    /* Hide the panel head on phones — the section title in the content carries the label. */
    .set-nav .panel-head[b-ryzm7gpt0c] {
        display: none;
    }

    .set-nav .panel-scroll.folders[b-ryzm7gpt0c] {
        display: flex;
        flex-direction: row;
        gap: var(--sp-2);
        overflow-x: auto;
        overflow-y: hidden;
        padding: var(--sp-2) var(--sp-3);
        -webkit-overflow-scrolling: touch;
    }

    /* Section "chips" instead of full-width rows. */
    .set-nav .folder[b-ryzm7gpt0c] {
        flex: 0 0 auto;
        width: auto;
        white-space: nowrap;
        padding: var(--sp-2) var(--sp-3);
        border: 1px solid var(--border);
        border-radius: 999px;
    }

    .set-nav .folder.active[b-ryzm7gpt0c] {
        border-color: var(--border-strong);
    }

    /* No accent bar on the horizontal chip strip. */
    .set-nav .folder.active[b-ryzm7gpt0c]::before {
        display: none;
    }

    .set-content-inner[b-ryzm7gpt0c] {
        padding: var(--sp-5) var(--sp-4) var(--sp-8);
    }
}
/* /Components/ShortcutsOverlay.razor.rz.scp.css */
/* Keyboard shortcuts cheat-sheet. Mirrors the CommandPalette / ConfirmDialog look:
   blurred backdrop, panel-toned card, token-driven spacing and colours. */

.ks-backdrop[b-vibjx657yn] {
    position: fixed;
    inset: 0;
    z-index: 320;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: rgba(8, 10, 20, 0.42);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    animation: ks-fade-b-vibjx657yn 0.12s ease-out;
}

.ks-card[b-vibjx657yn] {
    width: 720px;
    max-width: 100%;
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    font-family: var(--font);
    overflow: hidden;
    animation: ks-pop-b-vibjx657yn 0.14s cubic-bezier(0.16, 1, 0.3, 1);
}

.ks-head[b-vibjx657yn] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
}

.ks-title[b-vibjx657yn] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary);
}

.ks-close[b-vibjx657yn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.ks-close:hover[b-vibjx657yn] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.ks-close svg[b-vibjx657yn] {
    width: 18px;
    height: 18px;
}

.ks-body[b-vibjx657yn] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--sp-5);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-6);
    align-content: start;
}

.ks-group[b-vibjx657yn] {
    min-width: 0;
}

.ks-group-title[b-vibjx657yn] {
    margin: 0 0 var(--sp-2);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ks-rows[b-vibjx657yn] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ks-row[b-vibjx657yn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-md);
}

.ks-row:hover[b-vibjx657yn] {
    background: var(--bg-hover);
}

.ks-keys[b-vibjx657yn] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.ks-keys kbd[b-vibjx657yn] {
    min-width: 18px;
    height: 20px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font);
    font-size: 0.75rem;
    line-height: 1;
    color: var(--text-secondary);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.ks-sep[b-vibjx657yn] {
    font-size: 0.6875rem;
    color: var(--text-muted);
}

.ks-desc[b-vibjx657yn] {
    flex: 1 1 auto;
    margin: 0;
    text-align: right;
    font-size: 0.875rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ks-foot[b-vibjx657yn] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-2) var(--sp-5);
    border-top: 1px solid var(--border);
    background: var(--bg-muted);
}

.ks-foot-hint[b-vibjx657yn] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ks-foot kbd[b-vibjx657yn] {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-secondary);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
    .ks-body[b-vibjx657yn] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@keyframes ks-fade-b-vibjx657yn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ks-pop-b-vibjx657yn {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ks-backdrop[b-vibjx657yn],
    .ks-card[b-vibjx657yn] { animation: none; }
}
/* /Components/SidePanel.razor.rz.scp.css */
/* ============================================================ side panel ===
   Right-anchored slide-over drawer. Backdrop fades in; the panel slides from the
   right. It's an OVERLAY (position: fixed) — it never pushes page content. Flat,
   token-driven to match the design system. */

.sp-backdrop[b-3widujtynk] {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0, 0, 0, .35);
    animation: sp-fade-b-3widujtynk var(--transition);
}

@keyframes sp-fade-b-3widujtynk {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.sp-panel[b-3widujtynk] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--bg-content);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    /* Clear the notch / rounded corners when standalone with viewport-fit=cover. */
    padding-right: env(safe-area-inset-right);
    animation: sp-slide-b-3widujtynk var(--transition);
}

.sp-panel.sp-wide[b-3widujtynk] {
    width: min(900px, 100%);
}

@keyframes sp-slide-b-3widujtynk {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

.sp-head[b-3widujtynk] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    height: 64px;
    padding: 0 var(--sp-4) 0 var(--sp-6);
    border-bottom: 1px solid var(--border);
}

.sp-title[b-3widujtynk] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-close[b-3widujtynk] {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}

.sp-close:hover[b-3widujtynk] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.sp-close svg[b-3widujtynk] {
    width: 18px;
    height: 18px;
}

/* Scrollable body. */
.sp-body[b-3widujtynk] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--sp-6);
}

/* Sticky action footer, separated by a hairline. */
.sp-foot[b-3widujtynk] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border);
    background: var(--bg-content);
}

/* Flush body: no padding, becomes a flex container so a full-bleed child (the Settings
   two-pane layout) fills the panel edge-to-edge. */
.sp-body-flush[b-3widujtynk] {
    padding: 0;
    display: flex;
}
.sp-body-flush[b-3widujtynk]  .set {
    flex: 1;
    height: 100%;
}

/* Phone: panel goes full-width. */
@media (max-width: 560px) {
    .sp-panel[b-3widujtynk],
    .sp-panel.sp-wide[b-3widujtynk] {
        width: 100%;
    }
}
/* /Components/TeamSettings.razor.rz.scp.css */
.team[b-uuokyktqkf] { margin-bottom: var(--sp-5, 24px); }

.team-loading[b-uuokyktqkf] {
    display: flex; align-items: center; gap: var(--sp-2, 8px);
    font-size: 13px; color: var(--text-muted, #9095a3);
    margin: var(--sp-3, 12px) 0;
}

.team-alert[b-uuokyktqkf] { margin-top: var(--sp-3, 12px); }
.team-alert-cta[b-uuokyktqkf] { display: flex; align-items: center; gap: var(--sp-3, 12px); flex-wrap: wrap; }
.team-alert-cta .team-alert-body[b-uuokyktqkf] { flex: 1 1 16rem; min-width: 0; }
.team-alert-cta .btn-secondary[b-uuokyktqkf] { flex: 0 0 auto; white-space: nowrap; }

/* ---- empty / create ---- */
.team-empty-sub[b-uuokyktqkf], .team-create-note[b-uuokyktqkf], .team-invite-note[b-uuokyktqkf], .team-billing-note[b-uuokyktqkf] {
    font-size: 12.5px; color: var(--text-muted, #9095a3);
    margin: var(--sp-2, 8px) 0 0; line-height: 1.5;
}

.team-create-row[b-uuokyktqkf] {
    display: flex; gap: var(--sp-2, 8px); align-items: center;
    margin-top: var(--sp-3, 12px); flex-wrap: wrap;
}
.team-name-input[b-uuokyktqkf] { flex: 1 1 220px; min-width: 0; }

/* ---- tenant card ---- */
.team-card[b-uuokyktqkf] {
    display: flex; flex-direction: column; gap: var(--sp-4, 16px);
    padding: var(--sp-4, 16px);
    border: 1px solid var(--border, #e5e6ea);
    border-radius: var(--radius-md, 12px);
    background: var(--bg-content, #fff);
    margin-top: var(--sp-3, 12px);
}

.team-card-head[b-uuokyktqkf] { display: flex; align-items: center; gap: var(--sp-3, 12px); }
.team-id[b-uuokyktqkf] { display: flex; align-items: center; gap: var(--sp-3, 12px); min-width: 0; }
.team-avatar[b-uuokyktqkf] {
    width: 44px; height: 44px; flex: none; border-radius: var(--radius-md, 12px);
    display: grid; place-items: center; font-weight: 700; font-size: 15px;
    background: rgba(79, 70, 229, .12); color: var(--accent-text, #4f46e5);
}
.team-id-meta[b-uuokyktqkf] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.team-name[b-uuokyktqkf] {
    display: flex; align-items: center; gap: var(--sp-2, 8px); flex-wrap: wrap;
    font-size: 15px; font-weight: 700; color: var(--text-primary, #14151a);
}
.team-sub[b-uuokyktqkf] {
    display: flex; align-items: center; gap: var(--sp-2, 8px); flex-wrap: wrap;
    font-size: 12.5px; color: var(--text-secondary, #4b4f59);
}

.team-role-pill[b-uuokyktqkf], .team-role-tag[b-uuokyktqkf] {
    font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: 1px 6px; border-radius: 999px;
    background: var(--bg-subtle, #f3f4f7); color: var(--text-muted, #6d7280);
}
.team-role-pill.is-admin[b-uuokyktqkf], .team-role-tag.is-admin[b-uuokyktqkf] {
    background: rgba(79, 70, 229, .12); color: var(--accent-text, #4f46e5);
}

.team-substate[b-uuokyktqkf] { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 999px; }
.team-substate.is-ok[b-uuokyktqkf]    { background: rgba(22, 163, 74, .12); color: var(--green, #16a34a); }
.team-substate.is-warn[b-uuokyktqkf]  { background: rgba(217, 119, 6, .14); color: #b45309; }
.team-substate.is-muted[b-uuokyktqkf] { background: var(--bg-subtle, #f3f4f7); color: var(--text-muted, #6d7280); }

/* ---- sections ---- */
.team-section[b-uuokyktqkf] {
    display: flex; flex-direction: column; gap: var(--sp-2, 8px);
    padding-top: var(--sp-4, 16px);
    border-top: 1px solid var(--border, #e5e6ea);
}
.team-section-head[b-uuokyktqkf] { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2, 8px); }
.team-section-title[b-uuokyktqkf] { font-size: 13px; font-weight: 700; color: var(--text-primary, #14151a); margin: 0; }
.team-section-sub[b-uuokyktqkf] { font-size: 12.5px; color: var(--text-secondary, #4b4f59); margin: 0; line-height: 1.5; }

/* ---- invite ---- */
.team-invite[b-uuokyktqkf] { display: flex; gap: var(--sp-2, 8px); align-items: center; margin-top: var(--sp-2, 8px); }
.team-invite-field[b-uuokyktqkf] { position: relative; flex: 1 1 220px; min-width: 0; }

/* ---- roster ---- */
.team-roster[b-uuokyktqkf] { list-style: none; margin: var(--sp-2, 8px) 0 0; padding: 0; display: flex; flex-direction: column; }
.team-member[b-uuokyktqkf] {
    display: flex; align-items: center; gap: var(--sp-3, 12px);
    padding: var(--sp-2, 8px) 0;
    border-bottom: 1px solid var(--border, #e5e6ea);
}
.team-member:last-child[b-uuokyktqkf] { border-bottom: none; }
.team-member-av[b-uuokyktqkf] {
    width: 32px; height: 32px; flex: none; border-radius: 50%;
    display: grid; place-items: center; font-size: 12px; font-weight: 700;
    background: var(--bg-subtle, #f3f4f7); color: var(--text-secondary, #4b4f59);
}
.team-member-meta[b-uuokyktqkf] { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.team-member-name[b-uuokyktqkf] {
    display: flex; align-items: center; gap: var(--sp-2, 8px);
    font-size: 13px; font-weight: 600; color: var(--text-primary, #14151a);
    overflow-wrap: anywhere;
}
.team-member-addr[b-uuokyktqkf] {
    font-size: 11.5px; color: var(--text-muted, #9095a3);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}
.team-you[b-uuokyktqkf] {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--text-muted, #6d7280);
}
.team-member-tags[b-uuokyktqkf] { display: flex; align-items: center; gap: var(--sp-1, 4px); flex: none; }
.team-seat-tag[b-uuokyktqkf] {
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: 1px 6px; border-radius: 999px;
    background: rgba(217, 119, 6, .14); color: #b45309;
}
.team-member-actions[b-uuokyktqkf] { display: flex; align-items: center; gap: var(--sp-1, 4px); flex: none; }
.team-remove:hover:not(:disabled)[b-uuokyktqkf] { color: #dc2626; }

.team-floor-note[b-uuokyktqkf] {
    font-size: 12px; color: #b45309; line-height: 1.5;
    margin: var(--sp-2, 8px) 0 0;
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    background: rgba(217, 119, 6, .08);
    border-radius: var(--radius-sm, 8px);
}

.team-leave-row[b-uuokyktqkf] { margin-top: var(--sp-2, 8px); }
.team-leave:hover:not(:disabled)[b-uuokyktqkf] { color: #dc2626; }

/* ---- channel ---- */
.team-chan-create[b-uuokyktqkf], .team-chan[b-uuokyktqkf] { display: flex; gap: var(--sp-2, 8px); align-items: center; margin-top: var(--sp-2, 8px); }
.team-chan-create .prof-input[b-uuokyktqkf] { flex: 1 1 200px; min-width: 0; }
.team-chan-list[b-uuokyktqkf] { list-style: none; margin: 0; padding: 0; }
.team-chan[b-uuokyktqkf] {
    padding: var(--sp-2, 8px) 0; border-bottom: 1px solid var(--border, #e5e6ea);
}
.team-chan:last-child[b-uuokyktqkf] { border-bottom: none; }
.team-chan-hash[b-uuokyktqkf] { font-weight: 700; color: var(--text-muted, #9095a3); flex: none; }
.team-chan-meta[b-uuokyktqkf] { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.team-chan-name[b-uuokyktqkf] { font-size: 13px; font-weight: 600; color: var(--text-primary, #14151a); }
.team-chan-topic[b-uuokyktqkf] { font-size: 11.5px; color: var(--text-muted, #9095a3); }

/* ---- billing ---- */
.team-billing[b-uuokyktqkf] { display: flex; gap: var(--sp-2, 8px); align-items: flex-end; flex-wrap: wrap; margin-top: var(--sp-2, 8px); }
.team-seats-pick[b-uuokyktqkf] { display: flex; flex-direction: column; gap: 4px; }
.team-seats-input[b-uuokyktqkf] { width: 90px; }

@media (max-width: 640px) {
    .team-member[b-uuokyktqkf] { flex-wrap: wrap; }
    .team-member-actions[b-uuokyktqkf] { width: 100%; justify-content: flex-end; }
    .team-billing[b-uuokyktqkf] { align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
    .team-card[b-uuokyktqkf], .team-member[b-uuokyktqkf] { transition: none; }
}

/* ---- team recovery (BIP39 org-key safety net) ---- */
.team-rec-warn[b-uuokyktqkf] {
    font-size: 12.5px; font-weight: 600; color: #b45309; line-height: 1.5;
    margin-top: var(--sp-2, 8px);
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    background: rgba(217, 119, 6, .08);
    border-radius: var(--radius-sm, 8px);
}
.team-rec-grid[b-uuokyktqkf] {
    list-style: none; margin: var(--sp-3, 12px) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2, 8px);
    counter-reset: rec;
}
.team-rec-grid li[b-uuokyktqkf] {
    counter-increment: rec;
    display: flex; align-items: center; gap: var(--sp-2, 8px);
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    border: 1px solid var(--border, #e5e6ea);
    border-radius: var(--radius-sm, 8px);
    background: var(--bg-subtle, #f7f8fa);
    font-size: 13px; font-weight: 600; color: var(--text-primary, #14151a);
}
.team-rec-grid li[b-uuokyktqkf]::before {
    content: counter(rec); flex: none;
    font-size: 11px; font-weight: 600; color: var(--text-muted, #9095a3);
    min-width: 14px; text-align: right;
}
.team-rec-actions[b-uuokyktqkf] {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3, 12px); flex-wrap: wrap; margin-top: var(--sp-3, 12px);
}
.team-rec-confirm[b-uuokyktqkf] { display: flex; align-items: center; gap: var(--sp-2, 8px); font-size: 13px; }
.team-rec-buttons[b-uuokyktqkf] { display: flex; gap: var(--sp-2, 8px); }
.team-rec-status[b-uuokyktqkf] { font-size: 12.5px; color: var(--text-muted, #9095a3); margin: var(--sp-2, 8px) 0 0; }
.team-rec-status.is-ok[b-uuokyktqkf] { color: var(--success-text, #15803d); }
.team-rec-row[b-uuokyktqkf] { display: flex; gap: var(--sp-2, 8px); align-items: center; flex-wrap: wrap; margin-top: var(--sp-2, 8px); }
.team-rec-note[b-uuokyktqkf] { font-size: 12px; color: var(--text-muted, #9095a3); line-height: 1.5; margin: var(--sp-2, 8px) 0 0; }
.team-rec-recover[b-uuokyktqkf] { display: flex; flex-direction: column; gap: var(--sp-2, 8px); margin-top: var(--sp-2, 8px); }
.team-rec-input[b-uuokyktqkf] { width: 100%; resize: vertical; }

@media (max-width: 640px) {
    .team-rec-grid[b-uuokyktqkf] { grid-template-columns: repeat(2, 1fr); }
}
/* /Components/Toggle.razor.rz.scp.css */
.tgl[b-7va8geticg] { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.tgl.is-disabled[b-7va8geticg] { opacity: .55; cursor: default; }
.tgl input[b-7va8geticg] { position: absolute; opacity: 0; width: 0; height: 0; }

.tgl-track[b-7va8geticg] {
    position: relative;
    width: 38px; height: 22px; flex: 0 0 auto;
    border-radius: 999px;
    background: var(--border-strong);
    transition: background var(--transition);
}
.tgl-thumb[b-7va8geticg] {
    position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: var(--shadow-sm);
    transition: transform var(--transition);
}
.tgl input:checked + .tgl-track[b-7va8geticg] { background: var(--accent); }
.tgl input:checked + .tgl-track .tgl-thumb[b-7va8geticg] { transform: translateX(16px); }
.tgl input:focus-visible + .tgl-track[b-7va8geticg] { box-shadow: 0 0 0 3px rgba(79,70,229,.25); }

.tgl-label[b-7va8geticg] { font-size: var(--type-h3); color: var(--text-secondary); }
/* /Components/UpgradePrompt.razor.rz.scp.css */
.upgrade-card[b-hohizvao5n] {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition);
    animation: upgrade-in-b-hohizvao5n .35s ease both;
}

.upgrade-card:hover[b-hohizvao5n] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

@keyframes upgrade-in-b-hohizvao5n {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .upgrade-card[b-hohizvao5n] { animation: none; }
}

.upgrade-card[b-hohizvao5n]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--grad);
    opacity: 0.06;
    pointer-events: none;
}

.upgrade-icon[b-hohizvao5n] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: var(--radius-md);
    color: #fff;
    background: var(--accent);
    box-shadow: var(--glow);
    position: relative;
    z-index: 1;
}

.upgrade-body[b-hohizvao5n] {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.upgrade-title[b-hohizvao5n] {
    font-weight: 650;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: var(--sp-1);
}

.upgrade-blurb[b-hohizvao5n] {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.upgrade-btn[b-hohizvao5n] {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

@media (max-width: 520px) {
    .upgrade-card[b-hohizvao5n] {
        flex-wrap: wrap;
    }

    .upgrade-btn[b-hohizvao5n] {
        width: 100%;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* When the topbar search is hidden (non-mail views), this keeps the user menu
   pushed to the right just like the flex:1 search box would. */
.search-spacer[b-5uynyxkyfw] { flex: 1; }
/* /Pages/Calendar.razor.rz.scp.css */
/* Calendar page — scoped polish layered on the global .cal-* rules in app.css.
   Tokens only; no new colors. */

.cal-view:focus[b-u2ng53lwz9] { outline: none; }

/* Scrollable body that hosts whichever view is active. Month grid fills it (flex:1); week/day
   views manage their own internal scroll. Lives between .panel-head and the bottom edge. */
.cal-body[b-u2ng53lwz9] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cal-nav[b-u2ng53lwz9] {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
}

/* Load + editor errors via <Alert>: give them comfortable margins matching the surface. */
.cal-load-error[b-u2ng53lwz9] { margin: var(--sp-4) var(--sp-5) 0; }
.cal-edit-error[b-u2ng53lwz9] { margin-top: var(--sp-3); }

/* Subtle "N events" tally beside the period label — context at a glance, never shouts. */
.cal-count[b-u2ng53lwz9] {
    margin-left: var(--sp-2);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    vertical-align: middle;
}

/* Running event length in the editor (e.g. "1 hr 30 min"). */
.cal-dur[b-u2ng53lwz9] {
    margin: var(--sp-2) 0 0;
    font-size: 12px;
    color: var(--text-muted);
}

.cal-spin[b-u2ng53lwz9] {
    width: 15px;
    height: 15px;
    margin-right: var(--sp-1);
}

/* Day cells: clickable surface with a clear focus ring for keyboard users. */
.cal-cell-day[b-u2ng53lwz9] { cursor: pointer; }
.cal-cell-day:hover[b-u2ng53lwz9] { background: var(--bg-hover); }
.cal-cell-day:focus-visible[b-u2ng53lwz9] {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent);
}

.cal-cell-pad[b-u2ng53lwz9] { background: var(--bg-muted); cursor: default; }

/* Today: accent disc behind the date number (Apple/Outlook feel). */
.cal-cell-day .d[b-u2ng53lwz9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 4px;
    border-radius: 999px;
    line-height: 1;
}
.cal-cell-day .d-today[b-u2ng53lwz9] {
    background: var(--accent);
    color: #fff;
}

/* Event chip: align the recurring glyph with the title and keep it on one line. */
.cal-event[b-u2ng53lwz9] {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.cal-event:hover[b-u2ng53lwz9] { filter: brightness(0.97); }
.cal-event:focus-visible[b-u2ng53lwz9] {
    outline: none;
    box-shadow: 0 0 0 2px var(--bg-content), 0 0 0 3px var(--accent);
}
.cal-event-text[b-u2ng53lwz9] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-rec[b-u2ng53lwz9] { flex: 0 0 auto; font-size: 10px; opacity: 0.85; }

/* Single timed month chips read as plain text with a leading colored dot keyed to the
   source calendar's color. */
.cal-event-dot[b-u2ng53lwz9] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--cal-color, var(--accent));
}

/* All-day events read as filled chips so they stand apart from timed ones; the fill is the
   source calendar's color (falls back to the accent via --cal-color). */
.cal-event.is-allday[b-u2ng53lwz9] {
    background: var(--cal-color, var(--accent));
    color: #fff;
}

/* The event currently open in the editor gets a persistent ring so it's clear which
   chip the form is bound to (mirrors the selected row in Contacts). */
.cal-event.is-editing[b-u2ng53lwz9] {
    box-shadow: 0 0 0 2px var(--bg-content), 0 0 0 3px var(--accent);
}

/* Editor: let date/time inputs shrink inside the flex row so they don't overflow on
   narrow screens (datetime-local has a wide intrinsic width). */
.cal-editor .field-row .field[b-u2ng53lwz9] { min-width: 0; }
.cal-editor .field input[b-u2ng53lwz9] { width: 100%; min-width: 0; box-sizing: border-box; }

.cal-hint[b-u2ng53lwz9] {
    margin: 0 var(--sp-5) var(--sp-5);
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

/* Inline key cap used in hints. */
.cal-kbd[b-u2ng53lwz9] {
    display: inline-block;
    min-width: 16px;
    padding: 1px 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    color: var(--text-secondary);
    background: var(--bg-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* ---- Multi-day spanning bars (month + week + day) -------------------------------- */
/* Continuation cells in month view: square off the joined edges so a multi-day event
   reads as one continuous bar rather than separate chips. */
.cal-span[b-u2ng53lwz9] { position: relative; }
.cal-span-start[b-u2ng53lwz9] { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: calc(-1 * var(--sp-3)); }
.cal-span-mid[b-u2ng53lwz9]   { border-radius: 0; margin-left: calc(-1 * var(--sp-3)); margin-right: calc(-1 * var(--sp-3)); }
.cal-span-end[b-u2ng53lwz9]   { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: calc(-1 * var(--sp-3)); }
.cal-span-cont[b-u2ng53lwz9] { min-height: 1em; }

/* ---- Week view ------------------------------------------------------------------- */
.cal-week[b-u2ng53lwz9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: var(--sp-3) var(--sp-5) var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 0;
}
.cal-week-gutter[b-u2ng53lwz9] { width: 56px; flex: 0 0 56px; }
.cal-week-alllabel[b-u2ng53lwz9] {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--sp-2);
}

.cal-week-head[b-u2ng53lwz9] {
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
}
.cal-week-daycol[b-u2ng53lwz9] {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--sp-2) 0;
    border-left: 1px solid var(--border);
    color: var(--text-secondary);
    font: inherit;
}
.cal-week-daycol:hover[b-u2ng53lwz9] { background: var(--bg-hover); }
.cal-week-daycol:focus-visible[b-u2ng53lwz9] { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.cal-week-dow[b-u2ng53lwz9] { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.cal-week-dnum[b-u2ng53lwz9] { font-size: 16px; font-weight: 700; color: var(--text-primary); line-height: 1.2;
    display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 999px; }
.cal-week-dnum.d-today[b-u2ng53lwz9] { background: var(--accent); color: #fff; }

/* All-day / spanning strip above the timed grid. */
.cal-week-allday[b-u2ng53lwz9] {
    display: grid;
    grid-template-columns: 56px 1fr;
    border-bottom: 1px solid var(--border);
    background: var(--bg-content);
    max-height: 96px;
    overflow-y: auto;
}
.cal-week-allgrid[b-u2ng53lwz9] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    padding: 3px 0;
}
.cal-week-span[b-u2ng53lwz9] {
    margin: 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
/* In the gapped week/day strip, spanning bars are single continuous elements — undo the
   month-grid negative margins and instead use a clipped edge (flat corner + chevron-ish
   inset) to signal "continues before/after this week". */
.cal-week-span.cal-span-start[b-u2ng53lwz9],
.cal-week-span.cal-span-mid[b-u2ng53lwz9],
.cal-week-span.cal-span-end[b-u2ng53lwz9] { margin-left: 2px; margin-right: 2px; }
.cal-week-span.cal-span-start[b-u2ng53lwz9] { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.cal-week-span.cal-span-end[b-u2ng53lwz9] { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.cal-week-span.cal-span-mid[b-u2ng53lwz9] { border-radius: 0; }
.cal-week-span.cal-span-start[b-u2ng53lwz9]::after,
.cal-week-span.cal-span-mid[b-u2ng53lwz9]::after { content: "›"; margin-left: auto; padding-left: 4px; opacity: 0.8; }
.cal-week-span.cal-span-mid[b-u2ng53lwz9]::before,
.cal-week-span.cal-span-end[b-u2ng53lwz9]::before { content: "‹"; padding-right: 4px; opacity: 0.8; }

/* Timed grid: scrollable hour rows × day columns. */
.cal-week-body[b-u2ng53lwz9] {
    flex: 1;
    display: grid;
    grid-template-columns: 56px repeat(7, 1fr);
    overflow-y: auto;
    min-height: 0;
    position: relative;
}
.cal-week-hours[b-u2ng53lwz9] { display: flex; flex-direction: column; border-right: 1px solid var(--border); }
.cal-hour-label[b-u2ng53lwz9] {
    height: 48px;
    flex: 0 0 48px;
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
    padding-right: var(--sp-2);
    transform: translateY(-6px);
}
.cal-week-col[b-u2ng53lwz9] { position: relative; border-left: 1px solid var(--border); }
.cal-week-col.is-today[b-u2ng53lwz9] { background: var(--bg-selected); }
.cal-hour-cell[b-u2ng53lwz9] { height: 48px; border-bottom: 1px solid var(--border); }
.cal-hour-cell:hover[b-u2ng53lwz9] { background: var(--bg-hover); }

/* Timed event blocks positioned absolutely within a day column. */
.cal-timed[b-u2ng53lwz9] {
    position: absolute;
    left: 2px;
    right: 2px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 6px;
    overflow: hidden;
    font-size: 11px;
    z-index: 1;
    /* Tinted fill + solid left bar keyed to the source calendar's color so overlapping
       calendars read distinctly. color-mix keeps the tint readable in both themes. */
    background: color-mix(in srgb, var(--cal-color, var(--accent)) 16%, var(--bg-content));
    border-left: 3px solid var(--cal-color, var(--accent));
    border-radius: var(--radius-sm);
}
.cal-timed-time[b-u2ng53lwz9] { font-size: 10px; opacity: 0.85; font-weight: 600; }
.cal-timed .cal-event-text[b-u2ng53lwz9] { white-space: normal; }

/* ---- Day view -------------------------------------------------------------------- */
.cal-day[b-u2ng53lwz9] {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: var(--sp-3) var(--sp-5) var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 0;
}
.cal-day-allday[b-u2ng53lwz9] {
    display: grid;
    grid-template-columns: 56px 1fr;
    border-bottom: 1px solid var(--border);
    background: var(--bg-content);
    max-height: 120px;
    overflow-y: auto;
}
.cal-day-allgrid[b-u2ng53lwz9] { display: flex; flex-direction: column; gap: 3px; padding: 3px var(--sp-2); }
.cal-day-allgrid .cal-event[b-u2ng53lwz9] { margin: 0; }
.cal-day-body[b-u2ng53lwz9] { grid-template-columns: 56px 1fr; }
.cal-day-timed[b-u2ng53lwz9] { left: 4px; right: 4px; }

/* ---- Calendars cog popover (multi-calendar show/hide) ---------------------------- */
.cal-cal-wrap[b-u2ng53lwz9] { position: relative; display: inline-flex; }
.cal-cal-backdrop[b-u2ng53lwz9] { position: fixed; inset: 0; z-index: 19; }
.cal-cal-menu[b-u2ng53lwz9] {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
    min-width: 220px; max-height: 60vh; overflow-y: auto;
    background: var(--bg-content); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-md);
    padding: var(--sp-2); display: flex; flex-direction: column; gap: 2px;
}
.cal-cal-menu-head[b-u2ng53lwz9] {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); padding: 4px 8px 6px;
}
.cal-legend-item[b-u2ng53lwz9] {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: var(--sp-2); font-size: 13px; text-align: left;
    color: var(--text-secondary); background: transparent; border: none;
    border-radius: var(--radius-sm); cursor: pointer;
    transition: background var(--transition), color var(--transition), opacity var(--transition);
}
.cal-legend-item:hover[b-u2ng53lwz9] { background: var(--bg-hover); color: var(--text-primary); }
.cal-legend-item:focus-visible[b-u2ng53lwz9] { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.cal-legend-item.is-hidden[b-u2ng53lwz9] { opacity: 0.5; text-decoration: line-through; }
.cal-legend-swatch[b-u2ng53lwz9] { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; }
.cal-legend-name[b-u2ng53lwz9] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Responsive ------------------------------------------------------------------ */
@media (max-width: 760px) {
    .cal-week[b-u2ng53lwz9], .cal-day[b-u2ng53lwz9] { margin: var(--sp-2) var(--sp-3) var(--sp-3); }
}

/* Phone: stack header controls so the month + actions don't get cramped.
   (Global app.css already shrinks the grid/cells at <=560px.) */
@media (max-width: 560px) {
    .cal-head[b-u2ng53lwz9] {
        height: auto;
        flex-wrap: wrap;
        gap: var(--sp-2);
        padding: var(--sp-3) var(--sp-4);
    }
    .cal-nav[b-u2ng53lwz9] { flex-wrap: wrap; }
    .cal-cell-day .d[b-u2ng53lwz9] { min-width: 18px; height: 18px; }
    /* Stack Starts/Ends so the date+time pickers each get full width. */
    .cal-editor .field-row[b-u2ng53lwz9] { flex-wrap: wrap; }
    .cal-editor .field-row .field[b-u2ng53lwz9] { flex: 1 1 100%; }

    /* Narrow gutter + tighter columns so a 7-day week still fits. */
    .cal-week-gutter[b-u2ng53lwz9], .cal-week-alllabel[b-u2ng53lwz9] { width: 38px; flex-basis: 38px; }
    .cal-week-head[b-u2ng53lwz9] { grid-template-columns: 38px repeat(7, 1fr); }
    .cal-week-allday[b-u2ng53lwz9] { grid-template-columns: 38px 1fr; }
    .cal-week-body[b-u2ng53lwz9] { grid-template-columns: 38px repeat(7, 1fr); }
    .cal-week-dnum[b-u2ng53lwz9] { font-size: 13px; min-width: 20px; height: 20px; }
    .cal-week-dow[b-u2ng53lwz9] { font-size: 9px; }
    .cal-day-allday[b-u2ng53lwz9], .cal-day-body[b-u2ng53lwz9] { grid-template-columns: 38px 1fr; }
    .cal-hour-label[b-u2ng53lwz9] { font-size: 9px; }
}
/* /Pages/Chat.razor.rz.scp.css */
/* Chicon IM — two-pane chat. Tokens only; mirrors the Contacts/Mail visual system.
   LEFT: conversation list (.panel). RIGHT: thread + composer (fills remaining width). */

/* ---- conversation list (left pane) ------------------------------------------------ */
.chat-list .panel-head[b-vzdkq2jxb6] { gap: var(--sp-2); }
/* Push the title left so the settings gear + New/Create button group at the right. */
.chat-list .panel-head h2[b-vzdkq2jxb6] { margin-right: auto; }
.chat-settings-btn[b-vzdkq2jxb6] { flex: none; }

.chat-new-btn[b-vzdkq2jxb6] { padding: 0 var(--sp-3); }

/* G13 — list search box, under the Direct/Channels tabs. */
.chat-search[b-vzdkq2jxb6] {
    flex: none;
    max-width: none;
    margin: var(--sp-2) var(--sp-5);
}

/* G13 — in-thread find bar, under the open thread's header. */
.chat-find[b-vzdkq2jxb6] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-5);
    border-bottom: 1px solid var(--border);
    background: var(--bg-muted);
}
.chat-find svg:first-child[b-vzdkq2jxb6] { flex: none; width: 15px; height: 15px; color: var(--text-muted); }
.chat-find input[b-vzdkq2jxb6] {
    flex: 1;
    min-width: 0;
    height: var(--input-h);
    padding: 0 var(--sp-3);
    font: inherit;
    font-size: var(--type-body);
    color: var(--text-primary);
    background: var(--bg-content);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.chat-find input:focus[b-vzdkq2jxb6] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}
.chat-find .search-clear[b-vzdkq2jxb6] { position: static; transform: none; flex: none; }
.chat-find-empty[b-vzdkq2jxb6] {
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--type-sm);
    color: var(--text-muted);
    text-align: center;
}

/* New-message bar: address field + start/cancel, sits under the header. */
.chat-newbar[b-vzdkq2jxb6] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--border);
}
.chat-new-field[b-vzdkq2jxb6] { flex: 1; min-width: 0; }
.chat-new-field input[b-vzdkq2jxb6] {
    width: 100%;
    height: var(--input-h);
    padding: 0 var(--sp-3);
    font: inherit;
    font-size: var(--type-body);
    color: var(--text-primary);
    background: var(--bg-muted);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.chat-new-field input[b-vzdkq2jxb6]::placeholder { color: var(--text-muted); }
.chat-new-field input:hover[b-vzdkq2jxb6] { border-color: var(--text-muted); }
.chat-new-field input:focus[b-vzdkq2jxb6] {
    border-color: var(--accent);
    background: var(--bg-content);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}
.chat-new-go[b-vzdkq2jxb6] { flex: none; }
.chat-new-cancel[b-vzdkq2jxb6] { flex: none; }
.chat-new-alert[b-vzdkq2jxb6] { margin: var(--sp-3) var(--sp-5) 0; }

/* Recipient autocomplete — a floating dropdown anchored to the new-message field. Mirrors
   ComposeView's .ac-* look (component-scoped CSS, so the classes are redeclared here). The
   field is position:relative so the list overlays the rows below rather than reflowing. */
.ac-field[b-vzdkq2jxb6] { position: relative; }

.ac-list[b-vzdkq2jxb6] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-menu);
    margin: var(--sp-1) 0 0;
    padding: var(--sp-1);
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bg-content);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.ac-item[b-vzdkq2jxb6] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.ac-item:hover[b-vzdkq2jxb6],
.ac-item.active[b-vzdkq2jxb6] { background: var(--bg-hover); }

.ac-name[b-vzdkq2jxb6] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--type-body);
    font-weight: 600;
    color: var(--text-primary);
}
.ac-email[b-vzdkq2jxb6] {
    font-size: var(--type-sm);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* On-Chicon badge + "Recent" tag — small, quiet pills next to the display name. */
.ac-badge[b-vzdkq2jxb6] {
    flex: none;
    padding: 1px var(--sp-2);
    font-size: var(--type-xs);
    font-weight: 600;
    line-height: 1.5;
    color: var(--accent-text);
    background: var(--bg-selected);
    border-radius: var(--radius-pill, 999px);
}
.ac-tag[b-vzdkq2jxb6] {
    flex: none;
    padding: 1px var(--sp-2);
    font-size: var(--type-xs);
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-muted);
    background: var(--bg-muted);
    border-radius: var(--radius-pill, 999px);
}

/* Conversation rows — fixed-height grid, same discipline as .msg / .contact. */
.chat-convo[b-vzdkq2jxb6] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    column-gap: var(--sp-3);
    row-gap: 2px;
    align-content: center;
    height: 64px;
    box-sizing: border-box;
    padding: 0 var(--sp-5);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    overflow: hidden;
    transition: background var(--transition);
}
.chat-convo:hover[b-vzdkq2jxb6] { background: var(--bg-hover); }
.chat-convo:focus-visible[b-vzdkq2jxb6] {
    outline: none;
    background: var(--bg-hover);
}
.chat-convo:focus-visible[b-vzdkq2jxb6]::before {
    content: "";
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--accent);
}
.chat-convo.is-selected[b-vzdkq2jxb6] { background: var(--bg-selected); }
.chat-convo.is-selected[b-vzdkq2jxb6]::before {
    content: "";
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--accent);
}
.chat-convo.is-selected .chat-convo-name[b-vzdkq2jxb6] { color: var(--accent-text); }

.chat-convo .avatar[b-vzdkq2jxb6] {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 38px;
    height: 38px;
    font-size: 14px;
    align-self: center;
}
.chat-convo-name[b-vzdkq2jxb6] {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    font-size: var(--type-h3);
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-convo-time[b-vzdkq2jxb6] {
    grid-column: 3;
    grid-row: 1;
    font-size: var(--type-xs);
    color: var(--text-muted);
    white-space: nowrap;
}
.chat-convo-addr[b-vzdkq2jxb6] {
    grid-column: 2 / span 2;
    grid-row: 2;
    font-size: var(--type-sm);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pinned "★ Favorites" group label, above the conversation list. */
.chat-group-label[b-vzdkq2jxb6] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5) var(--sp-1);
    font-size: var(--type-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.chat-group-star[b-vzdkq2jxb6] {
    width: 13px;
    height: 13px;
    color: var(--accent);
}

/* Favorite (pin) star, top-right of each row. Hidden until the row is hovered/focused, but
   always shown once favorited. Overlays the time slot, which fades out on hover so the two
   don't collide. */
.chat-fav-btn[b-vzdkq2jxb6] {
    position: absolute;
    top: 8px;
    right: var(--sp-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition), color var(--transition), background var(--transition);
}
.chat-fav-btn svg[b-vzdkq2jxb6] { width: 16px; height: 16px; }
.chat-fav-btn:hover[b-vzdkq2jxb6] { background: var(--bg-hover); color: var(--accent); }
.chat-fav-btn:disabled[b-vzdkq2jxb6] { cursor: default; opacity: 0.5; }
.chat-fav-btn.is-on[b-vzdkq2jxb6] { color: var(--accent); }

/* Reveal the star on row hover/focus, and whenever the row is favorited; fade the time so the
   star (top-right) has room. */
.chat-convo:hover .chat-fav-btn[b-vzdkq2jxb6],
.chat-convo:focus-within .chat-fav-btn[b-vzdkq2jxb6],
.chat-convo.is-favorited .chat-fav-btn[b-vzdkq2jxb6] { opacity: 1; }
.chat-convo:hover .chat-convo-time[b-vzdkq2jxb6],
.chat-convo:focus-within .chat-convo-time[b-vzdkq2jxb6],
.chat-convo.is-favorited .chat-convo-time[b-vzdkq2jxb6] { opacity: 0; }

/* G14 — muted-DM indicator in a conversation row (bottom-right; addr text ellipsizes clear). */
.chat-dm-muted[b-vzdkq2jxb6] {
    grid-column: 3;
    grid-row: 2;
    width: 13px;
    height: 13px;
    color: var(--text-muted);
    justify-self: end;
    align-self: center;
}

/* ---- thread (right pane) ---------------------------------------------------------- */
/* Thread header: title left, find/mute actions right. */
.chat-thread-head[b-vzdkq2jxb6] { gap: var(--sp-2); }
.chat-thread-head h2[b-vzdkq2jxb6] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-thread-actions[b-vzdkq2jxb6] { display: flex; align-items: center; gap: var(--sp-1); flex: none; }
.chat-thread-actions .icon-btn.is-active[b-vzdkq2jxb6],
.chan-head-actions .icon-btn.is-active[b-vzdkq2jxb6] { color: var(--accent); background: var(--bg-selected); }

.chat-thread[b-vzdkq2jxb6] {
    flex: 1;
    width: auto;
    border-right: none;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.chat-scroll[b-vzdkq2jxb6] {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    background: var(--bg-content);
}

.chat-loading[b-vzdkq2jxb6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-8);
    color: var(--text-muted);
    font-size: var(--type-h3);
}
/* Empty thread uses the shared <EmptyState>; just center it in the scroll area. */
.chat-empty-thread[b-vzdkq2jxb6] {
    margin: auto;
    width: 100%;
}

/* Message bubbles — mine right-aligned/accent, peer left-aligned/muted. */
.chat-bubble-row[b-vzdkq2jxb6] { display: flex; }
.chat-bubble-row.mine[b-vzdkq2jxb6] { justify-content: flex-end; }
.chat-bubble-row.theirs[b-vzdkq2jxb6] { justify-content: flex-start; }

.chat-bubble[b-vzdkq2jxb6] {
    position: relative;
    max-width: 70%;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* G15 — per-message info affordance: a small circle-i just outside the bubble, on hover. */
.bubble-info-btn[b-vzdkq2jxb6] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    border-radius: var(--radius-sm);
    transition: opacity var(--transition), color var(--transition), background var(--transition);
}
.bubble-info-btn svg[b-vzdkq2jxb6] { width: 15px; height: 15px; }
.bubble-info-btn:hover[b-vzdkq2jxb6] { color: var(--accent); background: var(--bg-hover); }
.chat-bubble-row.theirs .bubble-info-btn[b-vzdkq2jxb6] { right: -30px; }
.chat-bubble-row.mine .bubble-info-btn[b-vzdkq2jxb6] { left: -30px; }
.chat-bubble-row:hover .bubble-info-btn[b-vzdkq2jxb6],
.chat-bubble-row:focus-within .bubble-info-btn[b-vzdkq2jxb6] { opacity: 1; }
.chat-bubble-row.theirs .chat-bubble[b-vzdkq2jxb6] {
    background: var(--bg-muted);
    color: var(--text-primary);
    border-bottom-left-radius: var(--radius-sm);
}
.chat-bubble-row.mine .chat-bubble[b-vzdkq2jxb6] {
    background: var(--accent);
    color: #fff;
    border-bottom-right-radius: var(--radius-sm);
}
.chat-bubble-text[b-vzdkq2jxb6] {
    font-size: var(--type-body);
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}
.chat-bubble-time[b-vzdkq2jxb6] {
    margin-top: 2px;
    font-size: var(--type-xs);
    opacity: .7;
    text-align: right;
}

/* Thread-level error + key-changed banner reuse the shared <Alert>; just place them. */
.chat-thread-alert[b-vzdkq2jxb6] { margin: 0 var(--sp-5) var(--sp-3); }
.chat-key-warning[b-vzdkq2jxb6] { margin: var(--sp-3) var(--sp-5) 0; }

/* Shown instead of the composer when the user has no published Chicon address. */
.chat-no-address[b-vzdkq2jxb6] {
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--type-sm);
    line-height: 1.4;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

/* Composer — textarea + send button anchored at the bottom. */
.chat-composer[b-vzdkq2jxb6] {
    display: flex;
    align-items: flex-end;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border);
}
.chat-composer-input[b-vzdkq2jxb6] {
    flex: 1;
    min-width: 0;
    max-height: 140px;
    min-height: var(--input-h);
    padding: var(--sp-2) var(--sp-3);
    font: inherit;
    font-size: var(--type-body);
    line-height: 1.4;
    color: var(--text-primary);
    background: var(--bg-muted);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-sizing: border-box;
    resize: none;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.chat-composer-input[b-vzdkq2jxb6]::placeholder { color: var(--text-muted); }
.chat-composer-input:hover[b-vzdkq2jxb6] { border-color: var(--text-muted); }
.chat-composer-input:focus[b-vzdkq2jxb6] {
    border-color: var(--accent);
    background: var(--bg-content);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}
.chat-send[b-vzdkq2jxb6] {
    flex: none;
    width: var(--btn-h);
    height: var(--btn-h);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.chat-send svg[b-vzdkq2jxb6] { width: 18px; height: 18px; }

/* Nothing-selected placeholder fills the remaining space. */
.chat-placeholder[b-vzdkq2jxb6] {
    flex: 1;
    display: flex;
    min-width: 0;
    background: var(--bg-content);
}

/* Phone/tablet: thread stacks full-width under the list. */
@media (max-width: 880px) {
    .chat-thread[b-vzdkq2jxb6] { width: 100%; }
    .chat-placeholder[b-vzdkq2jxb6] { display: none; }
}

/* ===================================================================================
   Channels — list tabs, channel rows, discover, roster, create/add forms.
   Reuses the .chat-convo grid + .chat-bubble thread; tokens only.
   =================================================================================== */

/* Direct / Channels switcher under the list header. */
.chat-tabs[b-vzdkq2jxb6] {
    display: flex;
    gap: var(--sp-1);
    padding: 0 var(--sp-5) var(--sp-2);
    border-bottom: 1px solid var(--border);
}
.chat-tab[b-vzdkq2jxb6] {
    flex: 1;
    padding: var(--sp-2) var(--sp-2);
    font: inherit;
    font-size: var(--type-sm);
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.chat-tab:hover[b-vzdkq2jxb6] { color: var(--text-primary); background: var(--bg-hover); }
.chat-tab.is-active[b-vzdkq2jxb6] { color: var(--accent-text); border-bottom-color: var(--accent); }

/* Channel row: a #/lock glyph sits in the avatar column (grid col 1). */
.chan-row .chan-glyph[b-vzdkq2jxb6] {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    align-self: center;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-muted);
    border-radius: var(--radius-md);
}
.chan-row.is-selected .chan-glyph[b-vzdkq2jxb6] { color: var(--accent-text); }
.chan-glyph svg[b-vzdkq2jxb6] { width: 18px; height: 18px; }

.chan-muted-ind[b-vzdkq2jxb6] {
    grid-column: 3;
    grid-row: 1;
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    justify-self: end;
}

/* Discover (public channels) toggle + rows. */
.chan-discover-bar[b-vzdkq2jxb6] { padding: var(--sp-3) var(--sp-5); }
.chan-discover-btn[b-vzdkq2jxb6] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--type-sm);
    font-weight: 600;
}
.chan-discover-btn svg[b-vzdkq2jxb6] { width: 15px; height: 15px; }
.chan-discover-empty[b-vzdkq2jxb6] {
    padding: 0 var(--sp-5) var(--sp-3);
    font-size: var(--type-sm);
    color: var(--text-muted);
}
/* Discover fetch in flight — spinner sits inline with the "Finding…" label. */
.chan-discover-loading[b-vzdkq2jxb6] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.chan-discover-row[b-vzdkq2jxb6] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border);
}
.chan-discover-row .chan-glyph[b-vzdkq2jxb6] {
    width: 34px;
    height: 34px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-muted);
    border-radius: var(--radius-md);
}
.chan-discover-meta[b-vzdkq2jxb6] { flex: 1; min-width: 0; }
.chan-topic[b-vzdkq2jxb6], .chan-sub[b-vzdkq2jxb6] {
    font-size: var(--type-sm);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chan-sub[b-vzdkq2jxb6] { font-size: var(--type-xs); }
.chan-join-btn[b-vzdkq2jxb6] { flex: none; min-width: 64px; }

/* ---- channel thread header ---- */
.chan-head[b-vzdkq2jxb6] { gap: var(--sp-3); }
.chan-head-title[b-vzdkq2jxb6] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
}
.chan-vis[b-vzdkq2jxb6] { display: inline-flex; color: var(--text-muted); }
.chan-vis svg[b-vzdkq2jxb6] { width: 16px; height: 16px; }
.chan-head-title h2[b-vzdkq2jxb6] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan-head-topic[b-vzdkq2jxb6] {
    font-size: var(--type-sm);
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: var(--sp-2);
    border-left: 1px solid var(--border);
}
.chan-head-actions[b-vzdkq2jxb6] { display: flex; align-items: center; gap: var(--sp-1); flex: none; }
.chan-head-actions .icon-btn[b-vzdkq2jxb6] { position: relative; }
.chan-count-badge[b-vzdkq2jxb6] {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 15px;
    height: 15px;
    padding: 0 3px;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    color: var(--accent-text);
    background: var(--bg-selected);
    border-radius: 8px;
}
.chan-leave:hover[b-vzdkq2jxb6] { color: #dc2626; }

/* ---- roster drawer ---- */
.chan-roster[b-vzdkq2jxb6] {
    max-height: 220px;
    overflow-y: auto;
    padding: var(--sp-2) var(--sp-5);
    border-bottom: 1px solid var(--border);
    background: var(--bg-muted);
}
.chan-roster-row[b-vzdkq2jxb6] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
}
.avatar-sm[b-vzdkq2jxb6] { width: 26px; height: 26px; font-size: 11px; }
.chan-roster-name[b-vzdkq2jxb6] {
    flex: 1;
    min-width: 0;
    font-size: var(--type-sm);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chan-role-badge[b-vzdkq2jxb6] {
    flex: none;
    font-size: var(--type-xs);
    font-weight: 600;
    color: var(--text-muted);
    padding: 1px var(--sp-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.chan-kick[b-vzdkq2jxb6] { flex: none; }
.chan-kick:hover[b-vzdkq2jxb6] { color: #dc2626; }

/* Team-owned channel chip in the channels list (org-wrapped, membership = tenant seats). */
.chan-team-badge[b-vzdkq2jxb6] {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(79, 70, 229, .12);
    color: var(--accent-text, #4f46e5);
}

/* Sender name above other people's channel bubbles. */
.chan-bubble-sender[b-vzdkq2jxb6] {
    font-size: var(--type-xs);
    font-weight: 600;
    color: var(--accent-text);
    margin-bottom: 2px;
}
.chan-locked[b-vzdkq2jxb6] { font-style: italic; color: var(--text-muted); }

/* ---- create / add-member forms (in SidePanel) ---- */
.chan-form[b-vzdkq2jxb6] { display: flex; flex-direction: column; gap: var(--sp-2); }
.chan-form-label[b-vzdkq2jxb6] {
    font-size: var(--type-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-top: var(--sp-2);
}
.chan-form-opt[b-vzdkq2jxb6] { font-weight: 400; color: var(--text-muted); }
.chan-form-input[b-vzdkq2jxb6] {
    width: 100%;
    height: var(--input-h);
    padding: 0 var(--sp-3);
    font: inherit;
    font-size: var(--type-body);
    color: var(--text-primary);
    background: var(--bg-muted);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.chan-form-input:focus[b-vzdkq2jxb6] {
    border-color: var(--accent);
    background: var(--bg-content);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .14);
}
.chan-add-note[b-vzdkq2jxb6] { font-size: var(--type-sm); color: var(--text-muted); margin: 0 0 var(--sp-2); }

.chan-vis-toggle[b-vzdkq2jxb6] { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.chan-vis-opt[b-vzdkq2jxb6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    padding: var(--sp-3);
    font: inherit;
    color: var(--text-primary);
    background: var(--bg-content);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.chan-vis-opt span[b-vzdkq2jxb6] { font-size: var(--type-xs); color: var(--text-muted); }
.chan-vis-opt:hover[b-vzdkq2jxb6] { border-color: var(--text-muted); }
.chan-vis-opt.is-active[b-vzdkq2jxb6] {
    border-color: var(--accent);
    background: var(--bg-selected);
    box-shadow: 0 0 0 1px var(--accent) inset;
}
.chan-form-alert[b-vzdkq2jxb6] { margin-top: var(--sp-3); }

/* ===================================================================================
   G14 — Messages settings panel (inside SidePanel). Spacious rows: label+hint left,
   control right. Tokens only.
   =================================================================================== */
.msg-settings[b-vzdkq2jxb6] { display: flex; flex-direction: column; gap: var(--sp-2); }
.msg-set-row[b-vzdkq2jxb6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--border);
}
.msg-set-text[b-vzdkq2jxb6] { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msg-set-label[b-vzdkq2jxb6] { font-size: var(--type-body); font-weight: 600; color: var(--text-primary); }
.msg-set-hint[b-vzdkq2jxb6] { font-size: var(--type-sm); line-height: 1.4; color: var(--text-muted); }
.msg-set-control[b-vzdkq2jxb6] { flex: none; min-width: 130px; }
.msg-set-section[b-vzdkq2jxb6] { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) 0; }

.msg-mute-list[b-vzdkq2jxb6] { list-style: none; margin: var(--sp-1) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.msg-mute-item[b-vzdkq2jxb6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
}
.msg-mute-name[b-vzdkq2jxb6] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--type-sm); color: var(--text-primary); }

.msg-set-saved[b-vzdkq2jxb6] {
    align-self: flex-start;
    margin-top: var(--sp-2);
    padding: 2px var(--sp-3);
    font-size: var(--type-xs);
    font-weight: 600;
    color: var(--accent-text);
    background: var(--bg-selected);
    border-radius: var(--radius-pill, 999px);
}

/* ===================================================================================
   G15 — message info popover. Reuses the global .ctx-menu chrome (fixed + clamped via
   gratinMenu.place); this lays out the key/value detail rows.
   =================================================================================== */
.msg-info-backdrop[b-vzdkq2jxb6] {
    position: fixed;
    inset: 0;
    z-index: 99;            /* just under .ctx-menu (z-index: 100) */
    background: transparent;
}
.msg-info[b-vzdkq2jxb6] { min-width: 240px; max-width: 320px; cursor: default; }
.msg-info-row[b-vzdkq2jxb6] {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: 4px var(--sp-2);
}
.msg-info-key[b-vzdkq2jxb6] {
    flex: none;
    width: 84px;
    font-size: var(--type-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}
.msg-info-val[b-vzdkq2jxb6] { flex: 1; min-width: 0; font-size: var(--type-sm); color: var(--text-primary); word-break: break-word; }
.msg-info-fp[b-vzdkq2jxb6] { font-family: var(--font-mono, monospace); font-size: var(--type-xs); color: var(--text-secondary); }
.msg-info-ok[b-vzdkq2jxb6] { color: var(--success-text, #16a34a); font-weight: 600; }
.msg-info-warn[b-vzdkq2jxb6] { color: var(--danger-text, #dc2626); font-weight: 600; }
.msg-info-muted[b-vzdkq2jxb6] { color: var(--text-muted); }

/* ===================== G16: profiles — identity decoration + outbound picker ===================== */

/* Inline "Business" badge next to a name / handle (conversation list, thread header, info popover). */
.prof-badge-inline[b-vzdkq2jxb6] {
    flex: none;
    padding: 1px var(--sp-2);
    font-size: var(--type-xs);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    color: var(--accent-text);
    background: var(--bg-selected);
    border-radius: var(--radius-pill, 999px);
}

/* Conversation-row avatar that shows a profile picture instead of a monogram. */
.chat-convo .avatar.avatar-pic[b-vzdkq2jxb6] { overflow: hidden; padding: 0; }
.avatar.avatar-pic img[b-vzdkq2jxb6] { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Rich recipient suggestion (new-DM): avatar + (name / handle) laid out as a row. */
.ac-item-rich[b-vzdkq2jxb6] { flex-direction: row; align-items: center; gap: var(--sp-3); }
.ac-item-rich .ac-meta[b-vzdkq2jxb6] { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ac-av[b-vzdkq2jxb6] {
    flex: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    overflow: hidden;
    display: grid; place-items: center;
    background: var(--bg-muted);
}
.ac-av img[b-vzdkq2jxb6] { width: 100%; height: 100%; object-fit: cover; }
.ac-av-mono[b-vzdkq2jxb6] { font-size: 12px; font-weight: 700; color: var(--text-secondary); }

/* "Appear as" outbound-profile picker under the new-message bar. */
.chat-asbar[b-vzdkq2jxb6] {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3) 0;
}
.chat-asbar-label[b-vzdkq2jxb6] { font-size: var(--type-sm); color: var(--text-muted); }
.chat-asbar-select[b-vzdkq2jxb6] { font-size: var(--type-sm); padding: 2px var(--sp-2); }

/* Thread header identity block: avatar + name/handle. */
.chat-thread-id[b-vzdkq2jxb6] { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex: 1; }
.chat-thread-av[b-vzdkq2jxb6] {
    flex: none; width: 32px; height: 32px;
    border-radius: 50%; overflow: hidden;
    display: grid; place-items: center;
    background: var(--bg-muted);
}
.chat-thread-av img[b-vzdkq2jxb6] { width: 100%; height: 100%; object-fit: cover; }
.chat-thread-av-mono[b-vzdkq2jxb6] { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.chat-thread-idmeta[b-vzdkq2jxb6] { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.chat-thread-idmeta h2[b-vzdkq2jxb6] { display: flex; align-items: center; gap: var(--sp-2); }
.chat-thread-handle[b-vzdkq2jxb6] {
    font-size: var(--type-xs);
    color: var(--text-muted);
    font-family: var(--font-mono, ui-monospace, monospace);
}

/* Outbound-profile chip in the thread header (locked = static, else a small inline select). */
.chat-as-chip[b-vzdkq2jxb6] {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px var(--sp-2);
    font-size: var(--type-xs); font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-muted);
    border-radius: var(--radius-pill, 999px);
}
.chat-as-chip svg[b-vzdkq2jxb6] { width: 12px; height: 12px; }
.chat-as-chip.is-locked[b-vzdkq2jxb6] { color: var(--text-muted); }
.chat-as-chip-select[b-vzdkq2jxb6] {
    border: none; background: transparent; font: inherit; color: var(--accent-text);
    font-weight: 700; cursor: pointer; padding: 0 2px;
}
/* /Pages/Contacts.razor.rz.scp.css */
/* Contacts page — a conventional, scalable "People" directory: a search box on top + a responsive
   grid of contact cards, with a roomy detail/edit modal. Tokens only; no new colors. */

.people-view[b-v5kykyr4b2] { min-height: 0; }

/* Header actions: search box + reload spinner + the add button, right-aligned in the header. */
.contact-head-actions[b-v5kykyr4b2] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
/* The search box lives inline in the header — cap its width so it doesn't crowd the add button. */
.contact-head-actions .contact-search[b-v5kykyr4b2] {
    margin: 0;
    width: clamp(180px, 26vw, 320px);
    max-width: none;
}
.contact-spin[b-v5kykyr4b2] {
    width: 15px;
    height: 15px;
}

/* The grid scrolls; give it comfortable gutters so the cards breathe. */
.people-scroll[b-v5kykyr4b2] {
    padding: var(--sp-5);
    min-height: 0;
}

/* ---- Card grid ----
   auto-fill + minmax reflows from one column on phones to many on wide screens; the cards keep a
   sensible min width so contents never crush. */
.people-grid[b-v5kykyr4b2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-3);
}

.person-card[b-v5kykyr4b2] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-content);
    cursor: pointer;
    font-family: inherit;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.person-card:hover[b-v5kykyr4b2] {
    background: var(--bg-hover);
    border-color: var(--border-strong, var(--border));
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.person-card:focus-visible[b-v5kykyr4b2] {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring, var(--accent));
}

/* Reveal the per-card quick actions on hover/focus; keep them present (not display:none) so they
   stay reachable by keyboard. */
.person-card .person-card-actions[b-v5kykyr4b2] { opacity: 0; transition: opacity var(--transition); }
.person-card:hover .person-card-actions[b-v5kykyr4b2],
.person-card:focus-within .person-card-actions[b-v5kykyr4b2] { opacity: 1; }

.person-card .avatar[b-v5kykyr4b2] { width: 42px; height: 42px; font-size: 15px; }
/* Profile-picture avatar (when a contact has a public Chicon profile picture). */
.person-card .avatar.avatar-pic[b-v5kykyr4b2] { overflow: hidden; }
.avatar.avatar-pic img[b-v5kykyr4b2] { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* @username under a contact's name + a "Business" badge from their public Chicon profile. */
.person-card-handle[b-v5kykyr4b2] {
    font-size: 11.5px;
    color: var(--text-muted);
    font-family: var(--font-mono, ui-monospace, monospace);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.person-badge[b-v5kykyr4b2] {
    display: inline-block;
    margin-left: var(--sp-2);
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
    color: var(--accent-text);
    background: var(--bg-selected);
    border-radius: var(--radius-pill, 999px);
}

.person-card-body[b-v5kykyr4b2] { min-width: 0; flex: 1; }
.person-card-name[b-v5kykyr4b2] {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.person-card-sub[b-v5kykyr4b2],
.person-card-org[b-v5kykyr4b2] {
    font-size: 12px;
    color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.person-card-org[b-v5kykyr4b2] { font-size: 11.5px; }

/* "from mail" tag on a correspondent card — a muted, subtle pill so saved contacts read as primary. */
.person-tag[b-v5kykyr4b2] {
    display: inline-block;
    margin-left: var(--sp-2);
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .02em;
    text-transform: uppercase;
    vertical-align: middle;
    color: var(--text-muted);
    background: var(--bg-selected);
    border-radius: var(--radius-sm);
}
/* Footer note in the detail modal for a correspondent ("From your mail"). */
.detail-source-note[b-v5kykyr4b2] {
    font-size: var(--type-sm);
    color: var(--text-muted);
    align-self: center;
}

.person-card-actions[b-v5kykyr4b2] {
    display: flex;
    gap: 2px;
    flex: 0 0 auto;
}
.person-card-act[b-v5kykyr4b2] {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border: none; background: transparent;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}
.person-card-act:hover[b-v5kykyr4b2] { background: var(--bg-selected); color: var(--accent); }
.person-card-act svg[b-v5kykyr4b2] { width: 16px; height: 16px; }

/* Surfaced errors / reconnect banner (Alert): breathing room inside the scroll pane. */
.contact-load-error[b-v5kykyr4b2] { margin-bottom: var(--sp-4); }
.contact-edit-error[b-v5kykyr4b2] { margin-top: var(--sp-3); }

/* Inline quick actions (copy) next to detail fields. */
.contact-quick[b-v5kykyr4b2] {
    margin-left: var(--sp-2);
    font-size: var(--type-xs);
    font-weight: 600;
    color: var(--accent-text);
    text-decoration: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
}
.contact-quick:hover[b-v5kykyr4b2] { text-decoration: underline; }
.contact-copy[b-v5kykyr4b2] { min-width: 42px; text-align: left; }

/* ---- Detail / edit modal ---- */
.contact-modal-backdrop[b-v5kykyr4b2] {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-4);
    background: rgba(8, 10, 20, .55);
    backdrop-filter: blur(2px);
    animation: contact-modal-fade-b-v5kykyr4b2 .15s ease-out;
}
.contact-modal-card[b-v5kykyr4b2] {
    width: 100%;
    max-width: 560px;
    max-height: min(88vh, 720px);
    display: flex;
    flex-direction: column;
    background: var(--bg-content);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    animation: contact-modal-pop-b-v5kykyr4b2 .18s ease-out;
    overflow: hidden;
}
.contact-modal-head[b-v5kykyr4b2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-5) var(--sp-5) var(--sp-3);
}
/* Detail view has no title text — keep the close button pinned to the right. */
.contact-modal-head-bare[b-v5kykyr4b2] { justify-content: flex-end; padding-bottom: 0; }
.contact-modal-head h3[b-v5kykyr4b2] { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.contact-modal-x[b-v5kykyr4b2] { font-size: 22px; line-height: 1; }

.contact-modal-body[b-v5kykyr4b2] {
    padding: var(--sp-3) var(--sp-6) var(--sp-5);
    overflow-y: auto;
}
.contact-modal-foot[b-v5kykyr4b2] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-6);
    border-top: 1px solid var(--border);
}
.contact-modal-delete:hover[b-v5kykyr4b2] { color: var(--danger); border-color: var(--danger); }

/* Detail hero: big avatar + name + org. */
.detail-hero[b-v5kykyr4b2] { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.detail-avatar[b-v5kykyr4b2] { width: 64px; height: 64px; font-size: 24px; }
.detail-id[b-v5kykyr4b2] { min-width: 0; }
.detail-name[b-v5kykyr4b2] { font-size: 20px; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; }
.detail-org[b-v5kykyr4b2] { font-size: var(--type-h3); color: var(--text-muted); margin-top: 2px; }

.detail-fields[b-v5kykyr4b2] { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-5); margin: 0; }
.detail-fields dt[b-v5kykyr4b2] { font-size: var(--type-sm); color: var(--text-muted); align-self: center; }
.detail-fields dd[b-v5kykyr4b2] { margin: 0; font-size: var(--type-h3); color: var(--text-primary); display: flex; align-items: center; }
.detail-fields dd a[b-v5kykyr4b2] { color: var(--accent-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.detail-fields dd a:hover[b-v5kykyr4b2] { text-decoration: underline; }
.detail-empty[b-v5kykyr4b2] { grid-column: 1 / -1; color: var(--text-muted); font-style: italic; }

@keyframes contact-modal-fade-b-v5kykyr4b2 { from { opacity: 0; } to { opacity: 1; } }
@keyframes contact-modal-pop-b-v5kykyr4b2 {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .contact-modal-backdrop[b-v5kykyr4b2],
    .contact-modal-card[b-v5kykyr4b2],
    .person-card[b-v5kykyr4b2] { animation: none; transition: none; }
}

/* Phone: tighten gutters, let the search box span, and stack cards to a single column. */
@media (max-width: 640px) {
    .people-scroll[b-v5kykyr4b2] { padding: var(--sp-3); }
    .people-grid[b-v5kykyr4b2] { grid-template-columns: 1fr; }
    .contact-head-actions .contact-search[b-v5kykyr4b2] { width: 100%; }
    .contact-modal-card[b-v5kykyr4b2] { max-height: 92vh; }
}
/* /Pages/Enterprise.razor.rz.scp.css */
.enterprise[b-ngggafbqxy] {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    color: var(--on-dark);
    padding: var(--sp-8) 0;
}

.enterprise .auth-brand[b-ngggafbqxy] {
    justify-content: center;
    display: inline-flex;
}

.ent-title[b-ngggafbqxy] {
    color: #fff;
    font-size: clamp(28px, 4.5vw, 42px);
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0 0 var(--sp-4);
    font-weight: 700;
}

.ent-title .accent[b-ngggafbqxy] {
    color: var(--accent);
}

.ent-lead[b-ngggafbqxy] {
    color: var(--on-dark-dim);
    font-size: clamp(14px, 1.6vw, 16px);
    line-height: 1.6;
    margin: 0 auto var(--sp-8);
    max-width: 480px;
}

/* ---- Form ---- */
.ent-form[b-ngggafbqxy] {
    text-align: left;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    display: grid;
    gap: var(--sp-4);
}

.ent-field[b-ngggafbqxy] {
    display: grid;
    gap: var(--sp-2);
}

.ent-field label[b-ngggafbqxy] {
    color: var(--on-dark);
    font-size: 13px;
    font-weight: 600;
}

.ent-optional[b-ngggafbqxy] {
    color: var(--on-dark-dim);
    font-weight: 500;
}

.ent-field input[b-ngggafbqxy],
.ent-field textarea[b-ngggafbqxy] {
    width: 100%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: var(--sp-3);
    color: #fff;
    font-size: 14px;
    font-family: inherit;
    transition: border-color var(--transition);
}

.ent-field input:focus[b-ngggafbqxy],
.ent-field textarea:focus[b-ngggafbqxy] {
    outline: none;
    border-color: var(--accent);
}

.ent-field input[b-ngggafbqxy]::placeholder,
.ent-field textarea[b-ngggafbqxy]::placeholder {
    color: var(--on-dark-dim);
}

.ent-field input:disabled[b-ngggafbqxy],
.ent-field textarea:disabled[b-ngggafbqxy] {
    opacity: .6;
    cursor: not-allowed;
}

.ent-field textarea[b-ngggafbqxy] {
    resize: vertical;
    min-height: 88px;
}

.ent-submit[b-ngggafbqxy] {
    width: 100%;
    margin-top: var(--sp-2);
}

.ent-error[b-ngggafbqxy] {
    color: var(--danger, #ff6b6b);
    font-size: 13px;
    margin: 0;
}

.ent-note[b-ngggafbqxy] {
    color: var(--on-dark-dim);
    font-size: 12px;
    text-align: center;
    margin: 0;
}

/* ---- Success ---- */
.ent-success[b-ngggafbqxy] {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-8) var(--sp-6);
    display: grid;
    gap: var(--sp-3);
    justify-items: center;
}

.ent-success h2[b-ngggafbqxy] {
    color: #fff;
    font-size: 22px;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ent-success p[b-ngggafbqxy] {
    color: var(--on-dark-dim);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 var(--sp-3);
    max-width: 380px;
}

.ent-success-check[b-ngggafbqxy] {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 2px solid var(--accent-3);
    position: relative;
    margin-bottom: var(--sp-2);
}

.ent-success-check[b-ngggafbqxy]::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 13px;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--accent-3);
    border-bottom: 2px solid var(--accent-3);
    transform: rotate(-45deg);
}
/* /Pages/Files.razor.rz.scp.css */
/* Files page — a Google-Drive-grade managed-store view, on the Chicon UI kit.
   Tokens only; layered on the global .full-pane / .panel-head / .panel-scroll /
   .btn-* / .alert / .msg-act / .ctx-menu primitives in app.css.
   Direction: flat surfaces, generous whitespace, quiet hairlines, comfortable rows,
   colored file-type glyphs, ONE prominent "+ New" action, and the signature full-pane
   drag-drop upload overlay. Svgs injected via markup-content are matched with ::deep. */

/* Positioning context for the drag-drop overlay. */
.files-view[b-h7fqei6fhy] { position: relative; }
.files-view:focus[b-h7fqei6fhy] { outline: none; }

/* Header: breadcrumb on the left, layout toggle + "+ New" on the right — one clean row. */
.files-head[b-h7fqei6fhy] {
    gap: var(--sp-4);
}

/* ---- breadcrumb ---- */
.files-crumbs[b-h7fqei6fhy] {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    min-width: 0;
    overflow: hidden;
    flex: 1;
}
/* The trailing crumb is the section title and reads like every other .panel-head h2. */
.files-crumb[b-h7fqei6fhy] {
    font-size: var(--type-h2);
    font-weight: 700;
    letter-spacing: -0.01em;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.files-crumb-current[b-h7fqei6fhy] { color: var(--text-primary); margin: 0; }
.files-crumb-link[b-h7fqei6fhy] {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition);
}
.files-crumb-link:hover:not(:disabled)[b-h7fqei6fhy] { color: var(--accent); }
.files-crumb-link:disabled[b-h7fqei6fhy] { cursor: default; }
.files-crumb-sep[b-h7fqei6fhy] {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    user-select: none;
}
.files-crumb-sep svg[b-h7fqei6fhy] { width: 13px; height: 13px; }
.files-spin[b-h7fqei6fhy] { width: 14px; height: 14px; margin-left: var(--sp-2); }

/* ---- header actions ---- */
.files-head-actions[b-h7fqei6fhy] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex: 0 0 auto;
}

/* ---- "+ New" dropdown (the single prominent action) ---- */
.files-new[b-h7fqei6fhy] { position: relative; }
.files-newbtn[b-h7fqei6fhy] {
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
}
.files-new-plus[b-h7fqei6fhy] { width: 16px; height: 16px; }
.files-new-caret[b-h7fqei6fhy] { width: 13px; height: 13px; margin-left: calc(var(--sp-1) * -1); opacity: .85; }
/* Menu floats under the button; reuses .ctx-menu chrome but anchored (not fixed). */
.files-new-menu[b-h7fqei6fhy] {
    position: absolute;
    top: calc(100% + var(--sp-2));
    right: 0;
    min-width: 180px;
    z-index: var(--z-menu);
}
.files-menu-ico[b-h7fqei6fhy] {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    flex: 0 0 auto;
}
.files-menu-ico svg[b-h7fqei6fhy] { width: 16px; height: 16px; }
/* In this menu the glyph sits left of a left-aligned label, so override .ctx-item's spread. */
.files-new-menu .ctx-item[b-h7fqei6fhy] { justify-content: flex-start; gap: var(--sp-3); }

/* The one shared file picker — visually hidden but still clickable via openPicker()/label. */
.files-hidden-input[b-h7fqei6fhy] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- inline new-folder bar ---- */
.files-newfolder[b-h7fqei6fhy] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--border);
    background: var(--bg-muted);
}
.files-newfolder-icon[b-h7fqei6fhy] { display: inline-flex; color: var(--accent); flex: 0 0 auto; }
.files-newfolder-icon svg[b-h7fqei6fhy] { width: 18px; height: 18px; }
/* Field-style input on the shared --input-h + one focus ring (matches .field). */
.files-newfolder-input[b-h7fqei6fhy] {
    flex: 1;
    height: var(--input-h);
    min-width: 0;
    padding: 0 var(--sp-3);
    font: inherit;
    font-size: var(--type-body);
    color: var(--text-primary);
    background: var(--bg-content);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.files-newfolder-input:hover[b-h7fqei6fhy] { border-color: var(--text-muted); }
.files-newfolder-input:focus[b-h7fqei6fhy] {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* ---- error banner (Alert primitive, laid out as a row with a Retry control) ---- */
.files-error[b-h7fqei6fhy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: var(--sp-3) var(--sp-5);
}
.files-retry[b-h7fqei6fhy] {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 var(--sp-3);
    background: transparent;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    color: inherit;
    font: inherit;
    font-size: var(--type-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.files-retry:hover:not(:disabled)[b-h7fqei6fhy] { background: rgba(255, 84, 112, .12); }
.files-retry:disabled[b-h7fqei6fhy] { opacity: .55; cursor: default; }

/* ---- scrollable body (reuses .panel-scroll) ---- */
.files-scroll[b-h7fqei6fhy] { padding: var(--sp-3) 0; }

/* ---- list ---- */
.files-table[b-h7fqei6fhy] { padding: 0 var(--sp-4); }
.files-row[b-h7fqei6fhy] {
    display: grid;
    grid-template-columns: 1fr 110px 150px 132px;
    align-items: center;
    gap: var(--sp-3);
    height: 56px;
    box-sizing: border-box;
    padding: 0 var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: var(--type-body);
    color: var(--text-secondary);
    position: relative;
    transition: background var(--transition);
}
.files-row:not(.files-row-head):hover[b-h7fqei6fhy] { background: var(--bg-hover); }
.files-row.is-folder[b-h7fqei6fhy] { cursor: pointer; }

.files-row-head[b-h7fqei6fhy] {
    height: 38px;
    font-size: var(--type-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    margin-bottom: var(--sp-1);
}
.files-row-head:hover[b-h7fqei6fhy] { background: transparent; }

/* Sortable column headers — quiet buttons that inherit the header type; the active
   column brightens and shows its direction arrow. */
.files-sort[b-h7fqei6fhy] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: color var(--transition);
}
.files-sort:hover[b-h7fqei6fhy] { color: var(--text-secondary); }
.files-sort.is-sorted[b-h7fqei6fhy] { color: var(--text-primary); }
.files-col-name.files-sort[b-h7fqei6fhy] { justify-content: flex-start; }
.files-col-size.files-sort[b-h7fqei6fhy], .files-col-date.files-sort[b-h7fqei6fhy] { justify-content: flex-start; }
.files-sort-arrow[b-h7fqei6fhy] { font-size: 9px; line-height: 1; }

.files-col-name[b-h7fqei6fhy] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-width: 0;
}
/* Icon chip: a quiet tinted square; the family color comes from the .kind-* rules below. */
.files-icon[b-h7fqei6fhy] {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
}
.files-icon[b-h7fqei6fhy]  svg { width: 20px; height: 20px; }

.files-name[b-h7fqei6fhy] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-weight: 500;
}
.files-name-link[b-h7fqei6fhy] {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: var(--type-body);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: color var(--transition);
}
.files-name-link:hover:not(:disabled)[b-h7fqei6fhy] { color: var(--accent); }
.files-name-link:disabled[b-h7fqei6fhy] { cursor: default; }

/* Inline rename: field-style on a compact height to fit the row, one focus ring. */
.files-rename-input[b-h7fqei6fhy] {
    flex: 1;
    height: 32px;
    min-width: 0;
    padding: 0 var(--sp-2);
    font: inherit;
    font-size: var(--type-body);
    color: var(--text-primary);
    background: var(--bg-content);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    box-shadow: var(--focus-ring);
}
.files-rename-input:focus[b-h7fqei6fhy] { outline: none; }

.files-col-size[b-h7fqei6fhy], .files-col-date[b-h7fqei6fhy] { color: var(--text-muted); font-size: var(--type-sm); font-variant-numeric: tabular-nums; }

/* Trailing action cluster — hidden until hover/focus for a calmer grid (mirrors
   Mail's .msg-actions reveal); always shown for the row being edited. */
.files-col-actions[b-h7fqei6fhy] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
    opacity: 0;
    transition: opacity var(--transition);
}
.files-row:hover .files-col-actions[b-h7fqei6fhy],
.files-row:focus-within .files-col-actions[b-h7fqei6fhy] { opacity: 1; }
/* Keep the inline rename Save/Cancel (kit buttons) visible while editing. */
.files-col-actions .btn-primary[b-h7fqei6fhy],
.files-col-actions .btn-secondary[b-h7fqei6fhy] { height: 32px; padding: 0 var(--sp-3); }
.files-col-actions .msg-act:disabled[b-h7fqei6fhy] { opacity: .55; cursor: default; }

/* ---- drag & drop (internal move): highlight a folder/crumb that's a valid drop target ---- */
.files-row.drop-hot[b-h7fqei6fhy],
.files-tile.drop-hot[b-h7fqei6fhy] {
    background: var(--bg-selected);
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* ---- grid / tile layout — flat cards, soft hairline, subtle hover lift ---- */
.files-grid[b-h7fqei6fhy] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: var(--sp-4);
    padding: var(--sp-2) var(--sp-5) var(--sp-5);
}
.files-tile[b-h7fqei6fhy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-3);
    padding: var(--sp-5) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-content);
    cursor: default;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.files-tile:hover[b-h7fqei6fhy] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.files-tile.is-folder[b-h7fqei6fhy] { cursor: pointer; }
.files-tile-icon[b-h7fqei6fhy] {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--text-muted);
}
.files-tile-icon[b-h7fqei6fhy]  svg { width: 30px; height: 30px; }
.files-tile-name[b-h7fqei6fhy] {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--type-body);
    font-weight: 500;
    color: var(--text-primary);
}
.files-tile-meta[b-h7fqei6fhy] { font-size: var(--type-xs); color: var(--text-muted); }
.files-tile-rename[b-h7fqei6fhy] { width: 100%; }

/* ---- file-type families: colored glyph + matching soft tinted chip (Drive-style) ---- */
.kind-folder[b-h7fqei6fhy]  { color: #4f46e5; background: rgba( 79, 70,229,.10); }
.kind-doc[b-h7fqei6fhy]     { color: #2f6bff; background: rgba( 47,107,255,.10); }
.kind-sheet[b-h7fqei6fhy]   { color: #16a34a; background: rgba( 22,163, 74,.10); }
.kind-slide[b-h7fqei6fhy]   { color: #ea8a00; background: rgba(234,138,  0,.12); }
.kind-pdf[b-h7fqei6fhy]     { color: #e5484d; background: rgba(229, 72, 77,.10); }
.kind-image[b-h7fqei6fhy]   { color: #a855f7; background: rgba(168, 85,247,.10); }
.kind-archive[b-h7fqei6fhy] { color: #b08400; background: rgba(176,132,  0,.12); }
.kind-audio[b-h7fqei6fhy]   { color: #db2777; background: rgba(219, 39,119,.10); }
.kind-video[b-h7fqei6fhy]   { color: #0ea5e9; background: rgba( 14,165,233,.10); }
.kind-code[b-h7fqei6fhy]    { color: #0d9488; background: rgba( 13,148,136,.10); }
.kind-generic[b-h7fqei6fhy] { color: #6d7280; background: var(--bg-muted); }

/* ---- the signature: full-pane drag-drop upload overlay ---- */
.files-dropzone[b-h7fqei6fhy] {
    position: absolute;
    inset: var(--sp-2);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;            /* let the drag/drop events reach the zone JS listens on */
    border-radius: var(--radius-lg);
    background: var(--bg-selected);
    box-shadow: inset 0 0 0 2px var(--accent);
    background-clip: padding-box;
    animation: files-drop-in-b-h7fqei6fhy var(--transition);
}
/* Dashed inner ring for the classic "drop here" look. */
.files-dropzone-inner[b-h7fqei6fhy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-10) var(--sp-12);
    border: 2px dashed var(--accent);
    border-radius: var(--radius-lg);
    color: var(--accent-text);
}
.files-dropzone-icon[b-h7fqei6fhy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}
.files-dropzone-icon svg[b-h7fqei6fhy] { width: 48px; height: 48px; }
.files-dropzone-title[b-h7fqei6fhy] { margin: 0; font-size: var(--type-h1); font-weight: 700; color: var(--text-primary); }
.files-dropzone-sub[b-h7fqei6fhy] { margin: 0; font-size: var(--type-body); color: var(--text-muted); }
@keyframes files-drop-in-b-h7fqei6fhy {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- context-menu submenu empty hint ---- */
.ctx-empty[b-h7fqei6fhy] {
    display: block;
    padding: 8px var(--sp-5);
    font-size: 12px;
    color: var(--text-muted);
}

/* ---- empty-folder state: a large friendly upload prompt ---- */
.files-empty[b-h7fqei6fhy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--sp-3);
    min-height: 60vh;
    padding: var(--sp-8) var(--sp-5);
}
.files-empty-icon[b-h7fqei6fhy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--bg-muted);
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}
.files-empty-icon svg[b-h7fqei6fhy] { width: 40px; height: 40px; }
.files-empty-title[b-h7fqei6fhy] { margin: 0; font-size: var(--type-h1); font-weight: 700; color: var(--text-primary); }
.files-empty-sub[b-h7fqei6fhy] { margin: 0; font-size: var(--type-body); color: var(--text-muted); }
.files-empty-cta[b-h7fqei6fhy] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}

/* ---- responsive ---- */
@media (max-width: 720px) {
    .files-row[b-h7fqei6fhy] { grid-template-columns: 1fr auto; }
    .files-col-size[b-h7fqei6fhy], .files-col-date[b-h7fqei6fhy] { display: none; }
    .files-col-actions[b-h7fqei6fhy] { opacity: 1; }
    .files-grid[b-h7fqei6fhy] { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-3); }
}
@media (max-width: 640px) {
    .files-head[b-h7fqei6fhy] { gap: var(--sp-2); }
    .files-newbtn span[b-h7fqei6fhy] { display: none; }   /* compact to "+ ▾" on tight headers */
    .files-newbtn[b-h7fqei6fhy] { padding: 0 var(--sp-3); }
    .files-dropzone-inner[b-h7fqei6fhy] { padding: var(--sp-6) var(--sp-5); }
}

/* Respect reduced-motion for the hover lift and overlay fade. */
@media (prefers-reduced-motion: reduce) {
    .files-tile:hover[b-h7fqei6fhy] { transform: none; }
    .files-dropzone[b-h7fqei6fhy] { animation: none; }
}
/* /Pages/ForgotPassword.razor.rz.scp.css */
/* Neutral info/confirmation <Alert> on the dark glass auth card. The shared .alert-info palette
   is theme-dependent (--bg-muted/--text-secondary), so re-tune to on-dark tokens that read on
   the always-dark card in either app theme. .alert already supplies padding/radius/font. */
.auth-alert-info[b-2y4ydyeeke] {
    background: rgba(255, 255, 255, .06);
    color: var(--on-dark);
    border-color: rgba(255, 255, 255, .12);
    line-height: 1.5;
    margin-bottom: var(--sp-5);
}

/* Error <Alert> re-tuned for the dark glass card (shared .alert-error is too light here). */
.auth-alert[b-2y4ydyeeke] {
    background: rgba(255, 84, 112, .14);
    color: #ffb3c0;
    border-color: rgba(255, 84, 112, .3);
    margin-bottom: var(--sp-5);
}

.auth-fineprint[b-2y4ydyeeke] {
    font-size: 12px;
}
/* /Pages/Login.razor.rz.scp.css */
/* Error <Alert> on the always-dark glass auth card. The shared .alert-error palette is
   theme-dependent (light-pink bg / dark-red text in light mode) which clashes with the dark
   card, so re-tune to the dark-friendly colors the card has always used. margin-bottom keeps
   the spacing the old .auth-error had above the submit button. */
.auth-alert[b-ymld3nc4r7] {
    background: rgba(255, 84, 112, .14);
    color: #ffb3c0;
    border-color: rgba(255, 84, 112, .3);
    margin-bottom: var(--sp-5);
}

/* Quiet reassurance line under the sign-in links. Uses on-dark tokens so it reads on the
   always-dark glass card regardless of app theme. */
.auth-trust[b-ymld3nc4r7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin: var(--sp-6) 0 0;
    font-size: 12px;
    color: var(--on-dark-dim);
}

.auth-trust svg[b-ymld3nc4r7] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    opacity: .8;
}

/* "Remember this device" — quiet inline checkbox row under the password field. */
.auth-remember[b-ymld3nc4r7] {
    display: flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    margin: var(--sp-1, 4px) 0 var(--sp-2, 8px);
    font-size: 13px;
    color: var(--on-dark-dim, #c7cad1);
    cursor: pointer;
    user-select: none;
}
.auth-remember input[b-ymld3nc4r7] { width: 15px; height: 15px; accent-color: var(--accent, #6d5efc); cursor: pointer; }
/* /Pages/Mail.razor.rz.scp.css */
/* Scoped Mail-view polish. Global layout/classes live in app.css; this file only adds
   Mail-specific refinements (a11y helpers, focus visibility, small-screen gaps, and a
   couple of state cues) using the shared design tokens — no new colors. */

/* Visually-hidden but screen-reader-available text (unread cue, etc.). */
[b-ngfy8e4j2q] .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The message list is keyboard-focusable; make that obvious without a chunky native ring. */
[b-ngfy8e4j2q] .panel-scroll:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent);
}

/* Div-based interactive nav items (account header, folder, All Inboxes) are now keyboard
   focusable — give them the same accent ring as real buttons. */
[b-ngfy8e4j2q] .acct-group-head:focus-visible,
[b-ngfy8e4j2q] .folder:focus-visible,
[b-ngfy8e4j2q] .all-inboxes:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

/* Keep icon-only/text action buttons clearly focusable for keyboard users. */
[b-ngfy8e4j2q] .msg-act:focus-visible,
[b-ngfy8e4j2q] .tool-btn:focus-visible,
[b-ngfy8e4j2q] .btn-sm:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-radius: var(--radius-sm);
}

/* A keyboard-selected row that isn't yet opened still reads as "current": pair the existing
   inset accent bar (app.css) with a faint hover-tint so the cursor is unmistakable. */
[b-ngfy8e4j2q] .msg.kbd-cursor:not(.active) {
    background: var(--bg-hover);
}

/* Subtle press feedback on row action buttons so clicks feel registered. */
[b-ngfy8e4j2q] .msg-act:active:not(:disabled),
[b-ngfy8e4j2q] .tool-btn:active:not(:disabled) {
    transform: scale(0.92);
}

/* Disabled reader-toolbar buttons (action in flight) read as unavailable. */
[b-ngfy8e4j2q] .tool-btn:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* Empty-subject placeholder: render "(no subject)" muted/italic so it reads as a fallback,
   not as the actual subject text. */
[b-ngfy8e4j2q] .reader-subject.no-subject {
    color: var(--text-muted);
    font-style: italic;
    font-weight: 500;
}

/* Long folder names / "Search · …" headings must not push the Clear/hint controls off the
   row or wrap the header. Let the title truncate and keep the trailing control pinned. */
[b-ngfy8e4j2q] .panel-head h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

[b-ngfy8e4j2q] .panel-head .btn-sm {
    flex-shrink: 0;
}

/* Sender block in the reader header: let a long display name / address truncate instead of
   shoving the date off the row (reader-meta is a flex row; without min-width:0 the text won't
   shrink). The date keeps its margin-left:auto pin from app.css. */
[b-ngfy8e4j2q] .reader-who {
    min-width: 0;
    flex: 1;
}

[b-ngfy8e4j2q] .reader-from {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The sender address sits next to a quiet click-to-copy button; let the address truncate
   and keep the copy control inline, revealing it on hover/focus of the row. */
[b-ngfy8e4j2q] .reader-to {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

[b-ngfy8e4j2q] .reader-to > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Copy-sender-address affordance: unobtrusive until you hover the sender block, then a tappable
   icon button. Always visible/operable on touch (no hover) and when focused for keyboard users. */
[b-ngfy8e4j2q] .copy-addr {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease, background .12s ease;
}

[b-ngfy8e4j2q] .copy-addr svg {
    width: 13px;
    height: 13px;
}

[b-ngfy8e4j2q] .reader-meta:hover .copy-addr,
[b-ngfy8e4j2q] .copy-addr:focus-visible {
    opacity: 1;
}

[b-ngfy8e4j2q] .copy-addr:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}

[b-ngfy8e4j2q] .copy-addr:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* The post-copy checkmark stays visible (and green) regardless of hover so the success reads. */
[b-ngfy8e4j2q] .copy-addr:has(polyline) {
    opacity: 1;
    color: var(--green);
}

/* Touch devices have no hover — keep the copy button reachable. */
@media (pointer: coarse) {
    [b-ngfy8e4j2q] .copy-addr { opacity: 1; }
}

/* Small keyboard-shortcut hint in the list header. */
.kbd-hint[b-ngfy8e4j2q] {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Non-blocking "syncing" cue shown next to the section title while a background delta-sync
   runs and the cached list is already visible. Unlike .kbd-hint it stays visible on touch. */
.sync-hint[b-ngfy8e4j2q] {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}
.sync-hint .spinner[b-ngfy8e4j2q] { margin-right: 0; }

/* "Load older messages" footer under the per-folder list — pages deeper into the mirror. */
.load-older[b-ngfy8e4j2q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border: 0;
    border-top: 1px solid var(--border);
    background: transparent;
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}
.load-older:hover:not(:disabled)[b-ngfy8e4j2q] { background: var(--bg-hover); }
.load-older:disabled[b-ngfy8e4j2q] { color: var(--text-muted); cursor: default; }

/* Free-tier history-cap nudge (shown instead of "Load older" once the cap is hit). */
.load-older-cap[b-ngfy8e4j2q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 12px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}
.load-older-upgrade[b-ngfy8e4j2q] {
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.load-older-upgrade:hover[b-ngfy8e4j2q] { text-decoration: underline; }

/* Keyboard shortcuts can't be used on touch devices — don't show the hint there. */
@media (pointer: coarse) {
    .kbd-hint[b-ngfy8e4j2q] { display: none; }
}

.kbd-hint kbd[b-ngfy8e4j2q] {
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg-muted);
    color: var(--text-secondary);
}

/* Gentle fade-in as a message opens in the reader, so switching messages feels responsive
   rather than a hard swap. Disabled under reduced-motion. */
[b-ngfy8e4j2q] .reader-head,
[b-ngfy8e4j2q] .reader-body {
    animation: mail-reader-in-b-ngfy8e4j2q .18s ease both;
}

@keyframes mail-reader-in-b-ngfy8e4j2q {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    [b-ngfy8e4j2q] .reader-head,
    [b-ngfy8e4j2q] .reader-body { animation: none; }
}

/* Discoverable shortcut tips in the "Select a message" empty state — a gentle first-run nudge
   toward keyboard nav. Hidden on touch where the shortcuts don't apply. */
[b-ngfy8e4j2q] .reader-tips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2) var(--sp-4);
    margin-top: var(--sp-4);
    font-size: 11.5px;
    color: var(--text-muted);
}

[b-ngfy8e4j2q] .reader-tips span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

[b-ngfy8e4j2q] .reader-tips kbd {
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg-muted);
    color: var(--text-secondary);
}

@media (pointer: coarse) {
    [b-ngfy8e4j2q] .reader-tips { display: none; }
}

/* On touch / narrow viewports the hover-reveal row actions are unreachable — keep them
   visible there so delete/archive stay one tap away. The global phone breakpoint already
   pins them; this guards the in-between (coarse-pointer) case too. */
@media (pointer: coarse) {
    [b-ngfy8e4j2q] .msg-actions {
        opacity: 1;
        pointer-events: auto;
    }
}

/* ---- Mobile swipe gestures ---------------------------------------------------------------
   Swipe a list row to act: drag right reveals the green archive backdrop, drag left the red
   delete backdrop. swipe.js translates the row over these absolutely-positioned layers (they
   sit behind the row content and don't participate in the grid). Touch-only: the whole block
   lives under (pointer: coarse) so desktop mouse / layout is completely unaffected. */
@media (pointer: coarse) {
    /* The row must be opaque so the backdrop only shows as the row slides away. Rows sit on
       the panel surface; states (hover/active) already override this elsewhere. will-change
       hints the compositor for smooth 1:1 finger tracking. */
    [b-ngfy8e4j2q] .msg {
        background: var(--bg-panel);
        will-change: transform;
        touch-action: pan-y; /* allow vertical scroll; we own horizontal once we detect a swipe */
    }

    /* Action backdrops: full-row colored layers behind the sliding row, each pinned to the
       side it's revealed from, with the icon near that edge. Hidden until the row is dragged. */
    [b-ngfy8e4j2q] .msg .swipe-back {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        display: none;
        align-items: center;
        padding: 0 var(--sp-5);
        color: #fff;
        pointer-events: none;
        z-index: 0;
    }

    [b-ngfy8e4j2q] .msg .swipe-back.archive {
        justify-content: flex-start;
        background: var(--green, #16a34a);
    }

    [b-ngfy8e4j2q] .msg .swipe-back.delete {
        justify-content: flex-end;
        background: var(--danger, #dc2626);
    }

    [b-ngfy8e4j2q] .msg .swipe-back svg {
        width: 22px;
        height: 22px;
        opacity: 0.92;
        transition: transform .12s ease;
    }

    /* Reveal only the backdrop matching the current swipe direction. The row content (grid
       children) all sit above via z-index so they stay readable as the row slides. */
    [b-ngfy8e4j2q] .msg.swiping-right .swipe-back.archive,
    [b-ngfy8e4j2q] .msg.swiping-left  .swipe-back.delete {
        display: flex;
    }

    /* Lift every direct child of the row above the backdrops while keeping the grid intact. */
    [b-ngfy8e4j2q] .msg > .msg-dot,
    [b-ngfy8e4j2q] .msg > .msg-avatar,
    [b-ngfy8e4j2q] .msg > .msg-from,
    [b-ngfy8e4j2q] .msg > .msg-time,
    [b-ngfy8e4j2q] .msg > .msg-subject,
    [b-ngfy8e4j2q] .msg > .acct-chip,
    [b-ngfy8e4j2q] .msg > .msg-actions {
        position: relative;
        z-index: 1;
    }

    /* Past the commit threshold: nudge the icon to signal "release to act". */
    [b-ngfy8e4j2q] .msg.swipe-armed .swipe-back svg {
        transform: scale(1.18);
    }
}

/* Honor reduced-motion: swipe.js applies inline transitions on release; this keeps the
   icon pop from animating for users who opt out. (Row tracking itself has no transition.) */
@media (pointer: coarse) and (prefers-reduced-motion: reduce) {
    [b-ngfy8e4j2q] .msg .swipe-back svg { transition: none; }
}

/* ============================================================================
   G4 — Spotlight-grade search: scope bar + grouped results
   ============================================================================ */

/* The scope bar sits between the panel head and the results list while searching. */
[b-ngfy8e4j2q] .search-scopebar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-5);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

/* Scope dropdown trigger — a quiet pill showing the active scope. */
[b-ngfy8e4j2q] .scope-picker { position: relative; }

[b-ngfy8e4j2q] .scope-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 28px;
    padding: 0 var(--sp-2) 0 var(--sp-3);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    max-width: 240px;
}
[b-ngfy8e4j2q] .scope-trigger:hover { background: var(--bg-hover); }
[b-ngfy8e4j2q] .scope-trigger svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted); }
[b-ngfy8e4j2q] .scope-trigger .scope-chev { width: 13px; height: 13px; }
[b-ngfy8e4j2q] .scope-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* The dropdown of mailboxes + folders. */
[b-ngfy8e4j2q] .scope-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 60;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-content);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--sp-1);
}
[b-ngfy8e4j2q] .scope-opt {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px var(--sp-3);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
[b-ngfy8e4j2q] .scope-opt:hover { background: var(--bg-hover); }
[b-ngfy8e4j2q] .scope-opt.on { color: var(--accent); font-weight: 600; }
[b-ngfy8e4j2q] .scope-opt-folder { padding-left: var(--sp-6); color: var(--text-muted); font-size: 12.5px; }
[b-ngfy8e4j2q] .scope-opt-folder.on { color: var(--accent); }

/* Operator hint — small, only on wide panels (hidden on narrow). */
[b-ngfy8e4j2q] .scope-hint {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-muted);
    font-size: 11px;
}
[b-ngfy8e4j2q] .scope-hint kbd {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10.5px;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg-subtle);
    color: var(--text-muted);
}
@media (max-width: 900px) {
    [b-ngfy8e4j2q] .scope-hint { display: none; }
}

/* Grouped result section heads — mailbox · folder · count. */
[b-ngfy8e4j2q] .search-group-head {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-5) 2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--bg-subtle);
    position: sticky;
    top: 0;
    z-index: 1;
}
[b-ngfy8e4j2q] .search-group-acct { color: var(--text); }
[b-ngfy8e4j2q] .search-group-folder { color: var(--text-muted); }
[b-ngfy8e4j2q] .search-group-count { margin-left: auto; font-weight: 600; }
/* /Pages/Pricing.razor.rz.scp.css */
.pricing[b-lakb3t48ax] {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
    color: var(--on-dark);
    padding: var(--sp-8) 0;
}

.pricing .auth-brand[b-lakb3t48ax] {
    justify-content: center;
    display: inline-flex;
}

.pricing-title[b-lakb3t48ax] {
    color: #fff;
    font-size: clamp(30px, 5vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin: 0 0 var(--sp-5);
    font-weight: 700;
}

.pricing-title .accent[b-lakb3t48ax] {
    color: var(--accent); /* solid (flat) — was a gradient-clipped word */
}

.pricing-lead[b-lakb3t48ax] {
    color: var(--on-dark-dim);
    font-size: clamp(15px, 1.8vw, 18px);
    line-height: 1.6;
    margin: 0 auto var(--sp-8);
    max-width: 660px;
}

.pricing-lead strong[b-lakb3t48ax] {
    color: var(--on-dark);
    font-weight: 600;
}

.pricing-cta[b-lakb3t48ax] {
    display: flex;
    gap: var(--sp-4);
    justify-content: center;
    margin-bottom: var(--sp-12);
    flex-wrap: wrap;
}

/* Compact trust row of reassurance points between the CTA and the tiers. Each item gets a
   small check; items wrap and center on narrow screens. */
.pricing-trust[b-lakb3t48ax] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-4) var(--sp-6);
    margin: calc(-1 * var(--sp-6)) auto var(--sp-12);
    padding: 0;
}

.pricing-trust li[b-lakb3t48ax] {
    position: relative;
    padding-left: var(--sp-6);
    color: var(--on-dark-dim);
    font-size: 13px;
    font-weight: 600;
}

.pricing-trust li[b-lakb3t48ax]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--accent-3);
    border-bottom: 2px solid var(--accent-3);
    transform: rotate(-45deg);
}

/* ---- Free tier ---- */
.tier-free[b-lakb3t48ax] {
    text-align: left;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    max-width: 560px;
    margin: 0 auto var(--sp-12);
    transition: transform var(--transition), background var(--transition);
}

/* Match the paid price-card lift so the free tier feels like a first-class, tappable card. */
.tier-free:hover[b-lakb3t48ax] {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .09);
}

@media (prefers-reduced-motion: reduce) {
    .tier-free[b-lakb3t48ax] { transition: none; }
    .tier-free:hover[b-lakb3t48ax] { transform: none; }
    .price-card[b-lakb3t48ax] { transition: none; }
    .price-card:hover[b-lakb3t48ax] { transform: none; }
}

.tier-free-head[b-lakb3t48ax] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-2);
}

.tier-free-head h2[b-lakb3t48ax] {
    color: #fff;
    font-size: 20px;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tier-free-price[b-lakb3t48ax] {
    color: var(--on-dark);
    font-size: 14px;
    font-weight: 600;
}

.tier-free-sub[b-lakb3t48ax] {
    color: var(--on-dark-dim);
    font-size: 13px;
    margin: 0 0 var(--sp-4);
}

.tier-free-list[b-lakb3t48ax] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--sp-2);
}

.tier-free-list li[b-lakb3t48ax] {
    position: relative;
    padding-left: var(--sp-6);
    color: var(--on-dark-dim);
    font-size: 14px;
    line-height: 1.5;
}

.tier-free-list li[b-lakb3t48ax]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--accent-3);
    border-bottom: 2px solid var(--accent-3);
    transform: rotate(-45deg);
}

/* ---- Enterprise tier ---- */
.tier-ent[b-lakb3t48ax] {
    text-align: left;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    max-width: 560px;
    margin: 0 auto var(--sp-12);
    transition: transform var(--transition), background var(--transition);
}

.tier-ent:hover[b-lakb3t48ax] {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .09);
}

@media (prefers-reduced-motion: reduce) {
    .tier-ent[b-lakb3t48ax] { transition: none; }
    .tier-ent:hover[b-lakb3t48ax] { transform: none; }
}

.tier-ent-head[b-lakb3t48ax] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-2);
}

.tier-ent-head h2[b-lakb3t48ax] {
    color: #fff;
    font-size: 20px;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tier-ent-tag[b-lakb3t48ax] {
    color: var(--on-dark-dim);
    font-size: 13px;
    font-weight: 600;
}

.tier-ent-sub[b-lakb3t48ax] {
    color: var(--on-dark-dim);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 var(--sp-5);
}

.tier-ent-cta[b-lakb3t48ax] {
    display: inline-block;
}

/* ---- Section labels ---- */
.section-label[b-lakb3t48ax] {
    text-align: left;
    color: var(--on-dark);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 var(--sp-4);
}

/* ---- Price cards ---- */
.pricing-grid[b-lakb3t48ax] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
    text-align: left;
    margin-bottom: var(--sp-10);
}

.pricing-grid-2[b-lakb3t48ax] {
    grid-template-columns: repeat(2, 1fr);
    max-width: 620px;
}

.price-card[b-lakb3t48ax] {
    position: relative;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    transition: transform var(--transition), background var(--transition);
}

.price-card:hover[b-lakb3t48ax] {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .09);
}

.price-card-pro[b-lakb3t48ax] {
    border-color: var(--accent); /* solid accent highlight — was a gradient border + glow */
    box-shadow: var(--shadow-md);
}

/* Reserve space at the top-right so the "Best value" badge never overlaps the heading
   when the card narrows in the 3-up grid. */
.price-card-pro h4[b-lakb3t48ax] {
    padding-right: 84px;
}

.price-badge[b-lakb3t48ax] {
    position: absolute;
    top: var(--sp-4);
    right: var(--sp-4);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff;
    background: var(--grad);
    padding: 3px var(--sp-2);
    border-radius: 999px;
}

.price-card h4[b-lakb3t48ax] {
    color: #fff;
    font-size: 16px;
    margin: 0 0 var(--sp-3);
    font-weight: 600;
}

.price[b-lakb3t48ax] {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: var(--sp-3);
}

.price-term[b-lakb3t48ax] {
    color: var(--on-dark-dim);
    font-size: 13px;
    font-weight: 500;
}

.price-desc[b-lakb3t48ax] {
    color: var(--on-dark-dim);
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}

/* ---- Footnote ---- */
.pricing-note[b-lakb3t48ax] {
    color: var(--on-dark-dim);
    font-size: 13px;
    line-height: 1.6;
    max-width: 620px;
    margin: var(--sp-4) auto 0;
}

.pricing-note a[b-lakb3t48ax] {
    color: var(--on-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 760px) {
    .pricing-grid[b-lakb3t48ax],
    .pricing-grid-2[b-lakb3t48ax] {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---- Personal Pro tier (highlighted recurring subscription) ---- */
.tier-pro[b-lakb3t48ax] {
    position: relative;
    text-align: left;
    background: var(--glass);
    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--glass-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    max-width: 560px;
    margin: 0 auto var(--sp-12);
    transition: transform var(--transition), background var(--transition);
}

/* Team tier — same card as Pro but a neutral (non-accent) border so it reads as a distinct tier. */
.tier-team[b-lakb3t48ax] {
    position: relative;
    text-align: left;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    max-width: 560px;
    margin: 0 auto var(--sp-12);
    transition: transform var(--transition), background var(--transition);
}

.tier-pro:hover[b-lakb3t48ax],
.tier-team:hover[b-lakb3t48ax] {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .09);
}

@media (prefers-reduced-motion: reduce) {
    .tier-pro[b-lakb3t48ax], .tier-team[b-lakb3t48ax] { transition: none; }
    .tier-pro:hover[b-lakb3t48ax], .tier-team:hover[b-lakb3t48ax] { transform: none; }
}

.tier-pro-badge[b-lakb3t48ax] {
    position: absolute;
    top: calc(-1 * var(--sp-3));
    left: var(--sp-6);
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px var(--sp-3);
    border-radius: 999px;
}

.tier-pro-head[b-lakb3t48ax] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-2);
}

.tier-pro-head h2[b-lakb3t48ax] {
    color: #fff;
    font-size: 20px;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.tier-pro-price[b-lakb3t48ax] {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tier-pro-term[b-lakb3t48ax] {
    font-size: 14px;
    font-weight: 600;
    color: var(--on-dark-dim);
    margin-left: 2px;
}

.tier-pro-sub[b-lakb3t48ax] {
    color: var(--on-dark-dim);
    font-size: 13px;
    margin: 0 0 var(--sp-4);
}

.tier-pro-list[b-lakb3t48ax] {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-5);
    display: grid;
    gap: var(--sp-2);
}

.tier-pro-list li[b-lakb3t48ax] {
    position: relative;
    padding-left: var(--sp-6);
    color: var(--on-dark-dim);
    font-size: 14px;
    line-height: 1.5;
}

.tier-pro-list li[b-lakb3t48ax]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 8px;
    border-left: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    transform: rotate(-45deg);
}

.tier-pro-cta[b-lakb3t48ax] {
    width: 100%;
    justify-content: center;
}
/* /Pages/ResetPassword.razor.rz.scp.css */
/* Accent callout <Alert> on the dark glass auth card. Routed through the info <Alert> but
   re-tuned to the accent look: on-dark text + accent border read on the always-dark card in
   either app theme (the shared .alert-info palette is theme-dependent). .alert supplies
   padding/radius/font. */
.auth-callout[b-72tqc5vigk] {
    background: rgba(79, 70, 229, .16);
    color: var(--on-dark);
    border-color: var(--accent);
    line-height: 1.5;
    margin-bottom: var(--sp-5);
}

/* Error <Alert> re-tuned for the dark glass card (shared .alert-error is too light here). */
.auth-alert[b-72tqc5vigk] {
    background: rgba(255, 84, 112, .14);
    color: #ffb3c0;
    border-color: rgba(255, 84, 112, .3);
    margin-bottom: var(--sp-5);
}

/* Inline password-strength hint shown under the new password as the user types. */
.pwd-meter[b-72tqc5vigk] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.pwd-meter-track[b-72tqc5vigk] {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}

.pwd-meter-fill[b-72tqc5vigk] {
    height: 100%;
    border-radius: 999px;
    transition: width var(--transition), background-color var(--transition);
}

.pwd-meter-label[b-72tqc5vigk] {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.pwd-weak[b-72tqc5vigk]    { background-color: var(--danger); color: #ffb3c0; }
.pwd-good[b-72tqc5vigk]    { background-color: #f0b429; color: #f5c84b; }
.pwd-strong[b-72tqc5vigk]  { background-color: #34c759; color: #6ee08a; }

/* Quiet "passwords match" reassurance under the confirm field — a green-light before submit. */
.match-ok[b-72tqc5vigk] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-top: var(--sp-2);
    font-size: 12px;
    font-weight: 600;
    color: #6ee08a;
}

.match-ok svg[b-72tqc5vigk] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}
/* /Pages/Settings.razor.rz.scp.css */
/* The full-page Settings layout (.settings-page flex wrapper) lives in app.css; the
   section nav (.panel) + content (.full-pane) two-pane surface lives in the shared
   SettingsBody component (SettingsBody.razor.css), so this page has no styles of its own. */
/* /Pages/Signup.razor.rz.scp.css */
/* Signup is the tallest auth page (4 fields + consent). Tighten vertical rhythm so the
   card fits a normal laptop viewport without scrolling, while staying comfortable.
   These elements live directly in Signup's markup, so plain (scoped) selectors apply. */
.auth-sub[b-k40x9vbcf0] { margin-bottom: var(--sp-6); }
.auth-field[b-k40x9vbcf0] { margin-bottom: var(--sp-4); }
.auth-alt[b-k40x9vbcf0] { margin-top: var(--sp-5); }

/* Error <Alert> re-tuned for the always-dark glass card (the shared .alert-error palette is
   theme-dependent and clashes with the dark card). Mirrors the old .auth-error spacing. */
.auth-alert[b-k40x9vbcf0] {
    background: rgba(255, 84, 112, .14);
    color: #ffb3c0;
    border-color: rgba(255, 84, 112, .3);
    margin-bottom: var(--sp-5);
}

/* Inline password-strength hint shown under the account password as the user types. */
.pwd-meter[b-k40x9vbcf0] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.pwd-meter-track[b-k40x9vbcf0] {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}

.pwd-meter-fill[b-k40x9vbcf0] {
    height: 100%;
    border-radius: 999px;
    transition: width var(--transition), background-color var(--transition);
}

.pwd-meter-label[b-k40x9vbcf0] {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.pwd-weak[b-k40x9vbcf0]    { background-color: var(--danger); color: #ffb3c0; }
.pwd-good[b-k40x9vbcf0]    { background-color: #f0b429; color: #f5c84b; }
.pwd-strong[b-k40x9vbcf0]  { background-color: #34c759; color: #6ee08a; }

/* Quiet "passwords match" reassurance under the confirm field, so users get a green-light
   before submitting instead of only learning of a mismatch on submit. */
.match-ok[b-k40x9vbcf0] {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-top: var(--sp-2);
    font-size: 12px;
    font-weight: 600;
    color: #6ee08a;
}

.match-ok svg[b-k40x9vbcf0] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

/* Quiet trust line under the sign-in link — reassures at the highest-intent step that
   getting started costs nothing. On-dark tokens so it reads on the dark glass card. */
.auth-trust[b-k40x9vbcf0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin: var(--sp-5) 0 0;
    font-size: 12px;
    color: var(--on-dark-dim);
}

.auth-trust svg[b-k40x9vbcf0] {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    opacity: .8;
}
/* /Pages/Vault.razor.rz.scp.css */
/* Error <Alert> re-tuned for the always-dark glass card (the shared .alert-error palette is
   theme-dependent — light-pink bg / dark-red text in light mode — and clashes with the dark
   card). Mirrors the dark-friendly colors + spacing the old .auth-error used. */
.auth-alert[b-5g0pfey8bd] {
    background: rgba(255, 84, 112, .14);
    color: #ffb3c0;
    border-color: rgba(255, 84, 112, .3);
    margin-bottom: var(--sp-5);
}

/* Lean "Forgot your vault password?" line — muted text with a single hyperlink. */
.vault-hint[b-5g0pfey8bd] {
    margin: var(--sp-5) 0 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: var(--on-dark-dim);
}
.vault-hint a[b-5g0pfey8bd] {
    color: #a99fff;
    font-weight: 500;
    text-decoration: none;
}
.vault-hint a:hover[b-5g0pfey8bd] { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* Signed-in account chip on the vault screens — shows whose vault this is + a switch action. */
.vault-account[b-5g0pfey8bd] {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-6);
    padding: var(--sp-3);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .04);
}
.vault-account .avatar.sm[b-5g0pfey8bd] {
    width: 34px;
    height: 34px;
    font-size: 13px;
    flex: 0 0 auto;
}
.vault-account-meta[b-5g0pfey8bd] { min-width: 0; flex: 1; }
.vault-account-name[b-5g0pfey8bd] {
    font-weight: 600;
    font-size: 14px;
    color: var(--on-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vault-account-email[b-5g0pfey8bd] {
    font-size: 12px;
    color: var(--on-dark-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vault-switch[b-5g0pfey8bd] {
    flex: 0 0 auto;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--on-dark-dim);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
}
.vault-switch:hover[b-5g0pfey8bd] { color: var(--on-dark); border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .06); }

/* Switch (bordered) + Forget (quiet text link) stacked on the right of the account chip. */
.vault-account-actions[b-5g0pfey8bd] { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--sp-1); align-items: stretch; }
.vault-forget[b-5g0pfey8bd] {
    border: none;
    background: transparent;
    color: var(--on-dark-dim);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 2px var(--sp-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}
.vault-forget:hover[b-5g0pfey8bd] { color: #ff9a9a; }

/* Recovery seed phrase — hardware-wallet style 3×4 numbered grid, on the dark glass card.
   Shared by the phrase DISPLAY (after create) and the phrase INPUT (recover). */
.seed-grid[b-5g0pfey8bd] {
    list-style: none;
    counter-reset: word;
    margin: var(--sp-5) 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2);
}

.seed-word[b-5g0pfey8bd],
.seed-input-cell[b-5g0pfey8bd] {
    counter-increment: word;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
    padding: var(--sp-2) var(--sp-3);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-md);
    font-variant-numeric: tabular-nums;
}

.seed-word[b-5g0pfey8bd]::before,
.seed-input-cell[b-5g0pfey8bd]::before {
    content: counter(word);
    flex: none;
    min-width: 1.3em;
    text-align: right;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .4);
}

.seed-text[b-5g0pfey8bd] {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .01em;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seed-input-cell:focus-within[b-5g0pfey8bd] {
    border-color: var(--accent);
    background: rgba(255, 255, 255, .09);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .22);
}

/* Subtle confirmed look once a box holds a word, so progress through the 12 boxes is
   visible at a glance (the focused box still wins via :focus-within above). */
.seed-input-cell.seed-filled[b-5g0pfey8bd] {
    border-color: rgba(110, 224, 138, .45);
    background: rgba(110, 224, 138, .08);
}

.seed-input-cell.seed-filled[b-5g0pfey8bd]::before {
    color: rgba(110, 224, 138, .85);
}

.seed-input[b-5g0pfey8bd] {
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 2px 0;
}

.seed-input[b-5g0pfey8bd]::placeholder { color: rgba(255, 255, 255, .3); }

/* Progress line + the "Clear all" convenience share one row so the reset stays close to
   the count without adding vertical bulk. */
.seed-status[b-5g0pfey8bd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: calc(-1 * var(--sp-3)) 0 var(--sp-4);
}

.seed-progress[b-5g0pfey8bd] {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--on-dark-dim);
    transition: color var(--transition);
}

.seed-progress-done[b-5g0pfey8bd] {
    color: #6ee08a;
}

/* Quiet text-button — clears all 12 boxes in one tap after a bad paste or lost place. */
.seed-clear[b-5g0pfey8bd] {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--on-dark-dim);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition);
}

.seed-clear:hover[b-5g0pfey8bd] {
    color: var(--on-dark);
}

.vault-loading[b-5g0pfey8bd] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--on-dark-dim);
}

.vault-loading .spinner[b-5g0pfey8bd] { margin-right: 0; }

.rec-actions[b-5g0pfey8bd] {
    display: flex;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.rec-actions .rec-copy[b-5g0pfey8bd] {
    flex: 1 1 0;
    margin-bottom: 0;
}

.rec-copy[b-5g0pfey8bd] {
    width: 100%;
    margin-bottom: var(--sp-5);
}

/* Inline password-strength hint under the vault password as the user types. */
.pwd-meter[b-5g0pfey8bd] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

.pwd-meter-track[b-5g0pfey8bd] {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}

.pwd-meter-fill[b-5g0pfey8bd] {
    height: 100%;
    border-radius: 999px;
    transition: width var(--transition), background-color var(--transition);
}

.pwd-meter-label[b-5g0pfey8bd] {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.pwd-weak[b-5g0pfey8bd]    { background-color: var(--danger); color: #ffb3c0; }
.pwd-good[b-5g0pfey8bd]    { background-color: #f0b429; color: #f5c84b; }
.pwd-strong[b-5g0pfey8bd]  { background-color: #34c759; color: #6ee08a; }

.rec-copy-hint[b-5g0pfey8bd] {
    margin: calc(-1 * var(--sp-3)) 0 var(--sp-5);
    font-size: 12px;
    line-height: 1.45;
    color: #ffb3c0;
}

.rec-copy-ok[b-5g0pfey8bd] {
    color: var(--on-dark-dim);
}

.rec-confirm[b-5g0pfey8bd] {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    margin: var(--sp-4) 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--on-dark-dim);
    cursor: pointer;
}

.rec-confirm input[b-5g0pfey8bd] {
    margin-top: 2px;
    flex: none;
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

/* Very small phones: 2 columns so words don't crush. */
@media (max-width: 380px) {
    .seed-grid[b-5g0pfey8bd] { grid-template-columns: repeat(2, 1fr); }
}
/* /Pages/Welcome.razor.rz.scp.css */
.welcome[b-fzejzekohe] {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: var(--sp-12) var(--sp-6) var(--sp-16);
    display: flex;
    flex-direction: column;
    gap: var(--sp-10);
}

/* Hero */
.welcome-hero[b-fzejzekohe] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
}

.welcome-badge[b-fzejzekohe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    background: var(--grad);
    color: #fff;
    font-size: 24px;
    font-weight: 800;
    box-shadow: var(--shadow-md);
}

.welcome-title[b-fzejzekohe] {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}

.welcome-lead[b-fzejzekohe] {
    margin: 0;
    max-width: 540px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Checklist */
.welcome-section-label[b-fzejzekohe] {
    margin: 0 0 var(--sp-4);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.checklist[b-fzejzekohe] {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.check-card[b-fzejzekohe] {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--bg-content);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color var(--transition), box-shadow var(--transition),
                transform var(--transition);
    animation: check-in-b-fzejzekohe .4s ease both;
}

/* Subtle staggered entrance so the checklist feels alive on first run. */
.check-card:nth-child(1)[b-fzejzekohe] { animation-delay: .04s; }
.check-card:nth-child(2)[b-fzejzekohe] { animation-delay: .10s; }
.check-card:nth-child(3)[b-fzejzekohe] { animation-delay: .16s; }
.check-card:nth-child(4)[b-fzejzekohe] { animation-delay: .22s; }

@keyframes check-in-b-fzejzekohe {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .check-card[b-fzejzekohe] { animation: none; }
}

.check-card:hover[b-fzejzekohe] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.check-icon[b-fzejzekohe] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--accent);
}

.check-icon[b-fzejzekohe]  svg,
.check-icon svg[b-fzejzekohe] {
    width: 20px;
    height: 20px;
}

.check-body[b-fzejzekohe] {
    flex: 1 1 auto;
    min-width: 0;
}

.check-head[b-fzejzekohe] {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.check-title[b-fzejzekohe] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.check-optional[b-fzejzekohe] {
    font-size: 11px;
    font-weight: 600;
    padding: 1px var(--sp-2);
    border-radius: 999px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--text-muted);
}

.check-desc[b-fzejzekohe] {
    margin: 2px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-muted);
}

.check-action[b-fzejzekohe] {
    flex: 0 0 auto;
    text-decoration: none;
    white-space: nowrap;
}

/* Reminder box */
.welcome-reminder[b-fzejzekohe] {
    display: flex;
    gap: var(--sp-4);
    padding: var(--sp-5);
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.reminder-icon[b-fzejzekohe] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--bg-content);
    border: 1px solid var(--border);
    color: var(--accent);
}

.reminder-icon svg[b-fzejzekohe] {
    width: 19px;
    height: 19px;
}

.reminder-body[b-fzejzekohe] {
    flex: 1 1 auto;
    min-width: 0;
}

.reminder-title[b-fzejzekohe] {
    margin: 0 0 var(--sp-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.reminder-body p[b-fzejzekohe] {
    margin: 0 0 var(--sp-2);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.reminder-body p:last-child[b-fzejzekohe] {
    margin-bottom: 0;
}

.reminder-muted[b-fzejzekohe] {
    color: var(--text-muted) !important;
}

/* Skip */
.welcome-skip[b-fzejzekohe] {
    text-align: center;
}

.welcome-skip a[b-fzejzekohe] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.welcome-skip a:hover[b-fzejzekohe] {
    color: var(--accent);
}

/* Nudge the arrow on hover for a playful "let's go" micro-interaction. */
.skip-arrow[b-fzejzekohe] {
    display: inline-block;
    transition: transform var(--transition);
}

.welcome-skip a:hover .skip-arrow[b-fzejzekohe] {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .skip-arrow[b-fzejzekohe] { transition: none; }
    .welcome-skip a:hover .skip-arrow[b-fzejzekohe] { transform: none; }
}

@media (max-width: 560px) {
    .welcome[b-fzejzekohe] {
        padding: var(--sp-8) var(--sp-4) var(--sp-12);
        gap: var(--sp-8);
    }

    .welcome-title[b-fzejzekohe] { font-size: 24px; }

    .check-card[b-fzejzekohe] {
        flex-wrap: wrap;
    }

    .check-action[b-fzejzekohe] {
        justify-content: center;
        margin-left: 52px;
        width: calc(100% - 56px);
    }
}