/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg-primary: #07070f;
--bg-secondary: #0d0d1a;
--bg-card: #111120;
--bg-card-hover: #161628;
--bg-elevated: #1a1a2e;
--border-subtle: rgba(255,255,255,0.06);
--border-light: rgba(255,255,255,0.1);
--border-accent: rgba(129,140,248,0.35);
--text-primary: #f0f0ff;
--text-secondary: #a0a0c0;
--text-muted: #606080;
/* Indigo / violet / cyan palette */
--accent-warm: #818cf8; /* indigo-400 */
--accent-gold: #38bdf8; /* sky-400 */
--accent-copper: #6366f1; /* indigo-500 */
--accent-glow: rgba(99,102,241,0.15);
--accent-glow-strong: rgba(99,102,241,0.28);
--green: #4ade80;
--red: #f87171;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-full: 9999px;
--font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-display: 'Space Grotesk', 'Inter', sans-serif;
--shadow-glow: 0 0 60px rgba(99,102,241,0.1);
--shadow-card: 0 4px 24px rgba(0,0,0,0.4);
--transition-fast: 0.2s cubic-bezier(0.4,0,0.2,1);
--transition-smooth: 0.4s cubic-bezier(0.4,0,0.2,1);
}
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-main); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; min-height: 100vh; }
body.no-scroll { overflow: hidden; }
a { text-decoration: none; color: inherit; transition: var(--transition-fast); }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
/* ===== PRELOADER ===== */
.preloader { position: fixed; inset: 0; z-index: 9999; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; transition: opacity 0.5s ease, visibility 0.5s ease; }
.preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-inner { text-align: center; }
.preloader-icon { display: block; font-size: 40px; color: var(--accent-warm); margin-bottom: 12px; animation: pulse 1.5s ease-in-out infinite; }
.preloader-text { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 700; margin-bottom: 24px; }
.preloader-bar { width: 200px; height: 3px; background: var(--bg-elevated); border-radius: 3px; overflow: hidden; }
.preloader-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-warm), var(--accent-gold)); border-radius: 3px; animation: preloaderFill 1.2s ease-out forwards; }
@keyframes preloaderFill { to { width: 100%; } }
/* ===== BACKGROUND EFFECTS ===== */
.bg-grid { position: fixed; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; }
.glow-orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(80px); }
.glow-orb-1 { width: 600px; height: 600px; background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%); top: -150px; right: -100px; animation: float 20s ease-in-out infinite; }
.glow-orb-2 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(56,189,248,0.07) 0%, transparent 70%); bottom: 20%; left: -100px; animation: float 25s ease-in-out infinite reverse; }
.glow-orb-3 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(139,92,246,0.06) 0%, transparent 70%); top: 50%; left: 50%; transform: translate(-50%,-50%); animation: float 30s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translate(0,0); } 25% { transform: translate(30px,-30px); } 50% { transform: translate(-20px,20px); } 75% { transform: translate(20px,10px); } }
/* ===== NAVBAR ===== */
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 16px 0; transition: var(--transition-smooth); }
.navbar.scrolled { background: rgba(10,10,12,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-subtle); padding: 10px 0; }
.nav-container { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; background: rgba(20,20,24,0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: 8px 8px 8px 20px; }
.nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; white-space: nowrap; }
.logo-icon { color: var(--accent-warm); font-size: 20px; }
.logo-text { font-family: var(--font-display); letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-pill { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-full); font-size: 14px; font-weight: 500; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); color: var(--accent-warm); }
.nav-sparkle { font-size: 12px; }
.nav-pill:hover { background: rgba(99,102,241,0.15); }
.nav-link { padding: 8px 14px; border-radius: var(--radius-full); font-size: 14px; font-weight: 400; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
.nav-link:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }
.nav-link-arrow svg { opacity: 0.5; }
/* Nav Dropdown */
.nav-dropdown { position: relative; }
.dropdown-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(0.95); opacity: 0; visibility: hidden; min-width: 220px; padding: 8px; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: 0 16px 48px rgba(0,0,0,0.4); transition: var(--transition-fast); z-index: 100; }
.nav-dropdown:hover .dropdown-menu, .dropdown-menu.show { opacity: 1; visibility: visible; transform: translateX(-50%) scale(1); }
.dropdown-item { display: block; padding: 10px 14px; font-size: 14px; color: var(--text-secondary); border-radius: var(--radius-sm); transition: var(--transition-fast); }
.dropdown-item:hover { background: rgba(99,102,241,0.08); color: var(--text-primary); }
.dropdown-divider { height: 1px; background: var(--border-subtle); margin: 6px 0; }
/* Nav Right */
.nav-right { display: flex; align-items: center; gap: 6px; }
.nav-search-btn, .nav-fav-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: var(--transition-fast); position: relative; }
.nav-search-btn:hover, .nav-fav-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.fav-count { position: absolute; top: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-warm); color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.nav-cta { display: flex; align-items: center; gap: 6px; padding: 8px 20px; border-radius: var(--radius-full); font-size: 14px; font-weight: 600; background: var(--text-primary); color: var(--bg-primary); transition: var(--transition-fast); }
.nav-cta:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(255,255,255,0.2); }
.cta-sparkle { font-size: 12px; animation: sparkleRotate 3s linear infinite; }
@keyframes sparkleRotate { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } }
.mobile-menu-btn { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.mobile-menu-btn span { display: block; width: 20px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: var(--transition-fast); transform-origin: center; }
.mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translateY(5px); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translateY(-5px); }
/* ===== MOBILE DRAWER ===== */
.mobile-drawer { position: fixed; top: 0; right: -320px; width: 300px; max-width: 85vw; height: 100vh; background: var(--bg-secondary); border-left: 1px solid var(--border-subtle); z-index: 2000; transition: right 0.35s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; }
.mobile-drawer.open { right: 0; }
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); z-index: 1999; opacity: 0; visibility: hidden; transition: var(--transition-fast); }
.drawer-overlay.open { opacity: 1; visibility: visible; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--border-subtle); }
.drawer-close { font-size: 28px; color: var(--text-muted); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.drawer-close:hover { background: rgba(255,255,255,0.05); color: var(--text-primary); }
.drawer-body { flex: 1; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.drawer-link { display: block; padding: 14px 16px; font-size: 16px; color: var(--text-secondary); border-radius: var(--radius-md); transition: var(--transition-fast); text-align: left; width: 100%; }
.drawer-link:hover { background: rgba(255,255,255,0.04); color: var(--text-primary); }
.drawer-divider { height: 1px; background: var(--border-subtle); margin: 8px 0; }
.drawer-footer { padding: 20px; border-top: 1px solid var(--border-subtle); }
.fav-count-drawer { background: var(--accent-warm); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: var(--radius-full); margin-left: 8px; font-weight: 600; }
/* ===== SEARCH MODAL ===== */
.search-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh; opacity: 0; visibility: hidden; transition: var(--transition-fast); }
.search-modal.open { opacity: 1; visibility: visible; }
.search-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); }
.search-modal-content { position: relative; width: 600px; max-width: 92vw; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.5); transform: scale(0.95) translateY(-10px); transition: transform 0.25s ease; }
.search-modal.open .search-modal-content { transform: scale(1) translateY(0); }
.search-input-wrap { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); color: var(--text-muted); }
.search-input { flex: 1; background: none; border: none; outline: none; font-size: 16px; color: var(--text-primary); }
.search-input::placeholder { color: var(--text-muted); }
.search-kbd { padding: 2px 8px; border-radius: 4px; font-size: 11px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); color: var(--text-muted); font-family: var(--font-main); }
.search-results { max-height: 400px; overflow-y: auto; }
.search-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 14px; }
.search-shortcuts { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; font-size: 12px; }
.search-shortcuts kbd { padding: 2px 6px; border-radius: 3px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); font-family: var(--font-main); margin-right: 4px; }
.search-result-item { display: flex; align-items: center; gap: 14px; padding: 12px 20px; cursor: pointer; transition: var(--transition-fast); border-left: 3px solid transparent; }
.search-result-item:hover, .search-result-item.active { background: rgba(99,102,241,0.06); border-left-color: var(--accent-warm); }
.search-result-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.search-result-info { flex: 1; min-width: 0; }
.search-result-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.search-result-name mark { background: rgba(99,102,241,0.25); color: var(--accent-warm); border-radius: 2px; padding: 0 2px; }
.search-result-cat { font-size: 12px; color: var(--text-muted); }
.search-result-rating { font-size: 12px; color: var(--accent-gold); white-space: nowrap; }
.search-no-results { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 14px; }
.search-result-group { padding: 8px 20px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); background: var(--bg-card); }
/* ===== TOOL DETAIL MODAL ===== */
.tool-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: var(--transition-fast); }
.tool-modal.open { opacity: 1; visibility: visible; }
.tool-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); }
.tool-modal-content { position: relative; width: 560px; max-width: 92vw; max-height: 85vh; overflow-y: auto; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-xl); box-shadow: 0 24px 64px rgba(0,0,0,0.5); transform: scale(0.95); transition: transform 0.25s ease; padding: 0; }
.tool-modal.open .tool-modal-content { transform: scale(1); }
.tool-detail-header { padding: 32px 32px 20px; display: flex; align-items: flex-start; gap: 20px; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.tool-detail-icon { width: 64px; height: 64px; border-radius: var(--radius-md); background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; font-size: 32px; flex-shrink: 0; border: 1px solid var(--border-subtle); }
.tool-detail-meta { flex: 1; }
.tool-detail-name { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.tool-detail-cat { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.tool-detail-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 22px; transition: var(--transition-fast); }
.tool-detail-close:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.tool-detail-body { padding: 24px 32px 32px; }
.tool-detail-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.tool-badge { padding: 4px 12px; border-radius: var(--radius-full); font-size: 12px; font-weight: 500; background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); color: var(--text-secondary); }
.tool-badge-rating { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.2); color: var(--accent-warm); }
.tool-badge-free { background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.2); color: var(--green); }
.tool-badge-paid { background: rgba(248,113,113,0.1); border-color: rgba(248,113,113,0.2); color: var(--red); }
.tool-detail-desc { font-size: 15px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 24px; }
.tool-detail-features h4 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text-primary); }
.tool-detail-features ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.tool-detail-features li { font-size: 14px; color: var(--text-secondary); padding-left: 20px; position: relative; }
.tool-detail-features li::before { content: '✓'; position: absolute; left: 0; color: var(--accent-warm); font-weight: 700; }
.tool-detail-actions { display: flex; gap: 12px; }
.tool-detail-actions .btn-primary { flex: 1; justify-content: center; }
.tool-detail-actions .btn-secondary { flex-shrink: 0; }
.tool-detail-fav { display: flex; align-items: center; gap: 6px; }
.tool-detail-fav.favorited svg path { fill: var(--accent-warm); stroke: var(--accent-warm); }
/* ===== SUBMIT MODAL ===== */
.submit-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: var(--transition-fast); }
.submit-modal.open { opacity: 1; visibility: visible; }
.submit-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(8px); }
.submit-modal-content { position: relative; width: 560px; max-width: 92vw; max-height: 85vh; overflow-y: auto; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-xl); box-shadow: 0 24px 64px rgba(0,0,0,0.5); transform: scale(0.95); transition: transform 0.25s ease; padding: 40px; }
.submit-modal.open .submit-modal-content { transform: scale(1); }
.modal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 22px; }
.modal-close:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.modal-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.modal-subtitle { font-size: 14px; color: var(--text-muted); margin-bottom: 28px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 14px; outline: none; transition: var(--transition-fast); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--accent-warm); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.form-group textarea { resize: vertical; }
.form-group select { cursor: pointer; }
/* ===== HERO ===== */
.hero { position: relative; padding: 160px 0 60px; z-index: 1; min-height: 100vh; display: flex; align-items: center; }
.hero-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; text-align: center; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: var(--radius-full); font-size: 13px; font-weight: 500; color: var(--accent-warm); background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.15); margin-bottom: 32px; transition: var(--transition-fast); }
.hero-badge:hover { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.25); transform: translateY(-1px); }
.badge-dot { width: 6px; height: 6px; background: var(--accent-warm); border-radius: 50%; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
.hero-title { font-family: var(--font-display); font-size: clamp(42px, 7vw, 80px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 24px; }
.hero-highlight { background: linear-gradient(135deg, var(--accent-warm) 0%, var(--accent-gold) 50%, var(--accent-copper) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-subtitle { font-size: clamp(16px, 2vw, 19px); color: var(--text-secondary); max-width: 600px; margin: 0 auto 40px; line-height: 1.7; font-weight: 300; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 80px; }
.btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: var(--radius-full); font-size: 15px; font-weight: 600; background: linear-gradient(135deg, var(--accent-warm) 0%, var(--accent-copper) 100%); color: #fff; border: none; cursor: pointer; transition: var(--transition-fast); box-shadow: 0 4px 20px rgba(99,102,241,0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(99,102,241,0.4); filter: brightness(1.1); }
.btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: var(--radius-full); font-size: 15px; font-weight: 500; color: var(--text-secondary); background: rgba(255,255,255,0.04); border: 1px solid var(--border-light); transition: var(--transition-fast); }
.btn-secondary:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); border-color: rgba(255,255,255,0.15); }
.btn-lg { padding: 16px 36px; font-size: 16px; }
.hero-kbd { padding: 2px 8px; border-radius: 4px; font-size: 11px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15); font-family: var(--font-main); margin-left: 4px; color: var(--text-muted); }
/* Hero Visual */
.hero-visual { position: relative; max-width: 900px; margin: 0 auto 60px; }
.flow-container { position: relative; width: 100%; height: 300px; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: rgba(20,20,24,0.5); backdrop-filter: blur(10px); overflow: hidden; }
.flow-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.flow-node { position: absolute; z-index: 2; }
.flow-node-left { left: 6%; top: 50%; transform: translateY(-50%); }
.flow-icon-box { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--bg-card); border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); }
.flow-icon-box.small { width: 40px; height: 40px; }
.flow-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: var(--shadow-card); }
.flow-node-right-1 { right: 10%; top: 30%; }
.flow-node-right-2 { right: 6%; top: 55%; }
.diamond { position: absolute; width: 12px; height: 12px; background: var(--accent-gold); transform: rotate(45deg); z-index: 2; box-shadow: 0 0 12px rgba(56,189,248,0.4); }
.diamond-1 { left: 22%; top: 35%; }
.diamond-2 { left: 30%; top: 55%; animation: diamondPulse 3s ease-in-out infinite 0.5s; }
.diamond-3 { left: 38%; top: 45%; background: var(--accent-warm); }
.diamond-4 { right: 30%; top: 30%; animation: diamondPulse 3s ease-in-out infinite 1s; }
.diamond-5 { right: 22%; top: 60%; background: var(--accent-copper); }
@keyframes diamondPulse { 0%, 100% { box-shadow: 0 0 12px rgba(56,189,248,0.4); } 50% { box-shadow: 0 0 24px rgba(56,189,248,0.7); } }
.flow-cards { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; gap: 8px; z-index: 3; }
.flow-card { display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: rgba(245,245,247,0.95); border-radius: var(--radius-full); min-width: 200px; box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
.card-indicator { width: 10px; height: 10px; border-radius: 3px; }
.ind-dark { background: #27272a; }
.ind-accent { background: var(--accent-warm); border-radius: 50%; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid var(--accent-warm); }
.ind-muted { background: #a1a1aa; border-radius: 50%; }
.card-label { font-size: 13px; color: #71717a; font-weight: 400; }
.card-value { font-size: 14px; color: #18181b; font-weight: 600; margin-left: auto; }
.badge-val { background: rgba(99,102,241,0.15); padding: 2px 10px; border-radius: var(--radius-full); color: var(--accent-copper); }
.card-star { color: var(--accent-warm); font-size: 14px; }
.card-highlight { transform: scale(1.02); box-shadow: 0 4px 20px rgba(99,102,241,0.2); }
.flow-sparkle { position: absolute; color: var(--accent-warm); z-index: 2; animation: sparkleFloat 4s ease-in-out infinite; font-size: 14px; opacity: 0.6; }
.sparkle-1 { left: 18%; top: 25%; animation-delay: 0s; }
.sparkle-2 { right: 18%; top: 35%; animation-delay: 1.5s; }
.sparkle-3 { right: 35%; bottom: 20%; animation-delay: 0.8s; font-size: 10px; }
@keyframes sparkleFloat { 0%, 100% { opacity: 0.4; transform: translateY(0) scale(1); } 50% { opacity: 0.8; transform: translateY(-6px) scale(1.1); } }
.flow-glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 1; }
.flow-glow-1 { width: 120px; height: 120px; background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%); left: 15%; top: 40%; filter: blur(20px); }
.flow-glow-2 { width: 80px; height: 80px; background: radial-gradient(circle, rgba(99,102,241,0.2) 0%, transparent 70%); right: 25%; top: 30%; filter: blur(15px); }
.flow-glow-3 { width: 60px; height: 60px; background: radial-gradient(circle, rgba(56,189,248,0.15) 0%, transparent 70%); left: 45%; bottom: 10%; filter: blur(15px); }
/* Trust Bar */
.trust-bar { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.trust-label { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; }
.trust-logos { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; justify-content: center; }
.trust-logo { font-size: 15px; font-weight: 600; color: var(--text-muted); opacity: 0.5; transition: var(--transition-fast); font-family: var(--font-display); letter-spacing: -0.02em; cursor: default; }
.trust-logo:hover { opacity: 0.8; color: var(--text-secondary); }
/* ===== SECTIONS COMMON ===== */
.section-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-header { text-align: center; margin-bottom: 64px; }
.section-badge { display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent-warm); margin-bottom: 16px; letter-spacing: 0.05em; }
.section-title { font-family: var(--font-display); font-size: clamp(32px, 5vw, 52px); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 16px; }
.section-subtitle { font-size: 17px; color: var(--text-secondary); max-width: 500px; margin: 0 auto; line-height: 1.6; font-weight: 300; }
/* ===== FILTER BAR ===== */
.filter-bar { margin-bottom: 32px; }
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.filter-tab { padding: 8px 18px; border-radius: var(--radius-full); font-size: 13px; font-weight: 500; color: var(--text-muted); background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); transition: var(--transition-fast); white-space: nowrap; }
.filter-tab:hover { color: var(--text-secondary); background: rgba(255,255,255,0.06); }
.filter-tab.active { color: var(--accent-warm); background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.2); }
.filter-controls { display: flex; align-items: center; gap: 12px; }
.sort-dropdown { position: relative; }
.sort-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); border: 1px solid var(--border-subtle); background: rgba(255,255,255,0.03); transition: var(--transition-fast); }
.sort-btn:hover { color: var(--text-secondary); background: rgba(255,255,255,0.06); }
.sort-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 160px; padding: 6px; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-sm); box-shadow: 0 12px 36px rgba(0,0,0,0.3); opacity: 0; visibility: hidden; transition: var(--transition-fast); z-index: 10; }
.sort-menu.open { opacity: 1; visibility: visible; }
.sort-option { display: block; width: 100%; padding: 8px 12px; font-size: 13px; color: var(--text-secondary); text-align: left; border-radius: 4px; transition: var(--transition-fast); }
.sort-option:hover { background: rgba(99,102,241,0.08); color: var(--text-primary); }
.sort-option.active { color: var(--accent-warm); }
.view-toggle { display: flex; gap: 4px; }
.view-btn { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--text-muted); border: 1px solid var(--border-subtle); transition: var(--transition-fast); }
.view-btn:hover { color: var(--text-secondary); }
.view-btn.active { color: var(--accent-warm); border-color: rgba(99,102,241,0.2); background: rgba(99,102,241,0.06); }
.results-count { font-size: 13px; color: var(--text-muted); margin-left: auto; }
/* ===== TOOLS GRID ===== */
.categories { position: relative; padding: 120px 0; z-index: 1; }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tools-grid.list-view { grid-template-columns: 1fr; }
/* Tool Card */
.tool-card { position: relative; padding: 24px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); transition: var(--transition-smooth); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
.tool-card:hover { background: var(--bg-card-hover); border-color: var(--cat-border, var(--border-light)); transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.tool-card:hover .tool-card-glow { opacity: 1; }
.tool-card:hover .tool-card-spotlight { opacity: 1; }
.tool-card:hover .tool-card-visit { opacity: 1; color: var(--accent-warm); }
.tool-card-glow { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--cat-dot, var(--accent-warm)), transparent); opacity: 0; transition: var(--transition-smooth); }
.tool-card-spotlight { position: absolute; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle, var(--cat-bg, rgba(99,102,241,0.08)) 0%, transparent 70%); top: var(--my, -100px); left: var(--mx, -100px); transform: translate(-50%,-50%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 0; }
/* Badges on card */
.sponsored-ribbon { position: absolute; top: 12px; right: 12px; padding: 3px 12px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; background: linear-gradient(135deg, var(--accent-warm), var(--accent-copper)); color: #fff; letter-spacing: 0.03em; text-transform: uppercase; z-index: 2; }
.new-ribbon { position: absolute; top: 12px; right: 12px; padding: 3px 10px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; background: rgba(74,222,128,0.15); border: 1px solid rgba(74,222,128,0.25); color: var(--green); letter-spacing: 0.03em; z-index: 2; }
.tool-card-sponsored .new-ribbon { right: auto; left: 12px; }
.partner-label { font-size: 10px; font-weight: 700; color: var(--accent-warm); background: rgba(99,102,241,0.12); padding: 1px 8px; border-radius: var(--radius-full); margin-left: 6px; vertical-align: middle; letter-spacing: 0.03em; }
.tool-card-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; position: relative; z-index: 1; }
.tool-card-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; border: 1px solid var(--border-subtle); transition: var(--transition-fast); }
.tool-card:hover .tool-card-icon { transform: scale(1.05); border-color: var(--cat-border); }
.tool-card-info { flex: 1; min-width: 0; }
.tool-card-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 3px; }
.tool-card-category { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.cat-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tool-card-fav { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; transition: var(--transition-fast); z-index: 2; }
.tool-card-fav:hover { color: var(--accent-warm); background: rgba(99,102,241,0.1); }
.tool-card-fav.favorited { color: var(--accent-warm); }
.tool-card-fav.favorited svg path { fill: var(--accent-warm); }
.tool-card-desc { font-size: 13px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; position: relative; z-index: 1; flex: 1; }
/* Rating + Pricing meta row */
.tool-card-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; position: relative; z-index: 1; }
.tool-card-rating { font-size: 13px; color: var(--accent-gold); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.stars-wrap { letter-spacing: 1px; font-size: 12px; }
.star-half { opacity: 0.5; }
.star-empty { opacity: 0.2; }
.rating-num { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-primary); }
/* Pricing pills */
.pricing-pill { padding: 3px 12px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid; }
.pricing-free { background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.2); color: #4ade80; }
.pricing-freemium { background: rgba(99,179,237,0.1); border-color: rgba(99,179,237,0.2); color: #63b3ed; }
.pricing-paid { background: rgba(237,137,54,0.1); border-color: rgba(237,137,54,0.2); color: #ed8936; }
.pricing-enterprise { background: rgba(159,122,234,0.1); border-color: rgba(159,122,234,0.2); color: #9f7aea; }
.tool-card-footer { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.tool-card-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tool-tag { padding: 3px 10px; border-radius: var(--radius-full); font-size: 10px; font-weight: 500; background: rgba(255,255,255,0.03); border: 1px solid var(--border-subtle); color: var(--text-muted); transition: var(--transition-fast); }
.tool-card:hover .tool-tag { border-color: var(--border-light); color: var(--text-secondary); }
.tool-card-visit { font-size: 12px; font-weight: 600; color: var(--text-muted); opacity: 0; transition: var(--transition-fast); white-space: nowrap; }
/* List View Card */
.tools-grid.list-view .tool-card { display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; padding: 18px 24px; align-items: center; }
.tools-grid.list-view .tool-card-header { margin-bottom: 0; }
.tools-grid.list-view .tool-card-desc { margin-bottom: 0; display: block; -webkit-line-clamp: 1; }
.tools-grid.list-view .tool-card-meta { margin-bottom: 0; gap: 12px; }
.tools-grid.list-view .tool-card-footer { flex-direction: row; border-top: none; padding-top: 0; gap: 8px; }
.tools-grid.list-view .tool-card-visit { opacity: 1; }
/* Review on Card */
.tool-card-review { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12px; position: relative; z-index: 1; }
.review-source-badge { padding: 2px 8px; border-radius: var(--radius-full); font-size: 10px; font-weight: 700; background: rgba(255,255,255,0.06); border: 1px solid var(--border-subtle); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.review-score { font-weight: 700; color: var(--accent-gold); font-family: var(--font-display); }
.review-count { color: var(--text-muted); font-size: 11px; }
/* Review in Modal */
.tool-detail-review-section { margin-bottom: 24px; }
.tool-detail-review-section h4 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text-primary); }
.tool-review-card { padding: 20px; background: rgba(255,255,255,0.02); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
.review-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.review-source-pill { padding: 4px 12px; border-radius: var(--radius-full); font-size: 11px; font-weight: 700; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.2); color: var(--accent-warm); text-transform: uppercase; letter-spacing: 0.04em; }
.review-score-lg { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--accent-gold); }
.review-count-lg { font-size: 13px; color: var(--text-muted); }
.review-quote { font-size: 14px; color: var(--text-secondary); line-height: 1.7; font-style: italic; margin: 0 0 10px; padding-left: 16px; border-left: 2px solid rgba(99,102,241,0.3); }
.review-author { font-size: 12px; color: var(--text-muted); font-style: normal; display: block; margin-bottom: 12px; }
.review-link { font-size: 12px; color: var(--accent-warm); font-weight: 500; display: inline-flex; align-items: center; gap: 4px; transition: var(--transition-fast); }
.review-link:hover { text-decoration: underline; }
/* Detail Modal Tags */
.tool-detail-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
/* Load More */
.load-more-wrap { text-align: center; padding-top: 40px; }
.load-more-btn { min-width: 200px; justify-content: center; }
/* ===== PRICING ===== */
.pricing { position: relative; padding: 120px 0; z-index: 1; }
.pricing-toggle { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 48px; }
.pricing-label { font-size: 14px; color: var(--text-muted); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.pricing-label.active-plan { color: var(--text-primary); }
.save-badge { padding: 2px 10px; border-radius: var(--radius-full); font-size: 11px; background: rgba(74,222,128,0.12); color: var(--green); font-weight: 600; }
.pricing-switch { width: 48px; height: 26px; border-radius: 13px; background: var(--bg-elevated); border: 1px solid var(--border-light); position: relative; padding: 2px; transition: var(--transition-fast); }
.pricing-switch.yearly { background: var(--accent-warm); border-color: var(--accent-copper); }
.pricing-switch-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-primary); transition: var(--transition-fast); }
.pricing-switch.yearly .pricing-switch-thumb { left: 25px; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pricing-card { padding: 36px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); position: relative; transition: var(--transition-smooth); }
.pricing-card:hover { transform: translateY(-4px); border-color: var(--border-light); }
.pricing-card-featured { border-color: rgba(99,102,241,0.3); background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, var(--bg-card) 100%); }
.pricing-popular { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); padding: 4px 16px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; background: linear-gradient(135deg, var(--accent-warm), var(--accent-copper)); color: #fff; white-space: nowrap; }
.pricing-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.pricing-price { margin-bottom: 8px; }
.price-amount { font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -0.03em; }
.price-period { font-size: 14px; color: var(--text-muted); }
.pricing-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; line-height: 1.5; }
.pricing-features { list-style: none; margin-bottom: 28px; display: flex; flex-direction: column; gap: 10px; }
.pricing-features li { font-size: 14px; color: var(--text-secondary); }
.pricing-features .feature-disabled { color: var(--text-muted); opacity: 0.5; }
/* ===== STATS ===== */
.stats { position: relative; padding: 80px 0; z-index: 1; }
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; padding: 48px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); }
.stat-item { text-align: center; padding: 16px; }
.stat-number { display: inline; font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); font-weight: 700; color: var(--accent-warm); letter-spacing: -0.03em; }
.stat-suffix { font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px); font-weight: 700; color: var(--accent-warm); }
.stat-label { display: block; font-size: 14px; color: var(--text-muted); font-weight: 400; margin-top: 8px; }
/* Live Visitors */
.stat-item-live { position: relative; }
.live-indicator { display: block; font-size: 10px; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; animation: livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
/* Trending Section */
.trending-section { margin-top: 48px; padding: 32px; background: rgba(99,102,241,0.04); border: 1px solid rgba(99,102,241,0.1); border-radius: var(--radius-lg); }
.trending-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 20px; text-align: center; }
.trending-grid { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.trending-item { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-full); transition: var(--transition-fast); }
.trending-item:hover { background: var(--bg-card-hover); border-color: rgba(99,102,241,0.2); transform: translateY(-2px); }
.trending-rank { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--accent-warm); min-width: 28px; }
.trending-tool { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.trending-stat { font-size: 12px; color: var(--green); font-weight: 600; }
.trending-item:first-child { background: linear-gradient(135deg, rgba(99,102,241,0.1), var(--bg-elevated)); border-color: rgba(99,102,241,0.25); }
.trending-item:first-child .trending-rank { font-size: 18px; }
.trending-item:first-child .trending-tool { font-size: 15px; }
/* Partner Dashboard */
.partner-dashboard { margin-top: 64px; padding: 48px; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-xl); }
.partner-dashboard-title { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin-bottom: 8px; text-align: center; }
.partner-dashboard-subtitle { font-size: 14px; color: var(--text-muted); text-align: center; margin-bottom: 32px; }
.partner-metrics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; }
.partner-metric-card { padding: 24px; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); position: relative; overflow: hidden; transition: var(--transition-smooth); }
.partner-metric-card:hover { border-color: var(--border-light); transform: translateY(-2px); }
.partner-tier-badge { position: absolute; top: 12px; right: 12px; padding: 3px 10px; border-radius: var(--radius-full); font-size: 9px; font-weight: 700; background: rgba(255,255,255,0.06); border: 1px solid var(--border-subtle); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.partner-tier-1 { border-color: rgba(99,102,241,0.3); background: linear-gradient(135deg, rgba(99,102,241,0.08), var(--bg-card)); }
.partner-tier-1 .partner-tier-badge { background: linear-gradient(135deg, var(--accent-warm), var(--accent-copper)); color: #fff; border: none; }
.partner-tier-2 .partner-tier-badge { background: rgba(66,153,225,0.12); color: #4299e1; border-color: rgba(66,153,225,0.2); }
.partner-tier-3 .partner-tier-badge { background: rgba(159,122,234,0.12); color: #9f7aea; border-color: rgba(159,122,234,0.2); }
.partner-metric-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.partner-metric-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.metric-stat { text-align: center; }
.metric-num { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--accent-warm); }
.metric-label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.partner-status { display: block; text-align: center; font-size: 11px; color: var(--green); font-weight: 600; }
.partner-dashboard-footer { text-align: center; padding-top: 28px; border-top: 1px solid var(--border-subtle); }
.partner-dashboard-footer p { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
.partner-dashboard-footer strong { color: var(--text-primary); }
.partner-cta-link { font-size: 14px; color: var(--accent-warm); font-weight: 600; transition: var(--transition-fast); }
.partner-cta-link:hover { text-decoration: underline; }
.partner-stats-mini { margin-top: 16px; padding: 12px; background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.15); border-radius: var(--radius-sm); text-align: center; }
.partner-stat-label-mini { display: block; font-size: 11px; font-weight: 700; color: var(--accent-warm); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.partner-stat-val { display: block; font-size: 12px; color: var(--text-secondary); }
/* ===== NEWSLETTER ===== */
.newsletter { position: relative; padding: 40px 0 80px; z-index: 1; }
.newsletter-card { position: relative; padding: 64px 40px; background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, var(--bg-card) 50%, rgba(56,189,248,0.04) 100%); border: 1px solid rgba(99,102,241,0.1); border-radius: var(--radius-xl); overflow: hidden; text-align: center; }
.newsletter-glow { position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 400px; height: 400px; background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%); pointer-events: none; }
.newsletter-content { position: relative; z-index: 1; }
.newsletter-title { font-family: var(--font-display); font-size: clamp(24px, 4vw, 36px); font-weight: 700; margin-bottom: 12px; letter-spacing: -0.02em; }
.newsletter-subtitle { font-size: 16px; color: var(--text-secondary); max-width: 450px; margin: 0 auto 32px; line-height: 1.6; font-weight: 300; }
.newsletter-form { max-width: 440px; margin: 0 auto; }
.newsletter-input-wrap { display: flex; gap: 8px; margin-bottom: 12px; }
.newsletter-input { flex: 1; padding: 14px 18px; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: var(--radius-full); color: var(--text-primary); font-size: 14px; outline: none; transition: var(--transition-fast); }
.newsletter-input:focus { border-color: var(--accent-warm); box-shadow: 0 0 0 3px rgba(99,102,241,0.1); }
.newsletter-btn { display: flex; align-items: center; gap: 6px; padding: 14px 24px; border-radius: var(--radius-full); font-size: 14px; font-weight: 600; background: linear-gradient(135deg, var(--accent-warm), var(--accent-copper)); color: #fff; border: none; cursor: pointer; transition: var(--transition-fast); white-space: nowrap; }
.newsletter-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(99,102,241,0.3); }
.newsletter-btn.success { background: var(--green); }
.newsletter-note { font-size: 12px; color: var(--text-muted); }
/* ===== CTA ===== */
.cta-section { position: relative; padding: 80px 0 120px; z-index: 1; }
.cta-card { position: relative; text-align: center; padding: 80px 40px; background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, var(--bg-card) 50%, rgba(56,189,248,0.04) 100%); border: 1px solid rgba(99,102,241,0.1); border-radius: var(--radius-xl); overflow: hidden; }
.cta-glow { position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 400px; height: 400px; background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%); pointer-events: none; }
.cta-badge { display: inline-block; font-size: 13px; font-weight: 600; color: var(--accent-warm); margin-bottom: 20px; letter-spacing: 0.05em; }
.cta-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 42px); font-weight: 700; margin-bottom: 16px; letter-spacing: -0.02em; }
.cta-subtitle { font-size: 17px; color: var(--text-secondary); max-width: 500px; margin: 0 auto 36px; line-height: 1.6; font-weight: 300; }
.cta-actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
/* ===== FOOTER ===== */
.footer { position: relative; padding: 80px 0 40px; border-top: 1px solid var(--border-subtle); z-index: 1; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.footer-brand .nav-logo { margin-bottom: 16px; }
.footer-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 8px; }
.footer-domain { font-size: 14px; color: var(--accent-warm); font-weight: 500; }
.footer-col h4 { font-size: 14px; font-weight: 600; margin-bottom: 20px; color: var(--text-primary); }
.footer-col a { display: block; font-size: 14px; color: var(--text-muted); padding: 4px 0; transition: var(--transition-fast); cursor: pointer; }
.footer-col a:hover { color: var(--text-secondary); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 32px; border-top: 1px solid var(--border-subtle); }
.footer-bottom p { font-size: 13px; color: var(--text-muted); }
.footer-socials { display: flex; gap: 20px; }
.footer-socials a { font-size: 14px; color: var(--text-muted); font-weight: 500; }
.footer-socials a:hover { color: var(--accent-warm); }
/* ===== STICKY ANARA CTA ===== */
.anara-sticky-cta { position: fixed; bottom: 32px; left: 32px; z-index: 150; opacity: 0; visibility: hidden; transform: translateX(-20px); transition: var(--transition-smooth); max-width: 320px; }
.anara-sticky-cta.visible { opacity: 1; visibility: visible; transform: translateX(0); }
.anara-sticky-inner { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: linear-gradient(135deg, rgba(99,102,241,0.12), var(--bg-elevated)); border: 1px solid rgba(99,102,241,0.3); border-radius: var(--radius-full); box-shadow: 0 8px 32px rgba(0,0,0,0.4); backdrop-filter: blur(12px); transition: var(--transition-fast); }
.anara-sticky-inner:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(99,102,241,0.3); border-color: rgba(99,102,241,0.4); }
.anara-sticky-icon { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(100,180,255,0.15)); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.anara-sticky-content { flex: 1; min-width: 0; }
.anara-sticky-title { display: block; font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.anara-sticky-subtitle { display: block; font-size: 11px; color: var(--accent-warm); font-weight: 500; }
.anara-sticky-close { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-primary); border: 1px solid var(--border-light); color: var(--text-muted); font-size: 14px; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); }
.anara-sticky-close:hover { background: var(--red); color: #fff; border-color: var(--red); }
/* ===== BACK TO TOP ===== */
.back-to-top { position: fixed; bottom: 32px; right: 32px; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-elevated); border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); z-index: 100; opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition-fast); box-shadow: var(--shadow-card); }
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { color: var(--accent-warm); border-color: rgba(99,102,241,0.3); background: var(--bg-card); }
/* ===== TOAST ===== */
.toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 5000; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast { padding: 12px 24px; border-radius: var(--radius-full); font-size: 14px; font-weight: 500; background: var(--bg-elevated); border: 1px solid var(--border-light); color: var(--text-primary); box-shadow: 0 8px 32px rgba(0,0,0,0.3); pointer-events: auto; animation: toastIn 0.3s ease forwards; }
.toast.toast-success { border-color: rgba(74,222,128,0.3); }
.toast.toast-error { border-color: rgba(248,113,113,0.3); }
.toast.toast-out { animation: toastOut 0.3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toastOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-10px) scale(0.95); } }
/* ===== ANIMATIONS ===== */
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.fade-up.visible { opacity: 1; transform: translateY(0); }
/* Partner Stats Stagger */
.partner-stat.visible { animation: statReveal 0.6s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes statReveal { from { opacity: 0; transform: scale(0.8) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
/* Partner Trust Org Pills Stagger */
.partner-trust-org.visible { animation: orgPillIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes orgPillIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
/* Filter Tab Hover */
.filter-tab { position: relative; overflow: hidden; }
.filter-tab::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent, rgba(99,102,241,0.1), transparent); transform: translateX(-100%); transition: transform 0.6s ease; pointer-events: none; }
.filter-tab:hover::before { transform: translateX(100%); }
/* Tool Card Enhanced Hover */
.tool-card { will-change: transform; }
.tool-card::after { content: ''; position: absolute; inset: -1px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--cat-dot, var(--accent-warm)) 0%, transparent 40%, var(--cat-dot, var(--accent-warm)) 100%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: -1; }
.tool-card:hover::after { opacity: 0.08; }
/* Button Ripple Effect */
@keyframes btnRipple { 0% { transform: scale(0); opacity: 0.5; } 100% { transform: scale(4); opacity: 0; } }
/* Pricing Card Glow */
.pricing-card-featured::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(135deg, var(--accent-warm), var(--accent-gold), var(--accent-copper)); border-radius: var(--radius-xl); opacity: 0.15; z-index: -1; filter: blur(12px); }
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.tools-grid { grid-template-columns: repeat(2, 1fr); }
.stats-grid { grid-template-columns: repeat(3, 1fr); }
.stat-item-live { grid-column: span 3; }
.pricing-grid { grid-template-columns: repeat(2, 1fr); }
.pricing-card:last-child { grid-column: span 2; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 768px) {
.nav-links { display: none; }
.mobile-menu-btn { display: flex; }
.hero { padding: 130px 0 40px; }
.hero-actions { flex-direction: column; margin-bottom: 60px; }
.hero-actions .btn-primary, .hero-actions .btn-secondary { width: 100%; justify-content: center; }
.tools-grid, .tools-grid.list-view { grid-template-columns: 1fr; }
.tools-grid.list-view .tool-card { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: 1fr 1fr; padding: 32px; }
.stat-item-live { grid-column: span 2; }
.pricing-grid { grid-template-columns: 1fr; }
.pricing-card:last-child { grid-column: unset; }
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
.flow-container { height: 240px; }
.flow-cards { transform: translate(-50%,-50%) scale(0.85); }
.flow-node-left, .flow-node-right-1, .flow-node-right-2 { display: none; }
.flow-lines { opacity: 0.3; }
.cta-card, .newsletter-card { padding: 48px 24px; }
.filter-controls { flex-wrap: wrap; }
.form-row { grid-template-columns: 1fr; }
.newsletter-input-wrap { flex-direction: column; }
}
@media (max-width: 480px) {
.nav-container { padding: 6px 6px 6px 16px; }
.hero-title { font-size: 36px; }
.stats-grid { grid-template-columns: 1fr; padding: 24px; }
.flow-container { height: 200px; }
.flow-cards { transform: translate(-50%,-50%) scale(0.75); }
.filter-tabs { gap: 4px; }
.filter-tab { padding: 6px 12px; font-size: 12px; }
}
/* ===== PARTNER BANNER (ANARA) ===== */
.partner-banner { position: relative; padding: 40px 0 80px; z-index: 1; }
.partner-card { position: relative; padding: 40px; background: linear-gradient(135deg, rgba(99,102,241,0.08) 0%, var(--bg-card) 40%, rgba(100,180,255,0.04) 100%); border: 1px solid rgba(99,102,241,0.2); border-radius: var(--radius-xl); overflow: hidden; }
.partner-glow { position: absolute; top: -40%; left: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 65%); pointer-events: none; }
.partner-badge { position: absolute; top: 16px; right: 20px; padding: 5px 16px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; background: linear-gradient(135deg, var(--accent-warm), var(--accent-copper)); color: #fff; letter-spacing: 0.03em; animation: partnerBadgeGlow 2.5s ease-in-out infinite; box-shadow: 0 0 20px rgba(99,102,241,0.4); }
@keyframes partnerBadgeGlow { 0%, 100% { box-shadow: 0 0 20px rgba(99,102,241,0.4); transform: scale(1); } 50% { box-shadow: 0 0 32px rgba(99,102,241,0.7), 0 0 48px rgba(99,102,241,0.3); transform: scale(1.02); } }
.partner-content { display: flex; gap: 40px; align-items: flex-start; position: relative; z-index: 1; }
.partner-left { flex: 1; display: flex; gap: 24px; }
.partner-icon-wrap { width: 72px; height: 72px; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(100,180,255,0.1)); border: 1px solid rgba(99,102,241,0.2); display: flex; align-items: center; justify-content: center; font-size: 36px; flex-shrink: 0; }
.partner-info { flex: 1; }
.partner-name { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.partner-tagline { font-size: 15px; color: var(--accent-warm); font-weight: 500; margin-bottom: 12px; }
.partner-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 20px; }
.partner-desc strong { color: var(--text-primary); font-weight: 600; }
.partner-stats { display: flex; gap: 24px; margin-bottom: 16px; flex-wrap: wrap; }
.partner-stat { text-align: center; }
.partner-stat-num { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--accent-warm); letter-spacing: -0.02em; }
.partner-stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.partner-trust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.partner-trust-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 4px; }
.partner-trust-org { padding: 3px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 500; background: rgba(255,255,255,0.04); border: 1px solid var(--border-subtle); color: var(--text-muted); }
.partner-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 200px; padding-top: 16px; }
.partner-cta { white-space: nowrap; }
.partner-cta-note { font-size: 12px; color: var(--text-muted); }
.partner-rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.partner-stars { color: var(--accent-warm); letter-spacing: 2px; }
.partner-yc-badge { font-size: 11px; color: var(--accent-gold); font-weight: 600; margin-top: 8px; padding: 4px 12px; background: rgba(56,189,248,0.1); border-radius: var(--radius-full); border: 1px solid rgba(56,189,248,0.2); display: inline-block; }
/* ===== CHATBOT ===== */
.chatbot-section { position: relative; padding: 40px 0 80px; z-index: 1; }
.chatbot-card { position: relative; background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; max-height: 680px; }
.chatbot-glow { position: absolute; top: -30%; right: -10%; width: 400px; height: 400px; background: radial-gradient(circle, rgba(99,179,237,0.06) 0%, transparent 70%); pointer-events: none; }
/* Toolbar */
.chatbot-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border-subtle); background: var(--bg-secondary); flex-wrap: wrap; gap: 10px; }
.model-picker { display: flex; align-items: center; gap: 10px; }
.model-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.model-select { padding: 7px 14px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px; font-weight: 500; cursor: pointer; outline: none; min-width: 180px; transition: var(--transition-fast); }
.model-select:focus { border-color: var(--accent-warm); }
.model-select optgroup { color: var(--text-muted); font-weight: 600; }
.model-select option { background: var(--bg-secondary); color: var(--text-primary); padding: 6px; }
.chatbot-actions-bar { display: flex; align-items: center; gap: 12px; }
.chatbot-clear-btn { display: flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--text-muted); border: 1px solid rgba(99,102,241,0.14); background: rgba(99,102,241,0.04); transition: all 0.15s; }
.chatbot-clear-btn:hover { color: var(--accent-warm); border-color: rgba(99,102,241,0.28); background: rgba(99,102,241,0.09); }
.chatbot-status { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.chatbot-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.chatbot-status.thinking::before { background: var(--accent-warm); animation: pulse 1s infinite; }
.chatbot-status.error::before { background: var(--red); }
/* Messages */
.chatbot-messages { flex: 1; overflow-y: auto; padding: 20px; min-height: 320px; max-height: 440px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; }
/* Welcome */
.chat-welcome { text-align: center; padding: 40px 24px 32px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.chat-welcome-icon { font-size: 30px; color: var(--accent-warm); filter: drop-shadow(0 0 12px rgba(129,140,248,0.55)); }
.chat-welcome h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.chat-welcome p { font-size: 13px; color: var(--text-muted); max-width: 360px; line-height: 1.6; }
.chat-suggestions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 14px; }
.chat-suggestion { padding: 7px 14px; border-radius: 20px; font-size: 12.5px; color: var(--text-secondary); background: rgba(99,102,241,0.06); border: 1px solid rgba(99,102,241,0.14); transition: all 0.15s; cursor: pointer; }
.chat-suggestion:hover { color: var(--accent-warm); border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.1); transform: translateY(-1px); }
/* Message Bubbles */
.chat-msg { display: flex; gap: 10px; max-width: 82%; animation: chatMsgIn 0.22s ease; }
.chat-msg-user { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg-ai { align-self: flex-start; }
.chat-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; border: 1px solid rgba(99,102,241,0.18); }
.chat-msg-user .chat-avatar { background: rgba(99,102,241,0.15); }
.chat-msg-ai .chat-avatar { background: rgba(99,102,241,0.1); color: var(--accent-warm); }
.chat-bubble { padding: 11px 15px; border-radius: 14px; font-size: 14px; line-height: 1.68; }
.chat-msg-user .chat-bubble { background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(139,92,246,0.16)); border: 1px solid rgba(99,102,241,0.28); color: var(--text-primary); border-bottom-right-radius: 4px; }
.chat-msg-ai .chat-bubble { background: rgba(10,10,20,0.9); border: 1px solid rgba(99,102,241,0.1); color: #c2c2dc; border-bottom-left-radius: 4px; }
.chat-msg-ai .chat-bubble strong { color: #e6e6f8; }
.chat-msg-ai .chat-bubble code { background: rgba(0,0,0,0.4); padding: 2px 7px; border-radius: 5px; font-size: 12.5px; font-family: 'SF Mono', 'Fira Code', monospace; color: #a5b4fc; border: 1px solid rgba(99,102,241,0.14); }
.chat-msg-ai .chat-bubble pre { background: rgba(0,0,0,0.35); padding: 12px; border-radius: var(--radius-sm); overflow-x: auto; margin: 8px 0; font-size: 13px; }
.chat-msg-ai .chat-bubble pre code { background: none; padding: 0; border: none; color: #c9d1d9; }
.chat-model-tag { font-size: 10px; color: var(--text-muted); margin-top: 4px; display: block; opacity: 0.8; }
@keyframes chatMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* Typing indicator */
.typing-indicator { display: flex; align-items: center; gap: 4px; padding: 12px 16px; }
.typing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: typingBounce 1.4s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-6px); opacity: 1; } }
/* Input Bar */
.chatbot-input-bar { padding: 16px 20px; border-top: 1px solid var(--border-subtle); background: var(--bg-secondary); }
.chatbot-input-wrap { display: flex; align-items: flex-end; gap: 10px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 8px 8px 8px 16px; transition: var(--transition-fast); }
.chatbot-input-wrap:focus-within { border-color: var(--accent-warm); box-shadow: 0 0 0 3px rgba(99,102,241,0.08); }
.chatbot-input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 14px; resize: none; max-height: 120px; line-height: 1.5; padding: 6px 0; }
.chatbot-input::placeholder { color: var(--text-muted); }
.chatbot-send-btn { width: 38px; height: 38px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--accent-warm), var(--accent-copper)); color: #fff; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); flex-shrink: 0; }
.chatbot-send-btn:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
.chatbot-send-btn:disabled { opacity: 0.4; transform: none; cursor: not-allowed; }
.chatbot-disclaimer { font-size: 11px; color: var(--text-muted); text-align: center; margin-top: 8px; opacity: 0.7; }
/* Chatbot Responsive */
@media (max-width: 768px) {
.chatbot-card { max-height: 600px; }
.chatbot-messages { min-height: 260px; max-height: 340px; }
.chat-msg { max-width: 95%; }
.chat-suggestions { flex-direction: column; }
.chatbot-toolbar { flex-direction: column; align-items: stretch; }
.model-select { width: 100%; }
}
/* Partner Trust Logos */
.trust-logo-partner { opacity: 0.9 !important; color: var(--accent-warm) !important; font-weight: 700 !important; position: relative; }
.trust-logo-partner:hover { opacity: 1 !important; transform: translateY(-2px); }
/* Partner Banner Responsive */
@media (max-width: 768px) {
.partner-content { flex-direction: column; }
.partner-left { flex-direction: column; }
.partner-right { width: 100%; align-items: stretch; }
.partner-cta { justify-content: center; }
.partner-stats { gap: 16px; }
.partner-card { padding: 28px; }
.partner-metrics-grid { grid-template-columns: 1fr; }
.partner-dashboard { padding: 28px; }
}
@media (max-width: 1024px) {
.partner-metrics-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2a2a32; }
::selection { background: rgba(99,102,241,0.3); color: var(--text-primary); }
/* ===== KIMI CHATBOT SHOWCASE SECTION ===== */
.chat-showcase {
padding: 100px 0;
position: relative;
overflow: hidden;
}
.chat-showcase::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(99,102,241,0.05) 0%, transparent 70%);
pointer-events: none;
}
.showcase-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.showcase-kimi-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
border-radius: var(--radius-full);
background: rgba(99,102,241,0.1);
border: 1px solid rgba(99,102,241,0.25);
color: var(--accent-warm);
font-size: 13px;
font-weight: 600;
margin-bottom: 24px;
letter-spacing: 0.01em;
}
.kimi-moon { font-size: 16px; }
.showcase-title {
font-family: var(--font-display);
font-size: clamp(32px, 4vw, 52px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.03em;
margin-bottom: 20px;
}
.showcase-desc {
font-size: 16px;
color: var(--text-secondary);
line-height: 1.7;
margin-bottom: 28px;
max-width: 460px;
}
.showcase-desc strong { color: var(--text-primary); }
.showcase-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 36px;
}
.showcase-pill {
padding: 6px 14px;
border-radius: var(--radius-full);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
white-space: nowrap;
}
.showcase-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; font-size: 15px; font-weight: 700; }
/* Right — chat card preview */
.showcase-right { position: relative; }
.showcase-chat-card {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(99,102,241,0.08);
}
.showcase-chat-header {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
background: var(--bg-elevated);
border-bottom: 1px solid var(--border-subtle);
}
.showcase-live-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #4ade80; box-shadow: 0 0 8px #4ade80;
animation: livePulse 2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes livePulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.showcase-chat-name { font-weight: 700; font-size: 14px; font-family: var(--font-display); }
.showcase-chat-status {
margin-left: auto; font-size: 11px; padding: 2px 10px;
border-radius: var(--radius-full); background: rgba(74,222,128,0.12);
color: #4ade80; font-weight: 600; letter-spacing: 0.04em;
}
.showcase-chat-body { padding: 24px 20px; display: flex; flex-direction: column; gap: 16px; }
.sc-msg { display: flex; align-items: flex-start; gap: 10px; }
.sc-msg-user { flex-direction: row-reverse; }
.sc-avatar {
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 16px; flex-shrink: 0; background: var(--bg-elevated);
}
.sc-avatar-ai { background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.2); }
.sc-bubble { padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; max-width: 85%; }
.sc-msg-user .sc-bubble {
background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.2);
color: var(--text-primary); border-radius: 14px 14px 4px 14px;
}
.sc-bubble-ai {
background: var(--bg-elevated); border: 1px solid var(--border-subtle);
color: var(--text-secondary); border-radius: 14px 14px 14px 4px;
}
.sc-bubble-ai strong { color: var(--accent-warm); }
.sc-typing { display: flex; align-items: center; gap: 10px; }
.sc-typing-dots {
display: flex; gap: 5px; padding: 12px 16px;
background: var(--bg-elevated); border-radius: 14px 14px 14px 4px;
border: 1px solid var(--border-subtle);
}
.sc-typing-dots span {
width: 7px; height: 7px; border-radius: 50%;
background: var(--accent-warm); opacity: 0.4;
animation: typingBounce 1.2s ease-in-out infinite;
}
.sc-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.sc-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0);opacity:0.4;} 30%{transform:translateY(-5px);opacity:1;} }
.showcase-chat-footer {
display: flex; align-items: center; gap: 12px; padding: 14px 20px;
border-top: 1px solid var(--border-subtle); background: var(--bg-secondary);
}
.showcase-input-fake {
flex: 1; padding: 10px 14px; background: var(--bg-elevated);
border: 1px solid var(--border-subtle); border-radius: var(--radius-full);
font-size: 13px; color: var(--text-muted); cursor: pointer;
}
.showcase-send-btn {
width: 36px; height: 36px; border-radius: 50%; background: var(--accent-warm);
display: flex; align-items: center; justify-content: center;
color: #fff; flex-shrink: 0; transition: var(--transition-fast);
}
.showcase-send-btn:hover { background: var(--accent-copper); transform: scale(1.08); }
.showcase-glow-1 {
position: absolute; width: 300px; height: 300px; border-radius: 50%;
background: radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%);
top: -80px; right: -60px; pointer-events: none; filter: blur(40px); z-index: -1;
}
.showcase-glow-2 {
position: absolute; width: 200px; height: 200px; border-radius: 50%;
background: radial-gradient(circle, rgba(56,189,248,0.1) 0%, transparent 70%);
bottom: -40px; left: 20px; pointer-events: none; filter: blur(30px); z-index: -1;
}
@media (max-width: 900px) {
.showcase-inner { grid-template-columns: 1fr; gap: 40px; }
.showcase-right { display: none; }
}
@media (max-width: 640px) {
.chat-showcase { padding: 64px 0; }
.showcase-pills { gap: 8px; }
}
/* ===== SCROLL PROGRESS BAR ===== */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 2px;
background: linear-gradient(90deg, var(--accent-copper), var(--accent-warm), var(--accent-gold));
background-size: 200% 100%;
z-index: 10001;
box-shadow: 0 0 10px rgba(99,102,241,0.7), 0 0 20px rgba(99,102,241,0.3);
transition: width 0.08s linear;
animation: progressShimmer 2.5s linear infinite;
pointer-events: none;
}
@keyframes progressShimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ===== CUSTOM CURSOR ===== */
.cursor-ring {
position: fixed;
width: 38px;
height: 38px;
border: 1.5px solid rgba(99,102,241,0.55);
border-radius: 50%;
pointer-events: none;
z-index: 100000;
top: 0;
left: 0;
will-change: transform;
transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, background 0.25s ease, opacity 0.3s ease;
}
.cursor-dot {
position: fixed;
width: 5px;
height: 5px;
background: var(--accent-warm);
border-radius: 50%;
pointer-events: none;
z-index: 100000;
top: 0;
left: 0;
will-change: transform;
box-shadow: 0 0 8px var(--accent-warm), 0 0 16px rgba(99,102,241,0.4);
transition: width 0.2s ease, height 0.2s ease, opacity 0.3s ease, background 0.2s ease;
}
body.cursor-on-interactive .cursor-ring {
width: 52px;
height: 52px;
border-color: rgba(99,102,241,0.85);
background: rgba(99,102,241,0.07);
}
body.cursor-on-interactive .cursor-dot {
width: 3px;
height: 3px;
background: var(--accent-gold);
}
body.cursor-clicking .cursor-ring {
width: 28px;
height: 28px;
border-color: rgba(99,102,241,1);
background: rgba(99,102,241,0.12);
}
/* Hide custom cursor on touch / mobile */
@media (pointer: coarse) {
.cursor-ring, .cursor-dot { display: none !important; }
}
/* Hide native cursor on desktop if custom cursor active */
body.custom-cursor-active * { cursor: none !important; }
/* ===== HERO PARTICLE CANVAS ===== */
.hero-particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
/* Ensure hero stacks correctly */
.hero { position: relative; overflow: hidden; }
.hero-container { position: relative; z-index: 1; }
/* ===== MOBILE OVERHAUL ===== */
/* ---------- Nav Mobile ---------- */
@media (max-width: 768px) {
.navbar { padding: 8px 0; }
.nav-container { margin: 0 14px; padding: 6px 6px 6px 14px; border-radius: 18px; }
.nav-cta { padding: 8px 14px; font-size: 13px; }
.nav-search-btn, .nav-fav-btn { width: 34px; height: 34px; }
}
/* ---------- Hero Mobile ---------- */
@media (max-width: 768px) {
.hero { padding: 110px 0 48px; min-height: 100svh; display: flex; align-items: center; }
.hero-container { width: 100%; }
.hero-title { font-size: clamp(30px, 9vw, 44px); line-height: 1.12; margin-bottom: 14px; }
.hero-subtitle { font-size: 15px; line-height: 1.65; margin-bottom: 28px; }
.hero-badge { font-size: 12px; padding: 7px 14px; margin-bottom: 20px; }
.hero-actions { gap: 10px; margin-bottom: 48px; }
.hero-actions .btn-primary, .hero-actions .btn-secondary { padding: 14px 20px; font-size: 15px; border-radius: 14px; }
.trust-bar { margin-top: 32px; gap: 12px; }
.trust-logos { gap: 8px; flex-wrap: wrap; justify-content: center; }
.trust-logo { font-size: 12px; padding: 4px 10px; }
}
@media (max-width: 480px) {
.hero { padding: 100px 0 40px; }
.hero-title { font-size: 28px; }
.hero-highlight { display: block; }
.hero-visual { display: none; }
.trust-bar { display: none; }
}
/* ---------- Showcase Section Mobile ---------- */
@media (max-width: 900px) {
.chat-showcase { padding: 64px 0; }
.showcase-inner { grid-template-columns: 1fr; gap: 36px; }
.showcase-right { display: none; }
.showcase-title { font-size: clamp(28px, 7vw, 40px); }
}
@media (max-width: 480px) {
.chat-showcase { padding: 48px 0; }
.showcase-pills { gap: 8px; }
.showcase-pill { font-size: 12px; padding: 5px 12px; }
.showcase-cta-btn { width: 100%; justify-content: center; }
}
/* ---------- Filter Bar Mobile (Horizontal Scroll) ---------- */
@media (max-width: 768px) {
.filter-bar { gap: 12px; }
.filter-tabs {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 6px;
gap: 6px;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab { flex-shrink: 0; white-space: nowrap; padding: 8px 14px; font-size: 13px; border-radius: 10px; }
.filter-controls { width: 100%; justify-content: space-between; }
.results-count { font-size: 12px; }
}
/* ---------- Tool Cards Mobile ---------- */
@media (max-width: 480px) {
.tool-card { padding: 16px; border-radius: 16px; }
.card-header { gap: 10px; margin-bottom: 10px; }
.card-icon { width: 38px; height: 38px; font-size: 20px; border-radius: 10px; }
.card-name { font-size: 15px; }
.card-desc { font-size: 13px; -webkit-line-clamp: 2; }
.card-tags { gap: 4px; }
.card-tag { font-size: 10px; padding: 2px 8px; }
.card-rating { font-size: 12px; }
.card-footer { gap: 8px; }
}
/* ---------- Chatbot Mobile — Full Overhaul ---------- */
@media (max-width: 768px) {
.chatbot-section { padding: 24px 0 60px; }
.chatbot-card { max-height: none; border-radius: 20px; }
.chatbot-toolbar { padding: 12px 14px; gap: 8px; }
.model-picker { flex-direction: column; align-items: flex-start; gap: 6px; }
.model-label { font-size: 11px; }
.model-select { width: 100%; min-width: unset; font-size: 13px; padding: 8px 12px; border-radius: 10px; }
.chatbot-actions-bar { width: 100%; justify-content: space-between; }
.chatbot-messages { min-height: 300px; max-height: 420px; padding: 16px; gap: 12px; }
.chat-msg { max-width: 92%; }
.chat-bubble { font-size: 14px; padding: 10px 14px; }
.chat-welcome { padding: 28px 16px; }
.chat-welcome h3 { font-size: 18px; }
.chat-welcome p { font-size: 13px; }
.chat-suggestions { flex-direction: column; gap: 6px; width: 100%; max-width: 340px; }
.chat-suggestion { text-align: left; padding: 10px 14px; border-radius: 12px; font-size: 13px; }
.chatbot-input-bar { padding: 12px 14px; }
.chatbot-input { font-size: 16px; /* prevent iOS zoom */ }
.chatbot-send-btn { width: 42px; height: 42px; border-radius: 12px; }
.chatbot-disclaimer { font-size: 10px; }
}
@media (max-width: 480px) {
.chatbot-card { border-radius: 16px; }
.chatbot-messages { min-height: 260px; max-height: 360px; }
.chat-msg { max-width: 100%; }
.chat-avatar { width: 28px; height: 28px; font-size: 14px; }
}
/* ---------- Stats Grid Mobile ---------- */
@media (max-width: 480px) {
.stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; }
.stat-item-live { grid-column: span 2; }
.stat-number { font-size: 32px; }
}
/* ---------- Pricing Mobile ---------- */
@media (max-width: 480px) {
.pricing-card { padding: 24px 20px; }
.pricing-name { font-size: 18px; }
.price-amount { font-size: 36px; }
.pricing-features li { font-size: 13px; }
}
/* ---------- Section Headers Mobile ---------- */
@media (max-width: 768px) {
.section-header { margin-bottom: 32px; }
.section-title { font-size: clamp(26px, 6vw, 40px); }
.section-subtitle { font-size: 14px; }
.section-badge { font-size: 12px; padding: 5px 14px; }
}
/* ---------- Footer Mobile ---------- */
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; gap: 24px; }
footer { padding: 48px 0 24px; }
.footer-brand { margin-bottom: 8px; }
.footer-col h4 { font-size: 13px; margin-bottom: 10px; }
.footer-col a { font-size: 13px; }
}
/* ---------- CTA / Newsletter Mobile ---------- */
@media (max-width: 480px) {
.cta-card, .newsletter-card { padding: 36px 20px; border-radius: 20px; }
.cta-title { font-size: 24px; }
.newsletter-input-wrap { flex-direction: column; gap: 10px; }
.newsletter-input-wrap input { width: 100%; border-radius: 12px; }
.newsletter-input-wrap button { width: 100%; border-radius: 12px; justify-content: center; }
}
/* ---------- Mobile Drawer Improvements ---------- */
@media (max-width: 768px) {
.mobile-drawer { width: min(88vw, 320px); border-radius: 0 20px 20px 0; }
.drawer-link { padding: 14px 20px; font-size: 15px; border-radius: 12px; margin: 2px 0; }
.drawer-header { padding: 20px; }
.drawer-footer { padding: 20px; }
}
/* ---------- Modals Mobile ---------- */
@media (max-width: 640px) {
.search-modal-content { margin: 0 12px; border-radius: 18px; max-width: 100%; }
.tool-modal-content { margin: 0; border-radius: 20px 20px 0 0; max-width: 100%; align-self: flex-end; max-height: 90svh; overflow-y: auto; }
.tool-modal { align-items: flex-end; }
.submit-modal-content { margin: 0; border-radius: 20px 20px 0 0; max-height: 92svh; overflow-y: auto; align-self: flex-end; }
.submit-modal { align-items: flex-end; }
}
/* ---------- Scrollbar / General Touch Polish ---------- */
@media (max-width: 768px) {
.section-container { padding: 0 16px; }
/* Larger tap targets for interactive elements */
.filter-tab, .sort-btn, .view-btn { min-height: 40px; }
/* Smooth momentum scrolling everywhere */
* { -webkit-overflow-scrolling: touch; }
}
/* ===== 3D CARD TILT ===== */
.tool-card {
transform-style: preserve-3d;
will-change: transform;
}
.tool-card.tilt-active {
transition: transform 0.08s ease !important;
}
.tool-card.tilt-reset {
transition: transform 0.55s cubic-bezier(0.23,1,0.32,1), background 0.55s ease !important;
}
/* ===== MAGNETIC BUTTONS ===== */
.btn-primary, .nav-cta {
will-change: transform;
}
.btn-primary.mag-active, .nav-cta.mag-active {
transition: transform 0.08s ease !important;
}
.btn-primary.mag-reset, .nav-cta.mag-reset {
transition: transform 0.45s cubic-bezier(0.23,1,0.32,1) !important;
}
/* ===== TEXT SCRAMBLE ===== */
.hero-title .scramble-char {
display: inline;
color: var(--accent-warm);
opacity: 0.6;
}
/* ===== SPOTLIGHT GLOW ON CARDS ===== */
.tool-card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
opacity: 0;
background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(99,102,241,0.08) 0%, transparent 60%);
transition: opacity 0.3s ease;
pointer-events: none;
}
.tool-card:hover::after {
opacity: 1;
}
/* ===== PRAYAAS AI — THINKING BLOCK + STREAMING ===== */
/* Streaming cursor */
.stream-cursor {
display: inline-block;
width: 2px;
height: 1em;
background: var(--accent-warm);
margin-left: 2px;
vertical-align: middle;
animation: cursorBlink 0.8s ease-in-out infinite;
border-radius: 1px;
}
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }
/* ── Thinking block (redesigned) ── */
.thinking-block {
margin-bottom: 12px;
border: 1px solid rgba(139,92,246,0.3);
border-radius: 10px;
overflow: hidden;
background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(139,92,246,0.03) 100%);
font-size: 13px;
animation: thinkGlow 2.2s ease-in-out infinite;
transition: border-color 0.4s, box-shadow 0.4s;
}
@keyframes thinkGlow {
0%, 100% { box-shadow: 0 0 0 1px rgba(139,92,246,0.08); }
50% { box-shadow: 0 0 0 2px rgba(139,92,246,0.18), 0 4px 18px rgba(99,102,241,0.1); }
}
.thinking-block.done {
border-color: rgba(99,102,241,0.15);
background: rgba(99,102,241,0.03);
animation: none;
box-shadow: none;
}
.thinking-header {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
cursor: pointer;
user-select: none;
color: var(--text-muted);
transition: background 0.15s;
}
.thinking-header:hover { background: rgba(99,102,241,0.06); }
/* CSS spinner — replaces ⟳ emoji */
.thinking-spinner {
width: 13px; height: 13px;
border: 2px solid rgba(139,92,246,0.25);
border-top-color: #a78bfa;
border-radius: 50%;
animation: tSpin 0.75s linear infinite;
flex-shrink: 0;
}
@keyframes tSpin { to { transform: rotate(360deg); } }
.thinking-block.done .thinking-spinner { display: none; }
/* Checkmark shown when done */
.thinking-done-icon { display: none; color: #4ade80; flex-shrink: 0; }
.thinking-block.done .thinking-done-icon { display: flex; }
.thinking-label { font-weight: 600; font-size: 12px; letter-spacing: 0.02em; color: #a78bfa; }
.thinking-block.done .thinking-label { color: var(--text-muted); font-weight: 500; }
.thinking-chars { margin-left: auto; font-size: 10.5px; color: var(--text-muted); opacity: 0.7; }
.thinking-chevron { color: var(--text-muted); transition: transform 0.22s; flex-shrink: 0; opacity: 0.6; }
.thinking-block.open .thinking-chevron { transform: rotate(180deg); }
/* Smooth slide-open via max-height transition */
.thinking-content {
max-height: 0;
overflow: hidden;
padding: 0 14px;
font-size: 12px;
line-height: 1.75;
color: rgba(180,180,215,0.65);
white-space: pre-wrap;
word-break: break-word;
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
border-top: 0px solid rgba(99,102,241,0.1);
transition: max-height 0.32s ease, padding 0.22s, border-top-width 0.22s;
}
.thinking-block.open .thinking-content {
max-height: 280px;
overflow-y: auto;
padding: 10px 14px;
border-top-width: 1px;
}
/* ── Header model picker ── */
.pm-model-chip {
cursor: pointer;
position: relative;
}
.pm-model-chip::after {
content: '▾';
font-size: 9px;
margin-left: 3px;
opacity: 0.6;
}
.header-model-menu {
display: none;
position: absolute;
top: calc(100% + 6px);
left: 0;
background: #0e0e1a;
border: 1px solid rgba(99,102,241,0.22);
border-radius: 10px;
padding: 4px;
z-index: 400;
min-width: 170px;
box-shadow: 0 8px 28px rgba(0,0,0,0.55);
white-space: nowrap;
}
.header-model-menu.open { display: block; }
.hm-group { padding: 3px 0; }
.hm-group + .hm-group { border-top: 1px solid rgba(99,102,241,0.08); margin-top: 2px; padding-top: 5px; }
.hm-grouplabel {
display: block; padding: 2px 8px 4px;
font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em;
text-transform: uppercase; color: var(--text-muted);
}
.hm-opt {
display: block; width: 100%; text-align: left;
padding: 6px 10px; font-size: 12.5px; font-weight: 500;
color: var(--text-secondary); border-radius: 6px;
background: transparent; border: none; font-family: inherit;
cursor: pointer; transition: background 0.1s, color 0.1s;
}
.hm-opt:hover { background: rgba(99,102,241,0.12); color: var(--text-primary); }
.hm-opt.active { background: rgba(99,102,241,0.16); color: var(--accent-warm); font-weight: 600; }
/* AI avatar — already styled in bubble section above */
/* Preloader fill color override */
.preloader-fill { background: linear-gradient(90deg, var(--accent-copper), var(--accent-warm)); }
/* Selection color override */
::selection { background: rgba(99,102,241,0.3); color: var(--text-primary); }
/* ===================================================================
PRAYAAS APP — Three-Panel Chat UI
=================================================================== */
/* ── Container ── */
.prayaas-app {
display: grid;
grid-template-columns: 200px 1fr 240px;
grid-template-rows: 620px;
border-radius: 16px;
overflow: hidden;
background: #09091a;
border: 1px solid rgba(99,102,241,0.16);
box-shadow: 0 0 0 1px rgba(99,102,241,0.06) inset, 0 32px 64px rgba(0,0,0,0.5);
position: relative;
}
/* ── LEFT SIDEBAR ── */
.prayaas-sidebar {
background: linear-gradient(180deg, #07070f 0%, #0a0a1a 100%);
border-right: 1px solid rgba(99,102,241,0.1);
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
transition: transform 0.22s cubic-bezier(0.4,0,0.2,1);
}
.ps-logo {
display: flex;
align-items: center;
gap: 10px;
padding: 18px 16px 13px;
border-bottom: 1px solid rgba(99,102,241,0.08);
}
.ps-logo-icon {
font-size: 18px;
color: var(--accent-warm);
filter: drop-shadow(0 0 6px rgba(129,140,248,0.6));
}
.ps-logo-text {
font-size: 15px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
}
/* Nav items */
.ps-nav {
display: flex;
flex-direction: column;
gap: 2px;
padding: 10px 8px;
}
.ps-nav-item {
display: flex;
align-items: center;
gap: 9px;
padding: 9px 11px;
border-radius: 9px;
border: none;
background: transparent;
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.12s, color 0.12s;
text-align: left;
width: 100%;
position: relative;
}
.ps-nav-item:hover {
background: rgba(99,102,241,0.08);
color: var(--text-secondary);
}
.ps-nav-item.active {
background: rgba(99,102,241,0.14);
color: var(--accent-warm);
font-weight: 600;
}
.ps-nav-item.active svg { stroke: var(--accent-warm); }
.ps-nav-item svg { flex-shrink: 0; opacity: 0.7; transition: opacity 0.12s; }
.ps-nav-item.active svg, .ps-nav-item:hover svg { opacity: 1; }
.ps-badge {
margin-left: auto;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
padding: 2px 6px;
border-radius: 4px;
background: linear-gradient(135deg, rgba(99,102,241,0.3), rgba(139,92,246,0.3));
color: var(--accent-warm);
border: 1px solid rgba(99,102,241,0.3);
text-transform: uppercase;
}
/* Mode-specific active colors */
.ps-nav-item[data-mode="medical"].active {
background: rgba(16,185,129,0.12);
color: #34d399;
}
.ps-nav-item[data-mode="medical"].active svg { stroke: #34d399; }
.ps-nav-item[data-mode="medical"].active .ps-badge {
background: rgba(16,185,129,0.2);
color: #34d399;
border-color: rgba(16,185,129,0.3);
}
.ps-nav-item[data-mode="engineering"].active {
background: rgba(56,189,248,0.1);
color: var(--accent-gold);
}
.ps-nav-item[data-mode="engineering"].active svg { stroke: var(--accent-gold); }
.ps-divider {
height: 1px;
background: rgba(99,102,241,0.08);
margin: 4px 10px;
}
/* Model selector in sidebar */
.ps-model-section { padding: 12px 12px 8px; }
.ps-section-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 6px;
}
/* Custom model dropdown */
.model-dd { position: relative; width: 100%; }
.model-dd-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
padding: 7px 10px;
background: rgba(99,102,241,0.06);
border: 1px solid rgba(99,102,241,0.15);
border-radius: 8px;
color: var(--text-secondary);
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
text-align: left;
font-family: inherit;
}
.model-dd-btn:hover,
.model-dd.open .model-dd-btn {
background: rgba(99,102,241,0.13);
border-color: rgba(99,102,241,0.32);
color: var(--text-primary);
}
.model-dd-selected { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-dd-arrow { flex-shrink: 0; color: var(--text-muted); transition: transform 0.18s; }
.model-dd.open .model-dd-arrow { transform: rotate(180deg); }
.model-dd-menu {
display: none;
position: absolute;
top: calc(100% + 5px);
left: 0;
right: 0;
background: #0e0e1a;
border: 1px solid rgba(99,102,241,0.22);
border-radius: 10px;
padding: 4px;
z-index: 300;
box-shadow: 0 8px 28px rgba(0,0,0,0.55);
}
.model-dd.open .model-dd-menu { display: block; }
.model-dd-group { padding: 3px 0; }
.model-dd-group + .model-dd-group { border-top: 1px solid rgba(99,102,241,0.08); margin-top: 2px; padding-top: 5px; }
.model-dd-grouplabel {
display: block;
padding: 2px 8px 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--text-muted);
}
.model-dd-opt {
display: block;
width: 100%;
text-align: left;
padding: 6px 10px;
font-size: 12.5px;
font-weight: 500;
color: var(--text-secondary);
border-radius: 6px;
cursor: pointer;
background: transparent;
border: none;
font-family: inherit;
transition: background 0.1s, color 0.1s;
}
.model-dd-opt:hover { background: rgba(99,102,241,0.12); color: var(--text-primary); }
.model-dd-opt.active { background: rgba(99,102,241,0.16); color: var(--accent-warm); font-weight: 600; }
/* Sidebar footer */
.ps-sidebar-footer {
margin-top: auto;
padding: 12px 10px;
border-top: 1px solid rgba(99,102,241,0.08);
}
.ps-footer-btn {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 9px 12px;
background: transparent;
border: none;
border-radius: 8px;
color: var(--text-muted);
font-size: 13px;
cursor: pointer;
transition: all 0.15s;
}
.ps-footer-btn:hover { background: rgba(99,102,241,0.08); color: var(--text-primary); }
/* ── MAIN CHAT AREA ── */
.prayaas-main {
display: flex;
flex-direction: column;
background: #0d0d1a;
overflow: visible; /* not hidden — allows header model dropdown to escape */
min-width: 0;
}
.pm-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
border-bottom: 1px solid rgba(99,102,241,0.1);
background: #0b0b16;
flex-shrink: 0;
/* Create stacking context so model dropdown paints above the messages area */
position: relative;
z-index: 10;
}
.pm-header-left { display: flex; align-items: center; gap: 12px; }
.pm-header-right { display: flex; align-items: center; gap: 10px; }
.pm-sidebar-toggle {
display: none;
background: none;
border: 1px solid rgba(99,102,241,0.15);
border-radius: 8px;
padding: 7px;
color: var(--text-muted);
cursor: pointer;
transition: all 0.15s;
}
.pm-sidebar-toggle:hover { background: rgba(99,102,241,0.1); color: var(--text-primary); }
.pm-mode-info { display: flex; align-items: center; gap: 8px; }
.pm-mode-icon { font-size: 18px; }
.pm-mode-title {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
/* Messages area */
.prayaas-main .chatbot-messages {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
scroll-behavior: smooth;
max-height: none; /* override the 440px global cap — fullscreen needs full height */
min-height: 0; /* allow flex shrink */
}
/* Input area */
.pm-input-area {
padding: 12px 18px 14px;
border-top: 1px solid rgba(99,102,241,0.08);
background: #0b0b16;
flex-shrink: 0;
}
.pm-input-area .chatbot-input-wrap { margin-bottom: 0; }
.pm-input-area .chatbot-disclaimer { margin-top: 8px; }
/* ── RIGHT HISTORY PANEL ── */
.prayaas-history {
background: #08080f;
border-left: 1px solid rgba(99,102,241,0.1);
display: flex;
flex-direction: column;
overflow: hidden;
transition: transform 0.25s ease;
}
.ph-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 16px 12px;
border-bottom: 1px solid rgba(99,102,241,0.08);
flex-shrink: 0;
}
.ph-title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.ph-count {
font-size: 11px;
color: var(--text-muted);
background: rgba(99,102,241,0.1);
padding: 2px 7px;
border-radius: 20px;
}
.ph-list {
flex: 1;
overflow-y: auto;
padding: 8px;
}
.ph-empty {
text-align: center;
color: var(--text-muted);
font-size: 12px;
line-height: 1.6;
padding: 24px 12px;
}
.ph-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 10px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
margin-bottom: 2px;
}
.ph-item:hover { background: rgba(99,102,241,0.08); }
.ph-item-icon {
font-size: 15px;
flex-shrink: 0;
margin-top: 1px;
}
.ph-item-body { min-width: 0; flex: 1; }
.ph-item-preview {
display: block;
font-size: 12px;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
}
.ph-item-meta {
display: block;
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
.ph-footer {
padding: 10px 12px;
border-top: 1px solid rgba(99,102,241,0.08);
flex-shrink: 0;
}
.ph-clear-btn {
display: flex;
align-items: center;
gap: 6px;
background: transparent;
border: none;
color: var(--text-muted);
font-size: 12px;
cursor: pointer;
padding: 6px 8px;
border-radius: 6px;
transition: all 0.15s;
width: 100%;
}
.ph-clear-btn:hover { color: #f87171; background: rgba(248,113,113,0.08); }
/* ── PRAYAAS INPUT REFINEMENTS ── */
.pm-input-area .chatbot-input-wrap {
background: rgba(6,6,16,0.85);
border: 1px solid rgba(99,102,241,0.18);
border-radius: 12px;
}
.pm-input-area .chatbot-input-wrap:focus-within {
border-color: rgba(99,102,241,0.38);
box-shadow: 0 0 0 3px rgba(99,102,241,0.07);
}
.pm-input-area .chatbot-send-btn {
width: 36px;
height: 36px;
border-radius: 9px;
background: linear-gradient(135deg, #6366f1, #7c3aed);
box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}
.pm-input-area .chatbot-send-btn:hover {
box-shadow: 0 4px 14px rgba(99,102,241,0.45);
transform: scale(1.04);
}
/* ── THIN SCROLLBAR for chat messages ── */
.prayaas-main .chatbot-messages::-webkit-scrollbar { width: 4px; }
.prayaas-main .chatbot-messages::-webkit-scrollbar-track { background: transparent; }
.prayaas-main .chatbot-messages::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.22); border-radius: 2px; }
.prayaas-main .chatbot-messages::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.38); }
/* ── CODE BLOCKS ── */
.code-block {
background: #060610;
border: 1px solid rgba(99,102,241,0.15);
border-radius: 10px;
margin: 10px 0;
overflow: hidden;
}
.code-block-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 14px;
background: rgba(99,102,241,0.07);
border-bottom: 1px solid rgba(99,102,241,0.1);
}
.code-lang {
font-size: 11px;
font-family: monospace;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--accent-warm);
text-transform: uppercase;
}
.copy-code-btn {
display: flex;
align-items: center;
gap: 5px;
font-size: 11.5px;
color: var(--text-muted);
background: none;
border: 1px solid rgba(99,102,241,0.2);
border-radius: 5px;
padding: 3px 9px;
cursor: pointer;
transition: all 0.15s;
font-family: inherit;
}
.copy-code-btn:hover {
color: var(--accent-warm);
border-color: rgba(99,102,241,0.4);
background: rgba(99,102,241,0.08);
}
.code-block pre {
margin: 0;
padding: 14px 16px;
overflow-x: auto;
font-size: 13px;
line-height: 1.65;
color: #c9d1d9;
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}
.code-block pre code { background: none; padding: 0; border: none; font-size: inherit; color: inherit; }
/* Medical source styling */
.chat-bubble h3 { font-size: 13px; color: var(--accent-warm); margin: 14px 0 6px; font-weight: 700; }
.chat-bubble h4 { font-size: 12.5px; color: var(--accent-gold); margin: 10px 0 4px; font-weight: 600; }
.chat-bubble h2 { font-size: 14px; color: var(--text-primary); margin: 16px 0 6px; font-weight: 700; }
.chat-bubble hr { border: none; border-top: 1px solid rgba(99,102,241,0.15); margin: 12px 0; }
.chat-bubble ul { padding-left: 18px; margin: 6px 0; }
.chat-bubble ol { padding-left: 20px; margin: 6px 0; list-style: decimal; }
.chat-bubble li { margin-bottom: 4px; }
.chat-bubble ul br, .chat-bubble ol br { display: none; } /* suppress stray
between list items */
.chat-bubble strong { color: var(--text-primary); }
/* ── Override mobile max-height caps for prayaas (they don't apply here) ── */
@media (max-width: 768px) { .prayaas-main .chatbot-messages { max-height: none; min-height: 0; } }
@media (max-width: 480px) { .prayaas-main .chatbot-messages { max-height: none; min-height: 0; } }
/* ── MOBILE RESPONSIVE ── */
@media (max-width: 960px) {
.prayaas-app {
grid-template-columns: 1fr;
grid-template-rows: auto;
height: auto;
min-height: 580px;
position: relative;
}
.prayaas-sidebar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 220px;
z-index: 50;
transform: translateX(-100%);
}
.prayaas-sidebar.open {
transform: translateX(0);
box-shadow: 6px 0 24px rgba(0,0,0,0.5);
}
.prayaas-history {
display: none;
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 250px;
z-index: 50;
}
.prayaas-history.open {
display: flex;
box-shadow: -6px 0 24px rgba(0,0,0,0.5);
}
.pm-sidebar-toggle { display: flex; }
.prayaas-main {
grid-column: 1;
min-height: 520px;
}
.prayaas-app { grid-template-rows: 560px; }
}
/* ===================================================================
PRAYAAS HOMEPAGE IMPROVEMENTS — New UI Elements
=================================================================== */
/* ── Sidebar nav descriptions ── */
.ps-nav-item { align-items: flex-start; }
.ps-nav-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.ps-nav-label { font-size: 13px; font-weight: 500; line-height: 1.3; }
.ps-nav-desc { font-size: 10.5px; color: var(--text-muted); line-height: 1.3; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.12s; }
.ps-nav-item.active .ps-nav-desc { color: inherit; opacity: 0.7; }
.ps-nav-item svg { margin-top: 1px; flex-shrink: 0; }
.ps-nav-item .ps-badge { align-self: flex-start; margin-top: 1px; }
/* ── Active model chip in header ── */
.pm-model-chip {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 20px;
background: rgba(99,102,241,0.1);
border: 1px solid rgba(99,102,241,0.22);
color: var(--accent-warm);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.01em;
white-space: nowrap;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pm-model-chip.mode-medical { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.25); color: #34d399; }
.pm-model-chip.mode-engineering { background: rgba(56,189,248,0.09); border-color: rgba(56,189,248,0.22); color: var(--accent-gold); }
/* model chip always visible — mobile redesign handles sizing below */
/* ── Char counter ── */
.chat-char-counter {
font-size: 10px;
color: var(--text-muted);
white-space: nowrap;
align-self: flex-end;
padding-bottom: 10px;
padding-right: 4px;
opacity: 0.5;
transition: color 0.15s, opacity 0.15s;
font-variant-numeric: tabular-nums;
display: none; /* hidden until user starts typing */
}
.chat-char-counter.visible { display: block; }
.chat-char-counter.warn { color: #fbbf24; opacity: 1; }
.chat-char-counter.danger { color: var(--red); opacity: 1; }
/* ── Online indicator in navbar ── */
.nav-online-pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 10px;
border-radius: 20px;
background: rgba(74,222,128,0.08);
border: 1px solid rgba(74,222,128,0.18);
font-size: 11.5px;
font-weight: 600;
color: #4ade80;
letter-spacing: 0.01em;
}
.nav-online-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 6px rgba(74,222,128,0.55);
animation: onlinePulse 2.5s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes onlinePulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}
/* ── Markdown tables in chat bubbles ── */
.chat-bubble .md-table-wrap { overflow-x: auto; margin: 10px 0; border-radius: 8px; border: 1px solid rgba(99,102,241,0.12); }
.chat-bubble table { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.5; }
.chat-bubble th { background: rgba(99,102,241,0.12); color: var(--accent-warm); font-weight: 700; padding: 7px 12px; text-align: left; border-bottom: 1px solid rgba(99,102,241,0.18); white-space: nowrap; }
.chat-bubble td { padding: 6px 12px; color: #c2c2dc; border-bottom: 1px solid rgba(99,102,241,0.07); vertical-align: top; }
.chat-bubble tr:last-child td { border-bottom: none; }
.chat-bubble tr:nth-child(even) td { background: rgba(99,102,241,0.04); }
/* ── Markdown links in chat bubbles ── */
.chat-bubble a.md-link { color: var(--accent-warm); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(129,140,248,0.35); transition: color 0.15s; }
.chat-bubble a.md-link:hover { color: #fff; text-decoration-color: rgba(255,255,255,0.4); }
/* ── Highlight.js overrides — blend with dark theme ── */
.hljs { background: transparent !important; padding: 0 !important; font-size: 12.5px !important; }
.code-block pre { background: #0d0d1a; border-radius: 0 0 8px 8px; padding: 14px 16px; overflow-x: auto; }
/* ── Copy response button ── */
.msg-actions {
display: flex;
align-items: center;
gap: 6px;
margin-top: 6px;
opacity: 0;
transition: opacity 0.15s;
}
.chat-msg-ai:hover .msg-actions { opacity: 1; }
.msg-copy-btn {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 6px;
background: transparent;
border: 1px solid rgba(99,102,241,0.15);
color: var(--text-muted);
font-size: 11px;
font-weight: 500;
cursor: pointer;
font-family: inherit;
transition: all 0.15s;
}
.msg-copy-btn:hover { background: rgba(99,102,241,0.1); color: var(--text-primary); border-color: rgba(99,102,241,0.3); }
.msg-copy-btn.copied { color: #4ade80; border-color: rgba(74,222,128,0.3); }
/* ── Stop generation button ── */
.chatbot-stop-btn {
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(239,68,68,0.15);
border: 1px solid rgba(239,68,68,0.3);
color: #f87171;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: background 0.15s;
}
.chatbot-stop-btn:hover { background: rgba(239,68,68,0.25); }
/* ── Scroll-to-bottom FAB ── */
.scroll-to-bottom {
position: absolute;
bottom: 12px;
right: 16px;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(99,102,241,0.18);
border: 1px solid rgba(99,102,241,0.3);
color: var(--accent-warm);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: background 0.15s, transform 0.15s;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.scroll-to-bottom:hover { background: rgba(99,102,241,0.3); transform: translateY(-1px); }
/* ══════════════════════════════════════════════
MOBILE FULL REDESIGN — phones (≤ 768px)
══════════════════════════════════════════════ */
/* Base: elements hidden on desktop */
.pm-bottom-tabs { display: none; }
.sidebar-backdrop { display: none; }
@media (max-width: 768px) {
/* ── Navbar hidden — chat takes full screen ── */
.chatbot-page-nav { display: none !important; }
/* ── Full-screen container ── */
.chatbot-fullpage {
position: fixed;
inset: 0;
z-index: 1;
padding: 0;
overflow: hidden;
}
/* ── App: flex column filling the viewport ── */
.prayaas-app {
display: flex !important;
flex-direction: column;
width: 100%;
height: 100dvh;
height: 100vh; /* fallback for older Safari */
grid-template-columns: unset;
grid-template-rows: unset;
border-radius: 0;
border: none;
min-height: unset;
box-shadow: none;
}
/* ── Sidebar: full-height slide-in drawer ── */
.prayaas-sidebar {
position: fixed !important;
left: 0;
top: 0;
bottom: 0;
width: 82vw;
max-width: 290px;
height: 100dvh;
height: 100vh;
z-index: 300;
transform: translateX(-100%);
border-radius: 0;
border-right: 1px solid rgba(99,102,241,0.18);
}
.prayaas-sidebar.open {
transform: translateX(0);
box-shadow: 12px 0 50px rgba(0,0,0,0.7);
}
/* ── Backdrop: dims content behind open sidebar ── */
.sidebar-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 299;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s;
}
.sidebar-backdrop.open {
opacity: 1;
pointer-events: auto;
}
/* ── History: hidden on mobile ── */
.prayaas-history { display: none !important; }
/* ── Main: fills all remaining space between header and tabs ── */
/* overflow: visible (not hidden) so the header model dropdown can escape */
.prayaas-main {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
grid-column: unset;
overflow: visible;
}
/* ── Header: compact and touch-friendly ── */
.pm-header { padding: 10px 14px; min-height: 54px; flex-shrink: 0; }
.pm-mode-icon { font-size: 18px; }
.pm-mode-title { font-size: 15px; font-weight: 600; }
.pm-sidebar-toggle { display: flex; }
.chatbot-status { display: none; }
.chatbot-clear-btn { padding: 6px 10px; font-size: 12px; gap: 4px; border-radius: 8px; }
.chatbot-clear-btn svg { width: 11px; height: 11px; }
/* ── Model chip: always visible, compact ── */
.pm-model-chip {
display: inline-flex !important;
font-size: 10px !important;
padding: 3px 9px !important;
max-width: 110px;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Messages area: fills remaining flex space ── */
.prayaas-main .chatbot-messages {
flex: 1;
min-height: 0;
max-height: none;
padding: 14px;
}
/* ── Bubbles: wider on narrow screens ── */
.chat-msg { max-width: 92%; }
.chat-bubble { font-size: 15px; padding: 10px 13px; line-height: 1.65; }
.chat-avatar { width: 28px; height: 28px; font-size: 14px; }
/* Copy button: always visible on touch (no hover state) */
.chat-msg-ai .msg-actions { opacity: 1; }
.msg-copy-btn { font-size: 10px; padding: 3px 7px; }
/* ── Welcome screen ── */
.chat-welcome { padding: 28px 16px; }
.chat-welcome h3 { font-size: 20px; }
.chat-welcome p { font-size: 14px; }
.chat-suggestions { flex-direction: column; gap: 6px; width: 100%; max-width: 100%; }
.chat-suggestion { text-align: left; padding: 12px 14px; font-size: 13.5px; border-radius: 12px; }
/* ── Input: safe-area aware, no iOS zoom ── */
.pm-input-area {
padding: 10px 12px;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
flex-shrink: 0;
}
.chatbot-input { font-size: 16px; } /* 16px prevents iOS auto-zoom */
.chatbot-send-btn,
.chatbot-stop-btn { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; }
.chatbot-disclaimer { font-size: 10px; margin-top: 7px; }
/* ── Bottom mode tab bar ── */
.pm-bottom-tabs {
display: flex;
flex-shrink: 0;
border-top: 1px solid rgba(99,102,241,0.1);
background: #08080f;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.pm-tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 9px 4px 11px;
border: none;
background: none;
color: var(--text-muted);
cursor: pointer;
font-family: inherit;
position: relative;
-webkit-tap-highlight-color: transparent;
transition: color 0.15s;
}
.pm-tab:active { background: rgba(99,102,241,0.08); }
.pm-tab.active { color: var(--accent-warm); }
.pm-tab.active::before {
content: '';
position: absolute;
top: 0; left: 25%; right: 25%;
height: 2px;
background: var(--accent-warm);
border-radius: 0 0 3px 3px;
}
.pm-tab-icon { font-size: 20px; line-height: 1; }
.pm-tab-label { font-size: 10px; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; }
/* ── Thinking block: more compact ── */
.thinking-block { font-size: 12px; margin-bottom: 10px; }
.thinking-label { font-size: 11px; }
.thinking-chars { font-size: 9px; }
.thinking-block.open .thinking-content { max-height: 200px; }
/* Prevent long reasoning lines causing horizontal scroll on mobile */
.thinking-content { overflow-x: hidden; word-break: break-word; }
/* ── Code blocks ── */
.code-block { border-radius: 10px; }
.code-block pre { padding: 10px 12px; }
.hljs { font-size: 12px !important; }
/* ── Header model dropdown: anchor right on small screens ── */
.header-model-menu { left: auto; right: 0; min-width: 160px; }
}
/* Very small phones */
@media (max-width: 380px) {
.pm-header { padding: 8px 10px; }
.pm-mode-title { font-size: 13px; }
.pm-model-chip { max-width: 80px !important; font-size: 9px !important; }
.pm-tab-icon { font-size: 17px; }
.pm-tab-label { font-size: 9px; }
.chat-bubble { font-size: 14px; }
}
/* ── Mobile polish & consistency fixes ── */
@media (max-width: 768px) {
/* dvh AFTER vh so it wins on modern browsers (correct fallback order) */
.prayaas-app { height: 100vh; height: 100dvh; }
.prayaas-sidebar { height: 100vh; height: 100dvh; }
/* Uniform 14px horizontal padding everywhere */
.pm-header { padding: 0 14px; min-height: 54px; align-items: center; }
.prayaas-main .chatbot-messages { padding: 14px; }
.pm-input-area { padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
/* Tighter header gaps so elements fit on 360px screens */
.pm-header-left { gap: 8px; }
.pm-header-right { gap: 8px; }
/* Mode title: truncate long names (e.g. "Medical Research AI") */
.pm-mode-title {
font-size: 14px;
font-weight: 600;
max-width: 130px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Model chip: consistent size, enough room for the ▾ arrow */
.pm-model-chip {
font-size: 10.5px !important;
padding: 3px 8px !important;
max-width: 120px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* Clear button: compact */
.chatbot-clear-btn { padding: 6px 10px; font-size: 12px; }
/* Bottom tabs: slightly bigger label, balanced padding */
.pm-tab { padding: 10px 4px 10px; }
.pm-tab-icon { font-size: 20px; }
.pm-tab-label { font-size: 11px; letter-spacing: 0; }
/* Welcome & suggestions */
.chat-welcome { padding: 32px 16px 24px; }
.chat-welcome h3 { font-size: 20px; margin-bottom: 6px; }
.chat-welcome p { font-size: 14px; margin-bottom: 16px; }
.chat-suggestion { font-size: 14px; padding: 12px 14px; }
/* Chat bubbles */
.chat-bubble { font-size: 15px; line-height: 1.6; padding: 10px 13px; }
.chat-msg { max-width: 92%; }
/* Disclaimer centered */
.chatbot-disclaimer { text-align: center; font-size: 10.5px; }
/* Smooth horizontal scroll in code & tables */
.code-block pre { -webkit-overflow-scrolling: touch; }
.chat-bubble .md-table-wrap { -webkit-overflow-scrolling: touch; }
}
/* Very small phones (SE, Galaxy A-series) */
@media (max-width: 380px) {
.pm-header-left { gap: 6px; }
.pm-header-right { gap: 6px; }
.pm-mode-title { max-width: 72px; font-size: 13px; }
.pm-model-chip { max-width: 88px !important; font-size: 9.5px !important; }
.pm-tab-label { font-size: 10px; }
.chat-bubble { font-size: 14px; padding: 9px 11px; }
}
/* ══════════════════════════════════════════════
MOBILE: Kimi-style clean chat UI
══════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ── Pure black canvas ── */
.chatbot-fullpage,
.prayaas-app,
.prayaas-main,
.prayaas-main .chatbot-messages { background: #000 !important; }
.prayaas-main .chatbot-messages { padding: 16px 14px 8px; }
.pm-header { background: #050508; border-bottom-color: rgba(255,255,255,0.06); }
/* ── AI messages: no bubble — raw text on black ── */
.chat-msg-ai { max-width: 100%; gap: 10px; }
.chat-msg-ai .chat-avatar {
width: 22px; height: 22px; font-size: 12px;
margin-top: 4px; flex-shrink: 0;
background: rgba(99,102,241,0.18);
border-color: rgba(99,102,241,0.22);
}
.chat-msg-ai .chat-bubble {
background: transparent !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
color: rgba(235,235,250,0.92);
font-size: 16px;
line-height: 1.72;
overflow-wrap: break-word;
word-break: break-word;
}
.chat-msg-ai .chat-bubble strong { color: #fff; }
.chat-msg-ai .chat-bubble em { color: rgba(200,200,240,0.85); }
.chat-msg-ai .chat-bubble h2,
.chat-msg-ai .chat-bubble h3,
.chat-msg-ai .chat-bubble h4 { color: rgba(255,255,255,0.95); margin-top: 16px; margin-bottom: 6px; }
.chat-msg-ai .chat-bubble code {
background: rgba(99,102,241,0.14);
border: 1px solid rgba(99,102,241,0.2);
padding: 2px 6px; border-radius: 5px;
font-size: 13px; color: #a5b4fc;
}
.chat-msg-ai .chat-bubble pre {
background: #0d0d1c;
border: 1px solid rgba(99,102,241,0.12);
border-radius: 10px; padding: 12px 14px;
overflow-x: auto; margin: 10px 0;
}
.chat-msg-ai .chat-bubble pre code {
background: none; border: none; padding: 0; color: #c9d1d9;
}
.chat-msg-ai .chat-bubble ul,
.chat-msg-ai .chat-bubble ol { padding-left: 20px; margin: 8px 0; }
.chat-msg-ai .chat-bubble li { margin-bottom: 6px; }
.chat-msg-ai .chat-bubble hr {
border: none; border-top: 1px solid rgba(255,255,255,0.07); margin: 14px 0;
}
/* ── User messages: simple dark pill, no avatar ── */
.chat-msg-user { max-width: 80%; }
.chat-msg-user .chat-avatar { display: none; }
.chat-msg-user .chat-bubble {
background: #18182a;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px 20px 4px 20px;
padding: 10px 16px;
font-size: 15px;
line-height: 1.55;
color: rgba(240,240,255,0.95);
}
/* ── Action row (copy + model tag) ── */
.msg-actions { margin-top: 10px; }
.msg-copy-btn {
color: rgba(255,255,255,0.3);
border-color: rgba(255,255,255,0.09);
font-size: 10px; padding: 3px 8px;
}
.msg-copy-btn:hover { background: rgba(99,102,241,0.1); color: rgba(255,255,255,0.65); }
.chat-model-tag { font-size: 10px; opacity: 0.35; color: rgba(255,255,255,0.6); }
/* ── Input area: Kimi-style rounded pill ── */
/* No safe-area-inset-bottom here — .pm-bottom-tabs below handles it */
.pm-input-area {
background: #000;
border-top: none;
padding: 5px 10px;
}
.chatbot-input-wrap {
background: #141420;
border: 1px solid rgba(255,255,255,0.1);
border-radius: 22px;
padding: 7px 8px 7px 14px;
gap: 8px;
align-items: flex-end;
min-height: 42px;
transition: border-color 0.2s, background 0.2s;
}
.chatbot-input-wrap:focus-within {
border-color: rgba(99,102,241,0.45);
background: #16162a;
}
.chatbot-input {
font-size: 16px;
color: rgba(255,255,255,0.9);
background: transparent;
border: none; padding: 0;
line-height: 1.5;
caret-color: #818cf8;
}
.chatbot-input::placeholder { color: rgba(255,255,255,0.24); }
/* Circular filled send button */
.chatbot-send-btn {
width: 36px; height: 36px; min-width: 36px;
border-radius: 50%;
background: #5b5ef4;
border: none;
box-shadow: 0 2px 12px rgba(91,94,244,0.45);
transition: background 0.15s, box-shadow 0.15s;
}
.chatbot-send-btn:hover:not(:disabled) { background: #7577f7; box-shadow: 0 2px 16px rgba(91,94,244,0.6); }
.chatbot-send-btn:disabled { background: rgba(99,102,241,0.2); box-shadow: none; }
/* Circular stop button */
.chatbot-stop-btn {
width: 36px; height: 36px; min-width: 36px;
border-radius: 50%;
background: rgba(239,68,68,0.1);
border: 2px solid rgba(239,68,68,0.5);
}
/* Disclaimer removed on mobile */
.chatbot-disclaimer { display: none; }
/* ── Bottom tab bar: tighter spacing ── */
.pm-bottom-tabs { background: #000; border-top-color: rgba(255,255,255,0.07); z-index: 100; position: relative; }
.pm-tab { color: rgba(255,255,255,0.3); padding: 6px 4px 7px; gap: 2px; }
.pm-tab-icon { font-size: 18px; }
.pm-tab-label { font-size: 10px; }
.pm-tab.active { color: #818cf8; }
.pm-tab.active::before { background: #818cf8; }
.pm-tab:active { background: rgba(99,102,241,0.07); }
/* ── Header ── */
.pm-sidebar-toggle { border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }
.pm-sidebar-toggle:hover { background: rgba(255,255,255,0.06); color: #fff; }
.chatbot-clear-btn {
border-color: rgba(255,255,255,0.1);
background: transparent;
color: rgba(255,255,255,0.38);
}
.chatbot-clear-btn:hover { color: rgba(255,255,255,0.8); border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.05); }
/* ── Welcome screen: centered & minimal ── */
.chat-welcome { padding: 20px 20px 20px; text-align: center; }
.chat-welcome-icon { font-size: 44px; margin-bottom: 16px; display: block; }
.chat-welcome h3 { font-size: 22px; font-weight: 700; color: rgba(255,255,255,0.92); margin-bottom: 8px; }
.chat-welcome p { font-size: 14px; color: rgba(255,255,255,0.36); line-height: 1.65; margin-bottom: 28px; }
.chat-suggestions { gap: 8px; }
.chat-suggestion {
background: #111118;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
font-size: 14px;
color: rgba(255,255,255,0.62);
padding: 13px 16px;
text-align: left;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chat-suggestion:hover,
.chat-suggestion:active {
background: #1a1a2c;
border-color: rgba(99,102,241,0.3);
color: rgba(255,255,255,0.9);
}
/* ── Thinking block on black ── */
.thinking-block { background: rgba(99,102,241,0.05); border-color: rgba(139,92,246,0.25); }
.thinking-block.done { border-color: rgba(99,102,241,0.12); }
/* ── Header: compact height + prevent overflow ── */
.pm-header { min-height: 44px !important; padding: 0 12px !important; }
/* Strip safe-area from input area — tabs below already handle it */
.pm-input-area { padding-bottom: 5px !important; }
.pm-mode-title { max-width: 95px; }
.pm-mode-icon { font-size: 16px; }
.pm-model-chip { max-width: 120px !important; }
/* Clear button icon-only — text is a bare text node, use font-size:0 trick */
.chatbot-clear-btn {
font-size: 0 !important;
padding: 7px !important;
width: 30px; height: 30px;
border-radius: 8px;
display: inline-flex; align-items: center; justify-content: center;
}
.chatbot-clear-btn svg { width: 14px; height: 14px; }
/* ── Paragraph spacing: suppress double
gaps ── */
.chat-msg-ai .chat-bubble br + br { display: none; }
/* Remove
that follows a block-level element (heading / list) */
.chat-msg-ai .chat-bubble h2 + br,
.chat-msg-ai .chat-bubble h3 + br,
.chat-msg-ai .chat-bubble h4 + br,
.chat-msg-ai .chat-bubble ul + br,
.chat-msg-ai .chat-bubble ol + br { display: none; }
/* Tighten heading whitespace */
.chat-msg-ai .chat-bubble h2,
.chat-msg-ai .chat-bubble h3,
.chat-msg-ai .chat-bubble h4 { margin-top: 10px; margin-bottom: 3px; }
/* ── During streaming: collapse bubble when only cursor exists ── */
.chat-msg-ai .chat-bubble:has(> .stream-cursor:only-child) {
min-height: 0 !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
}
}
/* ══════════════════════════════════════════════
PREMIUM UI POLISH — keyframes (global)
══════════════════════════════════════════════ */
@keyframes msgSlideIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes thinkPulseGlow {
0%, 100% {
box-shadow: 0 0 0 1px rgba(139,92,246,0.12), 0 0 12px rgba(139,92,246,0.06);
border-color: rgba(139,92,246,0.28);
}
50% {
box-shadow: 0 0 0 2px rgba(139,92,246,0.22), 0 0 24px rgba(99,102,241,0.15), 0 4px 20px rgba(139,92,246,0.08);
border-color: rgba(139,92,246,0.45);
}
}
@keyframes inputFocusGlow {
0%, 100% { box-shadow: 0 0 0 3px rgba(99,102,241,0.12), 0 0 16px rgba(99,102,241,0.06); }
50% { box-shadow: 0 0 0 4px rgba(99,102,241,0.18), 0 0 24px rgba(99,102,241,0.1); }
}
/* ══════════════════════════════════════════════
PREMIUM UI POLISH — mobile overrides
══════════════════════════════════════════════ */
@media (max-width: 768px) {
/* ─── 1. WELCOME SCREEN: radial glow + gradient title ─── */
.chat-welcome-icon {
position: relative;
display: inline-block;
filter: drop-shadow(0 0 20px rgba(129,140,248,0.5));
}
.chat-welcome-icon::after {
content: '';
position: absolute;
inset: -28px;
border-radius: 50%;
background: radial-gradient(circle, rgba(99,102,241,0.18) 0%, rgba(139,92,246,0.08) 40%, transparent 70%);
z-index: -1;
pointer-events: none;
}
.chat-welcome h3 {
background: linear-gradient(135deg, #e0e0ff 0%, #818cf8 50%, #c4b5fd 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.chat-suggestion {
transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.chat-suggestion:hover,
.chat-suggestion:active {
box-shadow: 0 0 16px rgba(99,102,241,0.12), inset 0 0 0 1px rgba(99,102,241,0.15);
}
/* ─── 2. MESSAGE ENTRANCE ANIMATION ─── */
.chat-msg {
animation: msgSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* ─── 3. INPUT FOCUS GLOW RING ─── */
.chatbot-input-wrap:focus-within {
border-color: rgba(99,102,241,0.55) !important;
background: #16162a !important;
box-shadow: 0 0 0 3px rgba(99,102,241,0.15), 0 0 20px rgba(99,102,241,0.08);
animation: inputFocusGlow 2.5s ease-in-out infinite;
}
/* ─── 4. BOTTOM TABS: filled pill active state ─── */
.pm-tab {
transition: color 0.2s, transform 0.15s;
z-index: 0;
position: relative;
}
.pm-tab.active { color: #a5b4fc; }
.pm-tab.active::before {
top: 4px;
bottom: 4px;
left: 12%;
right: 12%;
height: auto;
border-radius: 10px;
background: rgba(99,102,241,0.13);
z-index: -1;
}
.pm-tab:active { transform: scale(0.95); }
/* ─── 5. COPY / ACTION ROW: bigger, more visible ─── */
.msg-actions {
margin-top: 12px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.msg-copy-btn {
color: rgba(255,255,255,0.5) !important;
border-color: rgba(255,255,255,0.12) !important;
font-size: 11px !important;
padding: 6px 12px !important;
border-radius: 8px;
min-height: 32px;
}
.msg-copy-btn svg { width: 13px; height: 13px; }
.msg-copy-btn:hover,
.msg-copy-btn:active {
background: rgba(99,102,241,0.12) !important;
color: rgba(255,255,255,0.8) !important;
border-color: rgba(99,102,241,0.3) !important;
}
.chat-model-tag { font-size: 10.5px !important; opacity: 0.5 !important; }
/* ─── 6. USER BUBBLE: glass gradient ─── */
.chat-msg-user .chat-bubble {
background: linear-gradient(
135deg,
rgba(24,24,48,0.95) 0%,
rgba(30,28,56,0.85) 50%,
rgba(24,24,42,0.95) 100%
) !important;
border: 1px solid rgba(99,102,241,0.15) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04);
}
/* ─── 7. THINKING BLOCK: pulse glow while active ─── */
.thinking-block {
background: linear-gradient(135deg, rgba(99,102,241,0.06) 0%, rgba(139,92,246,0.04) 50%, rgba(99,102,241,0.02) 100%) !important;
border: 1px solid rgba(139,92,246,0.3) !important;
border-radius: 12px;
animation: thinkPulseGlow 2.5s ease-in-out infinite;
}
.thinking-block.done {
animation: none !important;
border-color: rgba(99,102,241,0.12) !important;
box-shadow: none !important;
background: rgba(99,102,241,0.03) !important;
}
/* ─── 8. SCROLLBAR: thin dark-themed ─── */
.prayaas-main .chatbot-messages {
scrollbar-width: thin;
scrollbar-color: rgba(99,102,241,0.2) transparent;
}
.prayaas-main .chatbot-messages::-webkit-scrollbar { width: 3px; }
.prayaas-main .chatbot-messages::-webkit-scrollbar-track { background: transparent; }
.prayaas-main .chatbot-messages::-webkit-scrollbar-thumb {
background: rgba(99,102,241,0.2);
border-radius: 3px;
}
.prayaas-main .chatbot-messages::-webkit-scrollbar-thumb:hover {
background: rgba(99,102,241,0.35);
}
/* ─── 9. HEADER: frosted glass ─── */
.pm-header {
background: rgba(5,5,10,0.75) !important;
backdrop-filter: blur(16px) saturate(1.2);
-webkit-backdrop-filter: blur(16px) saturate(1.2);
border-bottom: 1px solid rgba(255,255,255,0.06);
/* backdrop-filter creates a stacking context; z-index ensures the header
(and its model dropdown child) paints above the messages scroll area */
position: relative;
z-index: 10;
}
/* ─── 10. FOCUS RINGS: accessible keyboard navigation ─── */
.chatbot-send-btn:focus-visible,
.chatbot-stop-btn:focus-visible,
.chatbot-clear-btn:focus-visible,
.pm-sidebar-toggle:focus-visible,
.pm-tab:focus-visible,
.msg-copy-btn:focus-visible,
.chat-suggestion:focus-visible {
outline: 2px solid var(--accent-warm);
outline-offset: 2px;
}
}
/* =====================================================================
DESKTOP PREMIUM UI UPGRADES (min-width: 769px)
===================================================================== */
@media (min-width: 769px) {
/* ─── 1. MESSAGE ENTRANCE ANIMATION ─── */
.chat-msg {
animation: msgSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* ─── 2. INPUT FOCUS GLOW ─── */
.pm-input-area .chatbot-input-wrap:focus-within {
border-color: rgba(99,102,241,0.5) !important;
box-shadow: 0 0 0 3px rgba(99,102,241,0.12), 0 0 20px rgba(99,102,241,0.07);
animation: inputFocusGlow 2.5s ease-in-out infinite;
}
/* ─── 3. WELCOME SCREEN: glow behind icon + gradient title ─── */
.prayaas-main .chat-welcome-icon {
position: relative;
display: inline-block;
}
.prayaas-main .chat-welcome-icon::after {
content: '';
position: absolute;
inset: -24px;
background: radial-gradient(circle, rgba(129,140,248,0.2) 0%, transparent 70%);
pointer-events: none;
border-radius: 50%;
}
.prayaas-main .chat-welcome h3 {
background: linear-gradient(135deg, #a5b4fc 0%, #c084fc 50%, #818cf8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.prayaas-main .chat-suggestion {
transition: all 0.2s ease;
}
.prayaas-main .chat-suggestion:hover {
box-shadow: 0 0 18px rgba(99,102,241,0.22);
transform: translateY(-2px);
}
/* ─── 4. HEADER: frosted glass ─── */
.pm-header {
background: rgba(11,11,22,0.85) !important;
backdrop-filter: blur(20px) saturate(1.3);
-webkit-backdrop-filter: blur(20px) saturate(1.3);
border-bottom: 1px solid rgba(255,255,255,0.07);
}
/* ─── 5. USER BUBBLE: glass gradient ─── */
.chat-msg-user .chat-bubble {
background: linear-gradient(135deg, rgba(99,102,241,0.2) 0%, rgba(139,92,246,0.13) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(99,102,241,0.32);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.07);
}
/* ─── 6. MODEL CHIP: better hover ─── */
.pm-model-chip {
transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.pm-model-chip:hover {
background: rgba(99,102,241,0.2) !important;
border-color: rgba(99,102,241,0.45) !important;
transform: scale(1.02);
}
}
/* ─── 7. CUSTOM SCROLLBARS: sidebar + history (desktop) ─── */
@media (min-width: 769px) {
.prayaas-sidebar::-webkit-scrollbar,
.ph-list::-webkit-scrollbar { width: 3px; }
.prayaas-sidebar::-webkit-scrollbar-track,
.ph-list::-webkit-scrollbar-track { background: transparent; }
.prayaas-sidebar::-webkit-scrollbar-thumb,
.ph-list::-webkit-scrollbar-thumb {
background: rgba(99,102,241,0.22);
border-radius: 2px;
}
.prayaas-sidebar::-webkit-scrollbar-thumb:hover,
.ph-list::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.38); }
.prayaas-sidebar { scrollbar-width: thin; scrollbar-color: rgba(99,102,241,0.22) transparent; }
.ph-list { scrollbar-width: thin; scrollbar-color: rgba(99,102,241,0.22) transparent; }
}
/* ─── 8. SIDEBAR: nav active glow + hover ─── */
@media (min-width: 769px) {
/* inset box-shadow = accent left line without layout shift */
.ps-nav-item.active {
background: rgba(99,102,241,0.1);
box-shadow: inset 3px 0 0 rgba(99,102,241,0.6);
}
.ps-nav-item:not(.active):hover {
background: rgba(99,102,241,0.06);
box-shadow: inset 3px 0 0 rgba(99,102,241,0.25);
}
/* History items: accent left highlight on hover */
.ph-item:hover { box-shadow: inset 2px 0 0 rgba(99,102,241,0.5); }
}
/* =====================================================================
DESKTOP-ONLY OVERRIDES (min-width: 961px)
History panel is always visible in the 3-column grid.
===================================================================== */
@media (min-width: 961px) {
/* History panel is permanently in the grid — toggle button is redundant */
#sidebarToggleHistory { display: none; }
}