/* ---------- Offline ---------- */

.offline-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 55;
  padding: env(safe-area-inset-top) 16px 0;
  background: #fdf1dc;
  color: #95560a;
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
}
.offline-bar span { display: block; line-height: 28px; }
html.offline .shell { margin-top: 28px; height: calc(100vh - 28px); height: calc(100dvh - 28px); }
html.offline .drawer-head { padding-top: calc(42px + env(safe-area-inset-top)); }
html.offline .toast { top: calc(52px + env(safe-area-inset-top)); }

/* ---------- Christian's replies: press and hold for Copy / Report ---------- */

@media (hover: none) {
  .bubble.out { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* ---------- iPhone app (html.native, set by native.js) ---------- */

.native [data-web-only] { display: none !important; } /* "coming soon" rows and paid-plan wording */
.native { -webkit-tap-highlight-color: transparent; }
/* Interface text isn't selectable, like a native app. Their own messages, documents,
   articles and anything they type still are. Christian's replies use press and hold (above). */
.native body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.native input, .native textarea, .native [contenteditable], .native .bubble.in,
.native .doc-view, .native .doc-editor, .native .reader-body {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
.native, .native body { overscroll-behavior: none; }
.native .plan { padding-bottom: 22px; }
/* The keyboard overlays the page (Capacitor resize: none) and --kb is its height (set in native.js
   as soon as iOS starts animating it). The composer rides up on the same curve, the tab bar slides
   away, and the thread keeps its newest messages above the keyboard. */
:root { --kb: 0px; --kb-ease: 0.25s cubic-bezier(0.32, 0.72, 0, 1); }
.native .composer-wrap { transition: transform var(--kb-ease), padding-bottom var(--kb-ease); }
.native .tabbar { transition: transform var(--kb-ease), opacity 0.2s ease; }
.native .thread { transition: padding-bottom var(--kb-ease); }
.kb-open .tabbar { transform: translate(-50%, calc(var(--tabbar-h) + var(--tabbar-gap) + 40px)); opacity: 0; pointer-events: none; }
.kb-open .composer-wrap { padding-bottom: 10px; transform: translateY(calc(-1 * var(--kb))); }
.kb-open .thread { padding-bottom: calc(var(--composer-h) + 34px + var(--kb)); }
/* Sheets and the drawer shrink above the keyboard the same way (their own scroll areas adjust). */
/* Sheets lift above the keyboard as a whole (bottom margin) and shrink to the room that's left, so
   nothing in them is ever under the keys; long ones scroll inside. */
.native .sheet, .native .goal-panel { transition: margin-bottom var(--kb-ease), height var(--kb-ease), max-height var(--kb-ease); }
.native .drawer-panel { transition: padding-bottom var(--kb-ease); }
.kb-open .sheet { margin-bottom: var(--kb); height: calc(100% - 44px - env(safe-area-inset-top) - var(--kb)); }
.kb-open .goal-panel { margin-bottom: var(--kb); max-height: calc(100% - 44px - env(safe-area-inset-top) - var(--kb)); }
.kb-open #group-form-sheet .goal-panel, .kb-open #group-activity-sheet .goal-panel { height: calc(100% - 44px - env(safe-area-inset-top) - var(--kb)); }
.kb-open .drawer-panel { padding-bottom: var(--kb); }

/* Three share options: center them under the sheet. */
.invite-share { justify-content: center; gap: 28px; }