/* ========================================================================== IITWares Chat Assistant — styles Add to of index.html: ========================================================================== */ :root{ --ink:#101826; --ink-soft:#4B5568; --base:#FFFFFF; --surface:#F3F6FB; --surface-2:#E9EEF8; --line:#DCE3F0; --primary:#1A1813; --primary-dark:#0E0D0A; --primary-tint:#EFEDE8; --accent:#C79A4B; --accent-tint:#FBF2E2; --whatsapp:#25D366; --whatsapp-dark:#1DA851; --radius-lg:22px; --radius-md:14px; --radius-sm:10px; --shadow-lg:0 24px 60px -12px rgba(16,24,38,0.28); --shadow-sm:0 6px 18px -6px rgba(16,24,38,0.18); --font-display:'Archivo', system-ui, sans-serif; --font-body:'Inter', system-ui, sans-serif; } *{box-sizing:border-box;} /* ================= Launcher ================= */ .iw-launcher{ position:fixed; right:24px; bottom:24px; z-index:9998; width:64px; height:64px; border-radius:50%; border:none; cursor:pointer; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); box-shadow:var(--shadow-lg); display:flex; align-items:center; justify-content:center; transition:transform .25s cubic-bezier(.34,1.56,.64,1); } .iw-launcher:hover{transform:scale(1.06);} .iw-launcher:active{transform:scale(.96);} .iw-launcher .ring{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--primary); animation:ping 2.6s cubic-bezier(0,0,0.2,1) infinite; } .iw-launcher .ring.r2{animation-delay:.9s;} @keyframes ping{ 0%{transform:scale(1); opacity:.55;} 100%{transform:scale(1.9); opacity:0;} } .iw-launcher svg{position:relative; z-index:1;} .iw-launcher .close-ic{display:none;} .iw-launcher.open .chat-ic{display:none;} .iw-launcher.open .close-ic{display:block;} .iw-badge{ position:absolute; top:-2px; right:-2px; width:16px; height:16px; border-radius:50%; background:var(--accent); border:3px solid var(--surface); } .iw-launcher.open .iw-badge{display:none;} /* ================= Panel ================= */ .iw-panel{ position:fixed; right:24px; bottom:104px; z-index:9999; width:392px; max-width:calc(100vw - 32px); height:min(640px, calc(100vh - 140px)); background:var(--base); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden; transform:translateY(16px) scale(.97); opacity:0; pointer-events:none; transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease; } .iw-panel.open{transform:translateY(0) scale(1); opacity:1; pointer-events:auto;} /* ---- header ---- */ .iw-header{ background:linear-gradient(120deg, var(--primary) 0%, var(--primary-dark) 100%); padding:18px 18px 20px; color:#fff; position:relative; flex-shrink:0; overflow:hidden; } .iw-header::after{ content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; background:radial-gradient(circle, rgba(214,162,76,.45) 0%, transparent 70%); } .iw-header-top{display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1;} .iw-brand{display:flex; align-items:center; gap:10px;} .iw-logo-mark{ width:38px; height:38px; border-radius:10px; flex-shrink:0; background:#fff; display:flex; align-items:center; justify-content:center; padding:5px; } .iw-logo-mark img, .iw-logo-mark svg{width:100%; height:100%; object-fit:contain; display:block;} .iw-wordmark{font-family:var(--font-display); font-weight:700; font-size:18px; letter-spacing:-0.02em; line-height:1;} .iw-tagline{font-size:11.5px; color:rgba(255,255,255,.78); margin-top:3px; letter-spacing:.02em;} .iw-status{display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,.85); margin-top:12px; position:relative; z-index:1;} .iw-status .dot{width:7px; height:7px; border-radius:50%; background:#5CF29A; box-shadow:0 0 0 3px rgba(92,242,154,.28);} .iw-close{ background:rgba(255,255,255,.16); border:none; width:30px; height:30px; border-radius:50%; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s ease; } .iw-close:hover{background:rgba(255,255,255,.28);} /* ---- thread ---- */ .iw-thread{ flex:1; overflow-y:auto; padding:18px 16px 12px; display:flex; flex-direction:column; gap:12px; background: linear-gradient(180deg, var(--surface) 0%, var(--base) 140px); } .iw-thread::-webkit-scrollbar{width:6px;} .iw-thread::-webkit-scrollbar-thumb{background:var(--line); border-radius:3px;} .msg{max-width:86%; animation:rise .28s ease both;} @keyframes rise{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}} .msg.bot{align-self:flex-start;} .msg.user{align-self:flex-end;} .bot-row{display:flex; gap:8px; align-items:flex-end;} .bot-avatar{ width:26px; height:26px; border-radius:8px; flex-shrink:0; margin-bottom:2px; background:#fff; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:3px; } .bot-avatar img, .bot-avatar svg{width:100%; height:100%; object-fit:contain; display:block;} .bubble{ padding:11px 14px; border-radius:var(--radius-md); font-size:14px; line-height:1.55; } .msg.bot .bubble{background:var(--surface-2); color:var(--ink); border-bottom-left-radius:4px;} .msg.user .bubble{background:var(--primary); color:#fff; border-bottom-right-radius:4px; font-weight:500;} .typing{display:flex; gap:4px; padding:4px 2px;} .typing span{width:6px; height:6px; border-radius:50%; background:#A9B7CC; animation:bounce 1.2s infinite;} .typing span:nth-child(2){animation-delay:.15s;} .typing span:nth-child(3){animation-delay:.3s;} @keyframes bounce{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}} .choice-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px;} .choice-btn{ font-family:var(--font-body); font-weight:600; font-size:13px; background:var(--base); color:var(--primary-dark); border:1.5px solid var(--primary-tint); padding:9px 14px; border-radius:999px; cursor:pointer; transition:all .15s ease; text-align:left; } .choice-btn:hover{background:var(--primary-tint); border-color:var(--primary);} .choice-btn.wide{width:100%;} .choice-btn .em{margin-right:6px;} a.choice-btn{display:inline-flex; align-items:center; text-decoration:none;} a.choice-btn.wide{display:flex;} .back-link{ display:inline-flex; align-items:center; gap:5px; margin-top:2px; font-size:12.5px; font-weight:600; color:var(--ink-soft); background:none; border:none; cursor:pointer; padding:6px 2px; } .back-link:hover{color:var(--primary-dark);} /* ---- lead form ---- */ .lead-form{ background:var(--base); border:1px solid var(--line); border-radius:var(--radius-md); padding:14px; margin-top:2px; display:flex; flex-direction:column; gap:9px; width:100%; } .lead-form label{font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-bottom:-4px;} .lead-form input, .lead-form textarea{ font-family:var(--font-body); font-size:13.5px; padding:9px 11px; border:1.5px solid var(--line); border-radius:var(--radius-sm); outline:none; resize:none; transition:border-color .15s ease; } .lead-form input:focus, .lead-form textarea:focus{border-color:var(--primary);} .lead-form button{ font-family:var(--font-body); font-weight:700; font-size:13.5px; color:#fff; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); border:none; border-radius:var(--radius-sm); padding:10px; cursor:pointer; margin-top:2px; } .lead-form button:hover{filter:brightness(1.06);} /* ---- footer ---- */ .iw-footer{ flex-shrink:0; padding:12px 14px 14px; background:var(--base); border-top:1px solid var(--line); display:flex; gap:9px; } .cta-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; font-family:var(--font-body); font-weight:700; font-size:13.5px; text-decoration:none; padding:11px 10px; border-radius:999px; cursor:pointer; border:1.5px solid transparent; transition:transform .12s ease, filter .12s ease; } .cta-btn:active{transform:scale(.97);} .cta-btn.whatsapp{background:var(--whatsapp); color:#fff;} .cta-btn.whatsapp:hover{background:var(--whatsapp-dark);} .cta-btn.contact{background:var(--base); color:var(--primary-dark); border-color:var(--primary-tint);} .cta-btn.contact:hover{background:var(--primary-tint);} @media (max-width:480px){ .iw-panel{ right:12px; left:12px; bottom:92px; width:auto; height:min(72vh, 620px); } .iw-launcher{right:16px; bottom:16px;} }