/* Product layouts; colors come exclusively from theme-tokens.css. */
.help-sheet { width: min(420px, calc(100% - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); color: var(--ink); box-shadow: 0 16px 48px var(--shadow-color); }
.help-sheet::backdrop { background: var(--overlay-scrim); }
.help-sheet h2 { margin: 0 0 12px; font-size: 20px; }
.help-sheet p { color: var(--muted); line-height: 1.6; margin-bottom: 20px; }
.help-sheet button { width: 100%; min-height: 44px; }
.context-help { display: inline-grid; place-items: center; vertical-align: middle; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 10px; background: transparent; color: var(--muted); border-radius: 50%; }
.context-help svg { width: 20px; height: 20px; }
.help-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
@media(max-width: 700px) { .help-sheet { margin: auto 0 0; width: 100%; max-width: none; max-height: calc(100dvh - 32px); border-radius: 24px 24px 0 0; padding: 24px 20px max(24px, env(safe-area-inset-bottom)); } }
@media(prefers-reduced-motion: no-preference) { .help-sheet[open] { animation: help-appear var(--motion-fast) ease-out; } @keyframes help-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }
.messenger-root { grid-template-columns: minmax(280px, 320px) minmax(0, 1fr); }
.sidebar-content { display: flex; flex-direction: column; }
.sidebar-header { padding: 16px; gap: 8px; }
.sidebar-brand strong { font-size: 18px; }
.sidebar-brand p { font-size: 12px; }
.sidebar-version { display: none; }
.profile-entry { padding: 0; min-width: 44px; width: 44px; height: 44px; border: 0; background: transparent; }
.profile-entry .brand-dot { width: 44px; height: 44px; }
.sidebar-actions { gap: 4px; }
.icon-button { width: 44px; min-height: 44px; padding: 10px; border-radius: var(--radius-control); }
.list-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 16px 8px; }
.list-heading h2 { font-size: 20px; margin: 0; }
.conversation-list { flex: 1; padding: 4px 8px; }
.conversation-item { padding: 12px; gap: 12px; min-height: 72px; border-radius: 16px; }
.conversation-item .avatar { width: 44px; height: 44px; font-size: 15px; }
.conversation-item strong { font-size: 16px; }
.sidebar-footer { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 8px; }
.sidebar-footer, .composer { height: var(--footer-height); min-height: var(--footer-height); }
.nav-icon { min-height: 44px; padding: 6px 2px; border-radius: 12px; gap: 4px; }
.nav-icon span { font-size: 11px; }
.nav-icon svg { width: 22px; height: 22px; }
.thread-header { padding: 12px 20px; min-height: 76px; gap: 12px; }
.thread-header .avatar { width: 44px; height: 44px; }
.thread-title h2 { font-size: 18px; }
.thread-title p { font-size: 12px; }
.thread-actions { gap: 6px; }
.composer { grid-template-columns: 44px minmax(0,1fr) 44px; padding: 10px 16px; gap: 8px; }
.composer input[type=text] { height: 44px; min-height: 44px; border-radius: 22px; padding: 10px 16px; }
.composer .icon-button { width: 44px; height: 44px; min-height: 44px; }
.notification-card { margin: 0 16px 8px; padding: 12px; border-radius: 12px; font-size: 12px; }
.notification-card p { font-size: 12px; }
.settings-pane { max-width: 720px; width: 100%; margin-inline: auto; padding: 24px; }
.settings-heading h2 { font-size: 24px; }
.settings-section summary { min-height: 52px; }
.devices-setting > button:first-child { flex: 1; text-align: left; }
.add-contact-card { border-radius: 24px; }
.add-contact-heading h2 { font-size: 22px; }
.contact-preview { padding: 12px; background: var(--surface-soft); border-radius: 12px; overflow-wrap: anywhere; }
@media(max-width:760px) {
 .messenger-root { grid-template-columns: minmax(0,1fr); }
 .sidebar-footer { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .sidebar-footer [data-nav=settings] { display: none; }
 .sidebar-footer, .composer { height: calc(var(--footer-height) + env(safe-area-inset-bottom)); padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
 .thread-header { padding: 10px 12px; gap: 8px; }
 .thread-title h2 { font-size: 16px; }
 .thread-header > .avatar { display: none; }
 .thread-actions { gap: 2px; }
 .composer { padding-inline: 8px; gap: 6px; }
 .settings-pane { padding: 16px; }
}
.contact-qr-picker { display: flex; gap: 8px; align-items: center; position: relative; min-height: 44px; cursor: pointer; color: var(--accent-ink); }
.contact-qr-picker svg { width: 22px; height: 22px; }
.contact-qr-picker input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.contact-qr-picker:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.welcome-copy h1 { font-size: clamp(36px,8vw,56px); }
.welcome-copy .lead { font-size: clamp(18px,4vw,24px); line-height: 1.4; }

.contact-camera:has(video[hidden]) { display: none; }
.contact-camera video { width: 100%; max-height: 200px; object-fit: cover; border-radius: 12px; }
[data-device-progress] { width: 100%; height: 4px; accent-color: var(--accent-ink); margin: 0 0 12px; }
.conversation-panel.is-settings { overflow: hidden; }
.is-settings .settings-pane { height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr); padding: 0; }
.settings-sections { overflow-y: auto; overscroll-behavior: contain; align-content: start; padding: 2px 4px 16px; }
.settings-heading { display: flex; gap: 12px; }
.thread-title p { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.notification-card button { min-height: 44px; }
@media(prefers-reduced-motion: reduce) { .conversation-panel { transition: none; } }
.contact-qr-options > summary { min-height: 44px; padding-block: 10px; cursor: pointer; color: var(--accent-ink); }
.contact-qr-options[open] > button { width: 100%; }
.add-contact-symbol { display: none; }
.add-contact-card .modal-close { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
.add-contact-entry input, [data-contact-send] { min-height: 44px; }
@media(max-width:480px) { .add-contact-card { gap: 8px; } }
/* Calm account-backup invitation. Setup, key confirmation and recovery stay separate. */
#recoveryDialog.recovery-offer {
  box-sizing: border-box; width: min(420px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100dvh - 32px); margin: auto; padding: 28px;
  border: 1px solid var(--border-default); border-radius: 24px;
  background: var(--bg-surface); color: var(--text-primary);
  box-shadow: 0 20px 64px var(--shadow-color); overflow-y: auto;
  font-family: inherit;
}
#recoveryDialog.recovery-offer::backdrop { background: var(--overlay-scrim); }
.recovery-offer form { display: flex; flex-direction: column; align-items: stretch; gap: 0; text-align: center; }
.recovery-offer-symbol { display: grid; place-items: center; width: 64px; height: 64px; margin: 4px auto 20px; border-radius: 50%; color: var(--accent-ink); background: var(--accent-soft); }
.recovery-offer-symbol svg { width: 32px; height: 32px; }
#recoveryDialog.recovery-offer h2 { margin: 0 0 14px; color: var(--text-primary); font-size: 23px; font-weight: 650; line-height: 1.25; letter-spacing: -.025em; }
.recovery-offer h2:focus { outline: none; }
.recovery-offer-copy { margin: 0; color: var(--text-primary); font-size: 15px; line-height: 1.6; }
.recovery-offer-note { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 16px 0 12px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.recovery-offer-note svg { flex: 0 0 18px; width: 18px; height: 18px; }
.recovery-offer-details { margin-bottom: 20px; }
.recovery-offer-details summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 4px; color: var(--accent-ink); font-size: 14px; cursor: pointer; list-style: none; }
.recovery-offer-details summary::-webkit-details-marker { display: none; }
.recovery-offer-details summary::after { content: ''; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin-top: -3px; }
.recovery-offer-details[open] summary::after { transform: rotate(225deg); margin-top: 3px; }
.recovery-offer-details div { padding: 12px 14px; background: var(--bg-secondary); border-radius: 12px; text-align: left; }
.recovery-offer-details p { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.recovery-offer-details p:last-child { margin-bottom: 0; }
.recovery-offer [data-recovery-result]:empty { display: none; }
#recoveryDialog.recovery-offer button { width: 100%; min-height: 44px; margin: 0; border-radius: 12px; padding: 10px 16px; font-size: 14px; font-weight: 600; }
#recoveryDialog.recovery-offer button[type=submit] { background: var(--accent-primary); color: var(--on-accent); border: 1px solid transparent; }
#recoveryDialog.recovery-offer [data-recovery-close] { margin-top: 8px; background: transparent; color: var(--text-secondary); border: 1px solid transparent; font-weight: 500; }
#recoveryDialog.recovery-offer [data-recovery-close]:hover { background: var(--bg-secondary); }
@media(max-width:760px) {
  #recoveryDialog.recovery-offer { width: 100%; max-height: calc(100dvh - 24px); margin: auto 0 0; border-radius: 24px 24px 0 0; padding: 24px 24px max(20px, env(safe-area-inset-bottom)); }
  #recoveryDialog.recovery-offer::before { content: ''; display: block; width: 36px; height: 4px; margin: -10px auto 20px; border-radius: 2px; background: var(--border-default); }
}
/* Compact unlock: identity, PIN and keypad, without a decorative status row. */
.app-shell[data-screen="lock"] {
  width: min(100%, 380px); min-height: var(--app-height); align-content: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); gap: 12px;
}
#lockScreen { gap: 16px; padding-top: 0; align-content: start; }
#lockScreen .lock-heading { margin: 0 0 4px; gap: 12px; }
#lockScreen .lock-heading .brand-symbol { width: 48px; height: 44px; flex: 0 0 48px; }
#lockScreen .lock-heading h1 { font-size: 28px; line-height: 1.2; }
#lockScreen .lock-heading .lead { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
#unlockForm { display: grid; gap: 10px; }
#unlockPin { height: 48px; min-height: 48px; padding: 8px 12px; font-size: 22px; border-radius: 12px; }
#numericPad { gap: 8px; }
#numericPad button { height: 48px; min-height: 48px; border-radius: 12px; font-size: 20px; font-weight: 550; }
#numericPad button:nth-child(10), #numericPad button:nth-child(12) { font-size: 13px; }
#unlockForm > button[type=submit] { min-height: 44px; border-radius: 12px; font-size: 14px; }
.lock-account-actions { display: flex; justify-content: center; gap: 4px 8px; }
.lock-account-actions:not(:has(> button:not([hidden]))) { display: none; }
.lock-account-actions button { flex: 1; min-width: 0; min-height: 44px; padding: 8px; background: transparent; color: var(--text-secondary); border-radius: 12px; font-size: 12px; font-weight: 500; }
.lock-account-actions button:hover { background: var(--bg-secondary); }
@media(max-height:600px) {
  .app-shell[data-screen="lock"] { padding-block: max(12px, env(safe-area-inset-top)); gap: 8px; }
  #lockScreen { gap: 12px; }
  #numericPad button { height: 44px; min-height: 44px; }
}
@media(min-width:600px) and (max-height:480px) {
  .app-shell[data-screen="lock"] { width: min(100%, 620px); }
  #lockScreen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: 24px; }
  #lockScreen .lock-heading { grid-column: 1; grid-row: 1; align-self: start; }
  #unlockForm { grid-column: 2; grid-row: 1 / span 2; }
  .lock-account-actions { grid-column: 1; grid-row: 2; flex-direction: column; align-self: end; }
}
.app-shell[data-screen="lock"][data-update-visible="true"] { align-content: start; }
/* Settings: left-aligned heading, compact category navigation on laptops. */
.conversation-panel.is-settings { padding: 16px 20px; }
.is-settings .settings-pane { max-width: none; margin: 0; }
.settings-heading { justify-content: flex-start; gap: 8px; min-height: 52px; }
.settings-heading .back-button { flex: 0 0 44px; width: 44px; min-height: 44px; padding: 10px; }
.settings-heading h2 { font-size: 22px; }
.settings-layout { display: grid; grid-template-rows: auto minmax(0,1fr); gap: 12px; min-height: 0; min-width: 0; }
.settings-category-nav { display: none; }
.settings-category-nav:has(.devices-setting) { display: flex; }
.settings-category-nav > [data-settings-category] { display: none; }
.settings-category-nav .devices-setting { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 2px; }
.settings-category-nav #connectedDevicesButton { display: flex; align-items: center; gap: 10px; padding: 10px; min-height: 44px; color: var(--text-secondary); background: transparent; font-size: 14px; }
.settings-category-nav #connectedDevicesButton svg { width: 19px; height: 19px; color: var(--accent-ink); }
.settings-layout > .settings-sections { min-width: 0; min-height: 0; }
@media(min-width:1100px) {
 .settings-layout { grid-template-columns: 188px minmax(0,1fr); grid-template-rows: minmax(0,1fr); gap: 24px; }
 .settings-category-nav, .settings-category-nav:has(.devices-setting) { display: flex; flex-direction: column; gap: 4px; align-self: stretch; overflow-y: auto; padding: 2px 0 16px; }
 .settings-category-nav > [data-settings-category] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; background: transparent; color: var(--text-secondary); text-align: left; font-size: 14px; font-weight: 500; }
 .settings-category-nav > [data-settings-category] svg { flex: 0 0 19px; width: 19px; height: 19px; }
 .settings-category-nav > [data-settings-category]:hover { background: var(--bg-secondary); }
 .settings-category-nav > [data-settings-category].is-active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
 .settings-category-nav .devices-setting { border: 0; border-top: 1px solid var(--line); border-radius: 0; margin-top: 8px; padding-top: 8px; }
 .settings-layout > .settings-sections { width: 100%; padding: 2px 4px 16px; justify-self: stretch; }
 .settings-layout .settings-section:not([open]) { display: none; }
 .settings-layout .settings-section[open] { border: 0; border-radius: 0; background: transparent; }
 .settings-layout .settings-section > summary { padding: 8px 0 20px; cursor: default; font-size: 18px; color: var(--text-primary); }
 .settings-layout .settings-section > summary::after { display: none; }
 .settings-layout .settings-section-body { padding: 0; }
 .settings-layout .profile-form > button { justify-self: start; width: auto; min-width: 180px; min-height: 44px; padding: 10px 20px; }
}
@media(max-width:760px) { .conversation-panel.is-settings { padding: 12px; } }
@media(min-width:1100px) {
 .settings-category-nav #connectedDevicesButton { padding: 8px 0; gap: 8px; white-space: nowrap; font-size: 13px; }
}
/* Public identity is an optional metadata module, visually separate from call privacy. */
.public-profile-settings { display: grid; gap: 12px; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.public-profile-settings h3 { margin: 0; font-size: 17px; }
.profile-visibility { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-secondary); }
.profile-visibility button { min-height: 44px; border-radius: 10px; background: transparent; color: var(--text-secondary); }
.profile-visibility button[aria-pressed=true] { color: var(--accent-ink); background: var(--bg-surface); }
[data-public-profile-form] fieldset { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 16px 0 0; border: 0; }
[data-public-profile-form] legend { font-size: 14px; font-weight: 650; padding: 0; }
[data-public-profile-form] label { display: grid; gap: 6px; font-size: 13px; color: var(--text-secondary); }
[data-public-profile-form] textarea { box-sizing: border-box; resize: vertical; max-width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-surface); color: var(--ink); font: inherit; }
[data-public-profile-form] .public-requests { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.public-requests input { width: 22px; min-height: 22px; height: 22px; accent-color: var(--accent-ink); }
.public-profile-dialog { width: min(480px,calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); margin: auto; padding: 24px; overflow-y: auto; background: var(--bg-surface); color: var(--ink); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 20px 64px var(--shadow-color); }
.public-profile-dialog::backdrop { background: var(--overlay-scrim); }
.public-profile-dialog h2 { margin: 0 40px 20px 0; font-size: 22px; line-height: 1.3; }
.profile-confirm h2 { margin: 0 0 16px; }
.profile-confirm > p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.profile-confirm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.profile-confirm-actions > button { flex: 1 1 160px; min-height: 44px; margin: 0; }
.profile-close { position: absolute; right: 12px; top: 12px; background: transparent; color: var(--muted); }
.people-search { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 8px; margin-bottom: 12px; }
.profile-results { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 4px; }
.public-profile-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 8px; background: transparent; color: var(--ink); text-align: left; border-radius: 14px; font-weight: 400; }
.public-profile-row:hover { background: var(--bg-secondary); }
.public-profile-row .avatar { flex: 0 0 44px; object-fit: cover; }
.profile-result-copy { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
.profile-result-copy strong { font-size: 15px; }
.profile-result-copy small, .profile-result-bio { color: var(--muted); font-size: 13px; line-height: 1.45; }
.public-profile-header { display: grid; justify-items: center; gap: 10px; margin: 20px 0; text-align: center; overflow-wrap: anywhere; }
.public-profile-header .avatar { width: 80px; height: 80px; object-fit: cover; font-size: 24px; }
.public-profile-header h2 { margin: 0; }
.public-profile-header > p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.public-profile-bio { white-space: pre-wrap; }
[data-profile-connect], [data-profile-message] { width: 100%; min-height: 44px; margin-top: 8px; }
.public-profile-more { margin: 12px 0; }
.public-profile-more summary { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; color: var(--muted); list-style: none; }
.public-profile-more summary::-webkit-details-marker { display: none; }
.public-profile-more button { display: block; width: 100%; min-height: 44px; margin-top: 6px; }
[data-discovery-status], [data-profile-settings-status] { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 8px 0; }
[data-report-form] { display: grid; gap: 12px; }
[data-report-form] label { display: grid; gap: 8px; font-size: 14px; }
@media(max-width:760px) {
 .public-profile-dialog { width: 100%; max-height: calc(100dvh - 16px); margin: auto 0 0; border-radius: 24px 24px 0 0; padding: 24px 20px max(20px,env(safe-area-inset-bottom)); }
}

/* Account metadata and Discover share the established theme tokens. */
.discover-pane { height:100%; overflow-y:auto; padding:28px; }
.profile-discovery-content { width:min(920px,100%); margin:0 auto; }
.discover-heading h2 { font-size:26px; margin:0 0 20px; }
.discover-tabs { display:flex; gap:8px; margin-bottom:24px; }
.discover-tabs button { background:transparent; color:var(--muted); padding:10px 18px; }
.discover-tabs [aria-selected=true] { background:var(--bg-secondary); color:var(--accent); }
.discover-pane .profile-results { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; padding:0; list-style:none; }
.discover-pane .public-profile-row { border:1px solid var(--line); min-height:94px; padding:16px; height:100%; }
.profile-result-copy { min-width:0; }
.profile-result-bio { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.profile-view-actions { display:flex;justify-content:center;gap:12px; }
.profile-view-actions button { width:auto;min-width:120px; }
.profile-form fieldset { display:grid;gap:16px;border:0;padding:0;margin:0;min-width:0; }
.profile-form textarea { width:100%;box-sizing:border-box;resize:vertical;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:12px;font:inherit; }
.profile-form .profile-preview .avatar { width:72px;height:72px;object-fit:cover; }
.profile-import { display:grid;gap:12px;padding:16px;border:1px solid var(--line);border-radius:18px; }
.profile-import h3,.profile-import p { margin:0; }
.avatar { object-fit:cover; }
@media(max-width:760px){
 .discover-pane {padding:20px 16px;}
 .discover-pane .profile-results {grid-template-columns:1fr;}
}

.discover-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;}
.discover-heading h2 {margin:0;}
.discover-profile-entry .avatar {width:40px;height:40px;font-size:13px;}

.contact-handle {display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px;font-weight:400;line-height:1.25;}
.thread-title .contact-handle {margin-top:2px;}
.conversation-copy:has(.contact-handle) {gap:2px;}

/* Decrypted media stays in memory; a modal gallery owns only local Blob URLs. */
/* Immersive top-layer viewer. Only transforms/opacity change during gestures. */
.media-viewer { --viewer-opacity:1; box-sizing:border-box; position:fixed; inset:0; width:100%; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; overflow:hidden; color:#f7fbfa; background:rgba(0,0,0,var(--viewer-opacity)); overscroll-behavior:none; }
.media-viewer[open] { display:block; }
.media-viewer::backdrop { background:transparent; }
.media-viewer-stage { position:absolute; inset:0; overflow:hidden; touch-action:none; overscroll-behavior:none; }
.media-viewer-visual,.media-viewer-neighbors,.media-viewer-neighbor { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transform-origin:center; }
.media-viewer-visual,.media-viewer-neighbors { will-change:transform; }
.media-viewer-neighbors { pointer-events:none; }
.media-viewer-neighbor { right:auto; width:100%; background-size:contain; background-position:center; background-repeat:no-repeat; }
.media-viewer-stage img,.media-viewer-stage video { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }
.media-viewer-stage audio { width:min(600px,90%); }
.media-viewer-header { position:absolute; z-index:2; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 18px max(16px,env(safe-area-inset-left)); background:linear-gradient(#000b,transparent); }
.media-viewer-header h2 { margin:0; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.media-viewer-actions,.media-viewer footer { display:flex; align-items:center; justify-content:center; gap:10px; }
.media-viewer-actions a { color:#fff; font-size:13px; }
.media-viewer button { min-width:44px; min-height:44px; padding:8px 12px; background:#172125d9; color:#fff; border:1px solid #ffffff35; border-radius:12px; touch-action:manipulation; }
.media-viewer footer { position:absolute; z-index:2; inset:auto 0 0; padding:18px max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); background:linear-gradient(transparent,#000b); flex-wrap:wrap; }
.media-viewer output { font-size:13px; font-variant-numeric:tabular-nums; }
.media-viewer-header,.media-viewer footer { transition:opacity .15s ease; }
.media-viewer.tools-hidden .media-viewer-header,.media-viewer.tools-hidden footer { opacity:0; pointer-events:none; }
.media-viewer.is-settling .media-viewer-visual,.media-viewer.is-settling .media-viewer-neighbors { transition:transform .18s ease-out; }
.media-viewer.is-settling { transition:background-color .18s ease-out; }
.media-viewer-fallback { padding:24px; color:#e6eded; text-align:center; font-size:14px; }
body.media-viewer-open { overflow:hidden; overscroll-behavior:none; }
@media(prefers-reduced-motion:reduce) { .media-viewer *, .media-viewer.is-settling { transition:none!important; } }
/* Preserve ordinary attachment/progress presentation outside the viewer. */
.attachment-pending { display:flex; flex-direction:column; gap:8px; min-width:160px; padding:12px; }
.attachment-pending small,.attachment-transfer { color:var(--muted); font-size:12px; }
.attachment-transfer { margin:6px 0; }
button.attachment-preview:not(.adaptive-photo) { display:block; padding:0; border:0; background:transparent; width:100%; }
.attachment-pending.adaptive-photo { min-width:0; }
/* Native video controls must stay above the gallery toolbar/home indicator. */
.media-viewer[data-media-kind="video"] .media-viewer-visual { inset:calc(64px + env(safe-area-inset-top)) 0 calc(76px + env(safe-area-inset-bottom)); }

/* One visual group, distinct keyed messages and deadlines. */
.message.group-continuation { margin-top:-7px; }
.message.in.group-joined > p[data-i18n-ignore],.message.in.group-joined > .file-card { border-bottom-left-radius:4px; }
.message.in.group-continuation > p[data-i18n-ignore],.message.in.group-continuation > .file-card { border-top-left-radius:4px; }
.message.out.group-joined > p[data-i18n-ignore],.message.out.group-joined > .file-card { border-bottom-right-radius:4px; }
.message.out.group-continuation > p[data-i18n-ignore],.message.out.group-continuation > .file-card { border-top-right-radius:4px; }
.message-failure { color:var(--danger,#ad4141); font-size:12px; max-width:100%; overflow-wrap:anywhere; }
.message-status { display:block; padding:2px 1px; }

/* File type colors identify the format; content validation controls readers. */
.file-card,.file-stack-card,.document-collection-row { --file-accent:#667780; }
[data-file-accent=pdf] { --file-accent:#b95e63; }
[data-file-accent=archive] { --file-accent:#a27b35; }
[data-file-accent=text] { --file-accent:#507eac; }
[data-file-accent=code] { --file-accent:#31888c; }
[data-file-accent=sheet] { --file-accent:#468960; }
.file-card { display:grid; grid-template-columns:38px minmax(0,1fr); gap:8px 12px; width:280px; max-width:100%; box-sizing:border-box; padding:14px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:var(--surface-soft); box-shadow:0 2px 7px #0001; text-align:left; cursor:pointer; }
.file-card:hover,.document-collection-row:hover { border-color:var(--file-accent); }
.file-icon { display:grid; place-items:center; width:36px; height:42px; border-radius:8px; color:var(--file-accent); background:color-mix(in srgb,var(--file-accent) 12%,var(--surface)); font-size:22px; }
.file-copy { display:grid; gap:5px; min-width:0; }
.file-copy strong { overflow-wrap:anywhere; font-size:14px; line-height:1.35; }
.file-copy small,.file-stack-card small { color:var(--muted); font-size:11px; }
.file-private { font-size:10px; }
.file-action { grid-column:2; color:var(--accent-ink); font-size:11px; font-weight:600; }
.album-attachment.has-documents { width:300px; }
.album-attachment.has-documents .photo-stack { width:var(--photo-width); max-width:100%; }
.file-stack-wrap { box-sizing:border-box; padding:12px 10px 4px; width:280px; max-width:100%; }
.file-stack { position:relative; display:block; width:100%; height:162px; border:0; padding:0; background:transparent; text-align:left; cursor:pointer; }
.file-stack-card { position:absolute; display:grid; align-content:start; gap:7px; inset:0; padding:14px; border:1px solid var(--line); border-top:3px solid var(--file-accent); border-radius:14px; background:var(--surface-soft); color:var(--ink); box-shadow:0 4px 12px #0002; z-index:3; }
.file-stack-card[data-card-index="1"] { z-index:2; transform:translate(-6px,-4px) rotate(-4deg); }
.file-stack-card[data-card-index="2"] { z-index:1; transform:translate(6px,-6px) rotate(4deg); }
.file-stack-card .file-icon { width:28px; height:28px; font-size:18px; }
.file-stack-card small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:34px; }
.file-stack-count { position:absolute; right:12px; bottom:12px; padding:5px 8px; border-radius:20px; color:var(--ink); background:var(--surface); border:1px solid var(--line); font-size:12px; }

/* Shared viewer shell; documents retain normal scrolling/selection. */
.media-viewer.document-viewer { background:var(--surface); color:var(--ink); display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.document-viewer .media-viewer-header { background:var(--surface); color:var(--ink); min-width:0; gap:8px; border-bottom:1px solid var(--line); }
.document-viewer .media-viewer-header h2 { color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.document-viewer button,.document-viewer a { color:var(--ink); background:var(--surface-soft); border:1px solid var(--line); border-radius:8px; min-height:36px; padding:7px 10px; font-size:13px; text-decoration:none; }
.document-viewer footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); background:var(--surface); border-top:1px solid var(--line); color:var(--ink); max-height:32dvh; overflow-y:auto; }
.document-viewer footer input { min-width:0; max-width:100%; width:180px; padding:8px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--surface-soft); font-size:14px; }
.document-viewer footer input[type=number] { width:55px; }
.document-viewer footer output { font-size:12px; min-width:38px; }
.document-viewer .document-stage { position:relative; display:block; overflow:auto; overscroll-behavior:contain; touch-action:pan-x pan-y; min-height:0; min-width:0; padding:16px max(16px,env(safe-area-inset-right)) 24px max(16px,env(safe-area-inset-left)); box-sizing:border-box; user-select:text; }
.document-content { max-width:800px; margin:0 auto; min-width:0; overflow-wrap:anywhere; line-height:1.65; font-size:16px; }
.document-content h1,.document-content h2,.document-content h3 { line-height:1.25; margin:1.2em 0 .6em; }
.document-content p,.document-content ul,.document-content ol,.document-content blockquote { margin:0 0 1em; }
.document-content ul,.document-content ol { padding-left:1.5em; }
.document-content blockquote { padding-left:14px; border-left:3px solid var(--line); color:var(--muted); }
.document-content pre { white-space:pre-wrap; overflow-wrap:anywhere; padding:12px; background:var(--surface-soft); border-radius:8px; font:13px/1.6 ui-monospace,monospace; }
.document-content pre.no-wrap { white-space:pre; overflow-x:auto; overflow-wrap:normal; }
.document-content code { font-family:ui-monospace,monospace; }
.document-content table { display:block; overflow-x:auto; max-width:100%; border-collapse:collapse; margin-bottom:16px; }
.document-content th,.document-content td { border:1px solid var(--line); padding:6px 12px; }
.document-content a { color:var(--accent-ink); background:none; border:0; padding:0; text-decoration:underline; }
.document-content mark { background:#ffe084; color:#242018; border-radius:2px; }
.document-content mark.is-current { outline:2px solid #aa6d00; }
.document-modes { display:flex; gap:4px; }
.document-modes [aria-pressed=true] { border-color:var(--accent-ink); color:var(--accent-ink); }
.document-json { font:13px/1.7 ui-monospace,monospace; }
.json-children { padding-left:15px; border-left:1px solid var(--line); }
.json-row { min-width:0; overflow-wrap:anywhere; }
.json-string { color:var(--accent-ink); }
.json-number { color:var(--file-accent,#5688a5); }
.json-boolean,.json-null { color:var(--muted); font-weight:600; }
.document-collection-row { display:grid; gap:6px; width:100%; max-width:680px; margin:0 auto 10px; text-align:left; border-left:3px solid var(--file-accent)!important; }
.document-collection-row strong { overflow-wrap:anywhere; }
.document-collection-row small { color:var(--muted); }
.document-content.pdf-pages { display:grid; justify-items:center; align-content:start; gap:16px; max-width:none; width:max-content; min-width:100%; }
.pdf-page { position:relative; background:#fff; color:#111; box-shadow:0 2px 8px #0003; flex-shrink:0; --scale-round-x:1px; --scale-round-y:1px; }
.pdf-page canvas { display:block; }
/* Text-layer adaptations: Copyright 2014 Mozilla Foundation; Apache-2.0.
 * Modified for Blink scoping/search; full license in vendor/pdfjs/LICENSE. */
.pdf-page .textLayer { position:absolute; inset:0; overflow:clip; line-height:1; text-align:initial; text-size-adjust:none; forced-color-adjust:none; transform-origin:0 0; z-index:2; caret-color:CanvasText; --min-font-size:1; --text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv:calc(1 / var(--min-font-size)); }
.pdf-page .textLayer :is(span,br) { color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0% 0%; }
.pdf-page .textLayer > :not(.markedContent),.pdf-page .textLayer .markedContent span:not(.markedContent) { z-index:1; --font-height:0; font-size:calc(var(--font-height) * var(--text-scale-factor)); --scale-x:1; --rotate:0deg; transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); }
.pdf-page .textLayer .markedContent { display:contents; }
.pdf-page .textLayer .pdf-search-match { background:#ffdf6677; }
.pdf-page .textLayer ::selection { background:#4a99df66; }
@media(min-width:1100px) { .media-viewer.document-viewer { width:min(1100px,100vw); height:96dvh; margin:auto; border:1px solid var(--line); border-radius:14px; } }
.document-viewer .media-viewer-header,.document-viewer footer { position:relative; inset:auto; }
.document-viewer .document-stage { inset:auto; }