/* Blazor's <FocusOnNavigate Selector="h1" /> (Routes.razor) focuses the page
   heading on EVERY navigation so screen readers announce the new page, and its JS
   sets tabindex="-1" to make a non-focusable element focusable.

   Chrome treats that programmatic focus as :focus-visible, so the global ring
   below painted a red box around every page title until the user clicked away.
   :not(:focus-visible) does NOT help here — that is precisely the state Chrome
   reports.

   Suppressed deliberately, and it costs keyboard users nothing: tabindex="-1" is
   unreachable by Tab, so no one can land here by traversal. A ring would mark a
   position nobody navigated to and nothing can be done with. Screen-reader
   announcement is unaffected — that depends on focus, not on the outline.

   Scoped to the landmark target only. Every interactive element keeps its ring. */
h1[tabindex="-1"]:focus,
h1.ph-page-title:focus {
    outline: none;
}

/* Override MudBlazor Info severity — blue is not in the brand palette.
   Use Medium Grey for informational/empty-state alerts. */
.mud-alert-text-info {
    color: var(--an-gray-4);
}

.mud-alert-text-info .mud-alert-icon {
    color: var(--an-gray-4);
}

.mud-alert-filled-info {
    background-color: var(--an-border);
    color: var(--an-gray-1);
}

.mud-alert-outlined-info {
    border-color: var(--an-border-2);
    color: var(--an-gray-4);
}

.mud-alert-standard-info {
    background-color: var(--an-paper);
    color: var(--an-gray-4);
}

.mud-alert-standard-info .mud-alert-icon {
    color: var(--an-gray-4);
}

/* Dialog backdrop: blur background content.
   Scoped by EXCLUSION rather than by targeting .mud-overlay-dialog, deliberately.
   MudBlazor reuses .mud-overlay for two unrelated jobs: the visible dialog scrim, and
   the invisible full-viewport click-catcher it drops behind every select, autocomplete,
   menu and date-picker. Blurring the bare class blurred the whole page behind a
   dropdown — a compositing layer over the entire viewport for a control that is meant
   to be visually weightless.
   Excluding the catcher fixes that and fails safe: a dialog overlay that does not carry
   a class we predicted still gets blurred, so the worst case is the previous behaviour
   rather than an unblurred dialog. Targeting .mud-overlay-dialog positively would
   silently stop blurring if MudBlazor renamed it. */
.mud-overlay:not(.mud-overlay-popover) {
    backdrop-filter: blur(3px);
}

/* Standard dialog header — ArchitectNow Red bar with white text/icons.
   Used by ConfirmDialog and all custom dialogs via Class="confirm-dialog". */
.confirm-dialog .mud-dialog-title {
    padding: 0 !important;
    background-color: var(--an-red);
}

.confirm-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--an-header-gradient);
    color: #fff;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--an-success);
}

.invalid {
    outline: 1px solid var(--an-error);
}

.validation-message {
    color: var(--an-error);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--an-red);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--an-gray-5);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ===================================================================
   ArchitectNow Brand Styles (from an-admin-api)
   =================================================================== */

.btn-primary {
    /* Button text is sentence case (constitution 27, style guide "never uppercase for
       emphasis"). The all-caps transform arrived with the Bootstrap block copied from
       an-admin-api and was never the brand's. */
    --bs-btn-bg: var(--mud-palette-primary) !important;
    --bs-btn-hover-bg: var(--mud-palette-primary-darken) !important;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--mud-palette-primary) !important;
}

.nav {
    --bs-nav-link-color: var(--mud-palette-primary) !important;
    --bs-nav-link-hover-color: var(--mud-palette-primary-darken) !important;
}

.text-center {
    text-align: center;
}

.w-100 {
    width: 100%;
}


/* Markdown Content Styles */
.markdown-content {
    line-height: 1.6;
    color: var(--mud-palette-text-primary);
}

.markdown-content h1 {
    font-size: 27px;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.markdown-content h2 {
    font-size: 27px;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    font-weight: 500;
}

.markdown-content h3 {
    font-size: 20px;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.markdown-content p {
    margin-bottom: 1rem;
}

.markdown-content ul, .markdown-content ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.markdown-content li {
    margin-bottom: 0.25rem;
}

.markdown-content code {
    background-color: var(--mud-palette-background-grey);
    padding: 0.125rem 0.25rem;
    border-radius: var(--an-radius-xs);
    font-family: monospace;
}

.markdown-content pre {
    background-color: var(--mud-palette-background-grey);
    padding: 1rem;
    border-radius: var(--an-radius-sm);
    overflow-x: auto;
    margin-bottom: 1rem;
}

.markdown-content blockquote {
    border-left: 4px solid var(--mud-palette-primary);
    padding-left: 1rem;
    margin: 1rem 0;
}

.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.markdown-content th, .markdown-content td {
    border: 1px solid var(--mud-palette-divider);
    padding: 0.5rem;
    text-align: left;
}

.markdown-content th {
    background-color: var(--mud-palette-background-grey);
    font-weight: 500;
}

.markdown-content a {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.markdown-content a:hover {
    text-decoration: underline;
}

/* ===================================================================
   ProposalHub Client Viewer – Mobile-Responsive Styles
   Minimum supported viewport: 320px
   =================================================================== */

/* --- Utility Classes --- */
.ph-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;
}

.ph-hide-mobile {
    display: none;
}

@media (min-width: 768px) {
    .ph-hide-mobile {
        display: inline-flex;
    }
}

/* Skip link for keyboard users */
.ph-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--an-red);
    color: #ffffff;
    padding: 8px 16px;
    z-index: 10000;
    font-size: 14px;
    text-decoration: none;
}

.ph-skip-link:focus {
    top: 0;
}

/* --- Brand values ---

   There are none in this file. Every colour, radius, spacing step, elevation,
   duration, and measure resolves to an --an-* token declared in
   wwwroot/css/tokens.css, which is linked before this stylesheet.

   The transitional alias layer feature 008 introduced is GONE (009 FR-002).
   It peaked at 379 usages against 134 canonical ones — two names for one value,
   which is the drift the token contract exists to prevent. Do not reintroduce it,
   and do not restate a literal here: a second source of truth wearing the costume
   of a first is exactly what the brand gate rejects.

   Contract: specs/009-style-guide-rebrand/contracts/brand-token-contract.md
   ------------------------------------------------------------------------- */

/* --- Global App Layout --- */
.ph-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ph-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--an-space-2) var(--an-space-4);
    border-bottom: 1px solid var(--an-border-2);
    background: var(--an-white);
    flex-wrap: wrap;
    gap: var(--an-space-2);
}

.ph-header-brand {
    flex-shrink: 0;
}

.ph-logo {
    text-decoration: none;
    color: var(--an-gray-1);
    font-weight: 700;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: var(--an-space-1);
}

.ph-logo-divider {
    color: var(--an-gray-4);
    font-weight: 300;
}

.ph-logo-product {
    color: var(--an-red);
}

.ph-header-nav {
    display: flex;
    gap: var(--an-space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ph-nav-link {
    text-decoration: none;
    color: var(--an-gray-4);
    padding: var(--an-space-2) var(--an-space-2);
    min-height: var(--an-tap-target);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 14px;
}

.ph-nav-link:hover {
    color: var(--an-red);
}

.ph-main {
    flex: 1;
}

/* --- Buttons --- */
.ph-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--an-radius-sm);
    cursor: pointer;
    font-size: var(--an-font-body);
    font-weight: 500;
    min-height: var(--an-tap-target);
    min-width: var(--an-tap-target);
    padding: var(--an-space-2) var(--an-space-4);
    text-decoration: none;
    transition: background-color var(--an-duration-fast) var(--an-ease), border-color var(--an-duration-fast) var(--an-ease);
    line-height: 1.4;
    white-space: nowrap;
}

.ph-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ph-btn-sm {
    font-size: 14px;
    min-height: var(--an-tap-target);
    padding: var(--an-space-1) var(--an-space-2);
}

.ph-btn-primary {
    background: var(--an-red);
    color: #fff;
}
.ph-btn-primary:hover:not(:disabled) {
    background: var(--an-red-deep);
}

.ph-btn-success {
    background: var(--an-success);
    color: #fff;
}
.ph-btn-success:hover:not(:disabled) {
    background: var(--an-success-hover);
}

.ph-btn-danger {
    background: var(--an-error);
    color: #fff;
}
.ph-btn-danger:hover:not(:disabled) {
    background: var(--an-red-deep);
}

.ph-btn-secondary {
    background: var(--an-gray-1);
    color: #fff;
}
.ph-btn-secondary:hover:not(:disabled) {
    background: var(--an-ink);
}

.ph-btn-outline {
    background: transparent;
    border-color: var(--an-border-2);
    color: var(--an-gray-1);
}
.ph-btn-outline:hover:not(:disabled) {
    background: var(--an-border);
}

.ph-btn-link {
    background: none;
    border: none;
    color: var(--an-red);
    padding: 0;
    min-height: auto;
    min-width: auto;
    text-decoration: underline;
    font-weight: 400;
}

/* --- Form Elements --- */
.ph-input {
    display: block;
    width: 100%;
    min-height: var(--an-tap-target);
    padding: var(--an-space-2) var(--an-space-4);
    font-size: 16px; /* Prevents iOS zoom on focus */
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-sm);
    background: var(--an-white);
    color: var(--an-gray-1);
    box-sizing: border-box;
}

.ph-input:focus {
    outline: 2px solid var(--an-red);
    outline-offset: -1px;
    border-color: var(--an-red);
}

.ph-textarea {
    resize: vertical;
    min-height: 80px;
}

.ph-form-group {
    margin-bottom: var(--an-space-4);
}

.ph-form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--an-space-1);
    font-size: 14px;
    color: var(--an-gray-1);
}

.ph-required {
    color: var(--an-error);
}

.ph-char-count,
.ph-char-counter {
    font-size: 12px;
    color: var(--an-gray-4);
    text-align: right;
    margin-top: var(--an-space-1);
}

.ph-char-warning {
    color: var(--an-error);
}

/* --- Alerts --- */
.ph-alert {
    padding: var(--an-space-2) var(--an-space-4);
    border-radius: var(--an-radius-sm);
    margin-bottom: var(--an-space-4);
    font-size: 15px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ph-alert-success {
    background: var(--an-paper);
    border: 1px solid var(--an-border);
    border-left: 3px solid var(--an-success);
    color: var(--an-gray-1);
}

.ph-alert-error {
    background: var(--an-red-wash);
    border: 1px solid var(--an-red-tint);
    border-left: 3px solid var(--an-red);
    color: var(--an-gray-1);
}

/* FR-011: never colour alone. The glyph survives a monochrome display, a
   colour-blind reader, and a client that strips background colours. */
.ph-alert-success::before { content: "\2713\00a0"; color: var(--an-success); font-weight: 700; }
.ph-alert-error::before   { content: "\26a0\00a0"; color: var(--an-red); font-weight: 700; }

/* --- Badges / Tags --- */
.ph-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: var(--an-radius-sm);
    white-space: nowrap;
}
.ph-badge-warning {
    background: var(--an-paper);
    border: 1px solid var(--an-gray-5);
    color: var(--an-gray-1);
}
.ph-badge-warning::before { content: "\26a0\00a0"; color: var(--an-gray-4); }
.ph-badge-success {
    background: var(--an-paper);
    border: 1px solid var(--an-success);
    color: var(--an-gray-1);
}
.ph-badge-success::before { content: "\2713\00a0"; color: var(--an-success); }
.ph-badge-default {
    background: var(--an-paper);
    border: 1px solid var(--an-border-2);
    color: var(--an-gray-3);
}

.ph-tag {
    display: inline-block;
    font-size: 12px;
    padding: 0.125rem 0.5rem;
    border-radius: var(--an-radius-xs);
    margin: 0.125rem;
    white-space: nowrap;
}
.ph-tag-industry,
.ph-tag-project {
    background: var(--an-red-wash);
    color: var(--an-red);
}

/* The guide's mono technology tag. Purple was the most visible off-palette
   deviation in the client-facing viewer. 11px is legal here: the 12px floor
   governs sans-serif copy, and this is a separate register (principle 27). */
.ph-tag-technology,
.ph-tag-tech {
    background: transparent;
    border: 1px solid var(--an-border-2);
    color: var(--an-gray-3);
    font-family: var(--an-font-mono);
    font-size: 11px;
    letter-spacing: 0;
}

/* --- Spinner / Loading --- */
.ph-spinner {
    width: 2rem;
    height: 2rem;
    border: 3px solid var(--an-border-2);
    border-top-color: var(--an-red);
    border-radius: var(--an-radius-pill);
    animation: ph-spin 0.8s linear infinite;
    margin: 0 auto var(--an-space-4);
}

@keyframes ph-spin {
    to { transform: rotate(360deg); }
}

.ph-loading {
    text-align: center;
    padding: var(--an-space-8);
    color: var(--an-gray-4);
}

.ph-empty-state {
    text-align: center;
    padding: var(--an-space-8);
    color: var(--an-gray-4);
}

/* ===================================================================
   Viewer Layout (ViewerLayout.razor) — No admin chrome
   =================================================================== */
.viewer-layout {
    min-height: 100vh;
    background: var(--an-paper);
}

/* ===================================================================
   Home Page (Home.razor)
   =================================================================== */
.ph-home-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--an-paper);
}

.ph-home-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}

.ph-home-hero {
    text-align: center;
    max-width: 800px;
    width: 100%;
}

.ph-home-title {
    font-size: 46px;
    font-weight: 800;
    color: var(--an-gray-1);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
}

.ph-home-subtitle {
    font-size: 26px;
    color: var(--an-red);
    font-weight: 600;
    margin: 0 0 2.5rem;
}

.ph-home-screenshot {
    margin: 0 auto 2.5rem;
    max-width: 680px;
    width: 100%;
}

.ph-home-screenshot-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--an-border);
    border: 2px dashed var(--an-border-2);
    border-radius: var(--an-radius-lg);
    padding: 3rem 2rem;
    min-height: 300px;
    color: var(--an-gray-4);
    font-size: 15px;
    font-weight: 500;
}

.ph-home-screenshot-img {
    width: 100%;
    height: auto;
    border-radius: var(--an-radius-lg);
    box-shadow: var(--an-shadow-card);
}

.ph-home-description {
    font-size: 20px;
    color: var(--an-gray-3);
    line-height: 1.7;
    margin: 0 auto;
    max-width: 600px;
}

.ph-home-footer {
    text-align: center;
    padding: 1.5rem;
    font-size: 14px;
    color: var(--an-gray-5);
}

/* Home page responsive */
@media (max-width: 600px) {
    .ph-home-title {
        font-size: 46px;
    }
    .ph-home-subtitle {
        font-size: 16px;
        margin-bottom: 1.5rem;
    }
    .ph-home-content {
        padding: 2rem 1.25rem;
    }
    .ph-home-screenshot-placeholder {
        min-height: 200px;
        padding: 2rem 1rem;
    }
    .ph-home-description {
        font-size: 16px;
    }
}

/* ===================================================================
   Viewer Page Layout (ViewerPage.razor)
   =================================================================== */
.ph-viewer-page {
    max-width: 100%;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

/* Split layout: AI chat left 1/3, PDF viewer right 2/3 */
.ph-viewer-split {
    display: flex;
    flex: 1;
    min-height: 0; /* Critical: allows flex children to shrink and scroll */
}

.ph-viewer-chat-panel {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    display: flex;
    flex-direction: column;
    background: var(--an-white);
    overflow: hidden; /* Children handle their own scroll */
}

/* Draggable resize handle between chat and PDF panels */
.ph-resize-handle {
    flex: 0 0 6px;
    cursor: col-resize;
    background: var(--an-border-2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    touch-action: none;
    transition: background-color var(--an-duration-fast) var(--an-ease);
}

.ph-resize-handle:hover,
.ph-resize-handle.active {
    background: var(--an-red);
}

.ph-resize-handle-grip {
    width: 2px;
    height: 32px;
    border-left: 1px solid rgba(255,255,255,0.5);
    border-right: 1px solid rgba(255,255,255,0.5);
    opacity: 0;
    transition: opacity var(--an-duration-fast) var(--an-ease);
}

.ph-resize-handle:hover .ph-resize-handle-grip,
.ph-resize-handle.active .ph-resize-handle-grip {
    opacity: 1;
}

/* During drag, prevent iframes from stealing pointer events */
.ph-viewer-split.ph-resizing iframe,
.ph-viewer-split.ph-resizing object,
.ph-viewer-split.ph-resizing embed {
    pointer-events: none;
}

.ph-viewer-pdf-panel {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Children handle their own scroll */
}

/* Mobile chat FAB + popup (hidden on desktop) */
.ph-mobile-chat-fab,
.ph-mobile-chat-overlay {
    display: none;
}


/* Chat title: short version hidden on desktop, shown on mobile */
.ph-chat-title-short {
    display: none;
}

/* Mobile: PDF takes full width, chat becomes FAB + popup */
@media (max-width: 767px) {
    .ph-viewer-page {
        height: auto;
        min-height: 100vh;
        overflow-y: auto;
    }
    .ph-viewer-split {
        flex-direction: column;
        height: auto;
    }
    .ph-viewer-pdf-panel {
        flex: none;
        min-height: auto;
    }

    /* Hide the inline chat panel on mobile — use FAB instead */
    .ph-viewer-chat-panel.ph-desktop-only {
        display: none !important;
    }

    /* Show mobile chat FAB */
    .ph-mobile-chat-fab {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
        border-radius: var(--an-radius-pill);
        background: var(--an-red);
        color: #fff;
        border: none;
        box-shadow: var(--an-shadow-red);
        cursor: pointer;
        z-index: 1000;
        transition: transform var(--an-duration-fast) var(--an-ease), background var(--an-duration-fast) var(--an-ease);
    }
    .ph-mobile-chat-fab:active {
        transform: scale(0.92);
    }
    .ph-mobile-chat-fab.open {
        background: var(--an-gray-3);
    }

    /* Mobile chat overlay */
    .ph-mobile-chat-overlay {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        z-index: 999;
        pointer-events: none;
        opacity: 0;
        transition: opacity var(--an-duration-base) var(--an-ease);
    }
    .ph-mobile-chat-overlay.open {
        pointer-events: auto;
        opacity: 1;
    }
    .ph-mobile-chat-overlay::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        transition: opacity var(--an-duration-base) var(--an-ease);
    }
    .ph-mobile-chat-overlay.open::before {
        opacity: 1;
    }

    /* Mobile chat popup window */
    .ph-mobile-chat-popup {
        position: absolute;
        bottom: 84px;
        left: 12px;
        right: 12px;
        height: 65vh;
        max-height: calc(100vh - 100px);
        background: var(--an-white);
        border-radius: var(--an-radius-lg);
        box-shadow: var(--an-shadow-panel);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transform: translateY(20px) scale(0.95);
        transition: transform var(--an-duration-base) var(--an-ease), opacity var(--an-duration-base) var(--an-ease);
        opacity: 0;
    }
    .ph-mobile-chat-overlay.open .ph-mobile-chat-popup {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    /* Adjust chat component inside popup */
    .ph-mobile-chat-popup .ph-chat-inline {
        height: 100%;
        border-radius: var(--an-radius-lg);
    }

    /* Hide thumbnails and fullscreen buttons on mobile */
    .ph-pdf-toolbar .ph-hide-mobile {
        display: none !important;
    }
    .ph-pdf-toolbar button[aria-label="Enter fullscreen"],
    .ph-pdf-toolbar button[aria-label="Exit fullscreen"] {
        display: none !important;
    }

    /* Mobile tabs: wrap into rows so all tabs are visible */
    .ph-viewer-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
    }
    .ph-tab {
        font-size: 13px;
        padding: 8px 12px;
        white-space: nowrap;
    }

    /* Chat: shorter title and icon-only buttons on mobile */
    .ph-chat-title-full {
        display: none;
    }
    .ph-chat-title-short {
        display: inline;
    }
    .ph-chat-btn-label {
        display: none;
    }

    /* Chat input: prevent iOS zoom */
    .ph-chat-input {
        font-size: 16px;
    }
    .ph-chat-input-wrapper {
        align-items: center;
    }

    /* Version notice: allow wrapping */
    .ph-version-notice-inline {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
}

.ph-viewer-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--an-space-6);
    background: var(--an-paper);
}

.ph-viewer-error {
    text-align: center;
    padding: var(--an-space-8);
    color: var(--an-error);
}

.ph-viewer-header {
    background: var(--an-ink);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: var(--an-space-4) var(--an-space-4);
    flex-shrink: 0;
}

.ph-viewer-header-content {
    display: flex;
    align-items: center;
    gap: var(--an-space-6);
    flex-wrap: wrap;
}

.ph-viewer-brand {
    display: flex;
    align-items: center;
    gap: var(--an-space-2);
    flex-shrink: 0;
}

.ph-viewer-logo-img {
    height: 40px;   /* nav standard; 48px is the footer height */
    width: auto;
}

.ph-viewer-brand-text {
    display: flex;
    align-items: baseline;
    gap: 0.35em;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.ph-viewer-brand-separator {
    opacity: 0.5;
    font-weight: 300;
}

.ph-viewer-brand-product {
    opacity: 0.85;
    font-weight: 400;
}

.ph-viewer-confidential {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    background: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 0.325rem var(--an-space-4);
    text-align: center;
}

.ph-viewer-confidential svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.ph-viewer-proposal-info {
    display: flex;
    align-items: baseline;
    gap: var(--an-space-4);
    flex-wrap: wrap;
    min-width: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    padding-left: var(--an-space-6);
}

.ph-viewer-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ph-viewer-client {
    font-size: 15px;
    opacity: 0.85;
    white-space: nowrap;
}

/* --- Share Button (viewer header) --- */
.ph-viewer-share-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--an-radius-md);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--an-duration-fast) var(--an-ease), border-color var(--an-duration-fast) var(--an-ease);
    white-space: nowrap;
    flex-shrink: 0;
}

.ph-viewer-share-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #fff;
}

.ph-viewer-share-btn:active {
    transform: scale(0.97);
}

/* --- CTA Action Buttons (Accept / Request Changes / Decline) --- */
.ph-viewer-cta-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* When share button is also present, don't double up on margin-left */
.ph-viewer-share-btn + .ph-viewer-cta-buttons {
    margin-left: 0;
}

.ph-cta-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--an-radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--an-duration-fast) var(--an-ease), border-color var(--an-duration-fast) var(--an-ease), transform var(--an-duration-fast) var(--an-ease);
    white-space: nowrap;
    color: #fff;
}

.ph-cta-btn:active {
    transform: scale(0.97);
}

.ph-cta-accept {
    background: rgba(var(--an-success-rgb), 0.85);
    border-color: rgba(255, 255, 255, 0.7);
}

.ph-cta-accept:hover {
    background: rgba(var(--an-success-rgb), 1);
    border-color: #fff;
}

.ph-cta-changes {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.6);
}

.ph-cta-changes:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: #fff;
}

.ph-cta-decline {
    background: rgba(var(--an-red-rgb), 0.7);
    border-color: rgba(255, 255, 255, 0.5);
}

.ph-cta-decline:hover {
    background: rgba(var(--an-red-rgb), 0.9);
    border-color: #fff;
}

/* --- Desktop Actions Dropdown (Proposal Actions) --- */
.ph-desktop-actions {
    position: relative;
    align-self: center;
    margin-left: auto;
    flex-shrink: 0;
}

.ph-viewer-share-btn + .ph-desktop-actions {
    margin-left: 0;
}

.ph-desktop-actions-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--an-radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    transition: background var(--an-duration-fast) var(--an-ease), border-color var(--an-duration-fast) var(--an-ease);
}

.ph-desktop-actions-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #fff;
}

.ph-desktop-actions-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.ph-desktop-actions-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border-radius: var(--an-radius-sm);
    box-shadow: var(--an-shadow-panel);
    min-width: 220px;
    z-index: 100;
    overflow: hidden;
}

.ph-desktop-action-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--an-gray-1);
    cursor: pointer;
    transition: background var(--an-duration-fast) var(--an-ease);
}

.ph-desktop-action-item:hover {
    background: var(--an-paper);
}

.ph-desktop-action-accept {
    color: var(--an-success);
}

.ph-desktop-action-decline {
    color: var(--an-red);
}

/* --- Mobile/Desktop Visibility Utilities --- */
.ph-mobile-only {
    display: none !important;
}

/* --- Mobile Actions Dropdown --- */
.ph-mobile-actions {
    position: relative;
    align-self: center;
}

.ph-mobile-actions-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--an-radius-md);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    transition: background var(--an-duration-fast) var(--an-ease), border-color var(--an-duration-fast) var(--an-ease);
}

.ph-mobile-actions-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #fff;
}

.ph-mobile-actions-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.ph-mobile-actions-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #fff;
    border-radius: var(--an-radius-sm);
    box-shadow: var(--an-shadow-panel);
    min-width: 200px;
    z-index: 100;
    overflow: hidden;
}

.ph-mobile-action-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 1rem;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--an-gray-1);
    cursor: pointer;
    transition: background var(--an-duration-fast) var(--an-ease);
    text-align: left;
}

.ph-mobile-action-item:hover {
    background: var(--an-paper);
}

.ph-mobile-action-item + .ph-mobile-action-item {
    border-top: 1px solid var(--an-border);
}

.ph-mobile-action-accept svg {
    color: var(--an-success);
}

.ph-mobile-action-decline svg {
    color: var(--an-red);
}

/* --- Share Modal Overlay --- */
.ph-share-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.ph-share-modal {
    background: #fff;
    border-radius: var(--an-radius-lg);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--an-shadow-panel);
    display: flex;
    flex-direction: column;
}

.ph-share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--an-header-gradient);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    border-radius: var(--an-radius-lg) var(--an-radius-lg) 0 0;
}

.ph-share-modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 16px;
    font-weight: 600;
}

.ph-share-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--an-radius-sm);
    display: flex;
    align-items: center;
}

.ph-share-close-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
}

.ph-share-modal-body {
    padding: 1.25rem;
}

.ph-share-description {
    color: var(--an-gray-4);
    font-size: 14px;
    margin: 0 0 1rem;
    line-height: 1.5;
}

.ph-share-recipient-row {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    align-items: flex-end;
}

.ph-share-field {
    flex: 1;
    min-width: 0;
}

.ph-share-field-email {
    flex: 1.4;
}

.ph-share-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--an-gray-3);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ph-share-required {
    color: var(--an-red);
}

.ph-share-field input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-md);
    font-size: 15px;
    color: var(--an-gray-1);
    background: var(--an-paper);
    transition: border-color var(--an-duration-fast) var(--an-ease), box-shadow var(--an-duration-fast) var(--an-ease);
    box-sizing: border-box;
}

.ph-share-field input:focus {
    border-color: var(--an-red);
    box-shadow: 0 0 0 3px rgba(var(--an-red-rgb), 0.1);
    background: #fff;
}

.ph-share-field input::placeholder,
.ph-share-field textarea::placeholder {
    color: var(--an-gray-4);
}

.ph-share-note-field {
    margin-top: 0.75rem;
}

.ph-share-field textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-md);
    font-size: 15px;
    font-family: inherit;
    color: var(--an-gray-1);
    background: var(--an-paper);
    transition: border-color var(--an-duration-fast) var(--an-ease), box-shadow var(--an-duration-fast) var(--an-ease);
    box-sizing: border-box;
    resize: vertical;
}

.ph-share-field textarea:focus {
    border-color: var(--an-red);
    box-shadow: 0 0 0 3px rgba(var(--an-red-rgb), 0.1);
    background: #fff;
}

.ph-share-remove-btn {
    background: none;
    border: none;
    color: var(--an-gray-5);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--an-radius-sm);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.ph-share-remove-btn:hover {
    color: var(--an-red);
    background: var(--an-red-wash);
}

.ph-share-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    color: var(--an-red);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 0.375rem 0;
    margin-bottom: 0.5rem;
}

.ph-share-add-btn:hover {
    text-decoration: underline;
}

.ph-share-error {
    color: var(--an-red);
    font-size: 13px;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    background: var(--an-red-wash);
    border-radius: var(--an-radius-sm);
}

.ph-share-success {
    color: var(--an-success-hover);
    font-size: 14px;
    font-weight: 600;
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    background: var(--an-paper);
    border-radius: var(--an-radius-sm);
}

.ph-share-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--an-border);
}

.ph-share-cancel-btn {
    padding: 0.5rem 1.25rem;
    background: #fff;
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-md);
    color: var(--an-gray-3);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.ph-share-cancel-btn:hover {
    background: var(--an-paper);
}

.ph-share-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    background: var(--an-red);
    border: none;
    border-radius: var(--an-radius-md);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--an-duration-fast) var(--an-ease);
}

.ph-share-send-btn:hover:not(:disabled) {
    background: var(--an-red-deep);
}

.ph-share-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Mobile responsive share */
@media (max-width: 479px) {
    .ph-share-recipient-row {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
        position: relative;
        padding-right: 2rem;
    }

    .ph-share-field-email {
        flex: 1;
    }

    .ph-share-remove-btn {
        position: absolute;
        top: 0;
        right: 0;
    }

    .ph-share-modal {
        max-width: 100%;
        border-radius: var(--an-radius-lg);
    }

    .ph-share-modal-footer {
        flex-direction: column;
    }

    .ph-share-cancel-btn,
    .ph-share-send-btn {
        width: 100%;
        justify-content: center;
        padding: 0.625rem 1rem;
    }
}

/* Request New Link button on expired page */
.ph-request-link-btn {
    background-color: var(--an-red);
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: var(--an-radius-md);
    font-size: 16px;
    font-family: var(--an-font-sans);
    cursor: pointer;
    transition: background-color var(--an-duration-fast) var(--an-ease);
}

.ph-request-link-btn:hover:not(:disabled) {
    background-color: var(--an-red-deep);
}

.ph-request-link-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ph-viewer-note {
    background: var(--an-paper);
    border-left: 4px solid var(--an-gray-4);
    padding: var(--an-space-2) var(--an-space-4);
    margin: 0;
    font-size: 15px;
    flex-shrink: 0;
}

/* --- Section Tabs --- */
.ph-viewer-tabs {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 2px solid var(--an-border-2);
    background: var(--an-white);
    flex-shrink: 0;
}

.ph-viewer-tabs::-webkit-scrollbar {
    display: none;
}

.ph-tab {
    flex-shrink: 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--an-space-2) var(--an-space-4);
    font-size: 14px;
    font-weight: 500;
    color: var(--an-gray-3);
    cursor: pointer;
    min-height: var(--an-tap-target);
    white-space: nowrap;
    margin-bottom: -2px;
    transition: color var(--an-duration-fast) var(--an-ease), border-color var(--an-duration-fast) var(--an-ease);
}

.ph-tab:hover {
    color: var(--an-gray-1);
}

.ph-tab.active {
    color: var(--an-red);
    border-bottom-color: var(--an-red);
}

.ph-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background-color: var(--an-red);
    border-radius: var(--an-radius-sm);
    line-height: 1;
}

/* --- Viewer Content Area (Team/Questions tabs) --- */
.ph-viewer-content {
    padding: var(--an-space-4);
    box-sizing: border-box;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* --- Viewer Footer --- */
.ph-viewer-footer {
    flex-shrink: 0;
    background: var(--an-gray-1);
    color: rgba(255, 255, 255, 0.75);
    padding: 0.375rem var(--an-space-6);
    border-top: 3px solid var(--an-red);
}

.ph-viewer-footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--an-space-4);
    flex-wrap: wrap;
}

.ph-viewer-footer-confidential {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.3;
    white-space: nowrap;
}

.ph-viewer-footer-confidential svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.ph-viewer-footer-brand {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.02em;
    white-space: nowrap;
    margin-left: auto;
}

@media (max-width: 767px) {
    .ph-viewer-footer-content {
        flex-direction: column;
        text-align: center;
    }

    .ph-viewer-footer-confidential {
        white-space: normal;
    }

    .ph-viewer-footer-brand {
        margin-left: 0;
    }
}

/* --- About Section --- */
.ph-about-section {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ph-about-content {
    line-height: 1.7;
    font-size: 16px;
}

.ph-about-content img {
    max-width: 100%;
    height: auto;
}

/* The viewer's section headings adopt the guide's section-label device (009
   FR-022). Applied to the shared class rather than to each component, so every
   section title inherits it and a new one cannot miss it. */
.ph-section-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--an-red);
    margin-bottom: var(--an-space-4);
}

.ph-section-title::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin-bottom: var(--an-space-2);
    background: var(--an-red);
}

/* ===================================================================
   Proposal Viewer (ProposalViewer.razor)
   =================================================================== */
.ph-proposal-viewer {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Video embed - responsive 16:9 */
.ph-proposal-video {
    margin-bottom: var(--an-space-4);
}

.ph-video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: var(--an-radius-lg);
}

.ph-video-iframe {
    position: absolute;
    top: -40px;
    left: 0;
    width: 100%;
    height: calc(100% + 100px);
    border: none;
    z-index: 1;
}

/* Video loading placeholder — sits behind the iframe */
.ph-video-loading-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--an-paper);
    border-radius: var(--an-radius-lg);
    z-index: 0;
}

.ph-video-loading-placeholder .ph-branded-message-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ph-video-loading-placeholder .ph-branded-message-text {
    color: var(--an-gray-4);
    font-size: 16px;
    font-weight: 500;
}

/* Intro Video tab section */
.ph-intro-video-section {
    max-width: 960px;
    margin: 0 auto;
}

/* Video intro overlay — full-screen on first view */
.ph-video-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.ph-video-overlay-content {
    width: 100%;
    max-width: 960px;
    background: #fff;
    border-radius: var(--an-radius-lg);
    overflow: hidden;
    box-shadow: var(--an-shadow-panel);
}

.ph-video-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--an-header-gradient);
    color: white;
}

.ph-video-overlay-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 16px;
}

.ph-video-overlay-close {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--an-radius-sm);
    display: flex;
    align-items: center;
    transition: background var(--an-duration-fast) var(--an-ease);
}

.ph-video-overlay-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ph-video-overlay-body {
    padding: 20px;
    background: var(--an-ink);
}

.ph-video-overlay-footer {
    display: flex;
    justify-content: center;
    padding: 16px 20px;
    background: #fff;
}

.ph-video-dismiss-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 28px;
    border: none;
    border-radius: var(--an-radius-md);
    background: var(--an-red);
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--an-duration-fast) var(--an-ease);
}

.ph-video-dismiss-btn:hover {
    background: var(--an-red-deep);
}

/* Version bar */
.ph-proposal-version-bar {
    margin-bottom: var(--an-space-4);
}

.ph-proposal-pdf {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ===================================================================
   Version Selector (VersionSelector.razor)
   =================================================================== */
.ph-version-selector {
    display: flex;
    flex-direction: column;
    gap: var(--an-space-2);
}

.ph-version-notice {
    background: var(--an-red-wash);
    border: 1px solid var(--an-red-tint);
    border-radius: var(--an-radius-sm);
    padding: var(--an-space-2) var(--an-space-4);
    font-size: 14px;
    color: var(--an-red);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--an-space-2);
}

.ph-version-dropdown-container {
    display: flex;
    align-items: center;
    gap: var(--an-space-2);
    flex-wrap: wrap;
}

.ph-version-label {
    font-weight: 500;
    font-size: 14px;
    flex-shrink: 0;
}

.ph-version-dropdown {
    min-height: var(--an-tap-target);
    padding: var(--an-space-2);
    font-size: 16px;
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-sm);
    background: var(--an-white);
    max-width: 100%;
}

/* ===================================================================
   PDF Viewer (PdfViewer.razor)
   =================================================================== */
.ph-pdf-viewer {
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.ph-pdf-viewer.ph-pdf-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    border-radius: 0;
    border: none;
    background: var(--an-white);
}

/* PDF Toolbar */
.ph-pdf-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--an-space-2);
    padding: var(--an-space-1) var(--an-space-2);
    background: var(--an-border);
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid var(--an-border-2);
    align-items: center;
}

.ph-pdf-toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--an-space-2);
    flex-wrap: wrap;
}

.ph-pdf-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--an-space-1);
    flex-wrap: wrap;
}

.ph-version-notice-inline {
    font-size: 12px;
    color: var(--an-error);
}

.ph-pdf-toolbar-nav {
    display: flex;
    align-items: center;
    gap: var(--an-space-1);
    flex-shrink: 0;
}

.ph-pdf-page-info {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 14px;
}

.ph-pdf-page-input {
    width: 3rem;
    min-height: 2rem;
    text-align: center;
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-sm);
    font-size: 14px;
    padding: 0 0.25rem;
}

.ph-pdf-toolbar-zoom {
    display: flex;
    align-items: center;
    gap: var(--an-space-1);
    flex-shrink: 0;
}

.ph-pdf-zoom-level {
    font-size: 14px;
    min-width: 2.5rem;
    text-align: center;
}

.ph-pdf-toolbar-actions {
    display: flex;
    align-items: center;
    gap: var(--an-space-1);
    margin-left: auto;
    flex-wrap: wrap;
}

/* PDF Content Area */
.ph-pdf-content {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.ph-pdf-thumbnails {
    width: 120px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid var(--an-border-2);
    background: var(--an-border);
}

.ph-pdf-canvas-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--an-gray-3);
}

.ph-pdf-page {
    flex-shrink: 0;
    box-shadow: var(--an-shadow-card);
}

.ph-pdf-page canvas {
    display: block;
}

.ph-pdf-loading,
.ph-pdf-error {
    text-align: center;
    padding: var(--an-space-8);
    color: var(--an-gray-4);
}

.ph-pdf-error {
    color: var(--an-error);
}

/* ===================================================================
   Chat Panel (ServerChatPanel.razor) – inline, always visible
   =================================================================== */
.ph-chat-inline {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.ph-chat-inline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--an-space-2) var(--an-space-4);
    background: var(--an-header-gradient);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    flex-shrink: 0;
}

.ph-chat-inline-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    flex-shrink: 0;
}


.ph-chat-header-actions {
    display: flex;
    align-items: center;
    gap: var(--an-space-2);
}

/* Version badge: informational, non-interactive */
.ph-chat-version-badge {
    font-size: 12px;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.125rem 0.375rem;
    border-radius: var(--an-radius-sm);
    border: none;
    letter-spacing: 0.02em;
}

/* Model selector button in chat header */
.ph-chat-model-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    padding: 0.2rem 0.5rem;
    border-radius: var(--an-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: background var(--an-duration-fast) var(--an-ease), border-color var(--an-duration-fast) var(--an-ease);
    white-space: nowrap;
}

.ph-chat-model-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.ph-chat-model-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ph-chat-model-btn svg {
    flex-shrink: 0;
}

/* Action buttons (Clear, Close): interactive, distinct from badge */
.ph-chat-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--an-red-deep);
    font-size: 12px;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: var(--an-radius-sm);
    border: none;
    cursor: pointer;
    transition: background var(--an-duration-fast) var(--an-ease), transform var(--an-duration-fast) var(--an-ease);
    min-height: 28px;
}

.ph-chat-action-btn:hover {
    background: #fff;
    transform: scale(1.05);
}

.ph-chat-action-btn:active {
    transform: scale(0.95);
}

/* Messages */
.ph-chat-messages {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--an-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--an-space-4);
}

.ph-chat-loading,
.ph-chat-empty {
    text-align: center;
    padding: var(--an-space-6);
    color: var(--an-gray-4);
    font-size: 15px;
}

.ph-chat-welcome {
    padding: 1.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.ph-chat-welcome-icon {
    color: var(--an-red);
    opacity: 0.8;
}

.ph-chat-welcome-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--an-gray-1);
}

.ph-chat-welcome-description {
    margin: 0;
    font-size: 14px;
    color: var(--an-gray-4);
    text-align: center;
    line-height: 1.5;
}

.ph-chat-welcome-suggestions {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ph-chat-welcome-suggestions li {
    font-size: 13px;
    color: var(--an-gray-3);
    padding: 0.5rem 0.75rem;
    background: var(--an-paper);
    border-radius: var(--an-radius-sm);
    line-height: 1.4;
}

.ph-chat-welcome-suggestions li::before {
    content: "💬 ";
    font-size: 12px;
}

.ph-chat-welcome-note {
    margin: 0.5rem 0 0;
    font-size: 13px;
    color: var(--an-gray-4);
    text-align: center;
    line-height: 1.5;
    padding: 0.625rem 0.75rem;
    background: var(--an-red-wash);
    border-left: 3px solid var(--an-red);
    border-radius: 0 var(--an-radius-sm) var(--an-radius-sm) 0;
    align-self: stretch;
}

.ph-chat-welcome-link {
    color: var(--an-red);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.ph-chat-welcome-link:hover {
    color: var(--an-red-deep);
}

.ph-chat-message {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ph-chat-user {
    align-self: flex-end;
}

.ph-chat-user .ph-chat-message-content {
    background: var(--an-red);
    color: #fff;
    border-radius: var(--an-radius-md) var(--an-radius-md) var(--an-radius-sm) var(--an-radius-md);
    padding: var(--an-space-2) var(--an-space-4);
}

.ph-chat-assistant .ph-chat-message-content {
    background: var(--an-border);
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-md) var(--an-radius-md) var(--an-radius-md) var(--an-radius-sm);
    padding: var(--an-space-2) var(--an-space-4);
}

.ph-chat-message-header {
    display: flex;
    align-items: center;
    gap: var(--an-space-2);
    margin-bottom: var(--an-space-1);
}

.ph-chat-role {
    font-size: 12px;
    font-weight: 600;
    color: var(--an-gray-4);
}

.ph-chat-copy-btn {
    margin-left: auto;
    padding: 2px;
    background: none;
    border: none;
    color: var(--an-gray-4);
    cursor: pointer;
    opacity: 0.35;
    transition: opacity var(--an-duration-fast) var(--an-ease);
    line-height: 1;
    border-radius: var(--an-radius-sm);
}

.ph-chat-message:hover .ph-chat-copy-btn {
    opacity: 0.7;
}

.ph-chat-copy-btn:hover {
    opacity: 1 !important;
    color: var(--an-gray-1);
}

.ph-chat-msg-version {
    font-size: 12px;
    background: var(--an-border);
    padding: 0 0.25rem;
    border-radius: var(--an-radius-sm);
    color: var(--an-gray-4);
}

.ph-chat-message-content {
    font-size: 15px;
    line-height: 1.5;
}

/* Markdown content styling within chat messages */
.ph-chat-markdown p {
    margin: 0 0 0.5em 0;
}

.ph-chat-markdown p:last-child {
    margin-bottom: 0;
}

.ph-chat-markdown strong {
    font-weight: 600;
}

.ph-chat-markdown ul,
.ph-chat-markdown ol {
    margin: 0.25em 0 0.5em 0;
    padding-left: 1.5em;
}

.ph-chat-markdown li {
    margin-bottom: 0.2em;
}

.ph-chat-markdown h2,
.ph-chat-markdown h3,
.ph-chat-markdown h4 {
    margin: 0.75em 0 0.35em 0;
    font-weight: 600;
    line-height: 1.3;
}

.ph-chat-markdown h2 {
    font-size: 16px;
}

.ph-chat-markdown h3 {
    font-size: 16px;
}

.ph-chat-markdown h4 {
    font-size: 15px;
}

.ph-chat-markdown h2:first-child,
.ph-chat-markdown h3:first-child,
.ph-chat-markdown h4:first-child {
    margin-top: 0;
}

.ph-chat-markdown code {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.15em 0.35em;
    border-radius: var(--an-radius-xs);
    font-size: 14px;
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
}

.ph-chat-markdown pre {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.75em 1em;
    border-radius: var(--an-radius-sm);
    overflow-x: auto;
    margin: 0.5em 0;
}

.ph-chat-markdown pre code {
    background: none;
    padding: 0;
    font-size: 14px;
}

.ph-chat-markdown blockquote {
    border-left: 3px solid var(--an-red);
    margin: 0.5em 0;
    padding: 0.25em 0.75em;
    color: var(--an-gray-4);
}

.ph-chat-markdown table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.5em 0;
    font-size: 14px;
}

.ph-chat-markdown th,
.ph-chat-markdown td {
    border: 1px solid var(--an-border-2);
    padding: 0.35em 0.6em;
    text-align: left;
}

.ph-chat-markdown th {
    background: var(--an-border);
    font-weight: 600;
}

.ph-chat-markdown hr {
    border: none;
    border-top: 1px solid var(--an-border-2);
    margin: 0.75em 0;
}

.ph-chat-markdown img {
    max-width: 120px;
    height: auto;
    border-radius: var(--an-radius-lg);
    display: inline-block;
    vertical-align: middle;
    margin: 0.25em 0;
}

/* User messages: lighter code blocks to contrast blue background */
.ph-chat-user .ph-chat-markdown code {
    background: rgba(255, 255, 255, 0.2);
}

.ph-chat-user .ph-chat-markdown pre {
    background: rgba(255, 255, 255, 0.15);
}

.ph-chat-user .ph-chat-markdown blockquote {
    border-left-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.85);
}

.ph-chat-user .ph-chat-markdown th,
.ph-chat-user .ph-chat-markdown td {
    border-color: rgba(255, 255, 255, 0.3);
}

.ph-chat-user .ph-chat-markdown th {
    background: rgba(255, 255, 255, 0.1);
}

/* Mermaid chart rendering */
.ph-mermaid-chart {
    margin: var(--an-space-2) 0;
    padding: var(--an-space-2);
    background: #ffffff;
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-lg);
    overflow-x: auto;
    text-align: center;
}

.ph-mermaid-chart svg {
    max-width: 100%;
    height: auto;
}

.ph-mermaid-error {
    border-left: 3px solid var(--an-gray-4);
    opacity: 0.7;
}

.ph-mermaid-error-note {
    font-size: 12px;
    color: var(--an-gray-4);
    margin-top: 0.25rem;
}

.ph-chat-streaming .ph-chat-cursor {
    animation: ph-blink 1s step-end infinite;
}

@keyframes ph-blink {
    50% { opacity: 0; }
}

.ph-chat-page-ref {
    color: var(--an-red);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dashed var(--an-red);
}

.ph-chat-page-ref:hover {
    text-decoration: none;
    border-bottom-style: solid;
    opacity: 0.85;
}

.ph-chat-questions-ref {
    color: var(--an-red);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.ph-chat-questions-ref:hover {
    color: var(--an-red-deep);
}

/* Citations */
.ph-chat-citations {
    margin-top: var(--an-space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--an-space-1);
    align-items: center;
}

.ph-chat-citations-label {
    font-size: 12px;
    color: var(--an-gray-4);
    font-weight: 500;
}

.ph-chat-citation-link {
    background: var(--an-paper);
    border: 1px solid var(--an-border);
    border-radius: var(--an-radius-sm);
    color: var(--an-red);
    font-size: 12px;
    padding: 0.125rem 0.5rem;
    cursor: pointer;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
}

.ph-chat-citation-section {
    color: var(--an-gray-4);
}

/* Chat Context Notices */
.ph-chat-context-notice,
.ph-chat-context-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 12px;
    line-height: 1.3;
    border-top: 1px solid var(--an-border-2);
}

.ph-chat-context-notice {
    background: var(--an-paper);
    color: var(--an-gray-3);
}

.ph-chat-context-warning {
    background: var(--an-paper);
    color: var(--an-gray-1);
    border-left: 3px solid var(--an-gray-4);
}

.ph-chat-context-notice svg,
.ph-chat-context-warning svg {
    flex-shrink: 0;
}

.ph-chat-context-notice span,
.ph-chat-context-warning span {
    flex: 1;
}

.ph-chat-context-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: inherit;
    opacity: 0.6;
    flex-shrink: 0;
}

.ph-chat-context-dismiss:hover {
    opacity: 1;
}

.ph-chat-context-action {
    background: none;
    border: 1px solid currentColor;
    border-radius: var(--an-radius-sm);
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    color: inherit;
    white-space: nowrap;
    flex-shrink: 0;
}

.ph-chat-context-action:hover:not(:disabled) {
    background: rgba(0,0,0,0.05);
}

.ph-chat-context-action:disabled {
    opacity: 0.5;
    cursor: default;
}

.ph-chat-context-sep {
    font-size: 12px;
    opacity: 0.6;
    flex-shrink: 0;
}

/* Chat Input */
.ph-chat-input-area {
    padding: var(--an-space-2) var(--an-space-4);
    border-top: 1px solid var(--an-border-2);
    background: var(--an-white);
    flex-shrink: 0;
}

.ph-chat-input-wrapper {
    display: flex;
    gap: var(--an-space-2);
    align-items: center;
}

.ph-chat-input {
    flex: 1;
    height: var(--an-tap-target);
    min-height: var(--an-tap-target);
    max-height: var(--an-tap-target);
    padding: 0.5rem var(--an-space-4);
    font-size: 16px; /* Prevents iOS zoom */
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-md);
    resize: none;
    box-sizing: border-box;
    line-height: 1.4;
}

.ph-chat-input:focus {
    outline: 2px solid var(--an-red);
    outline-offset: -1px;
    border-color: var(--an-red);
}

.ph-chat-send {
    min-height: var(--an-tap-target);
    min-width: var(--an-tap-target);
    padding: var(--an-space-2);
    background: var(--an-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--an-radius-md);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
}

.ph-chat-send:hover:not(:disabled) {
    background: var(--an-red-deep);
}

.ph-chat-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ph-chat-send.ph-chat-cancel {
    background: var(--an-gray-1);
}

.ph-chat-send.ph-chat-cancel:hover {
    background: var(--an-gray-3);
}

.ph-chat-status {
    color: var(--an-gray-4);
    font-size: 14px;
}

.ph-chat-error-content {
    background: var(--an-red-wash);
    border: 1px solid var(--an-red-tint);
    border-radius: var(--an-radius-lg);
    padding: var(--an-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--an-space-2);
}

.ph-chat-error-content .ph-chat-error-icon {
    color: var(--an-red);
}

.ph-chat-error-content p {
    margin: 0;
    font-size: 14px;
    color: var(--an-gray-1);
    line-height: 1.5;
}

.ph-chat-retry-btn {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: var(--an-red);
    color: white;
    border: none;
    border-radius: var(--an-radius-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.ph-chat-retry-btn:hover {
    background: var(--an-red-deep);
}

/* ===================================================================
   Proposal Actions (ProposalActions.razor)
   =================================================================== */
.ph-proposal-actions {
    margin-top: var(--an-space-4);
}

.ph-actions-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--an-space-2);
}

/* --- Modal --- */
.ph-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end; /* bottom sheet on mobile by default */
    justify-content: center;
    z-index: 200;
    padding: 0;
}

.ph-modal {
    background: var(--an-white);
    border-radius: var(--an-radius-lg);
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.ph-modal-lg {
    /* Same as .ph-modal on mobile */
}

.ph-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--an-space-4);
    border-bottom: 1px solid var(--an-border-2);
    flex-shrink: 0;
}

.ph-modal-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.ph-modal-close {
    background: none;
    border: none;
    font-size: 27px;
    cursor: pointer;
    min-height: var(--an-tap-target);
    min-width: var(--an-tap-target);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--an-gray-4);
}

.ph-modal-body {
    padding: var(--an-space-4);
    overflow-y: auto;
    flex: 1;
}

.ph-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--an-space-2);
    padding: var(--an-space-4);
    border-top: 1px solid var(--an-border-2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* ===================================================================
   Share Section (ShareSection.razor)
   =================================================================== */
.ph-share-section {
    margin-top: var(--an-space-4);
}

.ph-share-form {
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-lg);
    padding: var(--an-space-4);
}

.ph-share-form h4 {
    margin: 0 0 var(--an-space-1);
    font-size: 20px;
}

.ph-share-description {
    color: var(--an-gray-4);
    font-size: 14px;
    margin-bottom: var(--an-space-4);
}

.ph-share-actions {
    display: flex;
    gap: var(--an-space-2);
    flex-wrap: wrap;
    margin-top: var(--an-space-4);
}

/* ===================================================================
   Questions Section (QuestionsSection.razor)
   =================================================================== */
.ph-questions-section {
    max-width: 100%;
}

.ph-questions-section h3 {
    font-size: 20px;
    margin-bottom: var(--an-space-2);
}

.ph-section-intro {
    color: var(--an-gray-4);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: var(--an-space-6);
}

.ph-question-form {
    margin-bottom: var(--an-space-6);
    padding-bottom: var(--an-space-6);
    border-bottom: 1px solid var(--an-border-2);
}

.ph-question-list {
    display: flex;
    flex-direction: column;
    gap: var(--an-space-4);
}

.ph-question-thread {
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-lg);
    overflow: hidden;
}

.ph-question-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--an-space-2);
    padding: var(--an-space-2) var(--an-space-4);
    background: var(--an-border);
}

.ph-question-meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ph-question-author {
    font-weight: 600;
    font-size: 14px;
    word-break: break-word;
}

.ph-question-date {
    font-size: 12px;
    color: var(--an-gray-4);
}

.ph-question-body {
    padding: var(--an-space-4);
    font-size: 16px;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ph-question-response {
    background: var(--an-border);
    border-top: 1px solid var(--an-border-2);
    padding: var(--an-space-4);
}

.ph-response-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--an-space-2);
    align-items: baseline;
    margin-bottom: var(--an-space-2);
}

.ph-response-author {
    font-size: 13px;
    color: var(--an-gray-3);
}

.ph-response-date {
    font-size: 12px;
    color: var(--an-gray-4);
}

.ph-subsection-header {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: var(--an-space-4);
    color: var(--an-gray-1);
}

/* ===================================================================
   Additional Files Section (AdditionalFilesSection.razor)
   =================================================================== */
.ph-additional-files-intro {
    color: var(--an-gray-3);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: var(--an-space-6);
    max-width: 720px;
}

.ph-additional-files-list {
    display: flex;
    flex-direction: column;
    gap: var(--an-space-4);
}

.ph-additional-file-card {
    display: flex;
    align-items: center;
    gap: var(--an-space-4);
    padding: var(--an-space-4);
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-lg);
}

.ph-additional-file-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--an-paper);
    border-radius: var(--an-radius-sm);
    color: var(--an-gray-4);
}

.ph-additional-file-info {
    flex: 1;
    min-width: 0;
}

.ph-additional-file-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--an-gray-1);
}

.ph-additional-file-title-link {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--an-red);
    text-decoration: none;
}

.ph-additional-file-title-link:hover {
    text-decoration: underline;
}

.ph-additional-file-download {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--an-radius-pill);
    color: var(--an-red);
    transition: background-color var(--an-duration-fast) var(--an-ease);
}

.ph-additional-file-download:hover {
    background-color: rgba(var(--an-red-rgb), 0.08);
}

.ph-additional-file-description {
    font-size: 14px;
    color: var(--an-gray-3);
    margin: 0.25rem 0 0;
    line-height: 1.4;
}

.ph-additional-file-meta {
    font-size: 12px;
    color: var(--an-gray-5);
    display: block;
    margin-top: 0.25rem;
}

/* ===================================================================
   Case Studies Section (CaseStudiesSection.razor)
   =================================================================== */
.ph-case-studies-section h3 {
    font-size: 20px;
    margin-bottom: var(--an-space-4);
}

.ph-case-studies-intro {
    color: var(--an-gray-3);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: var(--an-space-6);
    max-width: 720px;
}

.ph-case-study-filters-row {
    display: flex;
    align-items: flex-start;
    gap: var(--an-space-4);
    margin-bottom: var(--an-space-4);
}

.ph-case-study-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    flex: 1;
}

.ph-case-study-search {
    flex-shrink: 0;
}

.ph-case-study-search-input {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-md);
    font-size: 14px;
    font-family: var(--an-font-sans);
    width: 220px;
}

.ph-case-study-search-input:focus {
    border-color: var(--an-red);
}

.ph-filter-tag {
    display: inline-block;
    font-size: 13px;
    padding: 0.25rem 0.75rem;
    border-radius: var(--an-radius-xs);
    border: 1px solid var(--an-border-2);
    background: #fff;
    color: var(--an-gray-3);
    cursor: pointer;
    transition: all var(--an-duration-fast) var(--an-ease);
    font-family: inherit;
    line-height: 1.4;
}

.ph-filter-tag:hover {
    border-color: var(--an-gray-5);
    color: var(--an-gray-1);
}

.ph-filter-tag-active {
    background: var(--an-red);
    border-color: var(--an-red);
    color: #fff;
}

.ph-filter-tag-active:hover {
    opacity: 0.9;
    color: #fff;
}

.ph-filter-tag-clear {
    background: transparent;
    border-color: transparent;
    color: var(--an-gray-4);
    text-decoration: underline;
    font-size: 12px;
}

.ph-filter-tag-clear:hover {
    color: var(--an-gray-3);
}

.ph-case-study-no-results {
    color: var(--an-gray-4);
    font-size: 15px;
    padding: var(--an-space-4) 0;
}

.ph-case-study-cards {
    display: flex;
    flex-direction: column;
    gap: var(--an-space-4);
}

.ph-case-study-card {
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-lg);
    overflow: hidden;
}

.ph-case-study-card-inner {
    display: flex;
    align-items: flex-start;
    gap: var(--an-space-4);
    padding: var(--an-space-4);
}

.ph-case-study-logo {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--an-radius-sm);
    overflow: hidden;
    background: var(--an-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ph-case-study-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ph-case-study-card-inner .ph-case-study-content {
    flex: 1;
    min-width: 0;
    border-top: none;
    padding: 0;
}

.ph-case-study-header {
    padding: var(--an-space-4);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.ph-case-study-header:active {
    background: var(--an-border);
}

.ph-case-study-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--an-space-2);
}

.ph-case-study-title-row h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

.ph-expand-icon {
    font-size: 20px;
    font-weight: 700;
    color: var(--an-gray-4);
    flex-shrink: 0;
    min-width: var(--an-tap-target);
    min-height: var(--an-tap-target);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ph-case-study-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--an-gray-1);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ph-case-study-client {
    font-size: 16px;
    font-weight: 600;
    color: var(--an-gray-3);
    margin: 4px 0 var(--an-space-1);
}

.ph-case-study-description,
.ph-case-study-desc {
    font-size: 15px;
    line-height: 1.5;
    margin: var(--an-space-1) 0 var(--an-space-2);
    white-space: pre-line;
}

.ph-case-study-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--an-space-1);
    margin-top: var(--an-space-2);
}

.ph-case-study-content {
    border-top: 1px solid var(--an-border-2);
    padding: var(--an-space-4);
}

.ph-case-study-body {
    line-height: 1.6;
    font-size: 16px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ph-case-study-body img {
    max-width: 100%;
    height: auto;
}

.ph-case-study-download {
    margin-top: var(--an-space-4);
}

/* ===================================================================
   Solution Offerings Section (SolutionOfferingsSection.razor)
   =================================================================== */
.ph-solution-offerings-intro {
    color: var(--an-gray-3);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: var(--an-space-6);
    max-width: 720px;
}

.ph-solution-offering-cards {
    display: flex;
    flex-direction: column;
    gap: var(--an-space-4);
}

.ph-solution-offering-card {
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-lg);
    overflow: hidden;
}

.ph-solution-offering-card.ph-solution-offering-primary {
    border-color: var(--an-red);
    border-width: 2px;
}

.ph-solution-offering-card-inner {
    display: flex;
    align-items: flex-start;
    gap: var(--an-space-4);
    padding: var(--an-space-4);
}

.ph-solution-offering-content {
    flex: 1;
    min-width: 0;
}

.ph-solution-offering-header {
    display: flex;
    align-items: center;
    gap: var(--an-space-2);
    margin-bottom: 0.25rem;
}

.ph-solution-offering-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--an-gray-1);
}

.ph-solution-offering-badge {
    display: inline-block;
    background: var(--an-red);
    color: white;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15em 0.5em;
    border-radius: var(--an-radius-xs);
    flex-shrink: 0;
}

.ph-solution-offering-description {
    color: var(--an-gray-3);
    font-size: 14px;
    line-height: 1.5;
    margin: 0.25rem 0 0.5rem;
}

.ph-solution-offering-funding {
    background: var(--an-paper);
    border-left: 3px solid var(--an-red);
    padding: 0.5rem 0.75rem;
    font-size: 13px;
    color: var(--an-gray-3);
    margin-bottom: 0.5rem;
    border-radius: 0 var(--an-radius-xs) var(--an-radius-xs) 0;
}

.ph-solution-offering-funding-label {
    font-weight: 600;
    margin-right: 0.25rem;
}

.ph-solution-offering-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.ph-solution-offering-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ===================================================================
   Team Section (TeamSection.razor)
   =================================================================== */
.ph-team-section .ph-section-title {
    font-size: 20px;
}

.ph-team-intro {
    color: var(--an-gray-3);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: var(--an-space-6);
    max-width: 720px;
}

.ph-team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--an-space-4);
}

.ph-team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-lg);
    background: #fff;
    transition: box-shadow var(--an-duration-fast) var(--an-ease), transform var(--an-duration-fast) var(--an-ease);
}

.ph-team-card:hover {
    box-shadow: var(--an-shadow-card-hover);
    transform: translateY(-1px);
}

.ph-team-card-primary {
    border-color: var(--an-red);
    border-width: 2px;
    background: rgba(var(--an-red-rgb), 0.02);
}

.ph-team-primary-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--an-red);
    background: rgba(var(--an-red-rgb), 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: var(--an-radius-xs);
    margin-top: 0.25rem;
}

.ph-team-avatar {
    width: 96px;
    height: 96px;
    min-width: 96px;
    border-radius: var(--an-radius-pill);
    background: var(--an-red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 27px;
    flex-shrink: 0;
    margin-bottom: 1rem;
    box-shadow: var(--an-shadow-card);
}

.ph-team-avatar-img {
    object-fit: cover;
    box-shadow: var(--an-shadow-card);
}

.ph-team-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ph-team-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    word-break: break-word;
}

.ph-team-title {
    font-size: 14px;
    color: var(--an-gray-4);
    margin: 0.25rem 0 0.75rem;
}

.ph-team-recognitions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.ph-team-recognition {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--an-paper);
    border: 1px solid var(--an-border);
    border-radius: var(--an-radius-sm);
    padding: 0.25rem 0.5rem;
    font-size: 12px;
    color: var(--an-gray-3);
}

.ph-team-recognition-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.ph-team-recognition-name {
    font-weight: 500;
    white-space: nowrap;
}

a.ph-team-recognition-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

a.ph-team-recognition-link:hover {
    border-color: var(--an-red);
    background: var(--an-red-wash);
}

.ph-team-contact-details {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: center;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--an-border-2);
    width: 100%;
}

.ph-team-email,
.ph-team-phone {
    font-size: 14px;
    color: var(--an-red);
    text-decoration: none;
    word-break: break-all;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
}

.ph-team-email:hover,
.ph-team-phone:hover {
    text-decoration: underline;
}

.ph-team-description {
    font-size: 14px;
    color: var(--an-gray-4);
    margin: 0.25rem 0 var(--an-space-2);
    line-height: 1.4;
}

.ph-team-link {
    font-size: 14px;
    color: var(--an-red);
    text-decoration: none;
    word-break: break-all;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ph-team-link:hover {
    text-decoration: underline;
}

.ph-section-subtitle {
    font-size: 16px;
    font-weight: 600;
    margin: var(--an-space-6) 0 var(--an-space-4);
    color: var(--an-gray-4);
}

/* ===================================================================
   Materials Section (MaterialsSection.razor)
   =================================================================== */
.ph-materials-section .ph-section-title {
    font-size: 20px;
}

.ph-materials-list {
    display: flex;
    flex-direction: column;
    gap: var(--an-space-2);
}

.ph-material-item {
    display: flex;
    align-items: center;
    gap: var(--an-space-2);
    padding: var(--an-space-2) var(--an-space-4);
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-lg);
    flex-wrap: wrap;
}

.ph-material-icon {
    font-size: 12px;
    font-weight: 700;
    color: var(--an-gray-4);
    background: var(--an-border);
    padding: 0.25rem 0.375rem;
    border-radius: var(--an-radius-sm);
    flex-shrink: 0;
}

.ph-material-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.ph-material-name {
    font-size: 15px;
    font-weight: 500;
    word-break: break-word;
}

.ph-material-size {
    font-size: 12px;
    color: var(--an-gray-4);
}

.ph-material-actions {
    flex-shrink: 0;
}

/* ===================================================================
   RESPONSIVE BREAKPOINTS
   =================================================================== */

/* --- Small mobile: 320px–479px (default styles above cover this) --- */

/* Viewer header stacks on mobile */
@media (max-width: 479px) {
    .ph-viewer-header {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
        padding: 0.5rem 0.75rem;
    }

    .ph-viewer-header-content {
        flex-direction: column;
        gap: 0.25rem;
    }

    .ph-viewer-brand {
        gap: var(--an-space-1);
    }

    .ph-viewer-brand-text {
        font-size: 16px;
    }

    .ph-viewer-logo-img {
        height: 32px;
    }

    .ph-viewer-proposal-info {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding-top: 0.25rem;
        flex-direction: column;
        gap: 0.125rem;
    }

    .ph-viewer-title {
        font-size: 16px;
    }

    .ph-viewer-client {
        font-size: 12px;
    }

    .ph-viewer-confidential {
        font-size: 12px;
        padding: 0.25rem 0.5rem;
    }

    /* Hide desktop buttons on mobile */
    .ph-desktop-only {
        display: none !important;
    }

    /* Show mobile actions dropdown */
    .ph-mobile-only {
        display: block !important;
    }

    /* Explicit order: logo/title → confidentiality → actions dropdown */
    .ph-viewer-header-content {
        order: 1;
    }

    .ph-viewer-confidential {
        order: 2;
    }

    .ph-mobile-actions {
        order: 3;
    }
}

/* Ensure action buttons stack on very narrow screens */
@media (max-width: 479px) {
    .ph-actions-buttons {
        flex-direction: column;
    }

    .ph-actions-buttons .ph-btn {
        width: 100%;
    }

    .ph-share-actions {
        flex-direction: column;
    }

    .ph-share-actions .ph-btn {
        width: 100%;
    }

    .ph-modal-footer {
        flex-direction: column-reverse;
    }

    .ph-modal-footer .ph-btn {
        width: 100%;
    }

    /* PDF toolbar: stack on small screens */
    .ph-pdf-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--an-space-1);
        flex-wrap: wrap;
    }

    .ph-pdf-toolbar-left,
    .ph-pdf-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }

    /* Hide zoom percentage on very small screens */
    .ph-pdf-zoom-level {
        display: none;
    }

    /* Constrain version dropdown */
    .ph-version-dropdown {
        max-width: 120px;
    }

    /* Smaller button padding */
    .ph-btn-sm {
        padding: var(--an-space-1) var(--an-space-1);
    }
}

/* --- Tablet: 480px+ --- */
@media (min-width: 480px) {
    .ph-viewer-logo-img {
        height: 52px;
    }

    .ph-viewer-title {
        font-size: 26px;
    }

    .ph-team-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }

    .ph-material-item {
        flex-wrap: nowrap;
    }
}

/* --- Tablet landscape / small desktop: 768px+ --- */
@media (min-width: 768px) {
    .ph-viewer-header {
        padding: var(--an-space-4) var(--an-space-6);
    }

    .ph-viewer-logo-img {
        height: 56px;
    }

    .ph-viewer-brand-text {
        font-size: 20px;
    }

    .ph-viewer-title {
        font-size: 27px;
    }

    .ph-viewer-content {
        padding: var(--an-space-6);
    }

    /* Modal becomes centered dialog instead of bottom sheet */
    .ph-modal-overlay {
        align-items: center;
        padding: var(--an-space-6);
    }

    .ph-modal {
        border-radius: var(--an-radius-lg);
        max-width: 480px;
    }

    .ph-modal-lg {
        max-width: 600px;
    }

    .ph-modal-footer {
        flex-direction: row;
    }

    .ph-modal-footer .ph-btn {
        width: auto;
    }

    /* PDF toolbar: single row */
    .ph-pdf-toolbar {
        flex-wrap: nowrap;
    }

    .ph-actions-buttons {
        flex-direction: row;
    }

    .ph-actions-buttons .ph-btn {
        width: auto;
    }

    .ph-share-actions {
        flex-direction: row;
    }

    .ph-share-actions .ph-btn {
        width: auto;
    }

    .ph-case-study-cards {
        gap: var(--an-space-6);
    }
}

/* --- Desktop: 1024px+ --- */
@media (min-width: 1024px) {
    .ph-viewer-logo-img {
        height: 60px;
    }

    .ph-viewer-brand-text {
        font-size: 26px;
    }

    .ph-viewer-title {
        font-size: 26px;
    }

    .ph-pdf-content {
        min-height: 0;
    }

    .ph-team-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

/* ===================================================================
   Branded Message (BrandedMessage.razor) — Expired/Error states
   =================================================================== */
.ph-branded-message {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--an-space-6);
    background: var(--an-paper);
}

.ph-branded-message-card {
    max-width: 520px;
    width: 100%;
    border-radius: var(--an-radius-lg);
    box-shadow: var(--an-shadow-card);
    overflow: hidden;
    background: #fff;
}

.ph-branded-message-header {
    background: var(--an-ink);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--an-space-4) var(--an-space-6);
    display: flex;
    justify-content: center;
}

.ph-branded-message-brand {
    display: flex;
    align-items: center;
    gap: var(--an-space-2);
}

.ph-branded-message-logo-img {
    height: 40px;
    width: auto;
}

.ph-branded-message-brand-text {
    display: flex;
    align-items: baseline;
    gap: 0.35em;
    font-size: 20px;
    color: #fff;
    white-space: nowrap;
}

.ph-branded-message-separator {
    opacity: 0.5;
    font-weight: 300;
}

.ph-branded-message-product {
    opacity: 0.85;
    font-weight: 400;
}

.ph-branded-message-body {
    text-align: center;
    padding: var(--an-space-8) var(--an-space-6);
}

.ph-branded-message-title {
    font-size: 26px;
    font-weight: 600;
    color: var(--an-gray-1);
    margin-bottom: var(--an-space-2);
}

.ph-branded-message-text {
    font-size: 15px;
    color: var(--an-gray-3);
    line-height: 1.6;
    margin-bottom: var(--an-space-6);
}

.ph-branded-message-contact {
    border-top: 1px solid var(--an-border-2);
    padding-top: var(--an-space-4);
    margin-top: var(--an-space-4);
    font-size: 14px;
    color: var(--an-gray-4);
}

.ph-branded-message-contact a {
    color: var(--an-red);
    text-decoration: none;
    font-weight: 500;
}

.ph-branded-message-contact a:hover {
    text-decoration: underline;
}

/* Self-service relink section */
.ph-relink-section {
    margin-bottom: var(--an-space-6);
}

.ph-relink-verify {
    text-align: center;
}

.ph-relink-prompt {
    font-size: 15px;
    color: var(--an-gray-1);
    margin-bottom: 0.25rem;
}

.ph-relink-hint {
    font-size: 14px;
    color: var(--an-gray-4);
    margin-bottom: var(--an-space-4);
}

.ph-relink-input-group {
    display: flex;
    gap: 0.5rem;
    max-width: 400px;
    margin: 0 auto;
}

.ph-relink-input {
    flex: 1;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--an-border-2);
    border-radius: var(--an-radius-md);
    font-size: 14px;
    transition: border-color var(--an-duration-fast) var(--an-ease);
}

.ph-relink-input:focus {
    border-color: var(--an-red);
}

.ph-relink-error {
    color: var(--an-red);
    font-size: 14px;
    margin-top: 0.5rem;
}

.ph-relink-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: var(--an-gray-1);
    font-size: 15px;
}

.ph-relink-loading {
    display: flex;
    justify-content: center;
    padding: var(--an-space-4);
}

.ph-spinner-small {
    width: 20px;
    height: 20px;
    border: 2px solid var(--an-border-2);
    border-top-color: var(--an-red);
    border-radius: var(--an-radius-pill);
    animation: spin 0.8s linear infinite;
}

/* Viewer status pages (404 / 500) */
.ph-status-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--an-paper);
    padding: var(--an-space-6);
}

.ph-status-actions {
    display: flex;
    justify-content: center;
    margin-top: var(--an-space-4);
}

.ph-status-btn {
    background: var(--an-red);
    color: #fff;
    border: none;
    padding: 0.6rem 1.5rem;
    border-radius: var(--an-radius-md);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--an-duration-fast) var(--an-ease);
}

.ph-status-btn:hover {
    background: var(--an-red-deep);
}

.ph-status-reference {
    margin: var(--an-space-4) 0;
    padding: var(--an-space-2);
    background: var(--an-border);
    border-radius: var(--an-radius-sm);
    text-align: left;
}

.ph-status-reference p {
    margin: 0 0 0.25rem 0;
    font-size: 14px;
    color: var(--an-gray-1);
}

.ph-status-reference code {
    font-family: monospace;
    font-size: 14px;
    color: var(--an-gray-1);
    word-break: break-all;
}

/* ===================================================================
   ADMIN MOBILE RESPONSIVE
   =================================================================== */

@media (max-width: 767px) {
    /* Hide non-essential DataGrid columns on mobile */
    .ph-admin-hide-mobile {
        display: none !important;
    }

    /* Ensure DataGrid horizontal scroll on mobile */
    .mud-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Reduce padding on mobile */
    .mud-paper.pa-6 {
        padding: 16px !important;
    }

    /* Ensure touch targets on icon buttons */
    .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Constrain dialogs on mobile screens */
@media (max-width: 599.95px) {
    mud-dialog {
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100dvh - 32px) !important;
    }

    /* Stack dialog buttons vertically on small screens */
    mud-dialog .mud-dialog-actions {
        flex-direction: column;
        gap: 8px;
    }

    mud-dialog .mud-dialog-actions .mud-button-root {
        width: 100%;
    }
}

/* Normalize MudField height to match MudTextField/MudSelect outlined inputs */
/* ── Squared chips (009 FR-013, research R2) ──────────────────────────────
   The guide bans pills site-wide: "if you find yourself reaching for
   a 999px corner on something containing words, stop."

   These selectors are written out to (0,2,0) deliberately, to match MudBlazor's
   own .mud-chip.mud-chip-size-* rules. Shortening them to .mud-chip drops to
   (0,1,0) and the override stops working without any visible error.

   Chip avatars and close buttons stay round — they carry no words (FR-014). */
.mud-chip.mud-chip-size-small,
.mud-chip.mud-chip-size-medium,
.mud-chip.mud-chip-size-large {
    border-radius: var(--an-radius-sm);
}

.mud-chip .mud-avatar,
.mud-chip .mud-chip-close-button {
    border-radius: var(--an-radius-pill);
}

.mud-field {
    min-height: 56px;
    display: flex;
    align-items: center;
}

/* Tab badge positioning — prevent clipping by scroll container (v9 class names) */
.mud-tabs .mud-tab .mud-badge {
    margin-left: -4px;
    margin-right: 4px;
}

.mud-tabs .mud-tabs-tabbar {
    overflow: visible;
    position: relative;
    z-index: 1;
}

.mud-tabs .mud-tabs-tabbar-content {
    overflow: visible;
}

.mud-tabs .mud-tabs-panels {
    position: relative;
    z-index: 0;
    padding-top: 16px;
}

/* Tabs previously removed their own ring outright, which left keyboard users
   with no indication of which tab they were on. Inset instead of removed: a tab
   sits flush in its bar, so a positive offset would be clipped by the overflow. */
.mud-tabs .mud-tab:focus-visible {
    outline: 2px solid var(--an-red);
    outline-offset: -4px;
}

/* Consistent admin page header — same h1 for both plain titles and breadcrumbs */
h1.ph-page-title {
    font-family: var(--an-font-sans);
    font-size: 27px;
    font-weight: 700;
    color: var(--an-gray-1);
    line-height: 1.3;
    margin: 0;
    padding: 0;
}

h1.ph-page-title .ph-page-title-link {
    font-weight: 400;
    color: var(--an-gray-4);
    text-decoration: none;
}

h1.ph-page-title .ph-page-title-link:hover {
    text-decoration: underline;
}

h1.ph-page-title .ph-page-title-separator {
    color: var(--an-gray-4);
    font-weight: 300;
    margin: 0 0.4rem;
}

h1.ph-page-title .ph-page-title-current {
    font-weight: 700;
    color: var(--an-gray-1);
}

/* AI query response markdown rendering */
.ph-ai-response {
    font-size: 14px;
    line-height: 1.6;
}

.ph-ai-response h1,
.ph-ai-response h2,
.ph-ai-response h3 {
    margin: 0.75em 0 0.4em;
    font-weight: 600;
    color: var(--an-gray-1);
}

.ph-ai-response h2 {
    font-size: 16px;
}

.ph-ai-response h3 {
    font-size: 16px;
}

.ph-ai-response p {
    margin: 0.4em 0;
}

.ph-ai-response ul,
.ph-ai-response ol {
    margin: 0.4em 0;
    padding-left: 1.5em;
}

.ph-ai-response li {
    margin: 0.2em 0;
}

.ph-ai-response strong {
    font-weight: 600;
}

.ph-ai-response code {
    background: var(--an-paper);
    padding: 0.1em 0.3em;
    border-radius: var(--an-radius-xs);
    font-size: 14px;
}

.ph-ai-response table {
    border-collapse: collapse;
    margin: 0.5em 0;
    width: 100%;
}

.ph-ai-response th,
.ph-ai-response td {
    border: 1px solid var(--an-border-2);
    padding: 6px 10px;
    font-size: 14px;
    text-align: left;
}

.ph-ai-response th {
    background: var(--an-paper);
    font-weight: 600;
}

/* ── Dashboard Overview ────────────────────────────────────────── */
.dash-overview {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    margin-bottom: 32px;
    border-radius: var(--an-radius-lg);
    overflow: hidden;
    border: 1px solid var(--an-border);
}

/* Hero — left column spanning both rows */
.dash-hero {
    grid-row: 1 / 3;
    display: flex;
    background: var(--an-hero-gradient);
    color: #fff;
    min-width: 220px;
    position: relative;
}

.dash-hero-accent {
    width: 5px;
    background: var(--an-red);
    flex-shrink: 0;
}

.dash-hero-content {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dash-hero-value {
    font-family: var(--an-font-sans);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.dash-hero-label {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,.7);
    margin-top: 6px;
}

.dash-hero-sub {
    font-size: 13px;
    color: rgba(255,255,255,.5);
    margin-top: 2px;
}

/* Stats panels — right column, stacked */
.dash-stats-panel {
    padding: 14px 24px;
    background: #fff;
}

.dash-stats-panel + .dash-stats-panel {
    border-top: 1px solid var(--an-border);
}

.dash-stats-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--an-gray-4);
    margin-bottom: 8px;
}

.dash-stats-row {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* Individual stat chip */
.dash-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 16px;
    border-radius: var(--an-radius-lg);
    background: var(--an-paper);
    cursor: pointer;
    transition: background var(--an-duration-fast) var(--an-ease), box-shadow var(--an-duration-fast) var(--an-ease);
    min-width: 80px;
}

.dash-stat:hover {
    background: var(--an-border);
    box-shadow: var(--an-shadow-card-hover);
}

.dash-stat--active .dash-stat-count {
    color: var(--an-red);
}

.dash-stat-count {
    font-family: var(--an-font-sans);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--an-gray-1);
}

.dash-stat-label {
    font-size: 12px;
    color: var(--an-gray-4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.dash-stat-amount {
    font-size: 12px;
    font-weight: 600;
    color: var(--an-red);
    margin-top: 1px;
}

/* ── AI Query Tab Responsive ────────────────────────────────── */
.ai-query-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.ai-query-stats .dash-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.ai-query-stats .dash-stat {
    min-width: 0;
    padding: 8px 4px;
}

.ai-query-question {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
}

@media (max-width: 959px) {
    .ai-query-question {
        white-space: normal;
        max-width: none;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}

@media (min-width: 960px) {
    .ai-query-stats .dash-stats-row {
        display: flex;
    }

    .ai-query-stats .dash-stat {
        padding: 8px 16px;
        min-width: 80px;
    }
}

/* ── Dashboard Activity ─────────────────────────────────────── */
.dash-activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.dash-activity-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.dash-activity-table {
    border: 1px solid var(--an-border);
    border-radius: var(--an-radius-lg);
    overflow: hidden;
}

.dash-activity-table .mud-table-head .mud-table-cell {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--an-gray-4);
    font-weight: 600;
    background: var(--an-paper);
    border-bottom: 1px solid var(--an-border);
}

.dash-activity-table .mud-table-body .mud-table-row:hover {
    background: var(--an-paper) !important;
}

.dash-action-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    white-space: nowrap;
}

.dash-user-system {
    color: var(--an-gray-4);
}

/* Responsive: stack on small screens */
@media (max-width: 768px) {
    .dash-overview {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .dash-hero {
        grid-row: auto;
    }

    .dash-hero-content {
        padding: 20px 24px;
        text-align: center;
        align-items: center;
    }

    .dash-stats-row {
        justify-content: center;
    }
}
/* --- Dark-ink admin chrome -------------------------------------------------
   Brand system §5. The background itself comes from the MudTheme's
   AppbarBackground; these rules cover what the palette cannot express —
   the hairline, and the foreground colors that must flip to light so the
   bar stays readable on ink.
   -------------------------------------------------------------------------- */
.an-appbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.an-appbar-icon {
    color: rgba(255, 255, 255, 0.8);
}

.an-appbar-icon:hover,
.an-appbar-icon:focus-visible {
    color: var(--an-red-light);
}

/* Plain white on ink, matching the Client Hub chrome — the wordmark carries the
   brand, so the title stays a neutral label rather than a second accent. */
.an-appbar-title {
    color: var(--an-white);
    font-weight: 600;
}

/* --- Focus rings ----------------------------------------------------------
   ONE convention, three offset tiers (style guide p.30). Two competing global
   blocks previously disagreed on the offset, and four :focus rules at (0,2,0)
   carried `outline: none` that beat the global (0,1,0) — those inputs had no
   keyboard indicator at all.

   `outline`, never `box-shadow`: a box-shadow ring is invisible in Windows High
   Contrast / forced-colours mode, which is precisely the audience it exists for.
   -------------------------------------------------------------------------- */

/* Tier 1 — buttons, links, and everything not listed below.

   MudBlazor ships `button:focus { outline: none }` at specificity (0,1,1). A bare
   `:focus-visible` is (0,1,0) and LOSES to it, so the convention painted nothing on
   any button — the same specificity trap the audit found in this file's own :focus
   rules, except this one lives in a third-party stylesheet where grep cannot see it.
   Only the resolved cascade shows it, which is what the E2E traversal test checks.

   The element-qualified selectors tie at (0,1,1) and win on source order (app.css
   loads after MudBlazor.min.css); the class-qualified ones are (0,2,0) and win
   outright. Both are listed so the fix does not rest on link order alone. */
:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible,
.mud-chip:focus-visible,
.mud-tab:focus-visible,
.mud-switch:focus-visible,
.mud-checkbox:focus-visible,
.mud-radio:focus-visible {
    outline: 2px solid var(--an-red);
    outline-offset: 3px;
}

/* Tier 2 — form controls sit tighter so the ring hugs the field. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.mud-input:focus-visible,
.mud-input-slot:focus-visible,
.mud-input-root:focus-visible {
    outline-offset: 2px;
}

/* Tier 3 — accordion rows are full-bleed and need air. */
.mud-expand-panel-header:focus-visible,
.mud-collapse-container:focus-visible {
    outline-offset: 4px;
}

/* On any dark ground brand red is unreadable; the lighter red is the sanctioned
   substitute (constitution principle 30). */
.an-appbar :focus-visible,
.ph-viewer-header :focus-visible,
.ph-chat-inline-header :focus-visible,
.ph-share-modal-header :focus-visible,
.confirm-dialog-header :focus-visible {
    outline-color: var(--an-red-light);
}

/* White on a red ground — red on red is not an indicator. */
.ph-cta-btn:focus-visible,
.ph-share-send-btn:focus-visible,
.ph-status-btn:focus-visible,
.ph-request-link-btn:focus-visible,
.mud-button-filled-primary:focus-visible {
    outline-color: var(--an-white);
    outline-offset: 2px;
}

/* --- Motion ---------------------------------------------------------------
   MudBlazor's stylesheet hardcodes cubic-bezier(0.4, 0, 0.2, 1) 76 times with no
   variable to override, so its curve cannot be reached through a token. Scope the
   override to the components that visibly animate rather than using a universal
   selector: the ripple's decel curve and the spinner keyframes are load-bearing
   and a blanket rule would flatten both. See research R5.
   -------------------------------------------------------------------------- */
.mud-dialog,
.mud-overlay,
.mud-drawer,
.mud-expand-panel,
.mud-collapse-container,
.mud-snackbar,
.mud-tooltip,
.mud-popover {
    transition-timing-function: var(--an-ease);
}

/* --- Reduced motion -------------------------------------------------------
   An accessibility gate, not a polish item (style guide p.47). MudBlazor ships
   ZERO prefers-reduced-motion blocks of its own, so every one of them is ours to
   write and ours to keep.

   !important is load-bearing here: this has to beat both our rules and
   MudBlazor's compiled ones. It is the legitimate case — an accessibility
   override of a third-party stylesheet we do not control.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Progress indicators are the exception. A spinner is not decoration — it is
       the user's only signal that work is happening, and freezing it reads as a
       hung application. Slowed to a calm rotation rather than stopped, so it
       still communicates without the fast spin that triggers vestibular symptoms.
       Every other animation above is suppressed. */
    .ph-spinner,
    .ph-spinner-small,
    .mud-progress-circular-circle,
    .mud-progress-linear-bar,
    .mud-progress-linear-bar-indeterminate {
        animation-duration: 1.6s !important;
        animation-iteration-count: infinite !important;
    }

    /* The chat caret marks an in-flight streaming response. Same reasoning:
       it reports state. A step-end blink carries no motion to speak of. */
    .ph-chat-streaming .ph-chat-cursor {
        animation-duration: 1s !important;
        animation-iteration-count: infinite !important;
    }
}

/* --- Mobile accessibility gates -------------------------------------------
   Two of the five pass/fail gates on style guide p.47.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 767px) {
    /* 16px minimum on form controls. Below it, iOS Safari zooms the viewport on
       focus and the user has to pinch back out — the reason for the rule is
       mechanical, not aesthetic. */
    input,
    textarea,
    select,
    .mud-input-slot,
    .mud-input-root input,
    .mud-select input {
        font-size: 16px;
    }

    /* 15px reading floor for body copy. */
    body,
    p,
    li,
    .ph-chat-message-content,
    .markdown-content,
    .ph-ai-response {
        font-size: max(15px, 1em);
    }
}

/* --- Validation: never colour alone ---------------------------------------
   Every error carries all three signals (009 FR-029, style guide p.32): a border
   treatment, a filled circular "!" badge, and a written message. Colour alone
   fails for a colour-blind reader, a monochrome display, and a client that
   strips background colours.

   Copy convention: sentence case, full stop, no exclamation mark. The badge is
   the exclamation; the sentence does not need to shout as well.
   -------------------------------------------------------------------------- */
.validation-message,
.mud-input-helper-text.mud-input-error,
.ph-field-error {
    display: flex;
    align-items: flex-start;
    gap: var(--an-space-2);
    color: var(--an-error);
    font-size: 13px;
    line-height: 1.65;
}

/* The badge. aria-hidden by construction — it is generated content, so a screen
   reader never sees it, and the written message carries the same information. */
.validation-message::before,
.mud-input-helper-text.mud-input-error::before,
.ph-field-error::before {
    content: "!";
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: var(--an-radius-pill);
    background: var(--an-error);
    color: var(--an-white);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

/* The border treatment, third signal. */
.invalid,
[aria-invalid="true"],
.mud-input-error .mud-input-slot {
    border-color: var(--an-error) !important;
}

/* --- Disabled states ------------------------------------------------------
   opacity: .5 on a red button lands near 2.5:1, under every contrast bar. The
   guide's answer is not a darker disabled colour — it is that a disabled control
   must say WHY it is unavailable (009 FR-030). The helper text is the
   accessible affordance; the dimming is only a hint.
   -------------------------------------------------------------------------- */
.ph-disabled-reason {
    display: block;
    margin-top: var(--an-space-1);
    color: var(--an-gray-4);
    font-size: 13px;
    line-height: 1.65;
}

/* --- Tap targets ----------------------------------------------------------
   44px minimum (009 FR-031), one of the five gates on style guide p.47 and the
   only one the product already passed cleanly. Held here so it survives the
   --an-touch-min rename in US4.
   -------------------------------------------------------------------------- */
.mud-icon-button,
.mud-button-root,
button,
[role="button"],
a.ph-cta-btn {
    min-height: 44px;
    min-width: 44px;
}

/* Inline text links and chips inside dense table rows are exempt: forcing 44px
   on a chip inside a data grid breaks the row rhythm, and the row itself is the
   target. The guide's rule is about POINTER targets, not every focusable node. */
.mud-table-cell .mud-chip,
.mud-table-cell a,
.ph-chat-citation-link {
    min-height: 0;
    min-width: 0;
}

/* --- Reading measure ------------------------------------------------------
   Prose caps at 760px, lead paragraphs at 640px (009 FR-020). Without this,
   an AI chat response or a block of proposal copy runs the full width of a wide
   monitor, which is unreadable at any type size.
   -------------------------------------------------------------------------- */
.ph-chat-markdown,
.ph-ai-response,
.markdown-content,
.ph-proposal-prose {
    max-width: var(--an-measure);
    line-height: 1.75;   /* prose runs looser than UI body copy */
}

.ph-chat-markdown > p:first-of-type,
.ph-proposal-lead {
    max-width: var(--an-measure-tight);
}

/* Tables, code blocks, and images opt out — a 760px cap on a wide data table
   creates a horizontal scrollbar inside a column that had room to spare. */
.ph-chat-markdown table,
.ph-chat-markdown pre,
.ph-chat-markdown img,
.markdown-content table,
.markdown-content pre,
.markdown-content img {
    max-width: 100%;
}

/* --- Section label --------------------------------------------------------
   The guide's cheapest device that says "ArchitectNow" (009 FR-022): a short red
   rule above a bold, tight-tracked, brand-red label. One of the four signature
   devices that belong in a tool rather than a brochure.
   -------------------------------------------------------------------------- */
.an-section-label {
    display: block;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--an-red);
    margin: 0 0 var(--an-space-3);
}

.an-section-label::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin-bottom: var(--an-space-3);
    background: var(--an-red);
}

/* On ink the brand red is unreadable; the rule and label both take red-light. */
.an-appbar .an-section-label,
.ph-viewer-header .an-section-label,
.an-section-label--on-dark {
    color: var(--an-red-light);
}

.an-appbar .an-section-label::before,
.ph-viewer-header .an-section-label::before,
.an-section-label--on-dark::before {
    background: var(--an-red-light);
}

/* --- Component styles, consolidated ---------------------------------------
   Constitution principle 8 forbids component-scoped <style> blocks; seven had
   accumulated anyway. Five were the SAME dialog-title pattern under five
   different class prefixes, which is why the rule below is written once against
   all of them rather than copied five more times.
   Moved here verbatim by 009 T110, except where a raw literal needed a token.
   -------------------------------------------------------------------------- */

/* The per-dialog header aliases that used to live here are gone. They carried the
   layout but not the ink gradient, so those six dialogs rendered a flat red bar
   while every confirm-dialog rendered the branded one. All dialogs now go through
   Class="confirm-dialog" + <DialogHeader>, styled once near the top of this file. */

/* DynamicsLinkDialog.razor */
.dynamics-link-row:hover {
    background: var(--an-paper);
}

/* ShareDialog.razor */
.share-dialog-sender-popover {
    position: fixed !important;
}

/* ProfileMenu.razor */
.profile-menu {
    position: relative;
}

.profile-menu-button {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: var(--an-radius-sm);
    /* Sits on the dark-ink app bar — light foreground, red-light on hover.
       Brand red is too dark to read against the ink. */
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    font-family: inherit;
}

.profile-menu-button:hover,
.profile-menu-button:focus-visible {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--an-red-light);
}

.profile-menu-icon, .profile-menu-arrow {
    display: flex;
    align-items: center;
}

.profile-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: white;
    border-radius: var(--an-radius-xs);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 1000;
    overflow: hidden;
}

.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--an-gray-1);
    text-decoration: none;
    font-size: 14px;
    font-family: inherit;
    transition: background-color var(--an-duration-fast) var(--an-ease);
}

.profile-menu-item:hover {
    background-color: var(--an-paper);
}

.profile-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

/* ActivityDetailDialog.razor */
.markdown-response { font-size: 14px; line-height: 1.6; }
.markdown-response h1, .markdown-response h2, .markdown-response h3 { margin: 0.75em 0 0.4em; font-weight: 600; color: var(--an-gray-1); }
.markdown-response h2 { font-size: 16px; }
.markdown-response h3 { font-size: 16px; }
.markdown-response p { margin: 0.4em 0; }
.markdown-response ul, .markdown-response ol { margin: 0.4em 0; padding-left: 1.5em; }
.markdown-response li { margin: 0.2em 0; }
.markdown-response strong { font-weight: 600; }