:root{--color-bg: #120d0b;--color-surface: #1f1814;--color-surface-light: #2e241e;--color-primary: #ff8c42;--color-primary-glow: #ff8c4240;--color-secondary: #ffd27d;--color-text-main: #f3e9e1;--color-text-muted: #a69b93;--shadow-warm: 0 4px 20px -2px rgba(255, 140, 66, .15);--shadow-card: 0 8px 30px rgba(0, 0, 0, .3);--radius-lg: 16px;--radius-md: 12px;--radius-sm: 8px;font-family:Outfit,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;background-color:var(--color-bg);color:var(--color-text-main)}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background:radial-gradient(circle at 50% 0%,#2a1f18 0%,var(--color-bg) 70%)}#root{width:100%;max-width:1280px;margin:0 auto;padding:2rem;text-align:center}button{border-radius:var(--radius-md);border:1px solid transparent;padding:.8em 1.5em;font-size:1em;font-weight:600;font-family:inherit;background-color:var(--color-surface-light);color:var(--color-primary);cursor:pointer;transition:all .25s}button:hover{background-color:var(--color-primary);color:var(--color-bg);box-shadow:var(--shadow-warm);border-color:var(--color-primary)}input{background-color:var(--color-surface);border:1px solid var(--color-surface-light);border-radius:var(--radius-md);padding:.8em;color:var(--color-text-main);font-family:inherit;font-size:1em;transition:border-color .2s}input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-glow)}.app-container{width:100%;max-width:800px;margin:0 auto;height:80vh;display:flex;flex-direction:column}.card{background:var(--color-surface);padding:3rem;border-radius:var(--radius-lg);box-shadow:var(--shadow-card);max-width:400px;margin:auto;width:100%}.chat-screen{display:flex;flex-direction:column;height:100%;background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);border:1px solid var(--color-surface-light)}.chat-header{padding:1.5rem;background:#1e1814f2;border-bottom:1px solid var(--color-surface-light);display:flex;justify-content:space-between;align-items:center}.chat-header h2{margin:0;font-weight:600;color:var(--color-primary)}.user-badge{font-size:.9em;color:var(--color-text-muted);background:var(--color-surface-light);padding:.4em .8em;border-radius:var(--radius-sm)}.messages-area{flex:1;padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}.empty-state{text-align:center;margin-top:auto;margin-bottom:auto;color:var(--color-text-muted);opacity:.5}.message{display:flex;flex-direction:row;max-width:80%;gap:.5rem;margin-bottom:1rem}.my-message{align-self:flex-end;flex-direction:row-reverse}.other-message{align-self:flex-start}.message-avatar-container{display:flex;align-items:flex-end}.user-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--color-surface-light)}.user-avatar-placeholder{width:32px;height:32px;border-radius:50%;background:var(--color-primary);color:var(--color-bg);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem}.message-content-wrapper{display:flex;flex-direction:column;max-width:100%}.message-bubble{padding:1rem;border-radius:var(--radius-md);position:relative}.my-message .message-bubble{background:var(--color-primary);color:var(--color-bg);border-bottom-right-radius:2px}.other-message .message-bubble{background:var(--color-surface-light);border-bottom-left-radius:2px}.message-info{display:flex;justify-content:space-between;font-size:.95em;font-weight:700;margin-bottom:.4em;opacity:1}.time{margin-left:.8em}.input-area{padding:1.5rem;background:var(--color-surface);border-top:1px solid var(--color-surface-light);display:flex;gap:.8rem}.input-area input{flex:1}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-surface-light);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-primary-glow)}.attach-btn{background:none;border:none;font-size:1.5rem;cursor:pointer;margin-right:10px;color:#fa5;transition:transform .2s}.attach-btn:hover{transform:scale(1.1)}.typing-indicator{position:absolute;bottom:80px;left:20px;color:#888;font-size:.8rem;font-style:italic;background:#0000004d;padding:5px 10px;border-radius:10px;pointer-events:none;animation:fadeIn .3s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.attach-btn.active{color:var(--color-primary);border-color:var(--color-primary);background:var(--color-primary-glow)}.message-image{max-width:100%;border-radius:var(--radius-sm);margin-bottom:.5rem;display:block}.delete-btn{position:absolute;top:-8px;right:20px;background:#f44;width:18px;height:18px;border-radius:50%;padding:0;font-size:.7rem;line-height:1;border:1px solid var(--color-bg);cursor:pointer;display:none;align-items:center;justify-content:center;z-index:5;color:#fff}.pin-btn{position:absolute;top:-8px;right:-8px;background:var(--color-surface-light);width:18px;height:18px;border-radius:50%;padding:0;font-size:.7rem;line-height:1;border:1px solid var(--color-bg);cursor:pointer;display:none;align-items:center;justify-content:center;z-index:5}.message-bubble:hover .delete-btn{display:flex}.join-logo{width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:1rem;border:3px solid var(--color-primary);box-shadow:0 0 20px #ff45004d}.avatar-upload{display:flex;flex-direction:column;align-items:center;cursor:pointer;margin-bottom:1rem}.avatar-preview{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--color-primary);box-shadow:0 0 10px #0003}.avatar-placeholder{width:80px;height:80px;border-radius:50%;background:var(--color-surface-light);display:flex;align-items:center;justify-content:center;font-size:2rem;border:2px dashed var(--color-text-muted)}.avatar-label{margin-top:.5rem;font-size:.9rem;color:var(--color-primary)}.header-logo{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--color-bg)}