*{box-sizing:border-box}body{margin:0;font-family:Hiragino Sans,Yu Gothic,sans-serif;background:#f5f3ef;color:#2c2c2c}.app{display:flex;flex-direction:column;height:100vh}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background:#fff;border-bottom:1px solid #e0ddd6}.screen{max-width:480px;margin:0 auto;padding:24px;width:100%}.login-screen{display:flex;flex-direction:column;gap:12px;margin-top:80px}.login-screen input{padding:10px;border:1px solid #ccc;border-radius:6px}.login-screen button[type=submit]{padding:10px;background:#7b6b53;color:#fff;border:none;border-radius:6px}.link-button{background:none;border:none;color:#7b6b53;text-decoration:underline;cursor:pointer}.error{color:#c0392b;font-size:14px}.chat-screen{display:flex;flex-direction:column;height:100%;padding:0;max-width:600px}.chat-header{display:flex;align-items:center;gap:12px;padding:8px 16px;background:#fff;border-bottom:1px solid #e0ddd6;font-size:13px}.phase-badge{background:#7b6b53;color:#fff;padding:2px 10px;border-radius:12px}.usage{flex:1;color:#666}.upgrade-banner{background:#fff3cd;padding:8px 16px;font-size:13px;display:flex;justify-content:space-between;align-items:center}.messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}.message{padding:10px 14px;border-radius:12px;max-width:80%;line-height:1.5}.message.assistant{background:#fff;align-self:flex-start}.message.user{background:#7b6b53;color:#fff;align-self:flex-end}.chat-input{display:flex;gap:8px;padding:12px;background:#fff;border-top:1px solid #e0ddd6}.chat-input input{flex:1;padding:10px;border:1px solid #ccc;border-radius:6px}.chat-input button{padding:10px 18px;background:#7b6b53;color:#fff;border:none;border-radius:6px}.avatar-area{background:#fff;padding:8px 16px 4px;text-align:center;border-bottom:1px solid #e0ddd6}.speak-controls{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:4px}.speak-toggle{background:none;border:1px solid #ccc;border-radius:14px;padding:4px 12px;font-size:12px;cursor:pointer}.speed-control{display:flex;align-items:center;gap:6px;font-size:12px;color:#666}.speed-control input[type=range]{width:120px;accent-color:#7b6b53}.speed-value{min-width:28px;color:#7b6b53;font-weight:700}.avatar-img-wrap{position:relative;display:inline-block}.avatar-img-clip{width:340px;height:260px;overflow:hidden;border-radius:14px;position:relative;margin:0 auto;box-shadow:0 4px 16px #0002}.avatar-img{width:340px;height:auto;object-fit:cover;object-position:center top;display:block;transition:filter .3s}.avatar-img.talking{filter:brightness(1.04)}.avatar-img.listening{filter:brightness(1.02) saturate(1.1)}.avatar-img.thinking{filter:brightness(.96) saturate(.9)}.mouth-overlay{position:absolute;pointer-events:none;mix-blend-mode:multiply;opacity:.88}.avatar-overlay{position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.sound-wave{display:flex;align-items:flex-end;gap:3px;height:28px}.sound-wave .bar{width:4px;border-radius:2px;background:#7b6b53;animation:wave .8s ease-in-out infinite}.listening-wave .bar{background:#4a90c8}.bar1{animation-delay:0s;height:10px}.bar2{animation-delay:.12s;height:18px}.bar3{animation-delay:.24s;height:26px}.bar4{animation-delay:.12s;height:18px}.bar5{animation-delay:0s;height:10px}@keyframes wave{0%,to{transform:scaleY(.4);opacity:.7}50%{transform:scaleY(1);opacity:1}}.think-dots{display:flex;gap:6px;align-items:center}.think-dots .dot{width:8px;height:8px;border-radius:50%;background:#7b6b53;animation:pulse 1.1s ease-in-out infinite}.avatar-state-label{font-size:11px;color:#7b6b53;margin-top:4px;letter-spacing:.05em}.mic-button{padding:10px 14px;background:#fff;border:1px solid #ccc;border-radius:6px;font-size:16px;cursor:pointer}.mic-button.active{background:#e74c3c;border-color:#e74c3c;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.session-end-screen,.pricing-screen{text-align:center;margin-top:40px}.actions{display:flex;gap:12px;justify-content:center;margin-top:20px}.actions button{padding:10px 16px;background:#7b6b53;color:#fff;border:none;border-radius:6px}.plans{display:flex;gap:16px;justify-content:center;margin-top:20px;flex-wrap:wrap}.plan-card{border:1px solid #ddd;border-radius:10px;padding:16px;width:180px;background:#fff}.plan-card .price{font-size:20px;font-weight:700}.note{font-size:12px;color:#999}.history-screen{display:flex;flex-direction:column;height:100%;padding:0;max-width:600px}.history-list{list-style:none;margin:0;padding:12px;display:flex;flex-direction:column;gap:8px}.history-item{background:#fff;border-radius:10px;padding:14px 16px;cursor:pointer;border:1px solid #e0ddd6;display:flex;gap:12px;align-items:center}.history-item:hover{background:#f9f7f4}.history-date{flex:1;font-size:14px}.history-duration{color:#7b6b53;font-size:13px}.history-count{color:#999;font-size:12px}.history-empty{color:#999;text-align:center;padding:40px 16px}