:root{
  --bg:#06111f;--panel:#0b1b2e;--panel2:#10243b;--line:#2d4f6b;--text:#eff8ff;
  --muted:#a9bfd0;--cyan:#58dcff;--mint:#55ebc4;--pink:#ff8bbf;--gold:#ffd27a;
  font-family:"Pretendard","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;background:var(--bg);color:var(--text);overflow:hidden}
button,input,textarea,select{font:inherit}.app-shell{height:100dvh;display:grid;grid-template-columns:minmax(420px,44%) 1fr;gap:18px;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));background:radial-gradient(circle at 30% 20%,#21365a 0,transparent 34%),linear-gradient(140deg,#081528,#050d18 70%)}
.avatar-zone,.conversation-zone{min-height:0;border:1px solid rgba(100,185,230,.28);border-radius:30px;background:linear-gradient(160deg,rgba(16,37,61,.96),rgba(5,17,30,.98));box-shadow:0 20px 70px rgba(0,0,0,.38);overflow:hidden}
.avatar-zone{position:relative;display:flex;flex-direction:column;padding:18px}.brand-row{display:flex;align-items:center;justify-content:space-between;gap:15px;z-index:2}.brand-row b{font-size:1.12rem;letter-spacing:.1em}.brand-row span{display:block;color:var(--muted);font-size:.72rem;margin-top:3px}.stage-pill{border:1px solid #397698;background:#0b2a43;border-radius:999px;padding:8px 12px;color:var(--cyan);font-size:.78rem;white-space:nowrap}
.portrait-frame{position:relative;flex:1;min-height:0;margin:14px 0;border-radius:26px;overflow:hidden;background:#121c2e;box-shadow:inset 0 0 0 1px rgba(95,220,255,.25)}.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;transform:scale(1.01);transition:filter .4s ease;animation:breath 6s ease-in-out infinite}.portrait-light{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 58%,rgba(4,13,25,.62)),radial-gradient(circle at 55% 45%,transparent 36%,rgba(5,15,27,.22) 86%)}
.emotion-label{position:absolute;left:18px;bottom:18px;padding:8px 12px;border-radius:999px;background:rgba(7,20,35,.76);border:1px solid rgba(110,220,255,.45);backdrop-filter:blur(12px);font-size:.8rem;color:#e9f9ff}.mouth-rig{position:absolute;left:50.1%;top:50.2%;width:9.2%;height:4%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}.mouth-rig i{position:absolute;inset:20% 5%;border-radius:50%;background:radial-gradient(ellipse at center,#5d1e32 0,#24101a 70%);box-shadow:inset 0 1px 3px rgba(255,185,196,.5);animation:mouth .24s ease-in-out infinite alternate}.listening-rings{position:absolute;inset:0;pointer-events:none;display:none}.listening-rings i{position:absolute;left:50%;top:50%;width:60%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(80,239,204,.42);transform:translate(-50%,-50%);animation:ring 2.4s ease-out infinite}.listening-rings i:nth-child(2){animation-delay:.8s}.listening-rings i:nth-child(3){animation-delay:1.6s}
.app-shell[data-speaking="true"] .mouth-rig{opacity:.72}.app-shell[data-speaking="true"] .portrait-frame img{animation:speakingBob .65s ease-in-out infinite}.app-shell[data-emotion="happy"] .portrait-frame{box-shadow:0 0 42px rgba(255,139,191,.3),inset 0 0 0 1px rgba(255,139,191,.35)}.app-shell[data-emotion="curious"] .portrait-frame{box-shadow:0 0 42px rgba(255,210,122,.25),inset 0 0 0 1px rgba(255,210,122,.42)}.app-shell[data-emotion="thinking"] .portrait-frame img{animation:thinking 5s ease-in-out infinite}.app-shell[data-emotion="concerned"] .portrait-frame img{filter:saturate(.82) contrast(1.02)}.app-shell.listening .listening-rings{display:block}
.sensor-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.sensor-button,.bottom-nav button,.round-btn,.send-btn,.modal button{border:1px solid #31536d;background:#10263b;color:var(--text);border-radius:14px;padding:12px;cursor:pointer}.sensor-button{font-size:.78rem;white-space:nowrap}.sensor-button.primary,.send-btn{background:linear-gradient(135deg,#0f7cb1,#07547d);border-color:#56d7ff;font-weight:700}.sensor-button.active{border-color:var(--mint);background:#103d3a}.sensor-button .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#516779;margin-right:6px}.sensor-button.active .dot{background:var(--mint);box-shadow:0 0 10px var(--mint)}
.camera-tile{position:absolute;right:28px;top:78px;width:150px;aspect-ratio:4/3;border-radius:15px;overflow:hidden;border:2px solid rgba(84,227,196,.75);background:#050a10;z-index:4}.camera-tile video{width:100%;height:100%;object-fit:cover}.camera-tile.front video{transform:scaleX(-1)}.camera-flip{position:absolute;right:6px;top:6px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(110,232,255,.7);background:rgba(4,18,30,.75);color:#fff;font-size:1.05rem;z-index:3}.privacy-badge{position:absolute;bottom:0;left:0;right:0;padding:5px;background:rgba(1,9,15,.78);font-size:.55rem;color:#83f5d7}
.conversation-zone{display:flex;flex-direction:column;padding:20px}.status-header{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid rgba(91,140,176,.25);padding-bottom:14px}.status-header h1{margin:0;font-size:1.45rem}.status-header p{margin:5px 0 0;color:var(--muted);font-size:.82rem}.status-lights{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.status-lights span{font-size:.67rem;color:#7f98aa}.status-lights i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#526679;margin-right:4px}.status-lights span.on{color:#dffdf5}.status-lights span.on i{background:var(--mint);box-shadow:0 0 10px var(--mint)}
.chat-log{flex:1;min-height:0;overflow:auto;padding:18px 6px;scroll-behavior:smooth}.bubble{display:flex;gap:10px;max-width:88%;margin:0 0 15px}.bubble img{width:38px;height:38px;border-radius:13px;object-fit:cover}.bubble div{padding:12px 14px;border-radius:18px;background:#13283e;border:1px solid rgba(93,145,181,.32)}.bubble b{font-size:.76rem;color:var(--cyan)}.bubble p{margin:5px 0 0;white-space:pre-wrap;line-height:1.55;font-size:.94rem}.bubble.user{margin-left:auto;flex-direction:row-reverse}.bubble.user div{background:#0d567e;border-color:#38a9d9}.bubble.user b{color:#e8fbff}.bubble.system{max-width:100%;opacity:.8}.bubble.system div{background:#152032}.videowrap{position:relative;width:100%;max-width:34rem;aspect-ratio:16/9;margin-top:9px;border-radius:12px;overflow:hidden;background:#000}.videowrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.feedback-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #36566f;border-radius:14px;background:#0e2033;margin-bottom:10px;font-size:.78rem}.feedback-bar button{padding:7px 10px;border-radius:10px;border:1px solid #3b607d;background:#122c44;color:var(--text)}
.composer{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:end}.round-btn{width:48px;height:48px;border-radius:50%;padding:0;font-size:1.2rem}.round-btn.active{background:#1a554e;border-color:var(--mint);animation:pulse 1.2s ease-in-out infinite}.composer textarea{resize:none;max-height:130px;min-height:48px;background:#071625;border:1px solid #31516a;border-radius:17px;color:var(--text);padding:13px 15px;outline:none}.composer textarea:focus{border-color:var(--cyan)}.send-btn{min-height:48px}.bottom-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:11px}.bottom-nav button{font-size:.78rem;padding:10px 8px}
.modal{width:min(560px,calc(100vw - 30px));border:1px solid #3b6887;border-radius:24px;background:#0b1b2d;color:var(--text);box-shadow:0 30px 100px rgba(0,0,0,.65);padding:24px}.modal::backdrop{background:rgba(0,7,15,.74);backdrop-filter:blur(5px)}.modal h2{margin-top:0}.modal p{color:var(--muted);line-height:1.55}.modal label{display:block;margin:14px 0;color:#dceaf4}.modal input,.modal select{display:block;width:100%;margin-top:7px;padding:12px;border-radius:12px;border:1px solid #36546c;background:#071625;color:var(--text)}.modal input[type=range]{padding:0}.modal .check{display:flex;gap:10px;align-items:center}.modal .check input{width:auto;margin:0}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.modal .danger{margin-right:auto;border-color:#7b3a4d;color:#ffc4d1}.error{color:#ff9bad!important}.note{font-size:.75rem}.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);padding:12px 17px;border-radius:14px;background:#102b42;border:1px solid #4d99bf;box-shadow:0 12px 50px rgba(0,0,0,.5);z-index:30}
@keyframes breath{0%,100%{transform:scale(1.01) translateY(0)}50%{transform:scale(1.015) translateY(-2px)}}@keyframes speakingBob{0%,100%{transform:scale(1.012) translateY(0)}50%{transform:scale(1.018) translateY(-3px)}}@keyframes mouth{from{transform:scaleY(.45)}to{transform:scaleY(1.2)}}@keyframes thinking{0%,100%{transform:scale(1.01) translateX(0)}50%{transform:scale(1.018) translateX(-3px)}}@keyframes ring{0%{transform:translate(-50%,-50%) scale(.65);opacity:.7}100%{transform:translate(-50%,-50%) scale(1.4);opacity:0}}@keyframes pulse{50%{box-shadow:0 0 18px rgba(85,235,196,.42)}}
@media(max-width:820px) and (orientation:portrait){html,body{overflow:auto}.app-shell{height:auto;min-height:100dvh;grid-template-columns:1fr;padding:9px;gap:10px}.avatar-zone{height:49dvh;min-height:460px}.conversation-zone{height:calc(100dvh - 30px);min-height:620px}.portrait-frame{margin:10px 0}.sensor-strip{gap:5px}.sensor-button{padding:9px 3px;font-size:.66rem}.camera-tile{width:115px}.status-header{align-items:flex-start}.status-lights{gap:6px}.bottom-nav{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1024px) and (orientation:landscape){.app-shell{grid-template-columns:42% 1fr;gap:10px;padding:9px}.avatar-zone,.conversation-zone{border-radius:22px}.avatar-zone{padding:12px}.conversation-zone{padding:14px}.portrait-frame{margin:8px 0}.brand-row span{display:none}.sensor-button{padding:8px 3px;font-size:.65rem}.status-header p{display:none}.chat-log{padding:10px 4px}.bubble{margin-bottom:9px}.bubble p{font-size:.82rem}.composer textarea{min-height:42px}.bottom-nav button{padding:7px 3px;font-size:.68rem}}