/* Role settings page: a quiet letter to one role. What Ta calls you, how Ta
   treats you, what Ta sounds like, and what Ta looks like on your Pocket.
   The Pocket image saves on its own; everything else waits for the save bar. */

.role-settings-page { --rs-card: rgba(255, 253, 249, .92); --rs-spring: cubic-bezier(.34, 1.56, .64, 1); }
.role-settings-page.active { max-width: 1160px; margin-inline: auto; }

.rs-back { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; margin: 0 0 4px -6px; padding: 0 6px; border: 0; border-radius: 12px; color: var(--muted); background: none; font-size: 14px; }
.rs-back:hover { color: var(--ink); }
.rs-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Mobile reads top to bottom: who, 01 name, 02 style, 03 voice, 04 image, save. */
.rs-layout { display: flex; flex-direction: column; gap: 14px; }
.rs-aside, .rs-main { display: contents; }
.rs-head { order: 0; }
.rs-main > .rs-card { order: 1; }
.rs-image { order: 2; }
.rs-save-bar { order: 3; }

.rs-head { display: flex; align-items: center; gap: 14px; margin: 2px 0 2px; }
.rs-portrait { flex: none; width: 60px; height: 60px; border-radius: 20px; object-fit: cover; object-position: 50% 26%; background: #e9dcd6; box-shadow: 0 0 0 3px #fff, 0 10px 22px -10px rgba(80, 45, 40, .55); }
.rs-head .eyebrow { margin: 0 0 2px; }
.rs-head h2 { margin: 0; font-size: 28px; line-height: 1.15; outline: none; }
.rs-head p:last-child { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.rs-card { padding: 18px; border-radius: 24px; background: var(--rs-card); box-shadow: 0 18px 46px -30px rgba(80, 45, 40, .45); }
.rs-card h3 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-family: "Songti SC", "STSong", serif; font-size: 20px; font-weight: 500; }
.rs-card h3 > span:not(.rs-num) { flex: 1; min-width: 0; }
.rs-card h3 small { color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 400; }
.rs-num { color: var(--accent); font-size: 13px; letter-spacing: .04em; }
.rs-hint { margin: -4px 0 12px; color: var(--muted); font-size: 12px; line-height: 1.6; }

.rs-card input:not([type]), .rs-card textarea, .rs-search { width: 100%; }
#rsNickInput { min-height: 50px; font-size: 16px; }
.rs-echo { margin: 10px 2px 0; color: var(--muted); font-size: 13px; }
.rs-echo b { display: inline-block; color: var(--ink); font-family: "Songti SC", "STSong", serif; font-size: 16px; font-weight: 500; }
.rs-echo b.rs-bump { animation: rs-bump .32s var(--rs-spring); }
@keyframes rs-bump { 40% { transform: translateY(-3px) scale(1.06); } }

.rs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rs-chip { min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; color: #56524d; background: rgba(255, 255, 255, .72); font-size: 14px; transition: background .2s, color .2s, border-color .2s, transform .2s var(--rs-spring); }
.rs-chip[aria-pressed="true"] { border-color: transparent; color: #fff; background: var(--accent); }
.rs-chip:active { transform: scale(.95); }
.rs-chip:focus-visible, .rs-play:focus-visible, .rs-image-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#rsStyleInput, #rsPromptInput { line-height: 1.65; }
#rsPromptInput[readonly] { color: var(--muted); background: rgba(245, 241, 235, .6); }
.rs-count { margin: 6px 2px 0; color: var(--muted); font-size: 12px; text-align: right; }

.rs-switch { display: inline-flex; flex: none; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 400; cursor: pointer; }
.rs-switch input { position: relative; width: 36px; min-height: 0; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 999px; appearance: none; background: #d8d4d0; cursor: pointer; transition: background .2s; }
.rs-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); transition: transform .22s var(--rs-spring); }
.rs-switch input:checked { background: var(--accent); }
.rs-switch input:checked::after { transform: translateX(14px); }
.rs-switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.rs-search { min-height: 44px; margin-bottom: 10px; }
.rs-voices { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
.rs-voice { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 62px; padding: 6px 8px 6px 0; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, .66); transition: border-color .2s, background .2s; }
.rs-voice.selected { border-color: rgba(141, 38, 55, .4); background: rgba(141, 38, 55, .05); }
.rs-voice label { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0; padding: 6px 0 6px 14px; color: var(--ink); font-size: 14px; cursor: pointer; }
.rs-voice label input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.rs-voice:has(label input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.rs-radio { width: 20px; height: 20px; border: 2px solid #cfc6bf; border-radius: 50%; transition: border-color .2s, box-shadow .2s; }
.rs-voice.selected .rs-radio { border-color: var(--accent); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--accent); }
.rs-voice strong { display: block; overflow: hidden; font-size: 15px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.rs-voice small { color: var(--muted); font-size: 12px; }
.rs-play { display: inline-flex; align-items: center; gap: 3px; min-width: 70px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: #fff; font-size: 12px; }
.rs-play i { width: 3px; height: 6px; border-radius: 2px; background: var(--accent); }
.rs-play i:nth-child(2) { height: 11px; }
.rs-play i:nth-child(3) { height: 8px; margin-right: 4px; }
.rs-play.playing i { animation: rs-bar .9s ease-in-out infinite; }
.rs-play.playing i:nth-child(2) { animation-delay: .15s; }
.rs-play.playing i:nth-child(3) { animation-delay: .3s; }
.rs-play:disabled { opacity: .45; cursor: default; }
@keyframes rs-bar { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.rs-empty { margin: 8px 2px; color: var(--muted); font-size: 13px; }

/* The Pocket itself. Its screen shape comes from the server's display target
   (or the saved image), never from a guessed board size. */
.rs-image-row { display: flex; align-items: center; gap: 18px; }
.rs-pocket { --rs-screen-ratio: 1 / 1; flex: none; width: 150px; padding: 12px 12px 20px; border-radius: 32px; background: linear-gradient(160deg, #fbf5f0, #eadcd2); box-shadow: inset 0 1px 0 #fff, 0 18px 40px -18px rgba(80, 45, 40, .55); }
.rs-pocket-screen { position: relative; display: grid; place-items: center; aspect-ratio: var(--rs-screen-ratio); overflow: hidden; border-radius: 16px; background: #121015; box-shadow: inset 0 0 0 3px #1d1a1f; }
.rs-pocket-screen img { width: 100%; height: 100%; object-fit: cover; }
.rs-pocket-fallback { color: rgba(255, 255, 255, .5); font-family: "Songti SC", "STSong", serif; font-size: 34px; }
.rs-pocket-button { display: block; width: 26px; height: 26px; margin: 12px auto 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #e6dbd3); box-shadow: 0 2px 5px rgba(80, 45, 40, .25); }
.rs-image-actions { display: grid; gap: 8px; justify-items: start; }
.rs-image-actions small { color: var(--muted); font-size: 11px; }
.rs-image-actions .ghost { min-height: 42px; padding-inline: 16px; }
#rsImageBadge.custom { color: var(--accent); }
.rs-instant { display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 999px; color: #3f5a4c; background: rgba(117, 130, 124, .16); font-size: 11px; font-weight: 600; }
.rs-image-status { min-height: 18px; margin: 12px 2px 0; color: var(--muted); font-size: 12px; }
.rs-image-status:empty { display: none; }
.rs-image-status[data-tone="done"] { color: #3f5a4c; }
.rs-image-status[data-tone="done"]::before { content: "✓ "; }
.rs-image-status[data-tone="error"] { color: #9a2538; }

/* Save bar: only the draft fields. Sticks above the bottom nav on phones. */
.rs-save-bar { position: sticky; z-index: 5; bottom: calc(92px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-radius: 20px; background: rgba(255, 253, 249, .97); box-shadow: 0 -1px 0 rgba(255, 255, 255, .6), 0 16px 40px -18px rgba(80, 45, 40, .5); }
.rs-save-state { flex: 1; margin: 0; color: var(--muted); font-size: 12px; }
.rs-save-state.dirty { color: var(--accent); }
.rs-save-state.dirty::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.rs-save-bar .primary { min-width: 118px; }
.rs-save-bar .primary:disabled { cursor: default; opacity: .45; transform: none; }

.role-settings-leave-card { max-width: 420px; }
.role-settings-leave-actions { display: grid; gap: 10px; margin-top: 22px; }
.role-settings-leave-actions .text-button { min-height: 40px; color: var(--muted); }

@media (max-width: 380px) {
  .rs-image-row { flex-direction: column; align-items: stretch; }
  .rs-pocket { align-self: center; }
  .rs-image-actions { grid-auto-flow: column; justify-content: space-between; align-items: center; }
}

/* Desktop: preview on the left (who Ta is, what the Pocket shows), editing on
   the right. The preview column stays put while the form scrolls. */
@media (min-width: 900px) {
  .rs-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0 28px; align-items: start; }
  .rs-aside { display: grid; gap: 14px; position: sticky; top: 16px; }
  .rs-main { display: grid; gap: 14px; }
  .rs-head { flex-direction: column; align-items: stretch; margin: 0; padding: 18px; border-radius: 24px; background: var(--rs-card); box-shadow: 0 18px 46px -30px rgba(80, 45, 40, .45); }
  .rs-portrait { width: 100%; height: 210px; border-radius: 18px; }
  .rs-head h2 { font-size: 34px; }
  .rs-image-row { flex-direction: column; align-items: stretch; }
  .rs-pocket { width: 100%; }
  .rs-image-actions { grid-auto-flow: column; justify-content: space-between; align-items: center; }
  .rs-save-bar { bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .rs-echo b.rs-bump, .rs-play.playing i { animation: none; }
  .rs-chip, .rs-switch input::after { transition: none; }
}

/* app.css has no base style for .text-button; give this page's quiet links one. */
.role-settings-page .text-button,
.role-settings-leave-card .text-button { min-height: 36px; padding: 0 2px; border: 0; border-radius: 10px; color: var(--accent); background: none; font-size: 13px; text-decoration: underline; text-decoration-color: rgba(141, 38, 55, .3); text-underline-offset: 4px; }
.role-settings-leave-card .text-button { justify-self: center; color: var(--muted); text-decoration-color: rgba(119, 115, 109, .35); }
.role-settings-page .text-button:focus-visible,
.role-settings-leave-card .text-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.user-touch-page.active{max-width:1000px;margin-inline:auto;padding-bottom:48px}.user-touch-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}.user-touch-card{padding:24px;min-width:0}.user-touch-card label{display:grid;gap:10px;color:var(--muted);font-size:14px}.user-touch-card textarea{width:100%;resize:vertical;min-height:100px;padding:14px;border:1px solid var(--line,#e5dce2);border-radius:14px;background:var(--surface,#fffdf9);color:var(--ink);font:inherit;line-height:1.7}.user-touch-actions{display:flex;flex-wrap:wrap;gap:12px;padding:18px 0}.user-touch-entry{margin-bottom:18px}#userTouchStatus{color:var(--muted);line-height:1.7}.user-touch-card h3{margin-top:0}.user-touch-page h1{font-size:clamp(26px,4vw,42px)}@media(max-width:700px){.user-touch-grid{grid-template-columns:1fr;gap:14px}.user-touch-card{padding:20px}.user-touch-actions .primary{flex:1}}