/* ============================================ theme-maid.css — Giao diện "Maid Ngáo" 🎀 Bảng màu trắng hồng dịu dàng, kích hoạt khi có class .theme-light (xem assets/js/theme.js + script chống-chớp-giao-diện đầu index.php). Được thiết kế chi tiết ngang tầm style.css gốc: gradient động, glow, thanh cuộn riêng, hiệu ứng lấp lánh, công tắc trượt sáng/tối... ============================================ */ /* ---------- Bảng màu trắng hồng (ghi đè biến gốc) ---------- */ :root.theme-light { --bg-deep: #fff8fb; --bg-panel: #ffeef6; --bg-card: #ffffff; --bg-input: #fff0f7; --accent: #ff6fa5; --accent-light: #d1447f; --accent-glow: rgba(255,111,165,.16); --green: #1f9457; --red: #d81f65; --text-1: #55283f; --text-2: #8a4f68; --text-3: #b4718d; --border: rgba(255,111,165,.28); --border-hi: rgba(255,111,165,.55); --bot-bg: #ffe4f0; --user-bg: linear-gradient(135deg,#ff8fb8,#ffc2dc); /* Biến riêng cho theme maid - dùng lại xuyên suốt file này */ --maid-glow-1: rgba(255,111,165,.22); --maid-glow-2: rgba(255,180,214,.28); --maid-glow-3: rgba(255,222,235,.55); --maid-shadow: rgba(255,111,165,.22); --maid-gold: #ffb84d; } /* Font chữ tròn trịa, dễ thương hơn cho giao diện ban ngày */ :root.theme-light body { font-family: 'Quicksand', 'Be Vietnam Pro', system-ui, sans-serif; } :root.theme-light .brand-name, :root.theme-light .status-name, :root.theme-light .header-name, :root.theme-light .about-hero h1, :root.theme-light .panel-header h2, :root.theme-light .stage-welcome h2, :root.theme-light .stage-login-required h2, :root.theme-light .cdr-hand-card h3, :root.theme-light .cdr-form-card h3, :root.theme-light .about-card h3, :root.theme-light .cdr-culture-card h4, :root.theme-light .cdr-step h4, :root.theme-light .cdr-context-title, :root.theme-light .game-header-name, :root.theme-light #gameHeaderName { font-family: 'Baloo 2', 'Space Grotesk', cursive, sans-serif; } :root.theme-light .brand-name { background: linear-gradient(90deg,#ff6fa5,#ff9ec7 50%,#ffb84d); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } :root.theme-light .brand-name::before { content: "🎀 "; -webkit-text-fill-color: initial; } /* Chọn văn bản màu hồng cho đồng bộ */ :root.theme-light ::selection { background: #ffc2dc; color: #6b3e57; } /* ---------- Nền tổng thể: gradient trắng-hồng dịu, "thở" nhẹ theo thời gian ---------- */ :root.theme-light html, :root.theme-light body { background: linear-gradient(165deg,#fff8fb 0%,#ffeef6 45%,#ffe0ee 100%); } /* ---------- Thanh cuộn riêng cho theme sáng ---------- */ :root.theme-light .stage::-webkit-scrollbar-thumb, :root.theme-light .chat-messages::-webkit-scrollbar-thumb, :root.theme-light .sidebar-nav::-webkit-scrollbar-thumb, :root.theme-light .panel-content::-webkit-scrollbar-thumb { background: #ffb6d5; border-radius: 4px; } :root.theme-light .stage::-webkit-scrollbar-track, :root.theme-light .chat-messages::-webkit-scrollbar-track { background: transparent; } :root.theme-light .panel-content { scrollbar-width: thin; scrollbar-color: #ffb6d5 transparent; } :root.theme-light .sidebar-nav { scrollbar-width: thin; scrollbar-color: #ffb6d5 transparent; } /* ---------- Sidebar: viền ruy băng, glow mềm ---------- */ :root.theme-light .sidebar { border-right: 2px dashed var(--border-hi); box-shadow: 6px 0 24px rgba(255,111,165,.12); background: radial-gradient(ellipse 70% 30% at 15% 0%, var(--maid-glow-3) 0%, transparent 70%), var(--bg-panel); } :root.theme-light .sidebar-brand, :root.theme-light .bot-status, :root.theme-light .sidebar-footer, :root.theme-light .pi-profile-card { border-color: var(--border); } :root.theme-light .brand-icon { filter: drop-shadow(0 0 10px rgba(255,111,165,.55)); } :root.theme-light .nav-btn { border-radius: var(--r-pill); } :root.theme-light .nav-btn.active { background: linear-gradient(135deg, var(--accent-glow), rgba(255,194,220,.55)); box-shadow: inset 0 0 0 1.5px var(--border-hi), 0 3px 10px rgba(255,111,165,.18); color: #d1447f; font-weight: 700; } :root.theme-light .nav-btn:hover { background: #fff; color: var(--text-1); transform: translateX(2px); } :root.theme-light .status-avatar img { border-color: var(--accent); box-shadow: 0 0 0 4px var(--maid-glow-1); } :root.theme-light .status-dot { border-color: var(--bg-panel); } :root.theme-light .status-dot.online { box-shadow: 0 0 8px 1px rgba(47,174,110,.6); } :root.theme-light .status-text { color: var(--green); } /* Ô chọn ngôn ngữ + nút xoá lịch sử theo tông hồng */ :root.theme-light .lang-select { background: #fff; border-color: var(--border); color: var(--text-1); } :root.theme-light .lang-select:hover { background: var(--accent-glow); } :root.theme-light .lang-select:focus { box-shadow: 0 0 0 2px var(--maid-glow-1); } :root.theme-light .clear-btn { border-color: rgba(226,73,126,.35); background: #fff; } :root.theme-light .clear-btn:hover { background: rgba(226,73,126,.10); } /* ---------- Sân khấu (stage) chat: hào quang hồng-vàng dịu, ánh sáng "thở" ---------- */ :root.theme-light .stage { background: radial-gradient(ellipse 65% 42% at 18% 0%, var(--maid-glow-1) 0%, transparent 72%), radial-gradient(ellipse 55% 38% at 85% 100%, var(--maid-glow-2) 0%, transparent 68%), radial-gradient(ellipse 40% 30% at 50% 40%, rgba(255,216,120,.10) 0%, transparent 70%); animation: maid-stage-breathe 10s ease-in-out infinite; } @keyframes maid-stage-breathe { 0%,100% { background-position: 0 0, 0 0, 0 0; filter: saturate(1); } 50% { background-position: 2% -1%, -2% 1%, 0 -2%; filter: saturate(1.08); } } /* Khối gradient tím gốc → đổi thành hồng-vàng, thêm glow */ :root.theme-light .stage-character-fallback { background: linear-gradient(135deg,#ffb3d1,#ff6fa5) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 6px var(--maid-glow-1), 0 8px 24px rgba(255,111,165,.30) !important; } :root.theme-light .stage-character-wrap { filter: drop-shadow(0 12px 22px rgba(255,111,165,.25)); } :root.theme-light .mood-emoji { background: #fff; border: 2px solid var(--border-hi); box-shadow: 0 3px 10px rgba(255,111,165,.30); } :root.theme-light .stage-welcome, :root.theme-light .stage-login-required { color: var(--text-2); } :root.theme-light .stage-welcome h2, :root.theme-light .stage-login-required h2 { color: var(--text-1); } /* ---------- Bong bóng chat: viền chấm bi, "đuôi bo tròn" giữ style gốc ---------- */ :root.theme-light .stage-bubble { background: var(--bot-bg); border: 2px dashed var(--border-hi); box-shadow: 0 10px 28px rgba(255,111,165,.18); } :root.theme-light .bot-message .msg-bubble { background: var(--bot-bg); border: 1.5px solid var(--border); box-shadow: 0 3px 10px rgba(255,111,165,.10); } :root.theme-light .user-message .msg-bubble { background: var(--user-bg); color: #6b2f4d; box-shadow: 0 3px 16px rgba(255,111,165,.35); } :root.theme-light .typing-bubble { background: var(--bot-bg); border: 1.5px solid var(--border); } :root.theme-light .typing-bubble .dot { background: var(--accent); } :root.theme-light .msg-time { color: var(--text-3); } :root.theme-light .msg-avatar { background: #fff; border-color: var(--border); } :root.theme-light .msg-avatar.user-pi-avatar { background: linear-gradient(135deg,#ff8fb8,#ffc2dc) !important; color: #6b3e57 !important; } /* Ribbon nhỏ ở góc bong bóng bot - chi tiết trang trí kiểu maid */ :root.theme-light .bot-message .msg-bubble, :root.theme-light .stage-bubble { position: relative; } /* ---------- Gợi ý nhanh (suggestion chips) ---------- */ :root.theme-light .suggestion-chip { background: #fff; border: 1.5px dashed var(--border-hi); color: var(--text-2); box-shadow: 0 2px 6px rgba(255,111,165,.08); } :root.theme-light .suggestion-chip:hover { background: var(--accent-glow); border-color: var(--accent); color: #d1447f; box-shadow: 0 4px 12px rgba(255,111,165,.22); transform: translateY(-1px); } /* ---------- Thanh công cụ AI (đính kèm ảnh / suy luận sâu) ---------- */ :root.theme-light .ai-tool-btn { background: #fff; border-color: var(--border); color: var(--text-2); } :root.theme-light .ai-tool-btn:hover { border-color: var(--accent); color: #d1447f; } :root.theme-light .ai-tool-btn.active { background: var(--accent-glow); color: #d1447f; border-color: var(--border-hi); box-shadow: inset 0 0 0 1px var(--border-hi); } :root.theme-light .ai-image-preview { background: #fff; border-color: var(--border); } :root.theme-light .ai-image-preview button { color: var(--red); } /* ---------- Ô nhập tin nhắn ---------- */ :root.theme-light .chat-input-area { background: var(--bg-panel); border-top-color: var(--border); } :root.theme-light .input-wrapper { background: #fff; border-color: var(--border); box-shadow: 0 2px 10px rgba(255,111,165,.14); } :root.theme-light .input-wrapper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--maid-glow-1); } :root.theme-light textarea#messageInput::placeholder { color: var(--text-3); } :root.theme-light .send-btn { background: linear-gradient(135deg,#ff6fa5,#ff9ec7); box-shadow: 0 2px 10px rgba(255,111,165,.40); } :root.theme-light .send-btn:hover { filter: brightness(1.06); } :root.theme-light .input-hint { color: var(--text-3); } /* ---------- Chat header ---------- */ :root.theme-light .chat-header { background: var(--bg-panel); border-bottom-color: var(--border); } :root.theme-light .icon-btn { background: #fff; border-color: var(--border); color: var(--text-2); } :root.theme-light .icon-btn:hover { border-color: var(--accent); color: #d1447f; } :root.theme-light .voice-btn.active { background: var(--accent-glow); color: #d1447f; border-color: var(--border-hi); } :root.theme-light .pulse { background: var(--green); } /* ---------- Mini game: đoán nhân vật ---------- */ :root.theme-light .game-answer-btn { background: #fff; border-color: var(--border); color: var(--text-1); } :root.theme-light .game-answer-btn:hover { box-shadow: 0 8px 18px rgba(255,111,165,.20); } :root.theme-light .game-confirm-btn.confirm-no { background: #fff; color: var(--text-2); } /* ---------- Panel header: viền dưới gradient hồng-vàng thay cho line đơn ---------- */ :root.theme-light .panel-header { border-bottom: none; position: relative; } :root.theme-light .panel-header::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--accent) 0%, #ffd9ea 60%, transparent 100%); border-radius: 2px; } :root.theme-light .panel-header p { color: var(--text-2); } /* ---------- Thẻ "Giới thiệu" (about) ---------- */ :root.theme-light .about-avatar { filter: drop-shadow(0 0 18px rgba(255,111,165,.45)); } :root.theme-light .about-card { background: #fff; border-color: var(--border); box-shadow: 0 4px 14px rgba(255,111,165,.10); transition: all .25s ease; } :root.theme-light .about-card:hover { border-color: var(--border-hi); transform: translateY(-3px); box-shadow: 0 10px 24px rgba(255,111,165,.20); } :root.theme-light .about-tech { background: #fff; border-color: var(--border); } :root.theme-light .tech-tag { background: var(--accent-glow); border-color: rgba(255,111,165,.35); color: #d1447f; } /* ---------- Teach / form chung ---------- */ :root.theme-light .teach-card, :root.theme-light .teach-gate-card { background: #fff; border-color: var(--border); } :root.theme-light .form-group input, :root.theme-light .form-group textarea { background: var(--bg-input); border-color: var(--border); color: var(--text-1); } :root.theme-light .form-group input:focus, :root.theme-light .form-group textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--maid-glow-1); } :root.theme-light .teach-btn { background: linear-gradient(135deg,#ff6fa5,#ff9ec7); box-shadow: 0 2px 12px rgba(255,111,165,.32); } :root.theme-light .teach-btn:hover { filter: brightness(1.06); } :root.theme-light .teach-result.success { background: rgba(47,174,110,.10); border-color: rgba(47,174,110,.3); color: var(--green); } :root.theme-light .teach-result.error { background: rgba(226,73,126,.10); border-color: rgba(226,73,126,.3); color: var(--red); } :root.theme-light .teach-tips li { background: #fff; border-left-color: var(--accent); color: var(--text-2); } :root.theme-light .teach-quota-note { color: #d1447f; background: var(--accent-glow); border-color: rgba(255,111,165,.3); } /* ---------- Toast ---------- */ :root.theme-light .toast { background: #fff; border-color: var(--border); color: var(--text-1); box-shadow: 0 6px 24px rgba(255,111,165,.30); } /* ---------- Pi Network: đăng nhập / hồ sơ / XP ---------- */ :root.theme-light .pi-login-btn { background: linear-gradient(135deg,#ff6fa5,#ff9ec7) !important; box-shadow: 0 2px 14px rgba(255,111,165,.38) !important; position: relative; overflow: hidden; } /* Ánh sáng lướt qua nút login, lặp nhẹ nhàng - chi tiết nhỏ tạo cảm giác "sống" */ :root.theme-light .pi-login-btn::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent); animation: maid-btn-shine 3.2s ease-in-out infinite; } @keyframes maid-btn-shine { 0% { left: -60%; } 45% { left: 130%; } 100% { left: 130%; } } :root.theme-light .pi-logo { background: rgba(255,255,255,.35); } :root.theme-light .pi-avatar { background: linear-gradient(135deg,#ff6fa5,#ff9ec7) !important; } :root.theme-light .pi-title { color: #d1447f; } :root.theme-light .pi-logout-btn { border-color: var(--border); color: var(--text-2); } :root.theme-light .pi-logout-btn:hover { border-color: var(--red); color: var(--red); } :root.theme-light .xp-bar { background: var(--bg-input); } :root.theme-light .xp-fill { background: linear-gradient(90deg,#ff6fa5,#ffb84d) !important; background-size: 200% 100%; animation: maid-xp-shimmer 2.4s linear infinite; } @keyframes maid-xp-shimmer { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } :root.theme-light .xp-text { color: var(--text-3); } /* ---------- Chừ Đá Rò: bàn tay + thẻ kết quả tông hồng-vàng ---------- */ :root.theme-light .cdr-hand-card, :root.theme-light .cdr-form-card, :root.theme-light .cdr-result-card, :root.theme-light .cdr-culture-card { background: #fff; border-color: var(--border); box-shadow: 0 4px 14px rgba(255,111,165,.10); } :root.theme-light .cdr-palm { fill: var(--bg-input); stroke: var(--border-hi); } :root.theme-light .cdr-finger { fill: var(--bg-input); stroke: var(--border); } :root.theme-light .cdr-finger-seg { fill: var(--bg-input); stroke: var(--border-hi); } :root.theme-light .cdr-finger-seg:hover { fill: var(--accent-glow); } :root.theme-light .cdr-finger-seg--skip:hover { fill: var(--bg-input); } :root.theme-light .cdr-seg-selected { stroke: var(--accent); } :root.theme-light .cdr-hl-month { fill: rgba(255,158,199,.55); } :root.theme-light .cdr-hl-plusone { fill: rgba(47,174,110,.35); } :root.theme-light .cdr-hl-day { fill: rgba(255,111,165,.6); } :root.theme-light .cdr-hl-hour { stroke: var(--maid-gold); } :root.theme-light .cdr-dot-month { background: rgba(255,158,199,.55); } :root.theme-light .cdr-dot-plusone { background: rgba(47,174,110,.35); } :root.theme-light .cdr-dot-day { background: rgba(255,111,165,.6); } :root.theme-light .cdr-dot-hour { border-color: var(--maid-gold); } :root.theme-light .cdr-node-info-panel { background: var(--bg-input); border-color: var(--border-hi); color: var(--text-2); } :root.theme-light .cdr-field select, :root.theme-light .cdr-field input[type="text"] { background: var(--bg-input); border-color: var(--border); color: var(--text-1); } :root.theme-light .cdr-field select:focus, :root.theme-light .cdr-field input[type="text"]:focus { border-color: var(--border-hi); box-shadow: 0 0 0 3px var(--maid-glow-1); } :root.theme-light .cdr-date-card { background: var(--bg-input); border-color: var(--border); } :root.theme-light .cdr-segmented { background: var(--bg-panel); } :root.theme-light .cdr-segmented input:checked + label { background: var(--accent-glow); color: #d1447f; } :root.theme-light .cdr-advanced summary { color: #d1447f; } :root.theme-light .cdr-badge-good { background: rgba(47,174,110,.16); color: var(--green); } :root.theme-light .cdr-badge-fair_good { background: rgba(255,184,77,.20); color: #b8790a; } :root.theme-light .cdr-badge-bad { background: rgba(226,73,126,.16); color: var(--red); } :root.theme-light .cdr-note { color: #d1447f; } :root.theme-light .cdr-layer-summary, :root.theme-light .cdr-context-note { background: var(--bg-input); border-color: var(--border); color: var(--text-2); } :root.theme-light .cdr-context-note { border-color: var(--border-hi); } :root.theme-light .cdr-layer-block { border-top-color: var(--border); } :root.theme-light .cdr-layer-block h5 { color: #d1447f; } :root.theme-light .cdr-plain-summary { background: var(--accent-glow); color: #d1447f; } :root.theme-light .cdr-overall-good { background: rgba(47,174,110,.14); color: var(--green); border-color: rgba(47,174,110,.3); } :root.theme-light .cdr-overall-bad { background: rgba(226,73,126,.14); color: var(--red); border-color: rgba(226,73,126,.3); } :root.theme-light .cdr-overall-neutral { background: var(--bg-input); color: var(--text-2); border-color: var(--border); } :root.theme-light .cdr-error-box { background: rgba(226,73,126,.12); border-color: rgba(226,73,126,.35); color: var(--red); } :root.theme-light .cdr-conversion-step { color: #d1447f; } :root.theme-light .cdr-glossary strong { color: var(--text-1); } /* ---------- Back button ---------- */ :root.theme-light .back-btn { background: #fff; border-color: var(--border); color: var(--text-2); } :root.theme-light .back-btn:hover { background: var(--accent-glow); color: var(--text-1); border-color: var(--accent); } /* Sidebar overlay mobile - làm dịu hơn trên nền sáng */ :root.theme-light .sidebar-overlay { background: rgba(107,62,87,.35); } /* ============================================ NÚT ĐỔI GIAO DIỆN — công tắc trượt mặt trời/mặt trăng Dùng thuộc tính data-effective ("light"/"dark") do assets/js/theme.js gán để trượt vòng tròn thumb. Tự thích ứng theo theme hiện tại nhờ var(--...). ============================================ */ .theme-toggle-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px; background: var(--bg-input); border: 1.5px dashed var(--border-hi); border-radius: var(--r-pill); cursor: pointer; transition: all .2s ease; } .theme-toggle-btn:hover { background: var(--accent-glow); border-color: var(--accent); transform: translateY(-1px); } .theme-toggle-btn:active { transform: translateY(0) scale(.97); } .theme-toggle-track { position: relative; flex-shrink: 0; width: 46px; height: 24px; border-radius: var(--r-pill); background: linear-gradient(90deg, #4c1d95, #12102b); box-shadow: inset 0 1px 3px rgba(0,0,0,.35); overflow: hidden; transition: background .35s ease; } :root.theme-light .theme-toggle-track { background: linear-gradient(90deg, #ffd9ea, #ffb6d5); box-shadow: inset 0 1px 3px rgba(255,111,165,.25); } .theme-toggle-sun, .theme-toggle-moon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 10px; line-height: 1; opacity: .8; } .theme-toggle-sun { left: 5px; } .theme-toggle-moon { right: 5px; } .theme-toggle-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; font-size: 11px; transition: transform .3s cubic-bezier(.34,1.56,.64,1), background .3s ease; } /* Auto: thumb ở giữa */ .theme-toggle-btn[data-effective="dark"] .theme-toggle-thumb { transform: translateX(0); background: #2a2350; } .theme-toggle-btn[data-mode="auto"] .theme-toggle-thumb { transform: translateX(11px); background: linear-gradient(135deg,#e9d8ff,#fff); } .theme-toggle-btn[data-effective="light"] .theme-toggle-thumb { transform: translateX(22px); background: linear-gradient(135deg,#fff6da,#ffd9a0); } .theme-toggle-label { font-family: 'Baloo 2', 'Be Vietnam Pro', sans-serif; font-weight: 700; font-size: 13px; color: var(--text-1); white-space: nowrap; } /* Transition mượt khi đổi theme toàn app, tránh cảm giác "giật" màu */ html, body, .sidebar, .main, .stage, .stage-bubble, .stage-welcome, .msg-bubble, .nav-btn, .suggestion-chip, .panel, .chat-header, .chat-input-area, .input-wrapper, .about-card, .cdr-hand-card, .cdr-form-card, .cdr-result-card, .cdr-culture-card, .toast { transition: background-color .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease; } /* Người dùng yêu cầu giảm chuyển động: tắt animation trang trí */ @media (prefers-reduced-motion: reduce) { :root.theme-light .stage, :root.theme-light .pi-login-btn::after, :root.theme-light .xp-fill { animation: none !important; } }