/* Real app logos on the Connectors list. */
.app-tile.logo { background: none; box-shadow: none; overflow: hidden; }
.app-tile.logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Scratch-off foil over the invite code. */
.invite-code { overflow: hidden; }
.invite-code .scratch {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: inherit; touch-action: none; cursor: grab;
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.invite-code .scratch:active { cursor: grabbing; }
.invite-code .scratch.gone { opacity: 0; transform: scale(1.04); pointer-events: none; }
.invite-code.revealed > span:first-child { animation: code-pop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes code-pop { from { transform: scale(0.7); opacity: 0.3; } }
.invite-code .scratch { letter-spacing: normal; text-indent: 0; }

/* ---------- Reader sheet (stories open inside the app) ---------- */

.reader-sheet { background: #fff; }
.reader-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 16px 8px; }
.reader-bar .round-btn { width: 40px; height: 40px; flex: none; }
.reader-site { flex: 1; text-align: center; font-size: 0.9375rem; font-weight: 600; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-scroll { flex: 1; overflow-y: auto; padding: 4px 20px calc(40px + env(safe-area-inset-bottom)); scrollbar-width: none; }
.reader-scroll::-webkit-scrollbar { display: none; }
.reader-body { max-width: 640px; margin: 0 auto; }
.reader-hero { width: 100%; max-height: 300px; object-fit: cover; border-radius: 18px; display: block; background: var(--pill); }
.reader-meta { margin-top: 14px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.reader-title { margin-top: 6px; font-family: "Inter", sans-serif; font-size: 1.375rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.reader-body p { margin-top: 14px; font-size: 1rem; line-height: 1.6; color: #2a2b2e; }
.reader-body p.reader-note { font-size: 0.875rem; color: var(--text-3); }
.reader-full {
  display: block; width: 100%; margin-top: 22px; height: 46px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer;
}
.reader-loading { display: flex; gap: 6px; margin-top: 22px; }
.reader-loading i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); animation: reader-dot 1s infinite ease-in-out; }
.reader-loading i:nth-child(2) { animation-delay: 0.15s; }
.reader-loading i:nth-child(3) { animation-delay: 0.3s; }
@keyframes reader-dot { 50% { opacity: 0.25; transform: translateY(-3px); } }

/* Smaller feed action row (like · Discuss · time · ⓘ). */
.post-actions { gap: 14px; margin-top: 10px; min-height: 32px; }
.post-actions button { gap: 6px; font-size: 0.875rem; padding: 3px 0; }
.post-actions svg { width: 20px; height: 20px; }
.post-actions .info svg { width: 19px; height: 19px; }
.post-time { font-size: 0.875rem; }

/* Send button in iMessage blue, like the chat bubbles. */
.composer .send { background: var(--imessage-blue); color: #fff; }
.composer .send:disabled { background: var(--imessage-blue); opacity: 0.5; }