:root{

--ikoo-primary:#0B5ED7;

--ikoo-accent:#FF6B00;

}

.ikoo-chat{

position:fixed;

right:25px;

bottom:25px;

z-index:999999;

font-family:Arial,sans-serif;

}

/* Floating button */

.ikoo-chat-button{

width:68px;

height:68px;

border:none;

border-radius:50%;

background:var(--ikoo-primary);

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

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

transition:.3s;

}

.ikoo-chat-button img{

width:34px;

height:34px;

filter:brightness(0) invert(1);

}

.ikoo-chat-button:hover{

transform:scale(1.08);

}

/* Window */

.ikoo-chat-window{

position:absolute;

right:0;

bottom:85px;

width:380px;

max-width:calc(100vw - 30px);

height:min(650px,calc(100vh - 130px));

background:#fff;

border-radius:18px;

display:none;

flex-direction:column;

overflow:hidden;

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

}

.ikoo-chat-window.show{

display:flex;

animation:popup .25s ease;

}

@keyframes popup{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:none;

}

}

/* Header */

.ikoo-header{

background:var(--ikoo-primary);

padding:18px;

display:flex;

justify-content:space-between;

align-items:center;

color:#fff;

}

.ikoo-header-left{

display:flex;

align-items:center;

gap:12px;

}

.ikoo-logo{

width:48px;

height:48px;

border-radius:10px;

background:#fff;

object-fit:contain;

padding:6px;

}

.ikoo-logo-circle{

width:48px;

height:48px;

border-radius:50%;

background:#fff;

display:flex;

align-items:center;

justify-content:center;

}

.ikoo-logo-circle img{

width:28px;

}

.ikoo-company{

font-size:18px;

font-weight:bold;

}

.ikoo-subtitle{

font-size:12px;

opacity:.9;

margin-top:3px;

}

.ikoo-close{

background:none;

border:none;

font-size:22px;

color:#fff;

cursor:pointer;

}

.ikoo-messages{

flex:1;

padding:18px;

overflow-y:auto;

background:#f7f7f7;

}

.ikoo-message{

background:#fff;

padding:14px;

border-radius:14px;

max-width:80%;

line-height:1.5;

box-shadow:0 4px 15px rgba(0,0,0,.05);

}

.ikoo-input{

display:flex;

gap:10px;

padding:15px;

border-top:1px solid #eee;

}

.ikoo-input input{

flex:1;

border:1px solid #ddd;

border-radius:10px;

padding:12px;

outline:none;

}

.ikoo-input button{

width:48px;

border:none;

border-radius:10px;

background:var(--ikoo-primary);

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

}

.ikoo-input img{

width:22px;

filter:brightness(0) invert(1);

}

/* Mobile */

@media (max-width:768px){

.ikoo-chat{

right:20px;

bottom:20px;

}

.ikoo-chat-window{

right:0;

bottom:85px;

width:min(380px,calc(100vw - 20px));

height:min(600px,calc(100vh - 120px));

}

}

.ikoo-wrapper{

display:flex;

margin-bottom:18px;

}

.ikoo-wrapper.user{

justify-content:flex-end;

}

.ikoo-wrapper.bot{

justify-content:flex-start;

}

.ikoo-message.user{

background:var(--ikoo-primary);

color:#fff;

}

.ikoo-time{

font-size:11px;

opacity:.7;

margin-top:8px;

}

.typing{

font-style:italic;

opacity:.7;

}

.ikoo-message{

animation:messageIn .25s ease;

}

@keyframes messageIn{

from{

opacity:0;

transform:translateY(12px);

}

to{

opacity:1;

transform:none;

}

}