:root{
    --bg:#0f172a;
    --panel:#1e293b;
    --user:#2563eb;
    --bot:#334155;
    --text:white;
}
.light{
    --bg:#f1f5f9;
    --panel:white;
    --bot:#e2e8f0;
    --text:black;
}
body{
    margin:0;
    font-family:Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
}
.app{
    width:420px;
    width: 480px;
    height: 780px;
    background:url("ritualll.png") center/contain no-repeat;
    background-color: rgba(15,23,42,0.7);
    border-radius:20px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
}
header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
    background:linear-gradient(90deg,#334155,#1e293b);
    color:white;
    font-weight:bold;
    border-bottom:1px solid rgba(255,255,255,0.1);
}
#chat-box{
    flex: 1;
    overflow-y: auto;
    padding: 20px; 
    display: flex;
    flex-direction: column;
    perspective: 800px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 15px;
}
.bubble{
    max-width: 90%;
    padding: 14px 20px; 
    margin:6px 0;
    border-radius:20px;
    word-wrap:break-word;
    box-shadow:0 5px 20px rgba(0,0,0,0.3);
    transition:0.3s transform,0.3s box-shadow;
    transform-style: preserve-3d;
    animation:pop 0.35s ease;
}
.bubble:hover{
    transform: rotateY(10deg) scale(1.05);
    box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

body.light .bubble.user { 
    color:white; 
}

body.light .bubble.bot { 
    color:black; 
    background: var(--bot); 
}

body.light input::placeholder { 
    color:#555; 
}


#bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: -2;
    pointer-events: none;
}

.user { 
    background:var(--user); 
    align-self:flex-end;
     color:white; 
}

.bot { 
    background:var(--bot); 
    align-self:flex-start; 
    color:white; 
}

.bot-wrapper { 
    display:flex; 
    align-items:flex-end; 
    gap:8px; 
}

.bot-avatar { 
    width:28px; 
    height:28px; 
    border-radius:50%; 
    object-fit:cover; 
}

.input-area{
    display: flex;
    padding: 15px; 
    border-top: 1px solid rgba(255,255,255,0.2);
    background: var(--panel);
    gap: 8px;
}
input{
    flex: 1;
    padding: 14px 16px;
    border-radius: 15px;
    font-size: 16px;
}
button.send-btn{
    padding: 0 20px; 
    border-radius: 15px;
}
button.send-btn:hover { 
    background:#1d4ed8; 
}

.typing{ 
    display:flex; 
    gap:4px; 
}

.typing span{ 
    width:6px; 
    height:6px; 
    background:white; 
    border-radius:50%; 
    animation:blink 1.4s infinite; 
}

.typing span:nth-child(2){ 
    animation-delay:.2s; 
}

.typing span:nth-child(3){ 
    animation-delay:.4s; 

}
@keyframes blink{ 
    0%,80%,100% {
        opacity:0
    } 
    40% { 
        opacity:1
    } 
}

@keyframes pop{ from {
    opacity:0; 
    transform:scale(.8) translateY(10px); 
} 
    to { 
        opacity:1; 
        transform:scale(1) translateY(0);
    } 
}

#particles {
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    pointer-events:none; 
    z-index:-1;
}

.particle {
    position:absolute; 
    width:4px; 
    height:4px; 
    background:#60a5fa; 
    border-radius:50%; 
    opacity:0.7;
    animation:float 10s linear infinite;
}

@keyframes float{ from { 
    transform:translateY(100vh);
    opacity:0;
} 

    50% {
        opacity:1;
}
    to {
        transform:translateY(-10vh);
        opacity:0; 
    } 
}

@media (max-width:600px){ 
    .app{ 
        width:95%; 
        height:95vh; 
    } 
}

.logo { 
    display:flex; 
    align-items:center; 
    gap:8px; 

}

.logo-img { 
    width:30px; 
    height:30px; 
    object-fit:contain; 
}