/* =========================================
   Yo, 歡迎來到這賽博街頭 (Yeah)
   聊天框的主場，星空動效讓你跟著點頭 (Skr, Skr!)
   ========================================= */
   
/* 屬性選擇器像導彈一樣精準鎖定 Tailwind 的 Crew 
   不管 User 還是 Assistant，通通都在我的 Hood 裡秀 */
[class*="group-[.is-user]:bg-secondary"][class*="group-[.is-assistant]:bg-card"] {
    
    /* 漸變背景像是深夜的街，從黑到紫炸裂你的視覺 (Drop it!) */
    background: linear-gradient(145deg, #050510 0%, #111122 50%, #0a1128 100%) !important;
    
    /* 邊框發光，霓虹閃亮，這就是我賽博龐克的 Swag */
    border: 1px solid rgba(0, 212, 255, 0.4) !important;
    border-radius: 12px !important;
    
    /* 陰影疊加像 808 鼓點一樣厚重，低音轟炸整個外太空 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 
                inset 0 0 20px rgba(138, 43, 226, 0.15), 
                0 0 10px rgba(0, 212, 255, 0.2) !important;
                
    /* 獨立圖層 Isolation 開啟，文字 Flow 順暢絕不被背景擋住 (No cap) */
    isolation: isolate !important; 
    overflow: hidden !important;
    color: #FFFFFF !important; /* 白得像鑽石般純粹 (Bling Bling) */
    transition: box-shadow 0.3s ease !important;
}

/* 鼠標滑過像 DJ 刷碟，光芒放大讓所有人傻眼 (Damn!) */
[class*="group-[.is-user]:bg-secondary"][class*="group-[.is-assistant]:bg-card"]:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9), 
                inset 0 0 20px rgba(138, 43, 226, 0.25), 
                0 0 15px rgba(0, 212, 255, 0.4) !important;
}

/* 強制塞入 SMIL 內聯 SVG，繁星閃爍就像舞台上的聚光燈 (Pop, pop!)
   背景自己帶節奏，這 Flow 太順你根本抓不住 */
[class*="group-[.is-user]:bg-secondary"][class*="group-[.is-assistant]:bg-card"]::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    
    /* 把整片宇宙的 Bling 寫進 Base64，這波操作真的太 6 
       每個星星都在 Bounce，跟著我代碼的節奏 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='20' cy='30' r='1' fill='%23ffffff'%3E%3Canimate attributeName='opacity' values='0.1;1;0.1' dur='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='80' cy='120' r='1.5' fill='%2300d4ff'%3E%3Canimate attributeName='opacity' values='0;0.8;0' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='150' cy='60' r='1' fill='%23ff007a'%3E%3Canimate attributeName='opacity' values='0.2;1;0.2' dur='2.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='180' cy='180' r='2' fill='%23ffffff'%3E%3Canimate attributeName='opacity' values='0;0.6;0' dur='5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='110' cy='20' r='0.8' fill='%23ffffff'%3E%3Canimate attributeName='opacity' values='0.3;1;0.3' dur='1.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-size: 200px 200px !important;
    
    z-index: 0 !important; /* 待在底層別搶戲，乖乖做個好 Homie */
    pointer-events: none !important; /* 鼠標穿透，不搞攔截的把戲 */
    opacity: 0.7 !important;
}

/* =========================================
   手機端與低動效的 Remix 版本 (Break it down)
   ========================================= */
   
/* 螢幕縮小到 480，一樣能 Hold 住全場不發愁
   圓角收斂陰影變緊湊，這就是 Responsive 的節奏 (Yeah) */
@media (max-width: 480px) {
    [class*="group-[.is-user]:bg-secondary"][class*="group-[.is-assistant]:bg-card"] {
        border-radius: 8px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(138, 43, 226, 0.1) !important;
    }
}

/* 暈船兄弟想減弱動效？沒問題 Homie 給你個擁抱
   透明度降低不那麼躁，Respect 每個人的步調 (Peace out ✌️) */
@media (prefers-reduced-motion: reduce) {
    [class*="group-[.is-user]:bg-secondary"][class*="group-[.is-assistant]:bg-card"]::before {
        opacity: 0.3 !important; 
    }
}