html, body { background: var(--surface-page); color: var(--ink-primary); font-family: var(--family-font); }
/* The chosen glow sits on a fixed layer behind the page; html keeps the plain
   page colour so the status-bar edge never changes. */
html[data-glow]:not([data-glow="none"]) body { background: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--glow-image); }
.ui-icon { display: inline-block; width: var(--icon-normal); height: var(--icon-normal); vertical-align: middle; flex: none; }
.primary, .ghost, .back-link, .rsvp button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
.primary { background: var(--action-primary); color: var(--ink-on-accent); box-shadow: none; border-radius: var(--radius-control); min-height: var(--control-height); transition: background var(--motion-fast), transform var(--motion-fast); }
.primary:hover { background: var(--action-hover); transform: none; }
.primary:active { transform: scale(.97); }
.primary:disabled { background: var(--ink-secondary); color: var(--ink-on-accent); opacity: var(--loading-opacity); cursor: wait; }
.ghost { background: var(--surface-card); border-color: var(--line-soft); color: var(--ink-primary); min-height: var(--touch-normal); border-radius: var(--radius-control); box-shadow: none; }
.ghost:hover { background: var(--surface-soft); }
.orange, .eyebrow.orange { color: var(--action-primary); }
.eyebrow { font-size: var(--text-micro); color: var(--ink-secondary); letter-spacing: .12em; line-height: 1.5; }
.muted, .form-help, .section-note, .muted-small { color: var(--ink-secondary); }
.main { padding: calc(var(--space-6) + env(safe-area-inset-top)) var(--space-5) calc(var(--nav-height) + var(--space-10) + var(--safe-bottom)); }
.topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; margin-bottom: var(--space-7); }
/* Phones: the bell, avatar and + sit at the same height on every tab, where the chat
   tab's one-line intro puts them, however many lines a tab's intro wraps to. */
@media (max-width: 720px) { /* ds-allow-hardcode: existing mobile fullscreen breakpoint */
  .topbar > :last-child { align-self: start; margin-top: 27px; }
}
.topbar h1 { color: var(--ink-primary); font-size: var(--text-title); letter-spacing: -.055em; line-height: 1.25; margin: var(--space-2) 0 var(--space-3); font-weight: 750; }
.topbar .muted { font-size: var(--text-small); line-height: 1.8; }
.topbar .eyebrow { margin-bottom: 0; }
.top-actions { gap: var(--space-2); }
.top-actions #accountButton { display: inline-flex; width: var(--touch-normal); height: var(--touch-normal); padding: var(--space-1); border-radius: var(--radius-pill); }
#accountButton .avatar { width: 100%; height: 100%; border-radius: inherit; }
.topbar #newButton { width: var(--touch-normal); min-width: var(--touch-normal); height: var(--touch-normal); padding: 0; border-radius: var(--radius-pill); }
#newButtonLabel { display: none; }
.logo { color: var(--ink-primary); font-size: var(--text-modal); gap: var(--space-2); }
.logo-mark { background: var(--action-primary); width: var(--space-10); height: var(--space-10); padding: 0; border-radius: var(--radius-small); box-shadow: none; }
.logo-mark .ui-icon { width: var(--icon-large); height: var(--icon-large); }
.logo-dot { color: var(--action-primary); }
.panel { background: var(--surface-card); border-color: var(--line-soft); border-radius: var(--radius-card); box-shadow: none; }
.chats-layout.show-list { height: auto; min-height: 0; overflow: visible; }
.chats-layout.show-list .chat-list { height: auto; min-height: inherit; padding-bottom: 0; overflow: visible; border: 0; }
.list-heading { padding: var(--space-5); border-color: var(--line-soft); }
.list-heading h2 { font-size: var(--text-small); color: var(--ink-secondary); font-weight: 600; }
.list-heading > span { color: var(--ink-secondary); background: var(--surface-soft); border-radius: var(--radius-pill); padding: var(--space-1) var(--space-2); font-size: var(--text-micro); }
.chat-row { padding: var(--space-4); gap: var(--space-2); border-color: var(--line-soft); background: transparent; }
.chat-row.selected, .chat-row:hover { background: var(--surface-accent); }
.chat-row-main { gap: var(--space-3); min-height: var(--touch-normal); }
.chat-row .avatar { width: var(--avatar-normal); height: var(--avatar-normal); background: var(--surface-accent); font-size: var(--text-input); }
.chat-avatar:not(img) { color: var(--action-primary); background: var(--surface-accent); }
.chat-copy strong { font-size: var(--text-input); color: var(--ink-primary); font-weight: 650; margin: 0 0 var(--space-1); }
.chat-copy small { font-size: var(--text-small); color: var(--ink-secondary); line-height: 1.5; }
.chat-time { color: var(--ink-secondary); font-size: var(--text-micro); white-space: nowrap; }
.chat-row-status { display: flex; flex: none; flex-direction: column; align-items: flex-end; justify-content: center; gap: var(--space-1); }
.chat-unread { display: inline-grid; place-items: center; min-width: var(--icon-normal); height: var(--icon-normal); padding: 0 var(--space-1); border-radius: var(--radius-pill); background: var(--action-primary); color: var(--ink-on-accent); font-size: var(--text-micro); font-weight: 750; line-height: 1; }
.chat-row-more { width: var(--touch-small); height: var(--touch-small); color: var(--ink-secondary); border-radius: var(--radius-pill); }
.chat-row-more:hover { background: var(--surface-soft); }
.section-note { font-size: var(--text-caption); line-height: 1.8; margin-bottom: var(--space-5); display: flex; gap: var(--space-2); align-items: flex-start; }
.section-note .ui-icon { width: var(--icon-small); height: var(--icon-small); margin-top: var(--space-1); }
.cards { gap: var(--space-4); }
.event-card { padding: var(--space-5); grid-template-columns: var(--space-12) minmax(0, 1fr); gap: var(--space-4); }
.date-tile { background: var(--surface-accent); color: var(--action-selected); border-radius: var(--radius-control); height: var(--nav-height); }
.date-tile small { font-size: var(--text-micro); font-weight: 600; }
.date-tile strong { font-size: var(--text-modal); }
.event-card-head h2 { color: var(--ink-primary); font-size: var(--text-section); line-height: 1.5; font-weight: 650; }
.event-options { color: var(--ink-secondary); min-height: var(--touch-small); }
.card-main p { color: var(--ink-secondary); font-size: var(--text-small); line-height: 1.8; margin-bottom: var(--space-4); }
.meta-row { color: var(--ink-secondary); font-size: var(--text-caption); line-height: 1.7; gap: var(--space-3); margin-bottom: var(--space-3); }
.meta-row > span { display: inline-flex; align-items: center; gap: var(--space-1); }
.meta-row .ui-icon { width: var(--icon-small); height: var(--icon-small); }
.card-footer { gap: var(--space-4); }
.muted-small { font-size: var(--text-caption); }
.rsvp { gap: var(--space-2); }
.rsvp button { padding: var(--space-2) var(--space-3); min-height: var(--touch-small); border-radius: var(--radius-pill); color: var(--ink-secondary); border-color: var(--line-soft); background: var(--surface-card); font-size: var(--text-caption); }
.rsvp button.selected { color: var(--action-selected); border-color: var(--line-strong); background: var(--surface-accent); font-weight: 650; }
.rsvp button:hover { background: var(--surface-soft); }
.album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.album-card { border-color: var(--line-soft); border-radius: var(--radius-card); background: var(--surface-card); box-shadow: none; color: var(--ink-primary); transition: transform var(--motion-normal) var(--ease-standard), box-shadow var(--motion-normal); }
.album-card:hover { transform: translateY(calc(var(--space-1) * -1)); box-shadow: var(--shadow-soft); }
.album-preview { height: auto; aspect-ratio: 4 / 3; background: var(--surface-soft); color: var(--action-primary); }
.album-preview > .ui-icon { width: var(--space-10); height: var(--space-10); }
.album-preview::after { background: transparent; }
/* Album cards are buttons, and Safari centres a button's content vertically. Cards
   stretched to the row height then pushed the cover down under a white strip, so
   lay the card out as a column from the top. */
.album-card { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
.album-card > .album-preview { flex: none; width: 100%; }
.album-body { flex: 1; padding: var(--space-4); }
.album-body h2 { font-size: var(--text-body); line-height: 1.6; margin-bottom: var(--space-1); overflow-wrap: anywhere; }
.album-body p { color: var(--ink-secondary); font-size: var(--text-caption); line-height: 1.7; margin-bottom: var(--space-3); }
.album-body .meta-row { flex-direction: column; gap: var(--space-1); font-size: var(--text-micro); }
.album-detail-head { gap: var(--space-3); flex-wrap: wrap; align-items: flex-start; margin-bottom: var(--space-6); }
.album-detail-head h2 { font-size: var(--text-modal); letter-spacing: -.04em; line-height: 1.5; margin: var(--space-3) 0 var(--space-1); }
.album-detail-head p { color: var(--ink-secondary); font-size: var(--text-small); }
.album-detail-head > div:last-child { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.album-detail-head .tiny { font-size: var(--text-caption); min-height: var(--touch-small); padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill); }
.back-link { min-height: var(--touch-small); color: var(--action-primary); font-size: var(--text-small); }
.photo-grid { gap: var(--space-3); }
.photo-card { border-radius: var(--photo-radius); background: var(--surface-soft); }
.notice-row { padding: var(--space-5); gap: var(--space-3); background: var(--surface-card); border-color: var(--line-soft); }
.notice-row:first-child { border-radius: var(--radius-card) var(--radius-card) 0 0; }
.notice-row:last-child { border-bottom: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); }
.notice-row.unread { background: var(--surface-accent); }
.notice-icon { width: var(--touch-normal); height: var(--touch-normal); border-radius: var(--radius-control); background: var(--surface-soft); color: var(--action-primary); }
.notice-row.unread .notice-icon { background: var(--surface-card); }
.notice-copy { min-width: 0; }
.notice-copy strong { font-size: var(--text-body); line-height: 1.7; font-weight: 600; margin-bottom: var(--space-1); color: var(--ink-primary); }
.notice-copy small { color: var(--ink-secondary); font-size: var(--text-caption); }
.notice-dot { background: var(--action-primary); flex: none; }
.empty-state { padding: var(--space-12) var(--space-6); color: var(--ink-secondary); }
.empty-icon { width: var(--nav-height); height: var(--nav-height); background: var(--surface-accent); color: var(--action-primary); border-radius: var(--radius-card); margin-bottom: var(--space-5); }
.empty-icon .ui-icon { width: var(--space-8); height: var(--space-8); }
.empty-state h3 { font-size: var(--text-section); color: var(--ink-primary); }
.empty-state p { font-size: var(--text-small); line-height: 1.8; }
.room-header { background: var(--surface-glass); border-color: var(--line-soft); }
.room-header strong { color: var(--ink-primary); }
.room-header small { color: var(--ink-secondary); }
.messages, .chat-open .messages { background: var(--glow-image), var(--chat-surface); }
.message .bubble { background: var(--chat-incoming); color: var(--ink-primary); border-radius: var(--radius-control); }
.message.mine .bubble { background: var(--action-primary); color: var(--ink-on-accent); }
/* Text bubbles hug their own text instead of stretching to the name/time line. */
.message .bubble:not(.rich-bubble) { width: fit-content; max-width: 100%; }
.message.mine .bubble:not(.rich-bubble) { margin-left: auto; }
.message .rich-bubble, .message.mine .rich-bubble { background: var(--surface-card); color: var(--ink-primary); border-color: var(--line-soft); border-radius: var(--radius-card); box-shadow: none; }
.rich-caption, .rich-link, .rich-button { color: var(--action-primary); }
.rich-caption { display: flex; align-items: center; gap: var(--space-2); }
.rich-caption .ui-icon { width: var(--icon-small); height: var(--icon-small); }
.message-meta, .rich-detail { color: var(--ink-secondary); }
.message > .avatar { width: var(--avatar-small); height: var(--avatar-small); }
.message-recalled .bubble, .message.mine.message-recalled .bubble { background: transparent; color: var(--ink-secondary); }
.composer, .chat-open .composer { background: var(--surface-card); border-color: var(--line-soft); }
.composer textarea { border-color: var(--line-soft); color: var(--ink-primary); background: var(--surface-page); }
.composer textarea::placeholder { color: var(--ink-quiet); }
.composer .compose-icon, .chat-open .composer .compose-icon { min-width: var(--touch-small); width: var(--touch-small); color: var(--ink-secondary); }
.composer .send-button, .chat-open .composer .send-button { background: var(--action-primary); color: var(--ink-on-accent); border-radius: var(--radius-pill); }
.chat-open .room-header {
  /* An opaque sticky bar at the top edge makes iOS 26 tint the status bar instead of blurring it. */
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.chat-open .room-header small { font-size: var(--text-micro); }
/* Match the status-bar area to the chat header so iOS shows no tinted fade above it. */
html.chat-open, html.chat-open body { background: var(--surface-card); }
/* Without viewport-fit=cover iOS reports no bottom inset; keep controls above the home indicator. */
html.ios-standalone { --safe-bottom: max(env(safe-area-inset-bottom), var(--space-5)); }
.chat-tools { background: var(--surface-page); border-color: var(--line-soft); gap: var(--space-2); }
.chat-tool { background: var(--surface-card); border-color: var(--line-soft); color: var(--ink-secondary); }
.chat-tool-icon .ui-icon { width: var(--icon-large); height: var(--icon-large); }
.message-quote { border: 1px solid var(--line-soft); border-radius: var(--radius-small); }
.message.mine .message-quote { color: var(--ink-on-accent); background: transparent; border-color: var(--glass-line); }
.form-grid { gap: var(--space-5); }
.form-grid label, .login-inner label { color: var(--ink-primary); font-size: var(--text-small); font-weight: 600; }
.form-control, .login-inner input { border-color: var(--line-strong); background: var(--surface-card); color: var(--ink-primary); border-radius: var(--radius-small); min-height: var(--control-height); font-size: var(--text-input); }
.form-control:focus, .composer textarea:focus { border-color: var(--action-primary); box-shadow: 0 0 0 var(--space-1) var(--focus-ring); }
.form-help { font-size: var(--text-caption); line-height: 1.8; }
.form-error { color: var(--action-danger); }
.modal-actions { gap: var(--space-2); flex-wrap: wrap; }
.modal-actions button { min-height: var(--touch-normal); }
dialog:not(.album-photo-viewer):not(.message-context):not(.event-context):not(.readers-popup):not(#orientationGuard) { background: var(--surface-card); color: var(--ink-primary); border-radius: var(--radius-large); box-shadow: var(--shadow-modal); }
#modal { width: min(94vw, var(--modal-width)); }
/* Dialog motion: the whole app dims to a neutral grey while the dialog rises into place. */
#modal::backdrop { background: var(--scrim); backdrop-filter: none; -webkit-backdrop-filter: none; }
#modal[open] { animation: modal-in var(--motion-sheet) var(--ease-standard); }
#modal[open]::backdrop { animation: scrim-in var(--motion-sheet) ease-out; }
#modal.closing { animation: modal-out var(--motion-normal) ease-in forwards; pointer-events: none; }
#modal.closing::backdrop { animation: scrim-out var(--motion-normal) ease-in forwards; }
@keyframes modal-in { from { opacity: 0; transform: translateY(var(--space-12)) scale(.96); /* ds-allow-hardcode: subtle sheet scale */ } }
@keyframes modal-out { to { opacity: 0; transform: translateY(var(--space-12)) scale(.96); /* ds-allow-hardcode: subtle sheet scale */ } }
@keyframes scrim-in { from { opacity: 0; } }
@keyframes scrim-out { to { opacity: 0; } }
#modal .sheet-grabber { display: none; }
/* Phones: an iOS-style page sheet that fills the screen below a small gap, with a grabber to pull it down. */
@media (max-width: 720px) {
  #modal {
    position: fixed; inset: var(--space-3) 0 0 0; margin: 0; width: 100%; max-width: none; height: auto; max-height: none;
    border-radius: var(--radius-large) var(--radius-large) 0 0; overflow-y: auto; overscroll-behavior: contain;
    padding-bottom: var(--safe-bottom); transition: transform var(--motion-normal) var(--ease-standard);
  }
  #modal.dragging { transition: none; }
  #modal[open] { animation-name: sheet-in; }
  #modal.closing { animation-name: sheet-out; }
  #modal .sheet-grabber { display: block; position: sticky; top: 0; z-index: 1; height: var(--space-6); background: var(--surface-card); touch-action: none; cursor: grab; }
  #modal .sheet-grabber::before {
    content: ""; position: absolute; top: var(--space-2); left: 50%; width: var(--space-10); height: var(--space-1);
    transform: translateX(-50%); border-radius: var(--radius-pill); background: var(--line-strong);
  }
  #modal .modal-wrap { padding-top: var(--space-2); }
  #modal .modal-head { touch-action: none; }
}
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes sheet-out { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  #modal[open], #modal[open]::backdrop, #modal.closing, #modal.closing::backdrop { animation: none; }
  #modal { transition: none; }
}
.modal-wrap { padding: var(--space-6); }
.modal-head { margin-bottom: var(--space-6); gap: var(--space-3); }
.modal-head h2 { font-size: var(--text-modal); color: var(--ink-primary); margin-top: var(--space-2); letter-spacing: -.04em; }
.close { min-width: var(--touch-small); min-height: var(--touch-small); color: var(--ink-secondary); display: grid; place-items: center; border-radius: var(--radius-pill); }
.close:hover { background: var(--surface-soft); }
.toast { background: var(--ink-primary); border-radius: var(--radius-pill); padding: var(--space-3) var(--space-5); box-shadow: var(--shadow-float); }
.push-status--on { color: var(--feedback-success); background: var(--feedback-success-soft); }
.push-status--off { color: var(--feedback-warning); background: var(--feedback-warning-soft); }
.primary.push-enable { background: var(--feedback-success); box-shadow: none; }
.ghost.push-disable { color: var(--action-danger); }
.login-screen { background: var(--surface-card); }
.login-art { background: var(--surface-accent); }
.login-panel { padding: var(--space-8) var(--space-6) var(--space-10); }
.login-inner h2 { color: var(--ink-primary); font-size: var(--text-title); letter-spacing: -.05em; line-height: 1.3; }
.login-inner .muted { color: var(--ink-secondary); font-size: var(--text-body); line-height: 1.8; }
.login-inner .logo { margin-bottom: var(--space-8); }
.login-inner .wide { font-size: var(--text-body); border-radius: var(--radius-control); }
.login-method-switch { font-size: var(--text-small); }
.account-setup-screen { background: var(--surface-page); }
.account-setup-card { border-color: var(--line-soft); box-shadow: var(--shadow-soft); border-radius: var(--radius-large); }
.account-setup-card .muted { color: var(--ink-secondary); }
.person-choice { border-color: var(--line-soft); color: var(--ink-primary); }
.person-choice:has(input:checked) { border-color: var(--line-strong); background: var(--surface-accent); }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline-color: var(--action-primary); }
@media (max-width: 720px) { /* ds-allow-hardcode: existing mobile fullscreen breakpoint */
  .sidebar { height: var(--nav-height); width: calc(100% - var(--space-10)); max-width: var(--nav-width); }
  .main-nav { background: var(--glass-dark); border-color: var(--glass-line); box-shadow: var(--shadow-float); }
  .nav-lens { background: var(--glass-lens); }
  .nav-item, .nav-item.active { color: var(--ink-on-accent); text-shadow: none; }
  .chat-open .composer { gap: var(--chat-composer-gap); }
}
@media (min-width: 721px) { /* ds-allow-hardcode: desktop split layout starts above existing mobile breakpoint */
  .app { grid-template-columns: var(--desktop-sidebar) minmax(0, 1fr); }
  .sidebar { background: var(--surface-card); border-color: var(--line-soft); padding: var(--space-8) var(--space-4); }
  .main { padding: var(--desktop-main); }
  .topbar h1 { font-size: var(--desktop-title); }
  #newButtonLabel { display: inline; }
  .topbar #newButton { width: auto; min-width: var(--touch-normal); padding: 0 var(--space-5); border-radius: var(--radius-control); font-size: var(--text-small); }
  .nav-item { color: var(--ink-secondary); font-size: var(--text-body); padding: var(--space-3) var(--space-4); gap: var(--space-3); border-radius: var(--radius-control); }
  .nav-item.active { color: var(--action-selected); background: var(--surface-accent); }
  .space-label { color: var(--ink-secondary); font-size: var(--text-small); margin: var(--space-8) var(--space-4) var(--space-5); }
  .privacy-note { color: var(--ink-secondary); font-size: var(--text-caption); }
  .privacy-note small { color: var(--ink-secondary); line-height: 1.7; }
  .profile-button { color: var(--ink-primary); border-color: var(--line-soft); }
  .profile-button small { color: var(--ink-secondary); }
  .chats-layout { grid-template-columns: var(--desktop-chat-list) minmax(0, 1fr); min-height: var(--mobile-chat-min); }
  .chat-list { border-color: var(--line-soft); }
  .chat-copy strong { font-size: var(--text-body); }
  .chat-row .avatar { width: var(--space-10); height: var(--space-10); }
  .chat-time { display: none; }
  .album-grid { grid-template-columns: repeat(auto-fill, minmax(var(--card-preview), 1fr)); }
  .login-inner .logo { margin-bottom: var(--space-12); }
  .login-panel { padding: var(--space-12); }
}
@media (min-width: 1320px) { /* ds-allow-hardcode: room for optional family sidebar */
  .app { grid-template-columns: var(--desktop-sidebar) minmax(0, 1fr) var(--desktop-aside); }
  .rightbar { display: block; background: var(--surface-card); border-color: var(--line-soft); padding: var(--space-10) var(--space-6); }
  .rightbar-head { border-color: var(--line-soft); }
  .rightbar-head h2 { color: var(--ink-primary); font-size: var(--text-modal); }
  .rightbar-head p, .rightbar-section h3 span, .person-row small { color: var(--ink-secondary); }
  .tip-card { background: var(--surface-soft); border-radius: var(--radius-card); }
  .tip-card p { color: var(--ink-secondary); }
}
@media (prefers-reduced-motion: reduce) { .album-card, .primary { transition: none; } }

.chats-layout.show-list .chat-row:last-child { border-bottom: 0; border-radius: 0 0 var(--radius-card) var(--radius-card); }

.avatar:not(img):not(.chat-avatar) { color: var(--ink-primary); }
.message .rich-bubble:has(.chat-image), .message.mine .rich-bubble:has(.chat-image) { min-width: 0; width: fit-content; max-width: 100%; }
.message .chat-image { width: var(--chat-photo-preview); }
.message .chat-image img { width: 100%; height: auto; }
@media (max-width: 720px) { /* ds-allow-hardcode: existing mobile navigation breakpoint */
  .nav-item, .nav-item.active { font-size: var(--text-micro); }
}

html.overlay-scroll-locked { overflow: hidden; overscroll-behavior: none; }
html.overlay-scroll-locked:not(.chat-open) body { position: fixed; top: var(--overlay-scroll-top); left: 0; right: 0; width: 100%; overflow: hidden; }
dialog[open], .glass-panel { overscroll-behavior: contain; }
.album-created { display: block; margin-top: var(--space-2); color: var(--ink-secondary); font-size: var(--text-date); line-height: 1.6; white-space: nowrap; }
.album-body .album-created { margin-inline: calc(-1 * var(--space-3)); text-align: center; }

.form-grid { grid-template-columns: minmax(0, 1fr); }
.form-grid > *, .form-grid label { min-width: 0; }
.form-grid .form-control { min-width: 0; max-width: 100%; }
.form-grid input[type="datetime-local"], .form-grid input[type="date"], .form-grid input[type="time"] { appearance: none; -webkit-appearance: none; display: block; width: 100%; min-width: 0; text-align: left; }
.form-grid input::-webkit-date-and-time-value { text-align: left; }
.form-grid input::-webkit-datetime-edit { min-width: 0; padding: 0; }

.settings-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); padding: var(--space-1); margin-block: var(--space-5); background: var(--surface-soft); border-radius: var(--radius-pill); }
.settings-tabs [role="tab"] { min-width: 0; min-height: var(--touch-normal); padding: var(--space-2) var(--space-3); border: 1px solid transparent; border-radius: var(--radius-pill); background: transparent; color: var(--ink-secondary); font-size: var(--text-small); font-weight: 600; }
.settings-tabs [aria-selected="true"] { background: var(--surface-card); color: var(--action-selected); border-color: var(--line-soft); box-shadow: var(--shadow-soft); }
.settings-tabs [role="tab"]:focus-visible { outline: var(--focus-width) solid var(--action-primary); outline-offset: var(--focus-width); }

.cover-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.cover-picker legend { margin-bottom: var(--space-3); font-weight: 600; }
.form-grid .cover-auto { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); min-height: var(--touch-normal); }
.cover-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); max-height: 35vh; overflow-y: auto; padding: var(--space-1); }
.cover-choice { position: relative; display: block; aspect-ratio: 1; border: 2px solid var(--line-soft); border-radius: var(--radius-control); overflow: hidden; cursor: pointer; }
.cover-choice img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-choice input { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 1; accent-color: var(--action-primary); }
.cover-choice:has(input:checked) { border-color: var(--action-primary); }
.cover-choice:focus-within { outline: 2px solid var(--action-primary); outline-offset: 2px; }

/* Product preference: focus remains functional without a visible focus frame. */
*, *::before, *::after { outline: none !important; }
.form-control:focus, .composer textarea:focus { box-shadow: none; }
.form-control:focus { border-color: var(--line-strong); }
.composer textarea:focus { border-color: var(--line-soft); }

.startup-screen { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); background: var(--surface-page); text-align: center; }
.startup-screen h1 { color: var(--action-primary); font-size: var(--text-title); margin: var(--space-4) 0; }
.startup-screen p { color: var(--ink-secondary); font-size: var(--text-small); }

.message-avatar-button { display: grid; place-items: center; flex: none; width: var(--avatar-small); height: var(--avatar-small); padding: 0; border: 0; border-radius: var(--radius-pill); background: transparent; }
.message-avatar-button .avatar { width: 100%; height: 100%; }

.room-title-button { flex: 1; min-width: 0; border: 0; padding: var(--space-1); text-align: left; color: inherit; background: transparent; }
.room-title-button strong { display: block; overflow-wrap: anywhere; }
.room-title-button small { display: block; color: var(--ink-secondary); font-size: var(--text-caption); }
.room-members { display: flex; flex: none; gap: var(--space-1); overflow-x: auto; padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--line-soft); background: var(--surface-soft); }
.room-member { display: flex; flex: none; flex-direction: column; align-items: center; gap: var(--space-1); width: var(--touch-normal); height: var(--touch-normal); padding: var(--space-1); border: 0; background: transparent; color: var(--ink-primary); }
.room-member small { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-caption); }

/* Keep avatar geometry independent of the source image and text baseline. */
.message-avatar-button { align-self: flex-start; min-width: var(--avatar-small); min-height: var(--avatar-small); overflow: hidden; }
.message .message-avatar-button .avatar { display: block; width: var(--avatar-small); height: var(--avatar-small); min-width: var(--avatar-small); max-width: var(--avatar-small); max-height: var(--avatar-small); aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-pill); }
.message .message-avatar-button span.avatar { display: grid; }
.room-member { text-align: center; justify-content: center; }
.room-member .avatar { width: var(--avatar-small); height: var(--avatar-small); min-width: var(--avatar-small); min-height: var(--avatar-small); aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-pill); }
.room-member small { text-align: center; line-height: 1.5; margin: 0; }
.composer .send-button, .chat-open .composer .send-button { flex: none; width: var(--touch-normal); min-width: var(--touch-normal); height: var(--touch-normal); min-height: var(--touch-normal); padding: 0; aspect-ratio: 1; display: grid; place-items: center; }
/* Desktop sidebar accents from the legacy sheet follow the colour theme. */
.space-leaf, .tip-icon { color: var(--action-primary); }
.privacy-note { color: var(--action-primary); background: var(--surface-accent); }

/* Long-press feedback: a short shrink-and-bounce on the pressed item. Uses the
   standalone scale property so it never fights a swipe's transform. */
.press-pulse { animation: press-pulse 320ms cubic-bezier(.3, .7, .4, 1.4); }
@keyframes press-pulse { 0% { scale: 1; } 35% { scale: .94; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .press-pulse { animation: none; } }

/* Nav bar glass, closer to iOS Liquid Glass within what WebKit can draw:
   blur + saturation, a rim light, a top sheen, a lighter raised lens that
   swells when pressed, and a soft glare that follows the finger. WebKit cannot
   refract (no SVG filters in backdrop-filter), so there is no edge lensing. */
@media (max-width: 720px) { /* ds-allow-hardcode: existing mobile fullscreen breakpoint */
  .sidebar { backdrop-filter: blur(18px) saturate(2) brightness(1.04); -webkit-backdrop-filter: blur(18px) saturate(2) brightness(1.04); }
  .main-nav {
    --glare-x: 50%;
    background: linear-gradient(180deg, #ffffff1a, #ffffff00 55%), #1c2321b3;
    border: 1px solid #ffffff40;
    box-shadow: 0 10px 30px #1f1b1630, 0 2px 6px #1f1b161f,
      inset 0 1px 0 #ffffff6b, inset 0 -1px 0 #ffffff1f, inset 0 0 0 .5px #ffffff14;
  }
  /* Glare sits above the lens and below the icons. */
  .main-nav::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(120px 60px at var(--glare-x) 0%, #ffffff2e, #ffffff00 70%);
    opacity: .55; transition: opacity .3s;
  }
  .main-nav.is-touched::after { opacity: 1; }
  .nav-lens {
    background: linear-gradient(180deg, #ffffff38, #ffffff14 60%, #ffffff1f), #ffffff12;
    box-shadow: inset 0 1px 0 #ffffff80, inset 0 -1px 1px #ffffff26, inset 0 0 0 .5px #ffffff2e, 0 3px 10px #00000026;
    transition: transform .36s cubic-bezier(.22, 1, .36, 1), scale .28s cubic-bezier(.3, 1.6, .5, 1);
  }
  /* Pressing the current tab swells the lens like a drop of water. */
  .main-nav:has(.nav-item.active:active) .nav-lens { scale: 1.08 1.14; }
  .nav-item, .nav-item.active { text-shadow: 0 1px 2px #0006; }
}
@media (max-width: 720px) and (prefers-reduced-transparency: reduce) { /* ds-allow-hardcode: existing mobile fullscreen breakpoint */
  .main-nav { background: #2a302e; }
  .main-nav::after { display: none; }
}
@media (prefers-reduced-motion: reduce) { .main-nav::after, .nav-lens { transition: none; } .main-nav:has(.nav-item.active:active) .nav-lens { scale: none; } }

/* Chat list name with its member count, e.g. 聊天測試(3). */
.chat-copy strong { display: flex; align-items: baseline; min-width: 0; }
.chat-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-member-count { flex: none; }

/* Photos and videos sit in the chat on their own, without a bubble frame or caption. */
.message .media-bubble, .message.mine .media-bubble { min-width: 0; width: fit-content; max-width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.message.mine .media-bubble { margin-left: auto; }
.media-bubble .chat-image img, .media-bubble .chat-video { border-radius: var(--radius-control); }
.media-bubble .message-quote, .message.mine .media-bubble .message-quote { color: var(--ink-primary); background: var(--surface-card); border: 1px solid var(--line-soft); }
/* The photo box follows the photo's own shape, so it hugs the edge and sits
   right beside "已讀" and the time instead of being letterboxed in a fixed box. */
.media-bubble .chat-image { width: fit-content; max-width: 100%; }
.media-bubble .chat-image img { width: auto; height: auto; min-width: 4rem; min-height: 4rem; max-width: min(var(--chat-photo-preview), 65vw); max-height: 20rem; object-fit: cover; }

/* Others' messages: the sender's name sits beside the avatar, above the bubble; the time stays below. */
.message-name { margin: 0 2px var(--space-1); color: var(--ink-secondary); font-size: var(--text-micro, 11px); font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sub-albums inside an album, and each photo's uploader in its corner. */
.sub-albums { display: grid; gap: var(--space-3); margin: 0 0 var(--space-5); }
.sub-albums-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sub-albums-head h3 { margin: 0; font-size: var(--text-body); color: var(--ink-secondary); }
.photo-card { position: relative; }
.photo-uploader { position: absolute; right: 6px; bottom: 6px; display: grid; width: 24px; height: 24px; border-radius: var(--radius-pill); box-shadow: 0 0 0 2px #fff, 0 1px 4px #0004; overflow: hidden; pointer-events: none; }
.photo-uploader .avatar { width: 100%; height: 100%; min-width: 0; border-radius: var(--radius-pill); font-size: 11px; object-fit: cover; }

/* Cover picker tiles: a fixed square that iOS Safari cannot collapse inside the
   scrolling grid (aspect-ratio plus the form's label grid let photos overlap). */
.cover-grid { grid-auto-rows: max-content; align-content: start; }
.form-grid .cover-choice { display: block; height: 0; padding: 0 0 100%; }
.cover-choice > img, .cover-choice > .album-video-thumbnail { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Album sort: a select above the album list, a newest/oldest toggle above the photos. */
.album-sort-bar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--ink-secondary); font-size: var(--text-small); }
.album-sort-bar > span { margin-right: auto; }
.album-sort-bar select { width: auto; min-height: var(--touch-normal); padding: var(--space-2) var(--space-3); font-size: var(--text-small); }
.album-sort-bar .ui-icon { width: var(--icon-small); height: var(--icon-small); }

/* Batch delete: pick your own photos, then delete them from a bar above the nav. */
.photo-grid.selecting .photo-card.unselectable { opacity: .4; }
.photo-check { position: absolute; top: 6px; left: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-pill); border: 2px solid #fff; background: #0000004d; color: #fff; box-shadow: 0 1px 4px #0004; pointer-events: none; }
.photo-check .ui-icon { width: 15px; height: 15px; stroke-width: 3; }
.photo-card.picked { box-shadow: inset 0 0 0 3px var(--action-primary); }
.photo-card.picked img { opacity: .82; }
.photo-card.picked .photo-check { border-color: var(--action-primary); background: var(--action-primary); }
.photo-select-bar {
  position: sticky; bottom: var(--space-4); z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4); padding: 4px; border: 1px solid var(--line-soft); border-radius: var(--radius-pill);
  background: var(--surface-card); color: var(--ink-primary); font-size: var(--text-small); font-weight: 600; box-shadow: var(--shadow-float);
}
.select-bar-count { text-align: center; white-space: nowrap; }
.select-bar-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; justify-self: start;
  min-width: 64px; min-height: var(--touch-normal); padding: 3px 12px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: inherit; font-size: 10px; line-height: 1.3; -webkit-tap-highlight-color: transparent; transition: transform .2s, opacity .2s;
}
.select-bar-action:last-child { justify-self: end; }
.select-bar-action .ui-icon { width: 21px; height: 21px; }
.select-bar-action.danger:not(:disabled) { color: var(--action-danger); }
.select-bar-action:disabled { opacity: .4; }
.select-bar-action:active:not(:disabled) { transform: scale(.92); }
.danger-action, .primary.danger-action { background: var(--action-danger); color: #fff; box-shadow: none; }
.danger-action:disabled { opacity: .45; }

/* Selection mode motion: the nav pill melts away and the selection bar grows out
   of the same spot; check circles pop in across the grid. Reversed on leaving. */
@keyframes select-bar-in { from { opacity: 0; scale: .9 .7; filter: blur(6px); } }
@keyframes select-bar-out { to { opacity: 0; scale: .9 .7; filter: blur(6px); } }
@keyframes select-content-in { from { opacity: 0; translate: 0 6px; } }
@keyframes check-in { from { opacity: 0; scale: .3; } 70% { scale: 1.12; } }
@keyframes check-out { to { opacity: 0; scale: .3; } }
@keyframes check-picked { 45% { scale: 1.28; } }
@keyframes card-picked { 40% { scale: .94; } }
.photo-select-bar.select-enter { animation: select-bar-in .42s cubic-bezier(.3, 1.35, .5, 1) both; }
.photo-select-bar.select-enter > * { animation: select-content-in .3s .12s ease-out both; }
.photo-grid.select-enter .photo-check { animation: check-in .36s calc(var(--i, 0) * 18ms) cubic-bezier(.3, 1.4, .5, 1) both; }
.photo-card.just-picked { animation: card-picked .28s ease-out; }
.photo-card.just-picked .photo-check { animation: check-picked .3s cubic-bezier(.3, 1.6, .5, 1); }
.photo-card { transition: opacity .25s; }
body.photo-select-leaving .photo-select-bar { animation: select-bar-out .22s ease-in both; }
body.photo-select-leaving .photo-check { animation: check-out .2s ease-in both; }
body.photo-select-leaving .photo-grid.selecting .photo-card.unselectable { opacity: 1; }
@media (max-width: 720px) { /* ds-allow-hardcode: existing mobile fullscreen breakpoint */
  /* The bar takes the nav's place and shape, in the same glass. */
  .photo-select-bar {
    position: fixed; left: 50%; bottom: calc(10px + var(--safe-bottom)); z-index: 21; width: calc(100% - 44px); max-width: 440px; height: 62px; margin: 0;
    translate: -50% 0; transform-origin: 50% 100%; border: 1px solid #ffffff40; color: #fff; text-shadow: 0 1px 2px #0006;
    background: linear-gradient(180deg, #ffffff1a, #ffffff00 55%), #1c2321b3;
    backdrop-filter: blur(18px) saturate(2) brightness(1.04); -webkit-backdrop-filter: blur(18px) saturate(2) brightness(1.04);
    box-shadow: 0 10px 30px #1f1b1630, 0 2px 6px #1f1b161f, inset 0 1px 0 #ffffff6b, inset 0 -1px 0 #ffffff1f;
  }
  .select-bar-action.danger:not(:disabled) { color: #ff8a80; }
  .sidebar { transition: opacity .3s, scale .42s cubic-bezier(.3, 1.35, .5, 1), filter .3s, visibility 0s; }
  body.photo-selecting:not(.photo-select-leaving) .sidebar { opacity: 0; scale: 1.06 1.25; filter: blur(6px); visibility: hidden; pointer-events: none; transition: opacity .2s, scale .3s ease-in, filter .2s, visibility 0s .3s; }
  body.photo-selecting .photo-grid { padding-bottom: calc(80px + var(--safe-bottom)); }
}
@media (max-width: 720px) and (prefers-reduced-transparency: reduce) { /* ds-allow-hardcode: existing mobile fullscreen breakpoint */
  .photo-select-bar { background: #2a302e; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* Cover framing: the same 4:3 window as the album card, dragged and zoomed in place. */
/* iOS Safari does not treat a height that comes only from aspect-ratio as definite,
   so height:100% fell back to the photo's own height and tall covers showed their top.
   Pinning the image to the box keeps object-position and the zoom origin exact. */
.album-preview img, .cover-crop-frame img { position: absolute; inset: 0; transition: none; }
.cover-crop { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.cover-crop-title { margin: 0; color: var(--ink-secondary); font-size: var(--text-small); font-weight: 700; }
.cover-crop-frame {
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-card);
  background: var(--surface-soft); box-shadow: inset 0 0 0 1px var(--line-soft); touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.cover-crop-frame:active { cursor: grabbing; }
.cover-crop-frame img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-touch-callout: none; }
.cover-crop input[type="range"] { width: 100%; accent-color: var(--action-primary); }
.cover-crop .form-help { margin: 0; text-align: center; }

/* Web pages opened from chat, inside the page sheet. */
#modal:has(.web-sheet) { --modal-width: 980px; }
.web-sheet { display: flex; flex-direction: column; gap: var(--space-3); }
.web-sheet-site { margin: calc(-1 * var(--space-3)) 0 0; color: var(--ink-secondary); font-size: var(--text-small); overflow-wrap: anywhere; }
.web-sheet-frame { width: 100%; height: min(72vh, 820px); border: 1px solid var(--line-soft); border-radius: var(--radius-card); background: #fff; }
.web-sheet-open { align-self: center; min-height: var(--touch-normal); display: inline-flex; align-items: center; text-decoration: none; }
@media (max-width: 720px) { /* ds-allow-hardcode: existing mobile fullscreen breakpoint */
  #modal:has(.web-sheet) .modal-wrap { display: flex; flex-direction: column; min-height: calc(100% - var(--space-6)); padding-bottom: var(--space-3); }
  #modal:has(.web-sheet) .web-sheet { flex: 1; }
  .web-sheet-frame { flex: 1; height: auto; min-height: 60vh; border-radius: var(--radius-control); }
}

/* Who replied to an event, visible to everyone invited. */
.rsvp-summary { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding: var(--space-3); border-radius: var(--radius-control); background: var(--surface-soft); }
.rsvp-empty { color: var(--ink-secondary); font-size: var(--text-small); }
.rsvp-group { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); align-items: start; gap: var(--space-2); }
.rsvp-group dt { padding-top: 3px; font-size: var(--text-small); font-weight: 700; white-space: nowrap; }
.rsvp-group dt span { color: var(--ink-secondary); font-weight: 600; }
.rsvp-going dt { color: var(--feedback-success, #23764a); }
.rsvp-maybe dt { color: #9a6a12; }
.rsvp-no dt { color: var(--ink-secondary); }
.rsvp-group dd { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; }
.rsvp-person { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-small); color: var(--ink-primary); }
.rsvp-person .avatar { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; font-size: 10px; }

/* Who replied to an event, visible to everyone invited. */
.rsvp-summary { display: grid; gap: var(--space-2); margin: 0 0 var(--space-3); padding: var(--space-3); border-radius: var(--radius-control); background: var(--surface-soft); }
.rsvp-empty { color: var(--ink-secondary); font-size: var(--text-small); }
.rsvp-group { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); align-items: start; gap: var(--space-2); }
.rsvp-group dt { padding-top: 3px; font-size: var(--text-small); font-weight: 700; white-space: nowrap; }
.rsvp-group dt span { color: var(--ink-secondary); font-weight: 600; }
.rsvp-going dt { color: var(--feedback-success); }
.rsvp-maybe dt { color: #8a5d0c; }
.rsvp-no dt { color: var(--ink-secondary); }
.rsvp-group dd { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; }
.rsvp-person { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-small); color: var(--ink-primary); }
.rsvp-person .avatar { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; font-size: 10px; }

/* Unanswered event reminder: shown once when the app opens, reply in place. */
.rsvp-reminder {
  width: min(calc(100vw - 32px), 440px); max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 0; border-radius: var(--radius-card);
  overflow: hidden auto; color: var(--ink-primary); background: var(--surface-card); box-shadow: var(--shadow-raised, 0 18px 48px #0003);
  animation: rsvp-reminder-in .32s cubic-bezier(.25, 1.2, .45, 1) both;
}
.rsvp-reminder::backdrop { background: #0006; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rsvp-reminder.leaving { animation: rsvp-reminder-out .26s ease-in both; }
.rsvp-reminder-body { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-5); text-align: center; }
.rsvp-reminder-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-pill); color: var(--action-primary); background: var(--surface-accent); }
.rsvp-reminder-icon .ui-icon { width: 28px; height: 28px; }
.rsvp-reminder h2 { margin: 0; font-size: var(--text-section); }
.rsvp-reminder-list { display: grid; gap: var(--space-3); width: 100%; }
.rsvp-reminder-card { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-control); background: var(--surface-soft); text-align: left; transition: opacity .2s; }
.rsvp-reminder-card h3 { margin: 0; font-size: var(--text-body); overflow-wrap: anywhere; }
.rsvp-reminder-card p { margin: 0; color: var(--ink-secondary); font-size: var(--text-small); line-height: 1.7; }
.rsvp-reminder-card p .ui-icon { width: 14px; height: 14px; vertical-align: -2px; }
.rsvp-reminder-card .rsvp { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.rsvp-reminder-card .rsvp button { min-height: 44px; }
.rsvp-reminder-card.answered .rsvp button:not(.selected) { opacity: .45; }
.rsvp-reminder-done { color: var(--action-primary) !important; font-weight: 700; }
@keyframes rsvp-reminder-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes rsvp-reminder-out { to { opacity: 0; transform: translateY(12px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .rsvp-reminder, .rsvp-reminder.leaving { animation-duration: .01s; } }