/* Fargene sto igjen på #2547ff fra forrige designgenerasjon. Resten av nettstedet er limegrønt på sort — widgeten var det eneste blå elementet på siden. */ /* ─── BLINK-SIKRING ─── Widgeten lastet tidligere stilarket sitt selv, fra JavaScript. Vinduet ble da satt inn i DOM-en før CSS-en var framme, og viste seg ustylet i noen millisekunder ved hver lasting. Stilarket lenkes nå fra på hver side i stedet. */ /* ── Chatbot Widget ─────────────────────────────────────────── */ #cw-bubble { position: fixed; bottom: 24px; right: 24px; z-index: 9000; width: 56px; height: 56px; border-radius: 50%; background: var(--lime, #d4ff3d); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 24px rgba(212, 255, 61, 0.45); transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; } #cw-bubble:hover { transform: scale(1.1); box-shadow: 0 6px 32px rgba(212, 255, 61, 0.6); } #cw-bubble svg { width: 26px; height: 26px; fill: #0a0a0a; transition: transform 0.25s ease, opacity 0.2s ease; } #cw-bubble .cw-icon-close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(0.7); } #cw-bubble.open .cw-icon-chat { opacity: 0; transform: rotate(90deg) scale(0.7); } #cw-bubble.open .cw-icon-close { opacity: 1; transform: rotate(0deg) scale(1); } /* Unread dot */ #cw-badge { position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; background: #22c55e; border-radius: 50%; border: 2px solid #000; transition: opacity 0.2s ease; } #cw-badge.hidden { opacity: 0; pointer-events: none; } /* ── Chat window ──────────────────────────────────────────── */ #cw-window { position: fixed; bottom: 92px; right: 24px; z-index: 8999; width: 340px; max-height: 520px; background: #0d0d0d; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; display: flex; flex-direction: column; overflow: hidden; font-family: 'Geist', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(212, 255, 61, 0.12); /* hidden state */ opacity: 0; transform: translateY(16px) scale(0.97); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: bottom right; } #cw-window.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; } /* Header */ #cw-header { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); flex-shrink: 0; } .cw-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--lime, #d4ff3d); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .cw-avatar svg { width: 18px; height: 18px; fill: #fff; } .cw-header-info { display: flex; flex-direction: column; gap: 1px; } .cw-header-name { font-size: 13px; font-weight: 600; color: #fff; letter-spacing: -0.02em; } .cw-header-status { font-size: 11px; color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; gap: 5px; } .cw-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; flex-shrink: 0; } /* Messages */ #cw-messages { flex: 1; overflow-y: auto; padding: 16px 14px 8px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; } #cw-messages::-webkit-scrollbar { width: 4px; } #cw-messages::-webkit-scrollbar-track { background: transparent; } #cw-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; } .cw-msg { display: flex; flex-direction: column; gap: 4px; animation: cwMsgIn 0.22s ease forwards; } @keyframes cwMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .cw-bubble-msg { max-width: 88%; padding: 10px 13px; border-radius: 14px 14px 14px 4px; background: rgba(255, 255, 255, 0.07); font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); } .cw-bubble-msg a { color: #6b8eff; text-decoration: underline; text-underline-offset: 2px; } .cw-bubble-msg a:hover { color: #fff; } /* Buttons area */ #cw-buttons { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; } .cw-btn { width: 100%; padding: 9px 14px; border-radius: 10px; border: 1px solid rgba(212, 255, 61, 0.35); background: rgba(212, 255, 61, 0.08); color: #fff; font-family: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; letter-spacing: -0.01em; } .cw-btn:hover { background: rgba(212, 255, 61, 0.2); border-color: rgba(212, 255, 61, 0.65); transform: translateX(2px); } .cw-btn:active { transform: translateX(2px) scale(0.98); } .cw-btn.secondary { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.65); } .cw-btn.secondary:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: #fff; } /* ── Mobile ───────────────────────────────────────────────── */ @media (max-width: 480px) { #cw-window { right: 12px; bottom: 88px; width: calc(100vw - 24px); max-height: 72dvh; } #cw-bubble { right: 16px; bottom: 16px; } }