#gsm-vtx-wrapper,
#gsm-vtx-wrapper *,
#gsm-vtx-chat-container div {
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#gsm-vtx-wrapper {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
#gsm-vtx-chat-container {
width: 0;
height: 0;
overflow: hidden;
max-width: calc(100vw - 40px);
max-height: calc(100vh - 120px);
background: #fff;
border-radius: 15px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid #e0e0e0;
position: absolute;
pointer-events: none;
bottom: 0px;
right: 0;
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.95);
transform-origin: bottom right;
transition:
transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
opacity 0.3s ease-out;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
#gsm-vtx-chat-container.active {
width: 300px;
background: transparent;
height: 400px;
pointer-events: all;
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
@media screen and (max-width: 480px) {
#gsm-vtx-chat-container.active {
width: calc(100vw - 30px);
height: calc(100vh - 100px);
right: 0;
bottom: 0;
}
}
#gsm-vtx-header {
color: white;
padding: 12px 15px;
display: flex;
justify-content: space-between;
align-items: center;
font-weight: bold;
border-bottom: 1px solid #e0e0e0;
}
#gsm-vtx-messages {
flex: 1;
overflow-y: auto;
padding: 20px;
background: rgba(248, 249, 250, 0.75);
display: flex;
flex-direction: column;
gap: 10px;
}
.gsm-vtx-msg {
padding: 10px 15px;
border-radius: 18px;
font-size: 14px;
line-height: 1.5;
max-width: 85%;
word-wrap: break-word;
}
.gsm-vtx-msg-user {
align-self: flex-end;
color: white;
border-bottom-right-radius: 2px;
}
.gsm-vtx-msg-ai {
align-self: flex-start;
background: white;
color: #333;
border: 1px solid #eee;
border-bottom-left-radius: 2px;
}
.vtx-typing {
align-self: flex-start;
display: flex;
gap: 4px;
padding: 10px;
}
.vtx-typing span {
width: 6px;
height: 6px;
background: #888;
border-radius: 50%;
animation: vtxBounce 1.4s infinite ease-in-out both;
}
@keyframes vtxBounce {
0%,
80%,
100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
.gsm-vtx-footer {
padding: 15px;
background: white;
border-top: 1px solid #eee;
}
.gsm-vtx-input-wrap {
display: flex;
gap: 10px;
background: #f0f2f5;
border-radius: 20px;
padding: 5px 15px;
align-items: flex-end;
}
#gsm-vtx-input {
flex: 1;
border: none;
background: transparent;
padding: 10px 0;
outline: none;
resize: none;
width: 100%;
max-height: 80px;
min-height: 40px;
font-size: 14px;
line-height: 1.4;
-webkit-user-select: text;
user-select: text;
}
#gsm-vtx-send {
background: none;
border: none;
min-height: 40px;
font-weight: bold;
cursor: pointer;
padding: 10px 5px;
}
#gsm-vtx-toggle {
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 28px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.gsm-vtx-atc-btn {
display: block;
margin-top: 8px;
padding: 8px;
background: #27ae60;
color: white !important;
text-align: center;
border-radius: 8px;
cursor: pointer;
border: none;
width: 100%;
font-weight: bold;
}
.gsm-vtx-credits {
font-size: 11px;
cursor: default;
text-align: center;
padding: 10px;
background: #fff;
color: #bbb;
border-top: 1px solid #f9f9f9;
}
.gsm-vtx-credits a {
color: #999;
text-decoration: none;
font-weight: bold;
transition:
color 0.3s ease,
opacity 0.3s ease;
}
.gsm-vtx-credits:hover a {
color: #3d3d3d;
}
.gsm-vtx-credits a:hover {
color: #ff4700;
opacity: 1;
}
@keyframes vtxShake {
0% {
transform: translate(0, 0);
}
10% {
transform: translate(-2px, -2px);
}
20% {
transform: translate(2px, 2px);
}
30% {
transform: translate(-2px, 2px);
}
40% {
transform: translate(2px, -2px);
}
50% {
transform: translate(-1px, -1px);
}
60% {
transform: translate(1px, 1px);
}
70% {
transform: translate(-1px, 1px);
}
80% {
transform: translate(1px, -1px);
}
90% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 0);
}
}
.vtx-animate-shake {
animation: vtxShake 0.5s ease-in-out;
}
#gsm-vtx-action-buttons {
display: flex;
gap: 3px;
}
#gsm-vtx-action-buttons > * {
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
cursor: pointer;
border-radius: 4px;
color: #ffffff;
transition:
background-color 0.2s ease,
color 0.2s ease;
user-select: none;
}
#gsm-vtx-action-buttons > *:hover {
background-color: rgba(0, 0, 0, 0.08);
}
.grecaptcha-badge {
visibility: hidden !important;
}
.gsm-vtx-msg.gsm-vtx-msg-ai > a {
color: #ff7e00;
}