#aisa-cc-bubble,
#aisa-cc-panel {
 --cc-bg: #ffffff;
 --cc-surface: #ffffff;
 --cc-border: #e8e8e8;
 --cc-text: #1a1a1a;
 --cc-text-secondary: #6b6b6b;
 --cc-text-muted: #a0a0a0;
 --cc-user-bubble: #FFD000;
 --cc-user-text: #000000;
 --cc-bot-bubble: #f3f3f3;
 --cc-accent: #FF5100;
 --cc-accent-alt: #e64900;
 --cc-accent-rgb: 255, 81, 0;
 --cc-bubble-bg: #FF5100;
 --cc-bubble-bg-alt: #e64900;
 --cc-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
 --cc-transition: 0.2s ease;
 --cc-radius: 24px;
}
#aisa-cc-bubble,
#aisa-cc-panel,
#aisa-cc-panel *,
#aisa-cc-panel *::before,
#aisa-cc-panel *::after {
 --e-global-color-primary: initial !important;
 --e-global-color-secondary: initial !important;
 --e-global-color-accent: initial !important;
 --e-global-color-text: initial !important;
 --e-global-typography-primary-font-family: initial !important;
 --e-global-typography-secondary-font-family: initial !important;
 --e-global-typography-text-font-family: initial !important;
 --e-global-typography-accent-font-family: initial !important;
 --bricks-color-primary: initial !important;
 --bricks-color-secondary: initial !important;
 --bricks-body-font-family: initial !important;
 --bricks-heading-font-family: initial !important;
 --et_pb_gutter_width: initial !important;
 --ast-global-color-0: initial !important;
 --ast-global-color-1: initial !important;
 box-sizing: border-box !important;
 text-transform: none !important;
 letter-spacing: normal !important;
 text-decoration: none !important;
 font-style: normal !important;
}
#aisa-cc-panel {
 font-family: var(--cc-font) !important;
 font-size: 14px !important;
 line-height: 1.5 !important;
 color: var(--cc-text) !important;
 -webkit-font-smoothing: antialiased !important;
 -moz-osx-font-smoothing: grayscale !important;
}
#aisa-cc-bubble {
 position: fixed !important;
 bottom: 24px !important;
 right: 24px !important;
 z-index: 2147483647 !important;
 width: 60px !important;
 height: 60px !important;
 padding: 0 !important;
 border-radius: 50% !important;
 background: var(--cc-bubble-bg, var(--cc-accent)) !important;
 border: none !important;
 outline: none !important;
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16) !important;
 cursor: pointer !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 color: var(--cc-bubble-icon-color, #ffffff) !important;
 transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
#aisa-cc-bubble:hover {
 transform: scale(1.08) !important;
 box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22) !important;
}
#aisa-cc-bubble svg { width: 26px; height: 26px; color: var(--cc-bubble-icon-color, #ffffff); pointer-events: none; }
#aisa-cc-bubble .cc-close { display: none; }
#aisa-cc-bubble.open { background: #434343 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important; }
#aisa-cc-bubble.open:hover { background: #555555 !important; }
#aisa-cc-bubble.open svg { color: #fff; }
#aisa-cc-bubble.open .cc-open { display: none; }
#aisa-cc-bubble.open .cc-close { display: block; }
#aisa-cc-proactive {
 position: fixed !important;
 bottom: 96px !important;
 right: 24px !important;
 z-index: 2147483646 !important;
 width: 320px !important;
 background: var(--cc-bg, #ffffff) !important;
 border-radius: 16px !important;
 box-shadow:
 0 8px 32px rgba(0, 0, 0, 0.12),
 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
 font-family: var(--cc-font, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
 opacity: 0;
 transform: translateY(12px) scale(0.95);
 pointer-events: none;
 transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 overflow: hidden !important;
}
#aisa-cc-proactive.visible {
 opacity: 1;
 transform: translateY(0) scale(1);
 pointer-events: all;
}
#aisa-cc-proactive.hiding {
 opacity: 0;
 transform: translateY(8px) scale(0.96);
 pointer-events: none;
 transition: opacity 0.2s ease, transform 0.2s ease;
}
.cc-proactive-close {
 position: absolute !important;
 top: 8px !important;
 right: 8px !important;
 width: 24px !important;
 height: 24px !important;
 border-radius: 50% !important;
 border: none !important;
 background: rgba(0, 0, 0, 0.06) !important;
 color: var(--cc-text-muted, #a0a0a0) !important;
 cursor: pointer !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 font-size: 12px !important;
 line-height: 1 !important;
 padding: 0 !important;
 transition: background 0.15s ease, color 0.15s ease !important;
}
.cc-proactive-close:hover {
 background: rgba(0, 0, 0, 0.12) !important;
 color: var(--cc-text, #1a1a1a) !important;
}
.cc-proactive-body {
 padding: 20px 20px 12px !important;
 position: relative !important;
}
.cc-proactive-msg {
 font-size: 15px !important;
 line-height: 1.5 !important;
 color: var(--cc-text, #1a1a1a) !important;
 margin: 0 !important;
 padding-right: 18px !important;
 word-wrap: break-word !important;
}
.cc-proactive-input-area {
 padding: 0 16px 16px !important;
 display: flex !important;
 align-items: center !important;
 gap: 8px !important;
 border-top: 1px solid var(--cc-border, #e8e8e8) !important;
 margin-top: 12px !important;
 padding-top: 12px !important;
}
.cc-proactive-input {
 flex: 1 !important;
 border: none !important;
 outline: none !important;
 background: transparent !important;
 font-size: 14px !important;
 color: var(--cc-text, #1a1a1a) !important;
 font-family: inherit !important;
 padding: 6px 0 !important;
}
.cc-proactive-input::placeholder {
 color: var(--cc-text-muted, #a0a0a0) !important;
}
.cc-proactive-send {
 width: 32px !important;
 height: 32px !important;
 border-radius: 50% !important;
 border: none !important;
 background: var(--cc-accent, #FF5100) !important;
 color: #fff !important;
 cursor: pointer !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 flex-shrink: 0 !important;
 transition: transform 0.15s ease, opacity 0.15s ease !important;
 padding: 0 !important;
 opacity: 0.4;
}
.cc-proactive-send.active {
 opacity: 1;
}
.cc-proactive-send:hover {
 transform: scale(1.08);
}
.cc-proactive-send svg {
 width: 14px !important;
 height: 14px !important;
 color: #fff !important;
}
.cc-bubble-badge {
 position: absolute !important;
 top: -4px !important;
 right: -4px !important;
 width: 20px !important;
 height: 20px !important;
 border-radius: 50% !important;
 background: #ef4444 !important;
 color: #fff !important;
 font-size: 11px !important;
 font-weight: 700 !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 line-height: 1 !important;
 box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4) !important;
 animation: cc-badge-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
 pointer-events: none !important;
 font-family: var(--cc-font, sans-serif) !important;
}
@keyframes cc-badge-pop {
 0% { transform: scale(0); }
 100% { transform: scale(1); }
}
#aisa-cc-proactive.cc-dark {
 --cc-bg: #1a1a2e;
 --cc-text: #e8e8ec;
 --cc-text-muted: #6b6b80;
 --cc-border: #2a2a40;
 box-shadow:
 0 8px 32px rgba(0, 0, 0, 0.4),
 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
}
.cc-proactive-close { background: rgba(255, 255, 255, 0.1) !important; }
#aisa-cc-proactive.cc-dark .cc-proactive-close { background: rgba(255, 255, 255, 0.1) !important; }
#aisa-cc-proactive.cc-dark .cc-proactive-close:hover { background: rgba(255, 255, 255, 0.18) !important; color: #e8e8ec !important; }
@media (prefers-color-scheme: dark) {
 #aisa-cc-proactive.cc-dark-auto {
 --cc-bg: #1a1a2e;
 --cc-text: #e8e8ec;
 --cc-text-muted: #6b6b80;
 --cc-border: #2a2a40;
 box-shadow:
 0 8px 32px rgba(0, 0, 0, 0.4),
 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
 }
 #aisa-cc-proactive.cc-dark-auto .cc-proactive-close { background: rgba(255, 255, 255, 0.1) !important; }
 #aisa-cc-proactive.cc-dark-auto .cc-proactive-close:hover { background: rgba(255, 255, 255, 0.18) !important; color: #e8e8ec !important; }
}
#aisa-cc-proactive::after {
 content: '';
 position: absolute;
 bottom: -6px;
 right: 28px;
 width: 12px;
 height: 12px;
 background: var(--cc-bg, #ffffff);
 transform: rotate(45deg);
 box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.06);
 border-radius: 0 0 3px 0;
}
@media (max-width: 480px) {
 #aisa-cc-proactive {
 right: 16px !important;
 left: 16px !important;
 width: auto !important;
 bottom: 88px !important;
 }
 #aisa-cc-proactive::after {
 right: 20px;
 }
}
#aisa-cc-panel {
 position: fixed;
 bottom: 100px;
 right: 24px;
 z-index: 2147483646;
 width: 370px;
 height: 670px;
 background: var(--cc-bg);
 border-radius: var(--cc-radius);
 box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
 display: flex;
 flex-direction: column;
 overflow: hidden;
 opacity: 0;
 transform: translateY(16px) scale(0.96);
 pointer-events: none;
 transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#aisa-cc-panel.open {
 opacity: 1;
 transform: translateY(0) scale(1);
 pointer-events: all;
}
.cc-header {
 background: var(--cc-accent);
 padding: 10px 12px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
 border-bottom: none;
 border-radius: var(--cc-radius) var(--cc-radius) 0 0;
}
.cc-topbar-btn {
 background: none !important;
 border: none !important;
 outline: none !important;
 cursor: pointer !important;
 padding: 4px !important;
 color: rgba(255, 255, 255, 0.8) !important;
 border-radius: 6px !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 transition: background 0.15s ease !important;
 min-width: unset !important;
 min-height: unset !important;
 margin: 0 !important;
 box-shadow: none !important;
 flex-shrink: 0;
}
.cc-topbar-btn:hover {
 background: rgba(255, 255, 255, 0.15) !important;
 color: #ffffff !important;
}
.cc-topbar-btn svg { width: 20px; height: 20px; }
.cc-btn-restart { opacity: 0.5; transition: opacity 0.2s ease, background 0.15s ease !important; }
.cc-btn-restart:hover { opacity: 1; }
.cc-btn-restart svg { width: 18px !important; height: 18px !important; }
.cc-btn-restart.cc-spinning svg { animation: cc-spin 0.6s ease; }
@keyframes cc-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cc-header-center {
 display: flex;
 align-items: center;
 gap: 8px;
 flex: 1;
 min-width: 0;
 justify-content: center;
}
.cc-header-avatar {
 width: 30px;
 height: 30px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.2);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 overflow: hidden;
}
.cc-header-avatar svg { width: 14px; height: 14px; color: rgba(255, 255, 255, 0.9); }
.cc-header-avatar img {
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
 border-radius: 50% !important;
 display: block !important;
}
.cc-header-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.cc-header-name {
 font-size: 13px;
 font-weight: 700;
 color: #ffffff;
 font-family: var(--cc-font);
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.cc-header-status {
 font-size: 11px;
 color: rgba(255, 255, 255, 0.7);
 font-family: var(--cc-font);
 font-weight: 400;
}
.cc-messages {
 flex: 1;
 overflow-y: auto;
 padding: 20px 16px;
 display: flex;
 flex-direction: column;
 gap: 10px;
 min-height: 420px;
 background: var(--cc-surface);
 scroll-behavior: smooth;
}
.cc-messages::-webkit-scrollbar { width: 4px; }
.cc-messages::-webkit-scrollbar-track { background: transparent; }
.cc-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); border-radius: 4px; }
.cc-msg {
 max-width: 80%;
 padding: 10px 16px;
 border-radius: 18px;
 font-size: 14px;
 line-height: 1.55;
 word-wrap: break-word;
 animation: cc-fadeIn 0.2s ease;
 font-family: var(--cc-font);
}
@keyframes cc-fadeIn {
 from { opacity: 0; transform: translateY(6px) scale(0.97); }
 to { opacity: 1; transform: translateY(0) scale(1); }
}
.cc-msg.user {
 align-self: flex-end;
 background: var(--cc-user-bubble);
 color: var(--cc-user-text);
 border-bottom-right-radius: 4px;
 font-weight: 400;
}
.cc-msg.bot {
 align-self: flex-start;
 background: var(--cc-bot-bubble);
 color: var(--cc-text);
 border: none;
 border-bottom-left-radius: 4px;
 box-shadow: none;
}
.cc-msg-row {
 display: flex;
 align-items: flex-start;
 gap: 8px;
 animation: cc-fadeIn 0.25s ease;
}
.cc-msg-avatar {
 width: 28px;
 height: 28px;
 min-width: 28px;
 background: #2d2d2d;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 margin-top: 2px;
 overflow: hidden;
}
.cc-msg-avatar svg { width: 14px; height: 14px; color: #fff; }
.cc-msg-avatar img {
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
 border-radius: 50% !important;
 display: block !important;
}
.cc-msg-row .cc-msg.bot { max-width: calc(100% - 40px); }
.cc-msg.bot strong { color: var(--cc-text); font-weight: 600; }
.cc-msg.bot a {
 color: var(--cc-accent) !important;
 font-weight: 600 !important;
 text-decoration: none !important;
 border-bottom: 1px solid rgba(var(--cc-accent-rgb), 0.3) !important;
 transition: border-color 0.2s ease !important;
}
.cc-msg.bot a:hover { border-bottom-color: var(--cc-accent) !important; }
.cc-msg.bot ul, .cc-msg.bot ol { margin: 6px 0; padding-left: 18px; }
.cc-msg.bot li { margin: 3px 0; }
.cc-msg.bot p { margin: 0 0 6px 0; }
.cc-msg.bot p:last-child { margin-bottom: 0; }
.cc-cursor {
 display: inline-block;
 width: 2px;
 height: 14px;
 background: var(--cc-accent);
 margin-left: 2px;
 vertical-align: text-bottom;
 animation: cc-blink 0.6s step-end infinite;
}
@keyframes cc-blink {
 0%, 100% { opacity: 1; }
 50% { opacity: 0; }
}
.cc-typing-row {
 animation: cc-fadeIn 0.2s ease;
}
.cc-typing {
 align-self: flex-start;
 background: var(--cc-bot-bubble);
 border-radius: 18px;
 padding: 12px 18px;
 display: flex;
 gap: 5px;
 box-shadow: none;
}
.cc-typing span {
 width: 7px;
 height: 7px;
 background: var(--cc-text-muted);
 border-radius: 50%;
 animation: cc-dot 1.4s infinite ease-in-out;
}
.cc-typing span:nth-child(2) { animation-delay: 0.16s; }
.cc-typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes cc-dot {
 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
 30% { transform: translateY(-5px); opacity: 1; }
}
.cc-welcome {
 display: flex;
 flex-direction: column;
 gap: 12px;
 padding: 0;
}
.cc-welcome-row {
 display: flex;
 align-items: flex-start;
 gap: 8px;
}
.cc-welcome-avatar {
 width: 28px;
 height: 28px;
 min-width: 28px;
 background: #2d2d2d;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 margin-top: 2px;
 overflow: hidden;
}
.cc-welcome-avatar svg { width: 14px; height: 14px; color: #fff; }
.cc-welcome-avatar img {
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
 border-radius: 50% !important;
 display: block !important;
}
.cc-welcome-bubble {
 background: var(--cc-bot-bubble);
 border-radius: 18px;
 border-bottom-left-radius: 4px;
 padding: 10px 16px;
 box-shadow: none;
 max-width: 85%;
 animation: cc-fadeIn 0.3s ease;
}
.cc-welcome-bubble h4 {
 font-size: 14px;
 font-weight: 600;
 color: var(--cc-text);
 margin: 0 0 4px 0;
 font-family: var(--cc-font);
}
.cc-welcome-bubble p {
 font-size: 14px;
 color: var(--cc-text);
 margin: 0;
 line-height: 1.55;
 font-family: var(--cc-font);
}
.cc-quick-replies {
 display: flex !important;
 flex-wrap: wrap !important;
 gap: 6px !important;
 padding-left: 36px !important;
}
#aisa-cc-panel .cc-quick-reply {
 background: var(--cc-bg) !important;
 border: 1px solid var(--cc-border) !important;
 border-radius: 18px !important;
 padding: 6px 14px !important;
 font-size: 13px !important;
 color: var(--cc-text-secondary) !important;
 cursor: pointer !important;
 font-family: var(--cc-font) !important;
 transition: all var(--cc-transition) !important;
 outline: none !important;
 line-height: 1.4 !important;
 box-shadow: none !important;
 text-transform: none !important;
 letter-spacing: normal !important;
 font-weight: 400 !important;
 min-width: unset !important;
 min-height: unset !important;
 margin: 0 !important;
 display: inline-block !important;
}
#aisa-cc-panel .cc-quick-reply:hover {
 border-color: var(--cc-text) !important;
 color: var(--cc-text) !important;
 background: rgba(0, 0, 0, 0.03) !important;
}
.cc-input-area {
 padding: 12px 14px;
 background: var(--cc-bg);
 border-top: 1px solid rgba(0, 0, 0, 0.06);
 display: flex;
 gap: 8px;
 align-items: center;
}
.cc-input-area input {
 flex: 1;
 background: transparent !important;
 border: none !important;
 border-radius: 0 !important;
 color: var(--cc-text) !important;
 padding: 8px 8px !important;
 font-family: var(--cc-font) !important;
 font-size: 14px !important;
 outline: none !important;
 box-shadow: none !important;
 -webkit-appearance: none !important;
 appearance: none !important;
 height: auto !important;
 min-height: unset !important;
 max-height: unset !important;
 width: auto !important;
 margin: 0 !important;
}
.cc-input-area input::placeholder { color: var(--cc-text-muted) !important; opacity: 0.8 !important; }
.cc-input-area input:focus { box-shadow: none !important; }
.cc-send-btn {
 width: 34px;
 height: 34px;
 min-width: 34px;
 background: #e0e0e0 !important;
 border: none !important;
 outline: none !important;
 border-radius: 50% !important;
 color: #ffffff !important;
 cursor: pointer !important;
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 flex-shrink: 0;
 transition: all 0.2s ease;
 box-shadow: none;
 padding: 0 !important;
 margin: 0 !important;
}
.cc-send-btn.active {
 background: var(--cc-accent) !important;
 box-shadow: 0 2px 8px rgba(var(--cc-accent-rgb), 0.3);
}
.cc-send-btn:hover:not(:disabled) {
 transform: scale(1.06);
}
.cc-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.cc-send-btn svg {
 width: 16px !important;
 height: 16px !important;
 color: #ffffff !important;
 display: block !important;
}
.cc-feedback {
 display: flex;
 gap: 4px;
 margin-top: 6px;
 padding-top: 6px;
 border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.cc-fb-btn {
 background: none !important;
 border: 1px solid transparent !important;
 border-radius: 6px !important;
 padding: 3px 6px !important;
 cursor: pointer !important;
 opacity: 0.4;
 transition: all 0.2s ease !important;
 display: flex !important;
 align-items: center !important;
 min-width: unset !important;
 min-height: unset !important;
 margin: 0 !important;
 box-shadow: none !important;
}
.cc-fb-btn:hover {
 opacity: 1;
 border-color: var(--cc-border) !important;
 background: rgba(0, 0, 0, 0.03) !important;
}
.cc-fb-done {
 font-size: 11px;
 color: var(--cc-text-muted);
 font-family: var(--cc-font);
}
.cc-dynamic-qr {
 display: flex;
 flex-wrap: wrap;
 gap: 6px;
 padding: 4px 0 4px 36px;
 animation: cc-fadeIn 0.3s ease;
}
.cc-powered {
 padding: 7px 14px;
 background: var(--cc-bg);
 border-top: none;
 text-align: center;
 font-size: 11px;
 color: var(--cc-text-muted);
 font-family: var(--cc-font);
}
.cc-powered a {
 color: var(--cc-text-secondary) !important;
 text-decoration: none !important;
 font-weight: 700 !important;
 transition: color var(--cc-transition) !important;
}
.cc-powered a:hover { color: var(--cc-accent) !important; }
.cc-privacy-notice {
 padding: 10px 16px;
 background: rgba(0, 0, 0, 0.02);
 border-top: 1px solid rgba(0, 0, 0, 0.04);
 font-size: 11px;
 color: var(--cc-text-muted);
 line-height: 1.5;
 position: relative;
 font-family: var(--cc-font);
}
.cc-privacy-notice a {
 color: var(--cc-text-secondary) !important;
 text-decoration: underline !important;
 font-weight: 500 !important;
}
.cc-privacy-dismiss {
 position: absolute;
 top: 6px;
 right: 8px;
 background: none !important;
 border: none !important;
 outline: none !important;
 cursor: pointer !important;
 padding: 2px !important;
 color: var(--cc-text-muted) !important;
 font-size: 14px !important;
 line-height: 1 !important;
 min-width: unset !important;
 min-height: unset !important;
 margin: 0 !important;
 box-shadow: none !important;
}
.cc-product-card {
 display: flex;
 flex-direction: column;
 background: #ffffff;
 border: 1px solid rgba(0, 0, 0, 0.08);
 border-radius: 12px;
 overflow: hidden;
 margin: 8px 0;
 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
 transition: box-shadow 0.2s ease, transform 0.2s ease;
 max-width: 240px;
}
.cc-product-card:hover {
 box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 transform: translateY(-1px);
}
.cc-product-img {
 display: block;
 width: 100%;
 height: 110px;
 overflow: hidden;
 background: #f5f5f5;
}
.cc-product-img img {
 width: 100% !important;
 height: 100% !important;
 object-fit: cover !important;
 display: block !important;
 border-radius: 0 !important;
}
.cc-product-body {
 padding: 8px 10px 10px 10px;
}
.cc-product-name {
 font-size: 12px !important;
 font-weight: 600 !important;
 color: var(--cc-text) !important;
 line-height: 1.3 !important;
 margin: 0 0 6px 0 !important;
 font-family: var(--cc-font) !important;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}
.cc-product-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 8px;
}
.cc-product-price {
 font-size: 14px !important;
 font-weight: 700 !important;
 color: var(--cc-accent) !important;
 font-family: var(--cc-font) !important;
 margin: 0 !important;
}
.cc-product-actions {
 display: flex;
 gap: 4px;
}
.cc-product-cart-btn,
.cc-product-view-btn {
 display: flex !important;
 align-items: center !important;
 justify-content: center !important;
 width: 32px !important;
 height: 32px !important;
 border-radius: 8px !important;
 cursor: pointer !important;
 text-decoration: none !important;
 border: none !important;
 transition: all 0.15s ease !important;
 padding: 0 !important;
}
.cc-product-cart-btn {
 background: var(--cc-accent) !important;
 color: #ffffff !important;
}
.cc-product-cart-btn svg {
 stroke: #ffffff !important;
 color: #ffffff !important;
}
.cc-product-cart-btn:hover {
 background: var(--cc-accent-alt) !important;
 box-shadow: 0 2px 8px rgba(var(--cc-accent-rgb), 0.3) !important;
 transform: scale(1.08);
}
.cc-product-view-btn {
 background: rgba(0, 0, 0, 0.05) !important;
 color: var(--cc-text-secondary) !important;
}
.cc-product-view-btn svg {
 stroke: var(--cc-text-secondary) !important;
}
.cc-product-view-btn:hover {
 background: rgba(0, 0, 0, 0.1) !important;
 color: var(--cc-text) !important;
}
.cc-product-view-btn:hover svg {
 stroke: var(--cc-text) !important;
}
.cc-product-cart-btn svg,
.cc-product-view-btn svg {
 width: 15px !important;
 height: 15px !important;
 display: block !important;
 pointer-events: none !important;
}
.cc-product-badge {
 position: absolute;
 top: 6px;
 right: 6px;
 background: #dc2626;
 color: #fff;
 font-size: 10px;
 font-weight: 700;
 padding: 2px 8px;
 border-radius: 6px;
 font-family: var(--cc-font);
 line-height: 1.5;
 z-index: 2;
 box-shadow: 0 1px 4px rgba(220, 38, 38, 0.3);
}
.cc-product-card { position: relative; }
.cc-price-sale {
 font-weight: 700;
 color: #dc2626 !important;
}
.cc-price-regular {
 text-decoration: line-through;
 opacity: 0.45;
 font-size: 0.82em;
 font-weight: 400 !important;
 margin-left: 4px;
}
#aisa-cc-panel.cc-dark .cc-price-sale,
#aisa-cc-panel.cc-dark-auto .cc-price-sale {
 color: #f87171 !important;
}
#aisa-cc-panel.cc-dark .cc-product-badge,
#aisa-cc-panel.cc-dark-auto .cc-product-badge {
 background: #b91c1c;
 box-shadow: 0 1px 4px rgba(185, 28, 28, 0.4);
}
@media (max-width: 480px) {
 #aisa-cc-panel {
 right: 0 !important;
 left: 0 !important;
 bottom: 0 !important;
 top: 0 !important;
 width: 100% !important;
 height: 100% !important;
 max-height: 100vh !important;
 border-radius: 0 !important;
 }
 #aisa-cc-bubble { bottom: 16px !important; right: 16px !important; }
 #aisa-cc-bubble.open { display: none !important; }
 .cc-product-card { max-width: 100%; }
 .cc-product-img { height: 130px; }
}
@media (prefers-color-scheme: dark) {
 #aisa-cc-bubble.cc-dark-auto,
 #aisa-cc-panel.cc-dark-auto {
 --cc-bg: #1a1a2e;
 --cc-surface: #16162a;
 --cc-border: #2a2a40;
 --cc-text: #e8e8ec;
 --cc-text-secondary: #a0a0b4;
 --cc-text-muted: #6b6b80;
 --cc-user-bubble: #b08d00;
 --cc-user-text: #ffffff;
 --cc-bot-bubble: #252540;
 }
 #aisa-cc-panel.cc-dark-auto .cc-header {
 background: #1a1a2e;
 border-bottom-color: #2a2a40;
 }
 #aisa-cc-panel.cc-dark-auto .cc-input-area {
 background: #1a1a2e;
 border-top-color: #2a2a40;
 }
 #aisa-cc-panel.cc-dark-auto .cc-powered {
 background: #1a1a2e;
 }
 #aisa-cc-panel.cc-dark-auto .cc-send-btn {
 background: #3a3a50 !important;
 }
 #aisa-cc-panel.cc-dark-auto .cc-input-area input::placeholder {
 color: #6b6b80 !important;
 }
 #aisa-cc-panel.cc-dark-auto .cc-product-card {
 background: #252540;
 border-color: #3a3a50;
 }
 #aisa-cc-panel.cc-dark-auto .cc-msg-avatar,
 #aisa-cc-panel.cc-dark-auto .cc-welcome-avatar,
 #aisa-cc-panel.cc-dark-auto .cc-header-avatar {
 background: #3a3a50;
 }
}
#aisa-cc-bubble.cc-dark,
#aisa-cc-panel.cc-dark {
 --cc-bg: #1a1a2e;
 --cc-surface: #16162a;
 --cc-border: #2a2a40;
 --cc-text: #e8e8ec;
 --cc-text-secondary: #a0a0b4;
 --cc-text-muted: #6b6b80;
 --cc-user-bubble: #b08d00;
 --cc-user-text: #ffffff;
 --cc-bot-bubble: #252540;
}
#aisa-cc-panel.cc-dark .cc-header {
 background: #1a1a2e;
 border-bottom-color: #2a2a40;
}
#aisa-cc-panel.cc-dark .cc-input-area {
 background: #1a1a2e;
 border-top-color: #2a2a40;
}
#aisa-cc-panel.cc-dark .cc-powered {
 background: #1a1a2e;
}
#aisa-cc-panel.cc-dark .cc-send-btn {
 background: #3a3a50 !important;
}
#aisa-cc-panel.cc-dark .cc-input-area input::placeholder {
 color: #6b6b80 !important;
}
#aisa-cc-panel.cc-dark .cc-product-card {
 background: #252540;
 border-color: #3a3a50;
}
#aisa-cc-panel.cc-dark .cc-msg-avatar,
#aisa-cc-panel.cc-dark .cc-welcome-avatar,
#aisa-cc-panel.cc-dark .cc-header-avatar {
 background: #3a3a50;
}
#aisa-cc-panel.cc-dark .cc-feedback {
 border-top-color: #2a2a40;
}
#aisa-cc-panel.cc-dark .cc-quick-reply {
 background: #252540 !important;
 border-color: #3a3a50 !important;
 color: #a0a0b4 !important;
}
#aisa-cc-panel.cc-dark .cc-quick-reply:hover {
 border-color: #e8e8ec !important;
 color: #e8e8ec !important;
 background: #2a2a40 !important;
}
.cc-prechat-overlay {
 position: absolute;
 inset: 0;
 background: var(--cc-bg);
 z-index: 10;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 32px 24px;
 animation: cc-fadeIn 0.3s ease;
}
.cc-prechat-avatar {
 width: 48px; height: 48px; border-radius: 50%;
 background: #2d2d2d; display: flex; align-items: center;
 justify-content: center; margin-bottom: 16px; overflow: hidden;
}
.cc-prechat-avatar svg { width: 22px; height: 22px; color: #fff; }
.cc-prechat-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; }
.cc-prechat-title {
 font-size: 16px; font-weight: 700; color: var(--cc-text);
 margin-bottom: 4px; font-family: var(--cc-font); text-align: center;
}
.cc-prechat-subtitle {
 font-size: 13px; color: var(--cc-text-muted);
 margin-bottom: 20px; font-family: var(--cc-font); text-align: center;
}
.cc-prechat-form {
 width: 100%; display: flex; flex-direction: column; gap: 10px;
}
.cc-prechat-form input {
 width: 100% !important; padding: 10px 14px !important;
 border: 1.5px solid var(--cc-border) !important;
 border-radius: 10px !important; font-size: 13px !important;
 font-family: var(--cc-font) !important; background: var(--cc-surface) !important;
 color: var(--cc-text) !important; outline: none !important;
 box-shadow: none !important; transition: border-color 0.2s ease !important;
 -webkit-appearance: none !important; appearance: none !important;
 margin: 0 !important; height: auto !important;
}
.cc-prechat-form input:focus {
 border-color: var(--cc-accent) !important;
}
.cc-prechat-form input::placeholder {
 color: var(--cc-text-muted) !important; opacity: 0.7 !important;
}
.cc-prechat-submit {
 width: 100% !important; padding: 10px 14px !important;
 background: var(--cc-accent) !important; color: #ffffff !important;
 border: none !important; border-radius: 10px !important;
 font-size: 13px !important; font-weight: 600 !important;
 font-family: var(--cc-font) !important; cursor: pointer !important;
 transition: all 0.2s ease !important; margin: 4px 0 0 0 !important;
 box-shadow: none !important; min-width: unset !important;
 min-height: unset !important;
}
.cc-prechat-submit:hover {
 background: var(--cc-accent-alt) !important;
 box-shadow: 0 2px 12px rgba(var(--cc-accent-rgb), 0.3) !important;
}
.cc-returning-badge {
 display: flex; align-items: center; gap: 6px; padding: 8px 12px;
 background: rgba(var(--cc-accent-rgb), 0.08); border-radius: 12px;
 margin-bottom: 8px; animation: cc-fadeIn 0.4s ease;
}
.cc-returning-badge span {
 font-size: 12px; color: var(--cc-text-secondary); font-family: var(--cc-font);
}
.cc-lead-form {
 background: #ffffff;
 border: 1px solid #e0e0e0;
 border-radius: 16px;
 padding: 16px;
 max-width: calc(100% - 40px);
 animation: cc-fadeIn 0.3s ease;
 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.cc-lead-form-header {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 margin-bottom: 14px;
}
.cc-lead-form-icon {
 width: 32px;
 height: 32px;
 min-width: 32px;
 border-radius: 50%;
 background: rgba(var(--cc-accent-rgb), 0.12);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}
.cc-lead-form-icon svg {
 color: var(--cc-accent) !important;
 stroke: var(--cc-accent) !important;
}
.cc-lead-form-title {
 font-size: 14px;
 font-weight: 600;
 color: #1a1a1a;
 font-family: var(--cc-font);
 line-height: 1.3;
}
.cc-lead-form-desc {
 font-size: 12px;
 color: #6b6b6b;
 font-family: var(--cc-font);
 line-height: 1.4;
 margin-top: 2px;
}
.cc-lead-form-fields {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-bottom: 12px;
}
.cc-lead-input {
 width: 100% !important;
 padding: 9px 12px !important;
 border: 1.5px solid #d4d4d8 !important;
 border-radius: 10px !important;
 font-size: 13px !important;
 font-family: var(--cc-font) !important;
 color: #1a1a1a !important;
 background: #f7f7f8 !important;
 outline: none !important;
 box-shadow: none !important;
 transition: border-color 0.2s ease !important;
 -webkit-appearance: none !important;
 appearance: none !important;
 margin: 0 !important;
 height: auto !important;
 box-sizing: border-box !important;
}
.cc-lead-input:focus {
 border-color: var(--cc-accent) !important;
 box-shadow: 0 0 0 3px rgba(var(--cc-accent-rgb), 0.1) !important;
}
.cc-lead-input::placeholder {
 color: #9ca3af !important;
 opacity: 1 !important;
}
.cc-lead-form-actions {
 display: flex;
 align-items: center;
 gap: 12px;
}
.cc-lead-submit {
 flex: 1 !important;
 padding: 9px 16px !important;
 background: var(--cc-accent) !important;
 color: #ffffff !important;
 border: none !important;
 border-radius: 10px !important;
 font-size: 13px !important;
 font-weight: 600 !important;
 font-family: var(--cc-font) !important;
 cursor: pointer !important;
 transition: all 0.2s ease !important;
 box-shadow: none !important;
 min-width: unset !important;
 min-height: unset !important;
 margin: 0 !important;
}
.cc-lead-submit:hover {
 background: var(--cc-accent-alt) !important;
 box-shadow: 0 2px 12px rgba(var(--cc-accent-rgb), 0.3) !important;
}
.cc-lead-skip {
 background: none !important;
 border: none !important;
 color: var(--cc-text-muted) !important;
 font-size: 12px !important;
 font-family: var(--cc-font) !important;
 cursor: pointer !important;
 padding: 4px 8px !important;
 transition: color 0.2s ease !important;
 min-width: unset !important;
 min-height: unset !important;
 margin: 0 !important;
 box-shadow: none !important;
 font-weight: 400 !important;
}
.cc-lead-skip:hover {
 color: var(--cc-text-secondary) !important;
}
#aisa-cc-panel.cc-dark .cc-lead-form,
#aisa-cc-panel.cc-dark-auto .cc-lead-form {
 background: #252540 !important;
 border-color: #3a3a50 !important;
 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
}
#aisa-cc-panel.cc-dark .cc-lead-form-icon,
#aisa-cc-panel.cc-dark-auto .cc-lead-form-icon {
 background: rgba(255, 255, 255, 0.08) !important;
}
#aisa-cc-panel.cc-dark .cc-lead-form-icon svg,
#aisa-cc-panel.cc-dark-auto .cc-lead-form-icon svg {
 color: #e8e8ec !important;
 stroke: #e8e8ec !important;
}
#aisa-cc-panel.cc-dark .cc-lead-form-title,
#aisa-cc-panel.cc-dark-auto .cc-lead-form-title {
 color: #e8e8ec !important;
}
#aisa-cc-panel.cc-dark .cc-lead-form-desc,
#aisa-cc-panel.cc-dark-auto .cc-lead-form-desc {
 color: #a0a0b4 !important;
}
#aisa-cc-panel.cc-dark .cc-lead-input,
#aisa-cc-panel.cc-dark-auto .cc-lead-input {
 background: #1a1a2e !important;
 border-color: #3a3a50 !important;
 color: #e8e8ec !important;
}
#aisa-cc-panel.cc-dark .cc-lead-input::placeholder,
#aisa-cc-panel.cc-dark-auto .cc-lead-input::placeholder {
 color: #6b6b80 !important;
}
#aisa-cc-panel.cc-dark .cc-lead-input:focus,
#aisa-cc-panel.cc-dark-auto .cc-lead-input:focus {
 border-color: var(--cc-accent) !important;
 box-shadow: 0 0 0 3px rgba(var(--cc-accent-rgb), 0.15) !important;
}
#aisa-cc-panel.cc-dark .cc-lead-submit,
#aisa-cc-panel.cc-dark-auto .cc-lead-submit {
 background: var(--cc-accent) !important;
 color: #ffffff !important;
}
#aisa-cc-panel.cc-dark .cc-lead-skip,
#aisa-cc-panel.cc-dark-auto .cc-lead-skip {
 color: #6b6b80 !important;
}
#aisa-cc-panel.cc-dark .cc-lead-skip:hover,
#aisa-cc-panel.cc-dark-auto .cc-lead-skip:hover {
 color: #e8e8ec !important;
}
@media (prefers-color-scheme: dark) {
 #aisa-cc-panel.cc-dark-auto .cc-lead-form {
 background: #252540 !important;
 border-color: #3a3a50 !important;
 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3) !important;
 }
 #aisa-cc-panel.cc-dark-auto .cc-lead-form-icon {
 background: rgba(255, 255, 255, 0.08) !important;
 }
 #aisa-cc-panel.cc-dark-auto .cc-lead-form-icon svg {
 color: #e8e8ec !important;
 stroke: #e8e8ec !important;
 }
 #aisa-cc-panel.cc-dark-auto .cc-lead-input {
 background: #1a1a2e !important;
 border-color: #3a3a50 !important;
 color: #e8e8ec !important;
 }
 #aisa-cc-panel.cc-dark-auto .cc-lead-input::placeholder {
 color: #6b6b80 !important;
 }
 #aisa-cc-panel.cc-dark-auto .cc-lead-submit {
 background: var(--cc-accent) !important;
 color: #ffffff !important;
 }
}
