/* ═══════ Oro Agent — Shared Styles ═══════ */

html { scroll-behavior: smooth; }
* { box-sizing: border-box; }

/* Chat bubble animations */
@keyframes bubble-in {
    from { opacity: 0; transform: translateY(8px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.bubble-animate { animation: bubble-in 0.3s ease-out forwards; }
@keyframes typing-dot {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}
.typing-dot-1 { animation: typing-dot 1s ease-in-out infinite; }
.typing-dot-2 { animation: typing-dot 1s ease-in-out 0.2s infinite; }
.typing-dot-3 { animation: typing-dot 1s ease-in-out 0.4s infinite; }

/* Glass card — reusable */
.glass-card {
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* Card hover */
.card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(59,130,246,0.08); }

/* Pricing popular badge */
.pricing-popular { border: 1.5px solid rgba(59,130,246,0.35) !important; position: relative; }
.pricing-popular::before {
    content: 'Most Popular';
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #3B82F6, #60A5FA);
    color: white; padding: 3px 12px; border-radius: 20px;
    font-size: 0.65rem; font-weight: 700; white-space: nowrap;
}

/* User avatar */
.user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid #3B82F6; cursor: pointer; }

/* Profile dropdown */
.profile-dropdown {
    position: absolute; top: 50px; right: 0; width: 300px;
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
    border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.7); z-index: 100; opacity: 0; visibility: hidden;
    transform: translateY(-8px); transition: all 0.2s ease;
}
.profile-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.profile-usage-bar { height: 6px; border-radius: 3px; background: #F0F2F8; overflow: hidden; }
.profile-usage-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.profile-action { display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; transition: opacity 0.15s; text-decoration: none; }
.profile-action:hover { opacity: 0.7; }

/* Glass hero box */
.glass-hero-box {
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(59,130,246,0.08), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* Glass chat bubbles */
.glass-bubble-sent {
    background: linear-gradient(135deg, rgba(59,130,246,0.25), rgba(96,165,250,0.15));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(59,130,246,0.25);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(59,130,246,0.1), inset 0 1px 0 rgba(255,255,255,0.4);
    position: relative;
}
.glass-bubble-sent::after {
    content: '';
    position: absolute; right: -8px; bottom: 6px;
    width: 0; height: 0;
    border-left: 10px solid rgba(59,130,246,0.2);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.glass-bubble-received {
    background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.6);
    position: relative;
}
.glass-bubble-received::after {
    content: '';
    position: absolute; left: -8px; bottom: 6px;
    width: 0; height: 0;
    border-right: 10px solid rgba(255,255,255,0.5);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.glass-typing {
    background: rgba(255,255,255,0.4);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Blue gradient text */
.text-gradient {
    background: linear-gradient(135deg, #3B82F6, #60A5FA);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* All sections clip overflow */
section { overflow: hidden; }

/* Active nav link */
.nav-active { color: #3B82F6 !important; font-weight: 700 !important; }

@media (min-width: 768px) {
    .glass-card { border-radius: 20px; }
    .glass-hero-box { border-radius: 24px; }
}