@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap");
:root{
--bg:#ffffff;
--fg:#000000;
--border:#e0e0e0;
--accent:#0066ff;
--glass:rgba(0,0,0,0.02);
--shadow:rgba(0,0,0,0.05);
--logo-url:url('https://pragmatismo.com.br/icons/general-bots.svg');
--gradient-1:linear-gradient(135deg,rgba(0,102,255,0.05) 0%,rgba(0,102,255,0.0) 100%);
--gradient-2:linear-gradient(45deg,rgba(0,0,0,0.02) 0%,rgba(0,0,0,0.0) 100%);
}
[data-theme="dark"]{
--bg:#1a1a1a;
--fg:#ffffff;
--border:#333333;
--accent:#ffffff;
--glass:rgba(255,255,255,0.05);
--shadow:rgba(0,0,0,0.5);
--gradient-1:linear-gradient(135deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.0) 100%);
--gradient-2:linear-gradient(45deg,rgba(255,255,255,0.03) 0%,rgba(255,255,255,0.0) 100%);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
font-family:"Inter",sans-serif;
background:var(--bg);
color:var(--fg);
overflow:hidden;
transition:background 0.3s, color 0.3s;
display:flex;
flex-direction:column;
height:100vh;
position:relative;
}
body::before{
content:'';
position:fixed;
inset:0;
background:var(--gradient-1);
pointer-events:none;
z-index:0;
}
.float-menu{
position:fixed;
left:20px;
top:20px;
display:flex;
flex-direction:column;
gap:8px;
z-index:1000;
}
.float-logo{
width:40px;
height:40px;
background:var(--logo-url) center/contain no-repeat;
filter:var(--logo-filter, none);
border-radius:50%;
cursor:pointer;
transition:all 0.3s;
border:1px solid var(--border);
backdrop-filter:blur(10px);
}
[data-theme="dark"] .float-logo{
}
.float-logo:hover{
transform:scale(1.1) rotate(5deg);
}
.menu-button{
width:40px;
height:40px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all 0.3s;
background:var(--bg);
border:1px solid var(--border);
font-size:16px;
color:var(--fg);
backdrop-filter:blur(10px);
}
.menu-button:hover{
transform:scale(1.1) rotate(-5deg);
background:var(--fg);
color:var(--bg);
}
.sidebar{
position:fixed;
left:-320px;
top:0;
width:320px;
height:100vh;
background:var(--bg);
border-right:1px solid var(--border);
transition:left 0.4s cubic-bezier(0.4,0,0.2,1);
z-index:999;
overflow-y:auto;
padding:20px;
backdrop-filter:blur(20px);
box-shadow:4px 0 20px var(--shadow);
}
.sidebar.open{
left:0;
}
.sidebar-header{
display:flex;
align-items:center;
gap:12px;
margin-bottom:30px;
padding-top:10px;
}
.sidebar-logo{
width:32px;
height:32px;
background:var(--logo-url) center/contain no-repeat;
filter:var(--logo-filter, none);
}
[data-theme="dark"] .sidebar-logo{
}
.sidebar-title{
font-size:16px;
font-weight:500;
}
.sidebar-button{
width:100%;
padding:12px 16px;
border-radius:12px;
cursor:pointer;
transition:all 0.3s;
font-weight:500;
font-size:14px;
margin-bottom:8px;
background:var(--glass);
border:1px solid var(--border);
color:var(--fg);
text-align:left;
}
.sidebar-button:hover{
background:var(--fg);
color:var(--bg);
transform:translateX(4px) scale(1.02);
}
.history-section{
margin-top:20px;
}
.history-title{
font-size:12px;
opacity:0.5;
margin-bottom:12px;
text-transform:uppercase;
letter-spacing:0.5px;
}
.history-item{
padding:10px 14px;
margin-bottom:6px;
border-radius:10px;
cursor:pointer;
transition:all 0.3s;
font-size:13px;
border:1px solid transparent;
}
.history-item:hover{
background:var(--fg);
color:var(--bg);
transform:translateX(4px) scale(1.02);
}
#messages{
flex:1;
overflow-y:auto;
padding:20px 20px 140px;
max-width:680px;
margin:0 auto;
width:100%;
position:relative;
z-index:1;
}
.message-container{
margin-bottom:24px;
opacity:0;
transform:translateY(10px);
}
.user-message{
display:flex;
justify-content:flex-end;
margin-bottom:8px;
}
.user-message-content{
background:var(--fg);
color:var(--bg);
border-radius:18px;
padding:12px 18px;
max-width:80%;
font-size:14px;
line-height:1.5;
box-shadow:0 2px 8px var(--shadow);
position:relative;
overflow:hidden;
}
.user-message-content::before{
content:'';
position:absolute;
inset:0;
background:var(--gradient-2);
opacity:0.3;
pointer-events:none;
}
.assistant-message{
display:flex;
gap:8px;
align-items:flex-start;
}
.assistant-avatar{
width:24px;
height:24px;
border-radius:50%;
background:var(--logo-url) center/contain no-repeat;
flex-shrink:0;
margin-top:2px;
filter:var(--logo-filter, none);
}
[data-theme="dark"] .assistant-avatar{
}
.assistant-message-content{
flex:1;
font-size:14px;
line-height:1.7;
background:var(--glass);
border-radius:18px;
padding:12px 18px;
border:1px solid var(--border);
box-shadow:0 2px 8px var(--shadow);
position:relative;
overflow:hidden;
}
.assistant-message-content::before{
content:'';
position:absolute;
inset:0;
background:var(--gradient-1);
opacity:0.5;
pointer-events:none;
}
.thinking-indicator{
display:flex;
gap:8px;
align-items:center;
font-size:13px;
opacity:0.4;
}
.typing-dots{
display:flex;
gap:4px;
}
.typing-dot{
width:4px;
height:4px;
background:var(--fg);
border-radius:50%;
animation:bounce 1.4s infinite;
}
.typing-dot:nth-child(1){animation-delay:-.32s}
.typing-dot:nth-child(2){animation-delay:-.16s}
@keyframes bounce{
0%,80%,100%{transform:scale(0);opacity:.3}
40%{transform:scale(1);opacity:1}
}
footer{
position:fixed;
bottom:0;
left:0;
right:0;
background:var(--bg);
border-top:1px solid var(--border);
padding:12px;
z-index:100;
transition:all 0.3s;
backdrop-filter:blur(20px);
}
.suggestions-container{
display:flex;
flex-wrap:wrap;
gap:4px;
margin-bottom:8px;
justify-content:center;
max-width:680px;
margin:0 auto 8px;
}
.suggestion-button{
padding:6px 12px;
border-radius:12px;
cursor:pointer;
font-size:11px;
font-weight:400;
transition:all 0.2s;
background:var(--glass);
border:1px solid var(--border);
color:var(--fg);
}
.suggestion-button:hover{
background:var(--fg);
color:var(--bg);
transform:scale(1.05);
}
.input-container{
display:flex;
gap:6px;
max-width:680px;
margin:0 auto;
align-items:center;
}
#messageInput{
flex:1;
border-radius:20px;
padding:10px 16px;
font-size:14px;
font-family:"Inter",sans-serif;
outline:none;
transition:all 0.3s;
background:var(--glass);
border:1px solid var(--border);
color:var(--fg);
backdrop-filter:blur(10px);
}
#messageInput:focus{
border-color:var(--accent);
box-shadow:0 0 0 3px rgba(0,102,255,0.1);
}
#messageInput::placeholder{
opacity:0.3;
}
#sendBtn,#voiceBtn{
width:36px;
height:36px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:all 0.2s;
border:none;
background:var(--fg);
color:var(--bg);
font-size:16px;
flex-shrink:0;
}
#sendBtn:hover,#voiceBtn:hover{
transform:scale(1.08) rotate(5deg);
}
#sendBtn:active,#voiceBtn:active{
transform:scale(0.95);
}
#voiceBtn.recording{
animation:pulse 1.5s infinite;
}
@keyframes pulse{
0%,100%{opacity:1;transform:scale(1)}
50%{opacity:0.6;transform:scale(1.1)}
}
.flash-overlay{
position:fixed;
inset:0;
background:var(--fg);
opacity:0;
pointer-events:none;
z-index:9999;
}
.scroll-to-bottom{
position:fixed;
bottom:80px;
right:20px;
width:40px;
height:40px;
background:var(--fg);
border:1px solid var(--border);
border-radius:50%;
color:var(--bg);
font-size:18px;
cursor:pointer;
display:none;
align-items:center;
justify-content:center;
transition:all 0.3s;
z-index:90;
}
.scroll-to-bottom.visible{
display:flex;
}
.scroll-to-bottom:hover{
transform:scale(1.1) rotate(180deg);
}
.warning-message{
border-radius:12px;
padding:12px 16px;
margin-bottom:18px;
opacity:0.6;
background:var(--glass);
border:1px solid var(--border);
font-size:13px;
}
.continue-button{
display:inline-block;
border-radius:10px;
padding:8px 16px;
font-weight:500;
cursor:pointer;
margin-top:10px;
transition:all 0.3s;
font-size:13px;
background:var(--glass);
border:1px solid var(--border);
}
.continue-button:hover{
background:var(--fg);
color:var(--bg);
transform:translateY(-2px);
}
.context-indicator{
position:fixed;
bottom:130px;
right:20px;
width:120px;
border-radius:12px;
padding:10px;
font-size:10px;
text-align:center;
z-index:90;
background:var(--bg);
border:1px solid var(--border);
display:none;
backdrop-filter:blur(10px);
}
.context-indicator.visible{
display:block;
}
.context-progress{
height:3px;
background:var(--glass);
border-radius:2px;
margin-top:6px;
overflow:hidden;
}
.context-progress-bar{
height:100%;
background:var(--accent);
border-radius:2px;
transition:width 0.3s;
}
.connection-status{
position:fixed;
top:20px;
right:20px;
width:8px;
height:8px;
border-radius:50%;
z-index:1000;
transition:all 0.3s;
}
.connection-status.connecting{
background:var(--fg);
opacity:0.3;
animation:ping 1.5s infinite;
}
.connection-status.connected{
background:var(--accent);
opacity:0.8;
}
.connection-status.disconnected{
background:var(--fg);
opacity:0.2;
}
@keyframes ping{
0%,100%{opacity:0.3;transform:scale(0.8)}
50%{opacity:0.8;transform:scale(1.2)}
}
.markdown-content p{
margin-bottom:12px;
line-height:1.7;
}
.markdown-content ul,.markdown-content ol{
margin-bottom:12px;
padding-left:20px;
}
.markdown-content li{
margin-bottom:4px;
}
.markdown-content code{
background:var(--glass);
padding:2px 6px;
border-radius:4px;
font-family:monospace;
font-size:13px;
}
.markdown-content pre{
border-radius:8px;
padding:12px;
overflow-x:auto;
margin-bottom:12px;
background:var(--glass);
border:1px solid var(--border);
}
.markdown-content pre code{
background:none;
padding:0;
}
.markdown-content h1,.markdown-content h2,.markdown-content h3{
margin-top:16px;
margin-bottom:8px;
font-weight:600;
}
.markdown-content h1{font-size:20px}
.markdown-content h2{font-size:18px}
.markdown-content h3{font-size:16px}
.markdown-content table{
width:100%;
border-collapse:collapse;
margin-bottom:14px;
}
.markdown-content table th,.markdown-content table td{
padding:8px;
text-align:left;
border:1px solid var(--border);
}
.markdown-content table th{
font-weight:600;
background:var(--glass);
}
.markdown-content blockquote{
border-left:2px solid var(--accent);
padding-left:14px;
margin:12px 0;
opacity:0.7;
font-style:italic;
}
.markdown-content a{
color:var(--accent);
text-decoration:none;
transition:all 0.3s;
}
.markdown-content a:hover{
opacity:0.7;
text-decoration:underline;
}
::-webkit-scrollbar{
width:6px;
}
::-webkit-scrollbar-track{
background:transparent;
}
::-webkit-scrollbar-thumb{
background:var(--border);
border-radius:3px;
}
::-webkit-scrollbar-thumb:hover{
background:var(--fg);
opacity:0.3;
}
@media(max-width:768px){
.sidebar{
width:100%;
left:-100%;
}
#messages{
padding:20px 16px 140px;
}
.float-menu{
left:12px;
top:12px;
}
.float-logo,.menu-button{
width:36px;
height:36px;
font-size:14px;
}
.scroll-to-bottom{
width:36px;
height:36px;
bottom:70px;
right:12px;
}
.context-indicator{
bottom:120px;
right:12px;
width:100px;
}
}