* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }

body { font-family: 'Plus Jakarta Sans', sans-serif; }

.glass { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); }

.bubble { 
    max-width: 80%; 
    padding: 10px 16px; 
    position: relative; 
    transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    cursor: pointer;
    word-wrap: break-word;
}

.bubble-me { 
    background: #2563eb; 
    color: white; 
    border-radius: 22px 22px 4px 22px; 
    align-self: flex-end;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
}

.bubble-them { 
    background: white; 
    color: #1e293b; 
    border-radius: 22px 22px 22px 4px; 
    align-self: flex-start;
    border: 1px solid #f1f5f9;
}

.avatar-opt { transition: all 0.3s ease; filter: grayscale(100%); opacity: 0.6; }
.active-avatar { border-color: #2563eb !important; filter: grayscale(0%); opacity: 1; transform: scale(1.2); }

.is-blurred { filter: blur(30px); pointer-events: none; }
.seen-list { font-size: 9px; color: #94a3b8; font-weight: 500; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); z-index: 300; display: flex; align-items: center; justify-content: center; }
.modal-content { background: white; width: 90%; max-width: 320px; border-radius: 40px; }

@keyframes fadeInUp { 
    from { opacity: 0; transform: translateY(20px) scale(0.95); } 
    to { opacity: 1; transform: translateY(0) scale(1); } 
}
.animate-ui { animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); }