/* ============================================ AI Admission Counselor - University of South Asia Locked Layout CSS - Mobile First ============================================ */ /* --- Reset & Base --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg-primary: #16213e; --bg-secondary: #1a1f3a; --bg-button: #3d4f80; --accent-orange: #FF8C00; --accent-purple: #7c3aed; --text-white: #ffffff; --text-gray: #a0a0b0; --border-orange: #FF8C00; --header-height: 56px; --chat-height: 64px; --nav-height: 56px; } html, body { height: 100%; width: 100%; overflow: hidden; position: fixed; top: 0; left: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--bg-primary); color: var(--text-white); } /* --- Welcome Popup --- */ .welcome-popup-overlay { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; /* Breathing room so the card never hugs the screen edges on short laptops. */ padding: 4vh 16px; box-sizing: border-box; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: opacity 0.4s ease, visibility 0.4s ease; } .welcome-popup-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* Pre-paint guard: once the popup was dismissed this session, hide it INSTANTLY (no flash / no fade) on every later page load. The script adds the .welcome-dismissed class before first paint. */ html.welcome-dismissed .welcome-popup-overlay { display: none !important; } .welcome-popup { position: relative; text-align: center; padding: 2rem 1.9rem 1.9rem; max-width: 92vw; width: 360px; /* Never exceed the viewport — scroll inside the card on short screens (uses dvh so mobile browser chrome is accounted for). */ max-height: calc(100dvh - 8vh); overflow-y: auto; background: radial-gradient(ellipse 120% 55% at 50% -10%, rgba(255, 140, 0, 0.10) 0%, rgba(255, 140, 0, 0) 60%), linear-gradient(160deg, rgba(28, 33, 48, 0.55) 0%, rgba(16, 19, 30, 0.60) 100%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 24px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); overflow-x: hidden; animation: welcomePopupIn 0.5s cubic-bezier(0.21, 1, 0.36, 1) both; } @keyframes welcomePopupIn { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .welcome-popup-logo { width: 54px; height: auto; margin-bottom: 0.85rem; filter: drop-shadow(0 2px 8px rgba(255, 140, 0, 0.3)); } .welcome-popup-title { font-size: 1.1rem; font-weight: 600; color: #fff; line-height: 1.3; margin-bottom: 0.25rem; letter-spacing: 0.02em; } .welcome-popup-uni { font-size: 1.65rem; font-weight: 800; color: var(--accent-orange); line-height: 1.15; margin: 0 0 0.75rem 0; white-space: nowrap; } .welcome-popup-subtitle { font-size: 0.82rem; color: #b0b8cc; margin-bottom: 0.5rem; line-height: 1.5; text-align: center; } .welcome-popup-select-lang { font-size: 1.15rem; font-weight: 700; color: #ffffff; margin: 0 0 1rem 0; line-height: 1.3; } .welcome-popup-greeting { font-size: 1.05rem; font-weight: 700; color: #ffb347; margin: 0.1rem 0 0.4rem; line-height: 1.4; } .welcome-popup-fields { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 auto 0.9rem; width: 100%; max-width: 280px; } .welcome-popup-field { display: flex; flex-direction: column; gap: 0.2rem; } .welcome-popup-langs { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin-top: 0.15rem; } .welcome-popup-langs-label { font-size: 0.8rem; color: #b9c0d0; font-weight: 600; } .welcome-popup-langs-options { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 1.4rem; } .welcome-lang-option { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; color: #fff; font-size: 0.9rem; font-weight: 600; user-select: none; } .welcome-lang-option input[type="radio"] { accent-color: var(--accent-orange); width: 16px; height: 16px; margin: 0; cursor: pointer; } .welcome-lang-option span[lang="ur"] { font-size: 1.1rem; line-height: 1; } .welcome-popup-hint { font-size: 0.72rem; color: #8a93a8; text-align: left; padding-left: 0.2rem; line-height: 1.3; letter-spacing: 0.01em; } .welcome-popup-input { width: 100%; padding: 0.7rem 1rem; font-size: 0.88rem; color: #fff; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; outline: none; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; box-sizing: border-box; } .welcome-popup-input::placeholder { color: #828ca2; } .welcome-popup-input:focus { border-color: var(--accent-orange); background: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.18); } .welcome-popup-input.is-invalid { border-color: #ff5a5a; box-shadow: 0 0 0 3px rgba(255, 90, 90, 0.18); } .welcome-popup-error { color: #ff7a7a; font-size: 0.78rem; margin: 0.05rem 0 0; min-height: 1em; text-align: center; } .welcome-popup-btn { display: inline-block; width: 100%; max-width: 280px; margin-top: 0.5rem; padding: 0.78rem 3rem; font-size: 0.96rem; font-weight: 700; color: #000; background: linear-gradient(135deg, #FF8C00, #FFA033); border: none; border-radius: 50px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 6px 24px rgba(255, 140, 0, 0.4); letter-spacing: 0.02em; } .welcome-popup-btn:hover { transform: scale(1.05); box-shadow: 0 6px 32px rgba(255, 140, 0, 0.55); } .welcome-popup-btn:active { transform: scale(0.97); } /* Known-user mode (no input fields): give clear breathing room between the "Welcome back" greeting and the button. */ .welcome-popup.is-known-user .welcome-popup-greeting { margin: 0.4rem 0 1.6rem; } .welcome-popup.is-known-user .welcome-popup-btn { margin-top: 0; } /* ---- Welcome popup: "Select Your Option" menu ---- */ .welcome-popup-options { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; max-width: 300px; margin: 1rem auto 0; } .welcome-popup-options-title { font-size: 0.95rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; margin: 0 0 0.2rem; } .welcome-option-btn { display: flex; align-items: center; gap: 0.85rem; width: 100%; padding: 0.85rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(255, 255, 255, 0.16); border-radius: 14px; color: #fff; font-size: 1rem; font-weight: 600; cursor: pointer; text-align: left; transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease; } .welcome-option-btn:hover { background: rgba(255, 140, 0, 0.16); border-color: var(--accent-orange); } .welcome-option-btn:active { transform: scale(0.98); } .welcome-option-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, #FF8C00, #FFA033); color: #000; font-weight: 800; font-size: 0.95rem; } .welcome-option-label { flex: 1; } .welcome-option-arrow { color: var(--accent-orange); font-size: 1.4rem; line-height: 1; font-weight: 700; } /* ---- Welcome popup: "Get Started" button (public home: language-only) ---- */ .welcome-get-started-btn { display: inline-block; width: 100%; max-width: 280px; margin-top: 1rem; padding: 0.82rem 3rem; font-size: 1rem; font-weight: 700; color: #000; background: linear-gradient(135deg, #FF8C00, #FFA033); border: none; border-radius: 50px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 6px 24px rgba(255, 140, 0, 0.4); letter-spacing: 0.02em; } .welcome-get-started-btn:hover { transform: scale(1.05); box-shadow: 0 6px 32px rgba(255, 140, 0, 0.55); } .welcome-get-started-btn:active { transform: scale(0.97); } /* ---- Welcome popup: two language buttons (public home: English / Urdu) ---- */ .welcome-popup-lang-btns { display: flex; flex-direction: row; justify-content: center; gap: 0.9rem; width: 100%; max-width: 300px; margin: 1.1rem auto 0; } .welcome-lang-btn { flex: 1 1 0; padding: 0.82rem 0.5rem; font-size: 1rem; font-weight: 700; color: #000; background: linear-gradient(135deg, #FF8C00, #FFA033); border: none; border-radius: 50px; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 6px 24px rgba(255, 140, 0, 0.4); letter-spacing: 0.02em; } .welcome-lang-btn:hover { transform: scale(1.05); box-shadow: 0 6px 32px rgba(255, 140, 0, 0.55); } .welcome-lang-btn:active { transform: scale(0.97); } /* ---- Home welcome landing (no popup, direct landing) ---- */ .home-welcome-landing { max-width: 540px; margin: 0; padding: 26px 16px 28px 22px; } .home-welcome-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 26px; font-weight: 800; line-height: 1.25; color: var(--accent-orange); margin: 0 0 18px; letter-spacing: 0.2px; } .home-welcome-body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--text-white); margin: 0 0 12px; letter-spacing: 0.1px; } .home-welcome-highlight { color: var(--accent-orange); font-weight: 700; } .home-lets-talk-btn { display: inline-block; margin-top: 10px; padding: 12px 36px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 18px; font-weight: 700; color: #fff; background: var(--accent-orange); border: none; border-radius: 8px; cursor: pointer; transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease; box-shadow: 0 4px 18px rgba(255, 140, 0, 0.35); } .home-lets-talk-btn:hover { background: #e07800; box-shadow: 0 6px 24px rgba(255, 140, 0, 0.5); } .home-lets-talk-btn:active { transform: scale(0.97); } /* Home page visual in the visual window */ .home-page-visual { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; z-index: 10; background: var(--bg-primary); } @media (min-width: 769px) { .home-welcome-landing { max-width: 620px; padding-left: 44px; } .home-welcome-title { font-size: 34px; margin-bottom: 22px; } .home-welcome-body { font-size: 20px; margin-bottom: 14px; } .home-lets-talk-btn { font-size: 20px; padding: 14px 44px; } } /* ---- Home intro screen (Adam: Get Started -> spoken intro + clickable cards) ---- */ .home-intro { max-width: 540px; margin: 0; padding: 26px 16px 28px 22px; } .home-intro-greet { font-family: var(--font-welcome-darling), 'Caveat', 'Bradley Hand', 'Segoe Print', cursive; font-size: 26px; line-height: 1.35; color: var(--text-white); margin: 6px 0 18px; letter-spacing: 0.5px; } @keyframes homeIntroTitleBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .home-intro-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--accent-orange); margin: 0 0 20px; letter-spacing: 0.2px; animation: homeIntroTitleBlink 1.2s ease-in-out infinite; } .home-intro-row { margin-bottom: 18px; } .home-intro-head { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--text-white); margin: 0 0 9px; letter-spacing: 0.2px; } .home-intro-head .hw-char, .home-intro-foot .hw-char { display: inline; opacity: 0; animation: hwReveal 0.05s forwards; font-family: inherit; } .home-intro-btn { display: inline-block; width: auto; min-width: 210px; max-width: 100%; padding: 0.62rem 1.15rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; font-weight: 700; color: var(--accent-orange); background: rgba(255, 255, 255, 0.05); border: 1.5px solid rgba(124, 142, 178, 0.38); border-radius: 8px; cursor: pointer; text-align: left; transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease; } .home-intro-btn:hover { background: rgba(255, 140, 0, 0.14); border-color: var(--accent-orange); } .home-intro-btn:active { transform: scale(0.98); } .home-intro-foot { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--text-white); margin: 18px 0 0; letter-spacing: 0.1px; } /* Welcome-back screen body paragraph (reuses the .home-intro design; this is the one extra element the home-intro doesn't have). */ .welcome-back-body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--text-white); margin: 0 0 16px; letter-spacing: 0.1px; } /* Home-intro: hide the Back button + the empty header row, and start content at the TOP of the panel (it otherwise bottom-aligns chat messages). */ .app-shell.home-intro-active .chat-back-btn { display: none !important; } .app-shell.home-intro-active.welcome-back-mode .chat-back-btn { display: flex !important; } .app-shell.home-intro-active.welcome-back-mode .chat-panel-header { display: flex !important; } .app-shell.home-intro-active .chat-panel-header { display: none !important; } .app-shell.home-intro-active .voice-transcript-panel { justify-content: flex-start; align-items: flex-start; } /* Desktop: bigger fonts + more left breathing room (mobile keeps the base sizes above). */ @media (min-width: 769px) { .home-intro { max-width: 620px; padding-left: 44px; } .home-intro-title { font-size: 34px; margin-bottom: 24px; } .home-intro-head { font-size: 22px; margin-bottom: 11px; } .home-intro-btn { font-size: 18px; min-width: 240px; padding: 0.72rem 1.3rem; } .home-intro-foot { font-size: 20px; margin-top: 22px; } .home-intro-row { margin-bottom: 22px; } .welcome-back-body { font-size: 19px; margin-bottom: 20px; } } /* Bottom-nav "Goto" repurposed to an active "Demo" button during the home intro. */ .nav-btn.is-home-demo, .nav-btn.is-home-demo .nav-icon { color: var(--accent-orange); } /* Header: phone number stacked under the Apply Now button. */ .header-apply-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; } .header-phone { font-size: 12px; font-weight: 600; color: var(--text-white); letter-spacing: 0.2px; white-space: nowrap; text-align: center; } @media (min-width: 768px) { .welcome-popup { width: 390px; padding: 2.2rem 2.1rem 2.1rem; } .welcome-popup-logo { width: 60px; margin-bottom: 0.95rem; } .welcome-popup-title { font-size: 1.25rem; } .welcome-popup-uni { font-size: 1.9rem; } .welcome-popup-subtitle { font-size: 0.88rem; margin-bottom: 1.35rem; } .welcome-popup-fields { max-width: 300px; gap: 0.55rem; } .welcome-popup-input { padding: 0.74rem 1.05rem; font-size: 0.9rem; } .welcome-popup-btn { max-width: 300px; padding: 0.82rem 3rem; font-size: 1rem; } } @media (min-width: 1200px) { .welcome-popup { width: 410px; padding: 2.4rem 2.3rem 2.3rem; } .welcome-popup-logo { width: 64px; margin-bottom: 1.05rem; } .welcome-popup-title { font-size: 1.32rem; } .welcome-popup-uni { font-size: 2.05rem; } .welcome-popup-subtitle { font-size: 0.92rem; margin-bottom: 1.45rem; } .welcome-popup-fields { max-width: 310px; } .welcome-popup-input { padding: 0.78rem 1.1rem; font-size: 0.92rem; } .welcome-popup-btn { max-width: 310px; padding: 0.88rem 3.25rem; font-size: 1.04rem; } } /* Short laptop screens (13–14"): compress vertical rhythm so the whole card (especially WITH all three fields) fits without scrolling. */ @media (max-height: 720px) { .welcome-popup { padding: 1.6rem 1.8rem 1.7rem; } .welcome-popup-logo { width: 46px; margin-bottom: 0.6rem; } .welcome-popup-title { font-size: 1rem; margin-bottom: 0.15rem; } .welcome-popup-uni { font-size: 1.5rem; margin-bottom: 0.55rem; } .welcome-popup-subtitle { font-size: 0.8rem; margin-bottom: 0.9rem; } .welcome-popup-greeting { font-size: 1rem; margin: 0.1rem 0 0.3rem; } .welcome-popup-fields { gap: 0.4rem; margin-bottom: 0.7rem; } .welcome-popup-hint { font-size: 0.68rem; } .welcome-popup-input { padding: 0.58rem 0.95rem; } .welcome-popup-btn { padding: 0.68rem 2.5rem; margin-top: 0.35rem; } } @media (max-width: 380px) { .welcome-popup { padding: 2.25rem 1.4rem 2rem; border-radius: 20px; } .welcome-popup-logo { width: 52px; } .welcome-popup-title { font-size: 1.1rem; } .welcome-popup-uni { font-size: 1.6rem; white-space: normal; } .welcome-popup-subtitle { margin-bottom: 1.2rem; } .welcome-popup-fields { max-width: 100%; } .welcome-popup-input { padding: 0.7rem 1rem; } .welcome-popup-btn { max-width: 100%; padding: 0.8rem 2rem; font-size: 0.95rem; } } /* ============================================ MOBILE LAYOUT - Fixed 5 Component Positions Order: header → text → chat → visual → nav ============================================ */ .app-shell { display: grid; grid-template-areas: "header" "title" "text" "chat" "visual" "nav"; grid-template-rows: var(--header-height) auto 1fr var(--chat-height) 30vh var(--nav-height); height: 100vh; height: 100dvh; width: 100%; max-width: 100vw; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; } /* --- HEADER --- */ .app-header { grid-area: header; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: var(--bg-secondary); border-bottom: 1px solid #707070; z-index: 100; } .header-left { display: flex; align-items: center; gap: 10px; } .header-brand-link { color: inherit; text-decoration: none; cursor: pointer; } .header-brand-link:focus-visible { outline: 2px solid var(--accent-orange); outline-offset: 4px; border-radius: 4px; } .header-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: contain; } .header-title { display: flex; flex-direction: column; line-height: 1.2; } .header-uni { font-size: 14px; color: var(--text-white); font-weight: 600; } .header-south-asia { font-size: 16px; color: var(--text-white); font-weight: 600; } @keyframes btn-glow-pulse { 0%, 100% { box-shadow: 0 0 4px rgba(255, 255, 255, 0.3); } 50% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.3); } } .apply-now-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; background: linear-gradient(135deg, #ff8c00 0%, #ff6b00 100%); color: #ffffff; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; text-align: center; text-decoration: none; border: 1px solid #ffffff; border-radius: 999px; cursor: pointer; white-space: nowrap; margin-right: 0; animation: btn-glow-pulse 2s ease-in-out infinite; } .apply-now-btn:hover { filter: brightness(1.05); } .apply-now-btn:active { filter: brightness(0.95); } /* --- TEXT WINDOW --- */ .text-window { grid-area: text; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 0 14px 14px; background: var(--bg-primary); -webkit-overflow-scrolling: touch; border-bottom: 1px solid #707070; position: relative; z-index: 1; /* Thin styled scrollbar - Firefox */ scrollbar-width: thin; scrollbar-color: rgba(255, 140, 0, 0.4) rgba(255, 255, 255, 0.05); } /* Styled scrollbar - WebKit (Chrome, Safari, new Edge) */ .text-window::-webkit-scrollbar { width: 14px; height: 0; } /* Floating "scroll down for more" indicator. Anchored to the bottom-center of the text window. JS toggles `.is-hidden` based on scroll position so the button only appears when there's content below the fold. */ .scroll-down-btn { position: sticky; bottom: 12px; left: 50%; transform: translateX(-50%); margin-left: auto; margin-right: auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 140, 0, 0.55); background: rgba(20, 24, 48, 0.85); color: var(--accent-orange); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 0 8px rgba(255, 140, 0, 0.25); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 5; opacity: 1; transition: opacity 0.2s ease, transform 0.15s ease, background 0.15s ease; animation: scrollDownBob 1.6s ease-in-out infinite; } .scroll-down-btn:hover { background: rgba(255, 140, 0, 0.2); transform: translateX(-50%) translateY(-2px); } .scroll-down-btn:active { transform: translateX(-50%) scale(0.92); } .scroll-down-btn.is-hidden { opacity: 0; pointer-events: none; position: absolute; bottom: 12px; } @keyframes scrollDownBob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(4px); } } /* Floating "scroll back up" indicator. Same visual style as the scroll-down button, but anchored to the TOP-center of the text window so it appears above the content (where the user wants to go) rather than at the bottom. JS ensures only one of the two is visible at a time. */ .scroll-up-btn { position: sticky; top: 12px; left: 50%; transform: translateX(-50%); margin-left: auto; margin-right: auto; /* Pull the button out of the normal flow vertically so it doesn't push content down when it appears. */ margin-bottom: -36px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 140, 0, 0.55); background: rgba(20, 24, 48, 0.85); color: var(--accent-orange); cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 0 8px rgba(255, 140, 0, 0.25); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 5; opacity: 1; transition: opacity 0.2s ease, transform 0.15s ease, background 0.15s ease; animation: scrollDownBob 1.6s ease-in-out infinite; } .scroll-up-btn:hover { background: rgba(255, 140, 0, 0.2); transform: translateX(-50%) translateY(-2px); } .scroll-up-btn:active { transform: translateX(-50%) scale(0.92); } .scroll-up-btn.is-hidden { opacity: 0; pointer-events: none; position: absolute; top: 12px; } /* While talking to AI Adam/Zara the conversation auto-scrolls to the newest message, so the floating scroll arrows are not needed — and they would otherwise overlap the chat bubbles. Hide them in voice-chat mode. */ .app-shell.voice-chat-mode .scroll-up-btn, .app-shell.voice-chat-mode .scroll-down-btn { display: none !important; } .screen-title { grid-area: title; font-size: 20px; font-weight: 700; font-style: normal; color: var(--accent-orange); margin: 0; padding: 16px; position: sticky; top: -10px; z-index: 10; background: var(--bg-primary); display: flex; align-items: center; gap: 10px; } .screen-title .back-btn { appearance: none; -webkit-appearance: none; background: transparent; border: none; color: var(--accent-orange); padding: 4px; margin: 0; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; flex-shrink: 0; } .screen-title .back-btn:hover { background: rgba(255, 140, 0, 0.12); } .screen-title .back-btn:active { transform: translateX(-2px); } .screen-title .back-btn svg { display: block; } .screen-title-text { flex: 1 1 auto; min-width: 0; } .screen-title-text--glow { animation: titleBlink 1.2s ease-in-out infinite; text-shadow: 0 0 8px rgba(255, 140, 0, 0.45), 0 0 16px rgba(255, 140, 0, 0.25); } /* Indented bullet points under category labels in eligibility/program sections */ .intro-new-line.intro-new-line--indented { padding-left: 44px; margin-left: 0; } .intro-new-line.intro-new-line--indented::before { left: 28px; } @keyframes titleBlink { 0%, 100% { opacity: 1; text-shadow: 0 0 8px rgba(255, 140, 0, 0.45), 0 0 16px rgba(255, 140, 0, 0.25); } 50% { opacity: 0.45; text-shadow: 0 0 4px rgba(255, 140, 0, 0.25), 0 0 8px rgba(255, 140, 0, 0.15); } } .page-content { min-height: 100%; } .voice-transcript-panel { display: none; min-height: 100%; padding: 2px 0 10px; flex-direction: column; justify-content: flex-end; } .app-shell.voice-chat-mode .page-content { display: none; } .app-shell.voice-chat-mode .screen-title { display: none; } .app-shell.voice-chat-mode .voice-transcript-panel { display: flex; } /* Back button — pinned to top-right of chat panel, only visible while chatting. Uses position: sticky so it stays in place as the conversation scrolls. */ .chat-back-btn { position: sticky; top: 10px; z-index: 6; display: none; width: fit-content; margin: 10px 2px 4px auto; align-items: center; gap: 6px; padding: 7px 15px 7px 11px; background: rgba(16, 21, 44, 0.72); color: var(--text-white); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; cursor: pointer; backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; } .chat-back-btn:hover { background: rgba(28, 35, 66, 0.88); border-color: rgba(255, 140, 0, 0.55); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.42); } .chat-back-btn:active { transform: scale(0.95); } .chat-back-btn svg { flex: 0 0 auto; color: var(--accent-orange); } .app-shell.voice-chat-mode .chat-back-btn { display: flex; } @media (max-width: 768px) { .chat-back-btn { top: 8px; margin: 8px 0 4px auto; padding: 6px 13px 6px 9px; font-size: 12px; } } /* ── Chat panel header row (status chip on the left, Back chip on the right) ── A sticky bar at the top of the chat panel, only visible while chatting. It keeps the live presence indicator and the Back button neatly on one line. */ .chat-panel-header { position: sticky; top: 10px; z-index: 6; display: none; align-items: center; justify-content: flex-end; gap: 10px; margin: 10px 2px 4px; } .app-shell.voice-chat-mode .chat-panel-header { display: flex; } /* Back button now lives inside the header row — neutralise its own sticky/margin so the header controls placement (it stays pushed to the right). */ .chat-panel-header .chat-back-btn { position: static; margin: 0; top: auto; } /* Presence "status chip" — a floating pill that sits just ABOVE the chat input (bottom-left of the chat bar) and shows Adam's live state during a call. */ .voice-status-chip { position: absolute; left: 8px; bottom: calc(100% + 8px); z-index: 7; display: none; align-items: center; gap: 8px; max-width: calc(100% - 16px); padding: 6px 13px 6px 10px; background: rgba(16, 21, 44, 0.85); color: var(--text-white); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); pointer-events: none; animation: vscRise 0.22s ease-out; } .voice-status-chip.is-active { display: inline-flex; } .voice-status-text { overflow: hidden; text-overflow: ellipsis; } .voice-status-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--vsc-dot, var(--accent-orange)); } .voice-status-chip.is-listening { --vsc-dot: #3ad27e; } .voice-status-chip.is-speaking { --vsc-dot: #ff8c00; } .voice-status-chip.is-thinking { --vsc-dot: #ffc34d; } .voice-status-chip.is-connecting { --vsc-dot: #8ab4ff; } /* Connection-trouble state: the chip itself turns orange with a blinking background (overrides the dark bg) so "Internet unstable… please wait" is impossible to miss while Adam is frozen/reconnecting. */ .voice-status-chip.is-unstable { --vsc-dot: #ffd9a6; border-color: rgba(255, 180, 100, 0.45); background: rgba(180, 95, 0, 0.92); animation: vscRise 0.22s ease-out, vncPulseBg 1.1s ease-in-out infinite; } .voice-status-chip.is-unstable .voice-status-dot { animation: vscBlink 0.8s ease-in-out infinite; } .voice-status-chip.is-listening .voice-status-dot, .voice-status-chip.is-speaking .voice-status-dot { animation: vscPulse 1.2s ease-in-out infinite; } .voice-status-chip.is-thinking .voice-status-dot { animation: vscBlink 1s steps(2, start) infinite; } .voice-status-chip.is-connecting .voice-status-dot { animation: vscBlink 0.8s ease-in-out infinite; } @keyframes vscPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } } @keyframes vscBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes vscRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ── RIGHT-side network-status chip (above the Talk-to-Adam button) ── Shows "Internet unstable… please wait" with an orange blinking background while the live voice session is reconnecting, then "Switching to text mode" if recovery fails. Mirrors the left status chip but anchored to the right. */ .voice-net-chip { position: absolute; right: 8px; bottom: calc(100% + 8px); z-index: 7; display: none; align-items: center; gap: 8px; max-width: calc(100% - 16px); padding: 6px 13px 6px 10px; color: var(--text-white); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); pointer-events: none; background: rgba(180, 95, 0, 0.92); animation: vscRise 0.22s ease-out, vncPulseBg 1.1s ease-in-out infinite; } .voice-net-chip.is-active { display: inline-flex; } .voice-net-text { overflow: hidden; text-overflow: ellipsis; } .voice-net-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #ffd9a6; animation: vscBlink 0.8s ease-in-out infinite; } /* "Switching to text mode" — steadier (solid) amber, no background blink so it reads as a final decision rather than a transient warning. */ .voice-net-chip.is-switching { background: rgba(150, 70, 0, 0.96); animation: vscRise 0.22s ease-out; } .voice-net-chip.is-switching .voice-net-dot { animation: none; background: #ffe2bd; } /* Orange background blink for the "Internet unstable" warning. */ @keyframes vncPulseBg { 0%, 100% { background: rgba(180, 95, 0, 0.92); } 50% { background: rgba(255, 140, 0, 0.96); } } /* Mic-enable prompt — a small card floating just above the chat bar, shown after Adam finishes the welcome-back greeting when the mic isn't granted yet. Tapping "Enable" triggers the browser's native permission prompt. */ .mic-enable-popup { position: absolute; left: 8px; right: 8px; bottom: calc(100% + 10px); z-index: 9; display: none; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; color: var(--text-white); background: linear-gradient(135deg, #1a1f3a 0%, #16213e 100%); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); pointer-events: auto; animation: vscRise 0.22s ease-out; } .mic-enable-popup.is-visible { display: flex; } .mic-enable-popup-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(6, 182, 212, 0.18); color: #22d3ee; } .mic-enable-popup-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; } .mic-enable-popup-title { font-size: 14px; font-weight: 800; letter-spacing: 0.2px; } .mic-enable-popup-sub { font-size: 12px; font-weight: 500; opacity: 0.8; } .mic-enable-popup-btn { flex: 0 0 auto; padding: 8px 16px; border: none; border-radius: 999px; background: #06b6d4; color: #04293a; font-size: 13px; font-weight: 800; letter-spacing: 0.3px; cursor: pointer; transition: background 0.15s ease, transform 0.1s ease; } .mic-enable-popup-btn:hover { background: #22d3ee; } .mic-enable-popup-btn:active { transform: scale(0.96); } .mic-enable-popup-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, 0.6); cursor: pointer; } .mic-enable-popup-close:hover { color: #fff; background: rgba(255, 255, 255, 0.1); } @media (max-width: 520px) { .mic-enable-popup-sub { display: none; } .mic-enable-popup-title { font-size: 13px; } } @media (max-width: 768px) { .chat-panel-header { top: 8px; margin: 8px 0 4px; } .voice-status-chip { font-size: 12px; padding: 5px 11px 5px 9px; left: 6px; bottom: calc(100% + 6px); } .voice-net-chip { font-size: 12px; padding: 5px 11px 5px 9px; right: 6px; bottom: calc(100% + 6px); } } /* Mobile keyboard open: collapse avatar + nav rows */ .app-shell.keyboard-open { grid-template-rows: var(--header-height) auto 1fr var(--chat-height) 0px 0px; } /* Choose Your Preferred Program Button (in title bar) */ .choose-program-btn { flex-shrink: 0; padding: 7px 15px 7px 15px; background: rgba(16, 21, 44, 0.72); color: var(--text-white); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); animation: selectShake 3s ease-in-out infinite; } @keyframes selectShake { 0%, 85%, 100% { transform: translateX(0); } 88% { transform: translateX(-2px); } 91% { transform: translateX(2px); } 94% { transform: translateX(-1.5px); } 97% { transform: translateX(1px); } } .choose-program-btn--block { display: block; width: 100%; padding: 12px 18px; text-align: center; font-size: 14px; border-radius: 10px; margin-bottom: 6px; } /* Menu Buttons */ .menu-buttons { display: flex; flex-direction: column; gap: 10px; } .menu-btn { position: relative; display: flex; align-items: center; width: 100%; padding: 14px 44px 14px 18px; background: linear-gradient(180deg, rgba(74, 93, 148, 0.55) 0%, rgba(54, 71, 119, 0.55) 100%); color: var(--text-white); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; font-size: 15px; font-weight: 500; letter-spacing: 0.2px; text-align: left; cursor: pointer; text-decoration: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 1px 2px rgba(0, 0, 0, 0.25); transition: background 0.18s ease, border-color 0.18s ease, transform 0.08s ease, box-shadow 0.18s ease; } .menu-btn::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid rgba(255, 255, 255, 0.85); border-top: 2px solid rgba(255, 255, 255, 0.85); transform: translateY(-50%) rotate(45deg); opacity: 0; transition: opacity 0.18s ease, right 0.18s ease; } .menu-btn:hover { background: linear-gradient(180deg, rgba(96, 117, 178, 0.7) 0%, rgba(70, 89, 142, 0.7) 100%); border-color: rgba(255, 140, 0, 0.45); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 12px rgba(0, 0, 0, 0.35); } .menu-btn:hover::after { opacity: 1; right: 14px; } .menu-btn:active { transform: scale(0.985); } .menu-btn--disabled { opacity: 0.45; pointer-events: none; cursor: default; } /* "New" badge inside a menu-btn — small uppercase orange label with a pulsing glow. */ .menu-btn-new-badge { margin-left: auto; margin-right: 0; padding-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent-orange); line-height: 1; flex-shrink: 0; animation: menuBtnNewGlow 1.6s ease-in-out infinite; } /* When a row carries a New badge, push it flush to the right edge and drop the hover chevron so they don't visually compete for the same slot. */ .menu-btn:has(.menu-btn-new-badge) { padding-right: 14px; } .menu-btn:has(.menu-btn-new-badge)::after { display: none; } @keyframes menuBtnNewGlow { 0%, 100% { text-shadow: 0 0 4px rgba(255, 140, 0, 0.55), 0 0 10px rgba(255, 140, 0, 0.35); } 50% { text-shadow: 0 0 8px rgba(255, 140, 0, 0.95), 0 0 18px rgba(255, 140, 0, 0.7), 0 0 28px rgba(255, 140, 0, 0.45); } } /* Extra row at the end of a menu list: two side-by-side external action buttons (Counsellor, Seminar). Sits inside .menu-buttons so it inherits the column's gap and width. Styled to match .apply-now-btn (pill shape, white border, glow-pulse animation). */ .menu-extra-row { display: flex; gap: 10px; width: 100%; } .menu-extra-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; color: #ffffff; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.2; text-align: center; text-decoration: none; border: 1px solid #ffffff; border-radius: 999px; cursor: pointer; white-space: nowrap; animation: btn-glow-pulse 2s ease-in-out infinite; } .menu-extra-btn.is-blue { background: linear-gradient(180deg, rgba(74, 93, 148, 0.55) 0%, rgba(54, 71, 119, 0.55) 100%); } .menu-extra-btn.is-orange { background: linear-gradient(135deg, #ff8c00 0%, #ff6b00 100%); } .menu-extra-btn:hover { filter: brightness(1.05); } .menu-extra-btn:active { filter: brightness(0.95); } /* Section Buttons (on final program pages) - vertical column */ .section-buttons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .section-buttons::-webkit-scrollbar { display: none; } .section-btn { padding: 14px 18px; background: var(--bg-button); color: var(--text-white); border: 1px solid transparent; border-radius: 8px; font-size: 15px; cursor: pointer; transition: all 0.2s; text-align: left; width: 100%; } .section-btn:hover, .section-btn.active { background: var(--accent-orange); color: var(--bg-primary); border-color: var(--accent-orange); } /* Section Content Panels */ .section-content { margin-top: 12px; } .section-panel { display: none; } .section-panel.active { display: block; } .section-heading { display: none; font-style: italic; font-weight: 700; color: var(--accent-orange); margin-bottom: 10px; } .section-text { font-size: 15px; line-height: 1.7; color: var(--text-white); font-style: italic; } /* Section Lines with Audio */ .section-lines { display: flex; flex-direction: column; gap: 6px; } .section-line { margin-bottom: 2px; } .section-text-urdu { color: #81c784; margin-top: 2px; } .line-audio-player { margin: 4px 0; } .line-audio-player audio { height: 28px; width: 240px; opacity: 0.8; } /* Intro Text */ .intro-text { font-size: 15px; line-height: 1.7; color: var(--text-white); font-style: italic; margin-bottom: 16px; } /* FAQ Section */ .faq-section { margin-top: 0; border-top: none; padding-top: 0; counter-reset: faq; } /* (Auto-advance progress bar removed — Next-button glow is used instead) */ .faq-title { font-size: 16px; font-weight: 700; color: var(--accent-orange); margin-bottom: 10px; } .faq-item { margin-bottom: 10px; counter-increment: faq; } .faq-btn { display: flex; align-items: flex-start; width: 100%; padding: 12px 16px; background: rgba(255, 140, 0, 0.06); color: var(--text-white); border: 1px solid rgba(255, 140, 0, 0.35); border-radius: 10px; font-size: 14px; font-weight: 500; letter-spacing: 0.2px; text-align: left; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease; } .faq-btn::before { content: "Q" counter(faq) ": "; color: var(--accent-orange); font-weight: 700; margin-right: 6px; flex-shrink: 0; line-height: inherit; } .faq-btn:hover { background: rgba(255, 140, 0, 0.18); border-color: rgba(255, 140, 0, 0.6); } .faq-btn:active { transform: scale(0.985); background: rgba(255, 140, 0, 0.28); } .faq-answer { padding: 12px 16px; background: rgba(26, 31, 58, 0.8); border-left: 3px solid var(--accent-orange); border-radius: 0 8px 8px 0; margin-top: 4px; font-size: 14px; line-height: 1.6; } .section-faqs-block { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(255, 140, 0, 0.2); counter-reset: faq; } .section-faqs-block .faq-btn { margin-bottom: 10px; } .section-faqs-heading { color: var(--accent-orange); font-size: 14px; font-weight: 700; margin-bottom: 12px; letter-spacing: 0.3px; } .source-label, .source-label-global { display: inline-block; font-size: 11px; color: var(--accent-orange); font-style: italic; margin-top: 8px; opacity: 0.8; } .source-label-global { display: none !important; } .source-label-inline { display: block; font-size: 11px; color: var(--accent-orange); font-style: italic; margin-top: 18px; margin-bottom: 6px; opacity: 0.8; text-align: right; } /* Back Link - hidden, use nav Prev button */ .back-link { display: none; } /* ============================================ Handwriting / Doodle Intro Animation ============================================ */ .intro-handwriting { position: relative; min-height: 80px; padding-bottom: 20px; } /* "Preparing content…" placeholder shown until the intro narration actually starts typing. Removed by JS as soon as the first character lands. */ .intro-loading { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 17px; font-weight: 400; color: rgba(255, 255, 255, 0.78); letter-spacing: 0.6px; display: inline-flex; align-items: baseline; padding: 6px 0 14px; animation: introLoadingFade 1.8s ease-in-out infinite; } .intro-loading.is-hidden { display: none; } .intro-loading-dots { display: inline-flex; margin-left: 6px; color: var(--accent-orange); } .intro-loading-dots > span { opacity: 0; animation: introLoadingDot 1.2s infinite; } .intro-loading-dots > span:nth-child(2) { animation-delay: 0.2s; } .intro-loading-dots > span:nth-child(3) { animation-delay: 0.4s; } @keyframes introLoadingDot { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes introLoadingFade { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .intro-handwriting-text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; line-height: 1.8; color: var(--text-white); font-style: italic; overflow: hidden; padding-bottom: 20px; } /* The hand-written characters themselves use the 'Caveat' handwriting font so the pen genuinely looks like it's writing by hand. Scoped to .hw-char so the structured "new format" intro blocks (.intro-new-*) keep their Inter look. */ .intro-handwriting-text .hw-char { display: inline; opacity: 0; animation: hwReveal 0.05s forwards; font-family: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive; font-size: 23px; font-weight: 600; font-style: normal; letter-spacing: 0.3px; } @keyframes hwReveal { to { opacity: 1; } } .hand-icon { position: absolute; left: 0; top: 0; width: 36px; height: 36px; pointer-events: none; z-index: 10; will-change: transform; transition: transform 0.1s ease-out; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); animation: handBob 0.2s ease-in-out infinite; } .hand-icon.is-paused { animation-play-state: paused; } @keyframes handBob { 0%, 100% { margin-top: 0px; } 50% { margin-top: -3px; } } /* New Format Program Introduction */ .intro-new-format { font-style: normal; } /* ── Hand-writing transcript (demo intro + welcome-back) ── Adam's words are written out by the hand icon in the self-hosted "Welcome Darling" handwriting font so the text genuinely looks hand-written by the pen. Scoped to Adam's transcript only (Maya's intro keeps Caveat). */ @font-face { font-family: 'welcomeDarling'; src: url("../fonts/welcomeDarling.542a80695d8a.woff") format('woff'); font-weight: 400; font-style: normal; font-display: swap; } :root { --font-welcome-darling: 'welcomeDarling'; } .hw-transcript { position: relative; padding: 18px 16px 40px; } .hw-transcript-text { font-family: var(--font-welcome-darling), 'Caveat', 'Bradley Hand', 'Segoe Print', cursive; font-size: 21px; line-height: 1.5; color: var(--text-white); font-weight: 400; letter-spacing: 0.5px; overflow: hidden; } .hw-transcript-text .hw-char { display: inline; opacity: 0; animation: hwReveal 0.05s forwards; font-family: var(--font-welcome-darling), 'Caveat', 'Bradley Hand', 'Segoe Print', cursive; } .hw-transcript-hand { position: absolute; left: 0; top: 0; width: 38px; height: 38px; pointer-events: none; z-index: 10; opacity: 0; will-change: transform; transition: transform 0.1s ease-out; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); animation: handBob 0.2s ease-in-out infinite; } /* Turn finished writing: the pen stops bobbing and rests on the last character (the hand stays put until the next turn resumes writing). */ .hw-transcript-hand.is-resting { animation: none; } @media (max-width: 380px) { .hw-transcript-text { font-size: 17.5px; } } @media (min-width: 1200px) { .hw-transcript-text { font-size: 23px; } } .intro-new-opening { font-size: 15px; line-height: 1.6; color: var(--text-white); margin-bottom: 16px; } .intro-new-section { margin-bottom: 12px; } /* Accordion mode */ .intro-accordion-mode { padding: 0 4px; } .intro-accordion-item { margin-bottom: 6px; border: 1px solid rgba(255, 140, 0, 0.3); border-radius: 6px; overflow: hidden; } .intro-accordion-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 14px; background: rgba(255, 140, 0, 0.08); border: none; cursor: pointer; text-align: left; font-size: 13px; font-weight: 700; color: #FF8C00; text-transform: uppercase; letter-spacing: 0.4px; transition: background 0.2s; } .intro-accordion-header:hover { background: rgba(255, 140, 0, 0.15); } .intro-accordion-header[aria-expanded="true"] { background: rgba(255, 140, 0, 0.15); } .intro-accordion-arrow { font-size: 10px; color: #FF8C00; transition: transform 0.2s; margin-left: 8px; flex-shrink: 0; } .intro-accordion-body { padding: 0 14px; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; } .intro-accordion-header[aria-expanded="true"] + .intro-accordion-body { padding: 8px 14px 12px; overflow-y: auto; } .intro-accordion-subheading { margin-top: 8px; font-size: 13px; } .intro-accordion-body .intro-new-line { margin-bottom: 5px; } /* Roadmap semester tables */ .semester-dropdown { margin: 4px 0; border-radius: 6px; overflow: hidden; } /* Apply Now accordion item */ .intro-accordion-item--apply { border: 1.5px solid rgba(255, 140, 0, 0.7); box-shadow: 0 0 8px rgba(255, 140, 0, 0.35), 0 0 2px rgba(255, 140, 0, 0.2); } .intro-accordion-header--apply { background: linear-gradient(135deg, rgba(255, 140, 0, 0.22), rgba(255, 100, 0, 0.13)); font-size: 14px; padding: 12px 14px; color: #FF8C00; font-weight: 700; text-shadow: 0 0 6px rgba(255, 140, 0, 0.4); } .intro-accordion-header--apply:hover { background: linear-gradient(135deg, rgba(255, 140, 0, 0.32), rgba(255, 100, 0, 0.2)); box-shadow: 0 0 12px rgba(255, 140, 0, 0.45); } .intro-accordion-body--apply { padding: 0 !important; } .intro-accordion-header--apply[aria-expanded="true"] + .intro-accordion-body--apply { padding: 0 !important; } .apply-now-iframe { width: 100%; min-height: 520px; border: none; display: block; } .apply-now-loader { padding: 30px 14px; text-align: center; color: #FF8C00; font-size: 14px; font-weight: 600; } .semester-dropdown-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; background: rgba(255, 140, 0, 0.08); border: 1px solid rgba(255, 140, 0, 0.25); border-radius: 6px; padding: 8px 12px; color: #FF8C00; font-size: 13px; font-weight: 700; cursor: pointer; transition: background 0.2s; } .semester-dropdown-btn:hover { background: rgba(255, 140, 0, 0.15); } .semester-dropdown-arrow { font-size: 9px; transition: transform 0.2s; } .semester-dropdown-body { display: none; padding: 4px 0 8px 0; } .roadmap-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px 0; font-size: 13px; } .roadmap-table th { background: #FF8C00; color: #fff; font-weight: 700; text-align: left; padding: 6px 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; } .roadmap-table td { padding: 5px 10px; border-bottom: 1px solid rgba(255,255,255,0.1); color: #ddd; font-size: 11px; } .roadmap-table tr:nth-child(even) td { background: rgba(255,255,255,0.03); } .roadmap-table td:first-child { width: 24px; text-align: center; font-weight: 600; color: #FF8C00; } .roadmap-table td:nth-child(2) { font-weight: 600; } .intro-new-heading { font-size: 14px; font-weight: 700; color: #FF8C00; margin: 0 0 4px 0; text-transform: uppercase; letter-spacing: 0.5px; } .intro-new-line { font-size: 14px; line-height: 1.5; color: var(--text-white); margin: 0 0 3px 0; padding-left: 16px; position: relative; } .intro-new-line::before { content: '•'; position: absolute; left: 2px; color: #FF8C00; } .intro-btn-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 0 14px; gap: 10px; } .intro-btn-row.apply-only { justify-content: center; padding: 0; margin-top: 18px; } .intro-faq-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; background: linear-gradient(135deg, #003366 0%, #005599 100%); color: #ffffff; font-size: 14px; font-weight: 700; border: 1px solid #ffffff; border-radius: 999px; cursor: pointer; animation: btn-glow-pulse 2s ease-in-out infinite; } .intro-apply-now { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; background: linear-gradient(135deg, #ff8c00 0%, #ff6b00 100%); color: #ffffff; font-size: 14px; font-weight: 700; border: 1px solid #ffffff; border-radius: 999px; cursor: pointer; text-decoration: none; animation: btn-glow-pulse 2s ease-in-out infinite; } @keyframes introNewFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .intro-hidden { display: none !important; } .awaiting-selection { display: none !important; } /* --- AI Chat Messages --- */ .chat-message { display: flex; align-items: flex-start; gap: 10px; width: 100%; margin: 12px 0; } .chat-message:first-of-type { margin-top: 4px; } .chat-message.user-message { justify-content: flex-end; } .chat-message.bot-message { justify-content: flex-start; } .chat-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 30px; font-size: 11px; font-weight: 800; letter-spacing: 0; color: #ffffff; background: #32415f; border: 1px solid rgba(255,255,255,0.18); } .user-message .chat-avatar { background: var(--accent-orange); color: #101828; border-color: rgba(255,255,255,0.25); } .bot-message .chat-avatar { background: #0f766e; } .chat-content { display: flex; flex-direction: column; max-width: min(calc(100% - 46px), 680px); min-width: 0; } .user-message .chat-content { align-items: flex-end; max-width: min(78%, 640px); } .bot-message .chat-content { align-items: flex-start; } .chat-speaker { margin: 0 2px 4px; color: rgba(255,255,255,0.72); font-size: 11px; font-weight: 700; line-height: 1.2; } .chat-bubble { padding: 10px 14px; border-radius: 8px; font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.9rem; line-height: 1.5; letter-spacing: normal; word-spacing: normal; white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; box-shadow: 0 4px 12px rgba(0,0,0,0.12); } .user-message .chat-bubble { color: #ffffff; background: #26385f; border: 1px solid rgba(255,140,0,0.45); } .bot-message .chat-bubble { color: #f8fafc; background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(148, 163, 184, 0.24); } /* ── Queued message badge (shown when user speaks during greeting) ── */ .chat-queued-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px; border-radius: 12px; background: rgba(255, 140, 0, 0.15); border: 1px solid rgba(255, 140, 0, 0.4); font-size: 0.75rem; color: #fbbf24; animation: queuedBadgePulse 1.2s ease-in-out infinite; } .chat-queued-badge .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; animation: queuedDotBlink 0.8s ease-in-out infinite alternate; } @keyframes queuedBadgePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes queuedDotBlink { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.2); opacity: 1; } } .bot-body, .user-body { display: inline; } .suggest-link { display: inline-flex; margin-top: 8px; color: var(--accent-orange); font-weight: 700; text-decoration: none; } .suggest-link:hover { text-decoration: underline; } /* ─── Apply Options Buttons ─────────────────────────────────── */ .apply-options-container { width: 100%; margin: 16px 0; padding: 16px; background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(249, 141, 2, 0.3); border-radius: 12px; } .apply-options-title { font-family: system-ui, -apple-system, sans-serif; font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); text-align: center; margin-bottom: 12px; } .apply-options-buttons { display: flex; gap: 12px; justify-content: center; } .apply-option-btn { flex: 1; max-width: 200px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; background: rgba(22, 33, 62, 0.8); cursor: pointer; transition: all 0.2s ease; } .apply-option-btn:hover { border-color: var(--accent-orange); background: rgba(249, 141, 2, 0.1); transform: translateY(-2px); } .apply-option-btn .apply-btn-icon { font-size: 1.5rem; } .apply-option-btn .apply-btn-label { font-family: system-ui, -apple-system, sans-serif; font-size: 0.85rem; font-weight: 700; color: #ffffff; } .apply-option-btn .apply-btn-desc { font-family: system-ui, -apple-system, sans-serif; font-size: 0.7rem; color: rgba(255, 255, 255, 0.5); } .apply-option-btn.ai-btn { border-color: rgba(249, 141, 2, 0.4); } .apply-option-btn.ai-btn:hover { background: rgba(249, 141, 2, 0.15); } /* Lead Success */ .lead-success-container { width: 100%; margin: 16px 0; padding: 16px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.4); border-radius: 12px; display: flex; align-items: center; gap: 12px; } .lead-success-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(16, 185, 129, 0.2); border: 2px solid #10b981; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #10b981; flex-shrink: 0; } .lead-success-text { font-family: system-ui, -apple-system, sans-serif; font-size: 0.85rem; color: #a7f3d0; line-height: 1.4; } /* --- POST-SUBMISSION VOUCHERS (AI Adam apply flow) --- */ .voucher-success { width: 100%; margin: 4px 0 16px; display: flex; flex-direction: column; gap: 12px; } .voucher-instructions { padding: 14px 16px; background: rgba(6, 182, 212, 0.08); border: 1px solid rgba(6, 182, 212, 0.32); border-radius: 12px; font-family: system-ui, -apple-system, sans-serif; } .voucher-instructions-title { font-size: 0.9rem; font-weight: 800; color: #67e8f9; margin-bottom: 8px; } .voucher-instructions-list { margin: 0; padding-left: 18px; font-size: 0.82rem; line-height: 1.5; color: #cbd5e1; } .voucher-instructions-list li { margin-bottom: 5px; } .voucher-instructions-list strong { color: #e7eefc; } .voucher-card { padding: 14px 16px; background: rgba(245, 130, 32, 0.08); border: 1px solid rgba(245, 130, 32, 0.34); border-radius: 12px; font-family: system-ui, -apple-system, sans-serif; } .voucher-card-title { font-size: 0.85rem; font-weight: 800; color: #f8b07a; margin-bottom: 10px; } .voucher-card-list { display: flex; flex-direction: column; gap: 10px; } .voucher-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; background: rgba(245, 130, 32, 0.10); color: inherit; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .voucher-item:hover { background: rgba(245, 130, 32, 0.18); border-color: rgba(245, 130, 32, 0.5); } .voucher-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .voucher-item-info strong { font-size: 0.88rem; color: #fff; } .voucher-item-meta { font-size: 0.74rem; color: #9aa3b2; } .voucher-item-dl { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; font-weight: 800; color: #f58220; white-space: nowrap; flex-shrink: 0; } .voucher-note { padding: 12px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; font-size: 0.8rem; color: #cbd5e1; font-family: system-ui, -apple-system, sans-serif; } /* --- REVIEW FORM --- */ .review-form-container { width: 100%; margin: 16px 0; padding: 16px; background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(99, 102, 241, 0.4); border-radius: 12px; } .review-form-title { font-family: system-ui, -apple-system, sans-serif; font-size: 1rem; font-weight: 600; color: #e2e8f0; margin-bottom: 4px; } .review-form-subtitle { font-family: system-ui, -apple-system, sans-serif; font-size: 0.8rem; color: #94a3b8; margin-bottom: 12px; } .review-form { display: flex; flex-direction: column; gap: 10px; } .review-field { display: flex; flex-direction: column; gap: 3px; } .review-label { font-family: system-ui, -apple-system, sans-serif; font-size: 0.75rem; color: #94a3b8; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .review-input { font-family: system-ui, -apple-system, sans-serif; font-size: 0.88rem; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(148, 163, 184, 0.3); background: rgba(15, 23, 42, 0.6); color: #e2e8f0; outline: none; transition: border-color 0.2s; } .review-input:focus { border-color: #6366f1; } .review-input select { appearance: none; } .review-form-actions { margin-top: 12px; display: flex; justify-content: center; } .review-submit-btn { font-family: system-ui, -apple-system, sans-serif; font-size: 0.9rem; font-weight: 600; padding: 10px 28px; border-radius: 8px; border: none; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; cursor: pointer; transition: opacity 0.2s, transform 0.1s; } .review-submit-btn:hover { opacity: 0.9; transform: translateY(-1px); } .review-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .application-mode-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; } .application-mode-btn { min-height: 40px; padding: 8px 10px; color: #111827; background: var(--accent-orange); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 800; } .application-mode-btn.is-secondary { color: #f8fafc; background: rgba(22, 33, 62, 0.86); border-color: rgba(148, 163, 184, 0.34); } .application-mode-btn:hover { opacity: 0.92; } .chat-application-form { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(148, 163, 184, 0.22); } .application-step-note { color: var(--accent-orange); font-size: 12px; font-weight: 800; line-height: 1.35; } .application-field { display: grid; gap: 5px; } .application-field span { color: rgba(255,255,255,0.72); font-size: 11px; font-weight: 700; } .application-field input { width: 100%; min-height: 38px; padding: 8px 10px; color: #ffffff; background: rgba(22, 33, 62, 0.86); border: 1px solid rgba(148, 163, 184, 0.34); border-radius: 8px; font: inherit; outline: none; } .application-field input:focus { border-color: var(--accent-orange); box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.16); } .application-field.has-error input { border-color: #fb7185; box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.14); } .application-form-status { min-height: 16px; color: rgba(255,255,255,0.68); font-size: 12px; line-height: 1.35; } .application-form-status.is-error { color: #fecdd3; } .application-form-status.is-success { color: #bbf7d0; } .application-submit-btn { min-height: 40px; padding: 9px 14px; color: #111827; background: var(--accent-orange); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 800; transition: opacity 0.2s, transform 0.2s; } .application-submit-btn:hover:not(:disabled) { opacity: 0.92; transform: translateY(-1px); } .application-submit-btn:disabled { cursor: default; opacity: 0.7; } .application-next-step-actions { display: grid; gap: 8px; margin-top: 12px; } .application-next-step-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 12px; color: #111827; background: var(--accent-orange); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; font-size: 13px; font-weight: 800; text-align: center; text-decoration: none; } .application-next-step-btn.is-secondary { color: #f8fafc; background: rgba(22, 33, 62, 0.86); border-color: rgba(148, 163, 184, 0.34); } .application-next-step-btn:hover { opacity: 0.92; } /* --- CHAT BAR --- */ .chat-bar { grid-area: chat; position: relative; display: flex; align-items: center; gap: 4px; padding: 8px 4px; background: var(--bg-secondary); border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); } /* 75/25 split wrapper: input+send on the left, talk-btn on the right */ .chat-input-wrap { flex: 0 0 calc(70% - 2px); position: relative; display: flex; align-items: center; height: 44px; } .chat-input { width: 100%; padding: 5px 44px 5px 14px; /* right padding leaves room for the embedded send */ /* Always-on CALM animated ORANGE border (idle): muted orange tones + slow spin (matches the Apply Now button palette). Brightens to full orange + faster spin during live voice states via .is-voice-status / .is-ai-speaking / .is-resume-glow below. */ border: 2px solid transparent; background: linear-gradient(rgb(22, 33, 62), rgb(22, 33, 62)) padding-box, conic-gradient( from var(--ai-border-angle), rgba(255, 140, 0, 0.38), rgba(255, 179, 71, 0.30), rgba(255, 107, 0, 0.38), rgba(255, 210, 127, 0.26), rgba(255, 140, 0, 0.38) ) border-box; background-repeat: no-repeat; animation: aiSpeakingBorder 9s linear infinite; border-radius: 8px; color: var(--text-white); font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.9rem; letter-spacing: normal; outline: none; height: 44px; min-height: 44px; max-height: 44px; text-align: left; resize: none; box-sizing: border-box; overflow: hidden; } /* Chat input placeholder ("Type a message…"). ONE font across the whole project and every state (idle, listening, speaking, thinking, paused) so the prompt always looks identical: big, bold, white. */ .chat-input::placeholder { color: #ffffff; font-size: 18px; font-weight: 800; letter-spacing: 0.3px; opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 380px) { .chat-input::placeholder { font-size: 16px; } } /* LIVE VOICE STATUS — shown big + bold inside the chat input while a voice call is active ("Adam is listening / speaking / thinking / paused"). Overrides the normal placeholder so the state reads clearly at a glance. The live-state "Type a message…" prompt (.is-live) shares this exact font so every state looks identical. */ .chat-input.is-voice-status::placeholder, .chat-input.is-live::placeholder { color: #ffffff; font-size: 18px; font-weight: 800; letter-spacing: 0.3px; opacity: 1; } @media (max-width: 380px) { .chat-input.is-voice-status::placeholder, .chat-input.is-live::placeholder { font-size: 16px; } } .chat-input:focus { /* Keep the animated gradient border on focus (don't replace with a solid). */ border-color: transparent; } /* --- AI SPEAKING: animated colorful rotating border around the input --- */ /* Applied via JS (chatInput.classList.add('is-ai-speaking')) while Adam is producing/playing a response. Uses a conic-gradient whose angle is animated via the registered custom property `--ai-border-angle`, so the colors truly travel around the perimeter of the input instead of sliding off one side. */ @property --ai-border-angle { syntax: ''; initial-value: 0deg; inherits: false; } .chat-input.is-ai-speaking, .chat-input.is-resume-glow, .chat-input.is-voice-status { border: 2px solid transparent; background: linear-gradient(rgb(22, 33, 62), rgb(22, 33, 62)) padding-box, conic-gradient( from var(--ai-border-angle), #ff8c00, #ffb347, #ff6b00, #ffd27f, #ff8c00 ) border-box; background-repeat: no-repeat; animation: aiSpeakingBorder 3s linear infinite; } .chat-input.is-ai-speaking:focus, .chat-input.is-resume-glow:focus, .chat-input.is-voice-status:focus { /* Keep the animated border instead of the static orange focus border. */ border-color: transparent; } /* LIVE CONVERSATION — the input stays "Type a message…" but rendered in an elegant, professional bold style with the bright animated border, so it's clearly an active session. The live state (listening / speaking / thinking) is shown on the Talk button, never here. */ .chat-input.is-live { border: 2px solid transparent; background: linear-gradient(rgb(22, 33, 62), rgb(22, 33, 62)) padding-box, conic-gradient( from var(--ai-border-angle), #ff8c00, #ffb347, #ff6b00, #ffd27f, #ff8c00 ) border-box; background-repeat: no-repeat; animation: aiSpeakingBorder 3s linear infinite; } .chat-input.is-live:focus { border-color: transparent; } @keyframes aiSpeakingBorder { to { --ai-border-angle: 360deg; } } /* Fallback for browsers that don't support @property (the colors will still travel, just via a sliding linear gradient, never fully disappearing because the gradient repeats). */ @supports not (background: conic-gradient(from 0deg, red, blue)) { .chat-input { background: linear-gradient(rgb(22, 33, 62), rgb(22, 33, 62)) padding-box, linear-gradient(90deg, rgba(255,140,0,0.38), rgba(255,179,71,0.30), rgba(255,107,0,0.38), rgba(255,210,127,0.26), rgba(255,140,0,0.38) ) border-box; background-size: 100% 100%, 200% 100%; animation: aiSpeakingBorderFallback 9s linear infinite; } .chat-input.is-ai-speaking, .chat-input.is-resume-glow, .chat-input.is-voice-status { background: linear-gradient(rgb(22, 33, 62), rgb(22, 33, 62)) padding-box, linear-gradient(90deg, #ff8c00, #ffb347, #ff6b00, #ffd27f, #ff8c00 ) border-box; background-size: 100% 100%, 200% 100%; animation: aiSpeakingBorderFallback 3s linear infinite; } @keyframes aiSpeakingBorderFallback { 0% { background-position: 0 0, 0% 50%; } 100% { background-position: 0 0, 200% 50%; } } } .chat-mic-btn { width: 44px; height: 44px; border-radius: 8px; background: var(--accent-purple); border: 1px solid rgba(255,255,255,0.2); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; transition: background 0.2s, box-shadow 0.2s, transform 0.2s, border-color 0.2s, opacity 0.2s; box-shadow: 0 8px 18px rgba(0,0,0,0.24); } .chat-mic-btn:hover { opacity: 0.95; } /* Mic icon set — legacy (icon-only mic button removed; kept for any remnant references) */ .chat-mic-btn { display: none; } .chat-mic-btn .mic-icon-stop { display: none; } .chat-mic-btn .mic-icon-muted { display: none; } .chat-mic-btn .mic-icon-default { display: none; } /* ── "Talk to Adam" text button (right side, 40%) ──────────────────────── */ .chat-talk-btn { flex: 0 0 calc(30% - 2px); height: 44px; border-radius: 8px; background: #1a1f3a; border: 1px solid #ffffff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; color: #fff; font-family: inherit; font-size: 0.82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; transition: background 0.2s, box-shadow 0.2s, border-color 0.2s; } .chat-talk-btn:hover { opacity: 0.95; } /* Adam profile thumbnail shown before the "Talk to Adam" label. */ .chat-talk-btn .talk-btn-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: 50% 50%; border: 1.5px solid rgba(255, 255, 255, 0.85); flex-shrink: 0; background: #0d1430; } .chat-talk-btn .talk-btn-icon { font-size: 1rem; flex-shrink: 0; } .chat-talk-btn .talk-btn-label { overflow: hidden; text-overflow: ellipsis; } /* Two-line stacked label: action word on top, counselor name below. */ .chat-talk-btn .talk-btn-stack { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; overflow: hidden; max-width: 100%; } .chat-talk-btn .talk-btn-action { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; opacity: 0.92; white-space: nowrap; } .chat-talk-btn .talk-btn-name { font-size: 0.95rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Talk-btn states (applied via JS on #mic-btn, which is now the talk btn) */ .chat-talk-btn.is-listening { background: #1a1f3a; border-color: #ffffff; animation: talkBtnPulse 1.6s ease-in-out infinite; } .chat-talk-btn.is-paused { background: #1a1f3a; border-color: #ffffff; } .chat-talk-btn.is-resume { background: #1a1f3a; border-color: #ffffff; } @keyframes talkBtnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0.45), 0 0 10px rgba(255, 140, 0, 0.35); } 50% { box-shadow: 0 0 0 4px rgba(255, 140, 0, 0.16), 0 0 22px rgba(255, 140, 0, 0.60); } } @keyframes talkBtnPausePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* ── Embedded send button (inside the input, right edge) ───────────────── */ .chat-send-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 6px; background: var(--accent-orange); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: opacity 0.2s; z-index: 1; } .chat-send-btn:hover { opacity: 0.85; } /* Disabled state for chat controls (used while Adam is answering). */ .chat-talk-btn:disabled, .chat-mic-btn:disabled, .chat-send-btn:disabled, .chat-input:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; filter: grayscale(0.3); } /* Keep the animated rainbow border visible even when the input is disabled. */ .chat-input.is-ai-speaking:disabled { opacity: 1; filter: none; } /* --- VISUAL WINDOW --- */ .visual-window { grid-area: visual; overflow: hidden; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; position: relative; /* The avatar/video area is tap-to-pause everywhere (live Adam + narration), so signal it's interactive on every page. */ cursor: pointer; } .visual-window:active { /* subtle press feedback so the tap-to-pause gesture feels responsive */ filter: brightness(0.97); } .avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; } .avatar-image-fallback { z-index: 0; } .avatar-idle-video { z-index: 1; } .avatar-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; z-index: 3; transition: opacity 0.3s ease; } /* Second lipsync buffer — stacked on top for seamless crossfade looping */ .avatar-video-b { z-index: 4; } /* Hide Maya/Sam idle video during voice chat mode */ .app-shell.voice-chat-mode .avatar-idle-video { display: none !important; } /* Connecting Overlay */ .avatar-connecting-overlay { position: absolute; inset: 0; z-index: 5; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 0; background: rgba(10, 10, 20, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: none; animation: connFadeIn 0.3s ease; } .avatar-connecting-overlay.is-active { display: flex; } .conn-card { display: flex; flex-direction: column; align-items: center; gap: 14px; } .conn-ring { position: relative; width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; } .conn-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .conn-ring-track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 3; } .conn-ring-progress { fill: none; stroke: #ff8c00; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 226; stroke-dashoffset: 170; animation: connRingSpin 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .avatar-connecting-overlay.is-reconnecting .conn-ring-progress { stroke: var(--accent-orange, #f98d02); } /* Adam's circular face inside the connecting ring. */ .conn-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; border: 2px solid rgba(255, 140, 0, 0.65); box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.18), 0 0 18px rgba(255, 140, 0, 0.40); animation: connAvatarPulse 2s ease-in-out infinite; } .avatar-connecting-overlay.is-reconnecting .conn-avatar { border-color: rgba(249, 141, 2, 0.7); box-shadow: 0 0 0 3px rgba(249, 141, 2, 0.18), 0 0 18px rgba(249, 141, 2, 0.40); } .connecting-label { font-size: 14px; font-weight: 700; color: rgba(255, 255, 255, 0.95); letter-spacing: 0.3px; } .conn-attempt { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.45); min-height: 14px; } @keyframes connFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes connRingSpin { 0% { stroke-dashoffset: 226; transform: rotate(0deg); } 50% { stroke-dashoffset: 60; } 100% { stroke-dashoffset: 226; transform: rotate(360deg); } } @keyframes connIconPulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 1; } } @keyframes connAvatarPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } } /* Adam Thinking Overlay */ .avatar-thinking-overlay { position: absolute; inset: 0; z-index: 4; display: none; align-items: flex-end; justify-content: center; pointer-events: none; } .avatar-thinking-overlay.is-active { display: flex; } .avatar-thinking-dots { display: flex; gap: 6px; padding-bottom: 18px; align-items: center; } .avatar-thinking-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.9); animation: adamThinkPulse 1.4s ease-in-out infinite; box-shadow: 0 0 6px rgba(255,255,255,0.5); } .avatar-thinking-dots span:nth-child(2) { animation-delay: 0.2s; } .avatar-thinking-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes adamThinkPulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.2); } } /* Avatar waiting overlay — shown while narration video is loading */ .avatar-waiting-overlay { position: absolute; inset: 0; z-index: 4; display: none; flex-direction: column; align-items: center; justify-content: center; background: rgba(10, 10, 20, 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; } .avatar-waiting-overlay.is-active { display: flex; } .avatar-waiting-card { display: flex; flex-direction: column; align-items: center; gap: 12px; } .avatar-waiting-label { font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.95); letter-spacing: 0.4px; animation: avatarWaitingPulse 1.8s ease-in-out infinite; } .avatar-waiting-dots { display: flex; gap: 7px; align-items: center; } .avatar-waiting-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); animation: avatarWaitingDot 1.4s ease-in-out infinite; box-shadow: 0 0 6px rgba(255, 255, 255, 0.5); } .avatar-waiting-dots span:nth-child(2) { animation-delay: 0.2s; } .avatar-waiting-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes avatarWaitingDot { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.2); } } @keyframes avatarWaitingPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } /* Avatar pause overlay — shown when user freezes the AI by tapping the avatar */ .avatar-pause-overlay { position: absolute; inset: 0; z-index: 6; display: none; /* toggled to flex via JS */ flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(8, 15, 35, 0.30); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); pointer-events: none; cursor: pointer; } .avatar-pause-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.40); border: 1.5px solid rgba(255, 255, 255, 0.75); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.30); transition: transform 0.2s ease; } .visual-window.is-playback-paused:hover .avatar-pause-icon { transform: scale(1.06); } .avatar-pause-icon svg { margin-left: 3px; /* optically center the play triangle */ } .avatar-pause-hint { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.85); letter-spacing: 0.2px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); } .visual-window.is-playback-paused { cursor: pointer; } .visual-window.is-thinking::after { content: ''; position: absolute; inset: 0; z-index: 3; border: 2px solid rgba(99, 179, 237, 0.6); border-radius: inherit; animation: adamThinkGlow 2s ease-in-out infinite; pointer-events: none; } @keyframes adamThinkGlow { 0%, 100% { border-color: rgba(99, 179, 237, 0.3); box-shadow: inset 0 0 8px rgba(99, 179, 237, 0.1); } 50% { border-color: rgba(99, 179, 237, 0.7); box-shadow: inset 0 0 16px rgba(99, 179, 237, 0.25); } } .visual-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; z-index: 2; opacity: 1; transition: opacity 0.2s ease; } .visual-video.is-fading { opacity: 0; } /* --- BOTTOM NAVIGATION --- */ .bottom-nav { grid-area: nav; display: flex; align-items: stretch; justify-content: stretch; gap: 6px; padding: 4px 4px; background: var(--bg-secondary); border-top: 1px solid rgba(255,255,255,0.05); } .nav-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 4px; background: rgba(255, 140, 0, 0.06); border: 1px solid rgba(255, 140, 0, 0.35); border-radius: 10px; color: var(--accent-orange); cursor: pointer; font-size: 10px; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease; } .nav-btn:hover { background: rgba(255, 140, 0, 0.18); border-color: rgba(255, 140, 0, 0.6); } .nav-btn:active { transform: scale(0.94); background: rgba(255, 140, 0, 0.28); } /* Locked bottom nav: while in a live voice call with Adam/Zara the disrupting nav buttons (Goto/Prev/Next/Lang) are disabled and visibly dimmed so they can't interrupt the conversation. Pause/Play and Repeat stay active and are NOT dimmed. Scoped to :disabled so only the locked buttons are affected. */ .nav-btn:disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; filter: grayscale(0.4); } /* A disabled nav button must NEVER pulse — kill any lingering glow animation (e.g. the FAQ/section Next glow) so it can't keep blinking mid-conversation. */ .nav-btn:disabled, .nav-btn:disabled.is-glowing, .nav-btn:disabled.is-demo-next { animation: none; box-shadow: none; } .bottom-nav.is-nav-locked .nav-btn:disabled:hover { background: var(--bg-secondary, rgba(255,255,255,0.04)); border-color: rgba(255,255,255,0.08); } .nav-btn.is-active, .nav-btn[aria-pressed="true"] { background: var(--accent-orange); color: #ffffff; border-color: var(--accent-orange); } /* Inside glow used to highlight the Next button while the FAQ list is showing, nudging the user to advance to the program sections. */ .nav-btn.is-glowing { border-color: var(--accent-orange); background: rgba(255, 140, 0, 0.18); box-shadow: inset 0 0 10px 1px rgba(255, 154, 60, 0.55), inset 0 0 22px 4px rgba(255, 140, 0, 0.35); animation: navBtnGlowPulse 1.8s ease-in-out infinite; } @keyframes navBtnGlowPulse { 0%, 100% { box-shadow: inset 0 0 10px 1px rgba(255, 154, 60, 0.45), inset 0 0 22px 4px rgba(255, 140, 0, 0.28); } 50% { box-shadow: inset 0 0 14px 2px rgba(255, 154, 60, 0.75), inset 0 0 28px 6px rgba(255, 140, 0, 0.5); } } /* Strong, obvious glow for the AI-Tutor demo Next button (direct landing). An outer orange halo + gentle scale makes it unmistakably the next step. */ .nav-btn.is-demo-next { border-color: var(--accent-orange); color: #fff; background: rgba(255, 140, 0, 0.28); animation: demoNextGlow 1.4s ease-in-out infinite; } .nav-btn.is-demo-next .nav-label, .nav-btn.is-demo-next .nav-icon { color: #fff; font-weight: 800; } @keyframes demoNextGlow { 0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 10px 2px rgba(255, 140, 0, 0.55), 0 0 22px 6px rgba(255, 140, 0, 0.35), inset 0 0 12px 2px rgba(255, 170, 70, 0.5); } 50% { transform: translateY(-1px) scale(1.06); box-shadow: 0 0 18px 4px rgba(255, 154, 60, 0.85), 0 0 34px 10px rgba(255, 140, 0, 0.55), inset 0 0 16px 3px rgba(255, 180, 90, 0.7); } } /* AI-Tutor return: glow the 3 entry points (program buttons, chat bar, Talk to Adam) while Adam speaks the welcome-back message, until the user picks one. */ .is-return-glow { border-radius: 12px; animation: returnGlowPulse 1.5s ease-in-out infinite; } @keyframes returnGlowPulse { 0%, 100% { box-shadow: 0 0 8px 2px rgba(255, 140, 0, 0.45), 0 0 16px 4px rgba(255, 140, 0, 0.22); } 50% { box-shadow: 0 0 16px 4px rgba(255, 140, 0, 0.85), 0 0 30px 9px rgba(255, 140, 0, 0.5); } } .nav-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; } .nav-icon svg { display: block; width: 16px; height: 16px; } .nav-label { font-size: 10px; font-weight: 600; letter-spacing: 0.3px; } /* --- Visual Video (plays in visual window) --- */ .visual-video { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* --- Section Handwriting Player --- */ .section-handwriting { position: relative; min-height: 60px; } .section-handwriting-text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; line-height: 1.8; color: var(--text-white); font-style: italic; } .section-handwriting-text .hw-line { margin-bottom: 6px; } .section-handwriting-text .hw-char { display: inline; opacity: 0; animation: hwReveal 0.05s forwards; } /* FAQ answers stream like the program intro: clean paragraphs, no hand, no handwriting italic. Applied to .section-handwriting-text when streamLineText() runs. */ .section-handwriting-text.faq-stream-text { font-style: normal; font-size: 15px; line-height: 1.65; } .section-handwriting-text.faq-stream-text .faq-stream-line { margin: 0 0 10px 0; white-space: pre-wrap; } .section-handwriting-text.faq-stream-text + .section-hand, .section-handwriting.faq-stream-active .section-hand { display: none !important; } .section-hand { position: absolute; left: 0; top: 0; width: 36px; height: 36px; pointer-events: none; z-index: 10; will-change: transform; transition: transform 0.1s ease-out; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); animation: handBob 0.2s ease-in-out infinite; } /* ============================================ DESKTOP LAYOUT - Fixed Two-Window Design ============================================ */ @media (min-width: 769px) { :root { --header-height: 72px; --chat-height: 72px; --nav-height: 64px; } .app-shell { grid-template-areas: "header header" "visual title" "visual text" "nav chat"; grid-template-columns: 50% 50%; grid-template-rows: var(--header-height) auto 1fr var(--chat-height); } .app-header { padding: 0 24px; } .header-logo { width: 48px; height: 48px; } .header-uni { font-size: 16px; } .header-south-asia { font-size: 20px; } .text-window { padding: 0 28px 24px 28px; border-left: 1px solid rgba(255,255,255,0.05); } .screen-title { font-size: 24px; } .menu-btn { padding: 16px 22px; font-size: 17px; } .section-text { font-size: 16px; } .chat-bar { padding: 12px 4px; } .chat-input { font-size: 15px; padding: 12px 18px; } .chat-input::placeholder { font-size: 15px; font-weight: 700; } .visual-window { border-right: 1px solid rgba(255,255,255,0.05); } .bottom-nav { border-right: 1px solid rgba(255,255,255,0.05); align-items: center; } .nav-btn { padding: 8px 16px; min-width: 64px; font-size: 12px; } .nav-icon { font-size: 18px; } .nav-icon svg { width: 18px; height: 18px; } .nav-label { font-size: 11px; } } /* ============================================ Scrollbar Styling ============================================ */ .text-window::-webkit-scrollbar { width: 14px; } .text-window::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); } .text-window::-webkit-scrollbar-thumb { background: rgba(255, 140, 0, 0.4); border-radius: 4px; } .text-window::-webkit-scrollbar-thumb:hover { background: rgba(255, 140, 0, 0.6); } /* ─── Typing cursor animation (ChatGPT-style) ─── */ .typing-cursor::after { content: '|'; display: inline; animation: blink-cursor 0.7s step-end infinite; color: #ff8c00; font-weight: 700; margin-left: 1px; } @keyframes blink-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ─── Thinking dots animation (bouncing) ─── */ .thinking-dots { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; } .thinking-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: #ff8c00; animation: thinking-bounce 1.4s ease-in-out infinite; } .thinking-dots .dot:nth-child(2) { animation-delay: 0.2s; } .thinking-dots .dot:nth-child(3) { animation-delay: 0.4s; } @keyframes thinking-bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } /* Reconnecting animation */ #chat-input.reconnecting { animation: reconnect-pulse 1.5s ease-in-out infinite; border-color: #f5a623; } #chat-input.reconnecting::placeholder { color: #f5a623; } @keyframes reconnect-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } /* ── Mobile pull-to-refresh indicator ── */ .ptr-indicator { position: fixed; top: 10px; left: 50%; transform: translate(-50%, -64px); z-index: 4000; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #1a1f3a; border: 1px solid rgba(255, 140, 0, 0.55); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: transform 0.2s ease, opacity 0.2s ease; } .ptr-indicator.is-visible { transform: translate(-50%, 0); opacity: 1; } .ptr-indicator.is-ready { border-color: #ff8c00; background: #22305c; } .ptr-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 140, 0, 0.3); border-top-color: #ff8c00; flex-shrink: 0; } .ptr-indicator.is-refreshing .ptr-spinner { animation: ptrSpin 0.7s linear infinite; } @keyframes ptrSpin { to { transform: rotate(360deg); } } /* --- Route Options (Adam ↔ Sam inline chat buttons) --- */ .route-options-container { border-color: rgba(124, 58, 237, 0.4); } .route-accept-btn { border-color: rgba(249, 141, 2, 0.4) !important; } .route-accept-btn:hover { background: rgba(249, 141, 2, 0.15) !important; } .route-decline-btn:hover { background: rgba(255, 255, 255, 0.05) !important; } /* --- Counselor Transition Animation --- */ /* ═══════ PREMIUM COUNSELOR TRANSITION OVERLAY ═══════ */ .ct-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .ct-overlay.ct-visible { opacity: 1; pointer-events: auto; } .ct-overlay.ct-exit { opacity: 0; transition: opacity 0.5s ease; } .ct-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .ct-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 40px 48px; border-radius: 24px; background: rgba(30, 30, 40, 0.85); border: 1px solid rgba(124, 58, 237, 0.25); box-shadow: 0 0 60px rgba(124, 58, 237, 0.15), 0 25px 50px rgba(0, 0, 0, 0.4); transform: scale(0.9) translateY(20px); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .ct-visible .ct-card { transform: scale(1) translateY(0); } .ct-exit .ct-card { transform: scale(0.95) translateY(-10px); } .ct-avatars { display: flex; align-items: center; gap: 32px; } .ct-avatar { display: flex; flex-direction: column; align-items: center; gap: 8px; } .ct-avatar-ring { width: 72px; height: 72px; border-radius: 50%; padding: 3px; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .ct-ring-from { opacity: 0.5; transform: scale(0.85); } .ct-ring-to { background: conic-gradient(from 0deg, #7c3aed, #a78bfa, #c084fc, #7c3aed); animation: ctRingRotate 2s linear infinite; box-shadow: 0 0 20px rgba(124, 58, 237, 0.4), 0 0 40px rgba(124, 58, 237, 0.2); } .ct-resolved .ct-ring-to { background: conic-gradient(from 0deg, #4ade80, #86efac, #bbf7d0, #4ade80); box-shadow: 0 0 20px rgba(74, 222, 128, 0.4), 0 0 40px rgba(74, 222, 128, 0.2); animation: none; } .ct-avatar-icon { font-size: 32px; line-height: 1; } .ct-avatar-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .ct-avatar-name { font-size: 14px; font-weight: 700; color: #fff; letter-spacing: 0.3px; } .ct-avatar-role { font-size: 11px; color: rgba(255, 255, 255, 0.5); font-weight: 500; } /* Arrow track animation */ .ct-arrow-container { position: relative; width: 60px; height: 4px; display: flex; align-items: center; } .ct-arrow-track { width: 100%; height: 2px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; } .ct-arrow-track::after { content: ''; display: block; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, #7c3aed, #a78bfa); border-radius: 2px; animation: ctTrackSlide 1.2s ease-in-out infinite; } .ct-resolved .ct-arrow-track::after { background: linear-gradient(90deg, transparent, #4ade80, #86efac); animation: none; width: 100%; } .ct-arrow-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 8px #7c3aed; animation: ctDotTravel 1.2s ease-in-out infinite; } .ct-resolved .ct-arrow-dot { left: calc(100% - 8px) !important; background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: none; } /* Status section */ .ct-status { display: flex; align-items: center; gap: 12px; } .ct-loader { display: flex; gap: 4px; align-items: center; } .ct-loader span { width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; animation: ctBounce 1s ease-in-out infinite; } .ct-loader span:nth-child(2) { animation-delay: 0.15s; } .ct-loader span:nth-child(3) { animation-delay: 0.3s; } .ct-resolved .ct-loader span { display: none; } .ct-check-icon { width: 20px; height: 20px; color: #4ade80; animation: ctCheckPop 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .ct-status-text { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.2px; } .ct-resolved .ct-status-text { color: #4ade80; } /* Keyframes */ @keyframes ctRingRotate { to { transform: rotate(360deg); } } @keyframes ctTrackSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } } @keyframes ctDotTravel { 0% { left: 0; } 50% { left: calc(100% - 8px); } 100% { left: 0; } } @keyframes ctBounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } @keyframes ctCheckPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Keep the old avatar-transitioning class */ .avatar-video.avatar-transitioning { opacity: 0 !important; transition: opacity 0.5s ease; } @keyframes avatarPulseIn { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: scale(1); } } /* --- User Speaking Indicator (Voice Activity Wave) --- */ .speaking-indicator-msg { animation: fadeSlideUp 0.3s ease; } .speaking-indicator-bubble { background: rgba(249, 141, 2, 0.08) !important; border: 1px solid rgba(249, 141, 2, 0.25) !important; padding: 12px 20px !important; min-width: 80px; } .speaking-wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 24px; } .speaking-wave .wave-bar { display: inline-block; width: 3px; height: 8px; border-radius: 3px; background: var(--accent-orange); animation: waveAnim 1.2s ease-in-out infinite; } .speaking-wave .wave-bar:nth-child(1) { animation-delay: 0s; } .speaking-wave .wave-bar:nth-child(2) { animation-delay: 0.15s; } .speaking-wave .wave-bar:nth-child(3) { animation-delay: 0.3s; } .speaking-wave .wave-bar:nth-child(4) { animation-delay: 0.45s; } .speaking-wave .wave-bar:nth-child(5) { animation-delay: 0.6s; } @keyframes waveAnim { 0%, 100% { height: 6px; opacity: 0.4; } 25% { height: 20px; opacity: 1; } 50% { height: 12px; opacity: 0.7; } } @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ─── Goto Navigation Overlay ─── */ .goto-overlay { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 0.25s ease, visibility 0.25s ease; } .goto-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .goto-panel { width: 100%; max-width: 420px; max-height: 70vh; background: var(--card-bg, #1a2332); border-radius: 18px 18px 0 0; box-shadow: 0 -4px 30px rgba(0,0,0,0.5); display: flex; flex-direction: column; overflow: hidden; animation: gotoSlideUp 0.25s ease-out; } @keyframes gotoSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* Desktop: center the panel as a modal */ @media (min-width: 768px) { .goto-overlay { align-items: center; } .goto-panel { max-width: 380px; max-height: 60vh; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.6); animation: gotoScaleIn 0.2s ease-out; } @keyframes gotoScaleIn { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } } .goto-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px 10px; border-bottom: 1px solid rgba(255,255,255,0.08); } .goto-panel-title { font-size: 15px; font-weight: 700; color: #fff; } .goto-close-btn { background: none; border: none; color: rgba(255,255,255,0.6); font-size: 24px; cursor: pointer; padding: 0 4px; line-height: 1; } .goto-close-btn:hover { color: #fff; } .goto-panel-body { overflow-y: auto; padding: 12px 14px 20px; display: flex; flex-direction: column; gap: 6px; } .goto-section-label { font-size: 11px; font-weight: 700; color: rgba(255,140,0,0.85); text-transform: uppercase; letter-spacing: 0.5px; margin: 8px 0 4px; } .goto-section-label:first-child { margin-top: 0; } .goto-item { display: block; width: 100%; text-align: left; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,140,0,0.25); background: rgba(255,140,0,0.06); color: #fff; font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.15s, border-color 0.15s; text-decoration: none; } .goto-item:hover { background: rgba(255,140,0,0.18); border-color: rgba(255,140,0,0.5); } .goto-item.is-current { border-color: var(--accent-orange, #FF8C00); background: rgba(255,140,0,0.22); } .goto-loading { text-align: center; color: rgba(255,255,255,0.5); padding: 20px; font-size: 13px; } /* ── "Resume with Adam" affordance — now on the Talk button (is-resume class). The CSS is on .chat-talk-btn.is-resume (defined above). The old input-glow is no longer needed since the talk button itself changes color/text. ── */ /* ── Welcome Demo Page ── */ .welcome-demo-content { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 0px 16px 40px; gap: 16px; } .welcome-demo-heading { font-size: 22px; font-weight: 700; color: #fff; } .welcome-demo-subtext { font-size: 14px; color: rgba(255,255,255,0.85); margin-bottom: 12px; } .welcome-demo-stream { text-align: left; width: 100%; padding: 0; } .welcome-demo-stream .welcome-demo-subtext { font-size: 15px; font-style: normal; line-height: 1.6; color: rgba(255,255,255,0.88); } .welcome-demo-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; } .welcome-demo-btn { display: inline-block; background: linear-gradient(135deg, #FF8C00, #FF6B00); color: #fff; font-size: 17px; font-weight: 700; padding: 14px 36px; border-radius: 30px; text-decoration: none; box-shadow: 0 4px 16px rgba(255,140,0,0.5); transition: transform 0.2s, box-shadow 0.2s; } .welcome-demo-btn:hover { transform: scale(1.05); box-shadow: 0 6px 24px rgba(255,140,0,0.7); } .welcome-demo-btn-secondary { background: transparent !important; border: 2px solid rgba(255,255,255,0.5); box-shadow: none !important; font-size: 14px !important; padding: 10px 28px !important; } .welcome-demo-btn-secondary:hover { border-color: rgba(255,255,255,0.85); box-shadow: none !important; transform: none !important; } .welcome-demo-or { color: rgba(255,255,255,0.5); font-size: 14px; font-weight: 600; letter-spacing: 1px; }