/* ============================================
   SPYRO DRAGON REALM CHAT THEME v1.0
   Magical fairy-tale aesthetic
   Color Palette: Purple + Gold + Pink + Teal
   ============================================ */

/* =============================================
   PHASE 1: CSS VARIABLES - Spyro Palette
   ============================================= */
body[data-view="chat"] {
    /* Primary - Purple (Spyro's color) */
    --spyro-purple-light: #e8dff5;
    --spyro-purple: #9b59b6;
    --spyro-purple-deep: #8e44ad;
    --spyro-purple-dark: #6c3483;
    --spyro-purple-rich: #a855f7;
    --spyro-purple-vivid: #9333ea;
    --spyro-purple-intense: #7c3aed;
    --spyro-purple-darkest: #6d28d9;

    /* Secondary - Gold/Orange (gems & fire) */
    --spyro-gold: #f39c12;
    --spyro-gold-light: #fdeaa8;
    --spyro-orange: #e67e22;

    /* Accent - Magical colors */
    --spyro-pink: #ff6b9d;
    --spyro-pink-light: #ffe4ed;
    --spyro-teal: #1abc9c;
    --spyro-sky: #87ceeb;
    --spyro-sky-light: #e8f4fc;

    /* Gem colors */
    --gem-red: #e74c3c;
    --gem-green: #2ecc71;
    --gem-blue: #3498db;

    /* Backgrounds */
    --bg-gradient-start: #faf8ff;
    --bg-gradient-end: #f0e6fa;
    --bg-card: rgba(255, 255, 255, 0.85);

    /* Text */
    --text-primary: #4a3728;
    --text-secondary: #7c6a5d;
    --text-light: #a89890;

    /* Shadows */
    --shadow-soft: 0 4px 15px rgba(155, 89, 182, 0.15);
    --shadow-glow: 0 0 20px rgba(155, 89, 182, 0.3);
}

/* =============================================
   PHASE 2: AURORA BOREALIS BACKGROUND
   Magical northern lights effect
   ============================================= */

body[data-view="chat"] {
    background: url('../images/backgrounds/chat/chat.jpg') center center / cover no-repeat fixed !important;
    position: relative;
    overflow: hidden;
}

/* Aurora effects - DISABLED (using background image instead) */
body[data-view="chat"] .aurora-background,
body[data-view="chat"] .aurora-glow-1,
body[data-view="chat"] .aurora-glow-2,
body[data-view="chat"] .aurora-glow-3 {
    display: none !important;
}

/* Kill all pseudo-element overlays */
body[data-view="chat"]::before,
body[data-view="chat"]::after {
    display: none !important;
}

/* Messages container - transparent to show body background */
body[data-view="chat"] #chatMessagesContainer {
    background: transparent !important;
    background-image: none !important;
    position: relative;
    z-index: 1;
}

/* Kill starry night overlays */
body[data-view="chat"] #chatMessagesContainer.chat-starry-night {
    background: transparent !important;
}

body[data-view="chat"] #chatMessagesContainer.chat-starry-night::before,
body[data-view="chat"] #chatMessagesContainer.chat-starry-night::after {
    display: none !important;
}

/* =============================================
   PHASE 17: ANIMATIONS (needed early)
   ============================================= */

@keyframes float-orbs {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(2%, 1%) rotate(2deg); }
    66% { transform: translate(-1%, 2%) rotate(-1deg); }
}

@keyframes shimmer {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

@keyframes sparkle-float {
    0%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
    50% { opacity: 0.8; transform: translateY(-20px) scale(1); }
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

@keyframes gem-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(10deg); }
}

@keyframes message-pop {
    0% { opacity: 0; transform: translateY(10px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes emojiPickerSlideUp {
    0% { opacity: 0; transform: translateX(-50%) translateY(20px) scale(0.95); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* =============================================
   PHASE 3: HEADER STYLING
   Grid layout with centered title
   ============================================= */

body[data-view="chat"] .mobile-chat-header {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 12px !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(250,248,255,0.95) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 2px solid var(--spyro-purple-light) !important;
    box-shadow: 0 4px 20px rgba(155, 89, 182, 0.1) !important;
    position: relative;
}

/* Decorative rainbow line at bottom */
body[data-view="chat"] .mobile-chat-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--spyro-purple) 0%,
        var(--spyro-pink) 25%,
        var(--spyro-gold) 50%,
        var(--spyro-pink) 75%,
        var(--spyro-purple) 100%);
    opacity: 0.7;
}

/* Back button - Purple gradient pill */
body[data-view="chat"] .nordic-back-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: linear-gradient(135deg, var(--spyro-purple) 0%, var(--spyro-purple-deep) 100%) !important;
    border: none !important;
    border-radius: 25px !important;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3) !important;
    transition: all 0.3s ease !important;
}

body[data-view="chat"] .nordic-back-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4) !important;
}

body[data-view="chat"] .nordic-back-btn:active {
    transform: scale(0.95) !important;
}

body[data-view="chat"] .nordic-back-btn span {
    color: white !important;
    font-weight: 600 !important;
}

/* Title container - centered */
body[data-view="chat"] .nordic-title-container {
    justify-self: center !important;
    text-align: center !important;
}

body[data-view="chat"] .nordic-title-glow {
    font-family: 'Fredoka One', 'Quicksand', cursive !important;
    font-size: 18px !important;
    color: var(--spyro-purple-deep) !important;
    text-shadow: 2px 2px 4px rgba(155, 89, 182, 0.2) !important;
}

body[data-view="chat"] .nordic-subtitle {
    font-size: 12px !important;
    color: var(--spyro-pink) !important;
    font-weight: 600 !important;
    margin-top: 2px !important;
}

/* Online status badge */
body[data-view="chat"] .status-badge {
    color: var(--gem-green) !important;
    animation: pulse-dot 2s ease-in-out infinite !important;
}

/* =============================================
   PHASE 4: MESSAGE BUBBLES
   ============================================= */

/* Hide avatars */
body[data-view="chat"] .message-avatar {
    display: none !important;
}

/* Hide spacer divs for grouped messages */
body[data-view="chat"] .chat-message-wrapper > .flex-shrink-0 {
    display: none !important;
}

/* === OWN MESSAGES - Magical Purple Gradient === */
body[data-view="chat"] .message-bubble-with-tail.own-message,
body[data-view="chat"] .message-bubble-container.own-message {
    background: linear-gradient(135deg,
        var(--spyro-purple-rich) 0%,
        var(--spyro-purple-vivid) 30%,
        var(--spyro-purple-intense) 60%,
        var(--spyro-purple-darkest) 100%
    ) !important;
    border: 2px solid rgba(168, 85, 247, 0.4) !important;
    border-radius: var(--chat-bubble-radius, 20px) var(--chat-bubble-radius, 20px) 6px var(--chat-bubble-radius, 20px) !important;
    box-shadow:
        0 4px 20px rgba(147, 51, 234, 0.4),
        0 0 30px rgba(168, 85, 247, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    position: relative;
    overflow: hidden;
}

/* KILL old tail decorations from Nordic theme */
body[data-view="chat"] .message-bubble-with-tail.own-message::after,
body[data-view="chat"] .message-bubble-container.own-message::after {
    display: none !important;
    content: none !important;
}

/* Shimmer effect on own messages */
body[data-view="chat"] .message-bubble-with-tail.own-message::before,
body[data-view="chat"] .message-bubble-container.own-message::before {
    content: none !important;
}

body[data-view="chat"] .own-message .chat-message-text {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    position: relative;
    z-index: 1;
}

body[data-view="chat"] .own-message .chat-message-time {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
    position: relative;
    z-index: 1;
}

/* === OTHER MESSAGES - Solid white with Gold accent === */
body[data-view="chat"] .message-bubble-with-tail.other-message,
body[data-view="chat"] .message-bubble-container.other-message {
    background: linear-gradient(135deg, #ffffff 0%, #fff8e7 100%) !important;
    border: 2px solid var(--spyro-gold) !important;
    border-radius: var(--chat-bubble-radius, 20px) var(--chat-bubble-radius, 20px) var(--chat-bubble-radius, 20px) 6px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* KILL old tail decorations from Nordic theme */
body[data-view="chat"] .message-bubble-with-tail.other-message::after,
body[data-view="chat"] .message-bubble-container.other-message::after {
    display: none !important;
    content: none !important;
}

/* KILL old overlay from Nordic theme */
body[data-view="chat"] .message-bubble-with-tail.other-message::before,
body[data-view="chat"] .message-bubble-container.other-message::before {
    display: none !important;
    content: none !important;
}

body[data-view="chat"] .other-message .chat-message-text {
    color: var(--text-primary) !important;
}

body[data-view="chat"] .other-message .chat-message-time {
    color: var(--text-secondary) !important;
}

/* Message text base */
body[data-view="chat"] .chat-message-text {
    font-family: 'Nunito', sans-serif !important;
    font-size: var(--chat-font-size, 15px) !important;
    line-height: 1.5 !important;
}

/* Message time base */
body[data-view="chat"] .chat-message-time {
    font-family: 'Quicksand', sans-serif !important;
    font-size: var(--chat-time-size, 11px) !important;
}

/* =============================================
   PHASE 5-6: SENDER NAMES & TIMESTAMPS
   ============================================= */

body[data-view="chat"] .chat-message-sender {
    font-family: 'Quicksand', sans-serif !important;
    font-size: var(--chat-sender-size, 13px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    margin-bottom: 3px !important;
    margin-left: 4px !important;
}

body[data-view="chat"] .chat-message-sender span {
    color: #fff !important;
    background: linear-gradient(135deg, #d4a056 0%, #b8860b 100%) !important;
    padding: 3px 10px !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    display: inline-block !important;
}

body[data-view="chat"] .chat-message-sender::before {
    display: none !important;
}

/* Read receipts - Gold */
body[data-view="chat"] .read-receipt-indicator {
    color: var(--spyro-gold) !important;
    text-shadow: none !important;
}

/* =============================================
   PHASE 7-8: QUOTED MESSAGES & MENTIONS
   ============================================= */

/* Quoted message - Other messages */
body[data-view="chat"] .quoted-message-preview {
    background: rgba(155, 89, 182, 0.12) !important;
    border-left: 3px solid var(--spyro-pink) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
    box-shadow: none !important;
}

body[data-view="chat"] .quoted-message-preview * {
    opacity: 1 !important;
}

/* Quoted message - Own messages (gold accent) */
body[data-view="chat"] .own-message .quoted-message-preview {
    background: rgba(255, 255, 255, 0.2) !important;
    border-left-color: var(--spyro-gold) !important;
}

/* Mentions - Pink/Purple gradient pill */
body[data-view="chat"] .mention-highlight {
    background: linear-gradient(135deg, var(--spyro-pink) 0%, var(--spyro-purple) 100%) !important;
    color: white !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-shadow: none !important;
}

/* =============================================
   PHASE 9: REACTIONS
   ============================================= */

body[data-view="chat"] .reaction-button,
body[data-view="chat"] .reactions-container > * {
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, var(--spyro-purple-light) 100%) !important;
    border: 2px solid var(--spyro-purple-light) !important;
    border-radius: 20px !important;
    padding: 4px 10px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

body[data-view="chat"] .reaction-button:hover,
body[data-view="chat"] .reactions-container > *:hover {
    transform: scale(1.1) !important;
    border-color: var(--spyro-purple) !important;
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.3) !important;
}

body[data-view="chat"] .reaction-button:active,
body[data-view="chat"] .reactions-container > *:active {
    transform: scale(1.05) !important;
}

body[data-view="chat"] .reaction-button.active,
body[data-view="chat"] .reactions-container > *.active {
    background: linear-gradient(135deg, var(--spyro-purple) 0%, var(--spyro-pink) 100%) !important;
    border-color: var(--spyro-purple) !important;
    color: white !important;
}

body[data-view="chat"] .reaction-button .reaction-count,
body[data-view="chat"] .reactions-container .reaction-count {
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    color: var(--spyro-purple-deep) !important;
    text-shadow: none !important;
}

body[data-view="chat"] .reaction-button.active .reaction-count,
body[data-view="chat"] .reactions-container > *.active .reaction-count {
    color: white !important;
}

/* =============================================
   PHASE 10-11: INPUT AREA
   ============================================= */

body[data-view="chat"] .chat-input-container {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-top: none !important;
    box-shadow: none !important;
}

body[data-view="chat"] .chat-input-container > div {
    background: transparent !important;
}

/* Input pill wrapper */
body[data-view="chat"] .chat-input-pill-wrapper {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 2px solid rgba(156, 39, 176, 0.3) !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
}

body[data-view="chat"] .chat-input-pill-wrapper:focus-within {
    border-color: rgba(156, 39, 176, 0.5) !important;
    box-shadow: 0 4px 20px rgba(156, 39, 176, 0.25) !important;
}

/* Text input */
body[data-view="chat"] #chatInput,
body[data-view="chat"] .chat-input-pill-field {
    font-family: 'Nunito', sans-serif !important;
    color: var(--text-primary) !important;
    background: transparent !important;
}

body[data-view="chat"] #chatInput::placeholder,
body[data-view="chat"] .chat-input-pill-field::placeholder {
    color: #7c6a5d !important;
    opacity: 1 !important;
}

/* Attach button - Teal */
body[data-view="chat"] .pill-attach-button {
    background: linear-gradient(135deg, var(--spyro-teal) 0%, #16a085 100%) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(26, 188, 156, 0.3) !important;
    transition: all 0.3s ease !important;
}

body[data-view="chat"] .pill-attach-button:hover {
    transform: scale(1.1) !important;
}

body[data-view="chat"] .pill-attach-button span {
    color: white !important;
}

/* Send button - Purple/Pink gradient */
body[data-view="chat"] .pill-send-button {
    background: linear-gradient(135deg, var(--spyro-purple) 0%, var(--spyro-pink) 100%) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.4) !important;
    transition: all 0.3s ease !important;
}

body[data-view="chat"] .pill-send-button:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.5) !important;
}

body[data-view="chat"] .pill-send-button:active {
    transform: scale(0.95) !important;
}

body[data-view="chat"] .pill-send-button span {
    color: white !important;
}

/* =============================================
   PHASE 12: DATE DIVIDER
   ============================================= */

body[data-view="chat"] .flex.items-center.justify-center.my-4 > div {
    font-family: 'Quicksand', sans-serif !important;
    background: linear-gradient(135deg, var(--spyro-purple-light) 0%, #f5e6ff 100%) !important;
    border: 2px solid rgba(155, 89, 182, 0.2) !important;
    border-radius: 20px !important;
    padding: 8px 20px !important;
    color: var(--spyro-purple) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    box-shadow: var(--shadow-soft) !important;
}

/* =============================================
   PHASE 13: SCROLLBAR
   ============================================= */

body[data-view="chat"] #chatMessagesContainer::-webkit-scrollbar {
    width: 8px;
}

body[data-view="chat"] #chatMessagesContainer::-webkit-scrollbar-track {
    background: var(--spyro-purple-light);
    border-radius: 10px;
}

body[data-view="chat"] #chatMessagesContainer::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--spyro-purple), var(--spyro-pink));
    border-radius: 10px;
}

body[data-view="chat"] #chatMessagesContainer::-webkit-scrollbar-thumb:hover {
    background: var(--spyro-purple-deep);
}

/* =============================================
   PHASE 14: ACTION MENU (Bottom Sheet)
   Styles applied via JS, these are overrides
   ============================================= */

body[data-view="chat"] #messageActionMenu {
    /* Backdrop styles via JS */
}

/* =============================================
   PHASE 15: EMOJI PICKER
   ============================================= */

body[data-view="chat"] #emojiPickerPopup {
    background: linear-gradient(135deg, #fff 0%, var(--spyro-purple-light) 100%) !important;
    border: 2px solid var(--spyro-purple-light) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 60px rgba(155, 89, 182, 0.4) !important;
}

/* =============================================
   PHASE 16: LOAD MORE BUTTON
   ============================================= */

body[data-view="chat"] .load-more-btn-premium {
    background: linear-gradient(135deg, white 0%, var(--spyro-purple-light) 100%) !important;
    border: 2px solid var(--spyro-purple) !important;
    border-radius: 25px !important;
    color: var(--spyro-purple-dark) !important;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 700 !important;
    box-shadow: var(--shadow-soft) !important;
    transition: all 0.3s ease !important;
}

body[data-view="chat"] .load-more-btn-premium:hover {
    background: var(--spyro-purple) !important;
    color: white !important;
    transform: translateY(-2px) !important;
}

/* =============================================
   MISC: Reply Preview in Input Area
   ============================================= */

/* Reply preview styling - applied via JS but can override */
body[data-view="chat"] .chat-input-container .mb-2 > div {
    background: linear-gradient(135deg, var(--spyro-pink-light) 0%, rgba(255,255,255,0.9) 100%) !important;
    border: 2px solid var(--spyro-pink) !important;
    border-left-width: 4px !important;
    border-radius: 12px !important;
}

/* =============================================
   MISC: Link Previews
   ============================================= */

body[data-view="chat"] .link-preview-card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid var(--spyro-purple-light) !important;
    border-radius: 12px !important;
}

/* =============================================
   MISC: Image Messages
   ============================================= */

body[data-view="chat"] .message-bubble-container img {
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(155, 89, 182, 0.2) !important;
}

/* =============================================
   MISC: Hover Effects on Messages
   ============================================= */

body[data-view="chat"] .reply-hover-btn {
    background: linear-gradient(135deg, var(--spyro-gold-light) 0%, var(--spyro-gold) 100%) !important;
    border: 2px solid var(--spyro-orange) !important;
}

/* =============================================
   MISC: Loading States
   ============================================= */

body[data-view="chat"] .load-more-button-top > div {
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, var(--spyro-purple-light) 100%) !important;
    border: 2px solid var(--spyro-purple-light) !important;
    color: var(--spyro-purple) !important;
    font-family: 'Quicksand', sans-serif !important;
}

/* =============================================
   MISC: Empty State
   ============================================= */

body[data-view="chat"] .flex.flex-col.items-center.justify-center.py-12 {
    color: var(--spyro-purple) !important;
}

body[data-view="chat"] .flex.flex-col.items-center.justify-center.py-12 .text-amber-100 {
    color: var(--spyro-purple-deep) !important;
}

body[data-view="chat"] .flex.flex-col.items-center.justify-center.py-12 .text-stone-400 {
    color: var(--text-secondary) !important;
}

/* =============================================
   ENCHANTED CRYSTAL HEADER
   Premium chat header with glass orb buttons
   ============================================= */

.chat-header-crystal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg,
        rgba(156, 39, 176, 0.35) 0%,
        rgba(103, 58, 183, 0.3) 50%,
        rgba(63, 81, 181, 0.35) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(255, 171, 64, 0.3);
    overflow: hidden;
}

/* Golden glow spots - DISABLED */
.chat-header-crystal .crystal-glow {
    display: none;
}

/* Stars and star-layer - DISABLED */
.chat-header-crystal .crystal-stars,
.chat-header-crystal .star-layer {
    display: none;
}

/* Shimmer animation overlay - DISABLED */
.chat-header-crystal .crystal-shimmer {
    display: none;
}

@keyframes crystalShimmer {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

/* Logo wrapper */
.chat-header-crystal .crystal-logo-wrap {
    justify-self: center;
    text-align: center;
    position: relative;
    z-index: 2;
}

/* Logo text with glow */
.chat-header-crystal .crystal-logo {
    font-family: 'Satisfy', cursive;
    font-size: 2.1rem;
    color: #fff;
    text-decoration: none;
    text-shadow:
        0 0 15px rgba(255, 215, 0, 0.6),
        0 0 30px rgba(255, 215, 0, 0.4),
        0 0 45px rgba(255, 171, 64, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.chat-header-crystal .crystal-logo:hover {
    text-shadow:
        0 0 20px rgba(255, 215, 0, 0.8),
        0 0 40px rgba(255, 215, 0, 0.5),
        0 0 60px rgba(255, 171, 64, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Glass Orb Buttons */
.chat-header-crystal .btn-glass-orb {
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background: radial-gradient(circle at 30% 30%,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.15) 40%,
        rgba(255, 255, 255, 0.08) 70%,
        rgba(255, 255, 255, 0.03) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.15),
        inset 0 2px 15px rgba(255, 255, 255, 0.35),
        inset 0 -3px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

/* Glass highlight reflection */
.chat-header-crystal .btn-glass-orb .orb-highlight {
    position: absolute;
    top: 5px;
    left: 9px;
    width: 14px;
    height: 10px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    filter: blur(3px);
    pointer-events: none;
}

/* Icon inside orb */
.chat-header-crystal .btn-glass-orb .orb-icon {
    font-size: 17px;
    color: rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

/* Hover state */
.chat-header-crystal .btn-glass-orb:hover {
    transform: scale(1.12) translateY(-2px);
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 0 25px rgba(255, 215, 0, 0.35),
        inset 0 2px 15px rgba(255, 255, 255, 0.45),
        inset 0 -3px 10px rgba(0, 0, 0, 0.1);
}

.chat-header-crystal .btn-glass-orb:hover .orb-icon {
    color: #ffd54f;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

/* Active/pressed state */
.chat-header-crystal .btn-glass-orb:active {
    transform: scale(1.05);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.3),
        inset 0 2px 10px rgba(255, 255, 255, 0.3),
        inset 0 -2px 8px rgba(0, 0, 0, 0.15);
}