:root { --chat-dialogue-default:#854583; --chat-action-default:#286b73; }
:root[data-theme="dark"] { --chat-dialogue-default:#dfb8f1; --chat-action-default:#9ad2cb; }
.roleplayText { white-space:pre-wrap; overflow-wrap:anywhere; }
.roleplay-dialogue { color:var(--chat-dialogue-color,var(--chat-dialogue-default)); font-weight:550; }
.roleplay-action { color:var(--chat-action-color,var(--chat-action-default)); }
.turnStatus { width:min(100%,460px); box-sizing:border-box; margin:0 0 22px; padding:0 16px 8px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.turnStatus summary { display:flex; align-items:center; min-height:44px; cursor:pointer; color:var(--dim); font-size:12px; list-style:none; }
.turnStatus summary::-webkit-details-marker { display:none; }
.turnStatus summary::after { content:'＋'; margin-left:auto; }
.turnStatus[open] summary::after { content:'−'; }
.turnStatus .statusRow { flex-wrap:wrap; gap:8px; }
.turnStatus .statusVal { margin-left:auto; white-space:pre-wrap; overflow-wrap:anywhere; max-width:100%; }
.turnStatus .statusKey { flex-shrink:0; }
.turnStatus .stBar { flex:1 1 50px; min-width:30px; max-width:100px; }
.chatColorField { grid-column:1 / -1; }
.chatColorRows { display:flex; flex-wrap:wrap; gap:12px 24px; }
.chatColorRow { display:flex; align-items:center; gap:12px; font-size:14px; }
.chatColorRow input[type="color"] { width:52px; height:44px; padding:4px; border:1px solid var(--line); border-radius:8px; background:var(--panel); cursor:pointer; }
.chatColorPreview { margin:14px 0 8px; padding:16px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); font-family:var(--reading-font); line-height:1.9; }
.chatColorReset { min-height:44px; padding:6px 0; border:0; background:none; color:var(--dim); font:inherit; font-size:12px; cursor:pointer; }
.messageSceneActions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:-4px 0 16px; }
.messageSceneActions>span { min-width:0; overflow-wrap:anywhere; }
.messageSceneActions button { min-height:44px; }
.convSearch { display:flex; align-items:center; gap:9px; margin:0 12px 8px; padding:0 12px; border:1px solid var(--line); border-radius:12px; color:var(--dim); }
.convSearch svg { width:18px; height:18px; flex-shrink:0; }
.convSearch input { width:100%; min-width:0; min-height:44px; padding:0; border:0; outline:none; background:transparent; color:var(--text); font:inherit; font-size:14px; }
.chatLayout.contactsView { justify-content:center; }
.chatLayout.contactsView .convList { display:flex; flex:1 1 auto; position:relative; inset:auto; width:100%; max-width:820px; min-width:0; height:100%; margin:0; padding:12px 24px; border:0; border-radius:0; box-shadow:none; background:transparent; z-index:auto; box-sizing:border-box; }
.contactsView .chatMain { display:none; }
.contactsView .convHead { justify-content:flex-end; border-bottom:0; padding:0 0 12px; }
.contactsView .convHead .btnGhost { min-height:44px; }
.contactsView .convSearch { margin:0 0 12px; }
.contactsView .convItem { min-height:88px; padding:16px 8px; margin:0; border:0; border-bottom:1px solid var(--line); border-radius:0; gap:14px; }
.contactsView .convAvatar { width:54px; height:54px; border-radius:16px; }
.contactsView .convName { font-size:16px; }
.contactsView .convPreview { margin-top:7px; font-size:13px; }
.convPreview { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.contactsView .convMore { width:44px; min-height:44px; opacity:1; }
.directivePurpose { margin:10px 0; color:var(--dim); font-size:13px; line-height:1.6; }
.sceneReferenceStrip { display:flex; gap:14px; margin-bottom:20px; }
.sceneReferenceStrip figure { margin:0; }
.sceneReferenceStrip img { display:block; width:76px; height:90px; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.sceneReferenceStrip figcaption { margin-top:6px; font-size:12px; color:var(--dim); text-align:center; }
@media(max-width:920px) {
  .chatLayout.contactsView .convList { padding:8px 16px 12px; }
}
@media(max-width:700px) {
  .turnStatus { width:100%; padding:0 12px 8px; margin-bottom:18px; }
  .turnStatus .statusRow { font-size:13px; }
  .chatColorRows { justify-content:space-between; gap:12px; }
}

/* Keep each reply, its saved state and illustration together. */
.chatMain .chatTop { height:60px; min-height:60px; flex-basis:60px; padding:0 18px; gap:8px; }
.chatMain .chatTopName { font-size:17px; }
.chatMain .chatTopAvatar { width:32px; height:32px; }
.chatMain .story { padding:18px 24px; }
.storyInner { gap:14px; }
.assistantTurn { display:flex; flex-direction:column; gap:8px; min-width:0; }
.chatMain .storyMsg { line-height:1.8; }
.assistantTurn > .storyMsg.assistant { align-self:flex-start; max-width:100%; padding:11px 14px; border-radius:4px 14px 14px; box-shadow:none; }
.chatMain .storyMsg.user { margin:0; padding:9px 13px; border-radius:14px 14px 3px; }
.assistantTurn > .turnStatus { margin:0; padding:0 12px 5px; border-radius:10px; }
.turnStatus .statusRow { padding:4px 0; gap:6px; flex-wrap:nowrap; align-items:baseline; font-size:12px; }
.turnStatus .statusKey { width:72px; flex:0 0 72px; }
.turnStatus .statusVal { margin-left:0; text-align:left; line-height:1.5; }
.turnStatus .stBar { align-self:center; }
.scenePreview { display:block; align-self:flex-start; max-width:100%; padding:0; border:0; border-radius:10px; background:transparent; cursor:zoom-in; }
.scenePreview .unlockImg { display:block; width:auto; max-width:100%; max-height:280px; border-radius:10px; object-fit:contain; }
.scenePreview:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
/* Image viewing uses the available screen instead of the small settings sheet. */
.sheet.sheet-scenePreview { width:min(1120px,calc(100vw - 48px)); max-width:none; height:calc(100vh - 48px); height:calc(100dvh - 48px); max-height:none; border:0; border-radius:14px; background:#101014; color:#f8f5fb; }
.sheet-scenePreview .sheetHead { flex:0 0 auto; padding:4px 10px 4px 16px; border-color:rgba(255,255,255,.12); }
.sheet-scenePreview .sheetHead h3 { font:500 14px/1.4 var(--font-ui,system-ui,sans-serif); }
.sheet-scenePreview .sheetHead button { width:44px; height:44px; color:inherit; }
.sheet-scenePreview .sheetHead button:hover { background:rgba(255,255,255,.1); }
.sheet-scenePreview .sheetBody { flex:1; min-height:0; padding:0; gap:0; overflow:hidden; }
.sceneFullImage { display:block; width:100%; height:100%; min-height:0; flex:1; object-fit:contain; object-position:center; }

.sheet.sheet-chatTools { width:min(480px,calc(100vw - 24px)); }
.sheet-chatTools .sheetHead { padding:4px 12px 4px 16px; }
.sheet-chatTools .sheetHead h3 { font-size:16px; }
.sheet-chatTools .sheetHead button { min-width:44px; min-height:44px; }
.sheet-chatTools .sheetBody { gap:12px; padding:12px 12px max(12px,env(safe-area-inset-bottom)); overscroll-behavior:contain; }
.sheet-chatTools .chatToolGrid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:0; }
.sheet-chatTools .chatToolGrid button { flex-direction:column; justify-content:center; gap:6px; min-width:0; min-height:64px; padding:8px 4px; border-color:transparent; border-radius:10px; font-size:12px; line-height:1.4; text-align:center; }
.sheet-chatTools .chatToolGrid .uiIcon { width:20px; height:20px; flex-shrink:0; }
.sheet-chatTools .chatSocialTools { grid-template-columns:repeat(4,minmax(0,1fr)); padding-top:12px; border-top:1px solid var(--line); }
.sheet-chatTools .chatSocialTools button { min-height:60px; background:transparent; }
.sheet-chatTools .chatToolGrid button[aria-pressed='true'] { color:var(--accent); background:var(--accent-soft); }
.sheet-chatTools .chatToolGrid button[aria-pressed='true'] .uiIcon { fill:var(--accent-soft); }
.sheet-chatTools .chatHistoryTools { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sheet-chatTools .chatHistoryTools button { flex-direction:row; gap:7px; min-height:44px; }
.sheet-chatTools .chatHistoryTools .uiIcon { width:16px; height:16px; }
.sheet-chatTools .chatToolGrid button:disabled { opacity:.4; cursor:default; }
.sheet-chatTools .chatToolGrid button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media(max-width:920px) {
  .sheet.sheet-scenePreview { inset:0; transform:none; width:100%; height:100vh; height:100dvh; border-radius:0; }
  .sheet-scenePreview .sheetHead { padding:max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 4px max(12px,env(safe-area-inset-left)); }
  .sheet-scenePreview .sheetBody { padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
}
@media(max-width:600px) {
  .sheet.sheet-chatTools { width:100%; }
}
.assistantTurn .messageSceneActions { margin:0; gap:6px; }
.assistantTurn .messageSceneActions button { padding:4px 8px; font-size:12px; }
.assistantTurn .optionsBlock { gap:6px; }
.assistantTurn .optionsTitle { margin:0; }
.assistantTurn .option { min-height:44px; padding:9px 12px; border-radius:9px; }
.typingHint { display:flex; align-items:center; gap:8px; min-height:28px; padding:0 4px; font-size:12px; color:var(--dim); }
.typingDots { display:inline-flex; align-items:center; gap:3px; }
.typingDots i { width:4px; height:4px; background:currentColor; border-radius:50%; animation:chatTyping 1.2s ease-in-out infinite; }
.typingDots i:nth-child(2) { animation-delay:.15s; }
.typingDots i:nth-child(3) { animation-delay:.3s; }
@keyframes chatTyping { 0%,70%,100% { opacity:.3; } 35% { opacity:1; } }
.chatMain .composerWrap { flex-shrink:0; padding:6px 20px 8px; }
.chatMain .composerTools { margin-bottom:4px; padding:0; gap:2px; }
.chatMain .composerTools .modelChoice { margin-right:auto; }
.chatMain .composer { padding:4px; border-radius:12px; }
.chatMain .composerInput { min-width:0; min-height:44px; padding:9px 10px; line-height:1.5; }
.chatMain .sendBtn { width:44px; height:44px; min-width:44px; border-radius:9px; }
.chatMain .composerFoot { padding-top:4px; }
@media(max-width:920px) {
  .app.chatView { padding-bottom:calc(56px + env(safe-area-inset-bottom)); }
  .mobileTabs.compactChatTabs { min-height:56px; padding:4px 0 max(4px,env(safe-area-inset-bottom)); }
  .compactChatTabs .mTab { min-height:47px; padding:2px 0; gap:2px; font-size:11px; }
  .compactChatTabs .mTab svg { width:21px; height:21px; }
  .chatMain .chatTop { height:54px; min-height:54px; flex-basis:54px; padding:0 8px; gap:6px; }
  .chatMain .chatTopName { font-size:16px; }
  .chatMain .chatPanelButton { padding:6px; }
  .chatMain .story { padding:12px; }
  .storyInner { gap:12px; }
  .assistantTurn { gap:6px; }
  .chatMain .storyMsg { font-size:14px; line-height:1.75; }
  .assistantTurn > .storyMsg.assistant { padding:10px 12px; }
  .chatMain .storyMsg.user { max-width:90%; padding:8px 11px; }
  .turnStatus .statusKey { width:64px; flex-basis:64px; }
  .scenePreview .unlockImg { max-height:220px; }
  .chatMain .composerWrap { padding:3px 10px 5px; }
  .chatMain .composerTools { overflow-x:auto; flex-wrap:nowrap; mask-image:none; scrollbar-width:none; }
  .chatMain .composerTools::-webkit-scrollbar { display:none; }
  .chatMain .composerTools::after { display:none; }
  .chatMain .toolChip { padding:4px 6px; min-height:44px; font-size:11px; gap:4px; }
  .chatMain .composerInput { font-size:16px; padding:9px 8px; }
  .chatMain .composerFoot { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .typingDots i { animation:none; opacity:.6; }
}

/* Shared status rows: stable labels, readable notes and aligned meters. */
.statusRows .statusRow { display:grid; grid-template-columns:108px minmax(0,1fr); align-items:start; gap:12px; padding:8px 0; font-size:13px; border-bottom:1px solid var(--line); }
.statusRows .statusRow:last-child { border-bottom:0; }
.statusRows .statusKey { display:flex; align-items:center; gap:8px; width:auto; min-width:0; padding:0; color:var(--dim); line-height:1.6; overflow-wrap:normal; }
.statusKey > span { white-space:nowrap; }
.statusKey .uiIcon { width:17px; height:17px; flex:0 0 17px; color:var(--accent); stroke-width:1.7; }
.statusContent { min-width:0; }
.statusRows .statusVal { display:block; margin:0; max-width:100%; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; color:var(--text); }
.statusMeter { display:flex; align-items:center; gap:10px; min-height:21px; }
.statusRows .stBar { position:relative; flex:1 1 auto; width:auto; min-width:24px; max-width:none; height:7px; border-radius:99px; background:var(--accent-soft); overflow:hidden; }
.statusRows .stBar i { display:block; height:100%; border-radius:inherit; background:var(--accent); transition:width .35s ease; }
.statusRows .stNum { flex:0 0 38px; width:38px; color:var(--accent); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; text-align:right; }
.statusNote { display:block; margin-top:4px; color:var(--dim); line-height:1.6; overflow-wrap:anywhere; }
.turnStatus summary::after { content:''; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); margin-right:3px; transition:transform .2s; }
.turnStatus[open] summary::after { content:''; transform:rotate(225deg); }
.sceneGallery { display:flex; flex-wrap:wrap; gap:8px; max-width:min(100%,540px); }
.sceneGalleryMultiple { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); width:100%; }
.sceneGalleryMultiple:has(> :last-child:nth-child(2)) { grid-template-columns:repeat(2,minmax(0,1fr)); }
.sceneGalleryMultiple .scenePreview { width:100%; align-self:start; overflow:hidden; }
.sceneGalleryMultiple .unlockImg { width:100%; height:auto; max-height:240px; aspect-ratio:auto; object-fit:contain; }
.sceneOptionGroup { min-width:0; margin:0 0 20px; padding:0; border:0; }
.sceneOptionGroup legend { margin-bottom:10px; padding:0; color:var(--text); font-size:13px; }
.sceneCountOptions,.sceneSizeOptions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.sceneOptionGroup label { position:relative; display:flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--line); border-radius:10px; color:var(--dim); cursor:pointer; font-size:13px; background:var(--panel); box-sizing:border-box; }
.sceneOptionGroup label.selected { border-color:var(--accent); background:var(--accent-soft); color:var(--text); }
.sceneOptionGroup label:has(:focus-visible) { outline:2px solid var(--accent); outline-offset:3px; }
.sceneOptionGroup input { position:absolute; width:1px; height:1px; opacity:0; }
.sceneSizeOptions label { flex-direction:column; gap:7px; padding:14px 4px 12px; }
.sceneRatio { display:block; height:25px; max-width:38px; border:1.5px solid currentColor; border-radius:3px; color:var(--accent); }
.sceneSizeOptions small { font-size:10px; color:var(--dim); font-variant-numeric:tabular-nums; }
.sceneGenerate { width:100%; min-height:46px; }
.sceneOptionGroup:disabled label { opacity:.6; cursor:wait; }
@media(max-width:520px) {
  .statusRows .statusRow { grid-template-columns:96px minmax(0,1fr); gap:9px; font-size:12px; }
  .statusKey .uiIcon { width:16px; height:16px; flex-basis:16px; }
  .sceneGalleryMultiple { gap:6px; }
  .sceneGalleryMultiple .unlockImg { max-height:180px; }
}
@media(prefers-reduced-motion:reduce) {
  .statusRows .stBar i,.turnStatus summary::after { transition:none; }
}

/* Reading mode gives the conversation the full screen; navigation remains one tap away. */
.app.chatView.chatImmersive { padding-bottom:0; }
.chatImmersive .sidebar,.chatImmersive .topbar,.chatImmersive .mobileTabs,.chatImmersive .characterRail,.chatImmersive .chatListToggle,.chatImmersive .chatLayout .convList { display:none; }
.chatImmersive .chatMobileBack { display:grid; }
.chatImmersive .chatMain .chatTop { height:50px; min-height:50px; flex-basis:50px; padding:0 10px; }
.chatIdentity { display:flex; align-items:center; gap:9px; min-width:0; min-height:44px; padding:0; border:0; background:transparent; color:var(--text); cursor:pointer; font:inherit; }
.chatIdentity .chatTopName { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; font-weight:600; }
.chatIdentity .chatTopAvatar { width:30px; height:30px; flex:0 0 30px; border-radius:9px; }
.chatImmersive .chatMain .story { padding:14px clamp(12px,3vw,40px); }
.chatImmersive .storyInner { max-width:900px; gap:12px; }
.chatMain .composerWrap { padding:3px 12px max(6px,env(safe-area-inset-bottom)); }
.chatMain .composerTools { max-width:900px; gap:4px; margin-bottom:2px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; mask-image:none; }
.chatMain .composerTools .toolChip { min-height:44px; padding:5px 8px; font-size:12px; flex:0 0 auto; gap:5px; }
.chatMain .composerTools .toolChip .uiIcon { width:15px; height:15px; }
.chatMain .composerTools .toolChip.on { color:var(--accent); background:var(--accent-soft); }
.composerRow { display:flex; align-items:flex-end; gap:8px; max-width:900px; margin:0 auto; }
.composerRow .composer { flex:1; min-width:0; margin:0; padding:3px; border-radius:24px; }
.composerRow .composerInput { min-height:44px; padding:10px 12px; }
.composerRow .sendBtn { border-radius:50%; }
.composerMenu.iconBtn { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; margin-bottom:4px; border:1px solid var(--accent-line); border-radius:14px; color:var(--accent); background:var(--accent-soft); }
.composerMenu .uiIcon { width:21px; height:21px; }
.chatTopRight .chatNavigationToggle { flex-shrink:0; width:44px; height:44px; }
.chatAdvanced { margin-top:12px; border-top:1px solid var(--line); }
.chatAdvanced summary { display:flex; align-items:center; min-height:44px; cursor:pointer; color:var(--dim); font-size:13px; }
.chatAdvanced .formRow { flex-wrap:wrap; gap:10px; }
.chatAdvanced input[type='range'] { min-width:100px; flex:1; accent-color:var(--accent); }
.statusSkeleton { padding:0 0 10px; }
.statusSkeleton>span { display:block; margin-bottom:8px; color:var(--dim); font-size:12px; }
.optionsLoadingHint { color:var(--dim); font-size:12px; padding:2px 0; }
.statusSkeleton>div { display:flex; align-items:center; gap:16px; height:28px; }
.statusSkeleton i,.statusSkeleton b { display:block; height:8px; border-radius:99px; background:var(--accent-soft); animation:statusPulse 1.5s ease-in-out infinite; }
.statusSkeleton i { width:72px; }
.statusSkeleton b { width:55%; animation-delay:.15s; }
.statusSkeleton>div:nth-last-child(2) b { width:72%; }
@keyframes statusPulse { 0%,100% { opacity:.45; } 50% { opacity:1; } }
@media(max-width:520px) {
  .chatMain .composerWrap { padding-left:8px; padding-right:8px; }
  .chatMain .composerTools .toolChip { padding:4px 6px; font-size:11px; }
  .composerRow { gap:6px; }
  .chatImmersive .chatMain .story { padding:12px 10px; }
  .chatImmersive .assistantTurn>.storyMsg.assistant { padding:10px 11px; }
}
@media(prefers-reduced-motion:reduce) { .statusSkeleton i,.statusSkeleton b { animation:none; } }
.relationshipProgress { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:12px; line-height:1.6; }
.relationshipHeading { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; color:var(--text); }
.relationshipHeading>.uiIcon { width:15px; height:15px; color:var(--dim); }
.relationshipDelta,.relationshipMilestone { color:var(--accent); font-variant-numeric:tabular-nums; }
.relationshipDelta.down { color:var(--dim); }
.relationshipReason,.relationshipGoalChange,.relationshipNext { margin:6px 0; color:var(--dim); overflow-wrap:anywhere; }
.relationshipGoal { margin-top:16px; }
.relationshipGoalHead { display:flex; justify-content:space-between; gap:12px; }
.relationshipGoalHead>span { flex-shrink:0; color:var(--dim); }
.relationshipGoal p { margin:6px 0; color:var(--dim); }
.relationshipGoal ol { padding-left:20px; margin:8px 0; }
.relationshipGoal li { padding:3px 0; overflow-wrap:anywhere; }
.relationshipGoal li.done { color:var(--dim); text-decoration:line-through; }
.relationshipGoalActions { display:flex; gap:12px; flex-wrap:wrap; }
.relationshipGoalActions button { min-height:44px; }
.relationshipEvents { margin-top:14px; }
.relationshipEvents summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--dim); }
.relationshipEvents p { display:flex; gap:8px; align-items:baseline; margin:8px 0; overflow-wrap:anywhere; }
.relationshipEvents .uiIcon { width:14px; height:14px; color:var(--accent); }
.knowledgeMode { font-size:12px; color:var(--dim); }
.statusRowSkeleton { display:block; width:65%; max-width:230px; height:8px; margin:8px 0; border-radius:99px; background:var(--accent-soft); animation:statusPulse 1.5s ease-in-out infinite; }
@media(prefers-reduced-motion:reduce) { .statusRowSkeleton { animation:none; } }
.statusRows .statusStale{display:block;color:var(--dim);font-size:11px;line-height:1.5;margin-top:3px}