.message-bubble{display:flex;margin-bottom:16px}.message-bubble.user{justify-content:flex-end}.message-bubble.bot{justify-content:flex-start}.avatar-container{position:relative;display:flex;align-items:center;justify-content:center;min-width:60px;width:60px;height:60px;border-radius:50%;border:2px solid white;box-shadow:0 4px 6px rgba(0,0,0,.1);overflow:hidden;margin-right:12px;background-color:white;flex-shrink:0}.avatar-image{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}.avatar-placeholder-container{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#f0f0f0}.avatar-placeholder{height:20px;width:20px;color:#38b2ac;margin:auto}.message-content{display:flex;flex-direction:column;max-width:95%;color:#fff}.message-content.user{align-items:flex-end}.message-content.bot{align-items:flex-start}.message-text{padding:12px 20px;border-radius:20px;box-shadow:0 2px 4px rgba(0,0,0,.1);background-color:#379683;color:#F9F9F4;font-weight:600}.message-timestamp{font-size:11px;margin-top:4px;color:#718096;font-weight:500;padding:0 8px}.user-avatar{width:40px;height:40px;border-radius:50%;background-color:black;color:white;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:12px}*,:after,:before{box-sizing:border-box}.chatbox-container{display:flex;flex-direction:column;height:100%;width:100%;background:linear-gradient(to bottom right,#f0fdf4,#d9f99d,#bef264);border:1px solid #86efac;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);overflow:hidden;z-index:10;max-height:calc(100dvh - 20px);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.chatbox-header{padding:16px;text-align:center;background:#1d3233;border-bottom:1px solid #86efac;box-shadow:0 2px 4px rgba(0,0,0,.1);z-index:20;position:relative}.chatbox-header h1{font-size:24px;font-weight:700;color:#c6de64}.chatbox-messages{flex-grow:1;overflow-y:auto;padding:16px;background:linear-gradient(180deg,#f0fdf4,#d9f99d);position:relative}.messages-wrapper{display:flex;flex-direction:column;gap:16px}.typing-indicator-wrapper{display:flex;justify-content:flex-start;margin-bottom:8px}.typing-indicator span{display:inline-block;width:8px;height:8px;margin-right:4px;background-color:#4ade80;border-radius:50%;animation:typing 1.5s infinite}.typing-indicator span:nth-child(2){animation-delay:.2s}.typing-indicator span:nth-child(3){animation-delay:.4s}@keyframes typing{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.chatbox-input-container{position:fixed;left:0;right:0;bottom:0;width:100vw;max-width:100vw;z-index:30;padding:12px;border-top:1px solid #86efac;background:linear-gradient(90deg,#d9f99d,#bef264);box-shadow:inset 0 2px 4px rgba(0,0,0,.1)}.chatbox-form{display:flex;align-items:flex-end;gap:8px;width:100%}.chatbox-avatar{width:40px;height:40px;background-color:#064e3b;color:white;font-size:18px;font-weight:700;border-radius:50%;justify-content:center;flex-shrink:0}.chatbox-avatar,.chatbox-input-wrapper{display:flex;align-items:center;box-shadow:0 2px 4px rgba(0,0,0,.1)}.chatbox-input-wrapper{flex-grow:1;width:100%;min-width:0;background-color:white;border-radius:24px;border:1px solid #86efac;padding:0 16px}.chatbox-input{width:100%;min-width:0;min-height:40px;max-height:100px;padding:10px 0;border:none;border-radius:24px;outline:none;resize:none;font-size:16px;color:#064e3b;background:transparent;overflow-y:auto;line-height:1.4}.chatbox-input::placeholder{color:#86efac}.chatbox-send-button{padding:10px 16px;border:none;border-radius:24px;background-color:#4ade80;color:white;font-weight:700;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.1);transition:background-color .3s ease;flex-shrink:0;min-width:60px;height:42px;margin:0;box-sizing:border-box}.chatbox-send-button:hover{background-color:#22c55e}.chatbox-send-button.disabled{background-color:#d1d5db;color:#9ca3af;cursor:not-allowed}@media (max-width:768px){.chatbox-container{height:100dvh;width:100vw;border-radius:0;max-height:100dvh}.chatbox-header{padding:12px}.chatbox-messages{padding:12px 12px 80px}.chatbox-input-container{padding:8px;width:100vw;max-width:100vw}.chatbox-form{gap:8px;width:100%}.chatbox-avatar{width:36px;height:36px;font-size:16px}.chatbox-send-button{min-width:50px;height:40px;margin:0}.chatbox-input,.chatbox-input-wrapper{width:100%;min-width:0}}