/* ===== THEMES =========================================================
 * Every site picks a named palette via data-theme on the widget script;
 * widget.js copies it to #slc-root[data-slc-theme]. Adding a theme = one
 * block at the bottom of this file. "ocean" (below) is the default look. */
#slc-root {
    --slc-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --slc-b1: #003466;  --slc-b2: #0369a1;  --slc-b3: #06b6d4;
    --slc-b2-rgb: 3, 105, 161;  --slc-b3-rgb: 6, 182, 212;
    --slc-ring: #7dd3fc;  --slc-soft: #e0f2fe;  --slc-soft2: #cffafe;
    --slc-ink: #075985;   --slc-bright: #38bdf8;
    --slc-surface1: #f8fbfe;  --slc-surface2: #eef6fb;  --slc-chip: #eef4f9;

    font-family: var(--slc-font);
    -webkit-font-smoothing: antialiased;
    position: fixed; bottom: 0; right: 0; width: 0; height: 0; z-index: 2147483000;
}
#slc-root button, #slc-root input {
    all: unset;
    box-sizing: border-box;
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
}
#slc-root *, #slc-root *::before, #slc-root *::after { box-sizing: border-box; }
#slc-root button svg { display: block; }
#slc-root .slc-bubble {
    position: fixed; bottom: 24px; right: 24px;
    width: 60px; height: 60px; border-radius: 50%;
    background: linear-gradient(135deg, var(--slc-b1) 0%, var(--slc-b2) 50%, var(--slc-b3) 100%);
    background-size: 200% 200%;
    color: #fff; display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 12px 32px -8px rgba(var(--slc-b2-rgb), 0.55), 0 4px 8px rgba(0, 0, 0, 0.12);
    z-index: 2147483001; font-size: 28px; user-select: none;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
    animation: slcBubbleIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               slcGradientShift 8s ease-in-out infinite,
               slcFloat 3.5s ease-in-out infinite;
}
#slc-root .slc-bubble:hover {
    transform: translateY(-4px) scale(1.08) rotate(-4deg);
    box-shadow: 0 18px 44px -8px rgba(var(--slc-b3-rgb), 0.6), 0 6px 12px rgba(0, 0, 0, 0.18);
    animation-play-state: paused;
}
#slc-root .slc-bubble:active { transform: translateY(-1px) scale(0.96); transition: transform 0.08s ease; }
#slc-root .slc-bubble .slc-status-dot {
    position: absolute; top: -4px; right: -4px; width: 12px; height: 12px;
    background: #22c55e; border: 2px solid white; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
    animation: slcPulse 2s infinite;
}
@keyframes slcBubbleIn {
    0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(10deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes slcFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes slcGradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes slcPulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
#slc-root .slc-panel {
    position: fixed; bottom: 100px; right: 24px;
    width: 380px; height: 560px; max-height: calc(100vh - 140px);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    box-shadow: 0 24px 64px -16px rgba(2, 32, 58, 0.35), 0 4px 16px rgba(2, 32, 58, 0.1);
    display: flex; flex-direction: column;
    z-index: 2147483002; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.4);
    visibility: hidden; pointer-events: none; opacity: 0;
    transform: translateY(30px) scale(0.9);
    transform-origin: bottom right;
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.32s;
}
#slc-root .slc-panel.open { visibility: visible; pointer-events: auto; opacity: 1; transform: translateY(0) scale(1); }
/* Roomier window on larger screens (client wish 2026-08-17).
 * The height follows the free space above the bubble instead of a fixed slice
 * of the viewport, so a tall screen is actually used; the max keeps it sane. */
@media (min-width: 1280px) and (min-height: 800px) {
    #slc-root .slc-panel { width: 470px; height: calc(100vh - 180px); max-height: 820px; }
}
@media (min-width: 1680px) and (min-height: 950px) {
    #slc-root .slc-panel { width: 540px; height: calc(100vh - 180px); max-height: 1080px; }
}
#slc-root .slc-header {
    background: linear-gradient(135deg, var(--slc-b1) 0%, var(--slc-b2) 60%, var(--slc-b3) 100%);
    color: white; padding: 16px 18px;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    box-shadow: 0 4px 12px -4px rgba(2, 32, 58, 0.25);
    position: relative; z-index: 2;
}
#slc-root .slc-header-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
#slc-root .slc-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
    animation: slcSparkle 3s ease-in-out infinite;
}
@keyframes slcSparkle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25%      { transform: rotate(-8deg) scale(1.08); }
    50%      { transform: rotate(0deg) scale(1); }
    75%      { transform: rotate(8deg) scale(1.08); }
}
#slc-root .slc-title { line-height: 1.15; overflow: hidden; }
#slc-root .slc-title-main { font-weight: 700; font-size: 15px; }
#slc-root .slc-title-sub { font-size: 12px; opacity: 0.85; display: flex; align-items: center; gap: 4px; }
#slc-root .slc-title-sub::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);
}
#slc-root .slc-header-actions { display: flex; align-items: center; gap: 4px; }
#slc-root .slc-iconbtn {
    background: rgba(255, 255, 255, 0.14); border: 0; color: white;
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
    transition: background 0.15s, transform 0.15s;
}
#slc-root .slc-iconbtn:hover { background: rgba(255, 255, 255, 0.28); transform: translateY(-1px); }
#slc-root .slc-iconbtn:active { transform: scale(0.9); transition: transform 0.08s; }
#slc-root .slc-close {
    cursor: pointer; font-size: 22px; line-height: 1; opacity: 0.85;
    width: 32px; height: 32px; padding: 0; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
}
#slc-root .slc-close:hover { background: rgba(255, 255, 255, 0.2); opacity: 1; transform: rotate(90deg); }
#slc-root .slc-messages {
    flex: 1; padding: 18px 16px 8px; overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, var(--slc-surface1) 0%, var(--slc-surface2) 100%);
    font-size: 14.5px; line-height: 1.5;
    scrollbar-width: thin; scrollbar-color: #c8d8e4 transparent;
}
#slc-root .slc-messages::-webkit-scrollbar { width: 6px; }
#slc-root .slc-messages::-webkit-scrollbar-thumb { background: #c8d8e4; border-radius: 3px; }
#slc-root .slc-list {
    flex: 1; padding: 12px; overflow-y: auto; overscroll-behavior: contain;
    background: linear-gradient(180deg, var(--slc-surface1) 0%, var(--slc-surface2) 100%);
}
#slc-root .slc-list-empty { text-align: center; color: #94a3b8; padding: 40px 20px; font-size: 14px; }
#slc-root .slc-list-item {
    display: flex; align-items: center; gap: 8px;
    background: white; border: 1px solid #e2eaf0; border-radius: 12px;
    padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
    transition: all 0.15s ease;
    animation: slcChipIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#slc-root .slc-list-item:hover { border-color: var(--slc-ring); box-shadow: 0 4px 10px -2px rgba(var(--slc-b2-rgb), 0.15); }
#slc-root .slc-list-item.active { border-color: var(--slc-b2); background: var(--slc-soft); }
#slc-root .slc-list-body { flex: 1; min-width: 0; line-height: 1.35; }
#slc-root .slc-list-title {
    font-weight: 600; color: #1e293b; font-size: 13.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#slc-root .slc-list-meta { font-size: 11.5px; color: #94a3b8; margin-top: 2px; }
#slc-root .slc-list-del {
    background: transparent; border: 0; color: #cbd5e1; cursor: pointer;
    padding: 6px; border-radius: 6px; display: flex;
    transition: all 0.15s ease;
}
#slc-root .slc-list-del:hover { color: #ef4444; background: #fef2f2; }
@keyframes slcChipIn {
    from { opacity: 0; transform: translateY(6px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
#slc-root .slc-msg {
    margin: 8px 0; padding: 10px 14px; border-radius: 16px;
    max-width: 82%; word-wrap: break-word;
    animation: slcMsgIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#slc-root .slc-msg.user      { animation-name: slcMsgInRight; }
#slc-root .slc-msg.assistant { animation-name: slcMsgInLeft; }
@keyframes slcMsgIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slcMsgInLeft {
    from { opacity: 0; transform: translateY(6px) translateX(-8px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0)   translateX(0)    scale(1); }
}
@keyframes slcMsgInRight {
    from { opacity: 0; transform: translateY(6px) translateX(8px)  scale(0.95); }
    to   { opacity: 1; transform: translateY(0)   translateX(0)    scale(1); }
}
#slc-root .slc-msg.user {
    background: linear-gradient(135deg, var(--slc-b2) 0%, var(--slc-b3) 100%);
    color: white; margin-left: auto; border-bottom-right-radius: 4px;
    box-shadow: 0 2px 8px rgba(var(--slc-b3-rgb), 0.25);
}
#slc-root .slc-msg.assistant {
    background: white; color: #1e293b; margin-right: auto;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(2, 32, 58, 0.06);
    border: 1px solid rgba(2, 32, 58, 0.06);
}
#slc-root .slc-msg.system {
    background: #fff7ed; color: #9a3412; font-size: 12px;
    margin: 6px auto; text-align: center; max-width: 90%;
    border: 1px solid #fed7aa;
}
#slc-root .slc-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#slc-root .slc-msg.assistant a { color: var(--slc-b2); }
#slc-root .slc-msg.assistant a:hover { color: var(--slc-ink); }
#slc-root .slc-msg p, #slc-root .slc-msg li, #slc-root .slc-msg ul, #slc-root .slc-msg ol {
    color: inherit; font-size: inherit; font-family: inherit; line-height: inherit;
}
#slc-root .slc-msg p { margin: 0; }
#slc-root .slc-msg p + p, #slc-root .slc-msg p + ul, #slc-root .slc-msg p + ol,
#slc-root .slc-msg ul + p, #slc-root .slc-msg ol + p,
#slc-root .slc-msg ul + ul, #slc-root .slc-msg .slc-h + p { margin-top: 8px; }
#slc-root .slc-msg ul, #slc-root .slc-msg ol { margin: 4px 0 4px 4px; padding-left: 16px; }
#slc-root .slc-msg li { margin: 3px 0; line-height: 1.45; }
#slc-root .slc-msg li::marker { color: #0891b2; }
#slc-root .slc-msg ul { list-style: disc; }
#slc-root .slc-msg ul ul { margin: 2px 0 2px 2px; padding-left: 14px; list-style: circle; }
#slc-root .slc-msg ul ul li::marker { color: var(--slc-ring); }
#slc-root .slc-msg ul ul ul, #slc-root .slc-msg ul ul ul ul { margin: 2px 0; padding-left: 4px; list-style: circle; }
#slc-root .slc-h { font-weight: 700; font-size: 14px; color: #0f2b46; margin: 8px 0 4px; }
[data-theme="dark"] #slc-root .slc-h { color: #cfe6fa; }
#slc-root .slc-msg.assistant code {
    background: var(--slc-soft); color: var(--slc-ink); padding: 1px 5px; border-radius: 4px; font-size: 13px;
}
#slc-root .slc-ref {
    background: linear-gradient(135deg, var(--slc-soft), var(--slc-soft2));
    color: var(--slc-ink); border-bottom: 1px dashed var(--slc-bright);
    padding: 0 4px; border-radius: 4px; cursor: help; font-weight: 600;
}
#slc-root .slc-typing-bubble {
    display: inline-flex; align-items: center; gap: 5px;
    background: white; color: #64748b;
    padding: 10px 14px; border-radius: 16px 16px 16px 4px;
    margin: 8px 0; max-width: 82%;
    box-shadow: 0 1px 3px rgba(2, 32, 58, 0.06);
    border: 1px solid rgba(2, 32, 58, 0.06);
    animation: slcMsgInLeft 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* the caption next to the dots: what is happening, and from 5s how long */
#slc-root .slc-typing-note {
    font-style: normal; font-size: 12.5px; line-height: 1.3;
    margin-left: 4px; color: #64748b; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
#slc-root .slc-typing-bubble span {
    width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
    background: linear-gradient(135deg, var(--slc-b2), var(--slc-b3));
    animation: slcTypingBounce 1s ease-in-out infinite;
}
#slc-root .slc-typing-bubble span:nth-child(1) { animation-delay: 0s; }
#slc-root .slc-typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
#slc-root .slc-typing-bubble span:nth-child(3) { animation-delay: 0.30s; }
@keyframes slcTypingBounce {
    0%, 80%, 100% { transform: translateY(0)    scale(0.75); opacity: 0.5; }
    40%           { transform: translateY(-6px) scale(1);    opacity: 1; }
}
#slc-root .slc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
#slc-root .slc-chips .chip {
    background: var(--slc-soft); border: 1px solid var(--slc-ring); border-radius: 999px;
    padding: 5px 11px; font-size: 13px; color: var(--slc-ink); cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px; font-weight: 500; line-height: 1.35;
    font-family: inherit; text-decoration: none; box-shadow: none; height: auto; min-height: 0;
    transition: all 0.15s ease;
    animation: slcChipIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#slc-root .slc-chips .chip:nth-child(1) { animation-delay: 0.10s; }
#slc-root .slc-chips .chip:nth-child(2) { animation-delay: 0.18s; }
#slc-root .slc-chips .chip:nth-child(3) { animation-delay: 0.26s; }
#slc-root .slc-chips .chip:nth-child(4) { animation-delay: 0.34s; }
#slc-root .slc-chips .chip:hover {
    border-color: var(--slc-bright); background: var(--slc-soft2); transform: translateY(-1px);
    box-shadow: 0 4px 12px -2px rgba(var(--slc-b2-rgb), 0.2);
}
#slc-root .slc-orders { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
#slc-root .slc-order {
    border: 1px solid #dbe7f0; border-radius: 12px; padding: 10px 12px; background: var(--slc-surface1);
    animation: slcChipIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#slc-root .slc-order.clickable { cursor: pointer; transition: all 0.15s ease; }
#slc-root .slc-order.clickable:hover {
    border-color: var(--slc-ring); transform: translateY(-1px);
    box-shadow: 0 4px 12px -2px rgba(var(--slc-b2-rgb), 0.18);
}
#slc-root .slc-order-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#slc-root .slc-order-id { font-weight: 700; font-size: 13px; color: #1e293b; }
#slc-root .slc-order-status {
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
    background: var(--slc-soft); color: var(--slc-b2); white-space: nowrap;
}
#slc-root .slc-order-date { font-size: 12px; color: #8a97a8; margin: 2px 0 4px; }
#slc-root .slc-order-items { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
#slc-root .slc-order-items li { font-size: 13px; color: #3a4656; line-height: 1.35; }
#slc-root .slc-order-qty { color: var(--slc-b2); font-weight: 600; }
#slc-root .slc-order-total { font-size: 13px; font-weight: 700; color: var(--slc-ink); }
#slc-root .slc-mic {
    background: var(--slc-chip); color: #64748b; border: 0; border-radius: 50%;
    width: 42px; height: 42px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background 0.15s, color 0.15s, transform 0.15s;
}
#slc-root .slc-mic:hover { background: var(--slc-soft); color: var(--slc-b2); }
#slc-root .slc-mic.listening { background: #ef4444; color: #fff; animation: slcMicPulse 1.4s infinite; }
@keyframes slcMicPulse {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
    70%  { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
[data-theme="dark"] #slc-root .slc-chips .chip { background: #123a52; border-color: #0ea5e9; color: var(--slc-ring); }
[data-theme="dark"] #slc-root .slc-order { background: #14202e; border-color: #1f3245; }
[data-theme="dark"] #slc-root .slc-order-id { color: #dbe7f0; }
[data-theme="dark"] #slc-root .slc-order-items li { color: #b9c6d4; }
[data-theme="dark"] #slc-root .slc-mic { background: #14202e; color: #7a8aa0; }
#slc-root .slc-panel.list-open .slc-input,
#slc-root .slc-panel.list-open .slc-warn,
#slc-root .slc-panel.form-active .slc-input,
#slc-root .slc-panel.form-active .slc-warn { display: none; }
#slc-root .slc-order-mp {
    font-weight: 600; font-size: 11px; color: #64748b;
    background: var(--slc-chip); border-radius: 6px; padding: 1px 6px; margin-left: 6px;
}
[data-theme="dark"] #slc-root .slc-order-mp { background: #173347; color: #93b4cc; }
#slc-root .slc-form {
    margin-top: 12px; padding: 12px;
    background: linear-gradient(135deg, var(--slc-surface1), var(--slc-surface2));
    border: 1px solid #dbe7f0; border-radius: 12px;
    display: flex; flex-direction: column; gap: 10px;
    animation: slcChipIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#slc-root .slc-form.collapsed { opacity: 0.65; }
#slc-root .slc-form-field { display: flex; flex-direction: column; gap: 4px; }
#slc-root .slc-form-field label { font-size: 12px; color: #64748b; font-weight: 600; }
#slc-root .slc-form-field input, #slc-root .slc-form-field select, #slc-root .slc-form-field textarea {
    padding: 8px 10px; border: 1px solid #dae6ee; border-radius: 8px;
    font-size: 13.5px; font-family: inherit; background: white; color: #1e293b;
    outline: none; width: 100%; display: block; appearance: auto; -webkit-appearance: auto;
}
#slc-root .slc-form-field textarea { resize: vertical; min-height: 62px; }
#slc-root .slc-form-field input:focus, #slc-root .slc-form-field select:focus, #slc-root .slc-form-field textarea:focus {
    border-color: var(--slc-ring); box-shadow: 0 0 0 3px rgba(var(--slc-b2-rgb), 0.1);
}
/* one-time code: a box per digit */
#slc-root .slc-otp { display: flex; gap: 6px; justify-content: center; padding: 2px 0; }
#slc-root .slc-form-field .slc-otp-box {
    width: 100%; max-width: 44px; min-width: 0; height: 44px; padding: 0;
    text-align: center; font-size: 18px; font-weight: 700; letter-spacing: 0;
    font-variant-numeric: tabular-nums; caret-color: var(--slc-b2);
}
#slc-root .slc-form-field .slc-otp-box:disabled { opacity: 1; -webkit-text-fill-color: #1e293b; }
[data-theme="dark"] #slc-root .slc-form-field .slc-otp-box:disabled { -webkit-text-fill-color: #dbe7f0; }
#slc-root .slc-form-actions { display: flex; justify-content: flex-end; gap: 8px; align-items: center; flex-wrap: wrap; }
#slc-root .slc-form-actions button { white-space: nowrap; }   /* labels never break across lines */
/* secondary action is a quiet link on its own row, so the two real buttons always share one line */
#slc-root .slc-form-resend {
    flex: 1 0 100%; order: -1; text-align: left;
    background: none; border: 0; padding: 0 2px 2px; margin: 0;
    color: var(--slc-b2); font-size: 12px; cursor: pointer; text-decoration: underline;
}
#slc-root .slc-form-resend:hover { color: var(--slc-b1); }
#slc-root .slc-form-submit {
    background: linear-gradient(135deg, var(--slc-b1), var(--slc-b2)); color: #fff; border: 0;
    padding: 8px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s; display: inline-flex; align-items: center;
}
#slc-root .slc-form-submit:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--slc-b2-rgb), 0.35); }
#slc-root .slc-form-cancel {
    background: transparent; color: #64748b; border: 1px solid #dae6ee;
    padding: 8px 14px; border-radius: 8px; font-size: 13px; cursor: pointer;
    display: inline-flex; align-items: center; transition: all 0.15s;
}
#slc-root .slc-form-cancel:hover { color: #ef4444; border-color: #fca5a5; background: #fef2f2; }
[data-theme="dark"] #slc-root .slc-form { background: #14202e; border-color: #1f3245; }
[data-theme="dark"] #slc-root .slc-form-field input, [data-theme="dark"] #slc-root .slc-form-field select, [data-theme="dark"] #slc-root .slc-form-field textarea {
    background: #0c141d; border-color: #1f3245; color: #dbe7f0;
}
#slc-root .slc-warn {
    display: none; padding: 6px 15px; font-size: 11.5px; color: #9a6700;
    background: #fff8e5; border-top: 1px solid #f0e0b0;
}
#slc-root .slc-warn.show { display: block; }
#slc-root .slc-input {
    display: flex; padding: 12px 14px 14px;
    border-top: 1px solid rgba(2, 32, 58, 0.06);
    background: white; gap: 10px; align-items: flex-end;
}
#slc-root .slc-input input {
    flex: 1; padding: 11px 14px;
    border: 1px solid #dae6ee; border-radius: 24px;
    font-size: 14.5px; font-weight: 400; color: #1e293b;
    outline: none; background: #f6fafc; line-height: 1.3;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
}
#slc-root .slc-input input::placeholder { color: #94a3b8; font-weight: 400; }
#slc-root .slc-input input:focus {
    border-color: var(--slc-ring); background: white;
    box-shadow: 0 0 0 4px rgba(var(--slc-b2-rgb), 0.12);
    transform: translateY(-1px);
}
#slc-root .slc-input .slc-send {
    background: linear-gradient(135deg, var(--slc-b1) 0%, var(--slc-b2) 60%, var(--slc-b3) 100%);
    background-size: 200% 200%;
    color: white; border: 0; border-radius: 50%;
    width: 42px; height: 42px; cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px -2px rgba(var(--slc-b2-rgb), 0.4);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s, background-position 0.5s;
    flex-shrink: 0;
}
#slc-root .slc-input .slc-send:hover:not(:disabled) {
    transform: scale(1.1) rotate(-8deg);
    box-shadow: 0 6px 16px -2px rgba(var(--slc-b3-rgb), 0.55);
    background-position: 100% 0%;
}
#slc-root .slc-input .slc-send:active:not(:disabled) { transform: scale(0.92) rotate(0); transition: transform 0.08s; }
#slc-root .slc-input .slc-send:disabled { background: #cbd5e1; box-shadow: none; cursor: default; transform: scale(1); }
[data-theme="dark"] #slc-root .slc-panel { background: rgba(15, 23, 34, 0.98); border-color: #1f3245; }
[data-theme="dark"] #slc-root .slc-messages,
[data-theme="dark"] #slc-root .slc-list { background: linear-gradient(180deg, #0c141d 0%, #0a1119 100%); }
[data-theme="dark"] #slc-root .slc-msg.assistant { background: #14202e; border-color: #1f3245; color: #dbe7f0; }
[data-theme="dark"] #slc-root .slc-msg.assistant code { background: #173347; color: var(--slc-ring); }
[data-theme="dark"] #slc-root .slc-typing-bubble { background: #14202e; border-color: #1f3245; }
[data-theme="dark"] #slc-root .slc-input { background: #0f1722; border-color: #1f3245; }
[data-theme="dark"] #slc-root .slc-input input { background: #0c141d; border-color: #1f3245; color: #dbe7f0; }
[data-theme="dark"] #slc-root .slc-list-item { background: #14202e; border-color: #1f3245; }
[data-theme="dark"] #slc-root .slc-list-item.active { background: #123a52; border-color: #0ea5e9; }
[data-theme="dark"] #slc-root .slc-list-title { color: #dbe7f0; }
[data-theme="dark"] #slc-root .slc-ref { background: #123a52; color: var(--slc-ring); border-bottom-color: #0ea5e9; }

/* ===== NAMED THEMES ===================================================
 * Each block only redefines the palette variables — no layout is repeated.
 * Colours and fonts are taken from the site each theme belongs to.
 *   ocean   — default (defined on #slc-root above)
 *   harbour — megapromo admin panel  (navy #003466 + panel green, Spartan)
 *   delft   — Tegelspreuken.nl       (Delft blue + warm clay, Bitter)
 *   kiln    — Mokkenexpert.nl        (navy + kiln orange, Manrope)
 * ==================================================================== */

/* harbour — megapromo admin dashboard */
#slc-root[data-slc-theme="harbour"] {
    --slc-font: "Spartan", "League Spartan", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --slc-b1: #002347;  --slc-b2: #003466;  --slc-b3: #275CAB;
    --slc-b2-rgb: 0, 52, 102;  --slc-b3-rgb: 39, 92, 171;
    --slc-ring: #8fb3da;  --slc-soft: #e7eef7;  --slc-soft2: #dae6f4;
    --slc-ink: #002d5c;   --slc-bright: #4B9F3C;
    --slc-surface1: #ffffff;  --slc-surface2: #f5f5f5;  --slc-chip: #eaf0f6;
}

/* delft — Tegelspreuken.nl */
#slc-root[data-slc-theme="delft"] {
    --slc-font: "Bitter", Georgia, "Times New Roman", serif;
    --slc-b1: #1a3f7a;  --slc-b2: #275CAB;  --slc-b3: #4a86d8;
    --slc-b2-rgb: 39, 92, 171;  --slc-b3-rgb: 74, 134, 216;
    --slc-ring: #a8c4e8;  --slc-soft: #e8eff8;  --slc-soft2: #f2e9e1;
    --slc-ink: #1a3f7a;   --slc-bright: #c6a992;
    --slc-surface1: #fbfcfe;  --slc-surface2: #eef3f9;  --slc-chip: #eef0f4;
}

/* kiln — Mokkenexpert.nl */
#slc-root[data-slc-theme="kiln"] {
    --slc-font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    --slc-b1: #12294c;  --slc-b2: #1a3c6e;  --slc-b3: #e8611a;
    --slc-b2-rgb: 26, 60, 110;  --slc-b3-rgb: 232, 97, 26;
    --slc-ring: #f0a878;  --slc-soft: #eef2fb;  --slc-soft2: #fdece1;
    --slc-ink: #12294c;   --slc-bright: #e8611a;
    --slc-surface1: #f7f8fc;  --slc-surface2: #eef2fb;  --slc-chip: #e4e8f0;
}

/* ===== chat designer: tile cards + tappable image grids ================= */
#slc-root .slc-designs { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
#slc-root .slc-design {
    display: grid; grid-template-columns: 86px minmax(0, 1fr);
    gap: 4px 12px; align-items: start;
    background: white; border: 1px solid #dae6ee; border-radius: 12px; padding: 10px;
}
#slc-root .slc-design-img {
    width: 86px; height: 86px; object-fit: contain; align-self: start;
    border-radius: 8px; background: var(--slc-surface2); border: 1px solid #e2eaf0;
}
#slc-root .slc-design-cap { font-size: 13px; color: #1e293b; font-weight: 600; line-height: 1.35; }
#slc-root .slc-design-actions { display: flex; gap: 8px; }
#slc-root .slc-design-btn {
    font-size: 12px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
    background: var(--slc-soft); color: var(--slc-ink); border: 1px solid var(--slc-ring);
}
#slc-root .slc-design-btn:hover { background: var(--slc-soft2); }
#slc-root .slc-imggrid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px;
}
#slc-root .slc-imgcell {
    padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden;
    cursor: pointer; background: var(--slc-surface2); aspect-ratio: 1; display: block;
}
#slc-root .slc-imgcell img { width: 100%; height: 100%; object-fit: cover; display: block; }
#slc-root .slc-imgcell:hover { border-color: var(--slc-bright); transform: translateY(-1px); }
[data-theme="dark"] #slc-root .slc-design { background: #0c141d; border-color: #1f3245; }
[data-theme="dark"] #slc-root .slc-design-cap { color: #dbe7f0; }

/* ===== responsive: rich blocks may never escape their message bubble ===== */
#slc-root .slc-msg { min-width: 0; }
#slc-root .slc-msg .slc-designs, #slc-root .slc-msg .slc-imggrid,
#slc-root .slc-msg .slc-orders, #slc-root .slc-msg .slc-tickets,
#slc-root .slc-msg .slc-chips, #slc-root .slc-msg .slc-form {
    max-width: 100%; min-width: 0;
}
#slc-root .slc-design { max-width: 100%; }
#slc-root .slc-design-cap { min-width: 0; overflow-wrap: anywhere; }
#slc-root .slc-design-actions { flex-wrap: wrap; }
/* a single long chip wraps inside the bubble instead of poking out of it */
#slc-root .slc-chips .chip { max-width: 100%; white-space: normal; text-align: left; }
#slc-root .slc-order, #slc-root .slc-ticket { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }

/* composer paperclip (photo upload, designer sites) */
#slc-root .slc-clip {
    background: #eef4f9; border: 0; border-radius: 50%; width: 38px; height: 38px;
    font-size: 17px; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
#slc-root .slc-clip:hover { background: var(--slc-soft); }

/* ---- dark mode, the parts that had no dark rule yet (2026-09-05) ---- */
[data-theme="dark"] #slc-root .slc-clip, [data-theme="dark"] #slc-root .slc-iconbtn { background: #14202e; color: #9fb3c8; border-color: #1f3245; }
[data-theme="dark"] #slc-root .slc-designs .slc-design-btn { background: #173347; color: #cfe6fa; border-color: #1f3245; }
[data-theme="dark"] #slc-root .slc-design-actions { border-color: #1f3245; }
[data-theme="dark"] #slc-root .slc-imgcell { background: #14202e; border-color: #1f3245; }
[data-theme="dark"] #slc-root .slc-imggrid a { color: #9fb3c8; }
[data-theme="dark"] #slc-root .slc-ticket { background: #14202e; border-color: #1f3245; color: #dbe7f0; }
[data-theme="dark"] #slc-root .slc-typing-note { color: #7a8aa0; }
[data-theme="dark"] #slc-root .slc-warn { background: #3a2a12; color: #ffd48a; border-color: #5a3f12; }
[data-theme="dark"] #slc-root .slc-list-meta, [data-theme="dark"] #slc-root .slc-order-date { color: #8fa1b5; }
[data-theme="dark"] #slc-root .slc-list-empty { color: #7a8aa0; }
[data-theme="dark"] #slc-root .slc-form-cancel { color: #9fb3c8; }
[data-theme="dark"] #slc-root .slc-msg.assistant a { color: #7cc4ff; }

/* phone layout — kept at the end so it wins over the base rules above */
@media (max-width: 600px) {
    /* phones (2026-09-05): the whole screen, above the site's own fixed header/search
       bar, with the notch/home-bar safe areas as padding; the bubble hides while open */
    #slc-root .slc-panel {
        left: 0; right: 0; top: 0; bottom: 0;
        width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; max-height: none;
        border-radius: 0; border: 0;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transform: translateY(24px); transform-origin: bottom center;
    }
    #slc-root .slc-panel.open { transform: none; }
    #slc-root .slc-panel.open ~ .slc-bubble, #slc-root:has(.slc-panel.open) .slc-bubble { display: none; }
    #slc-root .slc-bubble { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
    #slc-root .slc-input { gap: 6px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
    #slc-root .slc-input input { font-size: 16px; min-width: 0; flex: 1 1 auto; }
    #slc-root .slc-input > button, #slc-root .slc-input .slc-clip, #slc-root .slc-input .slc-mic, #slc-root .slc-input .slc-send { flex: 0 0 auto; }
    #slc-root .slc-header { border-radius: 0; }
}