diff --git a/index.html b/index.html index a5071e4..cf8da71 100644 --- a/index.html +++ b/index.html @@ -969,158 +969,158 @@ text-align: center; } } - + } - /* ── Chat Widget ─────────────────────────────────────────── */ - .chat-widget { - position: fixed; - bottom: 24px; - right: 24px; - z-index: 9999; - font-size: 14px; - line-height: 1.5; - } - .chat-toggle { - display: flex; - align-items: center; - gap: 8px; - padding: 12px 20px; - background: var(--accent); - color: #fff; - border: none; - border-radius: 60px; - font-size: 14px; - font-weight: 600; - cursor: pointer; - box-shadow: 0 4px 20px rgba(79, 142, 247, 0.35); - transition: opacity 0.25s, transform 0.25s; - } - .chat-toggle:hover { - opacity: 0.9; - transform: scale(1.04); - } - .chat-toggle svg { flex-shrink: 0; } - .chat-panel { - display: none; - flex-direction: column; - position: fixed; - bottom: 80px; - right: 24px; - width: 360px; - max-height: 520px; - background: var(--bg-card); - border: 1px solid var(--border); - border-radius: var(--radius-card); - box-shadow: var(--shadow); - overflow: hidden; - animation: chatSlideUp 0.28s ease; - } - .chat-panel.open { display: flex; } - @keyframes chatSlideUp { - from { opacity: 0; transform: translateY(16px); } - to { opacity: 1; transform: translateY(0); } - } - .chat-header { - display: flex; - align-items: center; - justify-content: space-between; - padding: 16px 20px; - background: var(--accent-dim); - border-bottom: 1px solid var(--border); - font-weight: 600; - color: var(--text); - } - .chat-header button { - background: none; - border: none; - color: var(--text-muted); - cursor: pointer; - font-size: 16px; - padding: 0 4px; - line-height: 1; - } - .chat-header button:hover { color: var(--text); } - .chat-msgs { - flex: 1; - overflow-y: auto; - padding: 16px 20px; - display: flex; - flex-direction: column; - gap: 10px; - min-height: 200px; - max-height: 340px; - } - .chat-msg { - max-width: 85%; - padding: 10px 14px; - border-radius: 14px; - line-height: 1.45; - word-wrap: break-word; - font-size: 13px; - } - .chat-msg-bot { - align-self: flex-start; - background: var(--bg-inner); - border-bottom-left-radius: 4px; - } - .chat-msg-user { - align-self: flex-end; - background: var(--accent-dim); - border-bottom-right-radius: 4px; - } - .chat-msg-thinking { - align-self: flex-start; - background: var(--bg-inner); - border-bottom-left-radius: 4px; - opacity: 0.6; - } - .chat-input-row { - display: flex; - gap: 8px; - padding: 12px 16px; - border-top: 1px solid var(--border); - background: var(--bg-inner); - } - .chat-input-row input { - flex: 1; - padding: 9px 14px; - border: 1px solid var(--border); - border-radius: var(--radius); - background: var(--bg-input); - color: var(--text); - font-size: 13px; - outline: none; - } - .chat-input-row input:focus { - border-color: var(--accent); - box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.15); - } - .chat-input-row button { - padding: 9px 18px; - background: var(--accent); - color: #fff; - border: none; - border-radius: var(--radius); - font-weight: 600; - font-size: 13px; - cursor: pointer; - transition: opacity 0.2s; - white-space: nowrap; - } - .chat-input-row button:hover { opacity: 0.9; } - .chat-input-row button:disabled { opacity: 0.5; cursor: default; } - - @media (max-width: 480px) { - .chat-panel { - right: 10px; - left: 10px; - width: auto; - bottom: 72px; - max-height: 60vh; - } - .chat-widget { bottom: 14px; right: 14px; } - .chat-toggle { padding: 10px 16px; font-size: 13px; } - } + /* ── Chat Widget ─────────────────────────────────────────── */ + .chat-widget { + position: fixed; + bottom: 24px; + right: 24px; + z-index: 9999; + font-size: 14px; + line-height: 1.5; + } + .chat-toggle { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 20px; + background: var(--accent); + color: #fff; + border: none; + border-radius: 60px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + box-shadow: 0 4px 20px rgba(79, 142, 247, 0.35); + transition: opacity 0.25s, transform 0.25s; + } + .chat-toggle:hover { + opacity: 0.9; + transform: scale(1.04); + } + .chat-toggle svg { flex-shrink: 0; } + .chat-panel { + display: none; + flex-direction: column; + position: fixed; + bottom: 80px; + right: 24px; + width: 360px; + max-height: 520px; + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-card); + box-shadow: var(--shadow); + overflow: hidden; + animation: chatSlideUp 0.28s ease; + } + .chat-panel.open { display: flex; } + @keyframes chatSlideUp { + from { opacity: 0; transform: translateY(16px); } + to { opacity: 1; transform: translateY(0); } + } + .chat-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 16px 20px; + background: var(--accent-dim); + border-bottom: 1px solid var(--border); + font-weight: 600; + color: var(--text); + } + .chat-header button { + background: none; + border: none; + color: var(--text-muted); + cursor: pointer; + font-size: 16px; + padding: 0 4px; + line-height: 1; + } + .chat-header button:hover { color: var(--text); } + .chat-msgs { + flex: 1; + overflow-y: auto; + padding: 16px 20px; + display: flex; + flex-direction: column; + gap: 10px; + min-height: 200px; + max-height: 340px; + } + .chat-msg { + max-width: 85%; + padding: 10px 14px; + border-radius: 14px; + line-height: 1.45; + word-wrap: break-word; + font-size: 13px; + } + .chat-msg-bot { + align-self: flex-start; + background: var(--bg-inner); + border-bottom-left-radius: 4px; + } + .chat-msg-user { + align-self: flex-end; + background: var(--accent-dim); + border-bottom-right-radius: 4px; + } + .chat-msg-thinking { + align-self: flex-start; + background: var(--bg-inner); + border-bottom-left-radius: 4px; + opacity: 0.6; + } + .chat-input-row { + display: flex; + gap: 8px; + padding: 12px 16px; + border-top: 1px solid var(--border); + background: var(--bg-inner); + } + .chat-input-row input { + flex: 1; + padding: 9px 14px; + border: 1px solid var(--border); + border-radius: var(--radius); + background: var(--bg-input); + color: var(--text); + font-size: 13px; + outline: none; + } + .chat-input-row input:focus { + border-color: var(--accent); + box-shadow: 0 0 0 2px rgba(79, 142, 247, 0.15); + } + .chat-input-row button { + padding: 9px 18px; + background: var(--accent); + color: #fff; + border: none; + border-radius: var(--radius); + font-weight: 600; + font-size: 13px; + cursor: pointer; + transition: opacity 0.2s; + white-space: nowrap; + } + .chat-input-row button:hover { opacity: 0.9; } + .chat-input-row button:disabled { opacity: 0.5; cursor: default; } + @media (max-width: 480px) { + .chat-panel { + right: 10px; + left: 10px; + width: auto; + bottom: 72px; + max-height: 60vh; + } + .chat-widget { bottom: 14px; right: 14px; } + .chat-toggle { padding: 10px 16px; font-size: 13px; } + } +