/* layout: one-column 1:1 messenger; newest secretary message gets her animated full body, older ones a face avatar */
:root{
  --bg:#F3F5F8; --stage:#DFE8F2; --floor:#C9D6E4; --panel:#FFFFFF; --fg:#1E2633; --muted:#6B7686;
  --me:#2F5FA8; --me-fg:#FFFFFF; --her:#FFFFFF; --her-fg:#1E2633; --line:#D8DEE7; --accent:#2F5FA8; --dot:#3DA06A; --busy:#D79A2B; --bad:#C94A4A;
  --voice:"Gowun Dodum","Noto Sans KR",system-ui,sans-serif; --body:"Noto Sans KR",system-ui,sans-serif;
  --sprite:url("/img/outfits/weekday-01.webp");
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#12161D; --stage:#1B2533; --floor:#243245; --panel:#171C24; --fg:#E6EAF0; --muted:#94A0B2;
  --me:#3E73C4; --me-fg:#FFFFFF; --her:#222A36; --her-fg:#E6EAF0; --line:#2A3340; --accent:#7FA8E8; --dot:#4CC183; --busy:#E8BE6A; --bad:#E07070; color-scheme:dark}}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:15px;-webkit-tap-highlight-color:transparent}
button{font:inherit}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sprite{background-image:var(--sprite);background-repeat:no-repeat;background-size:700% 100%}

.boot{height:100%;display:flex;align-items:center;justify-content:center}
.boot-dot{width:10px;height:10px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}

/* 로그인 */
.login{height:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--panel);border-left:1px solid var(--line);border-right:1px solid var(--line);padding-block:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.lg-top{font-family:var(--voice);font-size:15px;color:var(--muted);display:flex;align-items:center;gap:6px}
.lg-say{position:relative;max-width:320px;background:var(--her);color:var(--her-fg);border:1px solid var(--line);border-radius:18px;padding:12px 16px;font-family:var(--voice);font-size:17px;line-height:1.6;text-align:center;word-break:keep-all;min-height:3.2em}
.lg-say::after{content:"";position:absolute;left:50%;bottom:-8px;width:14px;height:14px;background:var(--her);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
.lg-stage{position:relative;width:150px;height:250px;flex:none}
.lg-stage .floor{width:96px;height:12px}
.lg-her{position:absolute;left:50%;bottom:4px;height:240px;aspect-ratio:238/441;transform:translateX(-50%);transform-origin:50% 100%;animation:breathe 3.2s ease-in-out infinite}
.lg-her.shake{animation:shake .45s ease-in-out}
.lg-her.hop{animation:hop .5s ease-out 2}
.lg-form{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px}
.lg-row{display:flex;gap:8px}
.lg-row input{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:11px 16px;outline:none;letter-spacing:.15em}
.lg-row input::placeholder{letter-spacing:normal}
.lg-row input:disabled{opacity:.6}
.lg-row button{background:var(--me);color:var(--me-fg);border:0;border-radius:22px;padding:0 18px;cursor:pointer;white-space:nowrap}
.lg-row button:disabled{opacity:.5;cursor:default}
.lg-dots{display:flex;justify-content:center;gap:6px;min-height:8px}
.lg-dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.lg-dots i.x{background:var(--bad)}

/* 대화방 */
.app{height:100%;max-width:480px;margin:0 auto;display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.app.enter{animation:enter .45s ease-out}
.top{display:flex;align-items:center;gap:10px;padding-block:calc(10px + env(safe-area-inset-top)) 10px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));border-bottom:1px solid var(--line)}
.top .name{font-family:var(--voice);font-size:18px}
.nm{display:flex;align-items:center;gap:4px}
.pen{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;padding:0}
.pen:hover{background:var(--bg);color:var(--fg)}
.name-in{font-family:var(--voice);font-size:17px;color:var(--fg);background:var(--bg);border:1px solid var(--accent);border-radius:6px;padding:1px 6px;width:9em;outline:none}
.st{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.st i{width:7px;height:7px;border-radius:50%;background:var(--dot);display:inline-block}
.st i.busy{background:var(--busy)}
.st i.off{background:var(--bad)}
.log{flex:1;min-height:0;overflow-y:auto;background:var(--panel);display:flex;flex-direction:column;gap:10px;padding-block:14px;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));overscroll-behavior:contain}
.log>:first-child{margin-top:auto}
.row{display:flex;gap:8px;align-items:flex-end;min-width:0}
.row.me{justify-content:flex-end}
.who{flex:none;width:36px;position:relative;transition:width .25s ease}
.who.big{width:74px;height:156px}
.who.big .av{display:none}
.av{width:36px;height:36px;border-radius:50%;flex:none;background-color:var(--stage);background-image:var(--sprite);background-repeat:no-repeat;background-size:364px 96px;background-position:-8px -1px;border:1px solid var(--line)}
.fig{position:absolute;inset:0}
body>.fig{display:none}
.floor{position:absolute;left:50%;bottom:0;width:56px;height:8px;transform:translateX(-50%);border-radius:50%;background:var(--floor)}
.her{position:absolute;left:50%;bottom:3px;height:150px;aspect-ratio:238/441;transform:translateX(-50%);transform-origin:50% 100%}
.her.idle{animation:breathe 3.2s ease-in-out infinite}
.her.think{animation:sway 2.4s ease-in-out infinite}
.her.talk{animation:bob .36s ease-in-out infinite}
.her.hop{animation:hop .5s ease-out 2}
.think-dots{position:absolute;z-index:2;left:50px;bottom:150px;display:flex;gap:5px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 11px}
.think-dots span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.think-dots span:nth-child(2){animation-delay:.2s}.think-dots span:nth-child(3){animation-delay:.4s}
.b{max-width:78%;padding:9px 13px;border-radius:16px;line-height:1.6;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.her-b{background:var(--her);color:var(--her-fg);border:1px solid var(--line);border-bottom-left-radius:4px;font-family:var(--voice);font-size:16px}
.her-b a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.rcard{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg);font-family:var(--body);font-size:14px;display:flex;flex-direction:column;gap:6px}
.rc-title{font-size:12px;color:var(--muted)}
.rc-old{color:var(--muted);text-decoration:line-through}
.rc-new{color:var(--fg);font-weight:500;white-space:pre-wrap}
.rc-del{text-decoration:line-through}
.rc-row{display:flex;gap:6px;flex-wrap:wrap}
.rc-row input{flex:1;min-width:110px;font:inherit;font-size:15px;color:var(--fg);background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:6px 12px;outline:none}
.rc-row button{border:0;border-radius:16px;padding:6px 14px;cursor:pointer;font-size:14px}
.rc-ok{background:var(--me);color:var(--me-fg)}
.rc-no{background:transparent;color:var(--muted);border:1px solid var(--line)!important}
.rc-row button:disabled{opacity:.5}
.rc-msg{font-size:12px;color:var(--bad);min-height:0}
.rc-msg:empty{display:none}
.rc-end{font-size:13px;color:var(--muted)}
.rc-end.done{color:var(--dot)}
.me-b{background:var(--me);color:var(--me-fg);border-bottom-right-radius:4px}
.b.has-cp{position:relative;padding-right:34px}
.cp{position:absolute;top:5px;right:5px;width:24px;height:24px;display:grid;place-items:center;padding:0;border:0;border-radius:7px;background:transparent;color:inherit;opacity:.45;cursor:pointer}
.cp svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cp:hover,.cp:focus-visible{opacity:.9;background:color-mix(in srgb,currentColor 12%,transparent)}
.cp.ok{opacity:1;color:var(--dot)}
.me-b .cp.ok{color:inherit}
.day{align-self:center;font-size:12px;color:var(--muted);background:var(--bg);border-radius:999px;padding:3px 12px}
.time{font-size:11px;color:var(--muted);flex:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-block:0 8px}
.chips button{white-space:nowrap;flex:none;font-size:13px;background:transparent;color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer}
.bar{display:flex;gap:8px;padding-block:10px calc(10px + env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));border-top:1px solid var(--line)}
.bar input{flex:1;min-width:0;font:inherit;font-size:16px;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:9px 14px;outline:none}
.bar button{background:var(--me);color:var(--me-fg);border:0;border-radius:20px;padding:0 16px;cursor:pointer}
.bar button:disabled{opacity:.5}

/* 캐릭터 크게 보기 (누르면 열고 다시 누르면 닫는다) */
.fig,.av{cursor:zoom-in}
.zoom{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(14,19,27,.62);cursor:zoom-out;animation:zfade .2s ease-out;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
.zoom-stage{position:relative;height:min(76vh,640px);max-width:92vw;aspect-ratio:340/630}
.zoom-her{position:absolute;inset:0;background-repeat:no-repeat;background-size:700% 100%;transform-origin:50% 100%;animation:zbreathe 3.2s ease-in-out infinite}
.zoom-floor{position:absolute;left:50%;bottom:0;width:60%;height:4%;transform:translateX(-50%);border-radius:50%;background:rgba(255,255,255,.18)}
.zoom-name{font-family:var(--voice);font-size:20px;color:#FFFFFF}
@keyframes zfade{from{opacity:0}to{opacity:1}}
@keyframes zbreathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.01)}}
@keyframes breathe{0%,100%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(1.012)}}
@keyframes sway{0%,100%{transform:translateX(-50%) rotate(-1.2deg)}50%{transform:translateX(-50%) rotate(1.2deg)}}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-2px)}}
@keyframes hop{0%,100%{transform:translateX(-50%) translateY(0)}40%{transform:translateX(-50%) translateY(-10px)}}
@keyframes shake{0%,100%{transform:translateX(-50%)}20%{transform:translateX(calc(-50% - 6px))}40%{transform:translateX(calc(-50% + 6px))}60%{transform:translateX(calc(-50% - 4px))}80%{transform:translateX(calc(-50% + 4px))}}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@keyframes enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.zoom,.zoom-her,.her,.lg-her,.think-dots span,.app.enter,.boot-dot{animation:none!important}}