/* ============================================================= chatbot.css — St Albans Gardeners' Forum AI Assistant ============================================================= Drop this file in the same folder as index.htm. Add one line to index.htm : ============================================================= */ /* Floating bubble button */ .chat-bubble { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9000; width: 56px; height: 56px; border-radius: 50%; background: #2e5e3e; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(0,0,0,0.25); transition: transform 0.2s ease, background 0.2s ease; padding: 0; } .chat-bubble:hover { background: #3d7a52; transform: scale(1.08); } .chat-bubble svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Unread notification dot */ .chat-bubble__dot { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; background: #c8a012; border-radius: 50%; border: 2px solid #fff; display: none; } .chat-bubble__dot.visible { display: block; } /* Chat window */ .chat-window { position: fixed; bottom: 5rem; right: 1.5rem; z-index: 9000; width: min(380px, calc(100vw - 2rem)); height: min(520px, calc(100vh - 7rem)); background: #f9f6f0; border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,0.2); display: flex; flex-direction: column; overflow: hidden; /* Hidden state */ opacity: 0; transform: translateY(16px) scale(0.97); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .chat-window.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; } /* Header bar */ .chat-header { background: #2e5e3e; padding: 0.9rem 1rem; display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; } .chat-header__avatar { width: 34px; height: 34px; background: rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .chat-header__avatar svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .chat-header__info { flex: 1; } .chat-header__name { font-size: 0.95rem; font-weight: 600; color: #fff; line-height: 1.2; } .chat-header__status { font-size: 0.7rem; color: rgba(255,255,255,0.65); } .chat-header__close { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.65); font-size: 1.1rem; line-height: 1; padding: 4px; transition: color 0.2s; } .chat-header__close:hover { color: #fff; } /* Messages scrollable area */ .chat-messages { flex: 1; overflow-y: auto; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.65rem; scroll-behavior: smooth; } .chat-messages::-webkit-scrollbar { width: 4px; } .chat-messages::-webkit-scrollbar-track { background: transparent; } .chat-messages::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 2px; } /* Message rows */ .chat-msg { display: flex; gap: 0.4rem; align-items: flex-end; animation: chatMsgIn 0.18s ease; } @keyframes chatMsgIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .chat-msg--user { flex-direction: row-reverse; } .chat-msg__bubble { max-width: 83%; padding: 0.6rem 0.85rem; border-radius: 14px; font-size: 0.875rem; line-height: 1.55; } .chat-msg--bot .chat-msg__bubble { background: #fff; color: #222; border-bottom-left-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .chat-msg--user .chat-msg__bubble { background: #2e5e3e; color: #fff; border-bottom-right-radius: 3px; } .chat-msg--error .chat-msg__bubble { background: rgba(180,40,40,0.07); color: #8b1a1a; border: 1px solid rgba(180,40,40,0.18); font-size: 0.82rem; } /* Typing indicator */ .chat-typing { display: flex; align-items: center; gap: 4px; padding: 0.6rem 0.85rem; background: #fff; border-radius: 14px; border-bottom-left-radius: 3px; width: fit-content; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .chat-typing span { width: 6px; height: 6px; background: #7aaa8c; border-radius: 50%; animation: chatTypingDot 1.2s infinite; } .chat-typing span:nth-child(2) { animation-delay: 0.2s; } .chat-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes chatTypingDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } } /* Session limit warning bar */ .chat-limit-bar { padding: 0.35rem 1rem; background: rgba(200,160,18,0.1); border-top: 1px solid rgba(200,160,18,0.2); font-size: 0.71rem; color: #8a6800; text-align: center; flex-shrink: 0; display: none; } .chat-limit-bar.visible { display: block; } /* Input area */ .chat-input-wrap { padding: 0.65rem; border-top: 1px solid rgba(0,0,0,0.08); display: flex; gap: 0.5rem; align-items: flex-end; flex-shrink: 0; background: #f9f6f0; } .chat-input { flex: 1; padding: 0.55rem 0.8rem; font-family: inherit; font-size: 0.875rem; color: #222; background: #fff; border: 1.5px solid rgba(0,0,0,0.14); border-radius: 18px; outline: none; resize: none; line-height: 1.4; transition: border-color 0.2s; } .chat-input:focus { border-color: #2e5e3e; } .chat-input:disabled { opacity: 0.5; cursor: not-allowed; } .chat-send { width: 36px; height: 36px; border-radius: 50%; background: #2e5e3e; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.2s, transform 0.15s; } .chat-send:hover:not(:disabled) { background: #3d7a52; transform: scale(1.06); } .chat-send:disabled { opacity: 0.35; cursor: not-allowed; } .chat-send svg { width: 15px; height: 15px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }