/* ══════════════════════════════════════════════════════════════════
   KosyAI — Widget Mode (Web-First)
   Website = protagonist · Chatbot = floating glassmorphism widget
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* Dynamic store colors — overridden by JS per store */
    --store-primary: #0f7ab5;
    --store-secondary: #1e293b;
    --store-accent: #f59e0b;

    --primary: var(--store-primary);
    --primary-dark: color-mix(in srgb, var(--store-primary) 80%, #000);
    --primary-light: color-mix(in srgb, var(--store-primary) 70%, #fff);
    --primary-glow: color-mix(in srgb, var(--store-primary) 30%, transparent);
    --accent-green: #10b981;
    --accent-amber: var(--store-accent);
    --text-dark: #0f172a;
    --text-body: #475569;
    --text-muted: #94a3b8;
    --border: #e5e7eb;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --transition: 0.25s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size: 13.5px; -webkit-font-smoothing: antialiased; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif; background:#0a0a0f; overflow:hidden; width:100vw; height:100vh; }

/* ═══════════ DESK ENVIRONMENT ═══════════ */
.desk-environment { position:fixed; inset:0; z-index:0; }
.desk-photo { width:100%; height:100%; object-fit:cover; filter:brightness(0.3) saturate(0.6); }
.desk-vignette { position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 40%,rgba(0,0,0,0.55) 100%); pointer-events:none; }

/* ═══════════ MONITOR SCREEN ═══════════ */
.monitor-screen {
    position:fixed; z-index:10;
    top:4px; left:4px; right:4px; bottom:4px;
    background:#fff; border-radius:8px;
    box-shadow:0 0 0 1px rgba(255,255,255,0.05),0 20px 60px rgba(0,0,0,0.6);
    display:flex; flex-direction:column; overflow:hidden;
    animation:screenIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes screenIn { 0%{opacity:0;transform:scale(0.98) translateY(6px)} 100%{opacity:1;transform:scale(1) translateY(0)} }

/* ═══════════ BROWSER CHROME ═══════════ */
.browser-chrome {
    display:flex; align-items:center; gap:12px;
    padding:6px 14px; background:#e8eaed; border-bottom:1px solid #d5d8dc; flex-shrink:0;
}
.browser-dots { display:flex; gap:6px; }
.dot-red,.dot-yellow,.dot-green { width:11px; height:11px; border-radius:50%; }
.dot-red{background:#ff5f57} .dot-yellow{background:#ffbd2e} .dot-green{background:#28c840}

.browser-tabs { display:flex; align-items:center; gap:2px; margin-left:8px; }
.browser-tab {
    display:flex; align-items:center; gap:6px; padding:5px 14px;
    background:#f8f9fa; border-radius:8px 8px 0 0; font-size:0.78rem;
    color:#475569; font-weight:500; cursor:pointer;
}
.browser-tab.active { background:#fff; color:#1e293b; box-shadow:0 -1px 3px rgba(0,0,0,0.06); }
.tab-close { font-size:1rem; color:#94a3b8; margin-left:4px; cursor:pointer; }
.tab-close:hover { color:#ef4444; }
.tab-plus { font-size:1.1rem; color:#94a3b8; padding:0 6px; }

.browser-toolbar {
    display:flex; align-items:center; gap:10px; padding:5px 14px;
    background:#fff; border-bottom:1px solid var(--border); flex-shrink:0;
}
.toolbar-nav { display:flex; align-items:center; gap:8px; }
.browser-address-bar {
    flex:1; display:flex; align-items:center; gap:8px;
    background:#f1f3f5; border:1px solid #e2e5ea; border-radius:20px;
    padding:5px 14px; max-width:560px;
}
.address-text { font-size:0.8rem; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.toolbar-actions { margin-left:auto; cursor:pointer; }

/* ═══════════ WEBSITE CONTENT ═══════════ */
.website-content {
    flex:1; overflow-y:auto; background:#fafbfc; position:relative;
    scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent;
}
.website-content::-webkit-scrollbar { width:6px; }
.website-content::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:10px; }

/* Site Header */
.site-header { display:flex; align-items:center; justify-content:space-between; padding:0 32px; height:56px; background:#fff; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20; }
.site-logo { display:flex; align-items:center; gap:10px; }
.logo-text { font-weight:700; font-size:1.2rem; color:var(--text-dark); letter-spacing:-0.02em; }
.logo-accent { color:var(--primary); font-weight:500; }

.site-nav { display:flex; align-items:center; gap:4px; }
.nav-link { text-decoration:none; color:var(--text-body); font-size:0.9rem; font-weight:500; padding:8px 14px; border-radius:var(--radius-sm); transition:all var(--transition); }
.nav-link.active { color:var(--primary); background:rgba(15,122,181,0.08); }
.nav-link:hover { color:var(--text-dark); background:#f1f5f9; }

.header-actions { display:flex; align-items:center; gap:6px; }
.header-icon-btn { background:none; border:none; width:36px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background var(--transition); position:relative; }
.header-icon-btn:hover { background:#f1f5f9; }
.cart-badge { position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%; background:var(--primary); color:#fff; font-size:0.6rem; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* Promo Banner */
.promo-banner { padding:8px 32px; background:linear-gradient(90deg,#eef2ff,#faf5ff,#eef2ff); text-align:center; font-size:0.82rem; color:var(--text-body); font-weight:500; border-bottom:1px solid var(--border); }

/* Hero */
.site-hero { display:flex; align-items:center; justify-content:space-between; padding:52px 56px; background:linear-gradient(135deg,#f8fafc,#edf2f7); min-height:290px; }
.hero-content { max-width:540px; }
.hero-badge { display:inline-block; background:rgba(15,122,181,0.1); color:var(--primary); padding:5px 16px; border-radius:20px; font-size:0.78rem; font-weight:600; margin-bottom:16px; }
.hero-title { font-size:2.3rem; font-weight:800; color:var(--text-dark); line-height:1.15; margin-bottom:14px; letter-spacing:-0.03em; }
.gradient-text { background:linear-gradient(135deg,var(--primary),#6366f1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-subtitle { font-size:1rem; color:var(--text-body); line-height:1.55; margin-bottom:24px; }
.hero-ctas { display:flex; gap:12px; margin-bottom:18px; }
.hero-btn { padding:12px 26px; border-radius:10px; font-family:inherit; font-weight:600; font-size:0.9rem; cursor:pointer; transition:all var(--transition); }
.hero-btn.primary { background:var(--primary); color:#fff; border:none; box-shadow:0 3px 10px rgba(15,122,181,0.25); }
.hero-btn.primary:hover { background:var(--primary-dark); transform:translateY(-1px); }
.hero-btn.secondary { background:#fff; color:var(--text-dark); border:1px solid #d1d5db; }
.hero-btn.secondary:hover { border-color:var(--primary); color:var(--primary); }
.hero-trust { display:flex; gap:18px; }
.trust-item { font-size:0.75rem; color:var(--text-muted); font-weight:500; }

.hero-visual { flex-shrink:0; }
.hero-product-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; width:240px; }
.hero-card { height:100px; border-radius:10px; }
.hero-card.c1 { background:linear-gradient(135deg,#dbeafe,#93c5fd); }
.hero-card.c2 { background:linear-gradient(135deg,#fef3c7,#fcd34d); }
.hero-card.c3 { background:linear-gradient(135deg,#d1fae5,#6ee7b7); }
.hero-card.c4 { background:linear-gradient(135deg,#fce7f3,#f9a8d4); }

/* Product Grid */
.site-products { padding:40px 56px; }
.products-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.section-title { font-size:1.3rem; font-weight:700; color:var(--text-dark); }
.filter-pills { display:flex; gap:6px; }
.pill { padding:5px 14px; border-radius:20px; font-size:0.78rem; font-weight:500; color:var(--text-muted); background:#f1f5f9; cursor:pointer; transition:all var(--transition); }
.pill.active { background:var(--primary); color:#fff; }
.pill:hover:not(.active) { background:#e2e8f0; }

.product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.product-card { background:#fff; border-radius:12px; overflow:hidden; border:1px solid var(--border); transition:all var(--transition); position:relative; }
.product-card:hover { box-shadow:0 6px 24px rgba(0,0,0,0.08); transform:translateY(-3px); }
.card-badge { position:absolute; top:10px; left:10px; padding:3px 10px; border-radius:6px; font-size:0.68rem; font-weight:700; background:#fff; color:var(--primary); box-shadow:0 2px 6px rgba(0,0,0,0.08); z-index:2; }
.card-img { height:130px; }
.card-img.img-1 { background:linear-gradient(135deg,#dbeafe,#bfdbfe); }
.card-img.img-2 { background:linear-gradient(135deg,#d1fae5,#a7f3d0); }
.card-img.img-3 { background:linear-gradient(135deg,#fef3c7,#fde68a); }
.card-img.img-4 { background:linear-gradient(135deg,#fce7f3,#fbcfe8); }
.card-body { padding:12px 14px; }
.card-name { font-size:0.88rem; font-weight:600; color:var(--text-dark); display:block; margin-bottom:4px; }
.card-rating { font-size:0.72rem; margin-bottom:6px; }
.card-rating span { color:var(--text-muted); }
.card-pricing { display:flex; align-items:center; gap:8px; }
.price-old { font-size:0.78rem; color:var(--text-muted); text-decoration:line-through; }
.card-price { font-size:0.92rem; font-weight:700; color:var(--primary); }

/* Features */
.site-features { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:36px 56px; background:#fff; border-top:1px solid var(--border); }
.feature-card { text-align:center; padding:20px 14px; }
.feature-icon { font-size:2rem; margin-bottom:10px; }
.feature-card h3 { font-size:0.9rem; font-weight:700; color:var(--text-dark); margin-bottom:5px; }
.feature-card p { font-size:0.78rem; color:var(--text-body); line-height:1.4; }

/* Testimonials */
.testimonials-strip { padding:30px 56px; background:#f8fafc; border-top:1px solid var(--border); display:flex; gap:24px; }
.testimonial { flex:1; display:flex; gap:12px; align-items:flex-start; padding:18px; background:#fff; border-radius:12px; border:1px solid var(--border); font-size:0.82rem; color:var(--text-body); line-height:1.5; }
.test-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--primary),#6366f1); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; flex-shrink:0; }

/* Footer */
.site-footer { background:#1e293b; color:#94a3b8; padding:36px 56px 18px; }
.footer-cols { display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:28px; margin-bottom:20px; }
.footer-col h4 { color:#e2e8f0; font-size:0.9rem; margin-bottom:10px; }
.footer-col p { font-size:0.78rem; line-height:1.5; }
.footer-col a { display:block; font-size:0.78rem; color:#94a3b8; text-decoration:none; margin-bottom:5px; transition:color var(--transition); }
.footer-col a:hover { color:var(--primary-light); }
.newsletter-form { display:flex; gap:4px; }
.newsletter-form input { flex:1; padding:7px 10px; border:1px solid rgba(148,163,184,0.2); border-radius:var(--radius-sm); background:rgba(255,255,255,0.05); color:#e2e8f0; font-size:0.78rem; outline:none; }
.newsletter-form input::placeholder { color:#64748b; }
.newsletter-form button { padding:7px 12px; border:none; border-radius:var(--radius-sm); background:var(--primary); color:#fff; cursor:pointer; font-size:0.9rem; }
.footer-bottom { border-top:1px solid rgba(148,163,184,0.12); padding-top:14px; font-size:0.72rem; color:#64748b; display:flex; justify-content:space-between; }
.footer-badges { font-size:0.72rem; }

/* ═══════════════════════════════════════════════════════════════
   ROI TOAST — Green pill floating above widget
   ═══════════════════════════════════════════════════════════════ */
.roi-toast {
    position:absolute; bottom:560px; right:24px; z-index:40;
    display:flex; align-items:center; gap:8px;
    padding:8px 16px; border-radius:20px;
    background:rgba(16,185,129,0.95);
    color:#fff; font-size:0.78rem; font-weight:600;
    box-shadow:0 4px 16px rgba(16,185,129,0.35),0 0 0 1px rgba(255,255,255,0.1) inset;
    animation:toastAppear 0.5s 1.2s cubic-bezier(0.16,1,0.3,1) backwards, toastFloat 3s 2s ease-in-out infinite;
}
@keyframes toastAppear { 0%{opacity:0;transform:translateY(8px) scale(0.9)} 100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes toastFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }

.roi-toast-dot { width:8px; height:8px; border-radius:50%; background:#fff; animation:toastDotPulse 2s ease-in-out infinite; }
@keyframes toastDotPulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ═══════════════════════════════════════════════════════════════
   CHATBOT WIDGET — Vertical/Portrait, Chat-first
   380px wide × flexible height (max 540px)
   ═══════════════════════════════════════════════════════════════ */
.chatbot-widget {
    position:absolute; bottom:18px; right:18px; z-index:35;
    width:380px; max-width:calc(100% - 36px);
    height:530px; max-height:calc(100% - 80px);
    background:rgba(15,23,42,0.82);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
    border:1px solid rgba(148,163,184,0.12);
    border-radius:var(--radius-xl);
    box-shadow:0 16px 48px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.05) inset;
    display:flex; flex-direction:column;
    overflow:hidden;
    animation:widgetSlideUp 0.5s 0.5s cubic-bezier(0.16,1,0.3,1) backwards;
    transition:all 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes widgetSlideUp { 0%{opacity:0;transform:translateY(20px) scale(0.95)} 100%{opacity:1;transform:translateY(0) scale(1)} }

.chatbot-widget.minimized {
    width:56px; height:56px; border-radius:50%;
    opacity:0; transform:scale(0.5); pointer-events:none;
}

/* Widget Header */
.widget-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; border-bottom:1px solid rgba(148,163,184,0.1);
    flex-shrink:0;
}
.widget-header-left { display:flex; align-items:center; gap:8px; }
.kosyai-icon { width:28px; height:28px; border-radius:7px; background:var(--primary); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.85rem; color:#fff; }
.widget-bot-info { display:flex; flex-direction:column; }
.widget-bot-name { font-weight:600; font-size:0.82rem; color:#e2e8f0; }
.widget-bot-status { font-size:0.62rem; color:#94a3b8; display:flex; align-items:center; gap:4px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:#34d399; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,0.5)} 50%{box-shadow:0 0 0 3px rgba(52,211,153,0)} }
.widget-header-right { display:flex; align-items:center; gap:4px; }

/* Language Selector */
.lang-selector { position:relative; }
.lang-btn { display:flex; align-items:center; gap:3px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); color:#fff; padding:3px 7px; border-radius:var(--radius-sm); cursor:pointer; font-size:0.75rem; transition:all var(--transition); }
.lang-btn:hover { background:rgba(255,255,255,0.16); }
.lang-flag { font-size:0.95rem; }
.lang-dropdown { position:absolute; top:32px; right:0; background:#fff; border-radius:var(--radius-md); box-shadow:0 8px 24px rgba(0,0,0,0.2); overflow:hidden; z-index:50; min-width:120px; }
.lang-dropdown.hidden { display:none; }
.lang-option { display:block; width:100%; padding:8px 12px; border:none; background:none; color:#1e293b; font-family:inherit; font-size:0.8rem; font-weight:500; text-align:left; cursor:pointer; transition:background var(--transition); }
.lang-option:hover { background:#f1f5f9; }

.widget-action-btn { background:none; border:none; color:#94a3b8; width:28px; height:28px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--transition); }
.widget-action-btn:hover { color:#fff; background:rgba(255,255,255,0.1); }

/* ═══════════ CHAT AREA — The Protagonist ═══════════ */
.widget-chat { flex:1; display:flex; flex-direction:column; min-height:0; position:relative; }

.widget-messages {
    flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:8px;
    scrollbar-width:thin; scrollbar-color:rgba(148,163,184,0.2) transparent;
}
.widget-messages::-webkit-scrollbar { width:3px; }
.widget-messages::-webkit-scrollbar-thumb { background:rgba(148,163,184,0.2); border-radius:10px; }

.message { display:flex; width:100%; }
.bot-message { justify-content:flex-start; }
.user-message { justify-content:flex-end; }
.message-bubble { max-width:88%; padding:8px 12px; border-radius:var(--radius-lg); line-height:1.45; font-size:0.82rem; }
.bot-bubble { background:rgba(241,245,249,0.95); color:#1e293b; border-bottom-left-radius:4px; }
.bot-bubble p { margin-bottom:4px; }
.bot-bubble p:last-of-type { margin-bottom:0; }
.user-bubble { background:var(--primary); color:#fff; border-bottom-right-radius:4px; }
.user-bubble p { margin:0; }
.msg-time { display:block; text-align:right; font-size:0.58rem; opacity:0.5; margin-top:3px; }

.animate-in { animation:slideIn 0.35s cubic-bezier(0.16,1,0.3,1) backwards; }
@keyframes slideIn { 0%{opacity:0;transform:translateY(6px)} 100%{opacity:1;transform:translateY(0)} }

.typing-bubble { padding:8px 12px; }
.typing-dots { display:flex; gap:4px; }
.typing-dots span { width:5px; height:5px; border-radius:50%; background:#94a3b8; animation:typingBounce 1.4s infinite ease-in-out; }
.typing-dots span:nth-child(2){animation-delay:.2s} .typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-3px)} }

/* ═══════════ K ICON — Toggle for product drawer ═══════════ */
.kosyai-icon {
    width:28px; height:28px; border-radius:7px; background:var(--primary);
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    font-weight:800; font-size:0.85rem; color:#fff;
    border:none; cursor:pointer; position:relative;
    transition:all var(--transition);
}
.kosyai-icon:hover { background:var(--primary-dark); transform:scale(1.08); }
.kosyai-icon.has-products { box-shadow:0 0 0 2px rgba(52,211,153,0.6); }
.k-arrow { position:absolute; bottom:-1px; right:-1px; color:#34d399; }
.k-arrow.hidden { display:none; }

/* ═══════════ PRODUCT DRAWER — Slides down from header ═══════════ */
.product-drawer {
    overflow:hidden; transition:max-height 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease;
    background:rgba(0,0,0,0.25); border-bottom:1px solid rgba(148,163,184,0.1);
}
.product-drawer.closed { max-height:0; opacity:0; border-bottom:none; }
.product-drawer.open { max-height:400px; opacity:1; }

.drawer-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:8px 14px; border-bottom:1px solid rgba(148,163,184,0.08);
}
.drawer-title { font-size:0.72rem; font-weight:600; color:#e2e8f0; }
.drawer-close { background:none; border:none; color:#94a3b8; font-size:0.9rem; cursor:pointer; padding:2px 6px; border-radius:4px; transition:all var(--transition); }
.drawer-close:hover { color:#fff; background:rgba(255,255,255,0.1); }

.drawer-products {
    display:flex; flex-direction:column; gap:6px;
    padding:8px 10px; max-height:260px; overflow-y:auto;
    scrollbar-width:thin; scrollbar-color:rgba(148,163,184,0.2) transparent;
}
.drawer-products::-webkit-scrollbar { width:3px; }
.drawer-products::-webkit-scrollbar-thumb { background:rgba(148,163,184,0.2); border-radius:10px; }

.drawer-card {
    display:flex; align-items:center; gap:10px;
    padding:8px; border-radius:var(--radius-md);
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.06);
    transition:all var(--transition); cursor:pointer;
}
.drawer-card:hover { background:rgba(255,255,255,0.1); border-color:var(--primary); }

.dc-img { width:44px; height:44px; border-radius:8px; flex-shrink:0; }
.dc-img.img-1 { background:linear-gradient(135deg,#dbeafe,#93c5fd); }
.dc-img.img-2 { background:linear-gradient(135deg,#d1fae5,#6ee7b7); }
.dc-img.img-3 { background:linear-gradient(135deg,#fef3c7,#fcd34d); }
.dc-img.img-4 { background:linear-gradient(135deg,#fce7f3,#f9a8d4); }

.dc-info { flex:1; min-width:0; }
.dc-name { font-size:0.72rem; font-weight:600; color:#e2e8f0; display:block; line-height:1.2; }
.dc-rating { font-size:0.58rem; color:#94a3b8; display:block; }
.dc-price { font-size:0.72rem; font-weight:700; color:var(--accent-green); }
.dc-old { font-size:0.6rem; color:#64748b; text-decoration:line-through; margin-right:4px; }

.dc-stripe-btn {
    display:flex; align-items:center; gap:4px;
    padding:5px 10px; border:none; border-radius:6px;
    background:linear-gradient(135deg,#635bff,#7c3aed);
    color:#fff; font-family:inherit; font-weight:600; font-size:0.6rem;
    cursor:pointer; transition:all var(--transition);
    box-shadow:0 2px 6px rgba(99,91,255,0.3);
    white-space:nowrap; flex-shrink:0;
}
.dc-stripe-btn.hidden { display:none; }
.dc-stripe-btn:hover { transform:translateY(-1px); box-shadow:0 3px 10px rgba(99,91,255,0.45); }

/* ═══════════ EDGE ARROWS — Left side hint ═══════════ */
.edge-arrows {
    position:absolute; left:-14px; top:50%; transform:translateY(-50%); z-index:36;
}
.edge-arrows.hidden { display:none; }
.edge-arrow-indicator {
    display:flex; flex-direction:column; gap:1px;
    padding:6px 3px; border-radius:8px 0 0 8px;
    background:rgba(15,122,181,0.85);
    color:#fff; cursor:pointer;
    box-shadow:-2px 2px 8px rgba(0,0,0,0.3);
    animation:edgePulse 2s ease-in-out infinite;
    transition:all var(--transition);
}
.edge-arrow-indicator:hover { background:var(--primary); padding:8px 5px; }
@keyframes edgePulse { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-3px)} }

/* ═══════════ Widget Input ═══════════ */
.widget-input-area { display:flex; align-items:center; gap:6px; padding:8px 10px; border-top:1px solid rgba(148,163,184,0.08); flex-shrink:0; }
.widget-input {
    flex:1; height:34px; padding:0 12px; border:1px solid rgba(148,163,184,0.15); border-radius:18px;
    background:rgba(255,255,255,0.06); color:#e2e8f0; font-family:inherit; font-size:0.82rem; outline:none;
    transition:border-color var(--transition);
}
.widget-input::placeholder { color:#64748b; }
.widget-input:focus { border-color:var(--primary); box-shadow:0 0 0 2px rgba(15,122,181,0.12); }
.widget-send-btn { width:30px; height:30px; border-radius:50%; background:var(--primary); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all var(--transition); flex-shrink:0; }
.widget-send-btn:hover { background:var(--primary-dark); transform:scale(1.05); }

/* Widget Footer */
.widget-footer { text-align:center; padding:4px 10px 6px; font-size:0.58rem; color:#64748b; flex-shrink:0; }
.powered-brand { color:var(--primary-light); font-weight:600; font-style:italic; }

/* ═══════════ CHAT BUBBLE (When minimized) ═══════════ */
.chat-bubble-btn {
    position:absolute; bottom:18px; right:18px; z-index:35;
    width:56px; height:56px; border-radius:50%;
    background:var(--primary); border:none; color:#fff;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 24px rgba(15,122,181,0.4);
    transition:all var(--transition);
    animation:bubbleAppear 0.4s cubic-bezier(0.16,1,0.3,1);
}
.chat-bubble-btn.hidden { display:none; }
.chat-bubble-btn:hover { transform:scale(1.08); box-shadow:0 8px 32px rgba(15,122,181,0.5); }
.kosyai-icon-bubble { width:28px; height:28px; border-radius:7px; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.9rem; border:1.5px solid rgba(255,255,255,0.3); }
.bubble-notification { position:absolute; top:-2px; right:-2px; width:18px; height:18px; border-radius:50%; background:#ef4444; font-size:0.6rem; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
@keyframes bubbleAppear { 0%{opacity:0;transform:scale(0.5)} 100%{opacity:1;transform:scale(1)} }

/* ═══════════ OVERLAY ═══════════ */
.overlay-backdrop { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.4); backdrop-filter:blur(4px); transition:opacity 0.3s ease; }
.overlay-backdrop.hidden { opacity:0; pointer-events:none; }
.summary-overlay { background:#fff; border-radius:var(--radius-lg); padding:22px 20px 16px; width:280px; max-width:90vw; box-shadow:0 12px 40px rgba(0,0,0,0.5); animation:overlayIn 0.4s cubic-bezier(0.16,1,0.3,1); }
@keyframes overlayIn { 0%{opacity:0;transform:scale(0.92) translateY(6px)} 100%{opacity:1;transform:scale(1)} }
.overlay-title { font-size:1.05rem; font-weight:700; color:#1e293b; margin-bottom:5px; }
.overlay-desc { font-size:0.78rem; color:#64748b; line-height:1.5; margin-bottom:12px; font-style:italic; }
.overlay-input { width:100%; height:36px; padding:0 10px; border:2px solid #e2e8f0; border-radius:var(--radius-sm); font-family:inherit; font-size:0.8rem; color:#1e293b; outline:none; margin-bottom:8px; transition:border-color var(--transition); }
.overlay-input::placeholder { color:#94a3b8; }
.overlay-input:focus { border-color:var(--primary); }
.overlay-send-btn { width:100%; height:38px; background:var(--primary); color:#fff; border:none; border-radius:var(--radius-sm); font-family:inherit; font-weight:700; font-size:0.82rem; letter-spacing:0.04em; cursor:pointer; transition:all var(--transition); margin-bottom:6px; }
.overlay-send-btn:hover { background:var(--primary-dark); }
.overlay-close-link { display:block; width:100%; text-align:center; background:none; border:none; color:#64748b; font-family:inherit; font-size:0.78rem; cursor:pointer; }

/* Toast (generic) */
.toast { position:fixed; bottom:90px; right:20px; z-index:200; padding:10px 16px; background:var(--accent-green); color:#fff; border-radius:var(--radius-md); font-weight:600; font-size:0.78rem; box-shadow:0 8px 24px rgba(16,185,129,0.35); animation:toIn 0.4s ease,toOut 0.4s 2.6s ease forwards; }
@keyframes toIn { 0%{opacity:0;transform:translateY(16px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes toOut { 0%{opacity:1} 100%{opacity:0;pointer-events:none} }

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:960px) {
    .site-nav,.hero-visual { display:none; }
    .product-grid { grid-template-columns:repeat(2,1fr); }
    .site-features { grid-template-columns:repeat(2,1fr); }
    .testimonials-strip { flex-direction:column; }
    .footer-cols { grid-template-columns:1fr 1fr; }
}
@media(max-width:640px) {
    .chatbot-widget { width:calc(100% - 36px); right:18px; }
}