#skd-ai-chatbot-root {
--skd-accent: #111111;
--skd-bg: #ffffff;
--skd-text: #171717;
--skd-muted: #6b7280;
--skd-border: #e5e7eb;
--skd-soft: #f6f7f8;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-family: inherit;
}
#skd-ai-chatbot-root *,
#skd-ai-chatbot-root *::before,
#skd-ai-chatbot-root *::after { box-sizing: border-box; }
.skd-chat-launcher {
position: fixed !important;
right: 22px !important;
bottom: 22px !important;
z-index: 2147483000 !important;
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
align-items: center;
gap: 9px;
min-height: 50px;
padding: 0 18px;
border: 0 !important;
border-radius: 999px !important;
background: var(--skd-accent) !important;
color: #fff !important;
font: inherit;
font-size: 14px;
font-weight: 700;
line-height: 1;
cursor: pointer;
box-shadow: 0 10px 28px rgba(0,0,0,.18) !important;
transition: transform .16s ease, box-shadow .16s ease;
}
.skd-chat-launcher:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(0,0,0,.23) !important; }
.skd-chat-launcher:focus-visible, .skd-chat button:focus-visible, .skd-chat textarea:focus-visible, .skd-chip:focus-visible {
outline: 3px solid rgba(59,130,246,.35);
outline-offset: 2px;
}
.skd-launcher-icon { width: 20px; height: 20px; display: block; }
#skd-ai-chatbot-root.skd-chat-active .skd-chat-launcher { display: none !important; }
.skd-chat {
position: fixed !important;
right: 22px !important;
bottom: 22px !important;
z-index: 2147483001 !important;
width: min(390px, calc(100vw - 32px)) !important;
height: min(560px, calc(100dvh - 90px)) !important;
max-height: calc(100dvh - 90px) !important;
min-height: 360px;
display: none !important;
flex-direction: column;
overflow: hidden !important;
border: 1px solid rgba(0,0,0,.09) !important;
border-radius: 18px !important;
background: var(--skd-bg) !important;
color: var(--skd-text) !important;
box-shadow: 0 24px 70px rgba(0,0,0,.22) !important;
}
.skd-chat.skd-open { display: flex !important; animation: skd-in .18s ease-out; }
@keyframes skd-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
.skd-chat-head {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 10px;
min-height: 62px;
padding: 11px 12px;
background: var(--skd-accent) !important;
color: #fff !important;
}
.skd-chat-head-icon {
width: 36px;
height: 36px;
flex: 0 0 36px;
display: grid;
place-items: center;
border-radius: 10px;
background: rgba(255,255,255,.14);
}
.skd-chat-head-copy { min-width: 0; flex: 1; }
.skd-chat-title { margin: 0 !important; font-size: 15px !important; line-height: 1.25 !important; font-weight: 800 !important; color: #fff !important; }
.skd-chat-subtitle { margin: 3px 0 0 !important; font-size: 11.5px !important; line-height: 1.25 !important; color: rgba(255,255,255,.78) !important; }
.skd-chat-head-actions { display: flex; align-items: center; gap: 3px; flex: 0 0 auto; }
.skd-chat-minimize,
.skd-chat-close {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
display: grid !important;
place-items: center !important;
padding: 0 !important;
border: 0 !important;
border-radius: 9px !important;
background: transparent !important;
color: #fff !important;
line-height: 1 !important;
cursor: pointer;
}
.skd-chat-minimize svg { width: 19px; height: 19px; }
.skd-chat-close { font-size: 24px !important; }
.skd-chat-minimize:hover, .skd-chat-close:hover { background: rgba(255,255,255,.12) !important; }
.skd-messages {
flex: 1 1 0% !important;
min-height: 0 !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
touch-action: pan-y !important;
overscroll-behavior-y: contain;
padding: 14px 13px 16px !important;
background: #fbfbfb !important;
scrollbar-width: thin;
}
.skd-message-row { display: flex; margin: 0 0 10px; }
.skd-message-row.skd-user { justify-content: flex-end; }
.skd-bubble {
max-width: 86%;
padding: 10px 12px;
border: 1px solid var(--skd-border);
border-radius: 14px 14px 14px 4px;
background: #fff;
color: var(--skd-text);
font-size: 13.5px;
line-height: 1.48;
white-space: pre-wrap;
overflow-wrap: anywhere;
box-shadow: 0 1px 1px rgba(0,0,0,.02);
}
.skd-user .skd-bubble { border-color: var(--skd-accent); border-radius: 14px 14px 4px 14px; background: var(--skd-accent); color: #fff; }
.skd-thinking .skd-bubble { color: var(--skd-muted); font-style: italic; }
.skd-quick-wrap { display: flex; flex-wrap: wrap; gap: 7px; margin: 2px 0 13px; }
.skd-chip {
border: 1px solid #d9dde3 !important;
border-radius: 999px !important;
padding: 7px 10px !important;
background: #fff !important;
color: #30343b !important;
font: inherit;
font-size: 11.5px;
line-height: 1;
cursor: pointer;
}
.skd-chip:hover { border-color: var(--skd-accent) !important; color: var(--skd-accent) !important; }
.skd-product-list { display: grid; gap: 8px; margin: 4px 0 13px; }
.skd-product {
display: grid;
grid-template-columns: 58px minmax(0, 1fr);
gap: 10px;
padding: 9px;
border: 1px solid var(--skd-border);
border-radius: 12px;
background: #fff;
text-decoration: none !important;
color: var(--skd-text) !important;
}
.skd-product-img, .skd-product-img-placeholder { width: 58px; height: 58px; border-radius: 9px; background: #f5f5f5; }
.skd-product-img { object-fit: contain; }
.skd-product-img-placeholder { display:grid; place-items:center; color:#9ca3af; font-size:18px; }
.skd-product-name { margin: 0 !important; font-size: 12.3px !important; line-height: 1.3 !important; font-weight: 750 !important; }
.skd-product-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 5px; color: var(--skd-muted); font-size: 10.8px; line-height: 1.25; }
.skd-product-price { color: var(--skd-text); font-weight: 700; }
.skd-product-link { margin-top: 5px; color: var(--skd-accent); font-size: 10.8px; font-weight: 700; }
.skd-compose {
flex: 0 0 auto !important;
display: block !important;
visibility: visible !important;
position: relative;
z-index: 3;
border-top: 1px solid var(--skd-border);
padding: 9px 10px 10px !important;
background: #fff !important;
}
.skd-compose-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.skd-input {
box-sizing: border-box;
width: 100% !important;
min-height: 42px !important;
max-height: 104px !important;
resize: none !important;
overflow-y: auto !important;
border: 1px solid #d8dbe0 !important;
border-radius: 11px !important;
padding: 10px 11px !important;
background: #fff !important;
color: #111 !important;
font: inherit;
font-size: 13px !important;
line-height: 1.35 !important;
box-shadow: none !important;
}
.skd-send {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
display: grid !important;
place-items: center !important;
padding: 0 !important;
border: 0 !important;
border-radius: 11px !important;
background: var(--skd-accent) !important;
color: #fff !important;
cursor: pointer;
}
.skd-send:disabled { opacity: .45; cursor: default; }
.skd-send svg { width: 18px; height: 18px; }
.skd-privacy { margin: 7px 2px 0 !important; color: #8a8f98 !important; font-size: 9.5px !important; line-height: 1.25 !important; text-align: center; }
@media (max-width: 600px) {
.skd-chat-launcher {
right: 12px !important;
bottom: calc(12px + env(safe-area-inset-bottom)) !important;
width: 50px !important;
min-width: 50px !important;
height: 50px !important;
min-height: 50px !important;
padding: 0 !important;
justify-content: center;
}
.skd-launcher-label { display: none; }
.skd-chat {
top: auto !important;
right: 12px !important;
bottom: calc(12px + env(safe-area-inset-bottom)) !important;
left: auto !important;
width: min(350px, calc(100vw - 24px)) !important;
height: min(520px, 64dvh) !important;
max-height: calc(100dvh - 92px) !important;
min-height: 330px !important;
border-radius: 16px !important;
}
.skd-chat-head { min-height: 56px; padding: 9px 10px; }
.skd-chat-head-icon { width: 32px; height: 32px; flex-basis: 32px; }
.skd-chat-title { font-size: 14px !important; }
.skd-chat-subtitle { font-size: 10.5px !important; }
.skd-chat-minimize, .skd-chat-close { width: 32px !important; height: 32px !important; min-width: 32px !important; }
.skd-messages { padding: 11px 10px 13px !important; }
.skd-bubble { max-width: 91%; font-size: 12.8px; }
.skd-compose { padding: 8px 9px 9px !important; }
.skd-privacy { display: none; }
}
@media (max-width: 370px) {
.skd-chat { right: 8px !important; width: calc(100vw - 16px) !important; height: min(480px, 62dvh) !important; }
.skd-chat-head-icon { display: none; }
.skd-chat-head { gap: 5px; }
}
@media (max-height: 560px) {
.skd-chat { height: min(390px, calc(100dvh - 80px)) !important; min-height: 280px !important; }
.skd-chat-subtitle, .skd-privacy { display: none; }
} .skd-quote-cta {
margin: 2px 0 13px;
display: flex;
justify-content: flex-start;
}
.skd-quote-button,
.skd-quote-submit,
.skd-quote-cancel {
font: inherit !important;
cursor: pointer;
}
.skd-quote-button {
border: 1px solid var(--skd-accent) !important;
border-radius: 999px !important;
padding: 8px 12px !important;
background: #fff !important;
color: var(--skd-accent) !important;
font-size: 11.8px !important;
font-weight: 750 !important;
line-height: 1.1 !important;
}
.skd-quote-button:hover { background: var(--skd-soft) !important; }
.skd-quote-card {
margin: 3px 0 14px;
padding: 12px;
border: 1px solid var(--skd-border);
border-radius: 14px;
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.skd-quote-title {
margin: 0 0 4px;
font-size: 13px;
line-height: 1.3;
font-weight: 800;
color: var(--skd-text);
}
.skd-quote-note {
margin: 0 0 10px;
color: var(--skd-muted);
font-size: 10.5px;
line-height: 1.35;
}
.skd-quote-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.skd-quote-form label {
display: block;
margin: 0;
color: #333;
font-size: 10.5px;
line-height: 1.25;
font-weight: 700;
}
.skd-quote-form label > span { display: block; margin: 0 0 4px; }
.skd-quote-form input,
.skd-quote-form textarea {
width: 100% !important;
margin: 0 !important;
border: 1px solid #d8dbe0 !important;
border-radius: 8px !important;
padding: 8px 9px !important;
background: #fff !important;
color: #111 !important;
font: inherit !important;
font-size: 12px !important;
line-height: 1.3 !important;
box-shadow: none !important;
}
.skd-quote-form input { min-height: 35px !important; }
.skd-quote-form textarea { min-height: 68px !important; resize: vertical !important; }
.skd-quote-form input:focus,
.skd-quote-form textarea:focus { outline: 2px solid rgba(17,17,17,.12); outline-offset: 1px; border-color: var(--skd-accent) !important; }
.skd-quote-details { margin-top: 8px !important; }
.skd-quote-actions { display: flex; gap: 7px; margin-top: 9px; }
.skd-quote-submit,
.skd-quote-cancel {
min-height: 35px !important;
border-radius: 8px !important;
padding: 7px 10px !important;
font-size: 11.5px !important;
font-weight: 750 !important;
line-height: 1.1 !important;
}
.skd-quote-submit {
border: 1px solid var(--skd-accent) !important;
background: var(--skd-accent) !important;
color: #fff !important;
}
.skd-quote-submit:disabled { opacity: .55; cursor: default; }
.skd-quote-cancel {
border: 1px solid #d8dbe0 !important;
background: #fff !important;
color: #333 !important;
}
.skd-quote-status { margin-top: 7px; min-height: 14px; color: var(--skd-muted); font-size: 10.5px; line-height: 1.3; }
.skd-quote-status.skd-error { color: #b42318; }
.skd-quote-success {
padding: 3px 0;
color: #166534;
font-size: 12px;
line-height: 1.4;
font-weight: 700;
}
.skd-hp {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
@media (max-width: 600px) {
.skd-quote-card { padding: 10px; }
.skd-quote-grid { grid-template-columns: 1fr; gap: 7px; }
.skd-quote-note { font-size: 10px; }
.skd-quote-form input { min-height: 34px !important; }
.skd-quote-form textarea { min-height: 62px !important; }
}