/* ======================================================
DIALOG WSPARCIA
PREMIUM UI
====================================================== */

:root{

--primary:#04043e;
--primary-light:#2c2c8a;

--accent:#6f78ff;

--text:#04043e;

--radius:14px;

--glass:rgba(255,255,255,0.65);

--shadow-soft:0 10px 35px rgba(0,0,0,0.08);

--shadow-glow:0 20px 60px rgba(4,4,62,0.25);

}



/* ======================================================
BASE
====================================================== */

*{
box-sizing:border-box;
}

body{

margin:0;

font-family:'Raleway',sans-serif;

color:var(--text);

background:transparent;

min-height:100vh;

display:flex;
flex-direction:column;

overflow-x:hidden;

}



/* ======================================================
OCEAN BACKGROUND
====================================================== */

#bg{

position:fixed;

bottom:0;
left:0;

width:100%;
height:100%;

z-index:-1;

pointer-events:none;

}



/* ======================================================
HEADER
====================================================== */

.site-header{

background:linear-gradient(135deg,var(--primary),var(--primary-light));

color:white;

padding:14px 0;

border-bottom:1px solid rgba(255,255,255,0.1);

}

.nav-bar{

display:flex;
justify-content:space-between;
align-items:center;

}

.logo{

display:flex;
align-items:center;
gap:8px;

font-weight:600;
font-size:18px;

}

.logo i{
font-size:22px;
}



/* ======================================================
NAV BUTTONS
====================================================== */

.nav-actions{

display:flex;
gap:10px;

}

.nav-btn{

display:flex;
align-items:center;
justify-content:center;

gap:6px;

border:1px solid rgba(255,255,255,0.5);

background:transparent;

color:white;

padding:10px 16px;

border-radius:10px;

cursor:pointer;

font-size:14px;

height:38px;

transition:all .25s;

}

.nav-btn:hover{

background:white;

color:var(--primary);

transform:translateY(-1px);

}

.nav-cta{

background:linear-gradient(135deg,#ffffff,#e8e9ff);

color:var(--primary);

border:none;

font-weight:600;

box-shadow:var(--shadow-soft);

}



/* ======================================================
HERO
====================================================== */

.hero{

padding:20px 0;

}

.hero-box{

background:var(--glass);

border-radius:22px;

padding:50px;

box-shadow:

0 30px 80px rgba(0,0,0,0.12),

inset 0 1px 0 rgba(255,255,255,.8);

}

.hero h1{

font-size:42px;
font-weight:600;

margin-bottom:12px;

}

.hero .lead{

font-size:18px;

margin-bottom:16px;

}

.hero-text{

font-size:14px;

line-height:1.6;

max-width:520px;

color:#2b2b55;

}

.hero-buttons{

margin-top:26px;

display:flex;
gap:14px;
flex-wrap:wrap;

}



/* ======================================================
FOOTER
====================================================== */

.site-footer{

text-align:center;

font-size:small;

}



/* ======================================================
BUTTONS
====================================================== */

.btn-main{

background:linear-gradient(135deg,var(--primary),var(--primary-light));

color:white;

border:none;

padding:14px 26px;

border-radius:12px;

cursor:pointer;

font-size:15px;

font-weight:600;

box-shadow:var(--shadow-glow);

transition:all .25s;

}

.btn-main:hover{

transform:translateY(-2px);

box-shadow:0 25px 60px rgba(4,4,62,.35);

}

.btn-outline{

border:1px solid var(--primary);

background:white;

color:var(--primary);

padding:6px 12px;

border-radius:10px;

cursor:pointer;

transition:all .25s;

}

.btn-outline:hover{

background:var(--primary);

color:white;

}



/* ======================================================
SYSTEM BOX (CAROUSEL CONTAINER)
====================================================== */

.system-box{

border:2px solid rgba(255,255,255,0.2);

border-radius:18px;

padding:30px;

height:320px;

position:relative;

display:flex;
align-items:center;
justify-content:center;

background:transparent;

transition:background 0.6s ease;

}

/* background when carousel active */

.system-box.active-bg{

background:linear-gradient(135deg,#04043e,#2c2c8a);
color: white;

}



/* ======================================================
CAROUSEL
====================================================== */

.carousel-wrapper{

position:relative;

width:100%;
height:100%;

display:flex;
align-items:center;
justify-content:center;

}

.carousel-arrow{

background:white;

border:none;

width:34px;
height:34px;

border-radius:50%;

cursor:pointer;

display:flex;
align-items:center;
justify-content:center;

color:var(--primary);

position:absolute;

z-index:5;

}

.carousel-arrow.left{
left:-18px;
}

.carousel-arrow.right{
right:-18px;
}

.carousel-arrow:hover{

transform:scale(1.1);

}



/* ======================================================
SLIDES
====================================================== */

.system-carousel{

position:relative;

width:100%;
height:100%;

}

.system-slide{

position:absolute;

inset:0;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

text-align:center;

opacity:0;

transition:opacity .4s;

}

.system-slide.active{

opacity:1;

}

.system-slide i{

font-size:28px;

margin-bottom:10px;

}



/* ======================================================
CHAT DEMO
====================================================== */

#demoChat{

display:flex;
flex-direction:column;
gap:10px;

width:100%;

max-width:320px;

margin:auto;

}



/* ======================================================
CHAT BUBBLES
====================================================== */

.bubble{

max-width:260px;

padding:10px 14px;

border-radius:14px;

font-size:14px;

line-height:1.6;

white-space:normal;

word-break:break-word;

opacity:0;

transform:translateY(6px);

transition:all .25s ease;

box-shadow:0 6px 14px rgba(0,0,0,0.15);

}

.bubble.show{

opacity:1;

transform:translateY(0);

}

.bubble.user{

background:red;

color: #04043e;

border: #04043e;

border-radius:16px 16px 4px 16px;

align-self:flex-end;

}

.bubble.ai{

background:green;

color: #04043e;

border: #04043e;

border-radius:16px 16px 4px 16px;

align-self:flex-start;

}



/* ======================================================
TYPING
====================================================== */

.typing{

display:flex;

gap:5px;

padding:8px 10px;

}

.typing span{

width:6px;
height:6px;

background:white;

border-radius:50%;

animation:typingBounce 1.2s infinite ease-in-out;

}

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

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

@keyframes typingBounce{

0%{
transform:translateY(0);
opacity:.4;
}

30%{
transform:translateY(-4px);
opacity:1;
}

60%{
transform:translateY(0);
opacity:.7;
}

100%{
transform:translateY(0);
opacity:.4;
}

}



/* ======================================================
CHAT VIEW
====================================================== */

.chat-header{

background:linear-gradient(135deg,var(--primary),var(--primary-light));

color:white;

padding:14px 0;

}

.chat-top{

display:flex;
justify-content:space-between;
align-items:center;

}

.chat-user{

display:flex;
align-items:center;
gap:8px;

font-weight:500;

}

.chat-controls{

display:flex;
gap:10px;
align-items:center;

}



/* ======================================================
TOKEN BADGE
====================================================== */

.token-badge{

background:white;

color:var(--primary);

padding:6px 12px;

border-radius:10px;

font-weight:600;

display:flex;
align-items:center;
gap:6px;

box-shadow:var(--shadow-soft);

}



/* ======================================================
CHAT MAIN
====================================================== */

.chat-main{

flex:1;

padding:30px 0;

}

.chat-container{

max-width:900px;

margin:auto;

background:var(--glass);

border-radius:18px;

padding:25px;

backdrop-filter:blur(10px);

box-shadow:0 20px 60px rgba(0,0,0,0.15);

display:flex;
flex-direction:column;

height:70vh;

}



/* ======================================================
CHAT MESSAGES
====================================================== */

#chatMessages{

flex:1;

overflow:auto;

padding-right:10px;

}

.message{

padding:12px 16px;

border-radius:14px;

margin-bottom:10px;

max-width:70%;

font-size:14px;

line-height:1.6;

animation:fadeIn .3s ease;

}

.message.user{

background:var(--primary);

color:white;

margin-left:auto;

}

.message.ai{

background:#eef0ff;

color:var(--primary);

}

@keyframes fadeIn{

from{
opacity:0;
transform:translateY(6px);
}

to{
opacity:1;
transform:translateY(0);
}

}



/* ======================================================
CHAT INPUT
====================================================== */

.chat-input{

display:flex;

gap:10px;

margin-top:15px;

}

.chat-input textarea{

flex:1;

border-radius:10px;

border:1px solid #ccc;

padding:12px;

resize:none;

height:50px;

}

.chat-input button{

background:var(--primary);

border:none;

color:white;

width:50px;

border-radius:10px;

cursor:pointer;

transition:all .2s;

}

.chat-input button:hover{

background:var(--primary-light);

}



/* ======================================================
BUY TOKENS
====================================================== */

.buy-packages{

display:grid;

grid-template-columns:1fr;

gap:10px;

}

.buy-package{

border:1px solid #ddd;

padding:20px;

border-radius:12px;

background:white;

cursor:pointer;

text-align:center;

transition:all .2s;

}

.buy-package:hover{

transform:translateY(-3px);

box-shadow:0 15px 40px rgba(0,0,0,0.15);

}

.buy-package.popular{

border:2px solid var(--primary);

background:#f7f8ff;

}



/* ======================================================
SCROLLBAR
====================================================== */

::-webkit-scrollbar{
width:6px;
}

::-webkit-scrollbar-thumb{
background:rgba(4,4,62,0.3);
border-radius:10px;
}



/* ======================================================
RESPONSIVE
====================================================== */

@media(max-width:992px){

.hero h1{
font-size:36px;
}

.system-box{
margin-top:25px;
}

}

@media(max-width:576px){

.hero{
padding:50px 0;
}

.hero-box{
padding:30px;
}

.hero-buttons{
flex-direction:column;
}

.chat-container{
height:75vh;
}

}