/* Scoped widget: does not alter site direction. Brand tokens on .smart-chat-root (teal + royal gold accent). */
.smart-chat-root {
font-family: var(--smart-chat-font, "Vazirmatn", "IRANSansWeb", ui-sans-serif, system-ui, sans-serif);
line-height: normal;
text-align: start;
}
.smart-chat-root,
.smart-chat-root * {
box-sizing: border-box;
}
.smart-chat-root .smart-chat-bubble {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 999999;
width: 56px;
height: 56px;
border-radius: 50%;
background:
radial-gradient(120% 120% at 25% 25%, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%),
linear-gradient(145deg, var(--smart-chat-primary), var(--smart-chat-accent));
box-shadow: var(--smart-chat-shadow);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
outline: none;
border: 1px solid rgba(255, 255, 255, 0.25);
animation: smart-chat-pulse 2.5s ease-in-out infinite;
backdrop-filter: saturate(140%) blur(4px);
-webkit-backdrop-filter: saturate(140%) blur(4px);
transition: transform 0.2s ease, box-shadow 0.2s ease;
color: #fff;
}
.smart-chat-root .smart-chat-bubble:hover {
transform: scale(1.08);
box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
}
.smart-chat-root .smart-chat-bubble:focus-visible {
outline: 3px solid var(--smart-chat-jasmine);
outline-offset: 2px;
}
.smart-chat-root .smart-chat-bubble svg,
.smart-chat-root .smart-chat-bubble .smart-chat-bubble-icon {
width: 28px;
height: 28px;
flex-shrink: 0;
}
.smart-chat-root .smart-chat-panel {
position: fixed;
bottom: 92px;
right: 24px;
z-index: 999999;
width: min(420px, calc(100vw - 32px));
max-height: min(88vh, 580px);
border-radius: 20px;
color-scheme: dark;
background: rgba(15, 23, 42, 0.97);
color: #e2e8f0;
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.04);
overflow: hidden;
display: none;
backdrop-filter: blur(16px) saturate(120%);
-webkit-backdrop-filter: blur(16px) saturate(120%);
flex-direction: column;
}
.smart-chat-root .smart-chat-panel.is-open {
display: flex;
animation: smart-chat-panel-in 0.25s ease-out;
}
@keyframes smart-chat-panel-in {
from {
opacity: 0;
transform: translateY(8px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 480px) {
.smart-chat-root .smart-chat-panel {
width: calc(100vw - 20px);
bottom: 88px;
right: 10px;
left: 10px;
max-height: min(78vh, 540px);
}
}
.smart-chat-root .smart-chat-header {
position: relative;
background: linear-gradient(135deg,
color-mix(in srgb, var(--smart-chat-primary) 28%, transparent),
color-mix(in srgb, var(--smart-chat-accent) 18%, transparent));
padding: 14px 16px;
display: flex;
align-items: center;
gap: 12px;
justify-content: flex-start;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
flex-shrink: 0;
min-height: 56px;
}
.smart-chat-root .smart-chat-header-actions {
margin-inline-start: auto;
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.smart-chat-root .smart-chat-brand {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 1;
}
.smart-chat-root .smart-chat-brand-logo {
width: 40px;
height: 40px;
border-radius: 12px;
object-fit: contain;
flex-shrink: 0;
background: rgba(255, 255, 255, 0.06);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.smart-chat-root .smart-chat-brand-fallback {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, var(--smart-chat-primary), var(--smart-chat-accent));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.smart-chat-root .smart-chat-title-wrap {
min-width: 0;
flex: 1;
}
.smart-chat-root .smart-chat-title {
font-weight: 700;
letter-spacing: 0.2px;
font-size: clamp(14px, 3.5vw, 16px);
line-height: 1.35;
color: #f8fafc;
text-shadow: 0 1px 1px rgba(15, 23, 42, 0.35);
}
.smart-chat-root .smart-chat-subline {
margin-top: 4px;
font-size: 12.5px;
line-height: 1.4;
opacity: 0.92;
}
.smart-chat-root .smart-chat-phone {
color: #e2e8f0;
text-decoration: none;
font-weight: 600;
border-bottom: 1px solid color-mix(in srgb, var(--smart-chat-jasmine) 55%, transparent);
}
.smart-chat-root .smart-chat-phone:hover {
color: #fff;
}
.smart-chat-root .smart-chat-header .smart-chat-close {
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.14);
color: #f1f5f9;
border: 1px solid rgba(255, 255, 255, 0.14);
cursor: pointer;
font-size: 22px;
font-weight: 300;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
flex-shrink: 0;
}
.smart-chat-root .smart-chat-header .smart-chat-close:hover {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
.smart-chat-root .smart-chat-btn--ghost {
padding: 8px 12px;
min-height: 36px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.08) !important;
color: #e2e8f0 !important;
-webkit-text-fill-color: #e2e8f0;
border: 1px solid rgba(255, 255, 255, 0.12);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.smart-chat-root .smart-chat-btn--ghost:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.14) !important;
}
.smart-chat-root .smart-chat-btn--ghost:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.smart-chat-root .smart-chat-surface {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.smart-chat-root .smart-chat-quick {
flex-shrink: 0;
padding: 10px 14px 8px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(15, 23, 42, 0.35);
}
.smart-chat-root .smart-chat-quick[hidden] {
display: none !important;
}
.smart-chat-root .smart-chat-quick-block + .smart-chat-quick-block {
margin-top: 10px;
}
.smart-chat-root .smart-chat-faq-heading {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(226, 232, 240, 0.72);
margin-bottom: 8px;
}
.smart-chat-root .smart-chat-faq-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.smart-chat-root .smart-chat-chip {
display: inline-flex;
align-items: center;
max-width: 100%;
padding: 8px 12px;
border-radius: 999px;
font-size: 12.5px;
line-height: 1.35;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(30, 41, 59, 0.65);
color: #e2e8f0;
text-align: start;
text-decoration: none;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.smart-chat-root .smart-chat-chip--link {
font-weight: 600;
color: color-mix(in srgb, var(--smart-chat-jasmine) 92%, #fff);
}
.smart-chat-root .smart-chat-chip:hover {
background: rgba(51, 65, 85, 0.85);
border-color: rgba(255, 255, 255, 0.18);
}
.smart-chat-root .smart-chat-chip--faq:active {
transform: scale(0.98);
}
.smart-chat-root .smart-chat-body {
flex: 1;
min-height: 140px;
overflow-y: auto;
overflow-x: hidden;
padding: 16px;
scroll-behavior: smooth;
}
.smart-chat-root .smart-chat-msg {
margin: 10px 0;
display: flex;
gap: 10px;
}
.smart-chat-root .smart-chat-msg .avatar {
flex: 0 0 28px;
width: 28px;
height: 28px;
border-radius: 50%;
background: conic-gradient(from 20deg, var(--smart-chat-primary), var(--smart-chat-accent), var(--smart-chat-jasmine), var(--smart-chat-primary));
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}
.smart-chat-root .smart-chat-msg .avatar.avatar--logo {
border-radius: 8px;
background: rgba(255, 255, 255, 0.08);
object-fit: contain;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.smart-chat-root .smart-chat-msg .bubble {
padding: 12px 14px;
border-radius: 14px;
background: rgba(30, 41, 59, 0.9);
border: 1px solid rgba(255, 255, 255, 0.06);
line-height: 1.65;
font-size: 14.5px;
word-wrap: break-word;
}
.smart-chat-root .smart-chat-msg.user .bubble {
background: color-mix(in srgb, var(--smart-chat-primary) 22%, rgba(30, 41, 59, 0.95));
border: 1px solid rgba(255, 255, 255, 0.08);
}
.smart-chat-root .smart-chat-input {
display: flex;
gap: 10px;
align-items: stretch;
padding: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(15, 23, 42, 0.98) !important;
flex-shrink: 0;
}
/* Dedicated class + !important beats many WP/theme input rules (often white bg + inherited light text). */
.smart-chat-root .smart-chat-input input.smart-chat-field,
.smart-chat-root .smart-chat-input input.smart-chat-field[type="text"] {
flex: 1;
min-width: 0;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.18) !important;
background-color: #1e293b !important;
background-image: none !important;
color: #f1f5f9 !important;
-webkit-text-fill-color: #f1f5f9;
caret-color: #f1f5f9;
font-family: var(--smart-chat-font, "Vazirmatn", ui-sans-serif, system-ui, sans-serif);
font-size: 15px;
min-height: 44px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12);
}
.smart-chat-root .smart-chat-input input.smart-chat-field::placeholder {
color: rgba(226, 232, 240, 0.72) !important;
opacity: 1;
}
.smart-chat-root .smart-chat-input input.smart-chat-field:focus {
outline: none !important;
border-color: color-mix(in srgb, var(--smart-chat-accent) 55%, rgba(255, 255, 255, 0.25)) !important;
box-shadow:
inset 0 1px 2px rgba(0, 0, 0, 0.12),
0 0 0 2px color-mix(in srgb, var(--smart-chat-primary) 38%, transparent);
}
.smart-chat-root .smart-chat-input input.smart-chat-field:-webkit-autofill,
.smart-chat-root .smart-chat-input input.smart-chat-field:-webkit-autofill:hover,
.smart-chat-root .smart-chat-input input.smart-chat-field:-webkit-autofill:focus {
-webkit-text-fill-color: #f1f5f9 !important;
caret-color: #f1f5f9;
box-shadow: 0 0 0 1000px #1e293b inset !important;
transition: background-color 99999s ease-out;
}
.smart-chat-root .smart-chat-panel .smart-chat-btn {
padding: 12px 16px;
border-radius: 12px;
background: linear-gradient(135deg, var(--smart-chat-primary), var(--smart-chat-accent)) !important;
color: #0f172a !important;
-webkit-text-fill-color: #0f172a;
border: 1px solid rgba(255, 255, 255, 0.22);
cursor: pointer;
font-weight: 600;
font-size: 14px;
transition: opacity 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
min-height: 44px;
}
.smart-chat-root .smart-chat-send {
min-width: 88px;
flex-shrink: 0;
}
.smart-chat-root .smart-chat-btn:hover:not(:disabled) {
opacity: 0.95;
}
.smart-chat-root .smart-chat-send:disabled {
opacity: 0.55;
cursor: wait;
}
.smart-chat-root .smart-chat-panel.is-loading .smart-chat-field {
opacity: 0.72;
}
.smart-chat-root .smart-chat-typing {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
opacity: 0.9;
padding: 4px 8px 0;
}
.smart-chat-root .smart-chat-typing-dots {
display: inline-flex;
gap: 4px;
}
.smart-chat-root .smart-chat-typing-dots > span {
width: 5px;
height: 5px;
border-radius: 50%;
background: color-mix(in srgb, var(--smart-chat-accent) 75%, #fff);
animation: smart-chat-dot 1.1s ease-in-out infinite;
}
.smart-chat-root .smart-chat-typing-dots > span:nth-child(2) {
animation-delay: 0.15s;
}
.smart-chat-root .smart-chat-typing-dots > span:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes smart-chat-dot {
0%, 80%, 100% {
opacity: 0.25;
transform: translateY(0);
}
40% {
opacity: 1;
transform: translateY(-2px);
}
}
@keyframes smart-chat-pulse {
0%, 100% {
transform: scale(1);
box-shadow: var(--smart-chat-shadow), 0 0 0 0 color-mix(in srgb, var(--smart-chat-primary) 50%, transparent);
}
50% {
transform: scale(1.03);
box-shadow: var(--smart-chat-shadow), 0 0 0 10px color-mix(in srgb, var(--smart-chat-primary) 0%, transparent);
}
}
@media (prefers-reduced-motion: reduce) {
.smart-chat-root .smart-chat-bubble {
animation: none;
}
.smart-chat-root .smart-chat-typing-dots > span {
animation: none;
opacity: 0.65;
}
}
/* RTL: only inside widget */
.smart-chat-root.smart-chat-rtl .smart-chat-panel {
left: 24px;
right: auto;
}
.smart-chat-root.smart-chat-rtl .smart-chat-bubble {
left: 24px;
right: auto;
}
@media (max-width: 480px) {
.smart-chat-root.smart-chat-rtl .smart-chat-panel {
left: 10px;
right: 10px;
}
.smart-chat-root.smart-chat-rtl .smart-chat-bubble {
left: 10px;
right: auto;
}
}
.smart-chat-root :where(.smart-chat-btn, .smart-chat-close, .smart-chat-bubble):focus-visible {
outline: 2px solid var(--smart-chat-jasmine);
outline-offset: 2px;
}
.smart-chat-root .smart-chat-link {
color: var(--smart-chat-jasmine);
text-decoration: underline;
}
.smart-chat-root .smart-chat-link:hover {
opacity: 0.85;
}