/* ------------------------------------------------------------------
   App shell layout: top header + scrollable content + bottom nav.
------------------------------------------------------------------ */

#app {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ---------------- TOP HEADER ----------------
   One header geometry for the whole app so every screen's back arrow,
   title and right-side action land on exactly the same baseline:
     - 56px row, vertically centred
     - 16px horizontal page gutter (matches #app-content)
     - 40px circular back button, 10px gap to the title
   The header is pulled out to the screen edges (negative side margin)
   and re-padded so its background spans full width while its contents
   stay on the page gutter. */

.app-header {
    min-height: var(--header-height);
    margin: 0 -16px 6px;
    padding: max(6px, env(safe-area-inset-top)) 16px 6px;
    display: flex; align-items: center; gap: 10px;
    background: var(--bg);
    position: sticky; top: 0; z-index: 50;
}
.app-header h1 {
    font-size: 1.25rem; font-weight: 800; line-height: 1.2;
    flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-header > .avatar { margin: 0; }
.chat-header-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.chat-header-text h1 { font-size: 1.05rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-header-sub { font-size: .76rem; color: var(--muted); font-weight: 500; }
/* Tappable header title (Part 2: tapping the class name opens its info
   card) — reset to a plain button so it inherits the same h1 styling. */
.class-title-btn {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
    border: 0; background: none; padding: 0; cursor: pointer; text-align: left; color: inherit;
}
.class-title-btn h1 { flex: initial; min-width: 0; }
.app-header .back-btn {
    width: 40px; height: 40px; flex: 0 0 auto;
    border: none; border-radius: 50%; padding: 0;
    background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text);
    display: grid; place-items: center; cursor: pointer;
}
.app-header .back-btn:active { transform: scale(.92); }
.app-header .back-btn .material-symbols-rounded { font-size: 22px; line-height: 1; }
/* Right-side header actions all share the back button's box so the two
   ends of every header are optically balanced. */
.app-header .header-action {
    width: 40px; height: 40px; flex: 0 0 auto;
    border: none; border-radius: 50%; padding: 0;
    background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text);
    display: grid; place-items: center; cursor: pointer;
}
.app-header .header-action:active { transform: scale(.92); }
.app-header .header-action .material-symbols-rounded { font-size: 22px; }

/* ---------------- CONTENT ---------------- */

#app-content {
    flex: 1;
    padding: 8px 16px calc(var(--nav-height) + 28px);
    overflow-y: auto;
}


#app-content.page-enter { animation: pageFadeIn .22s ease-out; }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    #app-content.page-enter { animation: none; }
}

/* ---------------- BOTTOM NAV ---------------- */

.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    height: calc(var(--nav-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface);
    display: flex;
    box-shadow: 0 -2px 20px rgba(20,20,40,.06);
}
.nav-item {
    flex: 1; border: none; background: none; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 3px; color: var(--muted);
    font-size: .68rem; font-weight: 600; position: relative;
}
.nav-item .material-symbols-rounded { font-size: 24px; }
.nav-item.active { color: var(--primary); }
.nav-item.active .material-symbols-rounded { font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24; }
.nav-badge {
    position: absolute; top: 4px; right: calc(50% - 20px);
    width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
}

/* ---------------- DASHBOARD ---------------- */

.greeting { margin: 6px 2px 18px; }
.greeting h1 { font-size: 1.5rem; font-weight: 800; }
.greeting p { color: var(--muted); font-size: .9rem; margin-top: 2px; }

.quick-actions-wrap { position: relative; margin-bottom: 22px; }
.quick-actions { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.quick-actions::-webkit-scrollbar { display: none; }
/* A soft fade on the trailing edge hints there's more to scroll to,
   instead of the row just cutting off flush against the screen edge. */
.quick-actions-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 4px; width: 28px;
    background: linear-gradient(to right, transparent, var(--bg));
    pointer-events: none;
}
.quick-action {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: var(--surface); border: none; border-radius: var(--radius-lg);
    padding: 14px 18px; box-shadow: var(--shadow-sm); min-width: 84px;
}
.quick-action .material-symbols-rounded { font-size: 26px; color: var(--primary); }
.quick-action span:last-child { font-size: .76rem; font-weight: 600; }

.stat-row { display: flex; gap: 10px; margin-bottom: 22px; }
.stat-card { flex: 1; background: var(--surface); border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm); text-align: center; }
.stat-card .stat-num { font-size: 1.5rem; font-weight: 800; color: var(--primary); }
.stat-card .stat-label { font-size: .78rem; color: var(--muted); margin-top: 2px; }

/* ---------------- SEARCH BAR ---------------- */

.search-bar {
    display: flex; align-items: center; gap: 10px;
    background: var(--surface); border-radius: var(--radius-md);
    padding: 12px 16px; box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.search-bar input { flex: 1; border: none; outline: none; font-size: .95rem; background: none; }
.search-bar .material-symbols-rounded { color: var(--muted); }

/* ---------------- FAB ---------------- */

.fab {
    position: fixed; right: 16px; bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom));
    width: 56px; height: 56px; border-radius: 50%; border: none; padding: 0;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary-btn-from), var(--primary-btn-to));
    color: var(--on-primary); box-shadow: var(--shadow-primary);
    display: flex; align-items: center; justify-content: center; z-index: 90;
}
.fab .material-symbols-rounded { font-size: 28px; }
.fab:active { transform: scale(.94); }
/* When the bottom tab bar is hidden (full-screen surfaces) the FAB
   drops down to the plain Android margin instead of leaving a gap. */
body.nav-hidden .fab { bottom: calc(16px + env(safe-area-inset-bottom)); }

/* ---------------- CHAT INPUT BAR ---------------- */

.chat-scroll { display: flex; flex-direction: column; padding-bottom: 8px; }
.composer {
    position: sticky; bottom: 0; display: flex; align-items: flex-end; gap: 8px;
    background: var(--bg); padding: 10px 0 max(10px, env(safe-area-inset-bottom));
}
.composer textarea {
    flex: 1; border: none; border-radius: 22px; background: var(--surface);
    box-shadow: var(--shadow-sm); padding: 13px 18px; font-size: .95rem;
    resize: none; max-height: 120px; font-family: inherit;
}
.composer textarea:focus { outline: none; }
.composer .send-btn {
    width: 46px; height: 46px; border-radius: 50%; border: none; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary-btn-from), var(--primary-btn-to)); color: var(--on-primary);
    display: flex; align-items: center; justify-content: center;
}
.composer .send-btn:disabled { opacity: .4; }

/* ---------------- BREADCRUMB (Schools > Classes > Notes) ---------------- */

.crumb { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .85rem; margin-bottom: 4px; }
.crumb .material-symbols-rounded { font-size: 16px; }

/* ---------------- TABS ---------------- */

.tab-row { display: flex; gap: 6px; background: var(--surface-alt); border-radius: var(--radius-md); padding: 4px; margin-bottom: 16px; }
.tab-btn { flex: 1; border: none; background: none; padding: 10px 0; border-radius: 14px; font-weight: 700; font-size: .85rem; color: var(--muted); }
.tab-btn.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }

/* ---------------- NOTIFICATIONS ---------------- */

.dashboard-header { margin-bottom: 8px; }
.dashboard-header h1 { font-size: 1.2rem; }
.notification-btn {
    width: 42px; height: 42px; border: none; border-radius: 14px;
    background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text);
    display: flex; align-items: center; justify-content: center; position: relative;
    transition: transform .15s ease;
}
.notification-btn:active { transform: scale(.92); }
.notification-btn .material-symbols-rounded { font-size: 24px; }
.notification-badge {
    position: absolute; top: -3px; right: -3px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--danger); color: var(--on-primary);
    border: 2px solid var(--bg); font-size: .62rem; line-height: 14px;
    font-weight: 800; display: flex; align-items: center; justify-content: center;
    animation: notif-badge-pop .25s cubic-bezier(.34,1.56,.64,1);
}
/* A quiet "something's here" pulse on the bell itself when there's an
   unread badge — cute, not nagging (one soft breathe, not a shake). */
.notification-btn:has(.notification-badge:not(.hidden)) .material-symbols-rounded {
    animation: notif-bell-breathe 2.4s ease-in-out infinite;
}
@keyframes notif-badge-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes notif-bell-breathe {
    0%, 100% { transform: rotate(0deg); }
    5% { transform: rotate(-8deg); }
    10% { transform: rotate(7deg); }
    15% { transform: rotate(-5deg); }
    20% { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .notification-badge { animation: none; }
    .notification-btn .material-symbols-rounded { animation: none !important; }
}

.notification-center { padding-bottom: 4px; }
.notification-center-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 14px;
}
.notification-center-head h3 { font-size: 1.25rem; margin-top: -10px; }
.notification-list { display: flex; flex-direction: column; gap: 8px; }
.notification-row {
    display: flex; align-items: flex-start; gap: 12px; padding: 13px 10px;
    border-radius: var(--radius-md); cursor: pointer; position: relative;
    animation: notif-row-in .22s ease both;
}
.notification-row:hover { background: var(--surface-alt); }
.notification-row.unread { background: var(--primary-soft); }
@keyframes notif-row-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .notification-row { animation: none; } }

.notification-icon {
    width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0;
    background: var(--primary-soft); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
}
/* Each notification kind gets its own colour, so the list reads at a
   glance instead of being a wall of identical grey tiles. */
.notification-icon.type-direct_message,
.notification-icon.type-group_message { background: var(--success-soft); color: var(--success); }
.notification-icon.type-group_invite { background: var(--star-soft); color: var(--star); }
.notification-icon.type-dm_request { background: var(--warning-soft); color: var(--warning-text, var(--warning)); }
.notification-icon .material-symbols-rounded { font-size: 22px; }
.notification-content { flex: 1; min-width: 0; }
.notification-title { font-size: .9rem; font-weight: 700; line-height: 1.25; padding-right: 12px; }
.notification-body { color: var(--muted); font-size: .82rem; line-height: 1.35; margin-top: 3px; }
.notification-time { color: var(--muted); font-size: .72rem; margin-top: 6px; }
.notification-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--primary);
    flex-shrink: 0; margin-top: 6px; box-shadow: 0 0 0 3px var(--primary-soft);
}
.notification-actions { display: flex; gap: 7px; margin-top: 10px; }
.notification-actions .btn { height: 36px; padding: 0 13px; font-size: .78rem; }
/* Optimistic accept/decline: the row visibly settles instead of just
   vanishing (matches the same pattern used across the rest of the app). */
.notification-row.optimistic-busy { pointer-events: none; }
.notification-row.optimistic-busy .notification-icon { opacity: .45; }
.notification-row.optimistic-busy .notification-actions { opacity: .45; }


/* ---------------- SOCIAL CHAT / GROUP UI ----------------
   The full chat-thread layout (header/scroll/composer/emoji dock)
   lives entirely in pages/messages/messages.css now — it used to be
   partly duplicated here too, and because these selectors are more
   specific than the plain ones in messages.css, THIS file was quietly
   winning the cascade for composer/scroll positioning while
   messages.css looked like the source of truth. That's what caused
   the "composer floats in a weird spot", "message bar changes size",
   and "bottom nav overlaps the chat" symptoms. Only the group-detail
   sheet styling (not part of the thread view itself) stays here. */
.group-detail-sheet { padding-bottom:10px; }
.group-detail-hero { text-align:center; padding:2px 0 16px; }
.group-detail-hero .avatar { margin:0 auto 7px; }
.group-detail-hero h2 { font-size:1.3rem; }
.group-detail-hero p { color:var(--muted); font-size:.82rem; line-height:1.4; max-width:340px; margin:4px auto 8px; }
.group-detail-hero .badge { margin-bottom:10px; }
.group-members-head { display:flex; align-items:center; justify-content:space-between; margin:18px 2px 8px; }
.group-members-head h3 { font-size:.95rem; }
.group-members-head span { color:var(--muted); font-size:.7rem; }
.group-members { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.member-card { display:flex; align-items:center; gap:10px; width:100%; border:1px solid var(--border); background:var(--surface); border-radius:16px; padding:9px; text-align:left; }
.member-copy { flex:1; min-width:0; }
.member-copy strong,.member-copy span { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.member-copy span { color:var(--muted); font-size:.72rem; margin-top:2px; }
.member-role-btn { border:0; background:var(--surface-alt); color:var(--primary); font-weight:800; font-size:.68rem; border-radius:999px; padding:7px 9px; }
.member-role-btn.muted { color:var(--muted); }

/* The tab bar is removed from the DOM entirely while a thread is open
   (see router.js), but belt-and-braces: also hide it via this body
   class so there's never a frame where it's visible underneath a
   fixed-position chat surface. */
body.nav-hidden .bottom-nav { display: none; }

/* ---------- School information card (Schools tab) ----------
   Pinned above the class list so the school's identity, contact
   details and (for staff) join code are visible without a detour. */
.school-info-card { padding:16px; }
.school-info-head { display:flex; align-items:center; gap:12px; }
.school-info-title { min-width:0; }
.school-info-title h2 { font-size:1.12rem; line-height:1.25; overflow-wrap:anywhere; }
.school-info-title .badge { margin-top:6px; }
.school-info-desc { color:var(--muted); font-size:.85rem; line-height:1.45; margin-top:10px; overflow-wrap:anywhere; }
.school-info-meta { display:flex; flex-direction:column; gap:7px; margin-top:12px; }
.school-info-meta > div { display:flex; align-items:flex-start; gap:8px; color:var(--muted); font-size:.82rem; line-height:1.35; }
.school-info-meta .material-symbols-rounded { font-size:18px; flex:0 0 auto; color:var(--primary); }
.school-info-code { display:flex; align-items:center; gap:8px; margin-top:14px; padding:10px 12px; border:1px dashed var(--border); border-radius:14px; background:var(--surface-alt); cursor:pointer; }
.school-info-code span:first-child { color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.school-info-code strong { flex:1; font-size:.95rem; letter-spacing:.12em; }
.school-info-code .material-symbols-rounded { font-size:18px; color:var(--primary); }

/* Join code shown right after a school is created. */
.join-code { font-size:1.6rem; font-weight:800; letter-spacing:.2em; padding:14px; margin-bottom:14px; border-radius:16px; background:var(--surface-alt); border:1px dashed var(--border); }

.section-label { margin:18px 2px 8px; font-size:.72rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }

/* Personal star toggle (Notes tab shortcuts). */
.star-btn .material-symbols-rounded { font-size:20px; color:var(--muted); }
.star-btn { text-decoration: none; border-bottom: none; }
.star-btn.starred .material-symbols-rounded { color:var(--star); font-variation-settings:"FILL" 1; }

@media (max-width: 380px) {
  .school-info-head { gap:10px; }
  .school-info-title h2 { font-size:1rem; }
  .join-code { font-size:1.3rem; letter-spacing:.14em; }
}

/* School search inside the join sheet — discovery only; the join code
   is still the only way to actually get in. */
.explore-results { margin-top:10px; max-height:230px; overflow-y:auto; }
.explore-hint { color:var(--muted); font-size:.82rem; padding:6px 2px; }

/* Star toggle inside an entity-row (class sections). The row is a
   <button>, so the star is a role="button" <span> — give it the same
   size and hit area a real button would have. */
.entity-row .star-btn {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 38px; height: 38px; border-radius: 50%;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.entity-row .star-btn:active { background: var(--surface-alt); }
.star-btn.is-busy { opacity: .5; pointer-events: none; }

/* Section-label count pill used by the Notes tab star groups. */
.section-label-count {
    margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    background: var(--primary-soft); color: var(--primary);
    font-size: .72rem; font-weight: 800;
}
.star-group { margin-bottom: 8px; }
/* Each starred item is its own card, with real gaps between them,
   instead of one panel holding every row edge-to-edge. */
.star-group-list { display: flex; flex-direction: column; gap: 10px; }
.starred-row {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 12px 14px;
}
.starred-row-icon { color: var(--primary); font-size: 24px; flex: 0 0 auto; }

/* ---------------------------------------------------------------
   Membership: section detail, Join/Leave, locked (non-member) state
   --------------------------------------------------------------- */
.section-hero {
    display: flex; align-items: center; gap: 12px;
    padding: 16px; margin-bottom: 14px;
    background: var(--surface); border-radius: var(--radius);
}
.section-hero-copy { flex: 1; min-width: 0; }
.section-hero-copy h2 {
    font-size: 1.1rem; font-weight: 700; line-height: 1.25;
    overflow-wrap: anywhere;
}
.section-hero-copy span { display: block; color: var(--muted); font-size: .84rem; margin-top: 2px; }

.section-action-stack { margin-top: 16px; }
/* Comfortable thumb target for the launch-critical Join/Leave action. */
.join-btn { min-height: 46px; }
.join-btn.is-busy { opacity: .7; }

.locked-card {
    text-align: center;
    padding: 22px 18px;
    margin-top: 14px;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}
.locked-card.compact { padding: 16px; margin-top: 12px; }
.locked-card .locked-icon { font-size: 34px; color: var(--muted); }
.locked-card h3 { margin: 8px 0 6px; font-size: 1rem; font-weight: 700; }
.locked-card p { color: var(--muted); font-size: .87rem; line-height: 1.5; overflow-wrap: anywhere; }
.locked-card .locked-note { margin-top: 8px; font-size: .8rem; opacity: .85; }
.locked-card .btn { margin-top: 16px; }

/* ---------------------------------------------------------------
   Policy documents (terms / privacy / community rules / about)
   --------------------------------------------------------------- */
.policy-doc {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 18px 16px;
}
.policy-updated { color: var(--muted); font-size: .78rem; margin-bottom: 10px; }
.policy-intro { font-size: .92rem; line-height: 1.6; margin-bottom: 6px; }
.policy-section { margin-top: 18px; }
.policy-section h3 { font-size: .97rem; font-weight: 700; margin-bottom: 6px; }
.policy-section p {
    color: var(--muted); font-size: .88rem; line-height: 1.65;
    margin-bottom: 6px; overflow-wrap: anywhere;
}
.policy-section ul { margin: 4px 0 6px; padding-left: 20px; }
.policy-section li {
    color: var(--muted); font-size: .88rem; line-height: 1.6;
    margin-bottom: 6px; overflow-wrap: anywhere;
}
.policy-links {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 16px 0 8px; justify-content: center;
}

/* Press-and-hold affordance for destructive hold gestures on rows. */
.entity-row.is-holding { transform: scale(.985); background: var(--surface-alt); }

/* ---------------- TINY HOLD MENU (hold a subject) ---------------- */
.tiny-menu-backdrop { position: fixed; inset: 0; z-index: 900; background: transparent; }
.tiny-menu {
    position: fixed; z-index: 901; min-width: 168px; padding: 6px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,.18));
    display: flex; flex-direction: column; gap: 2px;
}
.tiny-menu-item {
    display: flex; align-items: center; gap: 10px;
    border: 0; background: transparent; color: var(--text);
    font: inherit; font-size: .92rem; font-weight: 600;
    padding: 11px 12px; border-radius: 12px; cursor: pointer; text-align: left;
}
.tiny-menu-item .material-symbols-rounded { font-size: 20px; color: var(--muted); }
.tiny-menu-item:active { background: var(--surface-alt); }
.tiny-menu-item.danger, .tiny-menu-item.danger .material-symbols-rounded { color: var(--danger, #d64545); }

/* ---------------- CLASS CARD (members inside the class card) ---------------- */
.class-card-sheet .section-label { margin-top: 6px; }
.class-member-list { display: flex; flex-direction: column; gap: 2px; max-height: 44vh; overflow-y: auto; margin-bottom: 14px; }
.class-member-row {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 12px; border-radius: 14px; background: var(--surface-alt);
}
.class-member-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.class-member-name strong { font-size: .93rem; font-weight: 700; overflow-wrap: anywhere; }
.class-member-name span { color: var(--muted); font-size: .76rem; }

/* ---------------- STATUS SEGMENT (note sheet) ---------------- */
.status-seg { display: flex; gap: 8px; }
.status-seg-btn {
    flex: 1; border: 1px solid var(--border); background: var(--surface);
    color: var(--muted); font: inherit; font-size: .85rem; font-weight: 700;
    padding: 10px 12px; border-radius: 12px; cursor: pointer;
}
.status-seg-btn.active { border-color: var(--primary); color: var(--primary); background: var(--surface-alt); }

/* ---------------- IN-APP PDF VIEWER (full-screen) ---------------- */
/* Full-screen document reader: minimal header (name + download only,
   per spec), the PDF gets the rest of the screen. Tapping the page
   toggles the header via .pdfv-header-hidden. */
.pdfv-panel {
    position: relative; width: 100%; height: 100%; display: flex; flex-direction: column;
    background: #17181c;
}
.pdfv-header {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    padding: max(12px, env(safe-area-inset-top)) 10px 10px 6px;
    background: #17181c; z-index: 2;
    transition: transform .2s ease, opacity .2s ease;
}
.pdfv-header-hidden .pdfv-header { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.pdfv-title {
    flex: 1; min-width: 0; color: #fff; font-weight: 700; font-size: .92rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdfv-icon-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0;
    background: transparent; color: #fff; cursor: pointer; flex-shrink: 0;
    display: grid; place-items: center;
}
.pdfv-icon-btn:active { background: rgba(255,255,255,.12); }
.pdfv-icon-btn .material-symbols-rounded { font-size: 22px; }

.pdfv-body {
    flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; background: #3a3b40;
}
.pdfv-pages {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 8px 0 max(24px, env(safe-area-inset-bottom));
    transform-origin: top center; transition: transform .05s linear;
}
.pdfv-page {
    width: 100%; max-width: 900px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.pdfv-canvas { display: block; width: 100%; height: auto; }
.pdfv-zoomed { transition: none; }

.pdfv-state {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px;
    color: rgba(255,255,255,.8); text-align: center; padding: 0 24px;
}
.pdfv-state-icon { font-size: 40px; color: rgba(255,255,255,.6); }