@charset "UTF-8";
@font-face{font-family:"Pretendard Variable";src:url("/assets/pretendard-variable.woff2") format("woff2");font-style:normal;font-weight:45 920;font-display:swap}
/* Palette observed in zaritalk.com production CSS. See assets/brand-reference.md. */
:root{--app-width:430px;--paper:#fff;--ink:#222;--muted:#747579;--line:#e7e7e8;--primary:#2c7fff;--action:#0041a2;--blue-soft:#f2f7ff;--blue-light:#eaf2ff;--blue-ink:#00204f;--narration-ink:#5276a5;--surface:#f8f8f9;--bubble:#f2f2f2;--danger:#91141e;--danger-soft:#fef2f3;font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;color:var(--ink);font-synthesis:none;color-scheme:light;-webkit-font-smoothing:antialiased;letter-spacing:-.2px}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:var(--surface)}button,input,textarea{font:inherit}button{border:0;background:none;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}a{color:var(--action)}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--primary);outline-offset:3px}input[type=radio]{accent-color:var(--primary);width:18px;height:18px;margin:0;flex-shrink:0}svg{width:22px;height:22px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Every viewport uses the same mobile canvas; visualViewport keeps the input above the keyboard. */
.app{position:fixed;top:var(--viewport-top,0px);left:0;right:0;width:min(100%,var(--app-width));height:var(--viewport-height,100dvh);margin:0 auto;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.chat-panel{height:100%;min-height:0;display:flex;flex-direction:column;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.chat-header{height:calc(76px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0 20px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px;border-bottom:1px solid var(--line);background:var(--paper)}
.header-friend{display:flex;align-items:center;gap:10px;min-width:0}.header-friend>div:last-child{min-width:0}.avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;background:var(--surface);flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover;object-position:center 35%}.header-friend h2{font-size:18px;font-weight:700;line-height:24px;margin:0 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-friend span{display:flex;align-items:center;gap:4px;font-size:12px;line-height:18px;color:var(--muted);white-space:nowrap}.brand-mark{width:13px;height:13px;object-fit:contain}.header-actions{flex-shrink:0}.icon-button{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:#48494e}.icon-button:hover{background:var(--surface)}
.chat-tools{display:flex;justify-content:flex-end;flex-shrink:0;padding:0 16px}.chat-tools button{min-height:44px;display:flex;align-items:center;gap:5px;padding:8px 4px;font-size:12px;color:var(--muted)}.chat-tools svg{width:16px;height:16px}
.conversation{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 20px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#dcdcdd transparent}.date-divider{display:flex;justify-content:center;align-items:center;gap:12px;font-size:12px;line-height:18px;color:var(--muted);margin:24px 0}.date-divider:before,.date-divider:after{content:"";width:20px;height:1px;background:var(--line)}
.message{display:flex;align-items:flex-start;gap:8px;margin:20px 0;animation:appear .18s ease-out}.opening-message{margin-top:0;animation:none}.message>div{min-width:0;max-width:calc(100% - 38px)}.message.user{justify-content:flex-end}.mini-avatar{width:30px;height:30px;object-fit:cover;border-radius:50%;flex-shrink:0;background:var(--surface)}.bubble{padding:12px 14px;border-radius:4px 16px 16px 16px;background:var(--bubble);font-size:16px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;word-break:keep-all}.message.user .bubble{border-radius:16px 4px 16px 16px;background:var(--blue-light);color:var(--blue-ink)}.message-meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);line-height:16px;padding:5px 2px 0}.message.user .message-meta{justify-content:flex-end}.message.failed .bubble{background:var(--danger-soft);color:var(--danger);border:1px solid #f9d2d5}
.composer-area{flex-shrink:0;padding:10px 16px max(6px,env(safe-area-inset-bottom));background:var(--paper)}.composer{display:flex;flex-direction:column;gap:2px;padding:8px 10px;min-height:100px;background:var(--paper);border:1px solid #dcdcde;border-radius:16px;transition:border-color .15s,box-shadow .15s}.composer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}.composer:focus-within{border-color:var(--primary);box-shadow:0 0 0 2px var(--blue-light)}.composer textarea{width:100%;min-width:0;min-height:44px;max-height:135px;padding:8px 2px;border:0;background:transparent;outline:none;box-shadow:none;resize:none;font-size:16px;line-height:26px;color:var(--ink)}.composer textarea::placeholder{color:var(--muted)}.send-button{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;border-radius:50%;background:#0066ff;color:#fff;transition:background .15s,opacity .15s}.send-button svg{width:22px;height:22px}.send-button:hover:not(:disabled){background:#0055dd}.send-button:disabled{opacity:.4}.composer-note{display:flex;justify-content:space-between;align-items:center;min-height:32px;font-size:11px;line-height:16px;color:var(--muted)}.composer-note button{padding:8px 10px;min-height:32px;color:inherit;font-size:inherit}.keyboard-open .composer-area{padding-bottom:4px}.keyboard-open .composer-note{display:none}
.daily-limit{margin:0 4px 10px;color:var(--muted);font-size:12px;line-height:1.65;word-break:keep-all}.retry button:disabled{opacity:.5}
.reward-charge{display:block;width:100%;min-height:44px;margin:0 0 10px;padding:11px 16px;border:1px solid #c9dcf9;border-radius:12px;background:var(--blue-soft);color:var(--action);font-size:14px;font-weight:600;line-height:1.5}.reward-charge:disabled{opacity:.55}.reward-charge:hover:not(:disabled){background:var(--blue-light)}
.reward-sheet .dialog-heading h2{font-size:21px}.reward-allowance{margin:0 0 20px;font-size:12px;line-height:1.6;color:var(--muted);font-variant-numeric:tabular-nums}.reward-disclosure{margin:12px 0 8px;font-size:15px;line-height:1.7;white-space:pre-line;word-break:keep-all}.reward-status{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.7;word-break:keep-all}.reward-sheet .primary{font-size:15px}.reward-sheet .cancel{margin-top:6px}
.connection-banner{flex-shrink:0;margin:12px 20px 0;padding:12px 14px;max-height:22%;overflow:auto;background:var(--blue-soft);color:var(--action);border-radius:12px;font-size:13px;line-height:1.6}.retry{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;padding:4px 12px;border-radius:12px;background:var(--danger-soft);color:var(--danger);font-size:13px;line-height:1.5}.retry button{min-height:44px;white-space:nowrap;font-weight:600;text-decoration:underline}
/* Compact mobile bottom sheets share the service's neutral surfaces and blue selection states. */
dialog{position:fixed;inset:auto 0 auto;top:calc(var(--viewport-top,0px) + var(--viewport-height,100dvh));transform:translateY(-100%);width:min(100%,var(--app-width));max-width:100%;max-height:calc(var(--viewport-height,100dvh) - env(safe-area-inset-top) - 12px);margin:0 auto;padding:10px 20px max(20px,env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;border:0;border-radius:24px 24px 0 0;background:var(--paper);color:var(--ink);box-shadow:0 -8px 40px #23242a1c}dialog::backdrop{background:#23242a66}dialog:before{content:"";display:block;width:32px;height:4px;margin:0 auto 12px;border-radius:4px;background:#dcdcdd}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.dialog-heading h2{margin:4px 0;font-size:22px;font-weight:700;line-height:1.4;letter-spacing:-.5px}.close{width:44px;height:44px;flex-shrink:0;font-size:28px;font-weight:400;color:var(--muted);border-radius:12px}.close:hover{background:var(--surface)}.muted{margin:12px 0 20px;color:var(--muted);font-size:14px;line-height:1.65}.small-note{font-size:12px;line-height:1.6;color:var(--muted);margin:10px 0}.privacy-copy p{font-size:14px;line-height:1.8;color:#48494e;margin:18px 0}
fieldset{border:0;padding:0;margin:24px 0}legend{font-size:15px;font-weight:600;margin-bottom:12px}.tone{display:flex;align-items:center;gap:12px;min-height:72px;margin:8px 0;padding:14px;border:1px solid var(--line);border-radius:12px;cursor:pointer}.tone:has(input:checked){background:var(--blue-soft);border-color:var(--primary)}.tone span{font-size:14px}.tone b{font-weight:600}.tone small{display:block;padding-top:4px;font-size:12px;line-height:1.5;color:var(--muted)}dialog form>label{display:block;font-size:14px;margin:18px 0}dialog textarea,dialog input:not([type=radio]){display:block;width:100%;padding:12px;margin-top:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-size:16px;line-height:1.6;resize:none}dialog textarea::placeholder{color:var(--muted)}.primary{width:100%;min-height:52px;padding:14px;border-radius:12px;background:var(--action);color:#fff;font-size:16px;font-weight:600}.primary:hover{background:var(--blue-ink)}.primary:disabled{opacity:.5}.destructive{background:var(--danger)}.destructive:hover{background:#460a0f}.settings-link,.danger-link,.cancel{display:block;width:100%;min-height:44px;padding:12px;font-size:14px}.settings-link{color:var(--action)}.settings-link:first-of-type{margin-top:8px}.danger-link{color:var(--danger);margin-top:8px}.cancel{margin-top:8px;color:var(--muted)}.toast{position:fixed;left:50%;top:calc(var(--viewport-top,0px) + var(--viewport-height,100dvh) - 80px);transform:translate(-50%,-100%);width:max-content;max-width:min(calc(100% - 32px),calc(var(--app-width) - 32px));padding:12px 18px;border-radius:12px;background:#37383df2;color:#fff;line-height:1.5;font-size:14px;text-align:center;z-index:20;pointer-events:none}
/* Stored history is static. Only an explicitly new user row or waiting indicator enters. */
.message{animation:none}.message.message-enter{animation:appear .22s ease-out}
@keyframes appear{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* Keyboard height changes only the flexible message area, not header spacing. */
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* The first scene stays in chat history; a short question invites a freely typed reply. */
.story-premise{margin:0 2px 14px;color:#646e7d;font-size:13px;line-height:1.65;word-break:keep-all;overflow-wrap:anywhere}
.story-premise p{margin:0}.story-premise p+p{margin-top:5px}.story-premise p:first-child{font-size:14px;font-weight:500;color:#42546e}
.arrival-scene{margin:0 0 20px}
.arrival-scene img{display:block;width:100%;height:auto;border-radius:14px;background:var(--surface)}
/* Opening narration and dialogue share one message, including its avatar and gap. */
.story-message.assistant+.story-message.assistant{margin-top:-12px}
.story-message.assistant+.story-message.assistant .mini-avatar{visibility:hidden}
.opening-follow-up{margin-top:-12px}
.opening-follow-up .mini-avatar{visibility:hidden}
.segmented-reply{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.scene-narration{margin:0;padding:4px 2px;color:var(--narration-ink);font-size:14px;line-height:1.8;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.spoken-dialogue{max-width:100%}
.message.user .segmented-reply{align-items:flex-end;gap:6px}
.message.user .scene-narration{text-align:right;font-size:13px;line-height:1.75;padding:2px 3px}

/* Replies stay quiet while arriving; actions and useful results live with that reply. */
.typing-dots{display:flex;align-items:center;gap:5px;min-height:25px;padding:0 2px}
.typing-dots i{width:5px;height:5px;border-radius:50%;background:var(--muted);animation:typing-pulse 1.25s ease-in-out infinite}
.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}
@keyframes typing-pulse{0%,65%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.reply-actions{position:relative;margin-left:auto}
.reply-actions summary{display:grid;place-items:center;list-style:none;min-width:44px;min-height:36px;margin-top:-4px;border-radius:8px;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;touch-action:manipulation}
.reply-actions summary::-webkit-details-marker{display:none}.reply-actions summary:focus-visible{outline:2px solid var(--primary);outline-offset:1px}
.reply-actions[open] summary{background:var(--surface)}
.reply-action-options{position:absolute;right:0;bottom:100%;z-index:3;display:flex;flex-direction:column;width:158px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--paper);box-shadow:0 4px 18px #23242a1a}
.reply-action-options button{min-height:44px;text-align:left;padding:10px 12px;font-size:13px;border-radius:8px;white-space:nowrap}.reply-action-options button:hover:not(:disabled){background:var(--surface)}.reply-action-options button:disabled{color:var(--muted);opacity:.55}
.artifact-card{min-width:0;max-width:100%;margin-top:14px;padding:0 14px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.artifact-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.artifact-heading h3{font-size:14px;line-height:1.5;font-weight:600;margin:10px 0;overflow-wrap:anywhere;word-break:keep-all}
.artifact-copy{flex-shrink:0;min-width:44px;min-height:44px;padding:10px 0 10px 8px;color:var(--action);font-size:12px}
.artifact-body{font-size:14px;line-height:1.75;margin:0;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;user-select:text}
.artifact-body.collapsed{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.artifact-expand{display:block;min-height:44px;margin-bottom:-8px;padding:10px 0 6px;color:var(--action);font-size:12px}
@media(prefers-reduced-motion:reduce){.typing-dots i{animation:none}}

/* JS preserves reader intent across reply growth, keyboard resize, and repaint. */
.conversation{overflow-anchor:none}
/* The whole suggested dialogue bubble sends together; the pencil edits it. */
.reply-suggestions{display:flex;flex-direction:column;align-items:flex-end;margin:32px 0 0;min-width:0}
#suggestionChoices{width:100%;min-width:0;text-align:right}
.suggestions-toggle{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:6px 12px;border:1px solid #dcdcde;border-radius:22px;background:var(--paper);color:#64676d;font-size:13px;line-height:1.4}.suggestions-toggle[aria-expanded=true]{border-color:#b9d1f6;background:var(--blue-soft);color:#35649e}.suggestions-toggle:disabled{opacity:.45}
.suggestions-toggle svg{width:16px;height:16px}
.suggestion-buttons{display:flex;flex-direction:column;align-items:flex-end;gap:14px;width:100%;min-width:0}
.suggestion-row{display:flex;align-items:center;justify-content:flex-end;width:100%;max-width:100%;min-width:0}
.suggestion-row-enter{animation:appear .3s ease-out both}.suggestion-row-enter:nth-child(2){animation-delay:.07s}
.suggestion-edit{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:0;color:var(--narration-ink);border-radius:50%}
.suggestion-edit svg{width:15px;height:15px}
.suggested-reply{display:flex;align-items:flex-start;gap:8px;flex:0 1 auto;min-width:0;width:fit-content;max-width:calc(100% - 44px);min-height:44px;padding:11px 14px;border:0;border-radius:20px;background:var(--blue-soft);color:#35649e;font-size:15px;line-height:1.65;text-align:left;word-break:keep-all;overflow-wrap:anywhere;transition:background .15s}
.suggested-number{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;margin-top:2px;border-radius:50%;background:#e0ecff;color:#35649e;font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.suggested-content{display:flex;flex-direction:column;gap:4px;min-width:0}
.suggested-dialogue{display:block;max-width:100%}
@media(hover:hover){.suggested-reply:hover:not(:disabled){background:var(--blue-light)}.suggestion-edit:hover:not(:disabled),.suggestions-toggle:hover{background:var(--blue-soft);color:var(--action)}}
.suggested-reply:active:not(:disabled){background:#e3eeff}
.suggestion-edit:active:not(:disabled){background:var(--blue-soft);color:var(--action)}
.suggested-reply:focus-visible{outline:2px solid var(--action);outline-offset:4px}
.suggested-reply:disabled,.suggestion-edit:disabled{opacity:.45}
.suggestion-status{margin:0;padding:3px 0 10px;font-size:12px;line-height:1.6;color:var(--muted)}
.suggestion-retry{min-height:44px;padding:6px 0;color:var(--narration-ink);font-size:12px;text-decoration:underline;text-underline-offset:3px}
@media(max-width:360px){.suggested-reply{padding:10px 12px}}

/* Portraits open the character's own profile, separate from account settings. */
.header-friend.profile-entry{padding:0;text-align:left;min-height:52px;border-radius:12px}
.header-friend[data-pending]{visibility:hidden}
.header-friend .avatar{display:block}
.header-friend .friend-label{display:block;min-width:0}
.header-friend #friendName{display:block;color:var(--ink);font-size:18px;font-weight:700;line-height:24px;margin:0 0 2px;overflow:hidden;text-overflow:ellipsis}
.header-friend .friend-role{display:flex;align-items:center;gap:4px}
.message-profile-entry{position:relative;display:block;width:44px;height:44px;flex-shrink:0;margin:-7px;padding:7px;border-radius:50%}
.message-profile-entry .mini-avatar{display:block}
.opening-follow-up .message-profile-entry,.story-message.assistant+.story-message.assistant .message-profile-entry{visibility:hidden}
@media(hover:hover){.profile-entry:hover .avatar,.message-profile-entry:hover .mini-avatar{filter:brightness(.96)}}
:root .teaser-return { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; gap:8px; padding:10px 20px; color:#6c83a6; background:#f5f8ff; font-size:12px; }
:root .teaser-return[hidden], :root .prequel-label[hidden] { display:none; }
:root .teaser-return button { padding:7px 0; border:0; background:none; color:#376cb4; font:inherit; cursor:pointer; }
:root .prequel-label { margin:20px 0 4px; text-align:center; font-size:14px; font-weight:600; color:#5076b0; }