/* PAPOmate customer theme. Loaded last; the existing sheets still own layout,
   visibility, safe-area/keyboard measurements and user-provided media. */
:root {
  --pm-canvas: #f5f7fb;
  --pm-surface: #fff;
  --pm-ink: #17233c;
  --pm-muted: #53617a;
  --pm-accent: #445bd4;
  --pm-accent-hover: #354bbd;
  --pm-tint: #eef1ff;
  --pm-line: #e2e8f3;
  --pm-control-line: #7f8da8;
  --pm-ring: #445bd424;
  --pm-shadow: 0 10px 30px #17233c0b;
  --pm-ai-ink: #594180;
  --pm-ai-tint: #f3eefb;
  --pm-ai-line: #e4daf4;
  --pm-success: #21634c;
  --pm-success-tint: #edf8f2;
  --pm-success-line: #cfe8da;
  --pm-warn: #805320;
  --pm-warn-tint: #fff7e9;
  --pm-warn-line: #efdfc3;
  --pm-danger: #a33548;
  --pm-danger-tint: #fff2f4;
  --pm-danger-line: #f3d7df;
  background: var(--pm-canvas);
  color: var(--pm-ink);
  color-scheme: light;
}

body,
#app-shell,
#app-shell .main-content { background: var(--pm-canvas); color: var(--pm-ink); }

/* Sign-in: two quiet surfaces and one clear action. */
#auth-screen,
#auth-screen .auth-side { background: var(--pm-surface); color: var(--pm-ink); }
#auth-screen .auth-story { background: var(--pm-canvas); border-color: var(--pm-line); color: var(--pm-ink); }
#auth-screen .auth-story::before,
#auth-screen .auth-story::after { border-color: #dfe5f5; }
#auth-screen .brand,
#auth-screen .brand-light,
#app-shell .brand { color: var(--pm-ink); }
#auth-screen .brand-mark,
#auth-screen .brand-light .brand-mark,
#app-shell .brand-mark { background: var(--pm-accent); box-shadow: none; }
#auth-screen .eyebrow,
#auth-screen .story-copy h1 em { color: var(--pm-accent-hover); }
#auth-screen .story-copy h1,
#auth-screen .auth-panel h2 { color: var(--pm-ink); letter-spacing: -.035em; }
#auth-screen .story-copy > p:last-child,
#auth-screen .story-footer,
#auth-screen .sample-top small,
#auth-screen .auth-subtitle,
#auth-screen .auth-footnote,
#auth-screen .language-catalog-note,
#auth-screen .register-record-notice { color: var(--pm-muted); }
#auth-screen .sample-card { background: var(--pm-surface); border-color: var(--pm-line); box-shadow: var(--pm-shadow); color: var(--pm-ink); transform: none; }
#auth-screen .sample-avatar,
#auth-screen .sample-bubble-out { background: var(--pm-tint); color: var(--pm-accent-hover); }
#auth-screen .sample-bubble-in { background: var(--pm-canvas); color: var(--pm-ink); }
#auth-screen .sample-signal { background: var(--pm-success); }
#auth-screen .auth-switch { background: var(--pm-canvas); }
#auth-screen .auth-switch button { color: var(--pm-muted); }
#auth-screen .auth-switch button.active { background: var(--pm-surface); color: var(--pm-accent-hover); box-shadow: 0 0 0 1px var(--pm-line); }
#auth-screen .auth-form label { color: var(--pm-ink); }
#auth-screen .public-site-link { color: var(--pm-accent-hover); }

/* Navigation, surfaces and compact actions share one accent. */
#app-shell .sidebar { background: var(--pm-surface); border-color: var(--pm-line); box-shadow: none; }
#app-shell .topbar { border-color: var(--pm-line); }
#app-shell .topbar h1 { color: var(--pm-ink); }
#app-shell :is(.sidebar-head p, .sidebar-person small, .sidebar-plan-overline, #sidebar-plan-remaining) { color: var(--pm-muted); }
#app-shell .sidebar-plan-card { background: var(--pm-canvas); border-color: var(--pm-line); color: var(--pm-ink); box-shadow: none; }
#app-shell :is(.sidebar-plan-link, .eyebrow, .ai-example-button, .text-button, .public-site-link, .profile-public-links a) { color: var(--pm-accent-hover); }
#app-shell .nav-item { color: var(--pm-muted); }
#app-shell .nav-item:hover { background: var(--pm-canvas); color: var(--pm-ink); }
#app-shell .nav-item.active { background: var(--pm-tint); color: var(--pm-accent-hover); }
#app-shell .nav-item.active::before,
#app-shell .nav-count,
#app-shell .plan-progress span { background: var(--pm-accent); color: #fff; }
#app-shell :is(.avatar, .avatar-top, .avatar-profile) { background-color: var(--pm-tint); color: var(--pm-accent-hover); }
#app-shell .online-dot { background: var(--pm-success); }

#auth-screen .primary-button,
#app-shell .primary-button,
#app-shell :is(#view-chats, #ai-chat-panel) .send-button,
#app-shell #view-discover .discover-search-form .primary-button,
#app-shell .heart-game-draw,
#person-dialog .learning-profile-chat { background: var(--pm-accent); border-color: var(--pm-accent); color: #fff; box-shadow: none; }
#auth-screen .primary-button:hover:not(:disabled),
#app-shell .primary-button:hover:not(:disabled),
#app-shell :is(#view-chats, #ai-chat-panel) .send-button:hover:not(:disabled),
#app-shell #view-discover .discover-search-form .primary-button:hover:not(:disabled),
#app-shell .heart-game-draw:hover:not(:disabled),
#person-dialog .learning-profile-chat:hover:not(:disabled) { background: var(--pm-accent-hover); border-color: var(--pm-accent-hover); box-shadow: none; transform: none; }

#auth-screen .secondary-button,
#app-shell :is(.secondary-button, .hero-button, .social-button, .media-upload-button, .room-action:not(.danger), .composer-action:not(.recording)),
#app-shell #ai-chat-panel .composer-action:not(.recording),
#app-shell #view-chats .chat-options-actions .room-action:not(.danger),
#app-shell #view-discover .community-person-actions .community-message-button { background: var(--pm-tint); color: var(--pm-accent-hover); border-color: var(--pm-line); box-shadow: none; }
#app-shell :is(.secondary-button, .hero-button, .media-upload-button):hover:not(:disabled),
#app-shell #view-discover .community-person-actions .community-message-button:hover:not(:disabled) { background: #e3e9ff; color: var(--pm-accent-hover); transform: none; }
#app-shell :is(.room-action.danger, .composer-action.recording, .delete-button),
#app-shell #ai-chat-panel .composer-action.recording,
#app-shell #view-chats .chat-options-actions .danger,
#auth-screen .form-error { background: var(--pm-danger-tint); color: var(--pm-danger); border-color: var(--pm-danger-line); }

/* Keep the state treatments distinct from branding. */
#app-shell :is(.health-badge:not(.health-off):not(.health-checking), .match-status.is-matched) { background: var(--pm-success-tint); color: var(--pm-success); border-color: var(--pm-success-line); }
#app-shell :is(.health-badge.health-off, .ai-banner-status.off) { background: var(--pm-warn-tint); color: var(--pm-warn); border-color: var(--pm-warn-line); }
#app-shell :is(.health-badge.health-checking, .plan-top-chip, .plan-tag) { background: var(--pm-surface); color: var(--pm-muted); border-color: var(--pm-line); }
#app-shell :is(.plan-top-chip.member, .plan-card.member .plan-tag) { background: var(--pm-tint); color: var(--pm-accent-hover); }
#app-shell :is(.ai-identity-badge, .heading-count.ai-count, .ai-dm-notice),
#app-shell #view-discover :is(.heading-count.ai-count, .community-strip-ai-badge),
#person-dialog .ai-identity-badge { background: var(--pm-ai-tint); color: var(--pm-ai-ink); border-color: var(--pm-ai-line); }
#app-shell :is(.message-ai-label, .ai-message-badge) { color: var(--pm-ai-ink); }
#toast { background: var(--pm-ink); color: #fff; box-shadow: var(--pm-shadow); }
#toast.error { background: var(--pm-danger); }

/* Discovery, profile and companion: white cards, tinted information blocks. */
#app-shell :is(.community-people-list, .community-filter-panel, .community-secondary, .match-panel, .practice-hub, .practice-card, .learning-card, .social-panel, .conversation-layout, .room-header, .chat-list-pane, .composer, .ai-panel, .memory-item, .scene-list-card, .scene-create-card, .scene-workspace, .scene-turn-card, .profile-card, .public-id-card, .post-composer-card, .post-card, .plan-card, .bottle-quota-row, .bottle-action-card, .bottle-list-card, .bottle-detail-card, .heart-game, .heart-game-result) { background: var(--pm-surface); border-color: var(--pm-line); box-shadow: none; }
#app-shell :is(.community-person-row, .community-recommendation-section, .community-modes, .pane-title, .chat-contact, .chat-options-panel, .ai-tabs, .memory-column + .memory-column, .heart-game-panel, .bottle-list-head, .bottle-list-item, .bottle-reply-form) { border-color: var(--pm-line); }
#app-shell :is(.community-person-row, .chat-contact):hover { background: var(--pm-canvas); }
#app-shell :is(.community-heading h2, .community-name, .community-results-heading h2, .community-strip-heading h3, .pane-title h3, .room-person strong, .chat-contact-top strong, .ai-chat-head h3, .plan-balance strong, .post-author, .post-text, .heart-game-character-name) { color: var(--pm-ink); }
#app-shell :is(.community-heading p, .community-strip-heading p, .community-results-heading p, .community-person-location, .person-public-id, .community-person-intro, .community-person-interests, .discover-search-status, .room-person small, .chat-contact-preview, .chat-contact-top time, .chat-contact-public-id, .message-time, .chat-record-notice, .mode-description, .ai-chat-head p, .ai-chat-foot, .memory-intro p, .memory-heading p, .card-head p, .post-author small, .post-upload-note, .language-catalog-note, .heart-game-subtitle, .heart-game-mode, .heart-game-background-note, .heart-game-privacy, .heart-game-result-note) { color: var(--pm-muted); }
#app-shell :is(.community-heading-mark, .community-level, .heading-count:not(.ai-count), .sub-count, .empty-art, .ai-banner-icon, .memory-intro-icon, .scene-list-icon, .bottle-icon-button) { background: var(--pm-tint); color: var(--pm-accent-hover); border-color: var(--pm-line); }
#app-shell :is(.community-modes, .ai-tabs) button { color: var(--pm-muted); }
#app-shell :is(.community-modes, .ai-tabs) button.active { color: var(--pm-accent-hover); }
#app-shell .community-modes button.active::after { background: var(--pm-accent); }
#app-shell .ai-tabs button.active { border-bottom-color: var(--pm-accent); }
#app-shell :is(.ai-banner, .scene-banner, .memory-intro, .moments-intro, .profile-banner, .bottle-entry-card, .bottles-hero),
#app-shell #view-discover .community-secondary .welcome-hero { background: var(--pm-canvas); color: var(--pm-ink); border-color: var(--pm-line); box-shadow: none; }
#app-shell :is(.ai-banner h2, .scene-banner h2, .moments-intro h2, .bottles-hero h2, .bottle-entry-copy > strong, .welcome-hero h2) { color: var(--pm-ink); }
#app-shell :is(.ai-banner .eyebrow, .welcome-hero h2 em, .bottle-entry-arrow, .heart-game-free) { color: var(--pm-accent-hover); }
#app-shell :is(.ai-banner p:last-child, .scene-banner p:last-child, .moments-intro p:last-child, .bottles-hero p:last-child, .bottle-entry-copy > span, .welcome-hero .hero-content > p) { color: var(--pm-muted); }
#app-shell .mode-switch,
#app-shell .bottle-box-tabs { background: var(--pm-canvas); border-color: var(--pm-line); }
#app-shell :is(.mode-switch, .bottle-box-tabs) button { color: var(--pm-muted); }
#app-shell :is(.mode-switch, .bottle-box-tabs) button.active { background: var(--pm-surface); color: var(--pm-accent-hover); box-shadow: 0 0 0 1px var(--pm-line); }
#app-shell :is(.hero-circle-a, .hero-circle-b) { background: var(--pm-tint); box-shadow: none; }
#app-shell :is(.hero-circle span, .hero-star, .hero-spark) { color: var(--pm-accent-hover); }

/* Message threads: keep the hierarchy legible without changing bubble geometry. */
#app-shell #view-chats {
  --chat-ink: var(--pm-ink);
  --chat-muted: var(--pm-muted);
  --chat-line: var(--pm-line);
  --chat-blue: var(--pm-accent);
  --chat-canvas: var(--pm-canvas);
}
#app-shell :is(#view-chats, #ai-chat-panel) :is(.message-thread, .chat-room) { background: var(--pm-canvas); border-color: var(--pm-line); }
#app-shell #view-chats .chat-contact.active { background: var(--pm-tint); box-shadow: inset 3px 0 var(--pm-accent); }
#app-shell :is(#view-chats, #ai-chat-panel) .message-bubble { background: var(--pm-surface); color: var(--pm-ink); border-color: var(--pm-line); box-shadow: inset 0 0 0 1px var(--pm-line); }
#app-shell #view-chats .message-row.own .message-bubble { background: var(--pm-accent); color: #fff; box-shadow: none; }
#app-shell #ai-chat-panel .message-row.own .message-bubble { background: var(--pm-tint); color: var(--pm-ink); border-color: #dbe1ff; box-shadow: none; }
#app-shell :is(#view-chats, #ai-chat-panel) .bilingual-native,
#app-shell #view-chats .message-original { color: var(--pm-muted); border-color: var(--pm-line); }
#app-shell #view-chats .message-original > small { color: var(--pm-muted); }
#app-shell #view-chats :is(.message-translate-button, .translation-label, .message-correction-label) { color: var(--pm-accent-hover); }
#app-shell #view-chats :is(.message-correction-card, .chat-compose-tools > button) { background: var(--pm-surface); color: var(--pm-ink); border-color: var(--pm-line); box-shadow: none; }
#app-shell #view-chats :is(.chat-quote-preview, .message-quote, .message-row.own .message-quote) { background: var(--pm-tint); border-inline-start-color: var(--pm-accent); color: var(--pm-muted); }
#app-shell #view-chats :is(.message-time, .message-translation-status, .message-correction-explanation, .message-action-bar > button) { color: var(--pm-muted); }
#app-shell #view-chats .translation-error { color: var(--pm-danger); }
#app-shell #view-chats .chat-input-capsule { background: var(--pm-surface); border-color: var(--pm-control-line); }
#app-shell #view-chats .chat-input-capsule:focus-within { border-color: var(--pm-accent); box-shadow: 0 0 0 3px var(--pm-ring); }
#app-shell #view-chats .composer input { color: var(--pm-ink); }

/* Form and keyboard feedback are visible on both the light canvas and cards. */
#auth-screen .auth-form :is(input, select),
#app-shell :is(.discover-search-form, .community-filter-panel, .match-controls, .ai-composer, .profile-form, .memory-form, .example-form, .scene-form, .scene-composer, .practice-card, .learning-card, .post-composer-card, .bottle-action-card, .bottle-reply-form, .heart-game) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  background-color: var(--pm-surface);
  border-color: var(--pm-control-line);
  color: var(--pm-ink);
}
#auth-screen .auth-form input::placeholder,
#app-shell :is(input, textarea)::placeholder,
#app-shell #view-chats .composer input::placeholder,
#app-shell #ai-chat-panel .ai-composer input::placeholder { color: var(--pm-muted); opacity: 1; }
:is(#auth-screen, #app-shell, #person-dialog, #message-learning-dialog, #call-panel) :is(button, a, summary, input, textarea, select):not(#chat-input):focus-visible {
  outline: 2px solid var(--pm-accent);
  outline-offset: 2px;
}
/* Only focus declarations need important to supersede the legacy green ring. */
:is(#auth-screen, #app-shell, #person-dialog, #message-learning-dialog) :is(input, textarea, select):not(#chat-input):focus {
  border-color: var(--pm-accent) !important;
  box-shadow: 0 0 0 3px var(--pm-ring) !important;
}
#app-shell input[type="checkbox"],
#app-shell input[type="radio"],
#app-shell #view-chats .chat-translation-settings input { accent-color: var(--pm-accent); }

/* Dialog siblings are not inside the app shell. No filters on cover/video. */
:where(#app-shell) ~ #person-dialog.learning-profile,
#message-learning-dialog,
#call-panel.call-panel { background: var(--pm-surface); border-color: var(--pm-line); color: var(--pm-ink); box-shadow: var(--pm-shadow); }
#person-dialog::backdrop,
#message-learning-dialog::backdrop { background: #17233c5c; }
#person-dialog .person-dialog-close,
#message-learning-dialog .person-dialog-close { color: var(--pm-accent-hover); }
#call-panel .call-heading strong { color: var(--pm-ink); }
#call-panel #call-status,
#call-panel .call-network-note { color: var(--pm-muted); }
#call-panel #call-accept { background: var(--pm-success); color: #fff; }
#call-panel :is(#call-end, #call-reject) { background: var(--pm-danger); color: #fff; }

@media (max-width: 760px) {
  #app-shell .nav-item.active { background: transparent; }
  #app-shell .nav-item.active .nav-icon { border-radius: 8px; background: var(--pm-tint); box-shadow: 0 0 0 3px var(--pm-tint); }
}

@media (prefers-reduced-motion: reduce) {
  #auth-screen .primary-button,
  #app-shell :is(.primary-button, .secondary-button, .hero-button, .nav-item, .chat-contact) { transition: none; }
}