.rp-page {
    --rp-accent: var(--rp-ink);
    --rp-chat-bg: var(--rp-paper);
    --rp-incoming: var(--rp-soft);
    --rp-outgoing: color-mix(in srgb, var(--rp-ink) 9%, var(--rp-paper));
    --rp-outgoing-ink: var(--rp-ink);
    --rp-ink: #111;
    --rp-muted: #777;
    --rp-paper: #fff;
    --rp-soft: #f4f4f3;
    --rp-line: #e7e7e5;
    display: flex;
    flex-direction: column;
    background: var(--rp-paper);
    color: var(--rp-ink);
    font-family: var(--global-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif);
}
.rp-memory-settings { margin:20px 0; padding:18px; border:1px solid var(--rp-line); border-radius:20px; background:var(--rp-soft); }
.rp-memory-settings h2 { margin-bottom:14px; font-size:16px; font-weight:600; }
.rp-memory-option { display:flex; align-items:center; gap:9px; margin:12px 0; font-size:14px; }
.rp-memory-option input { width:17px; height:17px; accent-color:var(--rp-ink); }
.rp-memory-settings > small, .rp-memory-progress small { display:block; color:var(--rp-muted); font-size:11px; line-height:1.6; }
.rp-memory-progress { margin-top:16px; padding-top:12px; border-top:1px solid var(--rp-line); display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.rp-memory-progress > span { flex:1; font-size:12px; }
.rp-memory-progress small { flex-basis:100%; }
.rp-page [hidden] { display: none !important; }
[data-theme="dark"] .rp-page {
    --rp-ink: #f4f4f2;
    --rp-muted: #999;
    --rp-paper: #1e1f20;
    --rp-soft: #292a2b;
    --rp-line: #373839;
}
.rp-header {
    flex: 0 0 auto;
    min-height: calc(70px + env(safe-area-inset-top, 0px));
    display: flex;
    align-items: center;
    gap: 8px;
    padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
    border-bottom: 1px solid var(--rp-line);
    background: color-mix(in srgb, var(--rp-paper) 94%, transparent);
    z-index: 3;
}
.rp-header-copy { flex: 1; min-width: 0; }
.rp-header h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 23px; font-weight: 700; letter-spacing: -.03em; }
.rp-header-copy small { display: block; min-height: 14px; margin-top: 1px; color: var(--rp-muted); font-size: 10px; }
.rp-header-back, .rp-exit, .rp-header-action {
    flex: 0 0 auto;
    min-width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid var(--rp-line);
    border-radius: 14px;
    color: var(--rp-ink);
    background: var(--rp-paper);
}
.rp-header-back svg, .rp-exit svg { width: 21px; height: 21px; }
.rp-history-bar { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.rp-context-note { padding:8px 12px 4px; color:var(--rp-muted); font-size:11px; text-align:center; }
.rp-history-bar:empty { display:none; }
.rp-history-bar > .rp-action { min-height:30px; padding:6px 12px; margin:4px auto 0; font-size:11px; color:var(--rp-muted); background:transparent; border:0; border-radius:6px; }
.rp-chat-layout > [data-rp="history-latest"] { position:absolute; z-index:4; bottom:calc(var(--rp-composer-height,96px) + 12px); left:50%; transform:translateX(-50%); padding:9px 15px; border:1px solid var(--rp-line); border-radius:10px; background:var(--rp-paper); color:var(--rp-ink); font-size:11px; }
.rp-header-action { width: auto; padding: 0 13px; font-size: 12px; }
.rp-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px max(18px, env(safe-area-inset-right, 0px)) calc(100px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
    background: var(--rp-paper);
}
.rp-bottom-nav {
    position: absolute;
    z-index: 5;
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    height: 72px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--rp-line);
    border-radius: 24px;
    background: color-mix(in srgb, var(--rp-paper) 94%, transparent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}
.rp-bottom-nav[hidden] { display: none; }
.rp-bottom-nav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--rp-muted); font-size: 10px; }
.rp-bottom-nav svg { width: 23px; height: 23px; }
.rp-bottom-nav button[aria-current="page"] { color: var(--rp-ink); font-weight: 700; }
.rp-bottom-nav button[aria-current="page"]::before { content: ''; position: absolute; top: 7px; width: 34px; height: 28px; border-radius: 12px; background: var(--rp-soft); z-index: -1; }
#rp-nav-unread { position: absolute; top: 8px; left: calc(50% + 7px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--rp-ink); color: var(--rp-paper); font-size: 9px; line-height: 16px; }
.rp-search-shell { height: 46px; display: flex; align-items: center; gap: 9px; padding: 0 14px; margin-bottom: 21px; border-radius: 16px; background: var(--rp-soft); }
.rp-search-shell svg { width: 19px; color: var(--rp-muted); }
.rp-search { min-width: 0; flex: 1; color: var(--rp-ink); background: transparent; font-size: 15px; }
.rp-search::placeholder { color: var(--rp-muted); }
.rp-section-label { margin: 0 4px 7px; color: var(--rp-muted); font-size: 11px; letter-spacing: .08em; }
.rp-row, .rp-contact-row { width: 100%; min-height: 72px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--rp-line); color: var(--rp-ink); text-align: left; }
.rp-row { padding: 11px 2px; }
.rp-contact-row { padding: 10px 2px; }
.rp-contact-main { min-width: 0; flex: 1; display: flex; align-items: center; color: inherit; text-align: left; }
.rp-contact-main > span:last-child { color: var(--rp-muted); }
.rp-contact-edit { width: 38px; height: 38px; color: var(--rp-muted); letter-spacing: 1px; }
.rp-avatar { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--rp-ink); background: var(--rp-soft); border: 1px solid var(--rp-line); font-size: 19px; font-weight: 650; }
.rp-row-copy { min-width: 0; flex: 1; }
.rp-row-copy strong { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 650; }
.rp-row-copy strong i { padding: 2px 5px; border-radius: 5px; background: var(--rp-ink); color: var(--rp-paper); font-size: 8px; font-style: normal; }
.rp-row-copy small { display: block; overflow: hidden; margin-top: 5px; color: var(--rp-muted); text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.rp-row-meta { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 6px; color: var(--rp-muted); font-size: 10px; }
.rp-conversation-swipe { position:relative; overflow:hidden; border-bottom:1px solid var(--rp-line); border-radius:12px; }
.rp-conversation-swipe .rp-conversation-row { position:relative; z-index:1; margin:0; padding-inline:2px; border:0; background:var(--rp-paper); transform:translateX(var(--rp-swipe-x,0px)); transition:transform .18s ease; touch-action:pan-y; }
.rp-conversation-swipe.is-swiping .rp-conversation-row { transition:none; user-select:none; }
.rp-conversation-actions { position:absolute; inset:0 0 0 auto; display:flex; width:min(160px,48%); visibility:hidden; }
.rp-conversation-swipe.is-open .rp-conversation-actions, .rp-conversation-swipe.is-swiping .rp-conversation-actions { visibility:visible; }
.rp-conversation-actions button { display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:10px 4px; background:#8e8e93; color:#fff; font:inherit; font-size:12px; cursor:pointer; }
.rp-conversation-actions svg { width:21px; height:21px; }
.rp-conversation-actions .rp-context-clear { background:#ff3b30; }
.rp-conversation-actions button:focus-visible { outline:2px solid #fff; outline-offset:-5px; }
@media (prefers-reduced-motion:reduce) { .rp-conversation-swipe .rp-conversation-row { transition:none; } }
.rp-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 10px; background: var(--rp-ink); color: var(--rp-paper); text-align: center; line-height: 18px; }
.rp-empty { padding: 64px 18px; text-align: center; }
.rp-empty h2 { margin-bottom: 10px; font-size: 22px; }
.rp-empty p { margin: 0 auto 20px; max-width: 320px; color: var(--rp-muted); font-size: 13px; line-height: 1.7; }
.rp-action { min-height: 42px; padding: 9px 14px; border: 1px solid var(--rp-line); border-radius: 13px; color: var(--rp-ink); background: var(--rp-paper); font-size: 13px; }
.rp-primary { border-color: var(--rp-ink) !important; background: var(--rp-ink) !important; color: var(--rp-paper) !important; }
.rp-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 17px 0; }
.rp-note { margin-bottom: 16px; color: var(--rp-muted); font-size: 12px; line-height: 1.7; }
.rp-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; color: var(--rp-muted); font-size: 12px; }
.rp-field input, .rp-field textarea, .rp-field select { width: 100%; padding: 13px; border: 1px solid var(--rp-line); border-radius: 13px; color: var(--rp-ink); background: var(--rp-soft); font: inherit; font-size: 16px; }
.rp-field textarea { min-height: 116px; resize: vertical; }
.rp-tabs { display: flex; gap: 5px; padding: 4px; margin-bottom: 18px; border-radius: 15px; background: var(--rp-soft); }
.rp-tabs button { flex: 1; padding: 10px 5px; border-radius: 11px; color: var(--rp-muted); font-size: 12px; }
.rp-tabs button[aria-selected="true"] { background: var(--rp-paper); color: var(--rp-ink); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.rp-memory { padding: 16px; margin-bottom: 12px; border: 1px solid var(--rp-line); border-radius: 17px; background: var(--rp-soft); }
.rp-memory p { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.7; }
.rp-memory small { display: block; margin-bottom: 8px; color: var(--rp-muted); font-size: 10px; }
.rp-check { display: flex; align-items: center; gap: 12px; min-height: 62px; border-bottom: 1px solid var(--rp-line); }
.rp-prompt { padding: 15px; border: 1px solid var(--rp-line); border-radius: 13px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--rp-soft); font: 12px/1.7 var(--font-mono); }
.rp-moments-cover { height: 150px; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; margin: -18px -18px 20px; background: #111; color: #fff; }
.rp-moments-cover span { opacity: .62; font-size: 11px; }
.rp-moments-cover strong { margin-top: 3px; font-size: 28px; letter-spacing: -.04em; }
.rp-moment { display: flex; gap: 12px; padding: 18px 2px; border-bottom: 1px solid var(--rp-line); }
.rp-moment > div { min-width: 0; flex: 1; }
.rp-moment strong { font-size: 14px; }
.rp-moment p { margin: 7px 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; }
.rp-moment small { color: var(--rp-muted); font-size: 10px; }
.rp-profile-card { display: flex; align-items: center; gap: 16px; padding: 20px 4px 24px; }
.rp-profile-avatar { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: var(--rp-ink); color: var(--rp-paper); font-size: 25px; font-weight: 700; }
.rp-profile-card h2 { font-size: 22px; }
.rp-profile-card p { margin-top: 4px; color: var(--rp-muted); font-size: 12px; }
.rp-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 24px; border: 1px solid var(--rp-line); border-radius: 18px; overflow: hidden; }
.rp-profile-stats div { padding: 15px 5px; text-align: center; }
.rp-profile-stats div + div { border-left: 1px solid var(--rp-line); }
.rp-profile-stats strong, .rp-profile-stats span { display: block; }
.rp-profile-stats strong { font-size: 20px; }
.rp-profile-stats span { margin-top: 3px; color: var(--rp-muted); font-size: 10px; }
.rp-profile-menu { overflow: hidden; border: 1px solid var(--rp-line); border-radius: 18px; }
.rp-profile-menu .rp-action { width: 100%; border: 0; border-radius: 0; text-align: left; background: var(--rp-paper); }
.rp-profile-menu .rp-action + .rp-action { border-top: 1px solid var(--rp-line); }
.rp-profile-footnote { margin: 15px 4px; color: var(--rp-muted); font-size: 11px; line-height: 1.6; }
.rp-content.rp-chat-layout { position:relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--rp-soft); }
.rp-chat-messages { flex: 1; min-height: 0; overflow-y: auto; overflow-anchor:none; padding: 18px max(14px, env(safe-area-inset-right, 0px)) 16px max(14px, env(safe-area-inset-left, 0px)); }
.rp-chat-empty { padding: 70px 20px; color: var(--rp-muted); text-align: center; }
.rp-chat-empty span { color: var(--rp-ink); font-weight: 650; }
.rp-chat-empty p { margin-top: 5px; font-size: 11px; }
.rp-message { display: flex; align-items: flex-start; gap: 8px; margin: 15px 0; }
.rp-message.mine { justify-content: flex-end; }
.rp-message .rp-avatar { flex-basis: 34px; width: 34px; height: 34px; margin-top: 21px; font-size: 13px; }
.rp-message-body { max-width: min(78%, 540px); }
.rp-message small { display: block; min-height: 16px; margin: 0 5px 4px; color: var(--rp-muted); font-size: 9px; }
.rp-message.mine small { text-align: right; }
.rp-message .bubble { padding: 11px 14px; border: 1px solid var(--rp-line); border-radius: 4px 17px 17px 17px; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--rp-paper); font-size: 14px; line-height: 1.65; }
.rp-message.mine .bubble { border-color: var(--rp-ink); border-radius: 17px 4px 17px 17px; background: var(--rp-ink); color: var(--rp-paper); }
.rp-composer { flex: 0 0 auto; padding: 9px max(12px, env(safe-area-inset-right, 0px)) calc(9px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--rp-line); background: var(--rp-paper); }
.rp-status { min-height: 0; color: var(--rp-muted); text-align: center; font-size: 10px; }
.rp-status:not(:empty) { min-height: 20px; padding-bottom: 5px; }
.rp-compose-row { display: flex; align-items: flex-end; gap: 8px; }
.rp-compose-more { flex: 0 0 38px; width: 38px; height: 38px; border: 1px solid var(--rp-line); border-radius: 13px; color: var(--rp-ink); font-size: 22px; }
.rp-compose-row textarea { flex: 1; min-width: 0; min-height: 42px; max-height: 120px; padding: 10px 12px; border: 1px solid var(--rp-line); border-radius: 15px; color: var(--rp-ink); background: var(--rp-soft); font-family: inherit; font-size: 16px; line-height: 1.45; resize: none; }
.rp-send-button { flex: 0 0 auto; height: 42px; min-width: 58px; padding: 0 14px; border-radius: 14px; background: var(--rp-accent); color: var(--rp-paper); font-size: 13px; font-weight: 700; }
.rp-send-button.is-stop { background: var(--rp-muted); }
.rp-compose-hint { display: block; margin: 5px 5px 0 47px; color: var(--rp-muted); font-size: 9px; }
body.chat-keyboard-open .rp-composer { padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); }
.rp-page button:disabled { opacity: .4; cursor: default; }
.rp-page :focus-visible { outline: 2px solid var(--rp-ink); outline-offset: 3px; }
#page-roleplay #rp-input:focus, #page-roleplay #rp-input:focus-visible { outline:none!important; box-shadow:none!important; border:0!important; }
#page-roleplay .rp-composer:focus-within { box-shadow:inset 0 0 0 1px var(--rp-ink); }
@media (min-width: 700px) {
    .rp-content:not(.rp-chat-layout), .rp-chat-messages, .rp-composer { padding-inline: max(24px, calc((100% - 720px) / 2)); }
    .rp-bottom-nav { left: 50%; right: auto; width: min(520px, calc(100% - 24px)); transform: translateX(-50%); }
}
@media (max-height: 560px) {
    .rp-header { min-height: calc(58px + env(safe-area-inset-top, 0px)); padding-top: calc(7px + env(safe-area-inset-top, 0px)); padding-bottom: 7px; }
    .rp-bottom-nav { height: 60px; }
    .rp-content { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
}

/* Reference-inspired monochrome messenger: white panels, soft grey bubbles. */
.rp-page { --rp-soft: #f5f5f6; --rp-line: #ededee; background: #f7f7f8; }
.rp-header { margin: 12px 14px 0; border: 0; border-radius: 24px 24px 0 0; padding-inline: 20px; background: var(--rp-paper); }
.rp-header-copy small:empty { display: none; }
.rp-header h1 { font-size: 22px; letter-spacing: -.025em; }
.rp-exit { min-width:44px; height:44px; border:0; background:transparent; border-radius:6px; }
.rp-exit:active { background:var(--rp-soft); }
.rp-header-action { border: 0; background: var(--rp-ink); color: var(--rp-paper); border-radius: 12px; }
.rp-content { margin: 0 14px; padding-inline: 20px; border-radius: 0 0 24px 24px; }
.rp-search-shell { border: 1px solid var(--rp-line); background: var(--rp-soft); border-radius: 14px; }
.rp-row, .rp-contact-row { min-height: 86px; border-bottom: 0; padding: 12px 5px; }
.rp-avatar { background: var(--rp-soft); border: 0; border-radius: 19px; width: 52px; height: 52px; flex-basis: 52px; }
.rp-row-copy strong { font-size: 16px; }
.rp-bottom-nav { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: 70px; left: 24px; right: 24px; border: 0; border-radius: 22px; box-shadow: 0 8px 28px #00000009; }
.rp-bottom-nav button[aria-current="page"]::before { top: 5px; width: 42px; height: 32px; background: var(--rp-ink); }
.rp-bottom-nav button[aria-current="page"] svg { color: var(--rp-paper); }
.rp-profile-menu { border: 0; }
.rp-profile-menu .rp-action { min-height: 62px; margin-bottom: 9px; border: 0 !important; border-radius: 15px; background: var(--rp-soft); font-size: 15px; padding: 18px; }
.rp-profile-menu .rp-action:first-child { background: var(--rp-ink); color: var(--rp-paper); }
.rp-social-heading { padding: 21px 2px 26px; }
.rp-social-heading > span { color: var(--rp-muted); font-size: 9px; letter-spacing: .18em; }
.rp-social-heading h2 { margin: 10px 0 6px; font-size: 25px; font-weight: 650; }
.rp-social-heading > p { color: var(--rp-muted); font-size: 12px; }
.rp-moment-menu { display: flex; justify-content: flex-end; gap: 8px; padding: 5px 0; }
.rp-moment-menu .rp-action { min-width: 82px; background: var(--rp-soft); }
.rp-moment { margin-bottom: 16px; padding: 19px 15px; border: 0; background: var(--rp-soft); border-radius: 20px; }
.rp-moment .rp-avatar { width: 38px; height: 38px; flex-basis: 38px; background: var(--rp-paper); border-radius: 50%; }
.rp-moment-time { display: block; margin-top: 3px; }
.rp-moment p { margin-top: 15px; }
.rp-moment-comments { margin-top: 15px; padding: 8px 12px; background: var(--rp-paper); border-radius: 12px; }
.rp-moment-comments p { margin: 7px 0; font-size: 12px; }
.rp-moment-comments strong { font-size: 12px; margin-right: 8px; }
.rp-chat-open .rp-header { margin-bottom: 12px; border-radius: 24px; }
.rp-content.rp-chat-layout { background: var(--rp-chat-bg); margin-bottom: 12px; }
.rp-chat-messages { padding: 12px 16px 20px; }
.rp-message { margin: 22px 0; }
.rp-message .rp-avatar { width: 30px; height: 30px; flex-basis: 30px; border-radius: 50%; }
.rp-message small { font-size: 10px; margin-bottom: 8px; }
.rp-message-body { max-width: 82%; }
.rp-message .bubble { border: 0; border-radius: 3px 16px 16px 16px; background: var(--rp-incoming); padding: 14px 16px; line-height: 1.8; }
.rp-message.mine .bubble { color: var(--rp-outgoing-ink); background: var(--rp-outgoing); border: 0; border-radius: 16px 3px 16px 16px; }
.rp-message { touch-action:pan-y; -webkit-touch-callout:none; }
.rp-message:focus-visible { outline:1px dashed var(--rp-muted); outline-offset:5px; border-radius:12px; }
.rp-message.is-recalled { justify-content:center; color:var(--rp-muted); font-size:11px; line-height:1.6; }
.rp-message-menu { position:fixed; z-index:30; display:flex; gap:2px; padding:5px; border:1px solid var(--rp-line); border-radius:14px; background:var(--rp-paper); color:var(--rp-ink); box-shadow:0 8px 28px rgba(0,0,0,.12); }
.rp-message-menu button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:8px 14px; border:0; border-radius:10px; background:transparent; color:inherit; font:inherit; font-size:13px; cursor:pointer; }
.rp-message-menu button:hover, .rp-message-menu button:focus-visible { background:var(--rp-soft); }
.rp-message-menu svg { width:17px; height:17px; flex-shrink:0; }
.rp-roll-controls { display:flex; align-items:center; gap:2px; margin-top:5px; color:var(--rp-muted); font-size:12px; }
.rp-roll-controls .rp-action, .rp-roll-generate { display:inline-flex; align-items:center; justify-content:center; min-width:38px; min-height:40px; padding:6px 10px; border:0; border-radius:10px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.rp-roll-controls .rp-action { font-size:23px; }
.rp-roll-controls span { min-width:36px; text-align:center; font-variant-numeric:tabular-nums; }
.rp-roll-generate { gap:5px; margin-left:6px; }
.rp-roll-generate svg { width:15px; height:15px; }
.rp-roll-controls button:hover:not(:disabled), .rp-roll-controls button:focus-visible { background:var(--rp-soft); }
.rp-roll-controls button:disabled { opacity:.3; cursor:default; }
@media (hover:hover) and (pointer:fine) {
    .rp-roll-controls { visibility:hidden; pointer-events:none; }
    .rp-message:hover .rp-roll-controls, .rp-message:focus-within .rp-roll-controls { visibility:visible; pointer-events:auto; }
}
.rp-composer { margin: 0 10px 10px; border: 0; border-radius: 19px; background: var(--rp-soft); padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
.rp-compose-row textarea { border: 0; border-radius: 0; background: transparent; font-family: inherit; font-size: 16px; line-height: 1.45; }
.rp-compose-more { border: 0; font-size: 23px; }
.rp-send-button { height: 44px; border-radius: 13px; }
.rp-compose-hint { margin-left: 5px; font-size: 9px; }
[data-theme="dark"] .rp-page { background: #171819; --rp-soft: #292a2b; --rp-line: #343536; }
@media (min-width: 700px) {
    .rp-header, .rp-content { width: min(760px, calc(100% - 32px)); margin-inline: auto; }
    .rp-content:not(.rp-chat-layout), .rp-chat-messages, .rp-composer { padding-inline: 24px; }
    .rp-bottom-nav { left: 50%; right: auto; }
}

/* Personal character portraits share the same frame throughout the role area. */
.rp-avatar { overflow: hidden; }
.rp-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.rp-avatar-editor { display: flex; align-items: center; gap: 18px; padding: 8px 0 24px; }
.rp-avatar-picker { position: relative; flex: 0 0 auto; padding: 0; border-radius: 50%; color: var(--rp-ink); }
.rp-avatar-picker .rp-avatar { width: 80px; height: 80px; font-size: 28px; }
.rp-avatar-badge { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid var(--rp-paper); border-radius: 50%; background: var(--rp-ink); color: var(--rp-paper); font-size: 18px; }
.rp-avatar-editor .rp-action { min-height: 36px; padding: 6px 12px; }
.rp-avatar-editor .rp-avatar-remove { color: var(--rp-muted); }
.rp-avatar-editor [hidden] { display: none; }
.rp-avatar-status { max-width: 210px; margin-top: 6px; color: var(--rp-muted); font-size: 12px; line-height: 1.5; }

/* Compact social actions, with likes and conversations grouped below each post. */
.rp-moment-body { flex: 1; min-width: 0; }
.rp-moment-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rp-moment-more { position: relative; }
.rp-moment-more summary { display: grid; place-items: center; width: 36px; height: 30px; color: var(--rp-muted); list-style: none; cursor: pointer; }
.rp-moment-more summary::-webkit-details-marker { display: none; }
.rp-moment-more > div { position: absolute; right: 0; top: 30px; z-index: 3; display: flex; padding: 5px; border: 1px solid var(--rp-line); border-radius: 12px; background: var(--rp-paper); box-shadow: 0 5px 18px #0000000a; white-space: nowrap; }
.rp-moment-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.rp-moment-actions { display: flex; gap: 18px; margin: 12px 0 8px; }
.rp-moment-actions button { display: flex; align-items: center; gap: 5px; min-height: 32px; color: var(--rp-muted); font-size: 12px; }
.rp-moment-actions svg, .rp-moment-likes svg { flex: 0 0 15px; width: 15px; height: 15px; }
.rp-moment-like[aria-pressed="true"] { color: #b7656d; }
.rp-moment-like[aria-pressed="true"] svg { fill: currentColor; }
.rp-moment-likes { display: flex; align-items: center; gap: 7px; padding: 9px 10px; background: var(--rp-soft); border-radius: 8px; color: var(--rp-ink); font-size: 12px; overflow-wrap: anywhere; }
.rp-moment-likes + .rp-moment-comments { margin-top: 2px; }
.rp-moment-comments p { overflow-wrap: anywhere; white-space: pre-wrap; }
.rp-moment-comments .rp-action { padding: 2px 5px; margin-left: 6px; min-height: 28px; font-size: 10px; color: var(--rp-muted); border: 0; }
.rp-moment-comment-form { display: flex; align-items: flex-end; gap: 8px; margin-top: 10px; padding: 8px 10px; border: 1px solid var(--rp-line); border-radius: 10px; }
.rp-moment-comment-form[hidden] { display: none; }
.rp-moment-comment-form textarea { flex: 1; min-width: 0; max-height: 120px; padding: 4px; resize: vertical; color: var(--rp-ink); font: inherit; font-size: 13px; }
.rp-moment-comment-form button { flex-shrink: 0; min-height: 32px; color: var(--rp-ink); font-size: 12px; }

/* Imported character cards retain the phone shell while allowing narrative turns. */
.rp-card-import-intro { padding:24px 18px; border-radius:20px; background:var(--rp-soft); text-align:center; }
.rp-card-import-intro h2 { margin:0 0 10px; font-size:22px; }
.rp-card-import-intro p, .rp-card-import-intro small { display:block; color:var(--rp-muted); line-height:1.65; font-size:12px; }
.rp-card-import-intro .rp-action { min-height:44px; margin:12px auto; }
.rp-card-preview { display:flex; align-items:center; gap:16px; padding:20px 0; }
.rp-card-preview .rp-avatar { width:64px; height:64px; border-radius:18px; flex-shrink:0; }
.rp-card-preview > div { min-width:0; }
.rp-card-preview h2 { margin:0 0 6px; font-size:22px; overflow-wrap:anywhere; }
.rp-card-preview p, .rp-card-preview small { margin:4px 0; color:var(--rp-muted); font-size:12px; line-height:1.6; }
.rp-card-reading { padding:16px; margin:14px 0; border-radius:14px; background:var(--rp-soft); }
.rp-card-reading summary { cursor:pointer; font-size:14px; color:var(--rp-ink); }
.rp-card-reading p, .rp-card-reading pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:260px; overflow:auto; font:inherit; font-size:13px; line-height:1.8; color:var(--rp-muted); }
.rp-card-reading .rp-field { margin-top:16px; }
.rp-card-import-error { margin:16px 0; color:#d94040; line-height:1.6; font-size:13px; }
.rp-opening-controls { display:flex; flex:0 0 auto; align-items:center; justify-content:center; gap:16px; padding:4px 12px; color:var(--rp-muted); font-size:12px; }
.rp-opening-controls .rp-action { width:44px; min-height:36px; margin:0; padding:4px; background:transparent; font-size:24px; }
.rp-story-chat .rp-message.is-story { max-width:100%; }
.rp-story-chat .rp-message.is-story .rp-message-body { min-width:0; flex:1; }
.rp-story-chat .rp-message.is-story .bubble { line-height:1.9; }
[data-rp="import-card"] { margin-block:12px; }

/* Editable personal identity, independent of the default chat skin. */
.rp-profile-card { width:100%; min-width:0; text-align:left; color:inherit; background:transparent; border:0; cursor:pointer; }
.rp-profile-card > div { min-width:0; }
.rp-profile-card h2 { overflow-wrap:anywhere; }
.rp-profile-avatar { flex-shrink:0; overflow:hidden; }
.rp-profile-avatar img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.rp-profile-chevron { width:18px; height:18px; margin-left:auto; flex-shrink:0; color:var(--rp-muted); }

/* Moments: full-width cover, square portraits and a quiet social feed. */
.rp-page { --rp-social-link:#576b95; --rp-social-panel:#f7f7f7; }
[data-theme="dark"] .rp-page { --rp-social-link:#9aaecf; --rp-social-panel:#28292b; }
#page-roleplay[data-rp-view="moments"] { background:var(--rp-paper); }
#page-roleplay[data-rp-view="moments"] .rp-header { position:absolute; inset:0 0 auto; width:auto; margin:0; min-height:calc(56px + env(safe-area-inset-top,0px)); padding:calc(6px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 6px max(12px,env(safe-area-inset-left,0px)); border:0; border-radius:0; background:linear-gradient(#0004,transparent); color:#fff; z-index:6; transition:background .16s,color .16s; }
#page-roleplay[data-rp-view="moments"] .rp-header h1 { font-size:17px; font-weight:600; text-align:center; letter-spacing:0; opacity:0; transition:opacity .16s; }
#page-roleplay[data-rp-view="moments"] .rp-header-back, #page-roleplay[data-rp-view="moments"] .rp-header-action { width:42px; min-width:42px; height:42px; border:0; padding:9px; border-radius:6px; color:inherit; background:transparent; }
#page-roleplay[data-rp-view="moments"] .rp-header-action svg { width:24px; height:24px; }
#page-roleplay[data-rp-view="moments"] .rp-exit { display:none; }
#page-roleplay.rp-moments-scrolled .rp-header { background:var(--rp-paper); color:var(--rp-ink); box-shadow:0 1px 0 var(--rp-line); }
#page-roleplay.rp-moments-scrolled .rp-header h1 { opacity:1; }
#page-roleplay[data-rp-view="moments"] .rp-content { position:relative; width:100%; margin:0; padding:0 0 calc(100px + env(safe-area-inset-bottom,0px)); border-radius:0; background:var(--rp-paper); }
.rp-moments-hero { position:relative; margin-bottom:54px; }
.rp-moments-cover { position:relative; display:block; width:100%; height:clamp(250px,36vh,330px); margin:0; padding:0; overflow:hidden; border:0; background:#7e9299; cursor:pointer; }
.rp-moments-cover::after { content:''; position:absolute; inset:60% 0 0; background:linear-gradient(transparent,#0003); pointer-events:none; }
.rp-moments-cover img, .rp-moments-landscape { display:block; width:100%; height:100%; object-fit:cover; }
.rp-moments-identity { position:absolute; right:max(20px,env(safe-area-inset-right,0px)); bottom:-24px; display:flex; align-items:flex-start; justify-content:flex-end; gap:18px; max-width:calc(100% - 40px); pointer-events:none; }
.rp-moments-identity > strong { min-width:0; padding-top:17px; color:#fff; font-size:19px; line-height:1.4; font-weight:600; text-shadow:0 1px 4px #0008; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-moments-user { flex-shrink:0; padding:0; border:0; border-radius:7px; pointer-events:auto; background:var(--rp-paper); cursor:pointer; }
.rp-moments-user .rp-avatar { width:70px; height:70px; border-radius:7px; background:var(--rp-soft); font-size:25px; }
.rp-moment-menu { position:absolute; right:12px; top:calc(54px + env(safe-area-inset-top,0px)); z-index:8; display:flex; flex-direction:column; gap:0; min-width:170px; padding:5px 0; border-radius:8px; background:var(--rp-paper); box-shadow:0 4px 26px #0003; color:var(--rp-ink); }
.rp-moment-menu .rp-action { min-height:45px; padding:12px 18px; text-align:left; border:0; border-radius:0; font-size:14px; background:transparent; color:inherit; }
.rp-moment-menu .rp-action + .rp-action { border-top:1px solid var(--rp-line); }
.rp-moment-feed { max-width:720px; margin:0 auto; }
.rp-moment-feed .rp-moment { gap:10px; margin:0; padding:20px max(18px,env(safe-area-inset-right,0px)) 20px max(18px,env(safe-area-inset-left,0px)); border:0; border-bottom:1px solid var(--rp-line); border-radius:0; background:transparent; }
.rp-moment-feed .rp-moment > .rp-avatar { width:40px; height:40px; flex-basis:40px; border-radius:5px; background:var(--rp-soft); font-size:19px; }
.rp-moment-heading { min-height:21px; padding-top:1px; }
.rp-moment-heading > strong { color:var(--rp-social-link); font-size:16px; line-height:1.4; font-weight:600; }
.rp-moment .rp-moment-text { margin:6px 0 11px; color:var(--rp-ink); font-size:15px; line-height:1.6; }
.rp-moment-footer { display:flex; align-items:center; gap:10px; min-height:26px; margin:0 0 9px; }
.rp-moment-footer .rp-moment-time { margin:0; color:var(--rp-muted); font-size:11px; line-height:1.5; }
.rp-moment-more { flex-shrink:0; }
.rp-moment-more summary { width:auto; height:30px; font-size:11px; color:var(--rp-social-link); letter-spacing:0; }
.rp-moment-more > div { top:30px; left:0; right:auto; z-index:5; border-radius:5px; }
.rp-moment-interact { position:relative; flex-shrink:0; margin-left:auto; }
.rp-moment-interact > summary { display:grid; place-items:center; width:34px; height:26px; border-radius:4px; list-style:none; background:var(--rp-social-panel); color:var(--rp-social-link); cursor:pointer; }
.rp-moment-interact > summary::-webkit-details-marker { display:none; }
.rp-moment-interact > summary svg { width:23px; height:16px; }
.rp-moment-interact .rp-moment-actions { position:absolute; z-index:5; right:calc(100% + 7px); top:50%; transform:translateY(-50%); display:flex; gap:0; min-width:192px; height:40px; padding:0 5px; margin:0; border-radius:5px; background:#4c4c4c; color:#fff; box-shadow:0 2px 5px #0001; }
.rp-moment-actions button { flex:1; justify-content:center; gap:7px; min-width:84px; height:40px; padding:0 9px; white-space:nowrap; color:#fff; font-size:13px; }
.rp-moment-actions button + button { border-left:1px solid #ffffff18; }
.rp-moment-actions .rp-moment-like[aria-pressed="true"] { color:#fff; }
.rp-moment-actions svg { width:17px; height:17px; flex-basis:17px; }
.rp-moment-responses { position:relative; margin-top:3px; border-radius:3px; background:var(--rp-social-panel); }
.rp-moment-responses::before { content:''; position:absolute; top:-6px; left:12px; border-right:6px solid transparent; border-left:6px solid transparent; border-bottom:6px solid var(--rp-social-panel); }
.rp-moment-responses .rp-moment-likes { align-items:flex-start; gap:6px; padding:8px 10px; border-radius:0; color:var(--rp-social-link); font-size:13px; line-height:1.6; background:transparent; }
.rp-moment-responses .rp-moment-likes svg { flex-shrink:0; margin-top:3px; width:14px; height:14px; }
.rp-moment-responses .rp-moment-comments { padding:6px 10px; margin:0; border-radius:0; background:transparent; }
.rp-moment-responses .rp-moment-likes + .rp-moment-comments { border-top:1px solid var(--rp-line); }
.rp-moment-comments p { margin:2px 0; color:var(--rp-ink); font-size:13px; line-height:1.6; }
.rp-moment-comments strong { display:inline; margin:0; color:var(--rp-social-link); font-size:13px; font-weight:500; }
.rp-comment-reply { padding-inline:4px; }
.rp-moment-comments .rp-action { padding:0 4px; min-height:24px; margin-left:5px; font-size:10px; color:var(--rp-social-link); }
.rp-moment-comment-form { margin-top:10px; border-radius:5px; background:var(--rp-social-panel); }
.rp-moment-comment-form textarea { line-height:1.5; font-size:16px; background:transparent; }
.rp-moment-comment-form button { padding:4px 10px; border-radius:4px; background:#07c160; color:#fff; font-size:12px; }
.rp-moments-status { padding:0 20px 12px; color:var(--rp-muted); font-size:12px; text-align:center; }
.rp-moments-empty { padding:30px 20px 70px; text-align:center; color:var(--rp-muted); font-size:13px; }
.rp-moments-empty p { margin-top:9px; font-size:12px; }
@media (min-width:700px) { .rp-moments-hero { max-width:760px; margin-inline:auto; }.rp-moments-cover { height:330px; } }
@media (prefers-reduced-motion:reduce) { #page-roleplay[data-rp-view="moments"] .rp-header, #page-roleplay[data-rp-view="moments"] .rp-header h1 { transition:none; } }

/* The CSS editor stays outside the custom skin's scope. */
.rp-appearance-editor { padding-bottom:32px!important; background:var(--rp-soft); }
.rp-appearance-intro { padding:12px 2px 22px; }
.rp-appearance-intro > span { color:var(--rp-muted); letter-spacing:.17em; font-size:9px; }
.rp-appearance-intro h2 { margin:9px 0; font-size:23px; font-weight:600; letter-spacing:-.03em; }
.rp-appearance-intro p { color:var(--rp-muted); font-size:12px; line-height:1.7; }
.rp-appearance-preview { margin-bottom:20px; overflow:hidden; border:1px solid var(--rp-line); border-radius:24px; background:var(--rp-paper); }
.rp-preview-toolbar { display:flex; justify-content:space-between; align-items:center; padding:10px; gap:8px; border-bottom:1px solid var(--rp-line); }
.rp-preview-toolbar > div { display:flex; gap:3px; padding:3px; border-radius:12px; background:var(--rp-soft); }
.rp-preview-toolbar button { min-height:32px; padding:5px 12px; color:var(--rp-muted); border-radius:9px; font-size:12px; }
.rp-preview-toolbar button[aria-selected="true"] { background:var(--rp-paper); color:var(--rp-ink); box-shadow:0 1px 4px #0000000d; }
#rp-css-preview { display:block; width:100%; height:390px; border:0; pointer-events:none; background:var(--rp-paper); }
#rp-css-status { padding:12px 14px; color:var(--rp-muted); border-top:1px solid var(--rp-line); font-size:11px; line-height:1.5; }
#rp-css-status[data-error="true"] { color:#e5484d; }
.rp-appearance-switch { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; margin-bottom:25px; border-radius:16px; background:var(--rp-paper); font-size:14px; }
.rp-appearance-switch small { display:block; margin-top:5px; font-size:11px; color:var(--rp-muted); }
.rp-appearance-switch input { appearance:none; width:47px; height:29px; flex-shrink:0; border-radius:16px; background:#b8bbc0; transition:background .18s; }
.rp-appearance-switch input::after { content:''; display:block; width:23px; height:23px; margin:3px; border-radius:50%; background:#fff; box-shadow:0 1px 4px #0002; transition:transform .18s; }
.rp-appearance-switch input:checked { background:var(--rp-accent); }
.rp-appearance-switch input:checked::after { transform:translateX(18px); }
.rp-appearance-builtins { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0 24px; }
.rp-appearance-builtins > button { color:var(--rp-ink); font-size:11px; line-height:2.5; }
.rp-skin-swatch { display:flex; flex-direction:column; align-items:flex-start; gap:8px; height:76px; padding:15px 12px; border:1px solid var(--rp-line); border-radius:16px; background:var(--rp-paper); }
.rp-skin-swatch i { display:block; width:65%; height:16px; border-radius:8px 8px 8px 2px; background:#e8e8ed; }
.rp-skin-swatch i + i { align-self:flex-end; width:55%; border-radius:8px 8px 2px 8px; background:#eaeaea; }
.rp-skin-blue { background:#eef1f6; }.rp-skin-blue i { background:#dce3ee; }.rp-skin-blue i + i { background:#acc8eb; }
.rp-skin-mono i { background:#eee; border-radius:3px; }.rp-skin-mono i + i { background:#252529; border-radius:3px; }
.rp-code-label { margin-bottom:10px; }
#rp-css-input { min-height:270px; padding:16px; font:12px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre; overflow:auto; tab-size:2; background:var(--rp-paper); }
.rp-appearance-tools { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px; }
.rp-appearance-tools .rp-action { font-size:11px; }
.rp-css-reference { padding:16px; margin-bottom:24px; border-radius:16px; background:var(--rp-paper); }
.rp-css-reference summary { color:var(--rp-ink); font-size:13px; cursor:pointer; }
.rp-css-reference p { margin-top:12px; color:var(--rp-muted); font-size:11px; line-height:2; overflow-wrap:anywhere; }
.rp-css-reference code { color:var(--rp-ink); font-family:ui-monospace,monospace; }
#rp-css-example-source { display:block; width:100%; min-height:320px; max-height:480px; margin-top:14px; padding:14px; border:1px solid var(--rp-line); border-radius:12px; background:var(--rp-soft); color:var(--rp-ink); font:12px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre; overflow:auto; resize:vertical; tab-size:2; }
.rp-preset-save { display:flex; gap:7px; margin:12px 0; }
.rp-preset-save input { min-width:0; flex:1; padding:12px; color:var(--rp-ink); border:1px solid var(--rp-line); border-radius:12px; background:var(--rp-paper); font-size:16px; }
.rp-preset-row { display:flex; align-items:center; gap:7px; padding:10px 0; border-bottom:1px solid var(--rp-line); }
.rp-preset-row > span { flex:1; min-width:0; overflow-wrap:anywhere; font-size:13px; }
.rp-preset-row .rp-action { min-height:36px; padding:7px 10px; font-size:11px; }
.rp-appearance-footer { display:flex; gap:10px; margin-top:25px; }
.rp-appearance-footer .rp-action { flex:1; min-height:48px; }
@media (prefers-reduced-motion:reduce) { .rp-appearance-switch input,.rp-appearance-switch input::after { transition:none; } }

/* Chat uses chat-skin.css and the assistant renderer; only role-specific structure here. */
#page-roleplay[data-rp-view="chat"] .rp-chat-layout { background:var(--chat-paper); }
#page-roleplay[data-rp-view="chat"] .rp-composer { margin:0; }
#page-roleplay[data-rp-view="chat"] .rp-message .bubble { position:relative; white-space:normal; }
#page-roleplay[data-rp-view="chat"] .rp-message .bubble p { padding:0; margin:0 0 .65em; border:0; border-radius:0; background:transparent; color:inherit; white-space:pre-wrap; font:inherit; }
#page-roleplay[data-rp-view="chat"] .rp-message .bubble p:last-child { margin-bottom:0; }
#page-roleplay[data-rp-view="chat"] .rp-message .bubble pre { max-width:100%; overflow:auto; white-space:pre; }
#page-roleplay[data-rp-view="chat"] .rp-message .bubble img { max-width:100%; }
#page-roleplay[data-rp-view="chat"] .rp-message .bubble table { display:block; max-width:100%; overflow:auto; }
#page-roleplay[data-rp-view="chat"] .rp-message .bubble :is(ul,ol) { padding-left:1.5em; }
#page-roleplay[data-rp-view="chat"] .rp-message .rp-avatar { margin-right:8px; }
#page-roleplay[data-rp-view="chat"] .rp-story-chat .msg-body { max-width:100% !important; }
/* Assistant rows reverse their avatar order; role rows already place the user at the end. */
#page-roleplay .rp-message.mine { flex-direction:row; justify-content:flex-end; }

/* Address book and contact cards share the social app's light/dark palette. */
#page-roleplay[data-rp-view="contacts"] .rp-content { padding:12px 0 0; background:var(--rp-paper); }
#page-roleplay[data-rp-view="contacts"] .rp-search-shell { margin:0 12px 12px; height:36px; border:0; border-radius:8px; background:var(--rp-soft); }
.rp-contact-group h2 { margin:0; padding:6px 20px; background:var(--rp-soft); color:var(--rp-muted); font-size:12px; font-weight:500; }
#page-roleplay .rp-contact-row { min-height:64px; padding:10px 20px; gap:13px; border:0; border-radius:0; background:var(--rp-paper); }
#page-roleplay .rp-contact-row + .rp-contact-row { position:relative; }
#page-roleplay .rp-contact-row + .rp-contact-row::before { content:''; position:absolute; top:0; right:0; left:75px; height:1px; background:var(--rp-line); }
#page-roleplay .rp-contact-row .rp-avatar { flex:0 0 42px; width:42px; height:42px; border-radius:7px; font-size:18px; }
.rp-contact-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; font-weight:500; }
.rp-contact-count { padding:23px 16px calc(24px + env(safe-area-inset-bottom,0px)); text-align:center; font-size:13px; color:var(--rp-muted); }
#page-roleplay .rp-content.rp-contact-detail { padding:0 0 calc(24px + env(safe-area-inset-bottom,0px)); background:var(--rp-soft); }
.rp-contact-identity { display:flex; gap:19px; align-items:flex-start; padding:26px 24px 30px; background:var(--rp-paper); }
.rp-contact-identity .rp-avatar { flex:0 0 66px; width:66px; height:66px; border-radius:10px; font-size:28px; }
.rp-contact-identity > div { min-width:0; padding-top:2px; }
.rp-contact-identity h2 { font-size:23px; font-weight:650; line-height:1.4; overflow-wrap:anywhere; }
.rp-contact-identity p { margin-top:7px; color:var(--rp-muted); font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.rp-contact-info { margin-bottom:9px; padding:0 22px; background:var(--rp-paper); }
.rp-contact-info > :is(div,button) { width:100%; min-height:57px; display:flex; align-items:center; gap:18px; padding:16px 0; border-top:1px solid var(--rp-line); text-align:left; color:var(--rp-ink); background:transparent; font-size:15px; }
.rp-contact-info > :first-child { border-top:0; }
.rp-contact-info > :is(div,button) > span:first-child { flex-shrink:0; min-width:76px; }
.rp-contact-info p { flex:1; min-width:0; color:var(--rp-muted); line-height:1.6; overflow-wrap:anywhere; white-space:pre-wrap; }
.rp-contact-info small { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--rp-muted); font-size:13px; }
.rp-contact-info [aria-hidden="true"] { margin-left:auto; color:var(--rp-muted); font-size:22px; }
.rp-contact-buttons { background:var(--rp-paper); }
.rp-contact-buttons button { width:100%; min-height:58px; display:flex; align-items:center; justify-content:center; gap:10px; color:#576b95; background:transparent; font-size:17px; font-weight:600; }
[data-theme="dark"] .rp-contact-buttons button { color:#9bacd0; }
.rp-contact-buttons svg { width:20px; height:20px; }
#page-roleplay :is(.rp-contact-row,.rp-contact-info button,.rp-contact-buttons button):active { background:var(--rp-soft); }
#page-roleplay :is(.rp-contact-row,.rp-contact-info button,.rp-contact-buttons button):focus-visible { outline:2px solid #576b95; outline-offset:-3px; }
.rp-contact-timeline article { display:grid; grid-template-columns:76px minmax(0,1fr); gap:14px; padding:22px 0; border-bottom:1px solid var(--rp-line); }
.rp-contact-timeline time { font-size:12px; color:var(--rp-muted); line-height:1.6; }
.rp-contact-timeline p { font-size:16px; line-height:1.7; overflow-wrap:anywhere; white-space:pre-wrap; }
.rp-contact-empty { color:var(--rp-muted); text-align:center; padding:50px 12px; font-size:14px; }
#page-roleplay:is([data-rp-view="contacts"],[data-rp-view="contact"],[data-rp-view="contact-edit"],[data-rp-view="contact-moments"]) .rp-header { width:min(760px,100%); margin:0 auto; border-radius:0; min-height:calc(52px + env(safe-area-inset-top,0px)); padding:calc(4px + env(safe-area-inset-top,0px)) 12px 4px; background:var(--rp-soft); }
#page-roleplay:is([data-rp-view="contacts"],[data-rp-view="contact"],[data-rp-view="contact-edit"],[data-rp-view="contact-moments"]) .rp-header h1 { font-size:18px; letter-spacing:0; }
#page-roleplay:is([data-rp-view="contacts"],[data-rp-view="contact"],[data-rp-view="contact-edit"],[data-rp-view="contact-moments"]) .rp-header-action { color:var(--rp-ink); background:transparent; font-size:15px; }
#page-roleplay:is([data-rp-view="contacts"],[data-rp-view="contact"],[data-rp-view="contact-edit"],[data-rp-view="contact-moments"]) .rp-content { width:min(760px,100%); margin:0 auto; border-radius:0; }
#page-roleplay[data-rp-view="contacts"] .rp-content { padding-bottom:calc(100px + env(safe-area-inset-bottom,0px)); }