.story-modal {
      position: absolute; z-index: 50; inset: 0; padding: 24px;
      display: none; place-items: center; background: rgba(0,0,0,.32);
    }
    .story-modal.show { display: grid; }
    .friend-scanner {
      position: absolute; z-index: 61; inset: 0; overflow: hidden;
      display: none; color: #fff; background: #101412;
    }
    .friend-scanner.show { display: block; }
    .friend-scanner-tabs {
      position: absolute;
      z-index: 43;
      top: calc(var(--safe-top) + var(--topbar-gap) + (var(--topbar-inner) - 37px) / 2);
      left: 16px;
      right: 60px;
      display: flex;
      gap: 6px;
      padding: 4px;
      border-radius: 999px;
      background: rgba(0, 0, 0, .42);
      border: 1px solid rgba(255, 255, 255, .14);
    }
    .friend-scanner-tabs[hidden] { display: none !important; }
    .friend-scanner-tabs button {
      flex: 1 1 0;
      min-width: 0;
      height: 32px;
      padding: 0 10px;
      border: 0;
      border-radius: 999px;
      color: rgba(255, 255, 255, .82);
      background: transparent;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      cursor: pointer;
    }
    .friend-scanner-tabs button.is-active {
      color: #111114;
      background: #fff;
    }
    .friend-scanner.is-me-qr-sheet .scanner-email-form,
    .friend-scanner.is-me-qr-sheet .scanner-email-submit,
    .friend-scanner.is-me-qr-sheet .scanner-scan-option { display: none !important; }
    .friend-scanner.is-me-qr-sheet .scanner-qr-row {
      margin-top: 0;
      padding-top: 0;
      border-top: 0;
    }
    .friend-scanner.is-me-qr-sheet .scanner-email-card {
      padding-top: calc(20px + var(--topbar-height) * .35);
    }
    .friend-scanner-add-page,
    .friend-scanner-scan-page {
      position: absolute;
      inset: 0;
    }
    .friend-scanner-add-page[hidden],
    .friend-scanner-scan-page[hidden] { display: none !important; }
    .app:has(.friend-scanner.show) #profileButton {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }
    .friend-scanner-scan-page video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
    .friend-scanner-scan-page .friend-scanner-shade {
      position: absolute; inset: 0;
      background: linear-gradient(rgba(0,0,0,.34),rgba(0,0,0,.18) 42%,rgba(0,0,0,.52));
    }
    .friend-scanner-scan-content {
      position: relative;
      z-index: 3;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: calc(var(--safe-top) + var(--topbar-height) + 24px) 28px 40px;
      text-align: center;
    }
    .friend-scanner-scan-page .scanner-scan-hint {
      margin: 0;
      color: rgba(255,255,255,.94);
      font-size: 15px;
      font-weight: 650;
      line-height: 1.45;
      max-width: 280px;
    }
    /* Sits exactly where the topbar buttons do: same 37px circle, same centre. */
    .friend-scanner-close {
      position: absolute;
      top: calc(var(--safe-top) + var(--topbar-gap) + (var(--topbar-inner) - 37px) / 2);
      right: 16px;
      z-index: 42;
      width: 37px;
      height: 37px;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      background: rgba(0,0,0,.38);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
    }
    .friend-scanner-content {
      position: relative; z-index: 1; height: 100%; min-height: 0;
      padding: calc(var(--safe-top) + var(--topbar-height) + 12px) 0 0;
      display: flex; flex-direction: column;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .scanner-email-card {
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
      margin-top: auto;
      padding: 20px 22px calc(20px + env(safe-area-inset-bottom, 0px));
      border-radius: 24px 24px 0 0;
      color: #151515;
      background: #fff;
      box-shadow: 0 -10px 36px rgba(0,0,0,.18);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .scanner-email-form {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 0 0 auto;
    }
    .scanner-email-field { display: grid; gap: 5px; }
    .scanner-email-field span { color: #64748b; font-size: 12px; font-weight: 650; }
    .scanner-email-field input,
    .scanner-email-field textarea {
      width: 100%; padding: 10px 11px; border: 1px solid #e2e8f0; border-radius: 12px;
      color: #0f172a; background: #f8fafc; font: inherit; outline: none;
      scroll-margin-top: 72px;
      scroll-margin-bottom: 16px;
    }
    .scanner-email-field textarea { resize: none; min-height: 72px; }
    .scanner-email-error { margin: 0; color: #b42318; font-size: 12px; line-height: 1.4; }
    .scanner-email-error[hidden] { display: none !important; }
    .scanner-email-submit { width: 100%; color: #fff; background: #18181B; border-color: #18181B; }
    .scanner-qr-row {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #eef2f6;
      flex: 1 1 auto;
      min-height: 0;
    }
    .my-contact-code {
      position: relative;
      flex: 1 1 auto;
      min-height: 160px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 14px;
      border: 1px solid #e8edf2;
      border-radius: 16px;
      color: #151515;
      background: #f8fafc;
    }
    .my-contact-code .my-contact-qr {
      display: block;
      border-radius: 8px;
      width: min(220px, 100%);
      height: auto;
      aspect-ratio: 1;
      max-width: 100%;
      max-height: calc(100% - 28px);
      object-fit: contain;
    }
    .my-contact-name {
      display: block;
      margin-top: 6px;
      color: #64748b;
      font-size: 12px;
      font-weight: 650;
      text-align: center;
    }
    .scanner-scan-hint {
      margin: 0;
      color: #667085;
      font-size: 12px;
      font-weight: 650;
      line-height: 1.35;
      text-align: center;
      flex: 0 0 auto;
    }
    .scanner-add-option {
      width: 100%; min-height: 45px; margin: 0;
      border: 1px solid #e2e8f0; border-radius: 15px;
      color: #18181B; background: #f8fafc;
      font-size: 13px; font-weight: 800; cursor: pointer;
    }
    .scanner-scan-option {
      width: 100%;
      flex: 0 0 auto;
      min-height: 48px;
      padding: 0 12px;
      font-size: 13px;
    }
    .story-card {
      width: min(100%, 360px); padding: 22px; border-radius: 24px; background: #fff;
      box-shadow: 0 24px 65px rgba(0,0,0,.2);
    }
    .story-card h3 { margin: 0 0 8px; font-size: 22px; }
    .story-card p { margin: 0 0 16px; color: #777; line-height: 1.45; }
    .story-card textarea {
      height: 120px; max-height: 120px; padding: 13px; border: 1px solid #ddd;
      border-radius: 14px; background: #fafafa;
    }
    .formal-recipient {
      width: 100%; height: 48px; margin: 8px 0 12px; padding: 0 13px;
      border: 1px solid #ddd; border-radius: 14px; color: #222; background: #fafafa;
      font: inherit; font-weight: 650; outline: none;
    }
    .story-card input {
      width: 100%; height: 48px; margin-top: 12px; padding: 0 13px;
      border: 1px solid #ddd; border-radius: 14px; outline: 0; background: #fafafa;
    }
    .story-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
    .story-actions button {
      border: 0; border-radius: 12px; padding: 10px 15px; cursor: pointer;
      background: #f0f0f0; font-weight: 600;
    }
    .story-actions .publish { color: #fff; background: var(--blue); }
    .story-source-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 12px 0; }
    .story-source-option { min-height: 48px; padding: 8px; border: 1px solid #e3e3df; border-radius: 15px; background: #f6f6f3; font-weight: 750; cursor: pointer; }
    .story-source-option.active { color: #18181B; border-color: #A1A1AA; background: #F4F4F5; }
    .story-live-badge { display: inline-block; margin: 6px 0 10px; padding: 5px 9px; border-radius: 999px; color: #18181B; background: #F4F4F5; font-size: 11px; font-weight: 850; }
    .story-view {
      min-height: 360px; color: #fff; background: linear-gradient(145deg, #5754d8, #a541a1 55%, #ec7856);
      display: flex; flex-direction: column; justify-content: space-between;
    }
    .story-view p { color: #fff; font-size: 25px; line-height: 1.35; margin: auto 0; }
    .story-view small { color: rgba(255,255,255,.8); }
    .memory-box {
      padding: 16px; border: 1px solid #e5e5e5; border-radius: 18px; background: #fafafa;
    }
    .memory-box label { display: block; margin-bottom: 8px; font-weight: 650; }
    .memory-box textarea {
      height: 150px; max-height: 190px; padding: 12px; border: 1px solid #ddd;
      border-radius: 13px; background: #fff; line-height: 1.45;
    }
    .memory-controls { display: flex; gap: 8px; margin-top: 12px; }
    .memory-controls button {
      border: 0; border-radius: 12px; padding: 10px 14px; cursor: pointer; font-weight: 650;
    }
    .memory-controls .save-memory { color: #fff; background: var(--blue); }
    .memory-note { margin-top: 12px; color: #888; font-size: 12px; line-height: 1.45; }
    .settings-card {
      gap: 8px;
      margin-top: 0;
    }
    .settings-account-info {
      margin: 0;
      display: grid;
      gap: 10px;
      padding: 12px 14px;
      border-radius: 12px;
      background: #f8fafc;
    }
    html[data-profile-theme="dark"] .settings-account-info { background: #262626; }
    .settings-account-info > div {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 10px;
      align-items: start;
    }
    .settings-account-info dt {
      margin: 0;
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
    }
    .settings-account-info dd {
      margin: 0;
      color: #0f172a;
      font-size: 14px;
      line-height: 1.45;
      word-break: break-all;
    }
    .settings-account-info [data-account-id] {
      font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: 12px;
    }
    .settings-card .me-card-toolbar { margin-top: 0; }
    .settings-card .me-card-toolbar > button {
      flex: 1;
      width: 100%;
      font-size: 21px;
      padding: 12px 16px;
    }
    .settings-card .danger { color: #b42318; }
    .settings-confirm-copy {
      margin: 0 2px 8px;
      color: #475569;
      font-size: 14px;
      line-height: 1.5;
    }
    .twin-status {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 15px; margin-bottom: 14px; border-radius: 18px; background: #eef6ff;
    }
    .twin-status strong, .twin-status small { display: block; }
    .twin-status small { margin-top: 4px; color: #66788a; }
    .twin-status input { width: 22px; height: 22px; accent-color: var(--blue); }
    .twin-field { margin-top: 15px; }
    .twin-field label { display: block; margin-bottom: 7px; font-weight: 650; }
    .twin-field input, .twin-field textarea {
      width: 100%; border: 1px solid #ddd; border-radius: 13px; padding: 12px;
      outline: 0; background: #fff; font: inherit; line-height: 1.45;
    }
    .twin-field textarea { height: 105px; max-height: 160px; resize: vertical; }
    .find-intentions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
    .find-intention { padding: 10px; border: 1px solid #e2e2e2; border-radius: 13px; display: flex; align-items: center; gap: 8px; background: #fff; font-size: 13px; }
    .find-intention input { width: 17px; height: 17px; accent-color: var(--blue); }
    .find-private-note { margin: 14px 0 0; padding: 12px; border-radius: 14px; color: #5b6878; background: #eef6ff; font-size: 12px; line-height: 1.45; }
    .picker {
      position: absolute; z-index: 10; top: 68px; left: 50%; width: 210px;
      padding: 8px; border: 1px solid #eee; border-radius: 17px; background: #fff;
      box-shadow: 0 16px 45px rgba(0,0,0,.13); transform: translate(-50%, -8px);
      opacity: 0; pointer-events: none; transition: .18s;
    }
    .picker.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
    .picker button { width: 100%; border: 0; background: transparent; border-radius: 11px; text-align: left; padding: 11px 12px; cursor: pointer; }
    .picker button:hover, .picker button.active { background: #f4f4f4; }
    .toast {
      position: absolute; z-index: 120; left: 50%; bottom: 94px; transform: translate(-50%, 12px);
      padding: 10px 16px; color: #fff; background: #1d1d1d; border-radius: 18px;
      font-size: 14px; opacity: 0; pointer-events: none; transition: .2s; white-space: nowrap;
    }
    .toast.show { opacity: 1; transform: translate(-50%, 0); }
    .toast.has-action { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; max-width: min(92vw, 360px); }
    .toast .toast-message { flex: 1; text-align: left; }
    .toast .toast-action { flex: none; border: 0; background: rgba(255,255,255,.16); color: inherit; font: inherit; font-weight: 600; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
    .brain-note-source-line, .brain-note-photos-notice { margin: 8px 0 0; font-size: 12px; line-height: 1.35; color: #6b7280; }
    .brain-note-photos-notice { color: #9a3412; }
    .toast.profile-count-toast { bottom: auto; max-width: none; box-sizing: border-box; padding: 8px 12px; border-radius: 14px; font-size: 12px; line-height: 1.35; text-align: center; white-space: normal; transform: translateY(-6px); }
    .toast.profile-count-toast.show { transform: translateY(0); }
    .plus-menu {
      display: none;
      margin: 8px 2px 2px;
      padding: 12px 6px 8px;
      border: 1px solid #ecece8;
      border-radius: 25px;
      background: rgba(255,255,255,.98);
      box-shadow: 0 10px 28px rgba(0,0,0,.08);
    }
    .plus-menu.show {
      display: block;
      max-height: min(340px, 50vh);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-bottom: 14px;
    }
    .plus-option {
      width: 100%;
      min-height: 46px;
      padding: 9px 12px;
      border: 0;
      border-radius: 13px;
      display: flex;
      align-items: center;
      gap: 12px;
      background: transparent;
      cursor: pointer;
      text-align: left;
    }
    .plus-option:hover { background: #f5f5f5; }
    .option-icon {
      width: 28px;
      height: 28px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      background: #f1f1f1;
      font-size: 16px;
      font-weight: 600;
    }
    .option-icon svg { width: 18px; height: 18px; display: block; }
    .chat-attachment-menu {
      display: none;
      margin: 8px 2px 2px;
      padding: 12px 6px 8px;
      border: 1px solid #ecece8;
      border-radius: 25px;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 10px 4px;
      background: rgba(255,255,255,.98);
      box-shadow: 0 10px 28px rgba(0,0,0,.08);
    }
    .chat-attachment-menu.show {
      display: grid;
      max-height: min(220px, 38vh);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    /* Two rows of four a page; more options on the next page (swipe, or tap a dot). */
    .chat-attachment-menu.show:has(> .chat-attachment-pager) { display: block; max-height: none; overflow: visible; padding: 12px 0 8px; }
    .chat-attachment-pager {
      display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .chat-attachment-pager::-webkit-scrollbar { display: none; }
    .chat-attachment-page {
      flex: 0 0 100%; box-sizing: border-box; padding: 0 6px; scroll-snap-align: start; scroll-snap-stop: always;
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 72px); gap: 10px 4px;
    }
    .chat-attachment-dots { display: flex; justify-content: center; gap: 6px; padding-top: 8px; }
    .chat-attachment-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: #d6d6d2; cursor: pointer; }
    .chat-attachment-dots button[aria-current="true"] { background: #4b504d; }
    .chat-attachment-option {
      min-width: 0; min-height: 72px; padding: 2px 0; border: 0;
      display: grid; justify-items: center; align-content: center; gap: 6px;
      color: #4b504d; background: transparent; cursor: pointer;
      font-size: 11px; font-weight: 750; touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
    }
    .chat-attachment-option span {
      width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center;
      background: var(--attach-bg,#eef3ff); font-size: 22px;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.025);
    }
    .chat-attachment-option:active span { transform: scale(.92); }
    .chat-file-input {
      position: absolute; width: 0; height: 0; opacity: 0; overflow: hidden; pointer-events: none;
    }
    .message.user:has(.photo-bubble),
    .message.user:has(.location-bubble) {
      width: max-content;
      max-width: 100%;
      align-self: flex-end;
    }
    .message-bubble.photo-bubble,
    .message-bubble.location-bubble,
    .message-bubble.name-card-bubble.photo-bubble,
    .message-bubble.name-card-bubble.location-bubble,
    .message.user .message-bubble.photo-bubble,
    .message.user .message-bubble.location-bubble,
    .message.user .message-bubble.name-card-bubble.photo-bubble,
    .message.user .message-bubble.name-card-bubble.location-bubble {
      width: fit-content;
      max-width: min(280px, calc(100vw - 104px));
      flex: 0 0 auto;
      padding: 0;
      border: 0;
      box-shadow: none;
      overflow: visible;
      background: transparent;
    }
    .chat-photo {
      display: block;
      width: auto;
      max-width: min(280px, calc(100vw - 104px));
      height: auto;
      max-height: min(420px, 62dvh);
      object-fit: contain;
      object-position: center;
      vertical-align: top;
      cursor: zoom-in;
      touch-action: manipulation;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
      border-radius: 18px 18px 6px 18px;
      background: #F4F4F5;
    }
    .message-bubble.chat-photo-unavailable-bubble {
      color: #71717a;
      font-size: 14px;
      line-height: 1.35;
    }
    .message-action-sheet button[data-message-action="save-photo"] { color: #1d4ed8; background: #eff6ff; }
    .message-bubble .chat-link {
      color: #2563eb;
      text-decoration: underline;
      text-underline-offset: 2px;
      word-break: break-all;
    }
    .message.user .message-bubble .chat-link { color: #1d4ed8; }
    /* Links in Circle post text, like in chat. */
    .circle-private-copy .chat-link {
      color: #2563eb;
      text-decoration: underline;
      text-underline-offset: 2px;
      word-break: break-all;
    }
    .message.assistant .chat-photo { border-radius: 18px 18px 18px 6px; }
    .chat-location-card {
      display: block; width: 220px; max-width: 100%; overflow: hidden; border: 1px solid #e1e6e2;
      border-radius: 18px 18px 6px 18px; color: inherit; text-decoration: none; background: #fff;
      box-shadow: 0 1px 2px rgba(20,25,31,.04);
    }
    .message.assistant .chat-location-card { border-radius: 18px 18px 18px 6px; }
    .chat-location-map {
      height: 92px; display: grid; place-items: center;
      background: linear-gradient(160deg,#d7eadf,#c5d6e8); font-size: 28px;
    }
    .chat-location-copy { padding: 10px 12px 12px; }
    .chat-location-copy strong, .chat-location-copy small { display: block; }
    .chat-location-copy strong { font-size: 14px; }
    .chat-location-copy small { margin-top: 3px; color: #7a847e; font-size: 11px; }
    .name-card-picker { position: absolute; inset: 0; z-index: 90; overflow: hidden; pointer-events: none; }
    .name-card-picker.show { pointer-events: auto; }
    .name-card-picker-scrim { position: absolute; inset: 0; border: 0; opacity: 0; background: rgba(20,25,23,.35); transition: opacity .22s ease; }
    .name-card-picker.show .name-card-picker-scrim { opacity: 1; }
    .name-card-picker-sheet {
      position: absolute; right: 0; bottom: 0; left: 0; max-height: min(76%, 650px); padding: 8px 18px calc(16px + env(safe-area-inset-bottom));
      overflow: hidden; border-radius: 28px 28px 0 0; background: #fff; box-shadow: 0 -16px 40px rgba(25,31,28,.14);
      transform: translateY(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
    }
    .name-card-picker.show .name-card-picker-sheet { transform: translateY(0); }
    .name-card-picker-grabber { width: 38px; height: 4px; margin: 0 auto 10px; border-radius: 4px; background: #E4E4E7; }
    .name-card-picker-head { min-height: 50px; display: grid; grid-template-columns: 62px 1fr 62px; align-items: center; text-align: center; }
    .name-card-picker-head > button { padding: 8px 0; border: 0; color: #65706a; background: transparent; cursor: pointer; font-size: 13px; }
    .name-card-picker-head > div strong, .name-card-picker-head > div small { display: block; }
    .name-card-picker-head > div strong { font-size: 17px; }
    .name-card-picker-head > div small { margin-top: 2px; color: #929a96; font-size: 10px; }
    .name-card-picker-head .name-card-picker-send { color: #18181B; font-weight: 800; }
    .name-card-picker-head .name-card-picker-send:disabled { color: #b9bfbc; cursor: default; }
    .name-card-search { height: 42px; margin: 4px 0 10px; padding: 0 12px; border-radius: 14px; display: flex; align-items: center; gap: 8px; background: #F4F4F5; }
    .name-card-search span { color: #7f8883; font-size: 20px; }
    .name-card-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; }
    .name-card-friend-list { max-height: min(50vh, 440px); overflow-y: auto; overscroll-behavior: contain; }
    .name-card-friend { width: 100%; min-height: 64px; padding: 8px 4px; border: 0; border-bottom: 1px solid #eff1ef; display: flex; align-items: center; gap: 11px; background: #fff; cursor: pointer; text-align: left; }
    .name-card-friend-avatar { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; display: grid; place-items: center; background: #F4F4F5; font-size: 24px; }
    .name-card-friend-avatar.has-photo,
    .shared-name-card-avatar.has-photo { background-size: cover; background-position: center; color: transparent; font-size: 0; }
    .name-card-friend-avatar.share-art { border-radius: 14px; background: var(--saved-bg); font-size: 22px; }
    .name-card-friend-copy { min-width: 0; flex: 1; }
    .name-card-friend-copy strong, .name-card-friend-copy small { display: block; }
    .name-card-friend-copy strong { font-size: 14px; }
    .name-card-friend-copy small { margin-top: 3px; overflow: hidden; color: #7e8782; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
    .name-card-check { width: 24px; height: 24px; flex: 0 0 24px; border: 1.5px solid #d6dcd8; border-radius: 50%; display: grid; place-items: center; color: transparent; font-size: 13px; font-weight: 900; }
    .name-card-friend[aria-pressed="true"] .name-card-check { border-color: #18181B; color: #fff; background: #18181B; }
    .name-card-empty { padding: 28px 0; color: #8b938f; text-align: center; font-size: 13px; }
    .message-bubble.name-card-bubble { width: min(270px, 75vw); max-width: 100%; padding: 0; overflow: hidden; background: transparent; }
    .message.user .message-bubble.name-card-bubble { padding: 0; background: transparent; }
    .message-bubble.name-card-bubble.photo-bubble,
    .message-bubble.name-card-bubble.location-bubble {
      width: max-content;
      max-width: min(240px, calc(100% - 8px));
    }
    .shared-name-card { width: 100%; padding: 13px; border: 1px solid #E4E4E7; border-radius: 18px 18px 6px 18px; color: #1f2924; background: linear-gradient(145deg,#FAFAFA,#F4F4F5); box-shadow: 0 4px 13px rgba(24, 24, 27, .06); }
    .message.assistant .shared-name-card { border-radius: 18px 18px 18px 6px; }
    .shared-name-card-main { min-height: 60px; display: flex; align-items: center; gap: 11px; }
    .shared-name-card-avatar { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; display: grid; place-items: center; background: #E4E4E7; font-size: 28px; }
    .shared-name-card-copy { min-width: 0; flex: 1; }
    .shared-name-card-copy small, .shared-name-card-copy strong, .shared-name-card-copy span { display: block; }
    .shared-name-card-copy small { margin-bottom: 2px; color: #3F3F46; font-size: 9px; font-weight: 850; letter-spacing: .55px; text-transform: uppercase; }
    .shared-name-card-copy strong { font-size: 15px; }
    .shared-name-card-copy span { margin-top: 4px; overflow: hidden; color: #748079; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .shared-name-card-actions { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(48,97,75,.12); display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .shared-name-card-actions button { min-height: 34px; border: 0; border-radius: 11px; color: #18181B; background: rgba(255,255,255,.72); cursor: pointer; font-size: 10px; font-weight: 800; }
    .shared-name-card-actions button.primary { color: #fff; background: #18181B; }
    .shared-name-card-actions button:active { transform: scale(.97); }
    .message-bubble.library-bubble { width: min(270px, 75vw); max-width: 100%; padding: 0; overflow: hidden; background: transparent; }
    .shared-library-card { width: 100%; min-height: 82px; padding: 12px; border: 1px solid #E4E4E7; border-radius: 18px 18px 6px 18px; display: flex; align-items: center; gap: 11px; color: #1f2924; background: linear-gradient(145deg,#FAFAFA,#F4F4F5); box-shadow: 0 4px 13px rgba(24, 24, 27, .06); }
    .message.assistant .shared-library-card { border-radius: 18px 18px 18px 6px; }
    .shared-library-art { width: 54px; height: 54px; flex: 0 0 54px; border-radius: 14px; display: grid; place-items: center; background: var(--saved-bg); font-size: 26px; }
    .shared-library-copy { min-width: 0; flex: 1; }
    .shared-library-copy small, .shared-library-copy strong, .shared-library-copy span { display: block; }
    .shared-library-copy small { margin-bottom: 2px; color: #3F3F46; font-size: 9px; font-weight: 850; letter-spacing: .55px; text-transform: uppercase; }
    .shared-library-copy strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
    .shared-library-copy span { margin-top: 4px; overflow: hidden; color: #748079; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    /* Transparent layer under the message menu: catches the tap that closes
       it so the message underneath is never tapped by accident. */
    .message-action-backdrop {
      position: fixed;
      inset: 0;
      z-index: 23;
      display: none;
      background: rgba(18, 22, 28, .28);
      touch-action: none;
      -webkit-tap-highlight-color: transparent;
    }
    .message-action-backdrop.show { display: block; animation: message-menu-fade .14s ease; }
    @keyframes message-menu-fade { from { opacity: 0; } to { opacity: 1; } }
    /* Copy of the long-pressed bubble, above the dimmed chat. */
    .message-action-preview {
      position: absolute;
      z-index: 24;
      display: none;
      pointer-events: none;
    }
    .message-action-preview.show { display: block; }
    .message-action-preview .message-action-clone {
      display: block !important; width: 100% !important; max-width: none !important; height: 100%;
      margin: 0 !important; padding: 0 !important; gap: 0 !important; animation: none;
    }
    .message-action-preview .message-action-clone .message-bubble { white-space: normal; }
    .message-action-preview .message-action-clone > * {
      width: 100% !important; height: 100% !important; max-width: none !important; min-width: 0 !important;
      margin: 0 !important; box-sizing: border-box; box-shadow: 0 10px 28px rgba(20,25,31,.22);
    }
    /* While its copy is shown above the dimmed chat, hide the original. */
    .message.menu-lifted .message-bubble,
    .community-chat-bubble.menu-lifted,
    .soul-line-chat-bubble.menu-lifted { visibility: hidden; }
    .message-reaction-bar {
      position: absolute;
      z-index: 25;
      display: none;
      gap: 2px;
      padding: 5px 6px;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 10px 28px rgba(20,25,31,.2);
    }
    .message-reaction-bar.show { display: flex; animation: message-menu-pop .16s ease; }
    .message-reaction-bar button {
      width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
      display: grid; place-items: center; background: transparent;
      font-size: 24px; line-height: 1; cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .message-reaction-bar button:active { background: #eef0f3; transform: scale(1.15); }
    .message-action-sheet {
      position: absolute;
      z-index: 25;
      inset: auto auto auto auto;
      width: 220px;
      padding: 4px 0;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      background: #fff;
      box-shadow: 0 12px 32px rgba(20,25,31,.2);
      opacity: 0;
      pointer-events: none;
      transform: scale(.96);
      transform-origin: top center;
      transition: opacity .14s ease, transform .14s ease;
    }
    .message-action-sheet.show { opacity: 1; pointer-events: auto; transform: none; }
    @keyframes message-menu-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
    .message-action-sheet button {
      min-height: 44px; padding: 0 16px; border: 0; border-radius: 0;
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      color: #1f232b; background: transparent; text-align: left; cursor: pointer;
      font-size: 15px; font-weight: 550;
      -webkit-tap-highlight-color: transparent;
    }
    .message-action-sheet button + button:not([hidden]) { border-top: 1px solid #eef0f3; }
    .message-action-sheet button i { font-style: normal; font-size: 16px; opacity: .7; }
    .message-action-sheet button:active { background: #f2f3f6; }
    .message-action-sheet button.danger { color: #d23b4a; background: transparent; }
    .message-action-sheet button[hidden] { display: none; }
    /* Long-press opens our menu: no iOS text selection, Live Text on photos
       ("Copy / Look Up / Translate") or link preview in the chat. */
    .pane-chat .conversation .message,
    .pane-chat .conversation .message *,
    .message-bubble, .message-bubble *, .community-chat-bubble, .soul-line-chat-bubble,
    .message-action-sheet, .message-action-sheet *,
    .message-reaction-bar, .message-reaction-bar *,
    .message-action-preview, .message-action-preview * {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
    }
    .chat-photo { -webkit-user-drag: none; }
    /* During a message long-press and while its menu is open: no text
       selection or callout anywhere (including the dimmed backdrop). */
    html.is-message-pressing,
    html.is-message-pressing * {
      -webkit-touch-callout: none !important;
      -webkit-user-select: none !important;
      user-select: none !important;
    }
    .message-action-backdrop { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
    /* Remind me: the menu switches to time choices */
    .message-remind-options { display: none; flex-direction: column; }
    .message-action-sheet.is-remind-mode > button { display: none; }
    .message-action-sheet.is-remind-mode .message-remind-options { display: flex; }
    .message-remind-options button + button { border-top: 1px solid #eef0f3; }
    .message-reaction-bar button.is-mine { background: #e8eefc; }

    /* Reply: quote inside the bubble */
    .reply-quote {
      display: flex; flex-direction: column; gap: 1px;
      width: 100%; min-width: 120px; margin: 0 0 6px; padding: 6px 10px;
      border: 0; border-left: 3px solid #5b7bd5; border-radius: 10px;
      background: rgba(0, 0, 0, .05); color: inherit; text-align: left;
      font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .reply-quote strong { font-size: 12px; font-weight: 700; color: #3f5fb8; }
    .reply-quote span {
      font-size: 13px; opacity: .8; overflow: hidden; text-overflow: ellipsis;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }
    .message-bubble.photo-bubble.has-reply,
    .message-bubble.location-bubble.has-reply,
    .message-bubble.name-card-bubble.has-reply { padding-top: 6px; }
    .message-bubble.photo-bubble .reply-quote,
    .message-bubble.name-card-bubble .reply-quote { margin: 0 6px 6px; width: calc(100% - 12px); }
    .message.is-flash .message-bubble { animation: message-flash 1.3s ease; }
    @keyframes message-flash { 0%, 40% { box-shadow: 0 0 0 3px rgba(91,123,213,.45); } 100% { box-shadow: 0 0 0 0 rgba(91,123,213,0); } }

    /* Reactions: chips on the bubble's bottom corner */
    .message-bubble.has-reactions { position: relative; overflow: visible; }
    .message.has-reactions { margin-bottom: 18px; }
    .message-reactions {
      position: absolute; bottom: -15px; right: 8px; z-index: 2;
      display: flex; gap: 3px;
    }
    .message.user .message-reactions { right: auto; left: 8px; }
    .message-reaction-chip {
      min-height: 24px; padding: 1px 7px; border: 1px solid #e3e6ec; border-radius: 999px;
      display: inline-flex; align-items: center; gap: 2px;
      background: #fff; color: #3a3f47; font-size: 13px; font-weight: 650; line-height: 1;
      box-shadow: 0 2px 6px rgba(20,25,31,.08); cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .message-reaction-chip.is-mine { border-color: #b9c9f3; background: #eef3ff; }
    .reaction-burst {
      position: absolute; left: 50%; top: 50%; z-index: 3; pointer-events: none;
      font-size: 34px; transform: translate(-50%, -50%) scale(.4); opacity: 0;
      animation: reaction-burst .7s ease forwards;
    }
    @keyframes reaction-burst {
      30% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
      100% { transform: translate(-50%, -90%) scale(1); opacity: 0; }
    }
    .message-bubble.has-reactions:not(.has-reply) { position: relative; }

    /* Reply bar above the message box */
    .chat-reply-bar {
      display: flex; align-items: center; gap: 10px;
      margin: 0 4px 6px; padding: 7px 8px 7px 12px;
      border-left: 3px solid #5b7bd5; border-radius: 12px; background: #f1f4fa;
    }
    .chat-reply-bar[hidden] { display: none; }
    .chat-reply-bar-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
    .chat-reply-bar-text strong { font-size: 12px; color: #3f5fb8; }
    .chat-reply-bar-text span { font-size: 13px; color: #555b66; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .chat-reply-bar-close {
      flex: 0 0 auto; width: 28px; height: 28px; border: 0; border-radius: 50%;
      background: #e3e7ef; color: #555b66; font-size: 18px; line-height: 1; cursor: pointer;
    }

    /* Reminder banner */
    .reminder-banner {
      position: fixed; z-index: 2147483000; left: 10px; right: 10px;
      top: calc(env(safe-area-inset-top, 0px) + 8px);
      display: flex; align-items: center; gap: 10px;
      padding: 10px 10px 10px 12px; border-radius: 16px;
      background: #fff; box-shadow: 0 12px 32px rgba(20,25,31,.22);
      animation: reminder-in .25s ease;
    }
    @keyframes reminder-in { from { transform: translateY(-16px); opacity: 0; } to { transform: none; opacity: 1; } }
    .reminder-banner-icon { font-size: 22px; }
    .reminder-banner-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
    .reminder-banner-text strong { font-size: 13px; }
    .reminder-banner-text span { font-size: 13px; color: #5a616c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .reminder-open { border: 0; border-radius: 12px; padding: 8px 12px; background: #1a1d1b; color: #fff; font-weight: 700; font-size: 13px; }
    .reminder-close { border: 0; width: 30px; height: 30px; border-radius: 50%; background: #f0f1f4; color: #555b66; font-size: 18px; }

    /* "This message was deleted" */
    .message .message-bubble.deleted-bubble,
    .message.user .message-bubble.deleted-bubble {
      color: #8a9099;
      background: transparent;
      border: 1px dashed #d5d8de;
      font-style: italic;
      font-size: 14px;
      cursor: default;
    }
    .message.menu-open .message-bubble,
    .community-chat-bubble.menu-open,
    .soul-line-chat-bubble.menu-open { box-shadow: 0 0 0 2px rgba(90, 122, 196, .22); }
    .community-chat-bubble,
    .soul-line-chat-bubble { cursor: pointer; }

    /* Chat "..." sheet (delete for me / both). Restored: removed by mistake in 7f1dcac. */
    .chat-more-sheet {
      position: absolute; inset: 0; z-index: 75;
      display: grid; place-items: center; padding: 24px 18px;
      background: rgba(242, 244, 247, .96);
    }
    .chat-more-sheet[hidden] { display: none !important; }
    .chat-more-card {
      width: min(100%, 340px); padding: 26px 22px 18px;
      border-radius: 28px; background: #fff;
      box-shadow: 0 18px 50px rgba(22, 27, 34, .12);
    }
    .chat-more-card .auth-kicker { color: #6a727c; }
    .chat-more-card h1 { margin: 0 0 14px; font-size: 26px; letter-spacing: -.03em; }
    .chat-more-option {
      width: 100%; margin: 0 0 8px; padding: 12px 14px;
      border: 0; border-radius: 16px;
      color: #25282d; background: #f6f7f9;
      text-align: left; cursor: pointer;
    }
    .chat-more-option strong,
    .chat-more-option small { display: block; }
    .chat-more-option strong { font-size: 15px; font-weight: 750; }
    .chat-more-option small { margin-top: 4px; color: #6d7480; font-size: 12px; line-height: 1.4; }
    .chat-more-option.danger { color: #9b2c2c; background: #f8f1f1; }
    .chat-more-option.danger small { color: #8a5b5b; }
    .chat-more-card .auth-switch { color: #5d6470; }
    .chat-more-quick {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 12px;
    }
    .chat-more-quick-btn {
      display: grid; justify-items: center; gap: 4px; min-height: 64px; padding: 10px 2px;
      border: 0; border-radius: 16px; color: #25282d; background: #f6f7f9;
      font: inherit; font-size: 11px; font-weight: 650; cursor: pointer;
    }
    .chat-more-quick-btn span { font-size: 18px; line-height: 1; }
    .chat-more-quick-btn.danger { color: #9b2c2c; background: #f8f1f1; }

/* Chats (one-to-one and group): the same message box as My notes. + on the left, the words in a
   rounded box, the send arrow on the right (gray until there is something to send). No Soul for now. */
.main.is-direct-chat .composer-wrap .composer {
  gap: 8px;
  align-items: flex-end;
  min-height: 0;
  height: auto;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.main.is-direct-chat .composer-wrap { border-top: 1px solid #f0efea; background: #fff; }
.main.is-direct-chat .composer .composer-divider,
.main.is-direct-chat .composer #composerFriendsButton,
.main.is-direct-chat .composer #messageBadge { display: none !important; }
.main.is-direct-chat .composer #composerHomeButton {
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f2f2f0;
  color: #30343a;
  box-shadow: none;
  display: grid;
  place-items: center;
  transition: background-color .18s ease, color .18s ease;
}
.main.is-direct-chat .composer #composerHomeButton .composer-side-icon { display: grid; place-items: center; transition: transform .18s ease; }
.main.is-direct-chat .composer #composerHomeButton .composer-side-icon svg { width: 22px; height: 22px; }
.main.is-direct-chat .composer #composerHomeButton .composer-side-icon.is-open { transform: rotate(45deg); }
.main.is-direct-chat .composer #composerHomeButton:has(.is-open) { background: #20211f; color: #fff; }
.main.is-direct-chat .composer #composerHomeButton .composer-side-label { display: none; }
.main.is-direct-chat .composer #chatComposerForm {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid #e7e6e1;
  border-radius: 21px;
  background: #fafaf8;
  align-items: center;
}
.main.is-direct-chat .composer #input { font-size: 16px; color: #20211f; background: none; }
.main.is-direct-chat .composer #sendButton {
  display: grid !important;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0 0 1px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #20211f;
  color: #fff;
  box-shadow: none;
}
.main.is-direct-chat .composer:not(.has-text) #sendButton { background: #e7e6e1; pointer-events: none; }
.soul-summary-bar[hidden] { display: none !important; }