/* ========================================================================== Taqod Chat Assistant — styles Add to : Every rule below is scoped under .taqod-widget or a .taqod-/.tq- prefixed class — nothing here touches :root, body, button, img, or any other global selector, so it's safe to drop into an existing site's stylesheet without overwriting that site's own design tokens. Where possible the widget re-uses the host site's own brand variables (--green, --beige, --font-latin, --radius-lg, --ink, --white, --paper...) with a hard-coded fallback after the comma, so it matches automatically if those variables exist, and still looks right (using the fallback) if they don't — e.g. dropped onto a different project. ========================================================================== */ .taqod-widget{ --tq-ink: var(--ink, #16121F); --tq-ink-soft: var(--ink-2, #4A465A); --tq-base: var(--white, #FFFFFF); --tq-surface: var(--paper, #F6F4FB); --tq-surface-2: #EDE9F7; --tq-line: var(--line-dark, #E3DEF2); --tq-primary: var(--green, #11735A); --tq-primary-dark: var(--green-deep, #0B4C3C); --tq-primary-tint: #E7F1ED; --tq-accent: var(--beige, #BC9878); --tq-accent-tint: #F5EEE6; --tq-whatsapp: #25D366; --tq-whatsapp-dark: #1DA851; --tq-radius-lg: var(--radius-lg, 22px); --tq-radius-md: 14px; --tq-radius-sm: 10px; --tq-shadow-lg: 0 24px 60px -12px rgba(22,18,31,0.28); --tq-shadow-sm: 0 6px 18px -6px rgba(22,18,31,0.18); --tq-font: var(--font-latin, 'Inter', system-ui, sans-serif); } /* ================= Launcher ================= */ .taqod-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(--tq-primary) 0%, var(--tq-primary-dark) 100%); box-shadow:var(--tq-shadow-lg); display:flex; align-items:center; justify-content:center; transition:transform .25s cubic-bezier(.34,1.56,.64,1); box-sizing:border-box; } .taqod-launcher:hover{transform:scale(1.06);} .taqod-launcher:active{transform:scale(.96);} .taqod-launcher .ring{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--tq-primary); animation:tq-ping 2.6s cubic-bezier(0,0,0.2,1) infinite; z-index:0; } .taqod-launcher .ring.r2{animation-delay:.9s;} @keyframes tq-ping{ 0%{transform:scale(1); opacity:.55;} 100%{transform:scale(1.9); opacity:0;} } .taqod-launcher svg, .taqod-launcher img{position:relative; z-index:2; display:block;} .taqod-launcher .close-ic{display:none;} .taqod-launcher.open .chat-ic{display:none;} .taqod-launcher.open .close-ic{display:block;} .taqod-badge{ position:absolute; top:-2px; right:-2px; width:16px; height:16px; border-radius:50%; background:var(--tq-accent); border:3px solid var(--tq-surface); z-index:3; } .taqod-launcher.open .taqod-badge{display:none;} /* ================= Panel ================= */ .taqod-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(--tq-base); border-radius:var(--tq-radius-lg); box-shadow:var(--tq-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; font-family:var(--tq-font); box-sizing:border-box; text-align:left; direction:ltr; } .taqod-panel *{box-sizing:border-box;} .taqod-panel.open{transform:translateY(0) scale(1); opacity:1; pointer-events:auto;} /* ---- header ---- */ .taqod-header{ background:linear-gradient(120deg, var(--tq-primary) 0%, var(--tq-primary-dark) 100%); padding:18px 18px 20px; color:#fff; position:relative; flex-shrink:0; overflow:hidden; } .taqod-header::after{ content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; background:radial-gradient(circle, rgba(188,152,120,.45) 0%, transparent 70%); } .taqod-header-top{display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1;} .taqod-brand{display:flex; align-items:center; gap:10px;} .taqod-logo-mark{ width:38px; height:38px; border-radius:10px; flex-shrink:0; background:#fff; display:flex; align-items:center; justify-content:center; padding:5px; } .taqod-logo-mark img{width:100%; height:100%; object-fit:contain; display:block;} .taqod-wordmark{font-family:var(--tq-font); font-weight:700; font-size:18px; letter-spacing:-0.02em; line-height:1;} .taqod-tagline{font-size:11.5px; color:rgba(255,255,255,.78); margin-top:3px; letter-spacing:.02em;} .taqod-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;} .taqod-status .dot{width:7px; height:7px; border-radius:50%; background:#5CF29A; box-shadow:0 0 0 3px rgba(92,242,154,.28); flex-shrink:0;} .taqod-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; flex-shrink:0; } .taqod-close:hover{background:rgba(255,255,255,.28);} /* ---- thread ---- */ .taqod-thread{ flex:1; overflow-y:auto; padding:18px 16px 12px; display:flex; flex-direction:column; gap:12px; background:linear-gradient(180deg, var(--tq-surface) 0%, var(--tq-base) 140px); } .taqod-thread::-webkit-scrollbar{width:6px;} .taqod-thread::-webkit-scrollbar-thumb{background:var(--tq-line); border-radius:3px;} .taqod-panel .msg{max-width:86%; animation:tq-rise .28s ease both;} @keyframes tq-rise{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}} .taqod-panel .msg.bot{align-self:flex-start;} .taqod-panel .msg.user{align-self:flex-end;} .taqod-panel .bot-row{display:flex; gap:8px; align-items:flex-end;} .taqod-panel .bot-avatar{ width:26px; height:26px; border-radius:8px; flex-shrink:0; margin-bottom:2px; background:#fff; border:1px solid var(--tq-line); display:flex; align-items:center; justify-content:center; padding:3px; } .taqod-panel .bot-avatar img{width:100%; height:100%; object-fit:contain; display:block;} .taqod-panel .bubble{ padding:11px 14px; border-radius:var(--tq-radius-md); font-size:14px; line-height:1.55; } .taqod-panel .msg.bot .bubble{background:var(--tq-surface-2); color:var(--tq-ink); border-bottom-left-radius:4px;} .taqod-panel .msg.user .bubble{background:var(--tq-primary); color:#fff; border-bottom-right-radius:4px; font-weight:500;} .taqod-panel .typing{display:flex; gap:4px; padding:4px 2px;} .taqod-panel .typing span{width:6px; height:6px; border-radius:50%; background:#B7ADD9; animation:tq-bounce 1.2s infinite;} .taqod-panel .typing span:nth-child(2){animation-delay:.15s;} .taqod-panel .typing span:nth-child(3){animation-delay:.3s;} @keyframes tq-bounce{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}} .taqod-panel .choice-grid{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px;} .taqod-panel .choice-btn{ font-family:var(--tq-font); font-weight:600; font-size:13px; background:var(--tq-base); color:var(--tq-primary-dark); border:1.5px solid var(--tq-primary-tint); padding:9px 14px; border-radius:999px; cursor:pointer; transition:all .15s ease; text-align:left; margin:0; } .taqod-panel .choice-btn:hover{background:var(--tq-primary-tint); border-color:var(--tq-primary);} .taqod-panel .choice-btn.wide{width:100%;} .taqod-panel .choice-btn .em{margin-right:6px;} .taqod-panel .back-link{ display:inline-flex; align-items:center; gap:5px; margin-top:2px; font-size:12.5px; font-weight:600; color:var(--tq-ink-soft); background:none; border:none; cursor:pointer; padding:6px 2px; font-family:var(--tq-font); } .taqod-panel .back-link:hover{color:var(--tq-primary-dark);} /* ---- lead form ---- */ .taqod-panel .lead-form{ background:var(--tq-base); border:1px solid var(--tq-line); border-radius:var(--tq-radius-md); padding:14px; margin-top:2px; display:flex; flex-direction:column; gap:9px; width:100%; } .taqod-panel .lead-form label{font-size:11.5px; font-weight:600; color:var(--tq-ink-soft); margin-bottom:-4px; font-family:var(--tq-font);} .taqod-panel .lead-form input, .taqod-panel .lead-form textarea{ font-family:var(--tq-font); font-size:13.5px; padding:9px 11px; border:1.5px solid var(--tq-line); border-radius:var(--tq-radius-sm); outline:none; resize:none; transition:border-color .15s ease; width:100%; color:var(--tq-ink); background:var(--tq-base); } .taqod-panel .lead-form input:focus, .taqod-panel .lead-form textarea:focus{border-color:var(--tq-primary);} .taqod-panel .lead-form button{ font-family:var(--tq-font); font-weight:700; font-size:13.5px; color:#fff; background:linear-gradient(135deg, var(--tq-primary) 0%, var(--tq-primary-dark) 100%); border:none; border-radius:var(--tq-radius-sm); padding:10px; cursor:pointer; margin-top:2px; } .taqod-panel .lead-form button:hover{filter:brightness(1.06);} /* ---- footer ---- */ .taqod-footer{ flex-shrink:0; padding:12px 14px 14px; background:var(--tq-base); border-top:1px solid var(--tq-line); display:flex; gap:9px; } .taqod-widget .cta-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; font-family:var(--tq-font); 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; margin:0; } .taqod-widget .cta-btn:active{transform:scale(.97);} .taqod-widget .cta-btn.whatsapp{background:var(--tq-whatsapp); color:#fff;} .taqod-widget .cta-btn.whatsapp:hover{background:var(--tq-whatsapp-dark);} .taqod-widget .cta-btn.contact{background:var(--tq-base); color:var(--tq-primary-dark); border-color:var(--tq-primary-tint);} .taqod-widget .cta-btn.contact:hover{background:var(--tq-primary-tint);} @media (max-width:480px){ .taqod-panel{ right:12px; left:12px; bottom:92px; width:auto; height:min(72vh, 620px); } .taqod-launcher{right:16px; bottom:16px;} }