/* Apply to the entire body to disable selection everywhere */
    body {
      -webkit-user-select: none;  /* iOS Safari */
      user-select: none;          /* Standard syntax */

      /* Disables the "Copy/Look Up" menu on long-press */
      -webkit-touch-callout: none;
    }

html {
      /* Kill the gray tap flash Android Chrome paints on every tapped element - the single most
         visible "this is a website" tell. Interactive elements keep their own :active styles. */
      -webkit-tap-highlight-color: transparent;
      /* Stop iOS from auto-inflating text after orientation changes (the layout is app-managed). */
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }

/* Keep inputs and textareas selectable so users can still type */
    input, textarea {
      -webkit-user-select: text;
      user-select: text;
    }

* { box-sizing: border-box; }

:root {
      color-scheme: dark;
      --bottom-lift: 8px;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --bottom-nav-height: 64px;
      /* Total vertical space the floating tab bar occupies: bar height + its 12px lift + the
         home-indicator inset. Single source of truth for tab-route scrollers (inline styles in
         Home/Browse/Chats/CreateLanding/CreateWizard/Account) AND the bar's own bottom offset,
         so content clearance always matches where the bar actually sits. */
      --tab-bar-clearance: calc(var(--bottom-nav-height) + 12px + var(--safe-bottom));
      /* Horizontal breathing room at the screen edges so tab content isn't flush to the bezel on
         mobile. Single source of truth for the app-wide side gutter (applied to .view). */
      --app-gutter: 12px;
    }

/* ── Reduced-motion contract (first-class) ──
   Neutralizes every CSS keyframe/transition for users who ask for less motion. The 0.01ms (not 0)
   keeps transitionend/animationend events firing so any code awaiting them still resolves. Motion's
   own components are handled separately via <MotionConfig reducedMotion="user">, and the gesture
   hooks read useReducedMotion() to disable finger-tracking. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
      margin: 0;
      font-family: 'Onest', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: var(--bg-base);
      color: var(--text-primary);
      height: 100vh;
      overflow: hidden;
      overscroll-behavior: none;
    }

html {
      overscroll-behavior: none;
    }

button, input, textarea, select {
      font: inherit;
    }

input,
    textarea,
    select {
      -webkit-appearance: none;
      appearance: none;
    }

button {
      cursor: pointer;
      border: 1px solid var(--outline-color);
      background: var(--surface-3);
      color: var(--text-primary);
      border-radius: 10px;
      padding: 8px 10px;
    }

button:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

button.primary {
      background: #eee;
      color: #111;
      border-color: #fff;
      font-weight: 700;
    }

button.danger {
      background: #3a1515;
      border-color: #753030;
    }

input, textarea, select {
      width: 100%;
      border: 1px solid var(--outline-color);
      border-radius: 12px;
      padding: 11px;
      background: var(--surface-2);
      color: var(--text-primary);
    }

textarea {
      resize: vertical;
      min-height: 78px;
    }

label {
      display: block;
      font-size: 12px;
      color: var(--text-secondary);
      margin: 10px 0 4px;
    }

/* Hidden per user request */

.view {
      display: none;
      max-width: 920px;
      margin: 0 auto;
      padding-top: 8px;
      padding-left: var(--app-gutter);
      padding-right: var(--app-gutter);
      transition:
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 300ms ease;
    }

.view.active {
      display: block;
    }

.section {
      background: var(--surface-3);
      border: 1px solid var(--outline-color);
      border-radius: 18px;
      padding: 14px;
      margin-bottom: 14px;
    }

.section h2, .section h3 {
      margin: 0 0 10px;
    }

.muted {
      color: var(--text-secondary);
      font-size: 13px;
    }

.row {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: 8px;
    }

.row > * {
      min-width: 0;
    }

.grid {
      display: grid;
      gap: 10px;
    }

.card {
      background: var(--surface-3);
      border: 1px solid var(--outline-color);
      border-radius: 16px;
      padding: 13px;
    }

.card-title {
      font-weight: 700;
      margin-bottom: 4px;
    }

.card-subtitle {
      color: var(--text-secondary);
      font-size: 13px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

.card-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 10px;
    }

/* Category chips */
    .category-chips {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding: 4px 0 10px;
      margin-bottom: 4px;
      flex-shrink: 0;
    }

.category-chips::-webkit-scrollbar { display: none; }

.category-chip {
      flex-shrink: 0;
      padding: 7px 16px;
      border-radius: 999px;
      border: 1px solid var(--outline-color);
      background: var(--surface-3);
      color: var(--text-secondary);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

.category-chip.active {
      background: var(--accent);
      color: var(--text-primary);
      border-color: var(--accent);
    }

.category-chip:active:not(.active) {
      background: #555;
    }

/* ── Segmented control (Browse / Chats / Community selectors) ──
   Recessed pill track with a single neutral thumb that slides to the selected segment.
   Mirrors native VerseSegmented tokens (theme/Color.kt): SurfaceRecessed track, Surface2
   thumb, BorderSubtle/BorderMedium borders, TextPrimary/TextMuted text. --seg-n = segment
   count, --seg-i = selected index (set inline by the React component). */
.verse-segmented {
      --seg-n: 1;
      --seg-i: 0;
      position: relative;
      display: flex;
      width: 100%;
      height: 44px;
      box-sizing: border-box;
      padding: 3px;
      border-radius: 999px;
      background: var(--surface-recessed);
      border: 1px solid #2c2740;
      margin-bottom: 10px;
    }

.verse-segmented-thumb {
      position: absolute;
      top: 3px;
      left: 3px;
      bottom: 3px;
      width: calc((100% - 6px) / var(--seg-n));
      border-radius: 999px;
      background: #322c45;
      border: 1px solid #3d3656;
      transform: translateX(calc(var(--seg-i) * 100%));
      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }

.verse-segmented-seg {
      position: relative;
      z-index: 1;
      flex: 1 1 0;
      min-width: 0;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 8px;
      border: none;
      background: none;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 500;
      color: #9b94ac;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      cursor: pointer;
      transition: color 0.2s;
    }

.verse-segmented-seg.active {
      color: #f2eff9;
      font-weight: 600;
    }

@media (prefers-reduced-motion: reduce) {
      .verse-segmented-thumb { transition: none; }
    }

/* Continue Chats row */
    .continue-section {
      margin-bottom: 14px;
    }

.section-label {
      font-size: 13px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin: 0 0 8px;
      font-weight: 600;
    }

.continue-row {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
    }

.continue-row::-webkit-scrollbar { display: none; }

.continue-card {
      flex-shrink: 0;
      width: 130px;
      border-radius: 14px;
      overflow: hidden;
      position: relative;
      aspect-ratio: 3/4;
      background: var(--surface-3);
      cursor: pointer;
    }

.continue-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

.continue-card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.08) 40%, transparent 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 10px;
    }

.continue-card-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.2;
    }

.continue-card-meta {
      font-size: 11px;
      color: rgba(255,255,255,0.75);
      margin-top: 2px;
    }

.vis-radio {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      font-size: 13px;
      color: var(--text-muted);
      margin: 0;
      position: relative;
      padding-left: 24px;
    }

.vis-radio input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

.vis-radio .radio-dot {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid #555;
      background: transparent;
      transition: all 0.15s ease;
    }

.vis-radio .radio-dot::after {
      content: '';
      display: block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: transparent;
      margin: 2px auto;
      transition: all 0.15s ease;
    }

.vis-radio input:checked ~ .radio-dot {
      border-color: #4a9eff;
    }

.vis-radio input:checked ~ .radio-dot::after {
      background: #4a9eff;
    }

.vis-radio input:checked ~ .radio-label {
      color: var(--text-primary);
    }

.mode-pill {
      display: inline-block;
      font-size: 12px;
      padding: 4px 8px;
      border: 1px solid var(--outline-bright);
      border-radius: 999px;
      color: var(--text-secondary);
      margin-bottom: 8px;
    }

@keyframes toastFade {
      0% { opacity: 0; transform: translateX(-50%) translateY(8px); }
      15% { opacity: 1; transform: translateX(-50%) translateY(0); }
      80% { opacity: 1; }
      100% { opacity: 0; }
    }

.msg.long-press-target {
      opacity: 0.72;
      transition: opacity 120ms ease;
    }

@keyframes jumpGlow {
      0%   { box-shadow: 0 0 0 0 rgba(255,185,15,0.7); }
      15%  { box-shadow: 0 0 22px 6px rgba(255,185,15,0.55); }
      100% { box-shadow: 0 0 0 0 rgba(255,185,15,0); }
    }

.bottom-tabs {
      height: var(--bottom-nav-height);
      border-top: 1px solid var(--outline-color);
      background: var(--surface-low);
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-shrink: 0;
      position: fixed;
      left: 0;
      right: 0;
      /* Lift the bar clear of the iOS home indicator (safe-bottom is 0 elsewhere). Without this
         the tab buttons sat inside the system swipe zone on installed iPhones - mis-taps and
         accidental app minimizes. The shadow paints the strip below solid down to the bezel. */
      bottom: calc(12px + var(--safe-bottom));
      box-shadow: 0 calc(12px + var(--safe-bottom)) 0 var(--surface-low);
      z-index: 50;
      touch-action: none;
    }

.tab-btn {
      border: 0;
      background: transparent;
      color: var(--text-muted);
      width: 54px;
      height: 48px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      padding: 0;
    }

.tab-btn svg {
      width: 24px;
      height: 24px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

.tab-btn.active {
      color: var(--text-primary);
      background: var(--surface-3);
    }

.tab-btn:hover {
      color: var(--text-primary);
    }

/* Profile Hero */
    .account-hero {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      margin-bottom: 14px;
    }

.account-hero-bg {
      height: 120px;
      background: var(--hero-gradient, linear-gradient(135deg, var(--bg-base) 0%, color-mix(in srgb, var(--accent-deep) 35%, var(--bg-base)) 50%, #111 100%));
      position: relative;
    }

.account-hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--accent) 15%, transparent) 0%, transparent 70%);
    }

.account-hero-header {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      gap: 4px;
      padding: 8px 10px;
      z-index: 2;
    }

.hero-icon-btn {
      background: rgba(0,0,0,0.4);
      border: none;
      border-radius: 8px;
      width: 32px;
      height: 32px;
      display: grid;
      place-items: center;
      color: rgba(255,255,255,0.8);
      cursor: pointer;
      padding: 0;
    }

.hero-icon-btn:hover { background: rgba(0,0,0,0.6); }

.tab-notif-dot {
      position: absolute;
      top: 4px;
      right: 12px;
      width: 8px;
      height: 8px;
      background: #e55;
      border-radius: 999px;
      pointer-events: none;
      box-shadow: 0 0 0 2px #111;
    }

.account-hero-body {
      padding: 0 14px 14px;
      margin-top: -36px;
      position: relative;
      z-index: 1;
    }

.account-avatar-lg {
      width: 72px;
      height: 72px;
      border-radius: 999px;
      background: #333;
      display: grid;
      place-items: center;
      font-size: 28px;
      font-weight: 700;
      color: var(--text-muted);
      border: 3px solid #111;
      overflow: hidden;
      position: relative;
    }

.account-avatar-lg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 999px;
    }

.level-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 999px;
      background: var(--hero-accent, var(--accent));
      color: var(--text-primary);
      font-size: 11px;
      font-weight: 700;
      margin-top: 8px;
    }

.account-hero-name {
      margin: 6px 0 2px;
      font-size: 20px;
      font-weight: 700;
      color: var(--text-primary);
    }

.account-hero-username {
      margin: 0 0 8px;
      font-size: 13px;
      color: var(--text-muted);
    }

.hero-edit-btn {
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 12px;
      color: var(--text-secondary);
      cursor: pointer;
    }

/* Stats row */
    .stats-row {
      display: flex;
      gap: 6px;
      margin-bottom: 18px;
    }

/* Shelves */
    .account-shelf {
      margin-bottom: 14px;
    }

.account-email {
      font-size: 12px;
      color: var(--text-muted);
      margin: 4px 0 8px 0;
    }

.field-hint {
      font-size: 12px;
      color: var(--text-muted);
      margin: -2px 0 4px 0;
    }

.avatar-remove:hover {
      background: #8a3a3a;
    }

.avatar-cam:hover {
      background: #2365c0;
    }

/* Public Profile */
    .public-hero {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      margin-bottom: 12px;
    }

.public-hero-bg {
      height: 100px;
      background: var(--hero-gradient, linear-gradient(135deg, var(--bg-base) 0%, color-mix(in srgb, var(--accent-deep) 35%, var(--bg-base)) 50%, #111 100%));
      position: relative;
    }

.public-hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 30% 50%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 70%);
    }

.public-hero-body {
      padding: 0 14px 14px;
      margin-top: -30px;
      position: relative;
      z-index: 1;
    }

.public-hero-name {
      margin: 6px 0 2px;
      font-size: 20px;
      font-weight: 700;
      color: var(--text-primary);
    }

.public-hero-username {
      margin: 0;
      font-size: 13px;
      color: var(--text-muted);
    }

.public-bio {
      margin: 8px 0 0;
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.4;
    }

.follow-btn {
      padding: 7px 18px;
      border-radius: 999px;
      border: none;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      background: var(--accent);
      color: var(--text-primary);
    }

.follow-btn.following {
      background: #555;
      color: var(--text-secondary);
      border: 1px solid var(--outline-bright);
    }

.follow-btn.self { display: none; }

    /* Home */
    .home-hero {
      position: relative;
      border-radius: 18px;
      overflow: hidden;
      margin-bottom: 16px;
    }
    .home-hero-bg {
      height: 100px;
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent-deep) 35%, var(--bg-base)) 0%, var(--accent) 50%, var(--accent-soft) 100%);
      position: relative;
    }
    .home-hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 60% 40%, rgba(255,255,255,0.14) 0%, transparent 70%);
    }
    .home-hero-text {
      padding: 0 16px 14px;
      margin-top: -28px;
      position: relative;
      z-index: 1;
    }
    .home-hero-title {
      font-size: 24px;
      font-weight: 700;
      color: var(--text-primary);
      margin: 0;
    }
    .home-hero-subtitle {
      margin: 2px 0 0;
      font-size: 13px;
      color: rgba(255,255,255,0.85);
    }

    .home-composer {
      background: var(--surface-3);
      border: 1px solid var(--outline-color);
      border-radius: 14px;
      padding: 10px;
      margin-bottom: 12px;
    }
    .home-composer textarea {
      width: 100%;
      min-height: 44px;
      max-height: 120px;
      background: var(--surface-low);
      border: 1px solid var(--outline-color);
      border-radius: 10px;
      padding: 8px 10px;
      color: var(--text-primary);
      font-size: 13px;
      resize: none;
      line-height: 1.4;
    }
    /* Home feed items */

    /* Layout only — the chat enter/exit slide is owned by the React <Screen> Motion primitive (F1).
       Do NOT re-add transform/transition here (it would fight Motion's per-frame inline transform). */
    .chat-screen {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: auto;
      z-index: 100;
      display: flex;
      height: 100dvh;
      flex-direction: column;
      background: var(--bg-base);
      overflow: hidden;
      overscroll-behavior: contain;
    }
    /* Layout only — push overlays slide via <Screen>; the lone plain .overlay-screen user (ChatScreen's
       in-chat Saved Moments) sets transform:none inline. */
    .overlay-screen {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: auto;
      z-index: 300;
      display: flex;
      height: 100dvh;
      flex-direction: column;
      background: var(--surface-low);
      touch-action: pan-y;
      overflow: hidden;
      overscroll-behavior: contain;
    }

    .overlay-screen-body {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
      padding: 14px;
    }

    .chat-header {
      min-height: 54px;
      padding: 45px 12px 0;
      border-bottom: 1px solid var(--outline-color);
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      background: var(--surface-low);
      touch-action: none;
    }

    .back-btn {
      width: 42px;
      height: 42px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      padding: 0;
      background: transparent;
      border-color: transparent;
    }

    .back-btn svg {
      width: 24px;
      height: 24px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .avatar {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      background: #2b2b2b;
      display: grid;
      place-items: center;
      font-weight: 700;
      overflow: hidden;
      flex-shrink: 0;
    }

    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .chat-row-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 999px;
    }
    .chat-row-avatar {
      overflow: hidden;
    }

    .chat-title-wrap {
      min-width: 0;
    }

    .char-header-pill {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 8px 5px 2px;
      border-radius: 10px;
      background: transparent;
      border: none;
      cursor: pointer;
      min-width: 0;
      max-width: calc(100vw - 120px);
      flex-shrink: 1;
      transition: background 120ms;
    }
    /* Scope the transparent chat-header design with higher specificity to win over community.css overrides */
    .chat-header .char-header-pill {
      background: transparent;
      border: none;
      border-radius: 10px;
      padding: 5px 8px 5px 2px;
      max-width: calc(100vw - 120px);
    }
    .char-header-pill:hover { background: rgba(255,255,255,0.07); }
    .char-header-pill:active { background: rgba(255,255,255,0.1); }
    .chat-header .char-header-pill:hover { background: rgba(255,255,255,0.07); }
    .chat-header .char-header-pill:active { background: rgba(255,255,255,0.1); }
    .header-pill-avatar {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .header-pill-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 999px;
    }
    .header-pill-name {
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 15px;
      cursor: pointer;
    }
    .header-pill-chevron {
      flex-shrink: 0;
      opacity: 0.35;
    }

    .header-like-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      flex-shrink: 0;
      border-radius: 999px;
      transition: transform 120ms;
    }
    .header-like-btn:active { transform: scale(1.2); }

    /* ── Character Info Dropdown ── */
    .char-dropdown-panel {
      position: absolute;
      top: 20px; left: 12px; right: 12px;
      z-index: 210;
      background: var(--surface-3);
      border: 1px solid var(--outline-color);
      border-radius: 20px;
      transform: translateY(16px) scale(0.88);
      opacity: 0;
      transform-origin: top center;
      transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), opacity 400ms cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 52px 20px 18px;
      min-height: 50vh;
    }
    .char-dropdown-panel.active {
      transform: translateY(0) scale(1);
      opacity: 1;
      pointer-events: auto;
    }
    .char-dropdown-pfp {
      width: 80vw;
      max-width: 360px;
      aspect-ratio: 1;
      border-radius: 18px;
      background: var(--surface-3);
      overflow: hidden;
      display: grid;
      place-items: center;
      font-size: 80px;
      font-weight: 700;
      color: var(--text-muted);
      margin-bottom: 14px;
    }
    .char-dropdown-pfp img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .char-dropdown-name {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 10px;
    }
    .char-dropdown-creator-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 18px;
      border-radius: 999px;
      background: #252525;
      border: 1px solid var(--outline-color);
      color: var(--accent-soft);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: background 120ms;
      margin-top: auto;
      margin-bottom: 4px;
    }
    .char-dropdown-creator-pill:hover { background: #2e2e2e; }
    .char-dropdown-creator-pill .creator-avatar {
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: #333;
      display: grid;
      place-items: center;
      font-size: 10px;
      font-weight: 700;
      color: var(--text-muted);
    }

    /* Backdrop catch — invisible layer below the panel to swallow taps */
    .char-dropdown-backdrop {
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      z-index: 209;
      display: none;
    }
    .char-dropdown-backdrop.active {
      display: block;
    }

    .chat-subtitle {
      display: none;
    }

    #messages, .messages-react {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      touch-action: pan-y;
      padding: 14px;
    }

    .msg {
      margin: 3px 0;
      display: flex;
      flex-direction: column;
    }

    .msg.user {
      align-items: flex-start;
      flex-direction: row;
      gap: 6px;
      justify-content: flex-end;
    }

    .msg.assistant {
      align-items: flex-start;
      flex-direction: row;
      gap: 6px;
    }

    .msg-content {
      flex: 0 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }
    .msg.user .msg-content {
      align-items: flex-end;
    }

    .bubble {
      max-width: min(60vw, 680px);
      padding: var(--chat-bubble-pad-y, 8px) var(--chat-bubble-pad-x, 11px);
      border-radius: var(--chat-bubble-radius, 16px);
      line-height: var(--chat-bubble-line-height, 1.4);
      white-space: pre-wrap;
      font-size: var(--chat-bubble-font-size, 14.5px);
    }

    .msg.user .bubble {
      background: #2d4a75;
      color: white;
      border-bottom-right-radius: var(--chat-bubble-tail-radius, 6px);
    }

    .msg.assistant .bubble {
      background: #2c2c3a;
      border: 1px solid var(--outline-color);
      border-bottom-left-radius: var(--chat-bubble-tail-radius, 6px);
    }

    /* Inline message editor — roomier than the read bubble, but kept inline
       (avatar stays, width is bounded so it never spans edge-to-edge). */
    .msg-edit {
      width: min(82vw, 620px);
      max-width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .msg-edit-area {
      width: 100%;
      box-sizing: border-box;
      min-height: 120px;
      max-height: 70vh;
      padding: 14px;
      border: 1px solid var(--outline-color);
      border-radius: 12px;
      background: #2c2c3a;
      color: var(--text-primary);
      font: inherit;
      font-size: 15px;
      line-height: 1.55;
      resize: none;            /* auto-grow replaces manual drag */
      overflow-y: auto;        /* scroll only past max-height */
    }
    .msg-edit-area:focus {
      outline: none;
      border-color: #4f6ef7;
      box-shadow: 0 0 0 2px rgba(79, 110, 247, 0.25);
    }

    .msg-edit-actions { display: flex; gap: 10px; justify-content: flex-end; }

    .msg-edit-btn {
      padding: 9px 20px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid var(--outline-color);
      background: transparent;
      color: #cfcfe0;
    }
    .msg-edit-btn.primary { background: #4f6ef7; border-color: #4f6ef7; color: var(--text-primary); }

    .speaker-name {
      display: none;
    }

    .auth-gate {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: var(--surface-low);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      -webkit-user-select: text;
      user-select: text;
    }

    .auth-gate-card {
      width: 100%;
      max-width: 360px;
      text-align: center;
    }

    .auth-gate-brand {
      font-size: 32px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 4px;
    }

    .auth-gate-sub {
      color: var(--text-muted);
      font-size: 14px;
      margin: 0 0 28px;
    }

    .auth-gate-forms input {
      width: 100%;
      padding: 12px 14px;
      margin-bottom: 10px;
      border: 1px solid var(--outline-color);
      border-radius: 10px;
      background: #181818;
      color: var(--text-primary);
      font-size: 15px;
      outline: none;
      box-sizing: border-box;
    }

    .auth-gate-forms input:focus {
      border-color: #4a9eff;
    }

    .auth-gate-forms .primary {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 10px;
      background: #4a9eff;
      color: var(--text-primary);
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 4px;
    }

    .auth-gate-forms .primary:active {
      background: #3a8eef;
    }

    .auth-gate-switch {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: 14px;
    }

    .auth-gate-switch a {
      color: var(--text-primary);
    }

    .msg-avatar {
      width: 26px;
      height: 26px;
      border-radius: 999px;
      flex-shrink: 0;
      margin-top: 2px;
      align-self: flex-start;
      background: #333;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 600;
      overflow: hidden;
    }

    .msg-avatar img {
      width: 100%;
      height: 100%;
      border-radius: 999px;
      object-fit: cover;
    }

    .bubble em {
      color: var(--text-primary);
    }

    .msg-actions {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 5px;
      min-height: 32px;
      opacity: 0.6;
      transition: opacity 120ms ease;
    }

    .msg:hover .msg-actions {
      opacity: 1;
    }

    .msg.user .msg-actions {
      justify-content: flex-end;
    }

    /* ── Regen history navigation arrows ── */
    .regen-nav .action-btn {
      padding: 2px 3px;
      opacity: 0.55;
      transition: opacity 120ms ease;
    }
    .regen-nav .action-btn:hover {
      opacity: 1;
    }

    /* ── DM messages ── */
    .msg.dm-mine { align-items: flex-end; }
    .msg.dm-theirs { align-items: flex-start; flex-direction: row; gap: 6px; }
    .msg.dm-mine .bubble { background: #2d4a75; color: var(--text-primary); border-bottom-right-radius: 6px; border-bottom-left-radius: 16px; border-top-left-radius: 16px; border-top-right-radius: 16px; }
    .msg.dm-theirs .bubble { background: #2c2c3a; border: 1px solid var(--outline-color); border-bottom-left-radius: 6px; border-bottom-right-radius: 16px; border-top-left-radius: 16px; border-top-right-radius: 16px; }

    /* ── DM list ── */
    .dm-section-header { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1.2px; padding: 14px 8px 6px; }
    .dm-section-header:first-child { padding-top: 4px; }
    .dm-request-badge { display: inline-block; background: #f0a020; color: #000; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; margin-left: 6px; vertical-align: middle; }

    /* ── DM request accept/decline bar ── */
    .dm-request-bar { display: flex; gap: 10px; padding: 10px 14px; background: var(--surface-3); border-top: 1px solid #2a2a2a; align-items: center; flex-shrink: 0; }
    .dm-request-bar span { flex: 1; font-size: 13px; color: var(--text-muted); }
    .dm-request-bar button { padding: 6px 18px; border-radius: 8px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; }
    .dm-accept-btn { background: #4a9eff; color: var(--text-primary); }
    .dm-accept-btn:hover { background: #3a8eef; }
    .dm-decline-btn { background: #555; color: var(--text-secondary); }
    .dm-decline-btn:hover { background: #3a3a3a; }

    a.btn-with-icon {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      border: 1px solid var(--outline-color);
      background: var(--surface-3);
      color: var(--text-primary);
      border-radius: 10px;
      padding: 8px 10px;
      text-decoration: none;
      font-size: inherit;
    }

    a.btn-with-icon:hover {
      background: #555;
    }

    .icon-btn {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      padding: 0;
      border-radius: 999px;
      background: transparent;
      color: var(--text-secondary);
      border-color: transparent;
    }

    .icon-btn:hover {
      color: var(--text-primary);
      background: #242424;
    }

    .icon-btn.danger:hover {
      color: #ffb0b0;
      background: #351919;
    }

    .icon-btn svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Dim action buttons when AI is generating — works for present and future buttons */
    .generating .icon-btn {
      opacity: 0.4;
      pointer-events: none;
    }

    .composer {
      border-top: 1px solid var(--outline-color);
      padding: 6px 10px;
      display: flex;
      background: var(--surface-low);
      flex-shrink: 0;
    }

    /* Keyboard closed: pad the composer clear of the iOS home indicator (safe-bottom is 0 on
       other devices). While typing (:focus-within) the keyboard covers that zone, so the tighter
       6px base padding applies and the composer hugs the keyboard. */
    .composer:not(:focus-within) {
      padding-bottom: calc(12px + var(--safe-bottom));
    }

    .input-react {
      min-height: 64px;
      max-height: 256px; /* 4x the 64px base; past this the textarea scrolls. useAutoGrowTextarea clamps the height to this; CSS provides the scroll. */
      padding: 10px 54px 10px 12px;
      font-size: 15px;
      resize: none;
      line-height: 1.4;
      overflow-y: auto;
      touch-action: pan-y;
      overscroll-behavior: contain;
      border: none;
      /* No UA focus outline: it draws a square-ish rect that doesn't match the rounded pill. The focus
         affordance is the matching ring on .input-wrap:focus-within below. */
      outline: none;
      background: transparent;
    }

    .input-wrap {
      flex: 1;
      position: relative;
      background: var(--surface-2);
      border: none;
      border-radius: 24px;
      display: flex;
      /* `stretch` keeps the textarea filling the wrap; with a single content-sized flow child (the send
         button is absolute) this renders identically to flex-end in every state, but avoids an iOS WebKit
         quirk that mispaints the caret at the bottom of an empty textarea before the first keystroke. */
      align-items: stretch;
    }

    /* Focus ring that hugs the 24px pill (box-shadow follows border-radius; an outline would not). Reuses
       the app's established focus-ring color (cf. .msg-edit-area:focus). */
    .input-wrap:focus-within {
      box-shadow: 0 0 0 2px rgba(79, 110, 247, 0.25);
    }

    .send-btn {
      position: absolute;
      right: 5px;
      /* Anchor to the bottom, NOT top:50% + translateY(-50%): this is a Motion.button whose
         whileTap scale writes a per-frame inline transform that would clobber the centering
         translate and drop the button ~18px (same Motion-vs-CSS-transform footgun documented
         near .chat-screen / .action-drawer-sheet). bottom:14px = (64 base min-height − 36 button)/2,
         so it reads centered at base height and stays pinned beside the last line as the
         composer grows upward. */
      bottom: 14px;
      width: 36px;
      height: 36px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      padding: 0;
      border: none;
      z-index: 1;
      transform-origin: center;
    }
    /* Invisible hitbox extension — keeps visual size but expands touch area vertically */
    .send-btn::after {
      content: "";
      position: absolute;
      top: -8px;
      bottom: -8px;
      left: -4px;
      right: -4px;
    }

    .send-btn svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .typing {
      display: flex;
      gap: 5px;
      align-items: center;
      padding: 2px 0;
    }

    .typing span {
      width: 7px;
      height: 7px;
      background: #aaa;
      border-radius: 999px;
      display: block;
      animation: typingDot 1.1s infinite ease-in-out;
    }

    .typing span:nth-child(2) {
      animation-delay: 0.15s;
    }

    .typing span:nth-child(3) {
      animation-delay: 0.3s;
    }

    @keyframes typingDot {
      0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }

40% { opacity: 1; transform: translateY(-3px); }

}

    @keyframes vFillUp {
      0% { clip-path: inset(100% 0 0 0); }

100% { clip-path: inset(0 0 0 0); }

}
    .empty-state {
      padding: 22px;
      border: 1px dashed var(--outline-bright);
      border-radius: 16px;
      text-align: center;
      color: var(--text-secondary);
      background: var(--surface-3);
    }

    .chat-row {
      display: grid;
      grid-template-columns: 46px 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 12px;
      background: var(--surface-3);
      border: 1px solid var(--outline-color);
      border-radius: 16px;
      cursor: pointer;
      user-select: none;
    }

    .chat-row:hover {
      background: #282836;
    }

    /* P7 — list entrance cascade (cssStagger). Rows rise+fade in; nth-child staggers the first
       screenful. `backwards` fill applies the hidden state during the delay but does NOT hold the
       transform afterward, so :active/tap transforms still work. The global prefers-reduced-motion
       rule (line 31) zeroes the duration for reduced-motion users. */
    @keyframes listItemRise {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .chat-row {
      animation: listItemRise var(--dur-standard, 0.28s) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
    }
    .chat-row:nth-child(2) { animation-delay: calc(1 * var(--stagger-step, 0.028s)); }
    .chat-row:nth-child(3) { animation-delay: calc(2 * var(--stagger-step, 0.028s)); }
    .chat-row:nth-child(4) { animation-delay: calc(3 * var(--stagger-step, 0.028s)); }
    .chat-row:nth-child(5) { animation-delay: calc(4 * var(--stagger-step, 0.028s)); }
    .chat-row:nth-child(6) { animation-delay: calc(5 * var(--stagger-step, 0.028s)); }
    .chat-row:nth-child(7) { animation-delay: calc(6 * var(--stagger-step, 0.028s)); }
    .chat-row:nth-child(8) { animation-delay: calc(7 * var(--stagger-step, 0.028s)); }

    .chat-row-avatar {
      width: 44px;
      height: 44px;
      border-radius: 999px;
      background: #2b2b2b;
      display: grid;
      place-items: center;
      font-weight: 700;
    }

    .chat-row-main {
      min-width: 0;
    }

    .chat-row-title {
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .chat-row-preview {
      color: var(--text-secondary);
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 2px;
    }

    .chat-row-time {
      color: var(--text-muted);
      font-size: 12px;
      white-space: nowrap;
    }

    .chat-row-time-wrap {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 1px;
    }

    /* ── Model tier badge glow animation ── */
    @keyframes badgeShimmer {
      0%, 100% { filter: brightness(1); }
      50% { filter: brightness(1.25); }
    }

    .chat-row-premium {
      border: 1.5px solid transparent; /* overridden inline */
      transition: box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .chat-row-premium:hover {
      filter: brightness(1.05);
    }

    .chat-row.selected {
      background: #2a1212;
      border-color: #552828;
    }
    .chat-row.has-unread-away {
      background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, transparent) 0%, color-mix(in srgb, var(--accent) 2%, transparent) 100%);
      border-color: color-mix(in srgb, var(--accent) 25%, transparent);
    }
    .chat-row .away-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--accent);
      flex-shrink: 0;
      margin-right: 6px;
    }

    .chat-select-toolbar {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-height: 44px;
      padding: 8px 0;
    }

    .chat-select-toolbar.hidden {
      display: none;
    }

    .chat-select-count {
      flex: 1;
      font-size: 13px;
      color: var(--text-secondary);
    }

    .chat-delete-selected-btn {
      background: #2a0f0f;
      border: 1px solid #4a2020;
      color: #e88;
      border-radius: 10px;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s;
    }

    .chat-delete-selected-btn:hover {
      background: #3f1818;
    }

    .chat-delete-selected-btn:disabled {
      opacity: .35;
      cursor: default;
    }

    .chat-select-btn {
      background: none;
      border: 1px solid var(--outline-bright);
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 12px;
      color: var(--text-secondary);
      cursor: pointer;
      transition: background .15s;
    }

    .chat-select-btn:hover {
      background: var(--surface-3);
    }

    .chat-select-btn.active {
      background: #555;
      border-color: #999;
      color: var(--text-primary);
    }

    .chat-tab-btn {
      padding: 6px 16px;
      border-radius: 999px;
      border: 1px solid var(--outline-color);
      background: var(--surface-3);
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }
    .chat-tab-btn.active {
      background: var(--accent);
      color: var(--text-primary);
      border-color: var(--accent);
    }

    /* ── Message-requests entry row (inside Messages) + requests sub-view back header.
       Mirrors native MessageRequestsRow (ChatListScreen.kt). ── */
    .dm-requests-row {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 10px 4px;
      margin-top: 10px;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
    }
    .dm-requests-icon {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--accent) 16%, transparent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      line-height: 1;
    }
    .dm-requests-text {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
    }
    .dm-requests-title {
      font-size: 15px;
      font-weight: 600;
      color: #f2eff9;
    }
    .dm-requests-sub {
      font-size: 13px;
      color: var(--accent-soft);
      margin-top: 1px;
    }
    .dm-requests-chevron {
      color: #9b94ac;
      flex-shrink: 0;
    }
    .dm-requests-back {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      padding: 10px 2px;
      margin-top: 10px;
      background: none;
      border: none;
      color: #f2eff9;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      text-align: left;
    }
    .dm-requests-back svg {
      color: #9b94ac;
      flex-shrink: 0;
    }

    .context-menu {
      position: fixed;
      z-index: 300;
      background: #282836;
      border: 1px solid var(--outline-color);
      border-radius: 12px;
      padding: 6px;
      min-width: 140px;
      display: none;
      box-shadow: 0 12px 40px rgba(0,0,0,0.45);
    }

    .context-menu button {
      display: block;
      width: 100%;
      text-align: left;
      border: 0;
      background: transparent;
      border-radius: 8px;
      padding: 9px 10px;
    }

    .context-menu button:hover {
      background: #282828;
    }

    .create-options {
      display: grid;
      gap: 10px;
    }

    .create-option {
      cursor: pointer;
    }

    .create-option:hover {
      background: #282836;
    }

    #createLanding.hidden {
      display: none;
    }

    @media (max-width: 700px) {
      .top-header {
        height: 50px;
      }

.section {
        padding: 12px;
        border-radius: 16px;
      }

.row {
        flex-wrap: wrap;
      }

.row button {
        flex: 1;
      }

.card-actions button {
        flex: 1;
      }

.chat-row {
        grid-template-columns: 42px 1fr auto;
        padding: 11px;
      }

.chat-row-avatar {
        width: 40px;
        height: 40px;
      }

.chat-row-time {
        font-size: 11px;
      }

.chat-select-toolbar {
        flex-wrap: wrap;
      }

.chat-select-count {
        font-size: 12px;
      }

.chat-delete-selected-btn {
        font-size: 12px;
        padding: 6px 12px;
      }

.chat-select-btn {
        font-size: 11px;
        padding: 4px 10px;
      }

}
    /* Hide scrollbars everywhere */
html,
body,
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}
html,
body {
  overflow: hidden !important;
}

    input, textarea, select {
      font-size: 16px !important;
    }

    .field-badge {
      font-size: 11px;
      font-weight: 400;
      color: var(--text-muted);
      background: var(--surface-3);
      padding: 1px 7px;
      border-radius: 999px;
      margin-left: 6px;
      vertical-align: middle;
    }

    .field-badge.required {
      color: #e88;
      background: #2a1818;
    }

    /* ── Preset Tags Grid (Character Editor) ── */
    .preset-tags-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .preset-tags-flat {
      flex-direction: row;
    }

    .preset-tags-flat .preset-tags-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .preset-tags-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .preset-chip {
      padding: 3px 10px;
      border-radius: 14px;
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      border: 1px solid #3a3a3a;
      background: var(--surface-3);
      color: var(--text-secondary);
      transition: background 0.12s, color 0.12s, border-color 0.12s;
      user-select: none;
      -webkit-user-select: none;
    }

    .preset-chip:hover {
      border-color: #888;
      color: var(--text-primary);
    }

    .preset-chip.active {
      background: #1a1a3e;
      border-color: #4a9eff;
      color: #4a9eff;
    }

    .preset-chip.active:hover {
      background: #1f1f4a;
    }

    /* "View more" / "View less" toggle chip — an action, not a selectable tag. */
    .preset-chip-more {
      background: transparent;
      border-style: dashed;
      border-color: #4a9eff;
      color: #4a9eff;
    }

    .preset-chip-more:hover {
      background: #1a1a3e;
      color: var(--text-primary);
    }

    /* ── Browse Filter Bar ── */
    .browse-filter-bar {
      /* Reuses .category-chips CSS — one horizontal scrollable chip row */
      display: flex;
      gap: 3px;
      padding: 4px 0 8px;
    }

    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
      flex-shrink: 0;
    }

    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }

    .toggle-slider {
      position: absolute;
      inset: 0;
      background: #333;
      border-radius: 24px;
      transition: background 0.2s ease;
      cursor: pointer;
    }

    .toggle-slider::before {
      content: '';
      position: absolute;
      width: 18px;
      height: 18px;
      left: 3px;
      bottom: 3px;
      background: #888;
      border-radius: 50%;
      transition: transform 0.2s ease, background 0.2s ease;
    }

    .toggle-switch input:checked + .toggle-slider {
      background: #4a9eff;
    }

    .toggle-switch input:checked + .toggle-slider::before {
      transform: translateX(20px);
      background: #fff;
    }

    /* Persona cards */
    .persona-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border-radius: 12px;
      background: var(--surface-1);
      cursor: pointer;
      margin-bottom: 8px;
    }
    .persona-card-avatar {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background: #555;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
      font-weight: 600;
      font-size: 16px;
      overflow: hidden;
    }
    .persona-card-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .persona-card-info {
      flex: 1;
      min-width: 0;
    }
    .persona-card-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .persona-card-pronouns {
      font-size: 12px;
      color: var(--text-muted);
    }
    .persona-card-badge {
      font-size: 10px;
      padding: 2px 8px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--accent) 20%, transparent);
      color: var(--accent);
      font-weight: 600;
      margin-left: 6px;
    }
    .persona-card-actions {
      display: flex;
      gap: 4px;
      flex-shrink: 0;
    }
    .persona-card-actions button {
      background: none;
      border: 1px solid var(--outline-color);
      border-radius: 6px;
      padding: 4px 8px;
      font-size: 11px;
      color: var(--text-muted);
      cursor: pointer;
    }
    .persona-select-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      border-radius: 10px;
      cursor: pointer;
      margin-bottom: 4px;
    }
    .persona-select-item:hover, .persona-select-item.active {
      background: #555;
    }
    .persona-select-item.active {
      border: 1px solid var(--accent);
    }
    .persona-select-avatar {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      background: #555;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-secondary);
      font-size: 13px;
      overflow: hidden;
    }
    .persona-select-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .persona-none-circle {
      width: 32px;
      height: 32px;
      border-radius: 999px;
      border: 2px dashed var(--outline-bright);
      flex-shrink: 0;
    }
    /* Timeline marker */
    .msg.system-marker {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      color: var(--text-muted);
      font-size: 11px;
      width: 75%;
      margin: 0 auto;
    }
    .msg.system-marker::before,
    .msg.system-marker::after {
      content: "";
      flex: 1 1 auto;
      min-width: 12px;
      height: 1px;
      background: #555;
    }
    .msg.system-marker span {
      flex: 0 0 auto;
      color: var(--text-muted);
      white-space: nowrap;
    }
    /* Sender name on message bubbles */
    .msg-sender-name {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 3px;
      margin-left: 2px;
    }
    .msg.assistant .msg-sender-name { color: var(--accent); }
    .msg.user .msg-sender-name { color: #4a9eff; }
    /* ── Composer Action Drawer ──────────────────────────────────── */
    .action-drawer {
      position: fixed;
      inset: 0;
      z-index: 10000;
      pointer-events: none;
    }
    .action-drawer.active {
      pointer-events: auto;
    }
    .action-drawer-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.4);
      pointer-events: none;
    }
    .action-drawer.active .action-drawer-backdrop {
      pointer-events: auto;
    }
    .action-drawer-sheet {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      max-height: 55%;
      background: #1a1a2e;
      border-radius: 16px 16px 0 0;
      /* Slide + drag-to-dismiss are owned by Motion (ActionDrawer.tsx) — no CSS transform/transition
         here, or the CSS transition would fight Motion's per-frame inline transform. */
      padding-bottom: calc(12px + var(--safe-bottom, 0px));
      z-index: 1;
      pointer-events: auto;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }
    .action-drawer-grip {
      width: 36px;
      height: 4px;
      background: #555;
      border-radius: 2px;
      margin: 8px auto 4px;
    }
    .action-item {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      padding: 14px 20px;
      background: none;
      border: none;
      color: var(--text-secondary);
      font-size: 14px;
      cursor: pointer;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      text-align: left;
      font-family: inherit;
    }
    .action-item:last-child {
      border-bottom: none;
    }
    .action-item:hover {
      background: rgba(255,255,255,0.04);
    }
    .action-icon {
      font-size: 22px;
      flex-shrink: 0;
      width: 32px;
      text-align: center;
    }
    .action-text {
      flex: 1;
      min-width: 0;
    }
    .action-title {
      font-weight: 600;
      color: var(--text-primary);
    }
    .action-desc {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 1px;
    }
    /* Compact NSFW pill selector inside action drawer */
    .ad-nsfw-section {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 20px 10px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .ad-nsfw-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      flex-shrink: 0;
    }
    .ad-nsfw-pills {
      display: flex;
      gap: 4px;
      flex: 1;
    }
    .ad-nsfw-pill {
      flex: 1;
      padding: 5px 0;
      border: 1px solid var(--outline-color);
      border-radius: 8px;
      background: transparent;
      color: var(--text-muted);
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      text-align: center;
      transition: all 0.15s ease;
    }
    .ad-nsfw-pill:hover {
      border-color: #5d5d76;
      color: var(--text-muted);
    }
    .ad-nsfw-pill.active {
      background: color-mix(in srgb, var(--accent-soft) 25%, transparent);
      border-color: var(--accent-soft);
      color: #c084fc;
    }
    @media (min-width: 768px) {
      .action-drawer-sheet {
        max-width: 480px;
        margin: 0 auto;
        left: 0;
        right: 0;
      }
    }

/* ---------------------------------------------------------------
   Dialogue Theme Customization
   --------------------------------------------------------------- */

/* -- Theme Selector Cards -- */
.theme-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  margin-bottom: 10px;
  border-radius: 14px;
  border: 2px solid var(--outline-color);
  background: var(--surface-3);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  user-select: none;
}
.theme-card:hover {
  background: #2a2a3a;
  border-color: var(--outline-bright);
}
.theme-card.active {
  border-color: #22c55e;
  background: #1a2e1f;
}
.theme-card.active:hover {
  border-color: #22c55e;
  background: #1f3524;
}

.theme-card-body {
  flex: 1;
  min-width: 0;
}
.theme-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.theme-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* -- Sticky Preview Bubble -- */

/* -- Theme Preview Bubble -- */

/* ── Bubble Gradients — top-left dark → bottom-right theme color ── */
/* Applies to ALL assistant messages, not just dialogue */

/* Classic White */
.theme-classic-white .msg.assistant .bubble {
  background: linear-gradient(135deg, var(--surface-1) 0%, rgba(255,255,255,0.15) 100%) !important;
}
.theme-classic-white .dialogue-highlight { color: var(--text-primary); font-weight: 700; }

/* Soft Amber */
.theme-soft-amber .msg.assistant .bubble {
  background: linear-gradient(135deg, var(--surface-1) 0%, rgba(240,184,120,0.28) 100%) !important;
}
.theme-soft-amber .dialogue-highlight { color: #f0b878; font-weight: 700; }

/* Soft Blue */
.theme-soft-blue .msg.assistant .bubble {
  background: linear-gradient(135deg, var(--surface-1) 0%, rgba(144,202,249,0.25) 100%) !important;
}
.theme-soft-blue .dialogue-highlight { color: #90caf9; font-weight: 700; }

/* Soft Lavender */
.theme-soft-lavender .msg.assistant .bubble {
  background: linear-gradient(135deg, var(--surface-1) 0%, rgba(206,147,216,0.25) 100%) !important;
}
.theme-soft-lavender .dialogue-highlight { color: #ce93d8; font-weight: 700; }

/* Soft Mint */
.theme-soft-mint .msg.assistant .bubble {
  background: linear-gradient(135deg, var(--surface-1) 0%, rgba(128,203,196,0.28) 100%) !important;
}
.theme-soft-mint .dialogue-highlight { color: #80cbc4; font-weight: 700; }

/* Warm Peach */
.theme-warm-peach .msg.assistant .bubble {
  background: linear-gradient(135deg, var(--surface-1) 0%, rgba(255,171,145,0.28) 100%) !important;
}
.theme-warm-peach .dialogue-highlight { color: #ffab91; font-weight: 700; }

/* Soft Rose */
.theme-soft-rose .msg.assistant .bubble {
  background: linear-gradient(135deg, var(--surface-1) 0%, rgba(249,168,212,0.26) 100%) !important;
}
.theme-soft-rose .dialogue-highlight { color: #f9a8d4; font-weight: 700; }

/* Golden Hour */
.theme-golden-hour .msg.assistant .bubble {
  background: linear-gradient(135deg, var(--surface-1) 0%, rgba(252,211,77,0.24) 100%) !important;
}
.theme-golden-hour .dialogue-highlight { color: #fcd34d; font-weight: 700; }

/* Custom — color comes from --custom-dialogue-color (dialogueTheme.applyCustomColorVar) */
.theme-custom .msg.assistant .bubble {
  background: linear-gradient(135deg, var(--surface-1) 0%, rgba(167,139,250,0.22) 100%) !important;
}
.theme-custom .dialogue-highlight { color: var(--custom-dialogue-color, var(--accent-soft)); font-weight: 700; }

/* High Contrast */
.theme-high-contrast .msg.assistant .bubble {
  background: linear-gradient(135deg, var(--surface-1) 0%, rgba(255,255,255,0.2) 100%) !important;
}
.theme-high-contrast .dialogue-highlight { color: var(--text-primary); font-weight: 800; text-shadow: 0 0 1px rgba(255,255,255,0.3); }

/* Underlined */
.theme-underlined .msg.assistant .bubble {
  background: linear-gradient(135deg, var(--surface-1) 0%, rgba(200,200,255,0.15) 100%) !important;
}
.theme-underlined .dialogue-highlight { color: var(--text-primary); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }

/* Quotes Only */

/* Dyslexia Friendly */
.theme-dyslexia-friendly .msg.assistant .bubble {
  background: linear-gradient(135deg, var(--surface-1) 0%, rgba(220,220,255,0.15) 100%) !important;
}
.theme-dyslexia-friendly .dialogue-highlight { color: var(--text-primary); font-weight: 600; letter-spacing: 0.05em; word-spacing: 0.12em; }

/* Custom Theme */
/* -- Chat Background Image -- */
.chat-bg-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
.has-chat-bg .bubble {
  background: rgba(30, 30, 44, 0.85) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.has-chat-bg .msg.user .bubble {
  background: rgba(45, 60, 90, 0.85) !important;
}
.has-chat-bg .dm-bubble {
  background: rgba(30, 30, 44, 0.85) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.has-chat-bg .msg.dm-mine .bubble {
  background: rgba(45, 74, 117, 0.85) !important;
}

/* -- Custom Theme Inputs (inside theme card) -- */

/* -- Chat Background Option in Action Drawer -- */