:root {
--ksprod-primary: #4ECAE0;
--ksprod-secondary: #2C5F8D;
--ksprod-dark: #1a1a2e;
--ksprod-darker: #16213e;
--ksprod-text: #ffffff;
--ksprod-text-muted: #9ca3af;
--ksprod-success: #10b981;
--ksprod-error: #ef4444;
--ksprod-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
} #ksprod-chat-widget,
#ksprod-chat-widget *,
#ksprod-chat-widget *::before,
#ksprod-chat-widget *::after {
box-sizing: border-box !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
line-height: 1.4 !important;
text-transform: none !important;
letter-spacing: normal !important;
list-style: none !important;
} #ksprod-chat-widget {
width: 100% !important;
max-width: 500px !important;
margin: 20px auto !important;
position: relative !important;
background: transparent !important;
padding: 0 !important;
border: none !important;
} #ksprod-chat-btn {
display: none !important;
} #ksprod-chat-window {
position: relative !important;
width: 100% !important;
height: 600px !important;
max-height: calc(100vh - 200px) !important;
min-height: 400px !important;
background: var(--ksprod-darker) !important;
border-radius: 20px !important;
box-shadow: var(--ksprod-shadow) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
} #ksprod-chat-window.hidden {
display: flex !important;
} #ksprod-chat-widget .ksprod-chat-header {
background: linear-gradient(135deg, var(--ksprod-secondary), var(--ksprod-dark)) !important;
padding: 18px 20px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
flex-shrink: 0 !important;
margin: 0 !important;
border: none !important;
border-bottom: 1px solid rgba(78, 202, 224, 0.2) !important;
}
#ksprod-chat-widget .ksprod-chat-header-info {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
}
#ksprod-chat-widget .ksprod-chat-avatar {
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, var(--ksprod-primary), #3db8ce) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: bold !important;
color: white !important;
font-size: 16px !important;
position: relative !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: 0 4px 12px rgba(78, 202, 224, 0.3) !important;
}
#ksprod-chat-widget .ksprod-online-indicator {
position: absolute !important;
bottom: 0 !important;
right: 0 !important;
width: 12px !important;
height: 12px !important;
border-radius: 50% !important;
background: var(--ksprod-text-muted) !important;
border: 2px solid var(--ksprod-darker) !important;
margin: 0 !important;
padding: 0 !important;
}
#ksprod-chat-widget .ksprod-online-indicator.online {
background: var(--ksprod-success) !important;
}
#ksprod-chat-widget .ksprod-chat-header-text h3 {
color: white !important;
font-size: 16px !important;
font-weight: 600 !important;
margin: 0 !important;
padding: 0 !important;
}
#ksprod-chat-widget .ksprod-chat-header-text p {
color: var(--ksprod-text-muted) !important;
font-size: 13px !important;
margin: 0 !important;
padding: 0 !important;
}
#ksprod-chat-widget .ksprod-chat-minimize {
display: none !important;
}
#ksprod-chat-widget .ksprod-header-buttons {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
#ksprod-chat-widget .ksprod-header-btn {
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
background: rgba(255,255,255,0.1) !important;
border: none !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background 0.2s !important;
}
#ksprod-chat-widget .ksprod-header-btn:hover {
background: rgba(255,255,255,0.2) !important;
}
#ksprod-chat-widget .ksprod-header-btn svg {
width: 18px !important;
height: 18px !important;
color: white !important;
}
#ksprod-chat-widget .ksprod-header-btn.ksprod-close-conv-btn:hover {
background: rgba(239, 68, 68, 0.3) !important;
}
#ksprod-chat-widget .ksprod-header-btn.ksprod-close-conv-btn:hover svg {
color: #ef4444 !important;
} #ksprod-chat-widget .ksprod-chat-prechat,
#ksprod-chat-widget .ksprod-chat-offline {
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 24px !important;
overflow-y: auto !important;
min-height: 0 !important;
width: 100% !important;
margin: 0 !important;
}
#ksprod-chat-widget .ksprod-chat-prechat-content,
#ksprod-chat-widget .ksprod-chat-offline-content {
text-align: center !important;
width: 100% !important;
max-width: 320px !important;
margin: 0 auto !important;
padding: 0 !important;
}
#ksprod-chat-widget .ksprod-chat-prechat-content h4,
#ksprod-chat-widget .ksprod-chat-offline-content h4 {
color: white !important;
font-size: 20px !important;
font-weight: 600 !important;
margin: 0 0 8px 0 !important;
padding: 0 !important;
}
#ksprod-chat-widget .ksprod-chat-prechat-content p,
#ksprod-chat-widget .ksprod-chat-offline-content p {
color: var(--ksprod-text-muted) !important;
font-size: 14px !important;
margin: 0 0 20px 0 !important;
padding: 0 !important;
}
#ksprod-chat-widget .ksprod-offline-icon {
width: 50px !important;
height: 50px !important;
color: var(--ksprod-primary) !important;
margin: 0 auto 15px auto !important;
display: block !important;
}
#ksprod-chat-widget .ksprod-chat-offline-content p.ksprod-hours-info,
#ksprod-chat-widget .ksprod-hours-info,
.ksprod-hours-info {
font-size: 13px !important;
color: #9ca3af !important;
margin-top: 30px !important;
margin-bottom: 0 !important;
padding-top: 20px !important;
border-top: 1px solid rgba(255,255,255,0.1) !important;
}
.ksprod-hours-grid {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
.ksprod-hours-title {
font-size: 11px !important;
font-weight: 600 !important;
color: #9ca3af !important;
margin-bottom: 8px !important;
text-align: center !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.ksprod-hours-row {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 8px !important;
padding: 3px 0 !important;
font-size: 12px !important;
}
.ksprod-hours-row.closed {
opacity: 0.35 !important;
}
.ksprod-hours-day {
font-weight: 500 !important;
color: #d1d5db !important;
min-width: 70px !important;
text-align: right !important;
}
.ksprod-hours-time {
color: #4ECAE0 !important;
font-weight: 600 !important;
min-width: 85px !important;
text-align: left !important;
}
.ksprod-hours-row.closed .ksprod-hours-time {
color: #ef4444 !important;
} #ksprod-chat-widget .ksprod-form-group {
margin: 0 0 12px 0 !important;
padding: 0 !important;
width: 100% !important;
}
#ksprod-chat-widget .ksprod-form-group input,
#ksprod-chat-widget .ksprod-form-group textarea {
width: 100% !important;
padding: 14px 18px !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 12px !important;
background: rgba(26, 26, 46, 0.8) !important;
color: white !important;
font-size: 14px !important;
height: auto !important;
min-height: 48px !important;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important;
-webkit-appearance: none !important;
appearance: none !important;
margin: 0 !important;
outline: none !important;
transition: all 0.2s ease !important;
}
#ksprod-chat-widget .ksprod-form-group input:focus,
#ksprod-chat-widget .ksprod-form-group textarea:focus {
border-color: var(--ksprod-primary) !important;
box-shadow: 0 0 0 3px rgba(78, 202, 224, 0.15), inset 0 2px 4px rgba(0,0,0,0.1) !important;
outline: none !important;
background: rgba(26, 26, 46, 1) !important;
}
#ksprod-chat-widget .ksprod-form-group input::placeholder,
#ksprod-chat-widget .ksprod-form-group textarea::placeholder {
color: var(--ksprod-text-muted) !important;
opacity: 1 !important;
} #ksprod-chat-widget .ksprod-subject-label {
font-size: 13px !important;
color: var(--ksprod-text-light) !important;
margin: 15px 0 10px 0 !important;
text-align: center !important;
}
#ksprod-chat-widget .ksprod-subject-buttons {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
margin-bottom: 15px !important;
}
#ksprod-chat-widget .ksprod-subject-btn {
padding: 12px 10px !important;
background: rgba(255,255,255,0.03) !important;
border: 1px solid rgba(255,255,255,0.08) !important;
border-radius: 10px !important;
color: rgba(255,255,255,0.8) !important;
font-size: 12px !important;
cursor: pointer !important;
transition: all 0.25s ease !important;
}
#ksprod-chat-widget .ksprod-subject-btn:hover {
background: rgba(78,202,224,0.1) !important;
border-color: rgba(78,202,224,0.4) !important;
transform: translateY(-2px) !important;
}
#ksprod-chat-widget .ksprod-subject-btn.selected {
background: rgba(78,202,224,0.15) !important;
border-color: var(--ksprod-primary) !important;
color: var(--ksprod-primary) !important;
box-shadow: 0 0 0 3px rgba(78, 202, 224, 0.1) !important;
}
#ksprod-chat-widget .ksprod-chat-submit-btn {
width: 100% !important;
padding: 16px !important;
background: linear-gradient(135deg, var(--ksprod-primary), var(--ksprod-secondary)) !important;
color: white !important;
border: none !important;
border-radius: 12px !important;
font-size: 15px !important;
font-weight: 600 !important;
cursor: pointer !important;
height: auto !important;
min-height: 52px !important;
text-align: center !important;
display: block !important;
margin: 0 !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 15px rgba(78, 202, 224, 0.25) !important;
letter-spacing: 0.3px !important;
}
#ksprod-chat-widget .ksprod-chat-submit-btn:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(78, 202, 224, 0.4) !important;
background: linear-gradient(135deg, #5dd4ea, var(--ksprod-secondary)) !important;
}
#ksprod-chat-widget .ksprod-chat-submit-btn:disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
} #ksprod-chat-widget .ksprod-chat-messages {
flex: 1 1 auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 16px !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
background: var(--ksprod-darker) !important;
min-height: 0 !important;
margin: 0 !important;
}
#ksprod-chat-widget .ksprod-messages-list {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
} #ksprod-chat-widget .ksprod-message {
max-width: 80% !important;
width: fit-content !important;
padding: 12px 16px !important;
border-radius: 18px !important;
font-size: 14px !important;
line-height: 1.5 !important;
word-wrap: break-word !important;
word-break: break-word !important;
display: block !important;
animation: ksprodFadeIn 0.3s ease !important;
}
@keyframes ksprodFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
} #ksprod-chat-widget .ksprod-message.visitor {
align-self: flex-end !important;
margin-left: 5% !important;
margin-right: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
#ksprod-chat-widget .ksprod-message.visitor .ksprod-message-content {
background: linear-gradient(135deg, rgba(44, 95, 141, 0.5), rgba(30, 60, 100, 0.6)) !important;
color: white !important;
border-radius: 18px !important;
border-bottom-right-radius: 6px !important;
padding: 12px 16px !important;
border: 1px solid rgba(78, 202, 224, 0.2) !important;
border-right: 3px solid var(--ksprod-primary) !important;
box-shadow: 0 3px 12px rgba(78, 202, 224, 0.1) !important;
} #ksprod-chat-widget .ksprod-message.admin {
align-self: flex-start !important;
margin-right: 5% !important;
margin-left: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
#ksprod-chat-widget .ksprod-message.admin .ksprod-message-content {
background: linear-gradient(135deg, rgba(44, 95, 141, 0.5), rgba(30, 60, 100, 0.6)) !important;
color: white !important;
border-radius: 18px !important;
border-bottom-left-radius: 6px !important;
padding: 12px 16px !important;
border: 1px solid rgba(78, 202, 224, 0.2) !important;
border-left: 3px solid var(--ksprod-primary) !important;
box-shadow: 0 3px 12px rgba(78, 202, 224, 0.1) !important;
} #ksprod-chat-widget .ksprod-message.welcome {
background: linear-gradient(135deg, rgba(44, 95, 141, 0.4), rgba(78, 202, 224, 0.2)) !important;
border: 1px solid rgba(78, 202, 224, 0.3) !important;
border-left: 4px solid var(--ksprod-primary) !important;
border-radius: 4px 18px 18px 4px !important;
padding: 24px 20px 18px 20px !important;
max-width: 92% !important;
box-shadow: 0 4px 20px rgba(78, 202, 224, 0.15) !important;
position: relative !important;
margin-top: 20px !important;
margin-bottom: 8px !important;
align-self: flex-start !important;
color: white !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1.6 !important;
text-align: left !important;
}
#ksprod-chat-widget .ksprod-message.welcome::before {
content: '👋' !important;
position: absolute !important;
top: -14px !important;
left: 12px !important;
font-size: 22px !important;
background: var(--ksprod-darker) !important;
padding: 4px 8px !important;
border-radius: 12px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
} #ksprod-chat-widget .ksprod-message.system {
align-self: center !important;
margin: 0 auto !important;
background: rgba(255,255,255,0.05) !important;
color: var(--ksprod-text-muted) !important;
font-size: 13px !important;
text-align: center !important;
max-width: 90% !important;
} #ksprod-chat-widget .ksprod-system-closed,
.ksprod-system-closed {
padding: 5px 0 !important;
line-height: 1.6 !important;
}
#ksprod-chat-widget .ksprod-closed-form,
.ksprod-closed-form {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
margin-top: 12px !important;
}
#ksprod-chat-widget .ksprod-closed-form input,
.ksprod-closed-form input {
padding: 10px 12px !important;
border: 1px solid rgba(255,255,255,0.15) !important;
border-radius: 8px !important;
background: rgba(0,0,0,0.3) !important;
color: white !important;
font-size: 13px !important;
}
#ksprod-chat-widget .ksprod-closed-form input::placeholder,
.ksprod-closed-form input::placeholder {
color: rgba(255,255,255,0.4) !important;
}
#ksprod-chat-widget .ksprod-closed-form button,
.ksprod-closed-form button {
padding: 10px 16px !important;
background: linear-gradient(135deg, #4ECAE0, #2C5F8D) !important;
border: none !important;
border-radius: 8px !important;
color: white !important;
font-weight: 600 !important;
font-size: 13px !important;
cursor: pointer !important;
margin-top: 4px !important;
}
#ksprod-chat-widget .ksprod-closed-form button:hover,
.ksprod-closed-form button:hover {
opacity: 0.9 !important;
}
#ksprod-chat-widget .ksprod-message-time {
font-size: 11px !important;
color: rgba(255,255,255,0.6) !important;
margin-top: 4px !important;
display: block !important;
padding: 0 !important;
}
#ksprod-chat-widget .ksprod-message.admin .ksprod-message-time {
color: var(--ksprod-text-muted) !important;
} #ksprod-chat-widget .ksprod-read-indicator,
.ksprod-read-indicator {
margin-left: 8px !important;
color: #4ECAE0 !important;
font-size: 10px !important;
} #ksprod-chat-widget .ksprod-message-image {
max-width: 100% !important;
width: auto !important;
height: auto !important;
max-height: 200px !important;
border-radius: 12px !important;
cursor: pointer !important;
display: block !important;
}
#ksprod-chat-widget .ksprod-message-content {
overflow: hidden !important;
} #ksprod-chat-widget .ksprod-message a {
color: inherit !important;
text-decoration: underline !important;
} #ksprod-chat-widget .ksprod-typing-indicator {
display: flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 12px !important;
color: var(--ksprod-text-muted) !important;
font-size: 13px !important;
margin: 0 !important;
}
#ksprod-chat-widget .ksprod-typing-dots {
display: flex !important;
gap: 3px !important;
margin: 0 !important;
padding: 0 !important;
}
#ksprod-chat-widget .ksprod-typing-dots span {
width: 6px !important;
height: 6px !important;
background: var(--ksprod-primary) !important;
border-radius: 50% !important;
animation: ksprodTyping 1.4s infinite !important;
margin: 0 !important;
padding: 0 !important;
}
#ksprod-chat-widget .ksprod-typing-dots span:nth-child(2) { animation-delay: 0.2s !important; }
#ksprod-chat-widget .ksprod-typing-dots span:nth-child(3) { animation-delay: 0.4s !important; }
@keyframes ksprodTyping {
0%, 60%, 100% { transform: translateY(0); }
30% { transform: translateY(-5px); }
} #ksprod-chat-widget .ksprod-chat-input {
padding: 14px 16px !important;
background: var(--ksprod-dark) !important;
border-top: 1px solid rgba(78, 202, 224, 0.1) !important;
flex-shrink: 0 !important;
width: 100% !important;
position: relative !important;
margin: 0 !important;
}
#ksprod-chat-widget .ksprod-input-wrapper {
display: flex !important;
align-items: center !important;
gap: 8px !important;
background: rgba(22, 33, 62, 0.8) !important;
border-radius: 28px !important;
padding: 6px 14px !important;
width: 100% !important;
margin: 0 !important;
border: 1px solid rgba(255,255,255,0.05) !important;
transition: border-color 0.2s ease !important;
}
#ksprod-chat-widget .ksprod-input-wrapper:focus-within {
border-color: rgba(78, 202, 224, 0.3) !important;
}
#ksprod-chat-widget .ksprod-input-btn {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
border-radius: 50% !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
#ksprod-chat-widget .ksprod-input-btn:hover {
background: rgba(255,255,255,0.1) !important;
}
#ksprod-chat-widget .ksprod-input-btn svg {
width: 20px !important;
height: 20px !important;
color: var(--ksprod-text-muted) !important;
}
#ksprod-chat-widget .ksprod-close-conv-btn:hover {
background: rgba(239,68,68,0.2) !important;
}
#ksprod-chat-widget .ksprod-close-conv-btn:hover svg {
color: var(--ksprod-error) !important;
}
#ksprod-message-input {
flex: 1 1 auto !important;
background: transparent !important;
border: none !important;
color: white !important;
font-size: 14px !important;
padding: 8px !important;
outline: none !important;
min-width: 0 !important;
min-height: 36px !important;
max-height: 100px !important;
margin: 0 !important;
resize: none !important;
overflow-y: auto !important;
line-height: 1.4 !important;
}
#ksprod-message-input::placeholder {
color: var(--ksprod-text-muted) !important;
}
#ksprod-chat-widget .ksprod-send-btn {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
border-radius: 50% !important;
background: linear-gradient(135deg, var(--ksprod-primary), #3db8ce) !important;
border: none !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
padding: 0 !important;
margin: 0 !important;
transition: all 0.2s ease !important;
box-shadow: 0 3px 10px rgba(78, 202, 224, 0.3) !important;
}
#ksprod-chat-widget .ksprod-send-btn:hover {
background: linear-gradient(135deg, #5dd4ea, var(--ksprod-primary)) !important;
transform: scale(1.08) !important;
box-shadow: 0 5px 15px rgba(78, 202, 224, 0.4) !important;
}
#ksprod-chat-widget .ksprod-send-btn:disabled {
background: var(--ksprod-text-muted) !important;
cursor: not-allowed !important;
}
#ksprod-chat-widget .ksprod-send-btn svg {
width: 20px !important;
height: 20px !important;
color: white !important;
} #ksprod-chat-widget .ksprod-emoji-picker {
position: absolute !important;
bottom: 70px !important;
left: 12px !important;
right: 12px !important;
background: var(--ksprod-dark) !important;
border-radius: 12px !important;
padding: 12px !important;
box-shadow: 0 -5px 20px rgba(0,0,0,0.3) !important;
max-height: 200px !important;
overflow-y: auto !important;
margin: 0 !important;
}
#ksprod-chat-widget .ksprod-emoji-grid {
display: grid !important;
grid-template-columns: repeat(8, 1fr) !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
}
#ksprod-chat-widget .ksprod-emoji-grid button {
width: 32px !important;
height: 32px !important;
background: transparent !important;
border: none !important;
font-size: 20px !important;
cursor: pointer !important;
border-radius: 6px !important;
padding: 0 !important;
margin: 0 !important;
}
#ksprod-chat-widget .ksprod-emoji-grid button:hover {
background: rgba(255,255,255,0.1) !important;
} #ksprod-chat-widget .ksprod-rating-popup {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: rgba(0,0,0,0.8) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 20px !important;
margin: 0 !important;
z-index: 10 !important;
}
#ksprod-chat-widget .ksprod-rating-content {
background: var(--ksprod-darker) !important;
padding: 24px !important;
border-radius: 16px !important;
text-align: center !important;
width: 100% !important;
margin: 0 !important;
}
#ksprod-chat-widget .ksprod-rating-content h4 {
color: white !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
}
#ksprod-chat-widget .ksprod-rating-stars {
display: flex !important;
justify-content: center !important;
gap: 8px !important;
margin: 0 0 16px 0 !important;
padding: 0 !important;
}
#ksprod-chat-widget .ksprod-rating-stars button {
font-size: 32px !important;
background: none !important;
border: none !important;
color: var(--ksprod-text-muted) !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
}
#ksprod-chat-widget .ksprod-rating-stars button:hover,
#ksprod-chat-widget .ksprod-rating-stars button.active {
color: #fbbf24 !important;
transform: scale(1.2) !important;
}
#ksprod-rating-comment {
width: 100% !important;
padding: 12px !important;
border: 1px solid rgba(255,255,255,0.1) !important;
border-radius: 10px !important;
background: var(--ksprod-dark) !important;
color: white !important;
font-size: 14px !important;
margin: 0 0 12px 0 !important;
resize: none !important;
}
#ksprod-chat-widget .ksprod-skip-rating {
background: transparent !important;
border: none !important;
color: var(--ksprod-text-muted) !important;
cursor: pointer !important;
font-size: 14px !important;
margin-top: 8px !important;
padding: 8px 16px !important;
}
#ksprod-chat-widget .ksprod-skip-rating:hover {
color: white !important;
} #ksprod-file-input {
display: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
position: absolute !important;
pointer-events: none !important;
} #ksprod-chat-widget .ksprod-chat-badge {
display: none !important;
} #ksprod-chat-widget .hidden {
display: none !important;
} #ksprod-chat-widget .ksprod-chat-messages::-webkit-scrollbar,
#ksprod-chat-widget .ksprod-emoji-picker::-webkit-scrollbar {
width: 6px;
}
#ksprod-chat-widget .ksprod-chat-messages::-webkit-scrollbar-track,
#ksprod-chat-widget .ksprod-emoji-picker::-webkit-scrollbar-track {
background: transparent;
}
#ksprod-chat-widget .ksprod-chat-messages::-webkit-scrollbar-thumb,
#ksprod-chat-widget .ksprod-emoji-picker::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 3px;
} .ksprod-chat-page {
max-width: 900px !important;
margin: 0 auto !important;
padding: 0 20px 60px 20px !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif !important;
} .ksprod-chat-hero {
text-align: center !important;
padding: 50px 20px 40px 20px !important;
margin: 0 !important;
}
.ksprod-chat-hero-icon {
width: 70px !important;
height: 70px !important;
margin: 0 auto 20px auto !important;
background: linear-gradient(135deg, var(--ksprod-primary), var(--ksprod-secondary)) !important;
border-radius: 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 10px 30px rgba(78, 202, 224, 0.3) !important;
}
.ksprod-chat-hero-icon svg {
width: 36px !important;
height: 36px !important;
color: white !important;
}
.ksprod-chat-hero-title {
font-size: 32px !important;
font-weight: 700 !important;
color: #1a1a2e !important;
margin: 0 0 12px 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
}
.ksprod-chat-hero-subtitle {
font-size: 17px !important;
color: #6b7280 !important;
margin: 0 auto !important;
padding: 0 !important;
max-width: 500px !important;
line-height: 1.6 !important;
} .ksprod-chat-features {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
margin: 0 0 40px 0 !important;
padding: 0 !important;
}
.ksprod-chat-feature {
text-align: center !important;
padding: 24px 16px !important;
background: #f8fafc !important;
border-radius: 16px !important;
border: 1px solid #e5e7eb !important;
transition: transform 0.2s, box-shadow 0.2s !important;
margin: 0 !important;
}
.ksprod-chat-feature:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important;
}
.ksprod-chat-feature-icon {
width: 48px !important;
height: 48px !important;
margin: 0 auto 12px auto !important;
background: linear-gradient(135deg, rgba(78,202,224,0.1), rgba(44,95,141,0.1)) !important;
border-radius: 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
.ksprod-chat-feature-icon svg {
width: 24px !important;
height: 24px !important;
color: var(--ksprod-secondary) !important;
}
.ksprod-chat-feature h3 {
font-size: 15px !important;
font-weight: 600 !important;
color: #1a1a2e !important;
margin: 0 0 6px 0 !important;
padding: 0 !important;
}
.ksprod-chat-feature p {
font-size: 13px !important;
color: #6b7280 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
} .ksprod-chat-alternatives {
margin: 50px 0 0 0 !important;
padding: 0 !important;
text-align: center !important;
}
.ksprod-chat-alternatives h2 {
font-size: 22px !important;
font-weight: 600 !important;
color: #1a1a2e !important;
margin: 0 0 24px 0 !important;
padding: 0 !important;
}
.ksprod-chat-alternatives-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 20px !important;
margin: 0 !important;
padding: 0 !important;
}
.ksprod-chat-alt-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 28px 16px !important;
background: #ffffff !important;
border-radius: 16px !important;
border: 1px solid #e5e7eb !important;
text-decoration: none !important;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s !important;
margin: 0 !important;
cursor: pointer !important;
}
.ksprod-chat-alt-card:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 25px rgba(78,202,224,0.15) !important;
border-color: var(--ksprod-primary) !important;
}
.ksprod-chat-alt-icon {
width: 52px !important;
height: 52px !important;
margin: 0 0 14px 0 !important;
background: linear-gradient(135deg, var(--ksprod-primary), var(--ksprod-secondary)) !important;
border-radius: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
}
.ksprod-chat-alt-icon svg {
width: 24px !important;
height: 24px !important;
color: white !important;
}
.ksprod-chat-alt-card h3 {
font-size: 16px !important;
font-weight: 600 !important;
color: #1a1a2e !important;
margin: 0 0 6px 0 !important;
padding: 0 !important;
}
.ksprod-chat-alt-card p {
font-size: 14px !important;
color: var(--ksprod-secondary) !important;
margin: 0 !important;
padding: 0 !important;
} @media (max-width: 768px) {
.ksprod-chat-features {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.ksprod-chat-feature {
display: flex !important;
align-items: center !important;
text-align: left !important;
gap: 16px !important;
padding: 16px 20px !important;
}
.ksprod-chat-feature-icon {
margin: 0 !important;
flex-shrink: 0 !important;
}
.ksprod-chat-alternatives-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.ksprod-chat-hero-title {
font-size: 26px !important;
}
.ksprod-chat-hero-subtitle {
font-size: 15px !important;
}
} #ksprod-chat-widget .ksprod-chat-loader {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: var(--ksprod-darker) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
z-index: 100 !important;
border-radius: 20px !important;
}
#ksprod-chat-widget .ksprod-chat-loader.hidden {
display: none !important;
}
#ksprod-chat-widget .ksprod-loader-content {
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
#ksprod-chat-widget .ksprod-loader-circles {
position: relative !important;
width: 180px !important;
height: 180px !important;
margin: 0 0 40px 0 !important;
}
#ksprod-chat-widget .ksprod-loader-circle {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
border-radius: 50% !important;
border: 3px solid transparent !important;
animation: ksprodLoaderPulse 2s ease-out infinite !important;
}
#ksprod-chat-widget .ksprod-loader-circle:nth-child(1) {
width: 100px !important;
height: 100px !important;
border-color: rgba(78, 202, 224, 0.7) !important;
animation-delay: 0s !important;
}
#ksprod-chat-widget .ksprod-loader-circle:nth-child(2) {
width: 100px !important;
height: 100px !important;
border-color: rgba(78, 202, 224, 0.5) !important;
animation-delay: 0.6s !important;
}
#ksprod-chat-widget .ksprod-loader-circle:nth-child(3) {
width: 100px !important;
height: 100px !important;
border-color: rgba(78, 202, 224, 0.3) !important;
animation-delay: 1.2s !important;
}
@keyframes ksprodLoaderPulse {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1.8);
opacity: 0;
}
}
#ksprod-chat-widget .ksprod-loader-logo {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 80px !important;
height: auto !important;
background: transparent !important;
border-radius: 0 !important;
animation: ksprodLogoFloat 1.5s ease-in-out infinite !important;
filter: drop-shadow(0 0 20px rgba(78, 202, 224, 0.5)) !important;
}
@keyframes ksprodLogoFloat {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translate(-50%, -50%) scale(1.1);
}
} #ksprod-chat-widget .ksprod-loader-bar {
width: 200px !important;
height: 8px !important;
background: rgba(255, 255, 255, 0.15) !important;
border-radius: 4px !important;
overflow: hidden !important;
position: relative !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#ksprod-chat-widget .ksprod-loader-progress {
height: 100% !important;
width: 0%;
background: linear-gradient(90deg, #4ECAE0, #2C5F8D) !important;
border-radius: 4px !important;
transition: width 0.3s ease-out !important;
box-shadow: 0 0 10px rgba(78, 202, 224, 0.6), 0 0 20px rgba(78, 202, 224, 0.3) !important;
} @media (max-width: 600px) { .ksprod-chat-hero,
.ksprod-chat-features,
.ksprod-chat-alternatives {
display: none !important;
}
.ksprod-chat-page {
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
height: 100vh !important;
display: flex !important;
flex-direction: column !important;
}
#ksprod-chat-widget {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
#ksprod-chat-window {
border-radius: 0 !important;
height: 100% !important;
max-height: 100% !important;
min-height: 0 !important;
flex: 1 1 auto !important;
}
} #ksprod-chat-widget .ksprod-message {
display: block !important;
position: relative !important;
}
#ksprod-chat-widget .ksprod-message-content {
position: relative !important;
}
#ksprod-chat-widget .ksprod-avatar {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
font-weight: 600 !important;
position: absolute !important;
top: -2px !important;
right: 8px !important;
z-index: 2 !important;
border: 2px solid var(--ksprod-darker) !important;
}
#ksprod-chat-widget .ksprod-message.admin .ksprod-avatar {
right: auto !important;
left: 8px !important;
}
#ksprod-chat-widget .ksprod-avatar-admin {
background: #fff !important;
padding: 2px !important;
}
#ksprod-chat-widget .ksprod-avatar-admin img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
border-radius: 50% !important;
}
#ksprod-chat-widget .ksprod-avatar-visitor {
background: linear-gradient(135deg, var(--ksprod-primary), var(--ksprod-secondary)) !important;
color: white !important;
}
#ksprod-chat-widget .ksprod-message-content {
flex: 1 !important;
min-width: 0 !important;
}
#ksprod-chat-widget .ksprod-message.system .ksprod-avatar {
display: none !important;
}
#ksprod-chat-widget .ksprod-message.welcome .ksprod-avatar {
display: none !important;
} @media (min-width: 768px) {
.chat-app-body #ksprod-chat-widget .ksprod-messages-list {
max-width: 950px !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
.chat-app-body #ksprod-chat-widget .ksprod-message {
max-width: 85% !important;
}
.chat-app-body #ksprod-chat-widget .ksprod-message .ksprod-message-content {
font-size: 16px !important;
padding: 14px 18px !important;
position: relative !important;
padding-top: 28px !important;
}
.chat-app-body #ksprod-chat-widget .ksprod-message.visitor .ksprod-message-content::before {
content: 'Vous' !important;
position: absolute !important;
top: 8px !important;
left: 16px !important;
font-size: 11px !important;
color: rgba(255,255,255,0.7) !important;
font-weight: 600 !important;
}
.chat-app-body #ksprod-chat-widget .ksprod-message.admin .ksprod-message-content {
min-width: 150px !important;
}
.chat-app-body #ksprod-chat-widget .ksprod-message.admin .ksprod-message-content::before {
content: 'Kevin de KSPROD.fr' !important;
position: absolute !important;
top: 8px !important;
left: 16px !important;
font-size: 11px !important;
color: var(--ksprod-primary) !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
.chat-app-body #ksprod-chat-widget .ksprod-message.welcome .ksprod-message-content::before {
content: '👋 Kevin de KSPROD.fr' !important;
}
.chat-app-body #ksprod-chat-widget .ksprod-typing-indicator {
max-width: 950px !important;
margin: 0 auto !important;
padding-left: 20px !important;
}
}