:root{--primary-color: #06c755;--bg-color: #7494c0;--text-color: #333;--bubble-ai: #ffffff;--bubble-user: #85e249;--font-family: "Inter", "Noto Sans JP", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:#f0f0f0;color:var(--text-color);display:flex;justify-content:center;align-items:center;height:100vh;overflow:hidden}#root{width:100%;max-width:500px;height:100%;max-height:900px;background-color:var(--bg-color);box-shadow:0 10px 30px #0003;display:flex;flex-direction:column;position:relative}.glass{background:#fff3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.header{height:60px;background-color:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;align-items:center;padding:0 15px;color:#fff;border-bottom:1px solid rgba(255,255,255,.1);z-index:10}.avatar{width:40px;height:40px;border-radius:50%;background-color:#ddd;margin-right:12px;object-fit:cover;border:1.5px solid rgba(255,255,255,.5)}.header-info{display:flex;flex-direction:column}.header-name{font-weight:700;font-size:1.1rem}.header-status{font-size:.75rem;opacity:.8}.chat-container{flex:1;overflow-y:auto;padding:15px;display:flex;flex-direction:column;gap:15px;scroll-behavior:smooth}.chat-container::-webkit-scrollbar{width:4px}.chat-container::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:10px}.message{max-width:80%;padding:10px 14px;border-radius:18px;font-size:.95rem;line-height:1.4;position:relative;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.message.ai{align-self:flex-start;background-color:var(--bubble-ai);color:#000;border-top-left-radius:2px}.message.user{align-self:flex-end;background-color:var(--bubble-user);color:#000;border-top-right-radius:2px}.input-area{padding:15px;background-color:#fff;display:flex;gap:10px;align-items:center}.input-area input{flex:1;padding:12px 15px;border:1px solid #ddd;border-radius:25px;outline:none;font-size:1rem}.input-area button{background-color:var(--primary-color);color:#fff;border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:transform .2s}.input-area button:active{transform:scale(.9)}.settings-btn{background:none;border:none;color:#fff;cursor:pointer;margin-left:auto;opacity:.7;transition:opacity .2s}.settings-btn:hover{opacity:1}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:100}.modal{background:#fff;padding:25px;border-radius:15px;width:90%;max-width:400px;display:flex;flex-direction:column;gap:15px}.modal h2{font-size:1.2rem;margin-bottom:5px}.modal input{padding:10px;border:1px solid #ddd;border-radius:8px;font-size:.9rem}.modal-buttons{display:flex;justify-content:flex-end;gap:10px}.modal-buttons button{padding:8px 15px;border-radius:5px;border:none;cursor:pointer}.save-btn{background-color:var(--primary-color);color:#fff}.cancel-btn{background-color:#eee}.typing-indicator{display:flex;gap:4px;padding:10px;align-self:flex-start}.dot{width:6px;height:6px;background:#fff9;border-radius:50%;animation:bounce 1.4s infinite ease-in-out both}.dot:nth-child(1){animation-delay:-.32s}.dot:nth-child(2){animation-delay:-.16s}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}