587 lines
10 KiB
CSS
587 lines
10 KiB
CSS
|
@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;
|
||
|
|
}
|
||
|
|
}
|