/* ==========================================
BSR AI AGENT - Modern Black UI
==========================================*/

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Body lock class when chat is active on mobile */
body.bsr-chat-open {
overflow: hidden !important;
}

/* ==========================================
BLACK HOLE GIF CHAT BUTTON
==========================================*/

#bsr-chat-button {
position: fixed;
bottom: 60px;
right: 24px;
width: 64px;
height: 64px;
border-radius: 50%;
background: #000000;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 999998;
overflow: hidden;
isolation: isolate;
transform: translateZ(0);

/* Outer Purple Glowing Effect */
box-shadow:
0 0 15px rgba(168, 85, 247, 0.6),
0 0 30px rgba(124, 58, 237, 0.4);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
}

/* Hover Effect: Scale & Brighten Pulse */
#bsr-chat-button:hover {
transform: scale(1.12);
box-shadow:
0 0 25px rgba(192, 132, 252, 0.9),
0 0 45px rgba(147, 51, 234, 0.6);
}

/* GIF Image Styling inside Circular Button */
.bsr-gif-icon {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
pointer-events: none; /* Prevents dragging image */
}

/* ==========================================
CHAT WINDOW STYLES
==========================================*/

/* Chat Window Container (Desktop Default) */
#bsr-chat-window {
position: fixed;
right: 24px;
bottom: 92px;
width: 360px;
height: 540px;
max-height: 80vh;
background: #09090b;
border: 1px solid #27272a;
border-radius: 20px;
overflow: hidden;
display: none; /* Toggled by JavaScript */
flex-direction: column;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
z-index: 999999;
}

#bsr-chat-window.active {
display: flex;
}

/* Header */
.bsr-header {
padding: 14px 18px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #18181b;
background: #09090b;
}

.bsr-header h3 {
color: #ffffff;
font-size: 16px;
font-weight: 600;
}

#bsr-close-chat {
background: none;
border: none;
color: #a1a1aa;
font-size: 22px;
cursor: pointer;
line-height: 1;
transition: color 0.2s ease;
}

#bsr-close-chat:hover {
color: #ffffff;
}

/* Chat Body */
#bsr-chat-body {
flex: 1;
padding: 16px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
}

/* AI Orb Inside Chat Body */
.ai-orb {
position: relative;
width: 80px;
height: 80px;
min-width: 80px;
min-height: 80px;
margin: 20px auto;
border-radius: 50%;
background: #000;
flex-shrink: 0;
isolation: isolate;
transform: translateZ(0);
}

.ai-orb::before {
content: "";
position: absolute;
top: -12px;
left: -12px;
right: -12px;
bottom: -12px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
transparent,
#7c3aed,
#a855f7,
#c084fc,
#7c3aed,
transparent
);
animation: spin 2.5s linear infinite;
filter: blur(8px);
-webkit-filter: blur(8px);
z-index: 1;
will-change: transform;
}

.ai-orb::after {
content: "";
position: absolute;
top: 6px;
left: 6px;
right: 6px;
bottom: 6px;
border-radius: 50%;
background: radial-gradient(
circle,
#000 55%,
#050505 75%,
#111 100%
);
box-shadow:
inset 0 0 25px rgba(0, 0, 0, 0.95),
0 0 12px rgba(168, 85, 247, 0.35);
z-index: 2;
}

/* Welcome Text */
.bsr-title {
color: #ffffff;
text-align: center;
font-size: 20px;
font-weight: 600;
margin-top: 8px;
}

.bsr-subtitle {
color: #a1a1aa;
text-align: center;
font-size: 13px;
line-height: 1.5;
margin-top: 6px;
}

/* Suggestions */
.bsr-suggestions {
margin-top: 16px;
display: grid;
gap: 8px;
}

.bsr-suggestions button {
background: #18181b;
border: 1px solid #27272a;
color: #f4f4f5;
padding: 10px 14px;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
font-size: 13px;
text-align: left;
}

.bsr-suggestions button:hover {
background: #ffffff;
color: #000000;
}

/* Messages */
.bsr-ai-message {
background: #18181b;
border: 1px solid #27272a;
color: #f4f4f5;
padding: 12px 14px;
border-radius: 14px;
font-size: 14px;
line-height: 1.5;
max-width: 88%;
align-self: flex-start;
}

.bsr-user-message {
background: #ffffff;
color: #09090b;
padding: 12px 14px;
border-radius: 14px;
font-size: 14px;
line-height: 1.5;
max-width: 80%;
align-self: flex-end;
}

/* Footer */
.bsr-chat-footer {
padding: 12px 14px;
border-top: 1px solid #18181b;
display: flex;
gap: 8px;
background: #09090b;
}

/* Text Input */
#bsr-message {
flex: 1;
height: 44px;
background: #18181b;
border: 1px solid #27272a;
color: #ffffff;
padding: 0 14px;
border-radius: 12px;
outline: none;
font-size: 16px !important;
touch-action: manipulation;
}

#bsr-message::placeholder {
color: #71717a;
}

/* Send Button */
#bsr-send {
width: 44px;
height: 44px;
border: none;
border-radius: 12px;
background: #ffffff;
color: #000000;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
}

#bsr-send:hover {
transform: scale(1.05);
}

/* Custom Scrollbar */
#bsr-chat-body::-webkit-scrollbar {
width: 4px;
}

#bsr-chat-body::-webkit-scrollbar-thumb {
background: #27272a;
border-radius: 10px;
}

/* Keyframe Animations */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

/* Mobile Devices */
@media (max-width: 480px) {
#bsr-chat-window.active {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
border: none;
z-index: 999999;
}

#bsr-chat-button {
bottom: 40px;
}

/* Hide trigger icon when open on mobile */
#bsr-chat-window.active ~ #bsr-chat-button {
display: none;
}

.bsr-chat-footer {
padding-bottom: max(14px, env(safe-area-inset-bottom));
}
}