/* * Phase 1: legacy chat surfaces (chatBoxStyle.css … chatBoxStyle12.css) merged in * historical link order. TODO(Phase 2+): split into layout vs components vs tokens * only after visual regression passes; do not reorder layers without a baseline. */ /* === migrated: chatBoxStyle.css === */ /* ----------- Scrollbar, Preloader, Staged Reveal, Nav Reveal Chip ----------- */ ::-webkit-scrollbar { width: 8px; background-color: transparent; } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; } ::-webkit-scrollbar-thumb { background-color: rgba(128, 128, 128, 0.3); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } html { scrollbar-width: thin; scrollbar-color: rgba(128, 128, 128, 0.3) transparent; } :root { /* Core */ --white: #fbfbfb; --black: #000000; --radius-0: 0rem; /* Fonts (make sure you load these fonts in separately) */ --brand-header: "Larken", serif; --montserrat-para: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* Palette */ --light-black: #252525; --wm-primary-blue: #00203f; --light-white: #bcbcbd; --peach: #fe8963; --dark-peach: #e02415; --lellow: #ffed87; --lightest-white: #f3ecec; --lightest-black: #3b3b3b; --light-blue: #cdeffb; --wm-light-blue: #0d3c6b; --lighter-white: #f3f3f3; --dark-blue-background: #020016; --black-blue-black: #01000d; /* Borders / glass / status */ --wm-accent-border: #136df4; --og-light-border: rgba(123, 173, 241, 0.67); --dark-blue-glass: rgba(1, 0, 13, 0.5); --green-50-opacity: rgba(0, 122, 65, 0.5); --green-100: #007a41; /* Scale tokens */ --300: #d1d8f1; --400: #aeb9e1; --500: #7e89ac; --600: #384261; --700: #0f1834; /* App-specific */ --sidebar-bg: #071025; --light-border: #384261; --border-card: #5371cf; --bg-card: #121d3f; --text-blue: #4aa8f2; /* Shadows */ --shadow-blue-1: #1764a5; --shadow-blue-2: #1e5ba0; --shadow-blue-3: #0d3c6b; --blue-shadow: rgba(123, 173, 241, 0.3); --webflow-blue: rgba(123, 173, 241, 0.25); /* Preloader */ --wm-blue-1: #0a4dff; --wm-cyan-1: #37b9ff; --wm-dark: #071022; /* Nav reveal chip */ --wm-chip: rgba(15, 25, 48, 0.92); --wm-border: rgba(125, 180, 255, 0.26); --wm-glow: rgba(120, 170, 255, 0.78); --wm-glow-soft: rgba(120, 170, 255, 0.28); } @keyframes wm-breathe { 0%, 100% { filter: blur(20px) saturate(110%); opacity: 0.95; } 50% { filter: blur(26px) saturate(135%); opacity: 1; } } @keyframes wm-shimmer { 0%, 100% { opacity: 0.85; filter: blur(7px); } 50% { opacity: 1; filter: blur(10px); } } @keyframes wm-preloader-bar { to { width: 100%; } } @keyframes wm-preloader-video-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 0.8; transform: scale(1); } } @keyframes wm-preloader-video-saturate { from { filter: saturate(0); } to { filter: saturate(1); } } /* Concentric ripple preloader: expand from center, stay visible until exit (fade/scale to 0 only on --exiting) */ @keyframes wm-preloader-ripple { 0% { transform: scale(0); opacity: 0; } 20% { opacity: 0.82; } 100% { transform: scale(1.5); opacity: 0.82; } } @media (prefers-reduced-motion: reduce) { #wm-preloader .preloader__progressbar-3::before, #wm-preloader .preloader__progressbar-3::after { animation: none; } #wm-preloader.wm-preloader--running .preloader__progressbar-3 { animation: none; width: 100%; } #wm-preloader .preloader-ripple { animation: none; opacity: 0; } } #wm-preloader { position: fixed; inset: 0; z-index: 999999; background: #000000; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; overflow: hidden; } #wm-preloader .preloader-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; opacity: 0; transform: scale(0.5); will-change: opacity, transform; transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s; } #wm-preloader.wm-preloader--running .preloader-inner { opacity: 1; transform: scale(1); } #preloaderWMLogo { width: 120px; height: auto; will-change: transform, opacity; transition: opacity 0.5s ease, transform 0.5s ease; } #wm-preloader .preloader__loading { width: 160px; position: relative; z-index: 10; overflow: visible; will-change: transform, opacity; transition: opacity 0.5s ease 0.12s, transform 0.5s ease 0.12s; } @media (max-width: 768px) { #wm-preloader .preloader-ripples, #wm-preloader .preloader-video-mask { display: none; } #wm-preloader .preloader__loading { width: 80px; } } #wm-preloader .preloader__progressbar-3 { position: relative; height: 4px; border-radius: 4px; background: linear-gradient( 90deg, #0b2d6e 0%, var(--wm-blue-1) 58%, var(--wm-cyan-1) 100% ); box-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25) inset, 0 1px 1px rgba(0, 0, 0, 0.35) inset; width: 0; will-change: width; overflow: visible; } #wm-preloader.wm-preloader--running .preloader__progressbar-3 { animation: wm-preloader-bar var(--wm-preloader-bar-duration, 6s) linear forwards; } #wm-preloader .preloader__progressbar-3::after { content: ""; position: absolute; top: 50%; right: 0; transform: translate(50%, -50%); width: 110px; height: 70px; pointer-events: none; background: radial-gradient( 60% 55% at 55% 50%, rgba(55, 185, 255, 0.9) 0%, rgba(55, 185, 255, 0.4) 40%, rgba(55, 185, 255, 0.15) 65%, transparent 100% ); filter: blur(16px) saturate(125%); mix-blend-mode: screen; animation: wm-breathe 2.2s ease-in-out infinite; } #wm-preloader .preloader__progressbar-3::before { content: ""; position: absolute; top: 50%; right: 0; transform: translate(40%, -50%); width: 160px; height: 6px; border-radius: 6px; background: linear-gradient( 90deg, rgba(0, 0, 0, 0) 0%, rgba(55, 185, 255, 0.3) 35%, rgba(55, 185, 255, 0.65) 55%, rgba(55, 185, 255, 0) 100% ); filter: blur(6px); mix-blend-mode: screen; opacity: 0.9; animation: wm-shimmer 1.8s ease-in-out infinite; } /* Ripple container: fixed centered behind video/logo/bar */ #wm-preloader .preloader-ripples { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 0; pointer-events: none; overflow: hidden; } #wm-preloader .preloader-ripple { position: absolute; width: 100vmax; height: 100vmax; border-radius: 50%; background: radial-gradient( circle at center, transparent 0%, transparent 25%, rgba(0, 12, 28, 0.88) 50%, rgba(0, 60, 140, 0.92) 85%, rgba(0, 90, 160, 0.95) 100% ); mix-blend-mode: screen; will-change: transform, opacity, filter; transform: scale(0); opacity: 0; filter: saturate(0); } #wm-preloader.wm-preloader--running .preloader-ripple--1 { animation: wm-preloader-ripple 7s 0s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards, wm-preloader-video-saturate 5.5s 0.5s linear forwards; } #wm-preloader.wm-preloader--running .preloader-ripple--2 { animation: wm-preloader-ripple 7s 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards, wm-preloader-video-saturate 5.5s 0.5s linear forwards; } #wm-preloader.wm-preloader--running .preloader-ripple--3 { animation: wm-preloader-ripple 7s 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards, wm-preloader-video-saturate 5.5s 0.5s linear forwards; } #wm-preloader.wm-preloader--running .preloader-ripple--4 { animation: wm-preloader-ripple 7s 4.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards, wm-preloader-video-saturate 5.5s 0.5s linear forwards; } #wm-preloader.wm-preloader--running .preloader-ripple--5 { animation: wm-preloader-ripple 7s 6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards, wm-preloader-video-saturate 5.5s 0.5s linear forwards; } #wm-preloader .preloader-video-mask { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80vmin; height: 80vmin; max-width: 560px; max-height: 560px; z-index: 1; overflow: hidden; isolation: isolate; -webkit-mask-image: linear-gradient( to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100% ), linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100% ); mask-image: linear-gradient( to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100% ), linear-gradient( to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 100% ); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-composite: source-in; mask-composite: intersect; will-change: opacity, transform; transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s; } #wm-preloader video.preloader-bg-video { width: 100%; height: 100%; object-fit: cover; opacity: 0; mix-blend-mode: screen; will-change: opacity; transition: opacity 0.5s ease 0.35s; } #wm-preloader.wm-preloader--running video.preloader-bg-video { animation: wm-preloader-video-in 1s 0.5s ease-out forwards, wm-preloader-video-saturate 5.5s 0.5s linear forwards; } #wm-preloader.wm-preloader--exiting { opacity: 0; transition: opacity 0.5s ease-out 0.75s; } #wm-preloader.wm-preloader--exiting #preloaderWMLogo { opacity: 0; transform: scale(0); transition: opacity 0.4s ease, transform 0.4s ease; } #wm-preloader.wm-preloader--exiting .preloader__loading { opacity: 0; transform: scale(0); transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s; } #wm-preloader.wm-preloader--exiting .preloader-video-mask { opacity: 0; transform: translate(-50%, -50%) scale(0); transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s; } #wm-preloader.wm-preloader--exiting .preloader-inner { opacity: 0; transform: scale(0); transition: opacity 0.5s ease 0.35s, transform 0.5s ease 0.35s; } /* Staged reveal: 1) background, 2) sidebar + input + dock + navbar, 3) tiles + navbar up */ .background-image { transition: opacity 1.4s ease-out; } body.wm-preloader-active .background-image { opacity: 0; } body.wm-preloader-active .ai-sidebar-container { transform: translateX(-100%); } body.wm-preloader-active .ai-input-wrapper { transform: translate(-50%, 28px) !important; opacity: 0 !important; } .ai-sidebar-container { transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1), width 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .ai-input-wrapper { transition: transform 1.1s ease-out, opacity 1.1s ease-out; } body.wm-preloader-active .wmz-dock-outer { transform: translateY(28px); opacity: 0; } .wmz-dock-outer { transition: transform 1.1s ease-out, opacity 1.1s ease-out; } /* Nav reveal chip: pinned top-center, visible when navbar hidden, fades out when hover reveals navbar */ .nav-reveal-chip { position: fixed; left: 50%; top: 0; transform: translateX(-50%); width: 86px; height: 22px; z-index: 9999; pointer-events: auto; cursor: default; filter: drop-shadow(0 0 14px var(--wm-glow)); opacity: 1; transition: opacity 0.72s ease, transform 0.72s ease; } .nav-reveal-chip::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 180px; height: 54px; background: transparent; } .nav-reveal-chip__glow { position: absolute; left: 50%; top: -7px; transform: translateX(-50%); width: 112px; height: 36px; background: radial-gradient( ellipse at 50% 70%, var(--wm-glow) 0%, var(--wm-glow-soft) 38%, rgba(120, 170, 255, 0) 72% ); filter: blur(10px); opacity: 0.9; pointer-events: none; } .nav-reveal-chip__inner { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 86px; height: 22px; background: linear-gradient( to bottom, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) ), var(--wm-chip); border: 1px solid var(--wm-border); border-top: 0; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -10px 18px rgba(0, 0, 0, 0.22); clip-path: path( "M 0 0 H 86 V 12 C 86 18 80 22 74 22 H 12 C 6 22 0 18 0 12 Z" ); pointer-events: none; } /* Chip fades out when hovering nav-reveal-zone or navbar (same triggers that show navbar). !important beats inline opacity from GSAP (e.g. marketing home entrance) so hover still hides the chip. */ .nav-reveal-zone:hover ~ .nav-reveal-chip, .navbar-wrapper:hover ~ .nav-reveal-chip { opacity: 0 !important; pointer-events: none !important; } /* Preloader / step 2: chip hidden (above viewport). Step 3: chip fades in and slides down */ body.wm-preloader-active .nav-reveal-chip, body.wm-reveal-step1 .nav-reveal-chip { opacity: 0; transform: translate(-50%, -30px); pointer-events: none; } /* Reset so fixed/absolute elements align to viewport edge (sidebar flush left) */ html, body { margin: 0; padding: 0; } * { box-sizing: border-box; } div { display: block; unicode-bidi: isolate; } body { background-color: var(--dark-blue-background); font-family: var(--montserrat-para); color: var(--white); font-size: 1rem; line-height: 1.5; } h1, h2, h3, h4, h5, h6 { font-family: var(--brand-header); margin-top: 0.5rem; margin-bottom: 0; } p { font-family: var(--montserrat-para); margin-top: 0; margin-bottom: 0; } a { opacity: 1; font-family: var(--montserrat-para); color: var(--white); text-decoration: none; } ul, ol { font-family: var(--montserrat-para); margin-top: 0; margin-bottom: 10px; padding-left: 20px; } img { object-fit: cover; max-width: 100%; } figure { margin-bottom: 10px; } span { font-family: var(--montserrat-para); } @font-face { font-family: Larken; src: url("../../../assets/fonts/Larken-ExtraBold.otf") format("opentype"), url("../../../assets/fonts/Larken-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: Larken; src: url("../../../assets/fonts/Larken-Black.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: Larken; src: url("../../../assets/fonts/Larken-MediumItalic.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: Larken; src: url("../../../assets/fonts/Larken-BoldItalic.otf") format("opentype"), url("../../../assets/fonts/Larken-ExtraBoldItalic.otf") format("opentype"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: Larken; src: url("../../../assets/fonts/Larken-BlackItalic.otf") format("opentype"); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: Larken; src: url("../../../assets/fonts/Larken-Thin.otf") format("opentype"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: Larken; src: url("../../../assets/fonts/Larken-LightItalic.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: Larken; src: url("../../../assets/fonts/Larken-ThinItalic.otf") format("opentype"); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: Larken; src: url("../../../assets/fonts/Larken-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: Larken; src: url("../../../assets/fonts/Larken-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: Larken; src: url("../../../assets/fonts/Larken-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: Larken; src: url("../../../assets/fonts/Larken-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } /* ----------- Navbar (main site) ----------- */ button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } .navbar-wrapper { pointer-events: auto; background-color: #0000; border-radius: 0.3rem; justify-content: center; align-items: stretch; width: 100%; padding-left: 1rem; padding-right: 1rem; display: flex; position: fixed; position: fixed; top: 1rem; left: 0; right: 0; z-index: 10001; position: absolute; /* enables hover buffer pseudo-element */ /* Hidden by default: slide up */ transform: translateY(calc(-100% - 2rem)); opacity: 0; transition: transform 720ms ease, opacity 720ms ease; } /* Hover buffer around the navbar so tiny mouse slips don't hide it */ .navbar-wrapper::before { content: ""; position: absolute; inset: -14px; /* increase for bigger buffer */ background: transparent; pointer-events: auto; } /* Invisible hover zone at the very top of the viewport (HTML: ) */ .nav-reveal-zone { position: fixed; top: 0; left: 0; right: 0; width: 100%; max-width: 100%; height: 36px; /* tweak reveal sensitivity */ box-sizing: border-box; z-index: 10002; /* above navbar wrapper so it always triggers */ background: transparent; pointer-events: auto; } /* Reveal navbar when hovering the zone OR the navbar itself */ .nav-reveal-zone:hover + .navbar-wrapper, .navbar-wrapper:hover { transform: translateY(0); opacity: 1; } /* Mobile: class-based reveal (swipe down from chip or tap chip) */ body.wm-navbar-revealed .navbar-wrapper { transform: translateY(0); opacity: 1; } body.wm-navbar-revealed .nav-reveal-chip { opacity: 0 !important; pointer-events: none !important; } /* Optional: improve keyboard accessibility (show when any nav element is focused) */ .navbar-wrapper:focus-within { transform: translateY(0); opacity: 1; } @media (prefers-reduced-motion: reduce) { .navbar-wrapper { transition: none; } } .navbar-container { z-index: 10000; background-color: var(--dark-blue-background); box-shadow: 0 0 10px 10px var(--webflow-blue); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); pointer-events: auto; border: 1px solid #fff3; border-radius: 1.3rem; justify-content: space-between; align-items: center; width: 100%; max-width: 1350px; padding-left: 1.5rem; padding-right: 1.5rem; transition: all 0.4s; display: flex; position: relative; } .navbar-container:hover { box-shadow: 0 0 5px 5px #7badf1b5; } .home-icon { justify-content: center; align-items: center; width: 100px; height: 100px; margin-top: -20px; margin-bottom: -20px; margin-left: -20px; display: flex; position: relative; inset: 0% auto 0% 0%; } .icon-logo { width: 90%; height: 90%; margin-left: 0.5rem; padding: 0.65rem; } .nav-menu-2 { justify-content: space-between; align-items: center; width: 100%; display: flex; } .w-nav-menu { float: right; position: relative; } .navmenu-container { justify-content: space-between; align-items: center; width: 100%; padding: 0.5rem 0.5rem 0.5rem 1.5rem; display: flex; } .left-nav { align-items: center; display: flex; } .center-nav { display: flex; align-items: center; justify-content: center; } .right-nav { justify-content: flex-end; display: flex; } /* Burger menu for mobile (navbar too narrow); hidden until needed – show later via media query if desired */ .menu-button-3 { display: none !important; } /* Mobile: full-viewport navbar when revealed (swipe down from chip or tap zone/chip) Override chatBoxStyle5.css #navbarChat { display: none !important } */ @media (max-width: 768px) { body.wm-navbar-revealed #navbarChat { display: flex !important; } body.wm-navbar-revealed .navbar-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: calc(100vh - var(--dash-input-pad, 140px)); padding: 0; background-color: #0f121c82; display: flex; align-items: stretch; justify-content: center; z-index: 999998; animation: wm-navbar-slide-down 0.45s ease-out forwards; backdrop-filter: blur(8px); } body.wm-navbar-revealed navbar-container { background-color: transparent; } @keyframes wm-navbar-slide-down { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } body.wm-navbar-revealed.wm-navbar-closing .navbar-wrapper { animation: wm-navbar-slide-up 0.4s ease-in forwards; } @keyframes wm-navbar-slide-up { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } } body.wm-navbar-revealed .navbar-container { display: flex; flex-direction: column; flex: 1; width: 100%; min-height: 100%; justify-content: center; align-items: center; position: relative; padding: 1rem; border-top-left-radius: 0; border-top-right-radius: 0; } body.wm-navbar-revealed .home-icon { position: absolute; top: 1rem; left: 1rem; margin: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } body.wm-navbar-revealed .icon-logo { width: auto; height: 48px; max-width: 48px; margin: 0; padding: 0; } body.wm-navbar-revealed .nav-menu-2 { flex: 1; display: flex; align-items: center; justify-content: center; } body.wm-navbar-revealed .navmenu-container { flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; } body.wm-navbar-revealed .left-nav, body.wm-navbar-revealed .center-nav, body.wm-navbar-revealed .right-nav { flex-direction: column; align-items: center; gap: 0.5rem; } body.wm-navbar-revealed .menu-button-3 { display: none !important; } } .nav-link-2 { font-family: var(--brand-header); color: var(--light-white); cursor: pointer; background-color: transparent; border-radius: 1.5rem; margin-left: 0.2rem; margin-right: 0.2rem; padding: 0.5rem 1.1rem; font-weight: 500; transition: color 0.2s, transform 0.15s; } .nav-link-2:hover { color: white; transform: translateY(-2px); } /* ----------- Feedback button & modal ----------- */ .ai-feedback-container { display: flex; align-items: center; justify-content: center; margin: 0; } .ai-feedback-button { position: relative; border: none; border-radius: 50px; padding: 0; width: 140px; height: 42px; cursor: pointer; background: transparent; overflow: visible; outline: none; z-index: 1; transition: transform 0.2s ease; } .ai-feedback-button:hover { transform: scale(1.03); } .ai-feedback-button:active { transform: scale(0.98); } .ai-button-gradient-border { position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: 50px; background: transparent; overflow: hidden; z-index: 0; } .ai-button-gradient-border::before { content: ""; position: absolute; inset: 0; border-radius: 50px; padding: 2px; background: linear-gradient( 90deg, #a41e1e, #ff8c00, #ff5900, #402cf1, #1950fa, #0068fc, #6b5bfd, #f76511 ); background-size: 400% 400%; animation: ai-animateGradient 8s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.5), inset 0 0 8px rgba(255, 140, 0, 0.5), inset 0 0 8px rgba(107, 91, 253, 0.5); } .ai-button-gradient-border::after { content: ""; position: absolute; inset: -5px; border-radius: 50px; z-index: -2; background: conic-gradient( from 0deg, #a41e1e, #ff8c00, #ff5900, #402cf1, #1950fa, #0068fc, #6b5bfd, #f76511 ); filter: blur(15px); opacity: 0.15; animation: ai-rotateGradient 10s linear infinite; } .gradient-glow { position: absolute; inset: 0; border-radius: 50px; z-index: -1; background: linear-gradient( 90deg, rgba(255, 0, 128, 0.4), rgba(255, 140, 0, 0.4), rgba(255, 206, 0, 0.4), rgba(107, 91, 253, 0.4), rgba(25, 80, 250, 0.4), rgba(0, 104, 252, 0.4), rgba(107, 91, 253, 0.4), rgba(255, 0, 128, 0.4) ); background-size: 400% 400%; filter: blur(18px); opacity: 0.5; animation: ai-animateGradient 8s linear infinite; } .ai-feedButton-content { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; height: 100%; border-radius: 50px; background: rgba(25, 25, 35, 0.9); backdrop-filter: blur(5px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(255, 255, 255, 0.3), inset 0 0 6px rgba(107, 91, 253, 0.2); z-index: 2; padding: 0 20px; overflow: hidden; } .ai-feedButton-content::before { content: ""; position: absolute; inset: 0; border-radius: 50px; box-shadow: inset 0 0 8px rgba(255, 0, 128, 0.3), inset 0 0 12px rgba(0, 104, 252, 0.3); opacity: 0.7; z-index: -1; } .ai-feedButton-content::after { content: ""; position: absolute; inset: 0; border-radius: 50px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1px 1px rgba(0, 0, 0, 0.1); pointer-events: none; } .feedback-text { font-weight: 600; font-size: 15px; color: white; letter-spacing: 0.2px; white-space: nowrap; line-height: 1; margin-bottom: 2px; font-family: var(--brand-header); } .feedback-reward-text { font-size: 9px; font-weight: 400; color: rgba(180, 180, 190, 0.65); letter-spacing: 0.2px; white-space: nowrap; line-height: 1; } .founder-note { margin-top: 16px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(107, 91, 253, 0.2); background: rgba(107, 91, 253, 0.05); font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); } .founder-note p { margin: 0 0 8px 0; } .founder-signature { font-style: italic; font-weight: 500; text-align: right; color: rgba(255, 255, 255, 0.7); font-size: 12px; } .ai-feedback-button.submitting .ai-feedButton-content { background: rgba(25, 25, 35, 0.95); } .ai-feedback-button.submitting .ai-button-gradient-border::after { animation: ai-rotateGradient 3s linear infinite; opacity: 0.25; filter: blur(12px); } @keyframes ai-animateGradient { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } } @keyframes ai-rotateGradient { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .ai-feedback-modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 15, 25, 0.8); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 99999; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .ai-feedback-modal-backdrop.active { opacity: 1; pointer-events: auto; } .ai-feedback-modal { width: 90%; max-width: 500px; background: linear-gradient( to bottom, rgba(30, 30, 50, 0.95), rgba(20, 20, 35, 0.95) ); border-radius: 16px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1); padding: 24px; position: relative; z-index: 100000; overflow: hidden; transform: scale(0.95); transition: transform 0.3s ease; margin: 0; } .ai-feedback-modal-backdrop.active .ai-feedback-modal { transform: scale(1); } .ai-feedback-modal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.1), transparent ); } .ai-feedback-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .ai-feedback-modal-title { font-size: 20px; font-weight: 600; color: white; margin: 0; } .ai-feedback-modal-close { background: transparent; border: none; color: rgba(255, 255, 255, 0.6); cursor: pointer; width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: background 0.2s ease, color 0.2s ease; } .ai-feedback-modal-close:hover { background: rgba(255, 255, 255, 0.1); color: white; } .ai-feedback-modal-close svg { width: 16px; height: 16px; } .ai-feedback-modal-content { margin-bottom: 20px; } .ai-feedback-textarea { width: 100%; min-height: 150px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(15, 15, 25, 0.4); color: white; font-size: 15px; padding: 15px; resize: none; font-family: inherit; transition: border-color 0.2s ease; outline: none; } .ai-feedback-textarea:focus { border-color: rgba(107, 91, 253, 0.5); box-shadow: 0 0 0 2px rgba(107, 91, 253, 0.15); } .ai-feedback-textarea::placeholder { color: rgba(255, 255, 255, 0.4); } .ai-feedback-modal-footer { display: flex; justify-content: flex-end; gap: 10px; } .ai-feedback-button-cancel { background: rgba(255, 255, 255, 0.1); border: none; color: white; padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.2s ease; } .ai-feedback-button-cancel:hover { background: rgba(255, 255, 255, 0.15); } .ai-feedback-button-submit { background: linear-gradient( to right, rgba(65, 73, 145, 0.9), rgba(45, 52, 112, 0.9) ); border: 1px solid rgba(85, 93, 165, 0.3); color: white; padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; position: relative; overflow: hidden; } .ai-feedback-button-submit:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(25, 80, 250, 0.3); } .ai-feedback-button-submit:active { transform: translateY(1px); } .ai-feedback-button-submit::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to right, transparent, rgba(255, 255, 255, 0.2), transparent ); transform: translateX(-100%); transition: transform 0.5s ease; } .ai-feedback-button-submit:hover::after { transform: translateX(100%); } .ai-feedback-button-submit.submitting { pointer-events: none; opacity: 0.8; } .ai-feedback-button-submit .button-text { position: relative; z-index: 1; } .ai-success-icon { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 18px; height: 18px; margin-right: 8px; vertical-align: middle; } .ai-success-checkmark { fill: none; stroke: white; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: ai-checkmark-draw 0.5s ease forwards; } @keyframes ai-checkmark-draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } } /* ----------- Navbar right links & points ----------- */ .navbar-right-links { grid-column-gap: 0.3rem; grid-row-gap: 0.3rem; font-family: var(--brand-header); opacity: 0.5; color: var(--light-white); cursor: pointer; justify-content: flex-start; align-items: center; margin-left: 0.2rem; margin-right: 0.2rem; padding-left: 0.5rem; padding-right: 0.5rem; transition: opacity 0.2s; display: flex; } .navbar-right-links:hover { opacity: 1; } .footer-arrow-wrapper { flex-flow: row; justify-content: flex-start; align-items: center; width: 1.5rem; position: relative; overflow: hidden; } .footer-arrow { flex-flow: row; justify-content: flex-start; align-items: center; width: 1.5rem; transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1); } .footer-arrow.absolute { position: absolute; left: -1.5rem; top: 0; } /* Slide primary arrow out diagonally up-right; absolute copy moves in to take its slot (navbar + footer) */ .navbar-right-links:hover .footer-arrow:not(.absolute), .footer-social-link:hover .footer-arrow:not(.absolute) { transform: translate3d(1.5rem, -0.55rem, 0); } .navbar-right-links:hover .footer-arrow.absolute, .footer-social-link:hover .footer-arrow.absolute { transform: translate3d(1.5rem, 0, 0); } .navbar-right-points { grid-column-gap: 0.3rem; grid-row-gap: 0.3rem; opacity: 1; color: var(--light-white); cursor: pointer; justify-content: flex-start; align-items: center; margin-left: 0.2rem; margin-right: 0.2rem; padding-left: 0.5rem; padding-right: 0.5rem; transition: opacity 0.2s; display: flex; } .webmozpoints { pointer-events: auto; } /* Webmoz points button (navbar) */ .points-button { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 100px; background: rgba(26, 26, 26, 0.95); cursor: pointer; border: 2px solid transparent; background-clip: padding-box; transition: box-shadow 0.3s ease; } .points-button::before { content: ""; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; background: linear-gradient( 45deg, #ffd500 0%, #ff9800 25%, #ff6a00 50%, #ffd500 100% ); border-radius: inherit; z-index: -1; background-size: 400% 400%; animation: gradientBorder 3s ease infinite; transition: filter 0.3s ease, box-shadow 0.3s ease; } .points-button:hover::before { filter: brightness(1.2); box-shadow: 0 0 15px rgba(255, 213, 0, 0.6), 0 0 15px rgba(255, 106, 0, 0.6); } .points-text, .pts-text, .sparkle-icon { position: relative; z-index: 1; } .points-text { color: #ffd700; font-family: var(--montserrat-para, sans-serif); font-weight: 500; font-size: 14px; } .pts-text { color: #ffd700; font-weight: 400; font-size: 11px; margin-top: 2px; margin-left: -6px; } .sparkle-icon { width: 16px; height: 16px; color: #ffd700; transition: transform 0.3s ease; transform-origin: center center; transform-box: fill-box; } .points-button:hover .sparkle-icon { transform: scale(1.1); } .sparkle-main, .sparkle-small { transition: color 0.3s ease; transform-origin: center center; transform-box: fill-box; } .points-button:hover .sparkle-main { animation: sparkleMainSpin 3s linear infinite; color: #ffc837; } .points-button:hover .sparkle-small { animation: sparkleSmallSpin 3s linear infinite; color: #ff8008; } @keyframes sparkleMainSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes sparkleSmallSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } @keyframes gradientBorder { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .points-button.processing::before, .points-button.processing .sparkle-main, .points-button.processing .sparkle-small, .points-button.processing .sparkle-icon { animation-play-state: running; } /* Section wrapper for main app area */ .webmozai-section { position: relative; display: flex; align-items: center; justify-content: center; height: 100vh; } .background-image { z-index: -1; opacity: 0.5; width: 100%; height: 100%; display: block; position: absolute; inset: 0%; } .webmozai-wrapper { position: relative !important; left: 0 !important; right: 0 !important; width: 100vw !important; height: 100vh !important; max-height: 1200px !important; display: flex !important; align-items: flex-end !important; justify-content: center !important; z-index: 100 !important; padding: 2.5rem 0; flex-flow: column; overflow: hidden !important; bottom: 0vh !important; pointer-events: none !important; transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .webmozai-wrapper > * { pointer-events: auto !important; } .color-bends-container { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; isolation: isolate; opacity: 0.75; } #color-bends canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } #splineloading { opacity: 0; visibility: hidden; transition: opacity 0.5s ease-out; } /* Chat container styles */ #chat-container { position: relative !important; flex: 1 !important; width: auto !important; max-width: 1200px !important; margin: 0 auto !important; height: 600px; background: linear-gradient( 145deg, rgba(20, 20, 35, 0.2) 0%, rgba(20, 20, 35, 0.2) 100% ) !important; backdrop-filter: blur(20px) !important; border-radius: 16px !important; border: 1px solid rgba(255, 255, 255, 0.4); transition: height 0.3s ease, opacity 0.3s ease, background 0.45s ease, backdrop-filter 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease !important; width: 75% !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; transform-origin: bottom center !important; box-shadow: 0px 0px 4px 6px rgba(123, 173, 241, 0.17) !important; } #chat-container.minimized { min-height: auto !important; max-height: none !important; position: absolute !important; bottom: 8px !important; left: 50% !important; transform: translateX(-50%) !important; transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } #chat-container.minimized .ai-messages-container { display: none !important; } #chat-container.minimized .ai-new-chat-button { display: none !important; } .notification span { word-break: break-word; /* modern */ overflow-wrap: anywhere; /* ensures even long tokens break */ } .webmozai-wrapper.minimized { justify-content: flex-end !important; } /* Update chat container when sidebar is expanded */ #chat-container.sidebar-expanded { margin-left: calc(50vw + 4vw) !important; width: calc(100vw - 50vw - 4vw - 2rem) !important; min-width: unset !important; margin-right: 2rem !important; position: relative !important; background: linear-gradient( 145deg, rgba(20, 20, 35, 0.2) 0%, rgba(20, 20, 35, 0.2) 100% ) !important; } /* Ensure minimized state takes precedence */ #chat-container.sidebar-expanded.minimized { position: fixed !important; bottom: 10vh !important; left: auto !important; transform: none !important; margin-left: calc(50vw + 4vw) !important; width: calc(100vw - 50vw - 4vw - 2rem) !important; } /* --------------- Messages Layout --------------- */ .ai-messages-container { flex: 1 !important; overflow-y: auto !important; padding: 40px 20px !important; padding-bottom: 90px !important; margin-bottom: 88px !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; height: auto !important; mask-size: 100% 100% !important; -webkit-mask-size: 100% 100% !important; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 4%, black 96%, transparent 100% ) !important; mask-image: linear-gradient( to bottom, transparent 0%, black 4%, black 96%, transparent 100% ); } /* Chatbox wrapper – keeps message templates, input, overlays within bounds */ .chatbox { height: 100% !important; overflow: hidden !important; width: 100% !important; } /* ----------- Single Message ----------- */ .ai-message { display: flex; min-height: fit-content; width: 100%; opacity: 0; transform: translateY(20px); animation: aiMessageIn 0.3s ease forwards; position: relative; margin: 0.5rem 0; background: none !important; border: none !important; } .ai-message.user { justify-content: flex-end; animation: messageFlow 0.4s cubic-bezier(0.23, 1, 0.32, 1) forwards; transform-origin: bottom right; } .ai-message.bot { justify-content: flex-start; animation: aiMessageIn 0.5s ease forwards; animation-delay: 0.2s; } /* ----------- Message Content ----------- */ .ai-message-content { max-width: 95% !important; min-width: 200px !important; padding: 14px 18px !important; border-radius: 14px !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; will-change: transform !important; display: flex !important; align-items: flex-start !important; gap: 12px !important; position: relative; flex-direction: column !important; } /* Bot message specific styles */ .ai-message.bot .ai-message-content { padding: 14px 18px !important; /* Default padding without actions */ background: linear-gradient( 95deg, rgb(2 5 23 / 85%) 50%, rgb(60 66 97 / 75%) 100% ) !important; border: 1px solid rgb(97 142 222 / 75%) !important; backdrop-filter: blur(12px) !important; box-shadow: inset 0px -4px 12px 0px rgba(255, 255, 255, 0.1); min-height: 50px; } /* User message specific styles */ .ai-message.user .ai-message-content { background: linear-gradient( 185deg, rgb(0 11 57 / 74%) 50%, rgb(163 175 255 / 22%) 100% ) !important; border: 1px solid rgb(140 156 185 / 33%) !important; box-shadow: inset 0px -4px 12px 0px rgba(255, 255, 255, 0.1); padding: 14px 18px !important; } /* ----------- Bot bottom bar: memory (left, content-sized) + message actions (right) ----------- */ .ai-message-bottom-bar { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; flex-shrink: 0 !important; box-sizing: border-box !important; gap: 10px !important; } .ai-message.complete .ai-message-bottom-bar, .ai-message-bottom-bar:has(.ai-message-memory-actions.has-memory-delta) { margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; } /* ----------- Message Actions (Bot messages only) ----------- */ .ai-message-actions { position: relative !important; display: none !important; gap: 8px !important; opacity: 0 !important; pointer-events: none !important; transition: all 0.2s ease !important; flex-direction: row !important; flex: 0 0 auto !important; margin-left: auto !important; z-index: 2 !important; padding: 4px 0 !important; border-top: none !important; margin-top: 0 !important; } .ai-action-icon { width: 28px !important; height: 28px !important; padding: 5px !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 6px !important; color: rgba(255, 255, 255, 0.6) !important; cursor: pointer !important; transition: all 0.2s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; } .ai-action-icon:hover { background: rgba(99, 102, 241, 0.15) !important; border-color: rgba(138, 180, 255, 0.35) !important; color: rgba(255, 255, 255, 0.9) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2) !important; } .ai-action-icon:active { transform: translateY(0) scale(0.95) !important; background: rgba(99, 102, 241, 0.25) !important; border-color: rgba(138, 180, 255, 0.4) !important; box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15) !important; color: rgba(255, 255, 255, 1) !important; } /* Hide actions for user messages */ .ai-message.user .ai-message-actions { display: none !important; } .ai-message.complete .ai-message-actions { display: flex !important; opacity: 1 !important; pointer-events: auto !important; } /* Memory updated — same row as actions, width = button only */ .ai-message-memory-actions { display: none; flex: 0 0 auto !important; width: auto !important; max-width: 100%; flex-shrink: 0; align-self: center; margin: 0; padding: 0; pointer-events: none; } .ai-message-memory-actions.has-memory-delta { display: flex; flex-direction: column; align-items: flex-start; pointer-events: auto; animation: aiMemoryUpdatedRowIn 0.28s cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes aiMemoryUpdatedRowIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .ai-memory-updated-btn { display: none; align-items: center; gap: 8px; white-space: nowrap; padding: 7px 14px 7px 11px; margin: 0; border: 1px solid rgba(138, 180, 255, 0.22); border-radius: 8px; background: rgba(99, 102, 241, 0.12); color: rgba(255, 255, 255, 0.72); font-size: 12px; font-weight: 500; letter-spacing: 0.02em; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .ai-memory-updated-btn:hover { background: rgba(99, 102, 241, 0.22); border-color: rgba(138, 180, 255, 0.4); color: rgba(255, 255, 255, 0.92); } .ai-memory-updated-icon { display: block; flex-shrink: 0; opacity: 0.85; } .ai-memory-updated-label { line-height: 1.2; } .global-tooltip.global-tooltip--rich { max-width: 340px; max-height: min(55vh, 400px); text-align: left; padding: 12px 14px; pointer-events: auto; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.35) transparent; } .global-tooltip.global-tooltip--rich::-webkit-scrollbar { width: 6px; } .global-tooltip.global-tooltip--rich::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.28); border-radius: 6px; } .global-tooltip.global-tooltip--rich .memory-update-line { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 400; line-height: 1.45; color: rgba(255, 255, 255, 0.92); } .global-tooltip.global-tooltip--rich .memory-update-line:last-child { margin-bottom: 0; } .global-tooltip.global-tooltip--rich .memory-update-pill { flex-shrink: 0; display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: 600; letter-spacing: 0.04em; line-height: 1.3; margin-top: 1px; } .global-tooltip.global-tooltip--rich .memory-update-pill--venture { background: rgba(99, 102, 241, 0.35); border: 1px solid rgba(138, 180, 255, 0.45); color: rgba(255, 255, 255, 0.95); } .global-tooltip.global-tooltip--rich .memory-update-pill--global { background: rgba(34, 197, 94, 0.2); border: 1px solid rgba(74, 222, 128, 0.45); color: rgba(220, 252, 231, 0.95); } .global-tooltip.global-tooltip--rich .memory-update-text { flex: 1; min-width: 0; word-break: break-word; } /* Only updating layout properties in controls row */ .ai-controls-row { position: relative !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; width: 100% !important; height: auto !important; padding-left: 4px !important; overflow-y: visible; } /* ----------- Bot Avatar ----------- */ .ai-bot-avatar { align-self: flex-start !important; flex-shrink: 0 !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; background: linear-gradient( 145deg, rgba(99, 102, 241, 0.25) 0%, rgba(99, 102, 241, 0.15) 100% ) !important; border: 1px solid rgba(138, 180, 255, 0.3) !important; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15) !important; left: 12px !important; top: 12px !important; margin-right: 12px !important; } .ai-bot-avatar img { width: 20px; height: 20px; transition: all 0.3s ease; } .ai-bot-avatar:hover { background: rgba(99, 102, 241, 0.2) !important; border-color: rgba(138, 180, 255, 0.3) !important; } .ai-bot-avatar:hover img { transform: scale(1.1); } /* === migrated: chatBoxStyle2.css === */ /* ----------- Bot/User Text ----------- */ .ai-user-text, .ai-bot-text { color: rgba(255, 255, 255, 0.99); font-size: 15px; line-height: 1.7; letter-spacing: 0.3px; font-weight: 400; word-spacing: 0.05em; overflow-wrap: break-word !important; word-wrap: break-word !important; word-break: break-word !important; hyphens: auto !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Add white-space: pre-wrap only for user messages */ /* .ai-user-text { white-space: pre-wrap !important; } */ .ai-bot-text { position: relative !important; display: inline-block !important; color: rgba(255, 255, 255, 0.95) !important; flex: 1 !important; min-width: 0 !important; text-align: left !important; } .ai-bot-text p { margin: 12px 0px; } .ai-bot-text p:first-child { margin-top: 0; } .ai-bot-text p:last-child { margin-bottom: 0; } .ai-bot-text strong { color: rgba(255, 255, 255, 1); font-weight: 600; } .ai-bot-text em { color: rgba(138, 180, 255, 0.95); font-style: italic; } .ai-bot-text code { font-family: "SF Mono", "Roboto Mono", Consolas, monospace; font-size: 0.9em; padding: 0.2em 0.4em; background: rgba(0, 0, 0, 0.2); border-radius: 4px; border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(138, 180, 255, 0.95); } .ai-bot-text pre { position: relative; margin: 1em 0; } .ai-bot-text pre code { display: block; padding: 1em; margin: 0; overflow-x: auto; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; line-height: 1.5; } .ai-bot-text pre .code-copy-button { position: absolute; top: 8px; right: 8px; z-index: 10; opacity: 0; transition: opacity 0.2s ease; } .ai-bot-text pre:hover .code-copy-button { opacity: 1; } .ai-bot-text a { color: rgba(138, 180, 255, 0.95); text-decoration: none; border-bottom: 1px solid rgba(138, 180, 255, 0.3); transition: all 0.2s ease; } .ai-bot-text a:hover { color: rgba(138, 180, 255, 1); border-bottom-color: rgba(138, 180, 255, 0.7); } /* Compact inline image previews (Markdown links / images → same card treatment) */ .ai-user-text .ai-inline-image-block, .ai-bot-text .ai-inline-image-block { display: inline-block !important; vertical-align: middle !important; margin: 6px 4px 10px !important; max-width: min(260px, 92%) !important; line-height: 0 !important; } .ai-user-text .ai-inline-image-link, .ai-bot-text .ai-inline-image-link { position: relative !important; display: block !important; width: 100% !important; border-radius: 10px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; background: rgba(0, 0, 0, 0.2) !important; text-decoration: none !important; border-bottom: none !important; cursor: pointer !important; font: inherit !important; padding: 0 !important; margin: 0 !important; color: inherit !important; text-align: center !important; appearance: none !important; -webkit-appearance: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important; } .ai-user-text .ai-inline-image-link:hover, .ai-bot-text .ai-inline-image-link:hover { border-color: rgba(138, 180, 255, 0.5) !important; box-shadow: 0 4px 22px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(138, 180, 255, 0.18) !important; transform: translateY(-1px) !important; } .ai-user-text .ai-inline-image-link:focus-visible, .ai-bot-text .ai-inline-image-link:focus-visible { outline: 2px solid rgba(138, 180, 255, 0.85) !important; outline-offset: 2px !important; } .ai-user-text .ai-inline-image-link::after, .ai-bot-text .ai-inline-image-link::after { /* U+2922 north-east and south-west arrow (expand / full view affordance) */ content: "\2922" !important; position: absolute !important; right: 6px !important; bottom: 5px !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; line-height: 1 !important; color: rgba(255, 255, 255, 0.95) !important; background: linear-gradient( 145deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.35) 100% ) !important; border-radius: 8px !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; pointer-events: none !important; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35) !important; transform: scale(1) !important; transform-origin: right bottom !important; transition: transform 0.18s ease !important; } .ai-user-text .ai-inline-image-block:hover .ai-inline-image-link::after, .ai-bot-text .ai-inline-image-block:hover .ai-inline-image-link::after { transform: scale(1.12) !important; } .ai-user-text .ai-inline-image-thumb, .ai-bot-text .ai-inline-image-thumb { display: block !important; max-width: min(240px, 88vw) !important; max-height: 150px !important; width: auto !important; height: auto !important; margin: 0 auto !important; object-fit: contain !important; } .ai-bot-text ul, .ai-bot-text ol { margin: 1em 0; padding-left: 1.5em; } .ai-bot-text li { margin: 0.5em 0; line-height: 1.6; } .ai-bot-text blockquote { margin: 1em 0; padding-left: 1em; border-left: 3px solid rgba(138, 180, 255, 0.4); color: rgba(255, 255, 255, 0.8); font-style: italic; } /* Markdown tables inside bot messages */ .ai-bot-text table { width: 100%; max-width: 100%; margin: 1.25em 0; border-collapse: separate; border-spacing: 0; font-size: 0.94em; line-height: 1.5; text-align: left; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; overflow: hidden; background: linear-gradient( 165deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.22) 100% ); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .ai-bot-text caption { caption-side: top; text-align: left; padding: 0 4px 12px; font-weight: 600; font-size: 1em; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.96); } .ai-bot-text thead { background: linear-gradient( 180deg, rgba(138, 180, 255, 0.22) 0%, rgba(138, 180, 255, 0.07) 100% ); } .ai-bot-text thead th { border-bottom: 1px solid rgba(138, 180, 255, 0.35); } .ai-bot-text th, .ai-bot-text td { padding: 11px 14px; vertical-align: top; border-bottom: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.9); } .ai-bot-text th { font-weight: 600; font-size: 0.82em; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.98); } .ai-bot-text tbody tr:last-child th, .ai-bot-text tbody tr:last-child td { border-bottom: none; } .ai-bot-text tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.12); } .ai-bot-text tbody tr:hover td { background: rgba(138, 180, 255, 0.1); } .ai-bot-text th[align="center"], .ai-bot-text td[align="center"] { text-align: center; } .ai-bot-text th[align="right"], .ai-bot-text td[align="right"] { text-align: right; } /* Task Button Styles */ .ai-action-icon.add-task { position: relative !important; overflow: hidden !important; } .ai-action-icon.add-task .task-icon { width: 20px !important; height: 20px !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } .ai-action-icon.add-task:hover .task-icon { transform: scale(1.1) !important; } .ai-action-icon.add-task .task-plus, .ai-action-icon.add-task .task-circle, .ai-action-icon.add-task .task-check { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; transform-origin: center !important; } /* Active state styles */ .ai-action-icon.add-task.active { background: rgba(99, 102, 241, 0.25) !important; border-color: rgba(138, 180, 255, 0.4) !important; color: rgba(138, 180, 255, 1) !important; } .ai-action-icon.add-task.active .task-plus { opacity: 0 !important; transform: scale(0) !important; } .ai-action-icon.add-task.active .task-check { display: block !important; animation: checkmark 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; } .ai-action-icon.add-task.active .task-circle { animation: circleComplete 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important; } /* Add these keyframes */ @keyframes checkmark { 0% { stroke-dasharray: 0, 100 !important; opacity: 0 !important; } 100% { stroke-dasharray: 100, 100 !important; opacity: 1 !important; } } @keyframes circleComplete { 0% { stroke-dasharray: 0, 100 !important; } 100% { stroke-dasharray: 100, 100 !important; } } /* ----------- Text Chunks (Animated) ----------- */ .text-chunk { display: inline-block; opacity: 0; animation: flowIn 0.3s ease forwards; } .text-chunk p { display: inline; margin: 0; padding: 0; } .text-chunk * { margin: 0; padding: 0; } .text-chunk h1, .text-chunk h2, .text-chunk h3, .text-chunk h4, .text-chunk h5, .text-chunk h6, .text-chunk pre, .text-chunk ul, .text-chunk ol, .text-chunk blockquote { display: block; width: 100%; margin: 1em 0; } .text-chunk pre { background: rgba(20, 20, 35, 0.6) !important; padding: 1em; border-radius: 4px; overflow-x: auto; width: 100%; border: 1px solid rgba(138, 180, 255, 0.2) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; position: relative !important; } .text-chunk pre .code-copy-button { position: absolute; top: 8px; right: 8px; z-index: 10; opacity: 0; transition: opacity 0.2s ease; } .text-chunk pre:hover .code-copy-button { opacity: 1; } .text-chunk code { font-family: monospace; padding: 0.2em 0.4em; background: rgba(99, 102, 241, 0.2) !important; color: rgba(138, 180, 255, 0.95) !important; text-shadow: none !important; } .text-chunk ul, .text-chunk ol { padding-left: 2em; } /* ----------- Input Wrapper ----------- */ .ai-input-wrapper { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; /* Venture stack (#venture-selector-stack) is first child; panel + pill column above composer */ overflow: visible !important; background: linear-gradient( 145deg, rgb(2 4 11) 0%, rgb(136 131 166 / 7%) 100% ) !important; backdrop-filter: blur(10px) !important; z-index: 102 !important; padding: 10px 20px !important; min-height: 88px !important; height: auto !important; display: flex !important; flex-direction: column !important; justify-content: center !important; border-radius: 16px !important; transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1), left 0.45s cubic-bezier(0.4, 0, 0.2, 1), right 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease, padding 0.3s ease !important; } textarea.ai-input { display: block; width: 100%; box-sizing: border-box; min-height: 56px; max-height: none; /* Basic styling */ padding: 16px 56px 16px 20px; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(138, 180, 255, 0.25); border-radius: 24px; color: rgba(255, 255, 255, 0.95); font-size: 15px; line-height: 1.5; /* Prevent manual resize; script handles expansion */ resize: none; /* Script toggles between hidden/auto, so default to hidden */ overflow-y: hidden; /* Smooth out transitions a bit */ transition: height 0.1s ease-out; } .ai-input-wrapper::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 100%; backdrop-filter: blur(10px); z-index: -1; border-radius: 16px !important; } /* For animation states */ .ai-input-wrapper.sending { animation: flyUp 0.3s ease forwards; } .ai-input-wrapper.returning { animation: slideIn 0.3s ease forwards; } /* ----------- Utility Bar ----------- */ .ai-utility-bar { position: relative !important; /* Needed for absolute positioning of pseudo-elements */ display: flex !important; align-items: center !important; gap: 16px !important; height: 40px !important; width: 100% !important; margin: 0 0 8px !important; flex-wrap: nowrap !important; padding: 0 32px !important; overflow: visible; scrollbar-width: none !important; /* Firefox */ -ms-overflow-style: none !important; /* IE/Edge */ /* Mask styles removed */ } @media screen and (max-width: 767px) { .ai-utility-bar { overflow-x: auto !important; overflow-y: visible !important; } } /* Hide scrollbar for Webkit browsers */ .ai-utility-bar::-webkit-scrollbar { display: none !important; } .ai-controls-row::before, .ai-controls-row::after { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; width: 10px !important; pointer-events: none !important; z-index: 2 !important; } .ai-utility-button { display: flex !important; align-items: center !important; justify-content: center !important; min-width: 32px !important; height: 32px !important; padding: 6px !important; background: transparent !important; border: none !important; border-radius: 8px !important; color: rgba(255, 255, 255, 0.6) !important; cursor: pointer !important; transition: all 0.2s ease !important; position: relative !important; box-shadow: inset 0px -4px 12px 0px rgba(255, 255, 255, 0.1); } /* Add new styles for button content wrapper */ .ai-utility-button-content { display: flex !important; align-items: center !important; gap: 8px !important; height: 100% !important; } .ai-utility-button svg, .ai-utility-button img.ai-utility-bar-icon { width: 20px !important; height: 20px !important; flex-shrink: 0 !important; } .ai-utility-button img.ai-utility-bar-icon { object-fit: contain !important; display: block !important; } #orchestrator-auto-toggle img.ai-utility-bar-icon--auto { transition: filter 0.22s ease !important; } #orchestrator-auto-toggle:hover img.ai-utility-bar-icon--auto { filter: brightness(1.28) drop-shadow(0 0 14px rgba(248, 250, 252, 0.55)) !important; } /* Add styles for the text */ .ai-utility-button-text { font-size: 13px !important; font-weight: 500 !important; white-space: nowrap !important; opacity: 0 !important; width: 0 !important; overflow: hidden !important; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Update active state styles */ .ai-utility-button.active { position: relative !important; background: rgba(25, 25, 35, 0.9) !important; color: rgba(255, 255, 255, 1) !important; box-sizing: border-box !important; overflow: visible !important; z-index: 1 !important; flex-shrink: 0 !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important, inset 0 0 3px rgba(255, 255, 255, 0.3) !important, inset 0 0 6px rgba(107, 91, 253, 0.2) !important, inset 0 0 8px rgba(255, 0, 128, 0.3) !important, inset 0 0 12px rgba(0, 104, 252, 0.3) !important; } /* Add new gradient border for active utility buttons */ .ai-utility-button.active .ai-button-gradient-border { display: block !important; position: absolute !important; inset: -1px !important; border-radius: 8px !important; padding: 1px !important; background: transparent !important; overflow: hidden !important; z-index: -1 !important; } .ai-utility-button.active .ai-button-gradient-border::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: 8px !important; padding: 1px !important; background: linear-gradient( 90deg, #ff0080, #ff8c00, #ffce00, #6b5bfd, #1950fa, #0068fc, #6b5bfd, #ff0080 ) !important; background-size: 400% 400% !important; animation: animateGradient 8s linear infinite !important; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.5) !important, inset 0 0 8px rgba(255, 140, 0, 0.5) !important, inset 0 0 8px rgba(107, 91, 253, 0.5) !important; } .ai-utility-button.active .ai-button-gradient-border::after { content: "" !important; position: absolute !important; inset: -3px !important; border-radius: 8px !important; z-index: -2 !important; background: conic-gradient( from 0deg, #ff0080, #ff8c00, #ffce00, #6b5bfd, #1950fa, #0068fc, #6b5bfd, #ff0080 ) !important; filter: blur(8px) !important; opacity: 0.15 !important; animation: rotateGradient 10s linear infinite !important; } /* Hide the gradient border when not active */ .ai-utility-button .ai-button-gradient-border { display: none !important; } /* Keep the existing pseudo-element styles for backward compatibility */ .ai-utility-button.active::before, .ai-utility-button.active::after { content: none !important; } .ai-utility-button.active .ai-utility-button-text { opacity: 1 !important; width: auto !important; margin-left: 4px !important; } .ai-utility-button.active:hover { background: rgba(35, 35, 45, 0.9) !important; transform: translateY(-1px) !important; } /* Media Lab button always active styling */ .ai-utility-button.media { position: relative !important; background: rgba(25, 25, 35, 0.9) !important; color: rgba(255, 255, 255, 1) !important; box-sizing: border-box !important; overflow: visible !important; z-index: 1 !important; flex-shrink: 0 !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important, inset 0 0 3px rgba(255, 255, 255, 0.3) !important, inset 0 0 6px rgba(107, 91, 253, 0.2) !important, inset 0 0 8px rgba(255, 0, 128, 0.3) !important, inset 0 0 12px rgba(0, 104, 252, 0.3) !important; } .ai-utility-button.media .ai-button-gradient-border { display: block !important; position: absolute !important; inset: -1px !important; border-radius: 8px !important; padding: 1px !important; background: transparent !important; overflow: hidden !important; z-index: -1 !important; } .ai-utility-button.media .ai-button-gradient-border::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: 8px !important; padding: 1px !important; background: linear-gradient( 45deg, rgba(254, 137, 99, 0.1), rgba(19, 109, 250, 0.1), rgba(254, 137, 99, 0.1) ) !important; background-size: 300% 300% !important; animation: animateGradient 3s ease infinite !important; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; mask-composite: xor !important; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; } .ai-utility-button.media .ai-button-gradient-border::after { content: "" !important; position: absolute !important; inset: -3px !important; border-radius: 8px !important; z-index: -2 !important; background: linear-gradient( 45deg, rgba(254, 137, 99, 0.2), rgba(19, 109, 250, 0.2), rgba(254, 137, 99, 0.2) ) !important; background-size: 300% 300% !important; animation: animateGradient 3s ease infinite !important; filter: blur(8px) !important; opacity: 0.5 !important; } .ai-utility-button.media .ai-utility-button-text { opacity: 1 !important; width: auto !important; margin-left: 4px !important; } .ai-utility-button.media:hover { background: rgba(35, 35, 45, 0.9) !important; transform: translateY(-1px) !important; } .ai-utility-button:hover { background: rgba(255, 255, 255, 0.12) !important; color: rgba(255, 255, 255, 0.9) !important; transform: translateY(-1px) !important; z-index: 11 !important; } .ai-utility-button:active { transform: translateY(0px) scale(0.95) !important; transition: transform 0.1s ease !important; } /* xai-icon.png is white-on-transparent for dark UI; invert only on light surfaces */ .ai-tool-activity-box.research img[src*="xai-icon"], .artifacts-research-section img[src*="xai-icon"], [data-wm-theme="light"] .ai-orchestrator-tool-icon img[src*="xai-icon"] { filter: invert(1); } img.x-search-icon { opacity: 80%; } /* X Search activity box: inline citation circle buttons (inline with text, no underline) */ .x-search-citation-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 4px; margin: 0 4px; font-size: 11px; font-weight: 600; line-height: 1; color: rgba(138, 180, 255, 0.95); background: rgba(138, 180, 255, 0.18); border: 1px solid rgba(138, 180, 255, 0.35); border-radius: 50%; text-decoration: none !important; vertical-align: middle; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .x-search-citation-btn:hover, .x-search-citation-btn:focus { text-decoration: none !important; } .x-search-citation-btn:hover { background: rgba(138, 180, 255, 0.28); border-color: rgba(138, 180, 255, 0.5); color: rgba(255, 255, 255, 0.98); } .x-search-citation-btn:focus { outline: none; box-shadow: 0 0 0 2px rgba(138, 180, 255, 0.35); } /* Keep text and citation pills inline: no new line for citation circles */ .x-search-text-content .x-search-text-segment { display: inline; } .x-search-text-content p, .x-search-text-content .x-search-text-segment p, .x-search-text-content h1, .x-search-text-content h2, .x-search-text-content h3, .x-search-text-content h4, .x-search-text-content h5, .x-search-text-content h6 { display: inline; margin: 0; } .x-search-text-content p::after { content: "\00a0"; } .x-search-text-content .x-search-text-segment + .x-search-citation-btn, .x-search-citation-btn + .x-search-text-segment { margin-left: 0; } /* ----------- Utility Bar Tooltips ----------- */ .ai-utility-tooltip { position: absolute !important; bottom: calc(100% + 10px) !important; left: 50% !important; transform: translateX(-50%); padding: 8px 12px !important; background: rgba(30, 30, 45, 0.95) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(138, 180, 255, 0.15) !important; border-radius: 6px !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; color: rgba(255, 255, 255, 0.9) !important; font-size: 13px !important; line-height: 1.4 !important; white-space: nowrap !important; pointer-events: none; opacity: 0; transform-origin: bottom !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; z-index: 10003 !important; } /* Add styles for the coming soon pill */ .coming-soon-pill { display: inline-block !important; margin-top: 4px !important; padding: 2px 8px !important; background: rgba(255, 200, 0, 0.15) !important; border: 1px solid rgba(255, 200, 0, 0.3) !important; border-radius: 12px !important; color: rgba(255, 200, 0, 0.9) !important; font-size: 11px !important; font-weight: 500 !important; line-height: 1.4 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } /* Auto toggle tooltip: sentence-case pill (utility pills default to uppercase) */ #orchestrator-auto-tooltip-pill { text-transform: none !important; letter-spacing: normal !important; } .ai-utility-tooltip::after { content: "" !important; position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; border-left: 6px solid transparent !important; border-right: 6px solid transparent !important; border-top: 6px solid rgba(30, 30, 45, 0.95) !important; } /* Show tooltip on hover */ .ai-utility-button:hover .ai-utility-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); } /* Add subtle animation for tooltip */ @keyframes tooltipIn { from { opacity: 0; transform: translateX(-50%) translateY(5px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .ai-utility-button:hover .ai-utility-tooltip { animation: tooltipIn 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* Add gradient animation keyframes */ @keyframes animateGradient { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } } @keyframes rotateGradient { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* === migrated: chatBoxStyle3.css === */ /* ----------- Model Selector ----------- */ .ai-model-selector { position: relative !important; display: flex !important; align-items: center !important; gap: 8px !important; cursor: pointer !important; z-index: 99999 !important; } /* Model Button */ .ai-model-button { font-size: 14px !important; color: rgba(255, 255, 255, 0.7) !important; padding: 6px 12px !important; width: auto !important; white-space: nowrap !important; background: transparent !important; border: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 6px !important; border-radius: 8px !important; transition: all 0.2s ease !important; transform: translateY(0) !important; pointer-events: auto !important; box-shadow: inset 0px -4px 12px 0px rgba(255, 255, 255, 0.1); } .ai-model-button:hover { color: rgba(255, 255, 255, 0.9) !important; background: rgba(255, 255, 255, 0.12) !important; transform: translateY(-1px) !important; } .ai-model-button::after { content: "" !important; display: inline-block !important; width: 0 !important; height: 0 !important; border-left: 4px solid transparent !important; border-right: 4px solid transparent !important; border-top: 4px solid currentColor !important; margin-left: 4px !important; } @media screen and (max-width: 768px) { .ai-model-button::after { display: none !important; } } /* Model Dropdown - Base Styles */ .ai-model-dropdown { position: absolute !important; bottom: calc(100% + 8px) !important; left: 50% !important; transform: translateX(-50%) translateY(5px); background: rgba(30, 30, 45, 0.95) !important; border: 1px solid rgba(138, 180, 255, 0.25) !important; border-radius: 12px !important; padding: 8px !important; min-width: 180px !important; backdrop-filter: blur(12px) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important; z-index: 99999 !important; visibility: hidden; opacity: 0; pointer-events: none; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; display: none; will-change: transform, opacity, visibility !important; } /* Show dropdown when selector is hovered */ .ai-model-selector:hover .ai-model-dropdown { visibility: visible; opacity: 1; pointer-events: auto; display: block; transform: translateX(-50%) translateY(0); } /* Show dropdown when active class is added (for mobile) */ .ai-model-dropdown.active { visibility: visible; opacity: 1; pointer-events: auto; display: block; transform: translateX(-50%) translateY(0); } /* Model Options */ .ai-model-option { position: relative !important; z-index: 100000 !important; pointer-events: auto !important; display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; padding: 8px 12px !important; background: transparent !important; border: none !important; border-radius: 8px !important; color: rgba(255, 255, 255, 0.8) !important; cursor: pointer !important; transition: all 0.2s ease !important; text-align: left !important; font-size: 14px !important; justify-content: flex-start !important; margin-bottom: 8px !important; backdrop-filter: blur(12px) !important; padding-right: 35px !important; } /* Remove margin from last option to maintain clean dropdown */ .ai-model-option:last-child { margin-bottom: 0 !important; } .ai-model-option:hover { background: rgba(138, 180, 255, 0.1) !important; color: rgba(255, 255, 255, 1) !important; } .ai-model-option.active, .ai-model-option[data-selected="true"] { background: rgba(138, 180, 255, 0.15) !important; color: rgba(255, 255, 255, 1) !important; font-weight: 500 !important; } .ai-model-option.active svg, .ai-model-option[data-selected="true"] svg { transform: scale(1.1) !important; filter: drop-shadow(0 0 8px rgba(138, 180, 255, 0.3)) !important; } .ai-model-option svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; transition: transform 0.3s ease !important; } /* Update the hover animation to work for both states */ .ai-model-option:hover svg, [data-selected="true"].ai-model-option:hover svg { animation: spinSlowDown 1.8s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Mobile adjustments */ @media screen and (max-width: 767px) { .ai-model-dropdown { position: fixed !important; bottom: 120px !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 99999 !important; text-align: left !important; min-width: 200px !important; } /* Ensure the dropdown is visible when active on mobile with higher specificity */ .ai-model-selector .ai-model-dropdown.active { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; display: block !important; transform: translateX(-50%) !important; } .ai-model-option { justify-content: flex-start !important; text-align: left !important; } /* Hide dropdown arrow on mobile */ .ai-model-dropdown::after { display: none !important; } } /* Show dropdown arrow only on desktop */ @media screen and (min-width: 768px) { .ai-model-dropdown::after { content: "" !important; position: absolute !important; bottom: -5px !important; left: 50% !important; transform: translateX(-50%) !important; width: 0 !important; height: 0 !important; border-left: 5px solid transparent !important; border-right: 5px solid transparent !important; border-top: 5px solid rgba(138, 180, 255, 0.25) !important; } } /* Selected Model Option */ .ai-model-option[data-selected="true"] { background: rgba(138, 180, 255, 0.15) !important; color: rgba(255, 255, 255, 1) !important; font-weight: 500 !important; position: relative !important; border: 1px solid rgba(138, 180, 255, 0.35) !important; box-shadow: 0 0 8px rgba(138, 180, 255, 0.1) !important; } .ai-model-option[data-selected="true"]::before { display: none !important; } .ai-model-option[data-selected="true"] svg { transform: scale(1.1) !important; filter: drop-shadow(0 0 8px rgba(138, 180, 255, 0.3)) !important; } /* Update the model button to show selected state */ .ai-model-button[data-model="google"] svg { display: inline-flex !important; } .ai-model-button[data-model="openai"] svg { display: inline-flex !important; } .ai-model-button[data-model="anthropic"] svg { display: inline-flex !important; } /* ----------- Input Container & Textarea ----------- */ .ai-input-container { position: relative !important; display: flex !important; align-items: flex-start !important; width: 100% !important; min-height: 56px !important; height: auto !important; margin: 0 !important; flex-grow: 1 !important; } .ai-input:focus { outline: none !important; background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(138, 180, 255, 0.4) !important; box-shadow: 0 2px 12px rgba(99, 102, 241, 0.2) !important; } /* ----------- Send Button ----------- */ .ai-send-button { display: flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; width: 40px !important; height: 40px !important; background: transparent !important; border: none !important; color: rgba(255, 255, 255, 0.9) !important; cursor: pointer !important; transition: all 0.3s ease !important; z-index: 2 !important; } .ai-send-button:hover { color: rgba(100, 100, 255, 0.9) !important; transform: translateY(-50%) scale(1.1) !important; } .ai-send-icon { width: 24px !important; height: 24px !important; } .ai-send-button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: auto; /* Allow mouse events for tooltips */ color: rgba(255, 255, 255, 0.4); } /* Mobile optimizations */ @media screen and (max-width: 767px) { /* Enhanced send button for mobile */ .ai-send-button { position: absolute !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; right: 8px !important; top: 50% !important; transform: translateY(-50%) !important; background-color: transparent !important; border: none !important; z-index: 10 !important; padding: 0 !important; } /* Make the actual SVG icon larger and more visible */ .ai-send-button svg { display: block !important; width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; stroke: currentColor !important; } /* Ensure the path is visible with thicker stroke */ .ai-send-button svg path { stroke-width: 2px !important; stroke: white !important; } /* Improve tap target and visual feedback */ .ai-send-button:active { transform: translateY(-50%) scale(0.95) !important; } } /* ----------- New Chat Button ----------- */ .ai-new-chat-button { position: absolute !important; top: 20px !important; right: 20px !important; width: 32px !important; height: 32px !important; background: rgba(99, 102, 241, 0.15) !important; border: 1px solid rgba(138, 180, 255, 0.25) !important; border-radius: 8px !important; padding: 6px !important; color: rgba(138, 180, 255, 0.9) !important; cursor: pointer !important; transition: all 0.2s ease !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 103 !important; backdrop-filter: blur(8px) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important; } .ai-new-chat-button:hover { color: rgba(255, 255, 255, 1) !important; background: rgba(99, 102, 241, 0.25) !important; border-color: rgba(138, 180, 255, 0.35) !important; transform: scale(1.05) !important; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2) !important; } /* Ensure messages don't break words inappropriately */ .ai-user-text, .ai-bot-text { word-break: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; hyphens: none !important; } /* === migrated: chatBoxStyle4.css === */ /* ----------- Login Button ----------- */ .ai-login-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-top: 12px !important; margin-left: auto !important; padding: 8px 16px !important; background: linear-gradient( 135deg, rgba(19, 109, 244, 0.11) 0%, rgba(0, 245, 255, 0.09) 100% ) !important; border: 1px solid rgba(19, 109, 244, 0.35) !important; border-radius: 10px !important; color: rgba(255, 255, 255, 0.9) !important; font-size: 14px !important; font-weight: 500 !important; font-family: var(--montserrat-para) !important; cursor: pointer !important; transition: all 0.2s ease !important; backdrop-filter: blur(8px) !important; box-shadow: 0 2px 10px rgba(19, 109, 244, 0.12) !important; } .ai-login-button .button-content { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } .button-content { display: flex !important; align-items: center !important; gap: 8px !important; /* Added a small gap between elements */ } .ai-login-button svg, .ai-login-button img.ai-login-button-icon { width: 20px !important; height: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; object-fit: contain !important; } .ai-login-button:hover { background: linear-gradient( 135deg, rgba(19, 109, 244, 0.18) 0%, rgba(0, 245, 255, 0.12) 100% ) !important; border-color: rgba(19, 109, 244, 0.55) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(19, 109, 244, 0.25) !important; color: rgba(255, 255, 255, 1) !important; animation: buttonGlow 2s infinite !important; } /* Retry button styles */ .ai-retry-button { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 8px 16px !important; background: linear-gradient( 135deg, rgba(19, 109, 244, 0.11) 0%, rgba(0, 245, 255, 0.09) 100% ) !important; border: 1px solid rgba(19, 109, 244, 0.35) !important; border-radius: 10px !important; color: rgba(255, 255, 255, 0.9) !important; font-size: 14px !important; font-weight: 500 !important; font-family: var(--montserrat-para) !important; cursor: pointer !important; transition: all 0.2s ease !important; backdrop-filter: blur(8px) !important; box-shadow: 0 2px 10px rgba(19, 109, 244, 0.12) !important; } .ai-retry-button:hover { background: linear-gradient( 135deg, rgba(19, 109, 244, 0.18) 0%, rgba(0, 245, 255, 0.12) 100% ) !important; border-color: rgba(19, 109, 244, 0.55) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(19, 109, 244, 0.25) !important; color: rgba(255, 255, 255, 1) !important; } /* ----------- Scrollbars ----------- */ .ai-messages-container::-webkit-scrollbar { width: 6px; height: 6px; margin-right: 4px; } .ai-messages-container::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); border-radius: 8px; margin: 4px; } .ai-messages-container::-webkit-scrollbar-thumb { background: rgba(138, 180, 255, 0.3) !important; border: 1px solid rgba(138, 180, 255, 0.2) !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important; border-radius: 8px; backdrop-filter: blur(4px); transition: all 0.3s ease; } .ai-messages-container::-webkit-scrollbar-thumb:hover { background: rgba(138, 180, 255, 0.35); } .ai-messages-container { scrollbar-width: thin; scrollbar-color: rgba(138, 180, 255, 0.2) rgba(255, 255, 255, 0.02); } .ai-input::-webkit-scrollbar { width: 4px; } .ai-input::-webkit-scrollbar-track { background: transparent; } .ai-input::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 2px; } .ai-input::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* ----------- Keyframes ----------- */ @keyframes aiMessageIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes messageFlow { 0% { opacity: 0; transform: translateY(-100px) scale(0.95); } 30% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes aiDotPulse { 0%, 100% { transform: scale(0.8); opacity: 0.5; } 50% { transform: scale(1); opacity: 1; } } @keyframes flyUp { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } } @keyframes slideIn { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes flowIn { 0% { opacity: 0; transform: translateX(-20px) scale(0.95); } 100% { opacity: 1; transform: translateX(0) scale(1); } } @keyframes buttonGlow { 0% { box-shadow: 0 2px 10px rgba(19, 109, 244, 0.12); } 50% { box-shadow: 0 4px 20px rgba(19, 109, 244, 0.28); } 100% { box-shadow: 0 2px 10px rgba(19, 109, 244, 0.12); } } @keyframes spinSlowDown { 0% { transform: rotate(0deg); } 100% { transform: rotate(1080deg); } } /* ----------- Loading States ----------- */ .ai-message.bot.typing .ai-bot-text { animation: none; } .ai-message.bot.typing .ai-message-content { box-shadow: 0 2px 12px rgba(99, 102, 241, 0.1); } .loading-text { display: none !important; white-space: pre-wrap !important; font-size: 15px !important; line-height: 1.7 !important; letter-spacing: 0.3px !important; font-weight: 400 !important; opacity: 1 !important; background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.95) 100% ) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; background-size: 200% 100% !important; margin-top: 2px !important; } .loading-text.pulsing { animation: shimmer 2s linear infinite !important; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Ensure the message content also fits the content */ .ai-message.bot .ai-message-content:has(.ai-bot-text.loading) { width: fit-content !important; min-width: unset !important; padding: 12px 20px !important; } .ai-bot-text.loading:not(.first-message) { width: fit-content !important; } .ai-message.bot:has(.ai-tool-activity-box.research) .ai-message-content { width: 100% !important; min-width: 0 !important; } /* For the first message */ .ai-bot-text.loading.first-message .loading-text { display: block !important; } /* Subsequent bot bubbles: no rotating phrases; bubble stays minimal until stream */ .ai-bot-text.loading:not(.first-message) .loading-text { display: none !important; } /* Animated bars while the bubble is waiting for streamed markdown (removed on first chunk) */ .ai-bot-loading-bars { display: none; align-items: center; justify-content: flex-start; line-height: 0; } .ai-bot-text.loading .ai-bot-loading-bars { display: flex; } .ai-bot-text.loading.first-message .ai-bot-loading-bars { margin-bottom: 10px; } .ai-bot-loading-bars img { display: block; width: 48px; height: auto; max-height: 52px; } /* === migrated: chatBoxStyle5.css === */ /* ----------- Mobile / Responsive ----------- */ /* Keep your existing mobile approach so that below 768px, the chat container can be full width or do something else. */ @media screen and (max-width: 768px) { .webmozai-wrapper { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; min-height: 100% !important; /* Match visible viewport on iOS Safari so nested full-height modals are not clipped */ height: 100dvh !important; min-height: 100dvh !important; padding: 0; } #chat-container { width: 100% !important; height: 100% !important; height: 100dvh !important; max-width: 100% !important; margin: 0 !important; border-radius: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; margin-right: unset !important; transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; border: none !important; } .ai-messages-container { flex: 1 !important; overflow-y: auto !important; padding-bottom: 148px !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; } .ai-message { order: unset !important; } .ai-messages-container::after { content: "" !important; padding-top: 20px !important; } .ai-input-wrapper { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; min-height: 88px !important; height: auto !important; padding: 10px 20px !important; margin: 0 !important; border-radius: 0 !important; background: rgba(20, 20, 35, 0.98) !important; backdrop-filter: blur(10px) !important; z-index: 102 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } .ai-utility-bar { position: relative !important; top: 0 !important; left: 0 !important; right: 0 !important; padding: 0px 0px 0px 4px !important; min-height: 40px !important; margin-bottom: 8px !important; width: 100% !important; } .ai-input-container { position: relative !important; margin: 0 !important; padding: 0 !important; width: 100% !important; height: auto !important; min-height: 56px !important; } .ai-input { margin: 0 !important; padding: 16px 56px 16px 20px !important; width: 100% !important; min-height: 56px !important; max-height: 150px !important; overflow-y: auto !important; overflow-y: hidden !important; /* Hide scrollbar by default */ } /* Show scrollbar only when content overflows */ .ai-input:not(:empty)::-webkit-scrollbar { display: block !important; } .ai-input:not(:empty) { overflow-y: auto !important; } .ai-send-button { position: absolute !important; right: 12px !important; width: 40px !important; height: 40px !important; } body.keyboard-visible .webmozai-wrapper { position: absolute !important; height: auto !important; } body.keyboard-visible #chat-container { position: absolute !important; height: auto !important; min-height: 100% !important; } body.keyboard-visible .ai-messages-container { padding-bottom: 60px !important; } body.keyboard-visible .ai-input-wrapper { position: absolute !important; } /* Remove unnecessary iOS-specific adjustments */ body.keyboard-visible #chat-container, body.keyboard-visible .ai-messages-container, body.keyboard-visible .ai-input-wrapper { position: fixed !important; height: auto !important; } @supports (-webkit-touch-callout: none) { .ai-input-wrapper { padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; } .ai-messages-container { padding-bottom: calc(148px + env(safe-area-inset-bottom)) !important; } } .ai-message-bottom-bar { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .ai-message.bot .ai-prep-context-callout { width: calc(100% - 36px) !important; margin-left: 36px !important; } .ai-message-memory-actions { position: relative !important; top: -6px !important; } .ai-message-actions { position: relative !important; right: auto !important; top: auto !important; transform: none !important; flex-direction: row !important; padding-top: 0 !important; border-top: none !important; opacity: 0 !important; pointer-events: auto !important; width: auto !important; justify-content: flex-end !important; margin-left: auto !important; margin-top: 0 !important; } .ai-action-icon { width: 32px !important; height: 32px !important; padding: 8px !important; } .ai-action-icon svg { width: 16px !important; height: 16px !important; } .ai-message-content { flex-direction: column !important; align-items: flex-start !important; width: auto !important; max-width: unset !important; } .ai-bot-text { width: 100% !important; margin-top: 32px !important; } .ai-bot-avatar { position: absolute !important; left: 12px !important; top: 12px !important; } .copy-icon, .thumbs-up-icon, .thumbs-down-icon, .new-chat-icon { width: 20px !important; height: 20px !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* Ensure user messages maintain right alignment */ .ai-message.user .ai-message-content { align-items: flex-start !important; width: fit-content !important; min-width: 100px !important; } .ai-message.user .ai-bot-text { margin-left: 0 !important; text-align: right !important; } .ai-message.bot.complete .ai-message-content { padding-bottom: 0px !important; } } @media screen and (max-width: 380px) { .ai-input-wrapper { min-height: 88px !important; padding: 10px 16px !important; } .ai-input { padding: 16px 48px 16px 16px !important; min-height: 52px !important; } } /* Hide certain elements on narrower screens */ @media screen and (max-width: 990px) { #navbarChat { display: none !important; } } /* ----------- Mobile Burger Menu ----------- */ .ai-mobile-burger { position: absolute !important; top: 36px !important; left: 16px !important; width: 40px !important; height: 40px !important; background: rgba(20, 20, 35, 0.95) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 8px !important; color: rgba(255, 255, 255, 0.7) !important; cursor: pointer !important; z-index: 9999 !important; padding: 8px !important; transition: all 0.3s ease !important; display: none !important; align-items: center !important; justify-content: center !important; backdrop-filter: blur(8px) !important; } .ai-mobile-burger:hover { background: rgba(255, 255, 255, 0.1) !important; color: rgba(255, 255, 255, 0.9) !important; transform: translateY(-1px) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important; } .ai-mobile-burger svg { width: 24px !important; height: 24px !important; transition: transform 0.3s ease !important; } .ai-mobile-burger.active svg { transform: rotate(90deg) !important; } /* Show burger only on mobile */ @media screen and (max-width: 768px) { .ai-mobile-burger { display: flex !important; z-index: 9999 !important; } /* Override sidebar-expanded styles on mobile */ #chat-container.sidebar-expanded { width: 100% !important; margin: 0 !important; } /* Hide burger menu when minimized */ #chat-container.minimized .ai-mobile-burger { display: none !important; } /* Add overlay when mobile sidebar is active */ .mobile-sidebar-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 9997; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .mobile-sidebar-overlay.active { opacity: 1; visibility: visible; } } /* Icon styles */ .copy-icon, .thumbs-up-icon, .thumbs-down-icon, .new-chat-icon { width: 20px !important; height: 20px !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; } /* === migrated: chatBoxStyle6.css === */ /* ----------- Error Message Styles ----------- */ /* Error icon SVG */ .error-svg { width: 24px !important; height: 24px !important; color: rgba(255, 59, 48, 0.9) !important; } /* Error state for AI message */ .ai-message.error { border-color: rgba(255, 59, 48, 0.5) !important; } .ai-message.error .ai-bot-text { color: rgba(255, 59, 48, 0.9) !important; } /* Button styles */ .ai-message.error .ai-retry-button, .ai-message.error .ai-login-button { padding: 8px 16px !important; border-radius: 6px !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 12px !important; transition: all 0.3s ease !important; background: rgba(47, 51, 99, 0.4) !important; border: 1px solid rgba(111, 119, 247, 0.3) !important; } .ai-message.error .ai-retry-button:hover, .ai-message.error .ai-login-button:hover { background: rgba(111, 119, 247, 0.15) !important; border-color: rgba(111, 119, 247, 0.5) !important; box-shadow: 0 0 15px rgba(111, 119, 247, 0.2) !important; } .ai-message-button { margin-top: 12px !important; } /* Feedback Popup Styles */ .ai-feedback-popup { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; background: rgba(25, 27, 48, 0.95) !important; border: 1px solid rgba(65, 73, 145, 0.3) !important; border-radius: 16px !important; padding: 20px !important; width: 360px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; z-index: 1000 !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } .ai-feedback-textarea { width: 100% !important; background: rgba(30, 33, 58, 0.5) !important; border: 1px solid rgba(65, 73, 145, 0.25) !important; border-radius: 12px !important; color: rgba(255, 255, 255, 0.95) !important; padding: 16px !important; margin-bottom: 16px !important; resize: none !important; font-size: 15px !important; line-height: 1.5 !important; min-height: 100px !important; transition: border-color 0.2s ease !important; font-family: inherit !important; } .ai-feedback-textarea:focus { outline: none !important; border-color: rgba(85, 93, 165, 0.5) !important; box-shadow: 0 0 0 2px rgba(85, 93, 165, 0.15) !important; } .ai-feedback-textarea::placeholder { color: rgba(255, 255, 255, 0.5) !important; } .ai-feedback-actions { display: flex !important; justify-content: flex-end !important; gap: 12px !important; } .ai-feedback-cancel, .ai-feedback-submit { width: 48px !important; height: 48px !important; padding: 0 !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.3s ease !important; } .ai-feedback-cancel svg, .ai-feedback-submit svg { width: 22px !important; height: 22px !important; } .ai-feedback-cancel { background: rgba(40, 43, 65, 0.7) !important; border: 1px solid rgba(65, 73, 145, 0.15) !important; color: rgba(255, 255, 255, 0.8) !important; } .ai-feedback-submit { background: rgba(45, 48, 81, 0.7) !important; border: 1px solid rgba(85, 93, 165, 0.3) !important; color: rgba(255, 255, 255, 0.95) !important; } .ai-feedback-cancel:hover { background: rgba(50, 54, 81, 0.8) !important; border-color: rgba(65, 73, 145, 0.3) !important; } .ai-feedback-submit:hover { background: rgba(65, 73, 145, 0.4) !important; border-color: rgba(85, 93, 165, 0.5) !important; box-shadow: 0 0 12px rgba(85, 93, 165, 0.2) !important; } /* Sources Button Styles */ .ai-sources-button { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 16px !important; margin-top: 12px !important; border-radius: 20px !important; background: rgba(111, 119, 247, 0.1) !important; border: 1px solid rgba(111, 119, 247, 0.2) !important; color: rgba(111, 119, 247, 0.9) !important; font-size: 14px !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s ease !important; } .ai-sources-button:hover { background: rgba(111, 119, 247, 0.15) !important; border-color: rgba(111, 119, 247, 0.3) !important; } /* Sources Popup Styles */ .ai-sources-popup { position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 90% !important; max-width: 600px !important; max-height: 80vh !important; background: var(--ai-background-color, #1f2937) !important; border: 1px solid rgba(111, 119, 247, 0.2) !important; border-radius: 12px !important; padding: 20px !important; z-index: 1000 !important; display: none !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important; } .ai-sources-popup.active { display: block !important; } .ai-sources-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 16px !important; padding-bottom: 12px !important; border-bottom: 1px solid rgba(111, 119, 247, 0.1) !important; } .ai-sources-header h3 { color: var(--ai-text-color, #e5e7eb) !important; font-size: 1.125rem !important; font-weight: 600 !important; margin: 0 !important; } .ai-sources-close { background: none !important; border: none !important; padding: 4px !important; color: var(--ai-text-secondary, #9ca3af) !important; cursor: pointer !important; border-radius: 4px !important; } .ai-sources-close svg { width: 20px !important; height: 20px !important; } .ai-sources-list { overflow-y: auto !important; max-height: calc(80vh - 100px) !important; } .ai-source-item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px !important; border-radius: 8px !important; transition: background 0.2s ease !important; text-decoration: none !important; color: var(--ai-text-color, #e5e7eb) !important; } .ai-source-item:hover { background: rgba(111, 119, 247, 0.1) !important; } .ai-source-favicon { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; } .ai-source-content { flex: 1 !important; min-width: 0 !important; } .ai-source-title { font-size: 0.9375rem !important; font-weight: 500 !important; margin-bottom: 4px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .ai-source-description { font-size: 0.875rem !important; color: var(--ai-text-secondary, #9ca3af) !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } /* Reconnect Button Styles */ .reconnect-button-wrapper { position: absolute; top: -44px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; z-index: 10; } .chat-reconnect-button { padding: 8px 16px !important; border-radius: 6px !important; cursor: pointer !important; display: flex !important; align-items: center !important; gap: 8px !important; transition: all 0.3s ease !important; background: rgba(47, 51, 99, 0.8) !important; border: 1px solid rgba(111, 119, 247, 0.3) !important; color: #fff !important; white-space: nowrap; } .chat-reconnect-button:hover { background: rgba(111, 119, 247, 0.25) !important; border-color: rgba(111, 119, 247, 0.5) !important; box-shadow: 0 0 15px rgba(111, 119, 247, 0.2) !important; } /* Agent launcher status - shown after action taken */ .agent-launcher-status { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 8px; width: 100%; } .agent-launcher-status .agent-status-text { display: flex; align-items: center; color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 500; font-family: "Montserrat", sans-serif; } /* Default styling for agent name part */ .agent-launcher-status .agent-name-part { color: rgba(255, 255, 255, 0.7); } /* Sunset orange glow for Rejected status - only on status word */ .agent-launcher-status.status-rejected .agent-status-part { color: rgba(255, 180, 100, 0.95); text-shadow: 0 0 8px rgba(255, 107, 53, 0.6), 0 0 12px rgba(255, 140, 66, 0.4), 0 0 16px rgba(255, 160, 122, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3); } /* Green glow for Launched status - only on status word */ .agent-launcher-status.status-launched .agent-status-part { color: rgba(180, 255, 200, 0.95); text-shadow: 0 0 8px rgba(34, 197, 94, 0.6), 0 0 12px rgba(16, 185, 129, 0.4), 0 0 16px rgba(52, 211, 153, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3); } .agent-launcher-status .agent-status-icon { width: 24px; height: 24px; object-fit: contain; margin-right: 8px; flex-shrink: 0; } .agent-launcher-status .lab-divider-line { width: 100%; height: 1px; max-height: 1px; background: linear-gradient( to right, transparent, rgba(74, 85, 104, 0.5), transparent ); margin-top: 4px; } .ai-search-result-url { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; position: absolute !important; } /* Restyled agent launcher prompt with brighter frosted glass and full-bg logo */ .agent-launcher-prompt { position: relative; width: min(90%, 300px); background: #010035; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-radius: 16px; box-shadow: 0px 0px 10px 5px rgb(119 162 255 / 63%); display: none; align-items: center; justify-content: center; overflow: visible; /* Changed from hidden */ padding: 12px; margin-top: 8px; align-self: center; /* Align left with text */ } .agent-launcher-prompt.prompt-pop-in { animation: popIn 200ms ease-out forwards; } .agent-launcher-prompt.prompt-fade-out { animation: fadeOut 300ms ease-out forwards; } /* New styles for collapsed state */ .agent-launcher-prompt.collapsed { height: 30px; width: 120px; cursor: pointer; padding: 0; background: #010035; margin-top: 8px; } /* .agent-launcher-prompt.collapsed:hover { transform: translateX(-50%) scale(1.1); } */ .agent-launcher-prompt.collapsed .launch-text, .agent-launcher-prompt.collapsed .launch-actions { display: none; } /* Selector for the main icon, not the one in the button */ .agent-launcher-prompt > img.launch-icon { display: none; /* Hide in expanded view */ } .agent-launcher-prompt.collapsed > img.launch-icon { display: block; position: absolute; left: 50%; top: 25%; transform: translate(-50%, -50%); width: 32px; height: 32px; animation: bounce 2s ease-in-out infinite; z-index: 5; transition: transform 0.2s ease-out; } .agent-launcher-prompt.collapsed:hover > img.launch-icon { transform: translate(-50%, -50%) scale(1.5); } @keyframes bounce { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 8px)); } } .agent-launcher-prompt::before { content: ""; position: absolute; top: -20%; left: -50%; width: 150%; height: 100%; transform: rotate(25deg); opacity: 0.2; pointer-events: none; } /* Text and actions stacking context above logo */ .agent-launcher-prompt .launch-text { color: #ffffff; font-size: 16px; font-weight: 500; z-index: 2; line-height: 1.2; text-align: center; pointer-events: none; white-space: normal; width: 70%; font-family: "Montserrat", sans-serif; } .agent-launcher-prompt .launch-text strong { font-weight: 600; } /* Launch actions cover the full prompt, buttons are positioned halves */ .agent-launcher-prompt .launch-actions { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; z-index: 1; border-radius: 20px; overflow: hidden; } .agent-launcher-prompt .launch-actions .launch-btn { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: linear-gradient( 270deg, rgba(180, 176, 255, 0.6) 0%, rgb(255 255 255 / 0%) 100% ); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s ease-in-out; /* No border-radius, covers right half */ justify-content: flex-end; padding-right: 16px; overflow: hidden; } .agent-launcher-prompt .launch-actions .launch-btn::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 270deg, rgb(190 186 255 / 60%) 0%, rgb(255 255 255 / 0%) 100% ); opacity: 0; transition: opacity 0.2s ease-in-out; z-index: -1; } .agent-launcher-prompt .launch-actions .launch-btn:hover::before, .agent-launcher-prompt .launch-actions .launch-btn.clicked::before { opacity: 1; } .agent-launcher-prompt .launch-actions .cancel-btn { position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient( 90deg, rgb(255 184 146 / 40%) 0%, rgb(255 255 255 / 0%) 100% ); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s ease-in-out; /* No border-radius, covers left half */ justify-content: flex-start; padding-left: 16px; overflow: hidden; } .agent-launcher-prompt .launch-actions .cancel-btn::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 90deg, rgba(255, 134, 59, 0.6) 0%, rgb(255 255 255 / 0%) 100% ); opacity: 0; transition: opacity 0.2s ease-in-out; z-index: -1; } .agent-launcher-prompt .launch-actions .cancel-btn:hover::before, .agent-launcher-prompt .launch-actions .cancel-btn.clicked::before { opacity: 1; } .agent-launcher-prompt .launch-actions .launch-icon { width: 28px; height: 28px; object-fit: contain; transition: transform 0.2s ease-out; } @keyframes popIn { 0% { transform: translateY(10px) scale(0.95); opacity: 0; } 100% { transform: translateY(0) scale(1); opacity: 1; } } @keyframes pulse { from { transform: scale(1); } to { transform: scale(1.1); } } @media (max-width: 768px) { .agent-launcher-prompt { width: 90%; height: auto; flex-direction: column; text-align: center; padding: 16px; min-width: 0; } /* launch-text is absolutely centered, no margin needed */ } /* Hover effects scoped to individual buttons */ .agent-launcher-prompt .launch-btn:hover .launch-icon { transform: scale(1.2); } .agent-launcher-prompt .cancel-btn:hover .launch-icon { transform: scale(1.05); } /* Enhanced inner border glow */ .agent-launcher-prompt .ai-button-gradient-border { border-radius: 20px !important; } .agent-launcher-prompt .ai-button-gradient-border::before { content: ""; position: absolute; inset: 0; border-radius: 20px !important; padding: 2px; background: linear-gradient( 90deg, #2196f3, #90caf9, #e3f2fd, #4a90e2, #1976d2, #0d47a1, #4a90e2, #2196f3 ); background-size: 400% 400%; animation: animateGradient 8s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.7), inset 0 0 8px rgba(144, 202, 249, 0.6), inset 0 0 8px rgba(25, 118, 210, 0.5); } .agent-launcher-prompt .ai-button-gradient-border::after { content: ""; position: absolute; inset: -5px; border-radius: 20px; z-index: -2; background: conic-gradient( from 0deg, #2196f3, #90caf9, #e3f2fd, #4a90e2, #1976d2, #0d47a1, #4a90e2, #2196f3 ); filter: blur(15px); opacity: 0.15; animation: rotateGradient 10s linear infinite; } .agent-launcher-prompt .gradient-glow { position: absolute; inset: 0; border-radius: 20px; z-index: -1; background: linear-gradient( 90deg, rgba(33, 150, 243, 0.4), rgba(144, 202, 249, 0.4), rgba(227, 242, 253, 0.4), rgba(74, 144, 226, 0.4), rgba(25, 118, 210, 0.4), rgba(13, 71, 161, 0.4), rgba(74, 144, 226, 0.4), rgba(33, 150, 243, 0.4) ); background-size: 400% 400%; filter: blur(18px); opacity: 0.5; animation: animateGradient 8s linear infinite; } /* === migrated: chatBoxStyle7.css === */ /* ----------- Tool Activity Box Styles ----------- */ .ai-tool-activity-box { width: 100% !important; background: rgba(30, 40, 60, 0.8) !important; backdrop-filter: blur(10px) !important; border: 1px solid rgba(138, 180, 255, 0.2) !important; border-radius: 12px !important; margin-bottom: 16px !important; overflow: hidden !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important; transition: all 0.3s ease !important; } .ai-tool-activity-header { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 16px !important; border-bottom: 1px solid rgba(138, 180, 255, 0.1) !important; background: rgba(44, 51, 88, 0.5) !important; } .ai-toolbox-icon { width: 24px !important; height: 24px !important; color: rgba(180, 190, 210, 0.9) !important; display: flex !important; align-items: center !important; justify-content: center !important; } .ai-toolbox-title { color: rgba(255, 255, 255, 0.9) !important; font-size: 1rem !important; font-weight: 500 !important; margin: 0 !important; } .ai-tool-activity-content { display: flex !important; gap: 24px !important; padding: 16px !important; min-height: 100px !important; } .ai-tool-steps { flex: 0 0 200px !important; border-right: 1px solid rgba(138, 180, 255, 0.1) !important; padding-right: 16px !important; display: flex; flex-direction: column; gap: 12px; } .ai-tool-step { display: flex; align-items: center; padding: 8px 12px; color: rgba(180, 190, 210, 0.7); border-radius: 6px; transition: all 0.2s ease; font-family: inherit; font-size: 14px; line-height: 1.4; position: relative; gap: 8px; } .ai-tool-step-text { flex: 1; text-align: left; transition: all 0.2s ease; } .ai-tool-step.active { background: rgba(99, 102, 241, 0.1); color: rgba(210, 215, 230, 1); } .ai-tool-step.completed { color: rgba(180, 190, 210, 0.8); } .ai-tool-step.loading { background-color: rgba(99, 102, 241, 0.05); } .ai-tool-step.loading .ai-tool-step-text { color: rgba(180, 190, 210, 0.7); text-align: left; font-family: inherit; font-weight: normal; letter-spacing: normal; } .ai-tool-step-number { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: rgba(138, 180, 255, 0.15); color: rgba(180, 190, 210, 0.8); margin-right: 8px; font-size: 14px; position: relative; flex-shrink: 0; line-height: 1; } .ai-tool-step.active .ai-tool-step-number { background: rgba(99, 102, 241, 0.15); color: rgba(210, 215, 230, 1); } .ai-tool-step.completed .ai-tool-step-number { background: rgba(34, 197, 94, 0.25) !important; } .ai-tool-step.loading .ai-tool-step-number { color: transparent; } .ai-tool-step.loading .ai-tool-step-number::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(180, 190, 210, 0.7); border-top-color: transparent; animation: spin 1s linear infinite; box-sizing: border-box; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0% { transform: translateX(-100%); } 50% { transform: translateX(100%); } 100% { transform: translateX(100%); } } .ai-tool-data { flex: 1 !important; overflow-y: auto !important; padding-right: 8px !important; max-height: 300px !important; } .ai-tool-data::-webkit-scrollbar { width: 4px !important; } .ai-tool-data::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05) !important; border-radius: 4px !important; } .ai-tool-data::-webkit-scrollbar-thumb { background: rgba(180, 190, 210, 0.2) !important; border-radius: 4px !important; } .ai-tool-data-content { color: rgba(255, 255, 255, 0.9) !important; font-size: 0.875rem !important; line-height: 1.6 !important; } .ai-tool-data-content.sources { display: flex; flex-direction: column; gap: 14px; max-height: 300px; overflow-y: auto; padding-right: 8px; } .ai-search-results { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; width: 100%; } .ai-search-results-header { font-size: 14px; font-weight: 600; color: rgba(210, 215, 230, 0.9); margin: 0 0 6px 0; padding: 0 8px; } .ai-search-result { background-color: rgba(30, 41, 59, 0.5); border: 1px solid rgba(138, 180, 255, 0.1); border-radius: 8px; padding: 10px; cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden; } .ai-search-result:hover { background-color: rgba(40, 51, 70, 0.7); border-color: rgba(180, 190, 210, 0.25); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .ai-search-result::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } .ai-search-result-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .ai-search-result-favicon { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; background-color: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .ai-search-result-favicon img { width: 100%; height: 100%; object-fit: contain; } .ai-search-result-title { font-size: 13px; font-weight: 600; margin: 0; color: rgba(210, 215, 230, 1); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .ai-search-result-title a { color: inherit; text-decoration: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 2; } .ai-search-result-snippet { font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, 0.75); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .ai-search-result-snippet strong { color: rgba(210, 215, 230, 0.9); font-weight: 500; } .ai-tool-sources-list { list-style: none !important; padding: 0 !important; margin: 0 !important; } .ai-tool-source-item { margin-bottom: 12px !important; padding: 10px !important; background: rgba(138, 180, 255, 0.05) !important; border-radius: 8px !important; border: 1px solid rgba(138, 180, 255, 0.1) !important; } .ai-tool-source-item a { display: block !important; color: rgba(210, 215, 230, 0.9) !important; font-weight: 500 !important; text-decoration: none !important; margin-bottom: 6px !important; } .ai-tool-source-item a:hover { color: rgba(210, 215, 230, 1) !important; text-decoration: underline !important; } .ai-tool-source-snippet { color: rgba(255, 255, 255, 0.7) !important; font-size: 0.875rem !important; line-height: 1.5 !important; } .ai-tool-source-snippet strong { color: rgba(255, 255, 255, 0.9) !important; font-weight: 500 !important; } .ai-tool-activity-footer { display: flex !important; justify-content: flex-end !important; gap: 12px !important; padding: 12px 16px !important; border-top: 1px solid rgba(138, 180, 255, 0.1) !important; background: rgba(44, 51, 88, 0.3) !important; } .ai-approve-button, .ai-deny-button { display: flex !important; align-items: center !important; gap: 8px !important; padding: 8px 16px !important; border-radius: 6px !important; font-size: 0.875rem !important; font-weight: 500 !important; cursor: pointer !important; transition: all 0.2s ease !important; } .ai-approve-button { background: rgba(34, 197, 94, 0.15) !important; color: rgba(34, 197, 94, 0.9) !important; border: 1px solid rgba(34, 197, 94, 0.3) !important; } .ai-approve-button:hover { background: rgba(34, 197, 94, 0.25) !important; border-color: rgba(34, 197, 94, 0.4) !important; } .ai-deny-button { background: rgba(239, 68, 68, 0.15) !important; color: rgba(239, 68, 68, 0.9) !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; } .ai-deny-button:hover { background: rgba(239, 68, 68, 0.25) !important; border-color: rgba(239, 68, 68, 0.4) !important; } .ai-approve-button svg, .ai-deny-button svg { width: 16px !important; height: 16px !important; stroke-width: 2.5 !important; } @media screen and (max-width: 768px) { .ai-tool-activity-content { flex-direction: column !important; gap: 16px !important; } .ai-tool-steps { flex: none !important; border-right: none !important; border-bottom: 1px solid rgba(138, 180, 255, 0.1) !important; padding-right: 0 !important; padding-bottom: 16px !important; } .ai-tool-data { padding-right: 0 !important; max-height: 200px !important; } .ai-tool-source-item { padding: 10px !important; } } .ai-tool-activity-box-in-message { width: 100%; margin-bottom: 16px; order: -1; } /* Fix layout when tool activity box is present - stack vertically */ .ai-message.bot:has(.ai-tool-activity-box) { flex-direction: column !important; align-items: flex-start !important; } /* Fallback for browsers that don't support :has() */ .ai-message.bot .ai-tool-activity-box + .ai-message-content { width: 100% !important; margin-top: 0 !important; } .ai-bot-text:has(.ai-tool-activity-box.media-gen) .loading-text { display: none !important; } /* Dynamic Pulse Media Activity Box - Futuristic Design */ .ai-tool-activity-box.media-gen { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; position: relative !important; overflow: visible !important; display: flex !important; align-items: flex-start !important; width: 100%; } /* When media-gen is direct child of ai-message bot */ .ai-message.bot > .ai-tool-activity-box.media-gen { margin: 0 !important; width: 100%; } /* Hide ai-message-content when media activity box is present */ .ai-message.bot:has(.ai-tool-activity-box.media-gen) .ai-message-content { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /* Fallback for browsers that don't support :has() */ .ai-message.bot .ai-tool-activity-box.media-gen + .ai-message-content { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /* Force hide when media-gen is present (JavaScript fallback) */ .ai-message.bot .ai-message-content.hidden-for-media { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } /* Task Agent Activity Box - same layout as media-gen; avatar = glass-icon smart SVG, right = view card, label = Progress, pills = view stages */ .ai-message.bot:has(.ai-tool-activity-box.task-agent) .ai-message-content { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .ai-tool-activity-box.task-agent { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; position: relative !important; overflow: visible !important; display: flex !important; align-items: flex-start !important; width: 100%; } .ai-message.bot > .ai-tool-activity-box.task-agent { margin: 0 !important; width: 85% !important; } @media (max-width: 600px) { .ai-message.bot > .ai-tool-activity-box.task-agent { width: 100% !important; } } .ai-tool-activity-box.task-agent .ai-bot-content-group, .ai-tool-activity-box.task-agent .pulse-media-container, .ai-tool-activity-box.task-agent .pulse-media-box { width: 100%; } /* Task agent progress: stack text row above view card when sidebar is open (narrow chat) */ #chat-container.sidebar-expanded .ai-tool-activity-box.task-agent .pulse-media-box.task-agent-progress-box, #chat-container.sidebar-visible .ai-tool-activity-box.task-agent .pulse-media-box.task-agent-progress-box { grid-template-columns: 1fr; width: 100%; max-width: 100%; align-items: stretch; } #chat-container.sidebar-expanded .ai-tool-activity-box.task-agent .pulse-media-box.task-agent-progress-box .pulse-media-content, #chat-container.sidebar-visible .ai-tool-activity-box.task-agent .pulse-media-box.task-agent-progress-box .pulse-media-content { width: 100%; max-width: 100%; align-self: stretch; } #chat-container.sidebar-expanded .ai-tool-activity-box.task-agent .pulse-media-box.task-agent-progress-box .task-agent-view-card, #chat-container.sidebar-visible .ai-tool-activity-box.task-agent .pulse-media-box.task-agent-progress-box .task-agent-view-card { justify-self: center; width: min(220px, 100%); } .ai-tool-activity-box.task-agent .ai-bot-avatar.task-agent-avatar { flex-shrink: 0 !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; background: linear-gradient( 145deg, rgba(99, 102, 241, 0.25) 0%, rgba(99, 102, 241, 0.15) 100% ) !important; border: 1px solid rgba(138, 180, 255, 0.3) !important; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15) !important; } .ai-tool-activity-box.task-agent .ai-bot-avatar.task-agent-avatar svg { width: 20px; height: 20px; color: rgba(255, 255, 255, 0.9); } .ai-tool-activity-box.task-agent .task-agent-callout .prompt-media-label { display: block; margin-bottom: 6px; } .ai-tool-activity-box.task-agent .task-agent-progress-pills { display: flex; flex-direction: column; gap: 8px; align-items: stretch; } .ai-tool-activity-box.task-agent .task-agent-pill { display: flex; align-items: center; justify-content: center; gap: 6px; background: #86afff4a; border: 1px solid #86afffa6; border-radius: 6px; padding: 4px 10px; font-size: 9px; font-weight: 600; color: #86afff; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; min-width: 80px; backdrop-filter: blur(3px); } .ai-tool-activity-box.task-agent .task-agent-view-card { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 220px; height: 160px; aspect-ratio: 1 / 1; gap: 0; padding: 10px; border-radius: 12px; background: linear-gradient( 303deg, rgb(3 8 25 / 79%) 0%, rgb(110 102 149 / 75%) 100% ) !important; border: 1px solid rgb(138 180 255 / 71%); box-shadow: inset 0 0 20px rgba(99, 102, 241, 0.08); transition: transform 0.18s cubic-bezier(0.32, 0.72, 0.45, 1); } .ai-tool-activity-box.task-agent .task-agent-view-card:hover { transform: translateY(-2px); } .ai-tool-activity-box.task-agent .task-agent-view-agent-icon { width: 80px; height: 80px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(138, 180, 255, 0.25)); opacity: 0.95; } /* Pulse Media Container */ .pulse-media-container { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 20px; width: 100%; max-width: 100%; } /* Pulse Media Box - CSS Grid Layout */ .pulse-media-box { position: relative; width: fit-content; /* Only fit the content inside */ max-width: 100%; min-height: 120px; border-radius: 20px; /* Deep space glass with extra white glows, like the screenshot */ background: /* subtle white highlight top-left */ radial-gradient( 90% 120% at 18% 8%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 18%, rgba(255, 255, 255, 0) 52% ), /* cool blue core glow around input */ radial-gradient( 70% 85% at 68% 38%, rgba(99, 141, 255, 0.32) 0%, rgba(60, 98, 220, 0.18) 28%, rgba(16, 27, 70, 0) 65% ), /* bottom centre indigo lift */ radial-gradient( 55% 60% at 50% 96%, rgba(98, 108, 234, 0.18) 0%, rgba(98, 108, 234, 0) 58% ), /* base panel */ linear-gradient( 180deg, rgba(15, 21, 46, 0.92) 0%, rgba(9, 12, 34, 0.92) 100% ); border: 1px solid rgba(138, 180, 255, 0.14); display: grid; grid-template-columns: auto auto; /* Auto-size both columns to fit content */ gap: 1rem; align-items: center; /* Vertically center both columns */ animation: breathingGlow 3s ease-in-out infinite; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), inset 0 0 32px rgba(74, 144, 226, 0.06); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; padding: 1rem; margin: 0; } .pulse-media-box::after { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100% ); opacity: 0.6; /* subtle */ pointer-events: none; } .pulse-media-box:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 48px rgba(74, 144, 226, 0.22), inset 0 0 38px rgba(74, 144, 226, 0.1); } /* Breathing Glow Animation - Softer Wave Effect */ @keyframes breathingGlow { 0%, 100% { box-shadow: 0 0 20px rgba(74, 144, 226, 0.1), inset 0 0 15px rgba(74, 144, 226, 0.03), 0 4px 20px rgba(0, 0, 0, 0.3); border-color: rgba(74, 144, 226, 0.2); } 50% { box-shadow: 0 0 35px rgba(123, 104, 238, 0.2), inset 0 0 25px rgba(123, 104, 238, 0.08), 0 6px 25px rgba(0, 0, 0, 0.4); border-color: rgba(123, 104, 238, 0.4); } } /* Pulse Media Content - Row layout with avatar to the left */ .pulse-media-content { display: flex; flex-direction: row; /* Avatar on left, content on right */ align-items: flex-start; align-self: flex-start; /* Align to top of grid cell */ gap: 12px; /* Gap between avatar and text content */ z-index: 2; width: fit-content; /* Only take up space needed */ max-width: 100%; height: fit-content; } /* Avatar inside pulse-media-content */ .pulse-media-content .ai-bot-avatar { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: linear-gradient( 145deg, rgba(99, 102, 241, 0.25) 0%, rgba(99, 102, 241, 0.15) 100% ); border: 1px solid rgba(138, 180, 255, 0.3); box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15); } .pulse-media-content .ai-bot-avatar img { width: 20px; height: 20px; } /* Wrapper for the text content (text + prompt callout) */ .pulse-media-text-wrapper { display: flex; flex-direction: column; gap: 12px; flex: 1; } /* Pulse Media Text - Left Column */ .pulse-media-text { display: inline-flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.7); /* Less white, more subdued */ font-family: var(--montserrat-para); font-size: 16px; font-weight: 500; letter-spacing: 0.15px; line-height: 1.4; text-align: left; max-width: 500px; /* Limit text width */ } .pulse-media-status-text { display: inline-block; position: relative; } .pulse-media-status-text-fragment { display: inline; } .pulse-media-highlight-success { color: rgba(180, 255, 200, 0.95); text-shadow: 0 0 8px rgba(34, 197, 94, 0.6), 0 0 12px rgba(16, 185, 129, 0.4), 0 0 16px rgba(52, 211, 153, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3); } .pulse-media-highlight-error { color: rgba(255, 180, 100, 0.95); text-shadow: 0 0 8px rgba(255, 107, 53, 0.6), 0 0 12px rgba(255, 140, 66, 0.4), 0 0 16px rgba(255, 160, 122, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3); } .pulse-media-status-text--loading { background-image: linear-gradient( 120deg, rgba(156, 206, 255, 0.35) 0%, rgba(255, 255, 255, 0.95) 45%, rgba(156, 206, 255, 0.45) 80%, rgba(255, 255, 255, 0.7) 100% ); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 4s ease-in-out infinite; } .pulse-media-status-text--loading::after { content: ""; display: inline-block; width: 1.5ch; margin-left: 2px; color: rgba(255, 255, 255, 0.95); text-shadow: 0 0 8px rgba(255, 255, 255, 0.55); animation: mediaStatusEllipsis 1.1s steps(4, end) infinite; } @keyframes mediaStatusEllipsis { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } 100% { content: ""; } } /* Prompt Callout - Glassmorphic Design */ .prompt-callout { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05) ); border: 1.5px solid rgba(255, 255, 255, 0.35); padding: 0.75rem; border-radius: 0.75rem; transition: background 0.3s ease, border-color 0.3s ease, height 0.4s ease-out; align-self: flex-start; /* Align to start instead of center */ cursor: pointer; overflow: hidden; position: relative; max-width: 300px; /* Limit the width */ width: fit-content; /* Only take up space needed */ min-width: fit-content; /* Prevent width from shrinking */ } .prompt-callout:hover { background: rgba(255, 255, 255, 0.18); } /* Expanded state */ .prompt-callout.expanded { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08) ); border-color: rgba(255, 255, 255, 0.5); /* Keep max-width the same to prevent width change */ max-width: 300px; } .prompt-callout.expanded:hover { background: rgba(255, 255, 255, 0.25); } .prompt-media-label { font-size: 0.75rem; /* text-xs */ color: rgba(255, 255, 255, 0.5); /* text-white/50 */ font-weight: 500; margin-bottom: 0.25rem; display: block; } .prompt-media-text { font-size: 11px !important; /* text-xs */ color: rgba(255, 255, 255, 0.8) !important; /* text-white/80 */ margin: 0 !important; line-height: 1.4 !important; word-wrap: break-word; overflow-wrap: break-word; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 4; /* Doubled from 2 to 4 lines */ line-clamp: 4; /* Doubled from 2 to 4 lines */ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* Typewriter effect */ .prompt-media-text.typewriter { overflow: hidden; white-space: nowrap; border-right: 2px solid rgba(255, 255, 255, 0.6); animation: blink-caret 1s step-end infinite; } @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: rgba(255, 255, 255, 0.6); } } @keyframes textPulse { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } /* Orbital Wrapper - 1:1 Frame with Shimmer */ .orbital-wrapper { position: relative; width: 150px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; align-self: center; /* Vertically center in grid cell */ background: linear-gradient( 135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03) ); border: 1.5px solid rgba(74, 144, 226, 0.25); border-radius: 12px; overflow: hidden; flex-shrink: 0; /* Prevent shrinking */ } /* Review Pill (plan ready state) */ .review-pill { display: inline-flex; align-items: center; justify-content: center; padding: 4px 16px; border-radius: 40px; border: 0.8px solid rgb(255 255 255 / 20%); background: rgb(15 18 64 / 63%); color: #9fd9ff; text-shadow: 0 0 12px rgba(87, 171, 255, 0.85); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.7; cursor: pointer; transition: color 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 -4px 12px rgb(255 255 255 / 22%); } .review-pill:hover, .review-pill:focus-visible, .pulse-media-box:hover .review-pill:not(.review-pill--cancelled), .pulse-media-box:focus-within .review-pill:not(.review-pill--cancelled) { color: rgba(255, 255, 255, 1); opacity: 0.95; transform: translateY(-1px); box-shadow: inset 0 -4px 14px rgba(255, 255, 255, 0.18), 0 4px 16px rgba(0, 0, 0, 0.25); outline: none; } .review-pill--cancelled { color: #ffbe86; background: rgba(69, 30, 5, 0.78); border-color: rgba(255, 190, 134, 0.45); text-shadow: 0 0 12px rgba(255, 153, 51, 0.85); cursor: default; pointer-events: none; } .review-pill--cancelled:hover, .review-pill--cancelled:focus-visible { transform: none; box-shadow: inset 0 -4px 12px rgba(255, 190, 134, 0.25); } /* Shimmer effect for orbital wrapper */ .orbital-wrapper::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100% ); animation: orbitalShimmer 2.5s ease-in-out infinite; pointer-events: none; filter: blur(10px); } @keyframes orbitalShimmer { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } /* Neon Orbit Loader */ .wm-orbit-loader { --wm-loader-size: 50px; --wm-orbit-size: 8px; position: relative; width: var(--wm-loader-size); height: var(--wm-loader-size); transform: rotate(45deg); } .wm-orbit { position: absolute; inset: 0; border-radius: 50%; --delay: calc(var(--index, 0) * 0.1s); animation: wm-orbit-anim 1.5s var(--delay) ease-in-out infinite; opacity: calc(1 - (0.15 * var(--index, 0))); } .wm-orbit::after { content: ""; position: absolute; top: 0; left: 0; width: var(--wm-orbit-size); height: var(--wm-orbit-size); background-color: #3fa9ff; box-shadow: 0 0 20px 4px #3fa9ff, 0 0 40px 8px rgba(0, 153, 255, 0.6); border-radius: 50%; } .wm-orbit-loader.completed { opacity: 0.2; animation: none; } .wm-orbit-loader.completed .wm-orbit { animation: none; opacity: 0; } .orbital-wrapper:has(.wm-orbit-loader.completed)::before { display: none; } @keyframes wm-orbit-anim { 0% { transform: rotate(0deg); } 80%, 100% { transform: rotate(360deg); } } /* Orbital Media Preview Styles - Right Column */ .orbital-media-preview { position: relative; width: 100%; aspect-ratio: 1 / 1; /* Changed to 1:1 to match orbital-wrapper */ border-radius: 12px; /* Match wrapper border radius */ overflow: hidden; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: none; /* Remove border as wrapper already has one */ box-shadow: none; /* Remove shadow as wrapper already provides the frame */ } .orbital-media-preview:hover { transform: scale(1.05); /* Subtle scale on hover */ } .orbital-media-preview img, .orbital-media-preview video { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; /* Match wrapper border radius */ transition: transform 0.3s ease; } .orbital-media-preview:hover img, .orbital-media-preview:hover video { transform: scale(1.05); } @keyframes constellationGlow { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } /* Removed all buttons and overlay - entire box is now clickable */ /* Accessibility Features - Focus states only */ /* Focus states for accessibility */ .pulse-media-box:focus { outline: 2px solid #4a90e2; outline-offset: 2px; } /* Mobile responsiveness */ @media (max-width: 768px) { .pulse-media-box { max-width: fit-content; min-height: 100px; grid-template-columns: 1fr; gap: 0.75rem; padding: 1rem; } .pulse-media-text { font-size: 14px; } .prompt-callout { padding: 0.5rem; } .prompt-media-label, .prompt-media-text { font-size: 0.7rem; } .orbital-media-preview { aspect-ratio: 1 / 1; /* Keep 1:1 on mobile */ } .pulse-media-content { padding-top: 38px; /* Fix overlap with ai-bot-avatar */ } .pulse-media-content .ai-bot-avatar { width: 24px; height: 24px; } .pulse-media-content .ai-bot-avatar img { width: 16px; height: 16px; } /* Horizontally center orbital-wrapper on mobile */ .orbital-wrapper { margin-left: auto; margin-right: auto; } } @media (max-width: 480px) { .pulse-media-box { max-width: fit-content; min-height: 80px; grid-template-columns: 1fr; gap: 0.5rem; padding: 0.75rem; } .pulse-media-text { font-size: 13px; } .prompt-callout { padding: 0.4rem; } .prompt-media-label, .prompt-media-text { font-size: 0.65rem; } .orbital-media-preview { aspect-ratio: 1/1; } .pulse-media-content .ai-bot-avatar { width: 22px; height: 22px; } .pulse-media-content .ai-bot-avatar img { width: 14px; height: 14px; } } .ai-message-content-wrapper { display: flex; width: 100%; align-items: flex-start; flex-direction: row; } .ai-tool-activity-box.media-gen .ai-message-content-wrapper { gap: 12px; } .ai-tool-activity-box.media-gen .ai-bot-avatar { align-self: flex-start !important; flex-shrink: 0 !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; background: linear-gradient( 145deg, rgba(99, 102, 241, 0.25) 0%, rgba(99, 102, 241, 0.15) 100% ) !important; border: 1px solid rgba(138, 180, 255, 0.3) !important; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15) !important; } .ai-tool-activity-box.media-gen .ai-bot-avatar img { width: 20px; height: 20px; } .research-box-wrapper { width: 100% !important; display: flex !important; justify-content: center !important; } .research-box-wrapper .ai-tool-activity-box.research, .ai-message-content > .ai-tool-activity-box.research { background: #faf9f6 !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; border-radius: 8px !important; margin-bottom: 16px !important; overflow: hidden !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; transition: inline-size 0.3s ease, max-inline-size 0.3s ease, box-shadow 0.3s ease !important; inline-size: auto !important; max-inline-size: min(760px, 100%) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; flex-shrink: 0 !important; } .research-box-wrapper .ai-tool-activity-box.research.research-expanded { inline-size: 100% !important; max-inline-size: 100% !important; } /* Ensure research box doesn't overflow its parent on mobile */ @media screen and (max-width: 768px) { .ai-message-content { overflow-x: hidden !important; max-width: 100% !important; } /* Unset ai-bot-text margin-top when ai-message-content has research-box-wrapper */ .ai-message-content:has(.research-box-wrapper) .ai-bot-text { margin-top: unset !important; } } .ai-tool-activity-box.research .research-header { display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; padding: 12px 16px !important; background: #faf9f6 !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; cursor: pointer !important; transition: background-color 0.2s ease !important; width: 100% !important; box-sizing: border-box !important; gap: 12px !important; } .ai-tool-activity-box.research .research-header:hover { background: #f5f4f1 !important; } /* Style lab-divider-line inside research activity box */ .ai-tool-activity-box.research .lab-divider-line { flex-grow: 1 !important; height: 1px !important; max-height: 1px !important; background: linear-gradient( to right, transparent, rgba(0, 0, 0, 0.15), transparent ) !important; margin: 12px 0 !important; display: block !important; } .ai-tool-activity-box.research .research-icon { width: 24px !important; height: 24px !important; flex-shrink: 0 !important; color: #666 !important; position: static !important; } .ai-tool-activity-box.research .research-status-text { font-size: 14px !important; font-weight: 500 !important; color: #1a1a1a !important; display: inline-block !important; text-align: center !important; justify-self: center !important; width: 100% !important; } .ai-tool-activity-box.research .research-status-text--loading { background-image: linear-gradient( 90deg, rgba(26, 26, 26, 0.95) 0%, rgba(26, 26, 26, 0.5) 50%, rgba(26, 26, 26, 0.95) 100% ) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; background-size: 200% 100% !important; animation: shimmer 2s linear infinite !important; position: relative !important; } .ai-tool-activity-box.research .research-dropdown-icon { width: 20px !important; height: 20px !important; color: #666 !important; transition: transform 0.3s ease !important; flex-shrink: 0 !important; position: static !important; justify-self: end !important; } .ai-tool-activity-box.research .research-content { padding: 16px !important; background: #faf9f6 !important; overflow-x: hidden !important; overflow-y: visible !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } .ai-tool-activity-box.research .research-queries { display: flex !important; flex-direction: column !important; gap: 12px !important; margin-bottom: 16px !important; } .ai-tool-activity-box.research .research-query-group { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; } .ai-tool-activity-box.research .research-query-label { font-size: 10px !important; font-weight: 500 !important; color: #999 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; text-align: center !important; } .ai-tool-activity-box.research .research-query-pill { display: inline-flex !important; padding: 6px 12px !important; border-radius: 16px !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; width: fit-content !important; max-width: 100% !important; word-wrap: break-word !important; text-align: center !important; } .ai-tool-activity-box.research .research-query-pill.optimized { background: #ffffff !important; color: #1a1a1a !important; border: 2px solid #1f346d82 !important; box-shadow: 0 0 8px rgba(91, 159, 255, 0.4), 0 0 12px rgba(91, 159, 255, 0.2) !important; position: relative !important; } .ai-tool-activity-box.research .research-sources { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; margin-bottom: 16px !important; max-height: 115px !important; overflow-y: auto !important; /* Transparent mask on bottom to fade out when scrollable */ -webkit-mask-image: linear-gradient( to bottom, black 0%, black 85%, transparent 100% ) !important; mask-image: linear-gradient( to bottom, black 0%, black 85%, transparent 100% ) !important; -webkit-mask-size: 100% 100% !important; mask-size: 100% 100% !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important; } .ai-tool-activity-box.research .research-sources .research-query-label { margin-bottom: 4px !important; } .ai-tool-activity-box.research .research-sources-wrapper { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; width: 100% !important; } .ai-tool-activity-box.research .research-source-pill { display: flex !important; align-items: center !important; gap: 4px !important; padding: 4px 8px !important; background: #f8f9fa !important; border: 1px solid #e0e0e0 !important; border-radius: 12px !important; font-size: 11px !important; color: #1a1a1a !important; transition: all 0.2s ease !important; cursor: pointer !important; width: fit-content !important; min-width: fit-content !important; max-width: 100% !important; box-sizing: border-box !important; } .ai-tool-activity-box.research .research-source-pill:hover { background: #e9ecef !important; border-color: #5b9fff !important; transform: translateY(-1px) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; } .ai-tool-activity-box.research .research-source-favicon { width: 12px !important; height: 12px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 2px !important; overflow: hidden !important; } .ai-tool-activity-box.research .research-source-favicon img { width: 100% !important; height: 100% !important; object-fit: contain !important; } .ai-tool-activity-box.research .research-source-favicon svg { width: 100% !important; height: 100% !important; color: #666 !important; } .ai-tool-activity-box.research .research-source-title { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; flex: 1 !important; min-width: 0 !important; } /* Inline link pills for chat messages (works for both bot and user text) */ .research-source-pill { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 4px 8px !important; background: #f8f9fa !important; border: 1px solid #e0e0e0 !important; border-radius: 12px !important; font-size: 11px !important; color: #1a1a1a !important; transition: all 0.2s ease !important; cursor: pointer !important; width: fit-content !important; min-width: fit-content !important; max-width: 100% !important; box-sizing: border-box !important; vertical-align: middle !important; margin: 0 2px !important; text-decoration: none !important; } .research-source-pill:hover { background: #e9ecef !important; border-color: #5b9fff !important; transform: translateY(-1px) !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; } .research-source-favicon { width: 12px !important; height: 12px !important; flex-shrink: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 2px !important; overflow: hidden !important; } .research-source-favicon img { width: 100% !important; height: 100% !important; object-fit: contain !important; } .research-source-favicon svg { width: 100% !important; height: 100% !important; color: #666 !important; } .research-source-title { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; flex: 1 !important; min-width: 0 !important; } .ai-tool-activity-box.research .research-text { height: 250px !important; overflow-y: auto !important; overflow-x: hidden !important; background: #faf9f6 !important; padding: 10px !important; /* Extra bottom padding for arrow */ /* Mask on all four sides using a 2D linear gradient (CSS gradient corners hack) */ -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 4%, black 96%, transparent 100% ), linear-gradient( to top, transparent 0%, black 4%, black 96%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, black 4%, black 96%, transparent 100% ), linear-gradient( to top, transparent 0%, black 4%, black 96%, transparent 100% ); -webkit-mask-composite: intersect; mask-composite: intersect; -webkit-mask-size: 100% 100%, 100% 100% !important; mask-size: 100% 100%, 100% 100% !important; -webkit-mask-repeat: no-repeat, no-repeat !important; mask-repeat: no-repeat, no-repeat !important; box-sizing: border-box !important; position: relative !important; /* Always show scrollbar */ scrollbar-width: thin !important; /* Always show scrollbar in Firefox */ scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05) !important; -ms-overflow-style: scrollbar !important; /* Always show scrollbar in IE/Edge */ } /* Always show scrollbar for research-text in Webkit browsers */ .ai-tool-activity-box.research .research-text::-webkit-scrollbar { display: block !important; width: 8px !important; -webkit-appearance: none !important; } .ai-tool-activity-box.research .research-text::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05) !important; border-radius: 4px !important; } .ai-tool-activity-box.research .research-text::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2) !important; border-radius: 4px !important; } .ai-tool-activity-box.research .research-text::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.3) !important; } /* Down arrow SVG fixed in bottom right - doesn't scroll with content */ .ai-tool-activity-box.research .research-text-arrow { position: absolute !important; bottom: 12px !important; right: 12px !important; width: 16px !important; height: 16px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; pointer-events: none !important; z-index: 100 !important; display: block !important; visibility: visible !important; opacity: 1 !important; } /* Override .ai-bot-text and .ai-message styles for research text content */ .ai-tool-activity-box.research .research-text-content { color: #010035b8 !important; font-size: 12px !important; padding: 8px 8px !important; line-height: 1.4 !important; } .ai-tool-activity-box.research .research-text-content p { margin: 0 0 12px 0 !important; color: #010035b8 !important; font-size: 12px !important; line-height: 1.4 !important; } .ai-tool-activity-box.research .research-text-content p:first-child { margin-top: 0 !important; } .ai-tool-activity-box.research .research-text-content p:last-child { margin-bottom: 0 !important; } .ai-tool-activity-box.research .research-text-content ul, .ai-tool-activity-box.research .research-text-content ol { margin: 0 0 12px 0 !important; padding-left: 20px !important; color: #010035b8 !important; font-size: 12px !important; line-height: 1.4 !important; } .ai-tool-activity-box.research .research-text-content ul:last-child, .ai-tool-activity-box.research .research-text-content ol:last-child { margin-bottom: 0 !important; } .ai-tool-activity-box.research .research-text-content li { margin: 0 0 6px 0 !important; color: #010035b8 !important; font-size: 12px !important; line-height: 1.4 !important; } .ai-tool-activity-box.research .research-text-content li:last-child { margin-bottom: 0 !important; } .ai-tool-activity-box.research .research-text-content strong { color: #010035b8 !important; font-weight: 600 !important; } .ai-tool-activity-box.research .research-text-content em { color: #010035b8 !important; font-style: italic !important; } .ai-tool-activity-box.research .research-text-content h1 { margin: 16px 0 12px 0 !important; color: #010035b8 !important; font-weight: 600 !important; line-height: 1.4 !important; font-size: 15px !important; } .ai-tool-activity-box.research .research-text-content h2 { margin: 14px 0 10px 0 !important; color: #010035b8 !important; font-weight: 600 !important; line-height: 1.4 !important; font-size: 14px !important; } .ai-tool-activity-box.research .research-text-content h3, .ai-tool-activity-box.research .research-text-content h4, .ai-tool-activity-box.research .research-text-content h5, .ai-tool-activity-box.research .research-text-content h6 { margin: 12px 0 8px 0 !important; color: #010035b8 !important; font-weight: 600 !important; line-height: 1.4 !important; font-size: 13px !important; } .ai-tool-activity-box.research .research-text-content h1:first-child, .ai-tool-activity-box.research .research-text-content h2:first-child, .ai-tool-activity-box.research .research-text-content h3:first-child, .ai-tool-activity-box.research .research-text-content h4:first-child, .ai-tool-activity-box.research .research-text-content h5:first-child, .ai-tool-activity-box.research .research-text-content h6:first-child { margin-top: 0 !important; } .ai-tool-activity-box.research .research-text-content a { color: #5b9fff !important; } .ai-tool-activity-box.research .research-text-content code { font-family: "SF Mono", "Roboto Mono", Consolas, monospace !important; font-size: 11px !important; padding: 2px 4px !important; background: rgba(0, 0, 0, 0.05) !important; border-radius: 3px !important; color: #010035b8 !important; } .ai-tool-activity-box.research .research-search-suggestions { display: block !important; } .ai-tool-activity-box.research .research-search-suggestions-wrapper { width: 100% !important; display: flex !important; justify-content: center !important; } /* Ensure search suggestions from Google render properly */ /* Force dark mode for Google's rendered_content using color-scheme */ /* This makes @media(prefers-color-scheme: dark) rules apply automatically */ .ai-tool-activity-box.research .research-search-suggestions-wrapper { color-scheme: dark !important; /* Force dark mode for this container */ } /* Minimal layout fixes - let Google's CSS handle colors/styling */ .ai-tool-activity-box.research .research-search-suggestions-wrapper .container { width: fit-content !important; max-width: 100% !important; display: flex !important; align-items: center !important; overflow: hidden !important; /* Apply mask to fade on the right side */ -webkit-mask-image: linear-gradient( to right, black 0%, black 100% ) !important; mask-image: linear-gradient(to right, black 0%, black 100%) !important; } /* Ensure SVG logos in search suggestions maintain their size */ .ai-tool-activity-box.research .research-search-suggestions-wrapper svg, .ai-tool-activity-box.research .research-search-suggestions-wrapper .headline svg { width: 18px !important; height: 18px !important; max-width: none !important; min-width: 18px !important; flex-shrink: 0 !important; } /* Ensure headline container doesn't shrink */ .ai-tool-activity-box.research .research-search-suggestions-wrapper .headline { flex-shrink: 0 !important; display: flex !important; align-items: center !important; margin-right: 4px !important; } /* Ensure chips expand to fit their text content */ .ai-tool-activity-box.research .research-search-suggestions-wrapper .chip { width: fit-content !important; max-width: none !important; min-width: fit-content !important; transition: box-shadow 0.2s ease, opacity 0.2s ease !important; position: relative !important; z-index: 0 !important; padding: 4px 8px !important; font-size: 11px !important; } /* Hover effect for chips: add internal box shadow instead of transform */ .ai-tool-activity-box.research .research-search-suggestions-wrapper .chip:hover { box-shadow: inset 0 0 8px 2px rgb(255 255 255 / 81%) !important; opacity: 0.9 !important; } /* Make carousel horizontally scrollable */ .ai-tool-activity-box.research .research-search-suggestions-wrapper .carousel { overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; -ms-overflow-style: none !important; -webkit-overflow-scrolling: touch !important; white-space: nowrap !important; flex: 1 !important; min-width: 0 !important; max-width: 100% !important; } .ai-tool-activity-box.research .research-search-suggestions-wrapper .carousel::-webkit-scrollbar { display: none !important; } .ai-bot-text:has(.ai-tool-activity-box.research) .loading-text { display: none !important; } .ai-message.bot:has(.ai-tool-activity-box.research) { flex-direction: column !important; align-items: flex-start !important; } .ai-tool-activity-box.research *:not(svg):not(svg *):not(.headline):not(.headline *):not(.chip):not( .chip * ) { max-width: 100% !important; box-sizing: border-box !important; } /* Prevent content from expanding the box */ .ai-tool-activity-box.research .research-queries, .ai-tool-activity-box.research .research-sources, .ai-tool-activity-box.research .research-text, .ai-tool-activity-box.research .research-search-suggestions { width: 100% !important; max-width: 100% !important; min-width: 0 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; box-sizing: border-box !important; } .ai-tool-activity-box.research .research-search-suggestions-wrapper { box-sizing: border-box !important; } @media screen and (max-width: 768px) { /* Mobile responsive fix - prevent horizontal scroll */ .research-box-wrapper .ai-tool-activity-box.research, .ai-message-content > .ai-tool-activity-box.research { width: 100% !important; /* Use 100% on mobile to prevent viewport overflow */ max-width: 100% !important; margin-bottom: 0px !important; overflow-x: hidden !important; } .ai-tool-activity-box.research .research-header { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; min-width: 0 !important; } .ai-tool-activity-box.research .research-status-text { max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; flex: 1 !important; min-width: 0 !important; } .ai-tool-activity-box.research .research-content { padding: 12px !important; overflow-x: hidden !important; /* Keep hidden to prevent horizontal scroll on content */ max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } .ai-tool-activity-box.research .research-queries { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .ai-tool-activity-box.research .research-query-group { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .ai-tool-activity-box.research .research-query-pill { font-size: 13px !important; padding: 6px 12px !important; max-width: 100% !important; width: fit-content !important; min-width: fit-content !important; box-sizing: border-box !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } .ai-tool-activity-box.research .research-sources { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; align-items: stretch !important; /* Allow wrapper to fill width */ gap: 0px !important; } /* Make sources wrapper a horizontal scrollable carousel on mobile */ .ai-tool-activity-box.research .research-sources-wrapper { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 8px !important; width: 100% !important; padding-left: 0 !important; /* No padding - we'll use spacer instead */ padding-right: 12px !important; /* Space after last pill */ padding-bottom: 4px !important; padding-top: 4px !important; scrollbar-width: none !important; /* Hide scrollbar in Firefox */ -ms-overflow-style: none !important; /* Hide scrollbar in IE/Edge */ -webkit-overflow-scrolling: touch !important; scroll-padding-left: 0 !important; scroll-padding-right: 12px !important; } /* Add spacer before first pill to ensure scroll can reach start and show first pill */ .ai-tool-activity-box.research .research-sources-wrapper::before { content: "" !important; flex-shrink: 0 !important; width: 12px !important; /* Match parent padding */ height: 1px !important; pointer-events: none !important; } /* Add spacer after last pill for symmetry */ .ai-tool-activity-box.research .research-sources-wrapper::after { content: "" !important; flex-shrink: 0 !important; width: 0 !important; /* Already have padding-right */ height: 1px !important; pointer-events: none !important; } /* Hide scrollbar for research-sources-wrapper in Webkit browsers */ .ai-tool-activity-box.research .research-sources-wrapper::-webkit-scrollbar { display: none !important; } .ai-tool-activity-box.research .research-source-pill { width: fit-content !important; min-width: fit-content !important; max-width: none !important; flex-shrink: 0 !important; font-size: 10px !important; padding: 3px 6px !important; box-sizing: border-box !important; } .ai-tool-activity-box.research .research-text { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .ai-tool-activity-box.research .research-text-content { width: 100% !important; max-width: 100% !important; padding: 16px !important; box-sizing: border-box !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } .ai-tool-activity-box.research .research-text-content * { max-width: 100% !important; box-sizing: border-box !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } .ai-tool-activity-box.research .research-search-suggestions { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: hidden !important; } .ai-tool-activity-box.research .research-search-suggestions-wrapper { max-width: 100% !important; width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; } .ai-tool-activity-box.research .research-search-suggestions-wrapper .container { max-width: 100% !important; width: fit-content !important; overflow-x: hidden !important; box-sizing: border-box !important; } .ai-tool-activity-box.research .research-search-suggestions-wrapper .carousel { max-width: 100% !important; flex: 1 !important; min-width: 0 !important; overflow-x: auto !important; box-sizing: border-box !important; } } .ai-bot-content-group { display: flex; flex-direction: column; flex: 1; gap: 12px; min-width: 0 !important; width: 100% !important; max-width: 100% !important; align-items: stretch !important; } .ai-tool-activity-box.task-agent .task-agent-view-card.is-final { border: 1px solid rgba(34, 197, 94, 0.85) !important; box-shadow: 0 0 16px rgba(34, 197, 94, 0.28), 0 0 28px rgba(16, 185, 129, 0.18), inset 0 0 20px rgba(99, 102, 241, 0.08) !important; } .ai-tool-activity-box.task-agent.task-agent-terminal .task-agent-view-card { opacity: 0.92; border-color: rgba(148, 163, 184, 0.5) !important; box-shadow: none !important; } .ai-tool-activity-box.task-agent.task-agent-terminal .task-agent-view-card.is-final { border-color: rgba(148, 163, 184, 0.5) !important; box-shadow: none !important; } .ai-tool-activity-box.task-agent.task-agent-terminal .task-agent-progress-pills { opacity: 0.5; } /* === migrated: chatBoxStyle8.css === */ /* Drag and Drop Overlay */ #file-drag-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient( 145deg, rgb(2 4 11) 0%, rgb(136 131 166 / 7%) 100% ) !important; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: none; align-items: center; justify-content: center; z-index: 10002; opacity: 0; transition: opacity 0.3s ease-in-out; border: 2px solid transparent; animation: pulse-glow 2s infinite; } @keyframes pulse-glow { 0% { box-shadow: 0 0 10px 0px rgba(138, 180, 255, 0.3), inset 0 0 10px 0px rgba(138, 180, 255, 0.2); } 50% { box-shadow: 0 0 20px 5px rgba(138, 180, 255, 0.7), inset 0 0 20px 2px rgba(138, 180, 255, 0.5); } 100% { box-shadow: 0 0 10px 0px rgba(138, 180, 255, 0.3), inset 0 0 10px 0px rgba(138, 180, 255, 0.2); } } #file-drag-overlay.visible { display: flex; opacity: 1; } .file-overlay-content { text-align: center; color: white; font-size: 1.5rem; font-weight: 500; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); position: relative; z-index: 1; /* Make sure content is above pseudo-elements */ } .file-overlay-content p { background: linear-gradient(145deg, #415d8f 0%, #bdcde9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--montserrat-para); } .file-overlay-icon { display: block; margin: 0 auto 16px; animation: bounce-icon 1.5s infinite; } @keyframes pulse-border { 0% { border-color: rgba(255, 255, 255, 0.5); } 50% { border-color: rgba(255, 255, 255, 1); } 100% { border-color: rgba(255, 255, 255, 0.5); } } @keyframes bounce-icon { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-10px); } } /* File Upload Preview */ #file-upload-preview-container { position: absolute; bottom: calc(100% + 8px); left: 20px; display: flex; align-items: center; gap: 0; z-index: 10; } .file-preview-icon { position: relative; width: 44px; height: 44px; background: rgba(1, 0, 53, 0.8); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease-out; } .file-preview-icon .ai-button-gradient-border { display: block !important; position: absolute !important; inset: -1px !important; border-radius: 12px !important; padding: 1px !important; background: transparent !important; overflow: hidden !important; z-index: 0 !important; } .file-preview-icon .ai-button-gradient-border::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: 12px !important; padding: 1px !important; background: linear-gradient( 90deg, #ff0080, #ff8c00, #ffce00, #6b5bfd, #1950fa, #0068fc, #6b5bfd, #ff0080 ) !important; background-size: 400% 400% !important; animation: animateGradient 8s linear infinite !important; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; mask-composite: exclude !important; } .file-preview-icon .gradient-glow { position: absolute; inset: 0; border-radius: 12px; z-index: -1; background: linear-gradient( 90deg, rgba(255, 0, 128, 0.4), rgba(107, 91, 253, 0.4), rgba(0, 104, 252, 0.4), rgba(255, 0, 128, 0.4) ); background-size: 400% 400%; filter: blur(10px); opacity: 0.5; animation: animateGradient 8s linear infinite; } @keyframes animateGradient { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } } .file-preview-remove { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; background-color: #383838; color: #fff; border-radius: 50%; border: 1px solid #555; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; cursor: pointer; opacity: 0; transform: scale(0.8); transition: all 0.2s ease-out; z-index: 10006; /* Ensure it's above the tooltip and other elements */ } .file-preview-icon:hover .file-preview-remove { opacity: 1; transform: scale(1); } .file-preview-remove:hover { background-color: rgba(255, 0, 0, 0.8); border-color: white; } .file-preview-icon:not(:first-child) { margin-left: -12px; } .file-preview-icon:hover { transform: translateY(-4px) scale(1.1); z-index: 2; } .file-preview-icon img { width: 36px; height: 36px; object-fit: contain; z-index: 1; } /* Placeholder for other file types .file-preview-icon[data-type="xlsx"] img { content: url('URL_FOR_XLSX_ICON'); } .file-preview-icon[data-type="docx"] img { content: url('URL_FOR_DOCX_ICON'); } */ /* File Attachments in Message Bubble */ .message-attachments-container { position: relative; display: flex; justify-content: flex-end; } .files-button { position: relative; background: linear-gradient( 145deg, rgb(2 4 11) 0%, rgb(24 31 72) 100% ) !important; border: none; border-radius: 8px; padding: 0 16px; height: 28px; cursor: pointer; transition: all 0.2s ease-in-out; display: flex; align-items: center; } .files-button:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(107, 91, 253, 0.2); } .message-attachments-container.active .files-button { background-color: #4a4a52; /* A slightly lighter shade to indicate active state */ box-shadow: 0 0 5px rgba(81, 158, 255, 0.5); } .files-button .ai-button-gradient-border { display: block !important; position: absolute !important; inset: -1px !important; border-radius: 8px !important; padding: 1px !important; background: transparent !important; overflow: hidden !important; z-index: 0 !important; } .files-button .ai-button-gradient-border::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: 8px !important; padding: 1px !important; background: linear-gradient( 90deg, #ff0080, #ff8c00, #ffce00, #6b5bfd, #1950fa, #0068fc, #6b5bfd, #ff0080 ) !important; background-size: 400% 400% !important; animation: animateGradient 8s linear infinite !important; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; -webkit-mask-composite: xor !important; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important; mask-composite: exclude !important; } .files-button .gradient-glow { position: absolute; inset: 0; border-radius: 8px; z-index: -1; background: linear-gradient( 90deg, rgba(255, 0, 128, 0.4), rgba(107, 91, 253, 0.4), rgba(0, 104, 252, 0.4), rgba(255, 0, 128, 0.4) ); background-size: 400% 400%; filter: blur(10px); opacity: 0.5; animation: animateGradient 8s linear infinite; } .files-button-text { position: relative; z-index: 1; font-weight: 600; font-size: 12px; text-transform: uppercase; background: linear-gradient(135deg, #d4d4d8 0%, #a1a1aa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--montserrat-para); } .attachment-icons-list { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); display: flex; justify-content: center; /* Center icons within the list */ gap: 0; opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 10; pointer-events: none; } .message-attachments-container.active .attachment-icons-list { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .attachment-icons-list .attachment-icon { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(138, 180, 255, 0.25); background-color: rgba(1, 0, 53, 0.8); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease-out; position: relative; /* For hover z-index to work */ } .attachment-icons-list .attachment-icon:not(:first-child) { margin-left: -12px; /* Stacking effect */ } .attachment-icons-list .attachment-icon:hover { transform: translateY(-4px) scale(1.1); z-index: 2; } .attachment-icons-list .attachment-icon img { width: 28px; height: 28px; object-fit: contain; z-index: 1; } /* --- Global Tooltip --- */ .global-tooltip { position: fixed; padding: 10px 16px; background: rgba(20, 20, 35, 0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; color: white; font-size: 12px; font-weight: 500; z-index: 10005; /* Higher than other elements */ pointer-events: none; white-space: normal; /* Allow text wrapping */ word-wrap: break-word; /* Break long words if needed */ max-width: 280px; /* Larger width for better readability */ line-height: 1.4; /* Better line spacing for multi-line text */ text-align: center; /* Center the text inside the tooltip */ opacity: 0; transform: translateY(5px); transition: opacity 0.2s ease, transform 0.2s ease; /* Remove default shimmer animation */ } .global-tooltip.visible { opacity: 1 !important; transform: translateY(0) !important; } /* Shimmer animation for specific tooltips */ .global-tooltip.shimmer { background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.95) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: shimmer 2s infinite linear; } /* --- Uploading State Styles --- */ .ai-message.user.uploading .files-button { opacity: 0.6; pointer-events: none; } .ai-message.user.uploading .attachment-icons-list { opacity: 0.6; } .attachment-spinner { position: absolute; top: 50%; left: calc(50% + 12px); /* Adjust to be more centered on the button */ transform: translate(-50%, -50%); width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; z-index: 10; } /* --- Upload Status Styles --- */ .file-preview-icon.uploading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: #fff; border-radius: 50%; animation: spin-and-center 0.8s linear infinite; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; } .file-preview-icon.uploading { position: relative; } .file-preview-icon.uploading img { opacity: 0.6; } .file-preview-icon.failed .file-preview-remove { background: #dc3545; /* Red for error */ } .file-preview-icon.failed::before { content: "!"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-weight: bold; font-size: 18px; z-index: 2; text-shadow: 0 0 4px black; } /* Global app notification container – fixed bottom center, used across the app */ #app-notification-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10000; pointer-events: none; } #app-notification-container > * { pointer-events: auto; } .app-notification { padding: 14px 20px; background: rgba(220, 53, 69, 0.25); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(220, 53, 69, 0.6); color: #fecaca; font-size: 14px; font-weight: 500; border-radius: 12px; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; opacity: 1; white-space: normal; max-width: 600px; line-height: 1.5; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(220, 53, 69, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .app-notification:hover { background: rgba(220, 53, 69, 0.35); border-color: rgba(220, 53, 69, 0.8); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(220, 53, 69, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .app-notification.hidden { opacity: 0; transform: translateY(10px); pointer-events: none; } .app-notification .notification-highlight, .app-notification .error-filename { font-weight: 700; text-shadow: 0 0 6px rgba(0, 0, 0, 0.45); padding: 0 2px; } .app-notification:not(.app-notification--success):not(.app-notification--info) .notification-highlight, .app-notification:not(.app-notification--success):not(.app-notification--info) .error-filename { color: #ffe4e6; } .app-notification__inner { display: flex; flex-direction: column; align-items: center; gap: 10px; } .app-notification__icon { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; display: block; pointer-events: none; } .app-notification__message { width: 100%; } /* Success variant */ .app-notification--success { background: rgba(34, 197, 94, 0.25); border-color: rgba(34, 197, 94, 0.6); color: #bbf7d0; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(34, 197, 94, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .app-notification--success .notification-highlight, .app-notification--success .error-filename { color: #ecfdf5; } .app-notification--success:hover { background: rgba(34, 197, 94, 0.35); border-color: rgba(34, 197, 94, 0.8); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(34, 197, 94, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); } /* Info variant */ .app-notification--info { background: rgba(59, 130, 246, 0.25); border-color: rgba(59, 130, 246, 0.6); color: #bfdbfe; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(59, 130, 246, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .app-notification--info .notification-highlight, .app-notification--info .error-filename { color: #eff6ff; } .app-notification--info:hover { background: rgba(59, 130, 246, 0.35); border-color: rgba(59, 130, 246, 0.8); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 6px 20px rgba(59, 130, 246, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15); } .app-notification--with-actions { cursor: default; } .app-notification--with-actions:hover { transform: none; } .app-notification__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; width: 100%; } .app-notification__action-btn { cursor: pointer; padding: 8px 18px; font-size: 13px; font-weight: 600; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); color: inherit; transition: background 0.15s ease, border-color 0.15s ease; } .app-notification__action-btn:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.55); } .app-notification--success .app-notification__action-btn { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.15); } .app-notification--success .app-notification__action-btn:hover { background: rgba(34, 197, 94, 0.25); border-color: rgba(34, 197, 94, 0.65); } .app-notification--info .app-notification__action-btn { border-color: rgba(59, 130, 246, 0.45); background: rgba(59, 130, 246, 0.15); } .app-notification--info .app-notification__action-btn:hover { background: rgba(59, 130, 246, 0.25); border-color: rgba(59, 130, 246, 0.65); } @keyframes spin-and-center { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } /* === Points badge anchored to Continue button === */ .lab-actions .lab-continue-wrap { position: relative; display: flex; align-items: center; gap: 16px; overflow: visible; } /* Replicates .points-button look/behavior exactly */ .lab-actions { display: flex; justify-content: space-between; align-items: center; padding: 8px 20px; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; position: relative; overflow: visible; gap: 0; } .lab-actions .lab-continue-wrap > .lab-points-button { position: absolute; top: -15px; right: -25px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 100px; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px); border: 2px solid rgba(255, 152, 0, 0.3); box-shadow: 0 0 5px rgba(255, 152, 0, 0.1); transition: all 0.3s ease; z-index: 1; font-size: 11px; font-weight: 500; opacity: 0.4; } .lab-actions .lab-continue-wrap:hover > .lab-points-button { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); border: 2px solid #ff9800; box-shadow: 0 0 10px rgba(255, 152, 0, 0.3); z-index: 10; opacity: 1; } .lab-points-text { color: #ffd700; font-family: var(--brand-header, sans-serif); font-weight: 600; font-size: 11px; } .lab-points-suffix { color: #ffd700; font-weight: 500; font-size: 9px; } /* Library Button Styles */ .lab-library-button { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.7); cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; order: -1; margin-right: auto; } .lab-library-button:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.9); transform: translateY(-1px); } .lab-library-button:active { transform: translateY(0); background: rgba(255, 255, 255, 0.15); } .lab-library-button svg { width: 18px; height: 18px; stroke-width: 2; } .lab-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: clamp(12px, 4vh, 32px); background: rgba(8, 12, 29, 0.38); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); z-index: 1000; opacity: 0; transition: opacity 0.15s ease-out; border: 0.5px solid rgb(63 81 157 / 68%); border-radius: 16px; } .lab-modal-backdrop.visible { opacity: 1; } /* Remove top and bottom padding at the mobile breakpoint */ @media (max-width: 600px) { .lab-modal-backdrop { padding-top: 0; padding-bottom: 0; } } .lab-modal { position: relative; max-width: 100%; max-height: 80vh; height: 75vh; width: min(720px, 100%); margin: 0px 10px; border-radius: 20px; display: flex; flex-direction: column; flex: 1 1 auto; } /* ========== Model Info Popup System ========== */ /* Container for model info popups */ .ai-model-info-popups-container { position: fixed; top: 0; left: 0; width: 0; height: 0; overflow: visible; pointer-events: none; z-index: 9999; } /* Hide original template in the DOM */ .ai-button-templates .ai-model-info-popups { display: none; } /* Show cloned popups in the container */ .ai-model-info-popups-container .ai-model-info-popups { display: block; } /* Popup styling with improved glow effect */ .ai-model-info-popups .ai-model-info-popup { position: absolute !important; opacity: 0 !important; visibility: hidden !important; transition: all 0.15s ease !important; z-index: 10000 !important; pointer-events: none !important; filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.5)) !important; width: 220px !important; margin-bottom: 5px !important; transform: translate(-50%, -100%) scale(0.95) !important; } /* Active popup state with subtle scale animation */ .ai-model-info-popups .ai-model-info-popup.active { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translate(-50%, -100%) scale(1) !important; filter: drop-shadow(0 8px 25px rgba(0, 0, 0, 0.6)) !important; } /* Info button styling */ .ai-model-dropdown .ai-model-info-button { position: absolute !important; top: 50% !important; right: 10px !important; transform: translateY(-50%) !important; width: 22px !important; height: 22px !important; border-radius: 50% !important; background-color: rgba(114, 137, 218, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.7) !important; color: rgba(255, 255, 255, 1) !important; font-size: 12px !important; font-weight: bold !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.2s ease !important; z-index: 9999 !important; padding: 0 !important; margin: 0 !important; box-shadow: 0 0 8px rgba(114, 137, 218, 0.7) !important; text-align: center !important; line-height: 1 !important; pointer-events: auto !important; } /* Hover effect for info button */ .ai-model-dropdown .ai-model-info-button:hover { background-color: rgba(114, 137, 218, 0.9) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 0 12px rgba(114, 137, 218, 1) !important; transform: translateY(-50%) scale(1.15) !important; } /* Enhanced popup content styling with relative positioning for absolute children */ .ai-model-info-content { background: rgba(30, 32, 44, 0.95) !important; backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important; border-radius: 10px !important; padding: 10px 12px !important; color: rgba(255, 255, 255, 0.95) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(114, 137, 218, 0.2) !important; border: 1px solid rgba(114, 137, 218, 0.5) !important; font-size: 13px !important; line-height: 1.4 !important; position: relative !important; /* Enable absolute positioning of children */ } /* Text content with right padding to make room for cost indicator */ .ai-model-info-content p { margin: 0 !important; font-weight: 400 !important; font-size: 13px !important; line-height: 1.4 !important; color: rgba(255, 255, 255, 0.95) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important; padding-right: 45px !important; /* Make room for the cost indicator */ } /* Position cost indicator in the top right */ .ai-model-cost { position: absolute !important; top: 10px !important; right: 12px !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 2px !important; } /* Cost label styling - smaller and right-aligned */ .cost-label { font-size: 10px !important; color: rgba(255, 255, 255, 0.6) !important; font-weight: 500 !important; display: none !important; /* Hide the label for cleaner look */ } /* Container for dollar signs - compact display */ .cost-indicator { display: flex !important; gap: 2px !important; /* Tighter spacing */ } /* Inactive dollar signs - smaller */ .dollar { color: rgba(255, 255, 255, 0.25); font-weight: 600; text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); font-size: 13px; } /* Active dollar signs - brighter with glow */ .dollar.active { color: rgba(255, 255, 255, 1); text-shadow: 0 0 8px rgba(114, 137, 218, 1); } /* Improved mobile responsiveness */ @media screen and (max-width: 768px) { .ai-model-info-popup { width: 200px !important; margin-bottom: 8px !important; } .ai-model-info-content { padding: 8px 10px !important; font-size: 12px !important; } .dollar { font-size: 12px; } .cost-indicator { gap: 3px !important; } } /* Hide info button in selected model button */ .ai-model-button .ai-model-info-button { display: none !important; } /* Popup arrow positioned at the bottom center pointing to the dropdown */ .ai-model-info-arrow { position: absolute !important; bottom: -8px !important; left: 50% !important; transform: translateX(-50%) rotate(45deg) !important; width: 16px !important; height: 16px !important; background: rgba(30, 32, 44, 0.95) !important; border-right: 1px solid rgba(114, 137, 218, 0.5) !important; border-bottom: 1px solid rgba(114, 137, 218, 0.5) !important; z-index: -1 !important; } .ai-reasoning { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .ai-reasoning .hero-badge-2 { margin-top: 4px; } .coming-soon-pill.blue { background-color: rgba(65, 105, 225, 0.2) !important; color: rgba(114, 137, 218, 1) !important; border: 1px solid rgba(114, 137, 218, 0.3) !important; box-shadow: 0 0 8px rgba(114, 137, 218, 0.15) !important; } @keyframes fadeOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(10px) scale(0.95); } } /* Points Deduction Bubble */ .points-deduction-bubble { position: fixed; top: 100px; right: 10%; display: flex; align-items: center; justify-content: center; padding: 6px 12px; border-radius: 12px; background: rgba(20, 20, 30, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 215, 0, 0.3); opacity: 0; transform: scale(0); z-index: 10001; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .points-deduction-bubble::before { content: none; } .deduction-amount { color: #ffd700; font-weight: 600; font-size: 13px; white-space: nowrap; text-shadow: 0 0 8px rgba(255, 215, 0, 0.4); } /* Animation keyframes updates */ @keyframes fadeInBubble { 0% { opacity: 0; transform: translateY(-5px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes fadeOutBubble { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-5px) scale(0.9); } } /* Pulse animation for the border */ @keyframes pulseBorder { 0% { border-color: rgba(255, 215, 0, 0.3); } 50% { border-color: rgba(255, 215, 0, 0.7); } 100% { border-color: rgba(255, 215, 0, 0.3); } } .points-deduction-bubble.active { opacity: 1; transform: scale(1); animation: fadeInBubble 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, pulseBorder 1.5s ease-in-out infinite; } /* New processing state for send button */ .ai-send-button.processing .ai-send-icon { animation: spin 1s infinite linear; } .ai-send-button.processing .ai-send-icon path { d: path( "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z M12 6v1 M12 17v1 M7.05 7.05l.707.707 M16.243 16.243l.707.707 M6 12h1 M17 12h1 M7.05 16.95l.707-.707 M16.243 7.757l.707-.707" ); stroke-dasharray: 80; stroke-dashoffset: 60; animation: dash 1.5s ease-in-out infinite alternate; } /* Uploading state for send button (file uploads) */ .ai-send-button.uploading { display: flex !important; /* Force button to stay visible */ visibility: visible !important; opacity: 1 !important; } .ai-send-button.uploading .ai-send-icon { animation: uploadPulse 1.5s ease-in-out infinite; } @keyframes uploadPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.95); } } @keyframes dash { from { stroke-dashoffset: 80; } to { stroke-dashoffset: 0; } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Animation for points text highlight */ @keyframes highlightPoints { 0% { color: #ffd700; transform: scale(1); } 50% { color: #ffc837; transform: scale(1.05); } 100% { color: #ffd700; transform: scale(1); } } .points-text.highlight { animation: highlightPoints 0.5s ease; } /* === migrated: chatBoxStyle9.css === */ /* Modal wrapper for animations - moved to outer wrapper to prevent stacking context isolation */ .lab-modal-animation-wrapper { transform: scale(1); opacity: 1; transition: transform 0.18s ease-out, opacity 0.18s ease-out; width: 100%; max-width: 100%; display: flex; margin: auto; align-items: center; justify-content: center; min-height: 100%; padding-inline: clamp(12px, 3vw, 32px); box-sizing: border-box; } .lab-modal-backdrop.visible { opacity: 1; } .lab-modal-animation-wrapper.entering { transform: scale(0.98); opacity: 0; } .lab-modal-animation-wrapper.visible { transform: scale(1); opacity: 1; } .lab-border-glow { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 20px; pointer-events: none; --animation: gradient-angle linear infinite; --duration: 8s; --shadow-size: 4px; isolation: isolate; overflow: hidden; border: 3px solid transparent; background: conic-gradient( from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent, var(--shiny-cta-highlight) var(--gradient-percent), var(--gradient-shine) calc(var(--gradient-percent) * 2), var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3), transparent calc(var(--gradient-percent) * 4) ) border-box; } .lab-border-glow::before, .lab-border-glow::after { content: ""; pointer-events: none; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; z-index: -1; } .lab-border-glow::before { --size: calc(100% - var(--shadow-size) * 3); --position: 2px; --space: calc(var(--position) * 2); width: var(--size); height: var(--size); background: radial-gradient( circle at var(--position) var(--position), #f0f8ff calc(var(--position) / 4), transparent 0 ) padding-box; background-size: var(--space) var(--space); background-repeat: space; mask-image: conic-gradient( from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black ); border-radius: inherit; opacity: 0.4; z-index: -1; } .lab-border-glow::after { --animation: shimmerSpin linear infinite; width: 100%; aspect-ratio: 1; background: linear-gradient(-50deg, transparent, #b3d9ff, transparent); mask-image: radial-gradient(circle at bottom, transparent 40%, black); opacity: 0.6; } .lab-border-glow, .lab-border-glow::before, .lab-border-glow::after { animation: var(--animation) var(--duration), var(--animation) calc(var(--duration) / 0.4) reverse paused; animation-composition: add; } .lab-border-glow { --gradient-angle: 0deg; --gradient-angle-offset: 0deg; --gradient-percent: 15%; --gradient-shine: #f0f8ff; --shiny-cta-highlight: #b3d9ff; --shiny-cta-highlight-subtle: #cce7ff; --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1); transition: var(--transition); transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine; } .lab-border-glow:hover { --gradient-percent: 30%; --gradient-angle-offset: 95deg; --gradient-shine: #ffffff; } .lab-border-glow:hover, .lab-border-glow:hover::before, .lab-border-glow:hover::after { animation-play-state: running; } .lab-inner { background: linear-gradient( 145deg, rgb(2 4 11) 0%, rgb(49 44 72) 100% ) !important; box-shadow: 0 0 20px 20px rgb(152 202 255 / 11%); backdrop-filter: blur(20px) saturate(180%); border-radius: 14px; border: 1px solid rgb(152 202 255 / 67%); padding: 0; display: flex; flex-direction: column; gap: 0; height: 100%; min-height: 100%; max-height: 100%; overflow: hidden; background-clip: padding-box; position: relative; z-index: 1; isolation: isolate; } /* Remove border on mobile breakpoints */ @media (max-width: 768px) { .lab-inner { border: none; } } .lab-ascii-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; opacity: 0.45; pointer-events: none; } #lab-ascii-canvas-main { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /* Different opacity levels for different views - controlled by JavaScript */ .lab-ascii-bg.subtle { opacity: 0.1; /* Very subtle for upload/plan views */ } .lab-ascii-bg.visible { opacity: 0.45; /* More visible for loading/result views */ } .lab-view { flex: 1; display: flex; flex-direction: column; overflow: visible; padding: 16px 24px 16px; min-height: 0; max-height: 75vh; gap: 12px; position: relative; z-index: 1; } .lab-view[data-view="loading"] { justify-content: center; align-items: center; min-height: 100%; } .lab-view[data-view="loading"] .lab-loading { margin: auto 0; } .lab-view[data-view="plan"] { justify-content: flex-start; padding-top: 16px; } .lab-view[data-view="plan"] .lab-plan { display: flex; flex-direction: column; height: 100%; padding-bottom: 0; box-sizing: border-box; align-items: stretch; } .lab-view[data-view="plan"] .lab-header { width: 80%; align-self: center; } .lab-view[data-view="plan"] .lab-plan-accordion { flex-grow: 1; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; padding-bottom: 32px; padding-top: 32px; padding-right: 8px; position: relative; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 5%, black 92%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, black 5%, black 92%, transparent 100% ); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; backdrop-filter: blur(4px); } .lab-header { text-align: center; margin-top: 0; flex-shrink: 0; } .lab-content-wrapper { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; gap: 12px; overflow-y: auto; padding: 0px 10px; -webkit-mask-image: linear-gradient( to bottom, transparent 0%, black 2.5%, black 96%, transparent 100% ); mask-image: linear-gradient( to bottom, transparent 0%, black 2.5%, black 96%, transparent 100% ); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .lab-header h3 { font-size: 5.5rem; font-weight: 900; background: linear-gradient( to bottom, #ffffff 0%, #ffffff5c 30%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 0.9; letter-spacing: -0.03em; text-transform: uppercase; position: relative; top: 0; } .capabilities-carousel { width: calc(100% + 48px); position: relative; margin: 0 -24px; padding-top: 4px; max-width: none; -webkit-mask-image: linear-gradient( to right, transparent, black 8%, black 92%, transparent ); mask-image: linear-gradient( to right, transparent, black 8%, black 92%, transparent ); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .capabilities-carousel::-webkit-scrollbar { display: none; } @supports not ( (mask-image: linear-gradient(to right, transparent, black)) or (-webkit-mask-image: linear-gradient(to right, transparent, black)) ) { .capabilities-carousel::before, .capabilities-carousel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none; } .capabilities-carousel::before { left: 0; background: linear-gradient( to right, rgba(2, 4, 11, 1) 0%, rgba(2, 4, 11, 0.5) 30%, rgba(2, 4, 11, 0) 70% ); } .capabilities-carousel::after { right: 0; background: linear-gradient( to left, rgba(2, 4, 11, 1) 0%, rgba(2, 4, 11, 0.5) 30%, rgba(2, 4, 11, 0) 70% ); } } .carousel-track { display: flex; gap: 8px; padding: 8px 24px; width: fit-content; transform: translateX(0); will-change: transform; } .capability-pill { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; background: rgba(20, 20, 20, 1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: #ffffff; border-radius: 24px; padding: 8px 16px; font-size: 14px; font-weight: 500; box-shadow: inset 0 -4px 12px #ffffff80; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; white-space: nowrap; border: 1px solid rgba(255, 255, 255, 0.2); margin-right: 0; opacity: 1; } .capability-pill:hover { transform: translateY(-2px) scale(1.05); box-shadow: inset 0 -6px 18px #ffffffb3; background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); } .capability-pill svg { width: 18px; height: 18px; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); } .capability-pill .pill-text { font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); font-family: var(--montserrat-para); } .capabilities-carousel .global-tooltip { max-width: 200px; white-space: normal; text-align: center; line-height: 1.4; word-wrap: break-word; } .lab-upload { position: relative; border: 1px solid rgba(138, 180, 255, 0.15); border-radius: 16px; padding: 16px; text-align: center; background: linear-gradient( 270deg, rgb(81 106 150 / 50%) 0%, rgb(4 4 18) 35%, rgb(4 4 18) 65%, rgb(55 95 166 / 50%) 100% ); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 8px 32px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(138, 180, 255, 0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; overflow: visible; height: 140px; z-index: 1; } /* When thumbs are present: allow dropzone to grow so thumbs and hover scale aren't clipped */ .lab-upload:has(#lab-thumbs.has-stacked-cards) { height: auto; min-height: 180px; overflow: visible; } .lab-upload-shimmer-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; pointer-events: none; z-index: 0; } .lab-upload-shimmer-wrapper::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.1), transparent ); transition: left 0.5s ease; pointer-events: none; } .lab-upload:hover .lab-upload-shimmer-wrapper::before { left: 100%; } /* Updated hover/drag-over to keep the same background as default, but slightly brighter for effect */ .lab-upload:hover, .lab-upload.drag-over { border-color: rgba(138, 180, 255, 0.4); background: linear-gradient( 270deg, rgb(105 140 210 / 70%) 0%, rgb(8 16 36) 35%, rgb(8 16 36) 65%, rgb(90 130 210 / 60%) 100% ); box-shadow: inset 0 2px 4px rgba(138, 180, 255, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.17), 0 12px 40px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(138, 180, 255, 0.12); /* Removed transform to prevent stacking context */ } .lab-upload-icon { width: 56px; height: 56px; margin-bottom: 12px; position: relative; z-index: 1; } .lab-upload-main-text { font-size: 16px; font-weight: 500; color: #e0e0e0; margin: 0; position: relative; z-index: 1; } .lab-upload-hint { font-size: 12px; color: #8892a0; margin: 0; position: relative; z-index: 1; } .lab-divider { display: flex; align-items: center; gap: 16px; width: 100%; color: #4a5568; margin: 6px 0; flex-shrink: 0; } .lab-divider-line { flex-grow: 1; height: 1px; max-height: 1px; background: linear-gradient(to right, transparent, #4a5568, transparent); } .lab-divider-text { font-size: 12px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; } .lab-field { display: flex; flex-direction: column; gap: 8px; width: 100%; flex-shrink: 0; min-height: 60px; background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: 16px; position: relative; z-index: 1; } .lab-field span { font-size: 14px; font-weight: 500; color: #ffffff; } .lab-input-container { position: relative; width: 100%; flex: 1; display: flex; box-sizing: border-box; } #lab-prompt { min-height: 150px; } .lab-field textarea { width: 100%; box-sizing: border-box; min-height: 150px; max-height: 200px; padding: 8px 12px; background: rgb(0 0 0 / 30%); border: 1px solid rgba(138, 180, 255, 0.25); border-radius: 12px; color: rgba(255, 255, 255, 0.95); font-size: 15px; line-height: 1.5; resize: none; overflow-y: auto; transition: height 0.2s ease, border-color 0.2s ease; height: auto; } .lab-field textarea:focus { outline: none !important; background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(138, 180, 255, 0.4) !important; box-shadow: 0 2px 12px rgba(99, 102, 241, 0.2) !important; } .lab-field textarea::placeholder { color: #8892a0; } .lab-actions { display: flex; justify-content: flex-end; gap: 24px; align-items: center; padding: 8px 30px 8px 20px; margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.1); flex-shrink: 0; } .lab-button-cancel { background: none; border: none; color: #b8c5d6; font-size: 14px; font-weight: 500; cursor: pointer; transition: color 0.2s ease; flex-shrink: 0; } .lab-button-cancel:hover { color: #ffffff; } .lab-button { padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.1s ease; border: 1px solid transparent; min-width: 80px; position: relative; } .lab-button:disabled { opacity: 0.5; cursor: not-allowed; } :root { --shiny-cta-bg: #000000; --shiny-cta-bg-subtle: #1a1818; --shiny-cta-fg: #ffffff; --shiny-cta-highlight: #136df4; --shiny-cta-highlight-subtle: #5cb3ff; --venture-selector-width: 30vw; } @property --gradient-angle { syntax: ""; initial-value: 0deg; inherits: false; } @property --gradient-angle-offset { syntax: ""; initial-value: 0deg; inherits: false; } @property --gradient-percent { syntax: ""; initial-value: 5%; inherits: false; } @property --gradient-shine { syntax: ""; initial-value: white; inherits: false; } .lab-button.primary { --animation: gradient-angle linear infinite; --duration: 3s; --shadow-size: 2px; isolation: isolate; position: relative; overflow: hidden; cursor: pointer; outline-offset: 4px; padding: 0.75rem 1.5rem; font-family: "Montserrat", sans-serif; font-size: 0.95rem; line-height: 1.2; border: 1px solid transparent; border-radius: 360px; color: var(--shiny-cta-fg); background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box, conic-gradient( from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent, var(--shiny-cta-highlight) var(--gradient-percent), var(--gradient-shine) calc(var(--gradient-percent) * 2), var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3), transparent calc(var(--gradient-percent) * 4) ) border-box; box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle); transition: var(--transition); transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine; } .lab-button.primary::before, .lab-button.primary::after, .lab-button.primary span::before { content: ""; pointer-events: none; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; z-index: -1; } .lab-button.primary::before { --size: calc(100% - var(--shadow-size) * 3); --position: 2px; --space: calc(var(--position) * 2); width: var(--size); height: var(--size); background: radial-gradient( circle at var(--position) var(--position), white calc(var(--position) / 4), transparent 0 ) padding-box; background-size: var(--space) var(--space); background-repeat: space; mask-image: conic-gradient( from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black ); border-radius: inherit; opacity: 0.4; z-index: -1; } .lab-button.primary::after { --animation: shimmerSpin linear infinite; width: 100%; aspect-ratio: 1; background: linear-gradient( -50deg, transparent, var(--shiny-cta-highlight), transparent ); mask-image: radial-gradient(circle at bottom, transparent 40%, black); opacity: 0.6; } .lab-button.primary span { z-index: 1; } .lab-button.primary span::before { --size: calc(100% + 1rem); width: var(--size); height: var(--size); box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight); opacity: 0; } .lab-button.primary:is(:hover, :focus-visible) { --gradient-percent: 20%; --gradient-angle-offset: 95deg; --gradient-shine: var(--shiny-cta-highlight-subtle); } .lab-button.primary:is(:hover, :focus-visible), .lab-button.primary:is(:hover, :focus-visible)::before, .lab-button.primary:is(:hover, :focus-visible)::after { animation-play-state: running; } .lab-button.primary:is(:hover, :focus-visible) span::before { opacity: 1; } .lab-button.primary:active { translate: 0 1px; } .lab-button.primary { --transition: 800ms cubic-bezier(0.25, 1, 0.5, 1); transition: var(--transition); transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine; } .lab-button.primary, .lab-button.primary::before, .lab-button.primary::after { animation: var(--animation) var(--duration), var(--animation) calc(var(--duration) / 0.4) reverse paused; animation-composition: add; } .lab-button.primary span::before { transition: opacity var(--transition); animation: calc(var(--duration) * 1.5) breathe linear infinite; } @keyframes gradient-angle { to { --gradient-angle: 360deg; } } @keyframes shimmerSpin { to { rotate: 360deg; } } @keyframes breathe { from, to { scale: 1; } 50% { scale: 1.2; } } .ml-toggle-header { position: relative; display: flex; gap: 0; justify-content: stretch; margin: 0 0 12px 0; width: 100%; max-width: 100%; padding: 0; background: rgba(0, 0, 0, 0.3); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3); backdrop-filter: blur(4px); } .lab-view[data-view="plan"] .ml-toggle-header, .lab-view[data-view="loading"] .ml-toggle-header, .lab-view[data-view="result"] .ml-toggle-header, .lab-view[data-view="points-insufficient"] .ml-toggle-header, .lab-view[data-view="login-required"] .ml-toggle-header { display: none; } .ml-tab-header { position: relative; display: flex; align-items: center; justify-content: center; flex: 1; padding: 16px 0; margin: 0; border: none; background: transparent; cursor: pointer; font-size: 2rem; font-weight: 900; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; z-index: 2; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); user-select: none; transform: scale(0.92); transform-origin: center; min-width: 0; box-sizing: border-box; } .ml-tab-header.is-active { transform: scale(1); } .ml-toggle-header:has(.ml-tab-header:hover) { background: rgba(255, 255, 255, 0.03); } .ml-tab-header::after { display: none; } .ml-tab-text { font-family: var(--brand-header); color: rgba(255, 255, 255, 0.4); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 2; font-size: 1em; } .ml-tab-header:not(.is-active):hover .ml-tab-text { color: rgba(255, 255, 255, 0.65); } .ml-tab-header.is-active .ml-tab-text { color: rgba(255, 255, 255, 1); text-shadow: 0 0 20px rgba(138, 180, 255, 0.4), 0 0 40px rgba(138, 180, 255, 0.2); } .ml-tab-slider { position: absolute; top: 0; left: 0; width: 50%; height: 100%; --gradient-angle: 135deg; background: linear-gradient( var(--gradient-angle), rgb(81 106 150) 0%, rgb(4 4 18) 35%, rgb(4 4 18) 65%, rgb(55 95 166) 100% ); border-radius: 11px; z-index: 1; pointer-events: none; box-shadow: 0 0 30px rgba(138, 180, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.2); border: none; transition: --gradient-angle 1s ease; } .ml-tab-slider[data-position="right"] { --gradient-angle: 225deg; } @keyframes sliderGlow { 0%, 100% { box-shadow: 0 0 30px rgba(138, 180, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.2); } 50% { box-shadow: 0 0 45px rgba(138, 180, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -1px 0 rgba(0, 0, 0, 0.2); } } .ml-tab-slider.animating { animation: sliderGlow 0.5s ease-in-out; } .lab-upload-section { display: flex; flex-direction: column; gap: 0; overflow: visible; } .lab-upload-section.video-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .lab-upload-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; padding: 0 4px; } .lab-upload-section.video-mode .lab-upload-header { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; text-align: center; background: linear-gradient( 135deg, rgb(196 125 57 / 56%) 0%, rgb(2 6 58 / 72%) 80% ); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; border-width: 1px 0 0 1px; border-style: solid; border-color: rgba(255, 165, 0, 0.15); /* Remove border on bottom and right */ box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 8px 32px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(255, 165, 0, 0.05); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative; overflow: visible; height: 140px; gap: 4px; margin-bottom: 0; } .lab-upload-section.video-mode .lab-upload-header .lab-upload-shimmer-wrapper::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.1), transparent ); transition: left 0.5s ease; pointer-events: none; } .lab-upload-section.video-mode .lab-upload-header:hover .lab-upload-shimmer-wrapper::before { left: 100%; } .lab-upload-section.video-mode .lab-upload-header:hover { border-color: rgba(255, 165, 0, 0.4); background: linear-gradient( 135deg, rgb(196 125 57 / 56%) 0%, rgb(2 6 58 / 92%) 80% ); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 12px 40px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(255, 165, 0, 0.15); transform: translateY(-1px); border-bottom: none; border-right: none; } .lab-upload-header span { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.8); } .lab-upload-section.video-mode .lab-upload-header #upload-header-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; z-index: 1; } .lab-upload-section.video-mode .lab-upload-header::after { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 18px; opacity: 0.6; pointer-events: none; } .lab-upload-header .upload-link { display: inline-block; background: linear-gradient( 135deg, rgba(138, 180, 255, 0.15) 0%, rgba(99, 102, 241, 0.2) 100% ); border: 1px solid rgba(138, 180, 255, 0.3); border-radius: 20px; padding: 6px 12px; color: rgba(138, 180, 255, 0.9); text-decoration: none; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 13px; font-weight: 500; margin-left: 4px; } .lab-upload-header .upload-link:hover { background: linear-gradient( 135deg, rgba(138, 180, 255, 0.25) 0%, rgba(99, 102, 241, 0.3) 100% ); border-color: rgba(138, 180, 255, 0.5); color: rgba(138, 180, 255, 1); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(138, 180, 255, 0.2); } .lab-upload-section.video-mode .lab-upload-header .upload-link { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: rgba(255, 255, 255, 0.9); font-size: 16px; font-weight: 600; text-decoration: none; margin: 0; padding: 16px 50px; text-align: center; border-radius: 16px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; } .lab-upload-section.video-mode .lab-upload-header .upload-link:hover { background: transparent; border: none; color: rgba(255, 255, 255, 1); box-shadow: none; transform: none; } .lab-upload-header .recommended-pill { display: inline-block; background: linear-gradient( 135deg, rgba(34, 197, 94, 0.15) 0%, rgba(16, 185, 129, 0.2) 100% ); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 16px; padding: 4px 8px; color: rgba(34, 197, 94, 0.9); font-size: 9px; font-weight: 600; margin-left: 6px; text-transform: uppercase; letter-spacing: 0.5px; position: relative; z-index: 1; } .lab-upload-section.video-mode .lab-upload-header .recommended-pill { position: absolute; top: 8px; right: 8px; margin: 0; font-size: 8px; padding: 3px 6px; z-index: 3; } /* Context "?" (orchestrator callout, Media Lab upload) — not the navbar tour control */ .wm-context-help-button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: 10px; padding: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: rgba(230, 238, 255, 0.88); font-size: 1rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .wm-context-help-button:hover { background: rgba(120, 170, 255, 0.12); border-color: rgba(130, 185, 255, 0.35); color: #fff; } .wm-context-help-button:focus-visible { outline: 2px solid rgba(140, 190, 255, 0.85); outline-offset: 2px; } .lab-upload-header .wm-context-help-button { flex: 0 0 auto; margin-left: 0; position: relative; z-index: 3; } .lab-upload-section.video-mode .lab-upload-header .wm-context-help-button { position: absolute; top: 8px; left: 8px; } @media (max-width: 768px) { .wm-context-help-button { width: 32px; height: 32px; margin-left: 6px; font-size: 0.9rem; } } .feature-line-divider { background-image: linear-gradient(90deg, #ffb347, #4a90e2); align-self: center; width: 80%; height: 2px; margin: 3px auto 0px auto; position: relative; inset: auto auto; box-shadow: 0 33px 80px #fce48f99, 0 16px 40px #bb8ffca3, 0 10px 24px #fce48f7a, 0 12px 24px #bb8ffc8f, 0 4.2px 10.5px #fce48f4d, 0 2.5px 6.25px #bb8ffc40, 0 1.5px 3.6px #fce48f33, 0 0.66px 1.6px #bb8ffc24; } #lab-thumbs { position: relative; display: flex; height: 100%; justify-content: center; align-items: center; width: 100%; box-sizing: border-box; gap: 12px; overflow: visible; z-index: 1; } #lab-thumbs.is-empty { display: none; } #lab-thumbs.has-stacked-cards { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; width: 100%; max-width: 100%; min-height: 156px; overflow-x: auto; overflow-y: visible; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 12px 0; /* Center first thumb when only one; scrollToCenterLastThumb centers last when multiple */ padding-left: calc(50% - 50px); padding-right: calc(50% - 50px); /* Fade to transparent on left and right (same as .lab-content-wrapper style) */ -webkit-mask-image: linear-gradient( to right, transparent 0%, black 8%, black 92%, transparent 100% ); mask-image: linear-gradient( to right, transparent 0%, black 8%, black 92%, transparent 100% ); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } #lab-thumbs.has-stacked-cards .ml-thumb { position: relative; flex-shrink: 0; width: 100px; height: 120px; } .ml-thumb { position: relative; flex-shrink: 0; width: auto; height: 100%; overflow: hidden; border-radius: 12px; backdrop-filter: saturate(140%) blur(10px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35); transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1; } .ml-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; /* Optimize rendering for smooth thumbnails */ image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: smooth; } .ml-thumb:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 20px 50px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(138, 180, 255, 0.3); } .ml-remove { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 999px; background: rgba(0, 0, 0, 0.7); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; border: none; transition: all 0.2s ease; opacity: 0; } .ml-thumb:hover .ml-remove { opacity: 1; } .ml-remove:hover { background: rgba(255, 107, 107, 0.9); transform: scale(1.15); } .ai-utility-button.media .media-icon { display: inline-flex; align-items: center; margin: 0 2px; } .ai-utility-button.media .media-icon img { width: 18px; height: 18px; } .lab-modal-backdrop:focus { outline: none; } .lab-field textarea:focus, .lab-button:focus { outline: 2px solid #4a90e2; outline-offset: 2px; } .lab-modal.entering { animation: modal-enter 0.18s ease-out; } .lab-modal.leaving { animation: modal-leave 0.15s ease-out; } @keyframes modal-enter { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } @keyframes modal-leave { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.98); } } .lab-inner .lab-plan { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; } .lab-inner .lab-plan-accordion { display: flex; flex-direction: column; gap: 10px; } .lab-inner .lab-plan-panel { position: relative; overflow: hidden; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 8px 4px rgba(0, 0, 0, 0.25); cursor: pointer; display: flex; flex-direction: column; transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out; flex-shrink: 0; width: 100%; } @supports not ( (mask-image: linear-gradient(to bottom, transparent, black)) or (-webkit-mask-image: linear-gradient(to bottom, transparent, black)) ) { .lab-view[data-view="plan"] .lab-plan-accordion::before, .lab-view[data-view="plan"] .lab-plan-accordion::after { content: ""; position: sticky; left: 0; right: 0; height: 20px; pointer-events: none; z-index: 1; display: block; } .lab-view[data-view="plan"] .lab-plan-accordion::before { top: 0; background: linear-gradient( to bottom, rgba(2, 4, 11, 1), rgba(2, 4, 11, 0) ); } .lab-view[data-view="plan"] .lab-plan-accordion::after { bottom: 0; background: linear-gradient(to top, rgba(2, 4, 11, 1), rgba(2, 4, 11, 0)); } .lab-content-wrapper::before, .lab-content-wrapper::after { content: ""; position: sticky; left: 0; right: 0; height: 10px; pointer-events: none; z-index: 1; display: block; } .lab-content-wrapper::before { top: 0; background: linear-gradient( to bottom, rgba(2, 4, 11, 1), rgba(2, 4, 11, 0) ); } .lab-content-wrapper::after { bottom: 0; background: linear-gradient(to top, rgba(2, 4, 11, 1), rgba(2, 4, 11, 0)); } } .lab-inner .lab-plan-panel:hover { border-color: rgba(138, 180, 255, 0.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 8px 24px rgba(0, 0, 0, 0.25), 0 0 15px rgba(138, 180, 255, 0.2); } .lab-inner .lab-plan-header { display: flex; align-items: center; padding: 14px 16px; position: relative; z-index: 2; flex-shrink: 0; transition: align-items 0.3s ease-out; height: 64px; -webkit-mask-image: linear-gradient( to right, black 0%, black 85%, transparent 100% ); mask-image: linear-gradient(to right, black 0%, black 85%, transparent 100%); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .lab-plan-panel.is-expanded .lab-plan-header { align-items: flex-start; } .lab-inner .lab-plan-title { display: none; } .lab-inner .lab-plan-title-bg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 48px; font-weight: 800; line-height: 1; background: linear-gradient( 45deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.03) ); -webkit-background-clip: text; background-clip: text; color: transparent; pointer-events: none; text-transform: uppercase; z-index: 1; transition: opacity 0.3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 32px); } .lab-inner .lab-plan-summary { display: none; } .lab-inner .lab-plan-body { padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; height: 100%; } .lab-inner .lab-plan-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .lab-inner .lab-plan-field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; } .lab-inner .lab-plan-input, .lab-inner .lab-plan-textarea, .lab-inner .lab-plan-select { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; padding: 10px 12px; color: #fff; width: 100%; box-sizing: border-box; } .lab-inner .lab-plan-textarea { min-height: 88px; resize: none; } .lab-inner .lab-plan-select { appearance: none; -webkit-appearance: none; background-image: url('data:image/svg+xml;charset=UTF-8,'); background-repeat: no-repeat; background-position: right 16px center; background-size: 16px; padding-right: 40px; } .lab-inner .lab-plan-select:focus { border-color: rgba(138, 180, 255, 0.4); box-shadow: 0 0 8px rgba(138, 180, 255, 0.1); } .lab-inner .lab-plan-select option { background-color: #2c2c44; color: #e0e0e0; } .lab-inner .lab-plan-warning { font-size: 0.8rem; color: #ffb86b; margin-top: 6px; } .lab-plan-field-card { background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; cursor: pointer; overflow: hidden; will-change: height; transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out; flex-shrink: 0; } .lab-plan-field-card:hover { border-color: rgba(138, 180, 255, 0.2); box-shadow: 0 0 8px rgba(138, 180, 255, 0.1); } .lab-plan-field-card.is-editing { border-color: rgba(138, 180, 255, 0.3); box-shadow: 0 0 10px rgba(138, 180, 255, 0.15); } .field-card-header { padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; position: relative; transition: justify-content 0.3s ease; } .lab-plan-field-card.is-editing .field-card-header { justify-content: center; padding: 12px 16px 4px 16px; } .field-card-label { font-weight: 700; color: #e0e0e0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 150px; flex-shrink: 0; -webkit-mask-image: linear-gradient( to right, black 0%, black 85%, transparent 100% ); mask-image: linear-gradient(to right, black 0%, black 85%, transparent 100%); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .lab-plan-field-card.is-editing .field-card-label { opacity: 0.7; width: auto; max-width: none; white-space: normal; overflow: visible; -webkit-mask-image: none; mask-image: none; } .field-card-value-preview { font-size: 0.9rem; color: #8892a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px; flex-shrink: 0; text-align: right; transition: opacity 0.2s ease, width 0.3s ease; } .lab-plan-field-card.is-editing .field-card-value-preview { opacity: 0; width: 0; } .lab-plan-field-card--description { padding: 12px 16px 18px; background: rgba(0, 0, 0, 0.25); border-radius: 16px; } .lab-plan-field-card--description .field-card-header { flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 8px 16px 0; } .lab-plan-field-card--description .field-card-label { width: auto; text-align: center; font-size: 1.05rem; letter-spacing: 0.01em; } .lab-plan-field-card--description .field-card-value-preview { width: 100%; text-align: center; font-size: 1rem; color: #e0e0e0; line-height: 1.5; white-space: normal; overflow: hidden; text-overflow: ellipsis; } .field-card-editor { padding: 2px 8px 8px; overflow: hidden; position: relative; height: auto; } .field-card-editor .lab-plan-textarea { min-height: 100px; max-height: 100px; height: 100px; white-space: pre-wrap; overflow-wrap: break-word; resize: none; } .field-card-editor.is-static { padding: 12px 0 0; overflow: visible; } .field-card-editor.is-static .lab-plan-textarea--description { min-height: 140px; max-height: none; height: auto; resize: none; } .lab-loading { text-align: center; padding: 40px 20px; color: #b8c5d6; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; gap: 24px; position: relative; z-index: 1; } .lab-loading-text { color: #ffffff; font-size: 16px; font-weight: 500; margin: 0; opacity: 1 !important; display: block; line-height: 1.4; } .lab-loading .global-tooltip { width: 280px; min-width: 280px; max-width: 280px; display: block !important; visibility: visible !important; opacity: 1 !important; padding: 12px 20px; background: rgba(0, 0, 0, 0.85); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; backdrop-filter: blur(10px); text-align: center; position: relative; transform: none !important; } /* Ensure shimmer effect works on loading tooltips */ .lab-loading .global-tooltip.shimmer .lab-loading-text { background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.95) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: shimmer 2s infinite linear; } .scene-card { background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; margin-bottom: 16px; overflow: hidden; transition: all 0.2s ease; } .scene-card:hover { border-color: rgba(138, 180, 255, 0.3); box-shadow: 0 4px 20px rgba(138, 180, 255, 0.1); } .scene-card-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: rgba(44, 51, 88, 0.4); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .scene-title { font-size: 1.1rem; font-weight: 600; color: #ffffff; margin: 0; } .scene-duration { background: rgba(138, 180, 255, 0.2); color: #8ab4ff; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 500; } .scene-card-content { padding: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .scene-field { display: flex; flex-direction: column; gap: 8px; } .scene-field label { font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); margin-bottom: 4px; } .scene-field .lab-plan-input, .scene-field .lab-plan-textarea { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; padding: 12px; color: #ffffff; font-size: 0.9rem; transition: all 0.2s ease; } .scene-field .lab-plan-input:focus, .scene-field .lab-plan-textarea:focus { border-color: rgba(138, 180, 255, 0.5); box-shadow: 0 0 8px rgba(138, 180, 255, 0.2); outline: none; } .scene-field .lab-plan-textarea { min-height: 80px; resize: vertical; } .scenes-empty { text-align: center; padding: 40px 20px; color: rgba(255, 255, 255, 0.6); font-style: italic; } .lab-view[data-view="result"] { justify-content: flex-start; align-items: center; padding: 20px 24px; min-height: 100%; height: 100%; overflow: hidden; position: relative; } .lab-view[data-view="result"] .lab-header { display: none; } .lab-result-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.2s ease; padding: 0; } .lab-start-fresh { position: absolute; top: 16px; left: 16px; width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.2s ease; padding: 0; } .lab-result-close:hover { background: rgba(0, 0, 0, 0.8); border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 1); transform: scale(1.1); } .lab-start-fresh:hover { background: rgba(0, 0, 0, 0.8); border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 1); transform: scale(1.1); } .lab-result-close svg { width: 18px; height: 18px; } .lab-start-fresh svg { width: 18px; height: 18px; } .lab-result { display: flex; flex-direction: column; height: 100%; width: 100%; gap: 16px; align-items: center; justify-content: space-between; min-height: 0; overflow: hidden; position: relative; z-index: 1; } .lab-image-container { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; justify-content: center; width: 100%; max-width: 100%; min-height: 0; overflow: hidden; } .lab-image-wrapper { position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 20px; overflow: hidden; background: rgba(255, 255, 255, 0.02); border: 2px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2); transition: border-color 0.2s ease; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 1; } .lab-image-wrapper:hover { border-color: rgba(138, 180, 255, 0.6); } .lab-generated-image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; border-radius: 18px; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: brightness(1.05) contrast(1.02) saturate(1.1); } .lab-generated-image.loaded { animation: imageFadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } @keyframes imageFadeIn { from { opacity: 0; transform: scale(0.9) rotateX(5deg); filter: brightness(0.8) blur(2px); } 50% { opacity: 0.7; transform: scale(0.98) rotateX(2deg); filter: brightness(0.9) blur(1px); } to { opacity: 1; transform: scale(1) rotateX(0deg); filter: brightness(1.05) contrast(1.02) saturate(1.1) blur(0px); } } .lab-image-placeholder { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(15px) saturate(1.2); border-radius: 22px; transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); z-index: 2; } .lab-image-placeholder.hidden { opacity: 0; pointer-events: none; } .lab-image-loading { text-align: center; color: #b8c5d6; } .lab-image-loading .spinner { margin-bottom: 16px; } .lab-image-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; padding: 0; flex-shrink: 0; width: 100%; padding-bottom: 6px; } /* Desktop: wrapper is layout-only so visual order is edit | Generate Video | download */ .lab-image-actions-row { display: contents; } #lab-edit-image, #lab-expanded-edit-image { order: 1; display: inline-flex; align-items: center; justify-content: center; } #lab-edit-image svg, #lab-expanded-edit-image svg { display: block; flex-shrink: 0; margin: auto; } #lab-regenerate, #lab-expanded-regenerate { order: 2; } #lab-download, #lab-expanded-download { order: 3; display: inline-flex; align-items: center; justify-content: center; } #lab-download svg, #lab-expanded-download svg { display: block; flex-shrink: 0; } .lab-button.secondary { background: rgba(255, 255, 255, 0.05); color: #e0e0e0; transition: all 0.2s ease; backdrop-filter: blur(4px); } .lab-button.secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); transform: translateY(-1px); } .lab-button.secondary:active { transform: translateY(0); } /* SVG Icon Animations */ #lab-edit-image:hover .pencil-icon, #lab-expanded-edit-image:hover .pencil-icon { animation: pencilMove 0.6s ease-in-out infinite; transform-origin: center; } #lab-download:hover .download-arrow, #lab-expanded-download:hover .download-arrow { animation: downloadBounce 0.8s ease-in-out infinite; } @keyframes pencilMove { 0%, 100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(2px) rotate(-5deg); } 50% { transform: translateX(-2px) rotate(5deg); } 75% { transform: translateX(1px) rotate(-3deg); } } @keyframes downloadBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .lab-view[data-view="points-insufficient"], .lab-view[data-view="login-required"] { justify-content: center; align-items: center; padding: 20px 24px; min-height: 0; overflow: hidden; } .lab-points-insufficient, .lab-login-required { display: flex; flex-direction: column; height: 100%; width: 100%; gap: 0; align-items: center; justify-content: center; min-height: 0; overflow: hidden; } .lab-points-content { display: flex; flex-direction: column; align-items: center; gap: 24px; flex: 1; justify-content: center; width: 100%; text-align: center; } .lab-points-content--hero { gap: 16px; } .lab-points-hero-graphic { width: 270px; height: 270px; max-width: 100%; object-fit: contain; flex-shrink: 0; display: block; } .lab-points-icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: linear-gradient( 135deg, rgba(19, 109, 244, 0.11) 0%, rgba(0, 245, 255, 0.09) 100% ); border: 2px solid rgba(19, 109, 244, 0.35); color: rgba(255, 255, 255, 0.8); margin-bottom: 8px; backdrop-filter: blur(4px); } .lab-points-icon svg, .lab-points-icon img { width: 40px; height: 40px; object-fit: contain; } .lab-points-message h4 { font-size: 24px; font-weight: 700; color: #ffffff; margin: 0 0 12px 0; line-height: 1.2; } .lab-points-message p { font-size: 16px; color: #b8c5d6; margin: 0; line-height: 1.5; max-width: 400px; } .lab-points-actions { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 8px; flex-shrink: 0; width: 100%; } .lab-button.primary#lab-buy-points { background: linear-gradient( 135deg, rgba(19, 109, 244, 0.11) 0%, rgba(0, 245, 255, 0.09) 100% ) !important; border: 1px solid rgba(19, 109, 244, 0.35) !important; color: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(8px) !important; box-shadow: 0 2px 10px rgba(19, 109, 244, 0.12) !important; transition: all 0.2s ease !important; } .lab-button.primary#lab-buy-points:hover { background: linear-gradient( 135deg, rgba(19, 109, 244, 0.18) 0%, rgba(0, 245, 255, 0.12) 100% ) !important; border-color: rgba(19, 109, 244, 0.55) !important; transform: translateY(-1px) !important; box-shadow: 0 4px 15px rgba(19, 109, 244, 0.25) !important; color: rgba(255, 255, 255, 1) !important; animation: buttonGlow 2s infinite !important; } @keyframes buttonGlow { 0% { box-shadow: 0 2px 10px rgba(19, 109, 244, 0.12); } 50% { box-shadow: 0 4px 20px rgba(19, 109, 244, 0.28); } 100% { box-shadow: 0 2px 10px rgba(19, 109, 244, 0.12); } } .lab-expanded-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.9); z-index: 999999; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.2s ease; } .lab-expanded-overlay.visible { opacity: 1; } .expanded-image { max-width: 95vw; max-height: 95vh; object-fit: contain; } /* Expanded image overlay: same actions as result view; docked bottom-center */ .lab-expanded-image-actions-dock { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 1000000; width: min(92vw, 520px); display: flex; justify-content: center; padding-inline: 12px; box-sizing: border-box; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; cursor: default; } .lab-expanded-overlay:hover .lab-expanded-image-actions-dock { opacity: 1; pointer-events: auto; } /* Touch / narrow viewports: always show action dock */ @media (hover: none), (max-width: 768px) { .lab-expanded-image-actions-dock { opacity: 1; pointer-events: auto; } } .lab-expanded-image-actions { pointer-events: auto; } .lab-view[data-view="loading"] { position: relative; overflow: hidden; } .lab-view[data-view="loading"] .lab-loading { position: relative; z-index: 1; } /* === migrated: chatBoxStyle10.css === */ #chat-container { container-type: inline-size; container-name: chat-shell; /* Slightly narrower venture pill (overrides chatBoxStyle9 when loaded later) */ --venture-selector-width: clamp(156px, 21vw, 232px); } @container chat-shell (max-width: 900px) { .lab-modal-animation-wrapper { padding-inline: clamp(12px, 4cqw, 32px); } } @supports (width: 1cqw) { .lab-modal-animation-wrapper, .lab-modal { width: min(720px, 100cqw); max-width: 100cqw; } } @media (max-width: 768px) { .lab-modal-animation-wrapper { padding-inline: 0; } .lab-modal { width: 100vw; width: min(100vw, 100cqw); height: 100vh; max-height: 100vh; min-height: 100vh; max-width: 100vw; max-width: 100cqw; /* Dynamic viewport: avoids iOS Safari UI (tab bar) clipping bottom content */ height: 100dvh; max-height: 100dvh; min-height: 100dvh; overflow: hidden; margin: 0px; border-radius: 0px; } .lab-border-glow { display: none; } .lab-view { gap: 8px; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); padding-top: 50px; } .lab-inner { margin: 0px; border-radius: 0px; padding: 36px 0 0 0; border: 0; } #artifacts-inner.lab-inner { padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)); } .lab-content-wrapper { gap: 8px; justify-content: flex-start; padding-top: 16px; padding-bottom: 16px; } .lab-view[data-view="upload"] { gap: 10px; } .lab-header h3 { font-size: 3.2rem; } .ml-toggle-header { margin: 0px 0 12px 0; max-width: 100%; } .ml-tab-header { font-size: 1.5rem; padding: 12px 0; transform: scale(0.92); } .ml-tab-header.is-active { transform: scale(1); } .ml-tab-header:not(.is-active):hover { transform: scale(0.95); } .lab-field textarea { min-height: 50px; max-height: 80px; font-size: 14px; } .capabilities-carousel { width: calc(100% + 32px); margin: 0 -16px; } .lab-upload-section.video-mode { grid-template-columns: 1fr; gap: 16px; } .lab-upload-section.video-mode .lab-upload-header { height: 100px; padding: 12px; } .lab-upload { padding: 12px; height: 120px; } .lab-upload-icon { width: 44px; height: 44px; } .lab-field textarea { min-height: 70px; padding: 12px 16px; } .lab-actions { flex-direction: row; justify-content: space-between; align-items: center; padding: 8px 30px 16px 16px; gap: 12px; margin-top: 4px; } .lab-actions .lab-continue-wrap { gap: 12px; /* Smaller gap on mobile */ } .lab-library-button { width: 36px; height: 36px; order: -1; margin-right: auto; } .lab-library-button svg { width: 16px; height: 16px; } .lab-button { flex: 1; min-width: 0; } #lab-thumbs.has-stacked-cards .ml-thumb { position: relative; flex-shrink: 0; width: 100px; height: 100px; } .lab-view[data-view="result"] { padding: 16px 20px; } .lab-result-close { top: 12px; right: 12px; width: 40px; height: 40px; } .lab-result-close svg { width: 20px; height: 20px; } .lab-start-fresh { top: 12px; left: auto; /* Override desktop left: 16px */ right: 60px; /* Position to the left of lab-result-close (which is at right: 12px, width: 40px) */ width: 40px; height: 40px; } .lab-start-fresh svg { width: 20px; height: 20px; } .lab-result { gap: 12px; } .lab-image-container { gap: 12px; } .lab-image-actions { flex-direction: column; width: 100%; gap: 12px; align-items: center; padding-bottom: unset; } /* Mobile: icon buttons in a row above Generate Video */ .lab-image-actions-row { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 12px; } .lab-button.secondary, .lab-button.primary { width: 100%; max-width: 60vw; } /* Square icon buttons: edit and download side-by-side above Generate Video on mobile */ #lab-edit-image, #lab-download, #lab-expanded-edit-image, #lab-expanded-download { width: 44px; height: 44px; min-width: 44px; min-height: 44px; max-width: none; padding: 0; display: flex; align-items: center; justify-content: center; } .lab-view[data-view="points-insufficient"], .lab-view[data-view="login-required"] { padding: 16px 20px; } .lab-points-content { gap: 20px; } .lab-points-content--hero { gap: 12px; } .lab-points-icon { width: 64px; height: 64px; } .lab-points-icon svg, .lab-points-icon img { width: 32px; height: 32px; } .lab-points-hero-graphic { width: 220px; height: 220px; } .lab-points-message h4 { font-size: 20px; } .lab-points-message p { font-size: 14px; } .lab-points-actions { flex-direction: column; width: 100%; gap: 12px; align-items: center; } .scene-card-content { grid-template-columns: 1fr; gap: 12px; } .scene-card-header { padding: 12px 16px; } .scene-card-content { padding: 16px; } } @media (max-width: 640px) { .lab-inner .lab-plan-row { grid-template-columns: 1fr; } } @media (max-width: 480px) { .lab-view[data-view="result"] { padding: 12px 16px; } .lab-result-close { top: 8px; right: 8px; width: 36px; height: 36px; } .lab-start-fresh { top: 8px; left: auto; /* Override desktop left: 16px */ right: 52px; /* Position to the left of lab-result-close (which is at right: 8px, width: 36px) */ width: 36px; height: 36px; } .lab-library-button { width: 32px; height: 32px; order: -1; margin-right: auto; } .lab-library-button svg { width: 14px; height: 14px; } .lab-result-close svg { width: 18px; height: 18px; } .lab-start-fresh svg { width: 18px; height: 18px; } .lab-result { gap: 10px; } .lab-image-container { gap: 10px; } .lab-image-actions { gap: 10px; align-items: center; } .lab-view[data-view="points-insufficient"], .lab-view[data-view="login-required"] { padding: 12px 16px; } .lab-points-content { gap: 16px; } .lab-points-content--hero { gap: 10px; } .lab-points-icon { width: 56px; height: 56px; } .lab-points-icon svg, .lab-points-icon img { width: 28px; height: 28px; } .lab-points-hero-graphic { width: 180px; height: 180px; } .lab-points-message h4 { font-size: 18px; } .lab-points-message p { font-size: 13px; } .lab-points-actions { flex-direction: column; width: 100%; gap: 10px; align-items: center; } /* Venture Selector - Mobile adjustments */ .venture-selector-stack { position: absolute !important; bottom: 100%; right: 0; left: auto; top: auto; transform: none; min-width: min(72vw, 260px); max-width: min(92vw, 300px); z-index: 1000 !important; } .venture-selector-pill { position: relative !important; bottom: auto; right: auto; padding: 7px 16px 10px; cursor: pointer !important; touch-action: manipulation !important; z-index: 1 !important; } .venture-selector-pill::before, .venture-selector-pill::after { width: 32px; height: 32px; top: -16px; } .venture-selector-dropdown { font-size: 12px; } .venture-selector-pill .venture-dropdown-arrow { width: 13px; height: 13px; } /* Keep dock visually above venture selector on mobile */ .wmz-dock-outer, .wmz-dock-panel { z-index: 1205 !important; } /* Ensure content doesn't interfere with clicks */ .venture-selector-content { pointer-events: none !important; } } /* Room for composer + venture tab above messages */ .chatbox .ai-messages-container { padding-bottom: 132px !important; } /* Venture selector: stack = flex column so panel and trigger share one width (no 1px offset) */ .venture-selector-stack { position: absolute !important; bottom: 100%; left: auto; right: 20px; top: auto; transform: none; z-index: 1000 !important; display: flex; flex-direction: column; align-items: stretch; width: var(--venture-selector-width); min-width: 168px; max-width: 260px; overflow: visible; } .venture-selector-stack.hidden { display: none; } /* Closed: shell is invisible; only the pill draws the tab */ .venture-selector-stack:not(.open) { background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* Open: one shared background + border behind list + trigger (no seam) */ .venture-selector-stack.open { background: linear-gradient( 145deg, rgb(2 4 11 / 96%) 0%, rgb(22 27 43 / 92%) 52%, rgb(38 45 67 / 88%) 100% ); border: 1px solid rgba(138, 180, 255, 0.2); border-bottom: none; border-radius: 16px 16px 0 0; box-shadow: 0 16px 36px rgba(3, 12, 30, 0.42); backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%); } .venture-selector-stack.open .venture-dropdown-panel, .venture-selector-stack.open .venture-selector-pill { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .venture-selector-stack.open .venture-selector-pill:hover { box-shadow: none !important; } .venture-selector-stack.open .venture-dropdown-panel, .venture-selector-stack.open .venture-selector-pill { border-radius: 0; } /* Trigger row — closed: full “tab” chrome; open: transparent (stack paints) */ .venture-selector-pill { position: relative !important; bottom: auto; left: auto; right: auto; top: auto; transform: none; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 18px 11px; width: 100%; min-width: 0; flex: 0 0 auto; border-radius: 16px 16px 0 0; background: linear-gradient( 145deg, rgb(2 4 11 / 92%) 0%, rgb(38 45 67 / 83%) 100% ); border: 1px solid rgba(138, 180, 255, 0.22); border-bottom: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 30px rgba(3, 12, 30, 0.35); backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%); transition: background 0.3s ease, box-shadow 0.25s ease, border-top-left-radius 0.25s ease, border-top-right-radius 0.25s ease; overflow: visible; cursor: pointer; } .venture-selector-pill.open { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; } .venture-selector-stack.open .venture-selector-pill.open { border-top: none; } .venture-selector-pill.open::after { content: none; display: none; } .venture-selector-pill:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 22px 46px rgba(3, 12, 30, 0.55); } .venture-selector-content { display: flex; align-items: center; justify-content: center; gap: 8px; position: relative; z-index: 1; width: 100%; pointer-events: none; } .venture-selector-pill:focus-visible { outline: 2px solid rgba(138, 180, 255, 0.6); outline-offset: 4px; } .venture-selector-dropdown { display: none; } .venture-selector-label { flex: 1; text-align: center; color: rgba(255, 255, 255, 0.92); font-size: 13px; font-weight: 600; font-family: var(--montserrat-para, sans-serif); letter-spacing: 0.03em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .venture-selector-pill .venture-dropdown-arrow { width: 14px; height: 14px; color: rgba(255, 255, 255, 0.5); flex-shrink: 0; transition: all 0.3s ease; pointer-events: none; } .venture-selector-pill:hover .venture-dropdown-arrow, .venture-selector-content:focus-visible .venture-dropdown-arrow { color: rgba(255, 255, 255, 0.85); } .venture-selector-pill .venture-dropdown-arrow { transition: transform 0.2s ease, color 0.3s ease; } .venture-selector-pill.open .venture-dropdown-arrow { transform: rotate(180deg); } .venture-dropdown-panel { position: relative; flex: 0 0 auto; align-self: stretch; width: 100%; min-width: 0; transform: translateY(10px); z-index: 2; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s; max-height: 0; border-radius: 0; background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; box-shadow: none; } .venture-dropdown-panel.open { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; max-height: min(50vh, 380px); transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s; } .venture-dropdown-scroll { max-height: 320px; overflow-y: auto; padding: 12px 0; display: flex; flex-direction: column; } .venture-dropdown-scroll::-webkit-scrollbar { width: 6px; } .venture-dropdown-scroll::-webkit-scrollbar-track { background: transparent; } .venture-dropdown-scroll::-webkit-scrollbar-thumb { background: rgb(94 118 165 / 36%); border-radius: 4px; } .venture-dropdown-scroll .lab-divider-line { width: 70%; margin: 6px auto; display: block; } .venture-option { width: 100%; border: none; background: transparent; color: rgba(225, 232, 255, 0.92); font-size: 13px; font-weight: 600; font-family: var(--montserrat-para, sans-serif); letter-spacing: 0.04em; padding: 10px 16px; text-align: center; cursor: pointer; border-top: 1px solid transparent; border-bottom: 1px solid transparent; transition: background 0.22s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .venture-option:hover, .venture-option:focus-visible { color: #ffffff; transform: translateY(-1px); background: linear-gradient( 90deg, rgb(38 45 67 / 22%) 0%, rgb(94 118 165 / 24%) 50%, rgb(38 45 67 / 22%) 100% ); border-top-color: rgb(138 180 255 / 18%); border-bottom-color: rgb(138 180 255 / 18%); box-shadow: inset 0 0 0 1px rgb(138 180 255 / 10%), 0 8px 20px rgb(3 12 30 / 24%); } .venture-option.active { color: #8ab4ff; background: linear-gradient( 90deg, rgb(38 45 67 / 28%) 0%, rgb(94 118 165 / 32%) 50%, rgb(38 45 67 / 28%) 100% ); border-top-color: rgb(138 180 255 / 22%); border-bottom-color: rgb(138 180 255 / 22%); box-shadow: inset 0 0 0 1px rgb(138 180 255 / 16%); } /* === migrated: chatBoxStyle11.css === */ /* Venture Confirmation Container - styled like lab-button primary */ .venture-confirmation-container { --animation: gradient-angle linear infinite; --duration: 9s; --shadow-size: 2px; isolation: isolate; position: relative; overflow: hidden; width: 100%; max-width: 500px; margin: 16px auto; display: flex; align-items: center; justify-content: center; padding: 24px; border-radius: 20px; background: linear-gradient(#121733, var(--shiny-cta-bg, #000000)) padding-box, conic-gradient( from calc(var(--gradient-angle, 0deg) - var(--gradient-angle-offset, 0deg)), transparent, var(--shiny-cta-highlight, blue) var(--gradient-percent, 15%), var(--gradient-shine, #ffffff) calc(var(--gradient-percent, 15%) * 2), var(--shiny-cta-highlight, blue) calc(var(--gradient-percent, 15%) * 3), transparent calc(var(--gradient-percent, 15%) * 4) ) border-box; border: 3px solid transparent; box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle, #1a1818); transition: var(--transition, 800ms cubic-bezier(0.25, 1, 0.5, 1)); transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine; --gradient-angle: 0deg; --gradient-angle-offset: 0deg; --gradient-percent: 15%; --gradient-shine: #f0f8ff; --shiny-cta-highlight: #b3d9ff; --shiny-cta-highlight-subtle: #cce7ff; } .venture-confirmation-container::before, .venture-confirmation-container::after { content: ""; pointer-events: none; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; z-index: -1; } .venture-confirmation-container::before { --size: calc(100% - var(--shadow-size) * 3); --position: 2px; --space: calc(var(--position) * 2); width: var(--size); height: var(--size); background: radial-gradient( circle at var(--position) var(--position), white calc(var(--position) / 4), transparent 0 ) padding-box; background-size: var(--space) var(--space); background-repeat: space; mask-image: conic-gradient( from calc(var(--gradient-angle, 0deg) + 45deg), black, transparent 10% 90%, black ); border-radius: inherit; opacity: 0.4; z-index: -1; } .venture-confirmation-container::after { --animation: shimmerSpin linear infinite; width: 120%; aspect-ratio: 1; background: linear-gradient( -50deg, transparent, var(--shiny-cta-highlight, blue), transparent ); mask-image: radial-gradient(circle at bottom, transparent 40%, black); opacity: 0.6; } @media (max-width: 600px) { .venture-confirmation-container::after { width: 200%; } } .venture-confirmation-container, .venture-confirmation-container::before, .venture-confirmation-container::after { animation: var(--animation, gradient-angle linear infinite) var(--duration, 3s), var(--animation, gradient-angle linear infinite) calc(var(--duration, 3s) / 0.4) reverse paused; animation-composition: add; } .venture-confirmation-container:hover { --gradient-percent: 30%; --gradient-angle-offset: 95deg; --gradient-shine: #ffffff; } .venture-confirmation-container:hover, .venture-confirmation-container:hover::before, .venture-confirmation-container:hover::after { animation-play-state: running; } .venture-confirmation-wrapper { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; z-index: 1; } /* Center the pill in venture confirmation wrapper and smooth all transitions */ .venture-confirmation-wrapper .pill { align-self: center; margin-bottom: 4px; transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1); } .venture-confirmation-name { font-size: 2rem; font-weight: 900; background: linear-gradient( to bottom, #ffffffe8 0%, #ffffff99 30%, rgb(255 255 255 / 29%) 70%, rgba(255, 255, 255, 0) 100% ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2; letter-spacing: -0.02em; text-align: center; height: 2.88rem; /* Fixed height: 2rem font-size * 1.2 line-height * 1.2 (for ~2 lines) */ overflow-y: auto; overflow-x: hidden; } .venture-confirmation-summary { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.65); text-align: center; line-height: 1.5; max-width: 400px; height: 4.5rem; /* Fixed height: 0.9375rem font-size * 1.5 line-height * 3.2 (for ~3-4 lines) */ overflow-y: auto; overflow-x: hidden; } /* Editable name and summary fields */ .venture-confirmation-name[contenteditable="true"], .venture-confirmation-summary[contenteditable="true"] { cursor: text; outline: none; border-radius: 8px; padding: 4px 8px; margin: -4px -8px; transition: background-color 0.2s ease, box-shadow 0.2s ease; min-width: 100px; word-wrap: break-word; word-break: break-word; } /* Flash animation for character limit */ .venture-confirmation-name[contenteditable="true"].flash-limit { animation: flash-box-shadow 0.4s ease; } .venture-confirmation-name[contenteditable="true"]:focus.flash-limit { animation: flash-box-shadow-focused 0.4s ease; } .venture-confirmation-summary[contenteditable="true"].flash-limit { animation: flash-background 0.4s ease; } .venture-confirmation-summary[contenteditable="true"]:focus.flash-limit { animation: flash-background-focused 0.4s ease; } @keyframes flash-box-shadow { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.6); } } @keyframes flash-box-shadow-focused { 0%, 100% { box-shadow: 0 0 0 2px rgba(179, 217, 255, 0.3); } 50% { box-shadow: 0 0 0 2px rgba(255, 0, 0, 0.6); } } @keyframes flash-background { 0%, 100% { background-color: transparent; } 50% { background-color: rgba(255, 0, 0, 0.2); } } @keyframes flash-background-focused { 0%, 100% { background-color: rgba(255, 255, 255, 0.08); } 50% { background-color: rgba(255, 0, 0, 0.2); } } .venture-confirmation-name[contenteditable="true"]:hover, .venture-confirmation-summary[contenteditable="true"]:hover { background-color: rgba(255, 255, 255, 0.05); } .venture-confirmation-name[contenteditable="true"]:focus, .venture-confirmation-summary[contenteditable="true"]:focus { background-color: rgba(255, 255, 255, 0.08); box-shadow: 0 0 0 2px rgba(179, 217, 255, 0.3); } /* Placeholder for empty contenteditable */ .venture-confirmation-name[contenteditable="true"]:empty::before, .venture-confirmation-summary[contenteditable="true"]:empty::before { content: attr(data-placeholder); opacity: 0.4; pointer-events: none; } .venture-confirmation-actions { display: flex; gap: 16px; justify-content: center; align-items: center; width: 100%; margin-top: 8px; } /* Venture Confirmation Buttons - styled like ai-connect-button */ .venture-confirmation-button { position: relative; border: none; border-radius: 50px; padding: 0; width: 140px; height: 48px; cursor: pointer; background: transparent; overflow: visible; outline: none; z-index: 1; transition: transform 0.2s ease; } .venture-confirmation-button:hover { transform: scale(1.03); } .venture-confirmation-button:active { transform: scale(0.98); } .venture-confirmation-button .ai-button-gradient-border { position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; border-radius: 50px; background: transparent; overflow: hidden; z-index: 0; } .venture-confirmation-button .ai-button-gradient-border::before { content: ""; position: absolute; inset: 0; border-radius: 50px; padding: 2px; background: linear-gradient( 90deg, #ff0080, #ff8c00, #ffce00, #6b5bfd, #1950fa, #0068fc, #6b5bfd, #ff0080 ); background-size: 400% 400%; animation: animateGradient 8s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.5), inset 0 0 8px rgba(255, 140, 0, 0.5), inset 0 0 8px rgba(107, 91, 253, 0.5); } .venture-confirmation-button .ai-button-gradient-border::after { content: ""; position: absolute; inset: -5px; border-radius: 50px; z-index: -2; background: conic-gradient( from 0deg, #ff0080, #ff8c00, #ffce00, #6b5bfd, #1950fa, #0068fc, #6b5bfd, #ff0080 ); filter: blur(15px); opacity: 0.15; animation: rotateGradient 10s linear infinite; } .venture-confirmation-button .gradient-glow { position: absolute; inset: 0; border-radius: 50px; z-index: -1; background: linear-gradient( 90deg, rgba(255, 0, 128, 0.4), rgba(255, 140, 0, 0.4), rgba(255, 206, 0, 0.4), rgba(107, 91, 253, 0.4), rgba(25, 80, 250, 0.4), rgba(0, 104, 252, 0.4), rgba(107, 91, 253, 0.4), rgba(255, 0, 128, 0.4) ); background-size: 400% 400%; filter: blur(18px); opacity: 0.5; animation: animateGradient 8s linear infinite; } .venture-confirmation-button .ai-button-content { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; gap: 8px !important; width: 100%; height: 100%; border-radius: 50px; background: rgba(25, 25, 35, 0.9); backdrop-filter: blur(5px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(255, 255, 255, 0.3), inset 0 0 6px rgba(107, 91, 253, 0.2); z-index: 2; padding: 0 24px; overflow: hidden; } .venture-confirmation-button .ai-button-content::before { content: ""; position: absolute; inset: 0; border-radius: 50px; box-shadow: inset 0 0 8px rgba(255, 0, 128, 0.3), inset 0 0 12px rgba(0, 104, 252, 0.3); opacity: 0.7; z-index: -1; } .venture-confirmation-button .ai-button-content::after { content: ""; position: absolute; inset: 0; border-radius: 50px; box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1px 1px rgba(0, 0, 0, 0.1); pointer-events: none; } .venture-confirmation-button .connect-text { font-weight: 600; font-size: 15px; color: white; letter-spacing: 0.2px; white-space: nowrap; position: relative !important; z-index: 1 !important; } /* Cancel button - text only, simple styling */ .venture-cancel-btn { background: none; border: none; padding: 0; color: rgba(255, 255, 255, 0.6); font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; text-decoration: none; position: relative; } .venture-cancel-btn:hover { color: rgba(255, 255, 255, 0.9); transform: translateX(-2px); } .venture-cancel-btn:active { transform: translateX(-1px); color: rgba(255, 255, 255, 1); } /* Ensure cancel button is on the left */ .venture-confirmation-actions { display: flex; gap: 16px; justify-content: center; align-items: center; width: 100%; margin-top: 8px; flex-direction: row; } .venture-confirmation-actions .venture-cancel-btn { order: -1; } /* Venture Status - reusing agent-launcher-status styles */ .venture-status { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 8px; width: 100%; } .venture-status-text { display: flex; align-items: center; color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 500; font-family: "Montserrat", sans-serif; } /* Venture Status uses neon-checkbox - just scope sizing */ .venture-status .neon-checkbox { --size: 18px; width: var(--size); height: var(--size); margin-right: 8px; margin-bottom: 0; cursor: default; pointer-events: none; } .venture-status-label { display: flex; align-items: center; gap: 4px; } .venture-name-part { color: rgba(255, 255, 255, 0.7); } .venture-status-part { color: rgba(255, 255, 255, 0.7); } /* Status launched - green glow */ .venture-status.status-launched .venture-status-part { color: rgba(180, 255, 200, 0.95); text-shadow: 0 0 8px rgba(34, 197, 94, 0.6), 0 0 12px rgba(16, 185, 129, 0.4), 0 0 16px rgba(52, 211, 153, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3); } /* Status rejected - orange glow */ .venture-status.status-rejected .venture-status-part { color: rgba(255, 180, 100, 0.95); text-shadow: 0 0 8px rgba(255, 107, 53, 0.6), 0 0 12px rgba(255, 140, 66, 0.4), 0 0 16px rgba(255, 160, 122, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3); } .venture-status .lab-divider-line { width: 100%; height: 1px; max-height: 1px; background: linear-gradient( to right, transparent, rgba(74, 85, 104, 0.5), transparent ); margin-top: 4px; } /* Hub orb tooltip: keep center + scale (dashboard-layout owns motion); override .global-tooltip transform */ .wm-hub-orb-content > #wm-orb-status.global-tooltip.wm-orb-status-tooltip.visible.wm-orb-status--gate-ready { transform: translate3d(-50%, -50%, 0) scale(1) !important; } .wm-hub-orb-content > #wm-orb-status.global-tooltip.wm-orb-status-tooltip.visible.wm-orb-status--gate-ready.wm-orb-status--hover { transform: translate3d(-50%, calc(-50% - 2px), 0) scale(1) !important; } /* PrepNode context loading: scoped like artifacts-loading-context-container so neon-checkbox styles apply */ .ai-message.bot .ai-prep-context-callout { display: flex; flex-direction: column; align-self: stretch; width: 100%; min-width: 0; max-width: min(520px, 100%); box-sizing: border-box; margin-bottom: 8px; border-radius: 12px; background: rgba(26, 26, 46, 0.72); border: 1px solid rgb(91 130 253 / 33%); overflow: hidden; backdrop-filter: blur(10px); cursor: default; } .ai-message.bot .ai-prep-context-callout.ai-prep-context-callout--collapsed { cursor: pointer; } .ai-message.bot .ai-prep-context-expanded { display: flex; flex-direction: column; min-height: 0; flex-shrink: 0; } /* Inner wrapper reuses .artifacts-loading-context-container rules for .neon-checkbox / pills */ .ai-message.bot .ai-prep-context-loading-inner.artifacts-loading-context-container { position: relative; bottom: auto; left: auto; transform: none; width: 100%; min-width: 0; height: auto; min-height: 0; max-height: 200px; flex: 0 1 auto; max-width: 100%; pointer-events: auto; opacity: 1; border-radius: 0; border: none; background: transparent; display: flex; flex-direction: column; /* Single scroll surface lives on .artifacts-loading-context-content; nested overflow:auto here caused overlap/ghosting */ overflow: hidden; } .ai-message.bot .ai-prep-context-loading-inner .artifacts-loading-context-content.ai-prep-context-artifacts-content { margin-top: 0 !important; padding: 12px 16px !important; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-mask-image: none; mask-image: none; } /* Keep neon checkbox border/glow animations clipped to each row (avoids green streaks across the callout) */ .ai-message.bot .ai-prep-context-loading-inner .artifacts-context-item { isolation: isolate; } .ai-message.bot .ai-prep-context-loading-inner .artifacts-context-pill { position: relative; z-index: 0; } .ai-message.bot .ai-prep-context-loading-inner .neon-checkbox { contain: layout style; } .ai-message.bot .ai-prep-context-bar { display: none; flex-shrink: 0; width: 100%; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; margin: 0; border: none; border-top: 1px solid rgba(134, 175, 255, 0.15); background: rgba(134, 175, 255, 0.06); color: rgba(190, 210, 255, 0.95); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; text-align: left; font-family: inherit; } .ai-message.bot .ai-prep-context-bar-leading { display: flex; flex: 1; min-width: 0; align-items: center; gap: 8px; } .ai-message.bot .ai-prep-context-bar .artifacts-final-venture-memory { pointer-events: none; flex-shrink: 0; } .ai-message.bot .ai-prep-context-bar-label { flex: 1; min-width: 0; text-align: left; line-height: 1.35; } .ai-message.bot .ai-prep-context-bar:hover { background: rgba(134, 175, 255, 0.1); } .ai-message.bot .ai-prep-context-bar-chevron { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(134, 175, 255, 0.11); color: rgba(210, 224, 255, 0.95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .ai-message.bot .ai-prep-context-bar:hover .ai-prep-context-bar-chevron { background: rgba(134, 175, 255, 0.18); } .ai-message.bot .ai-prep-context-bar-chevron svg { display: block; transform-origin: 50% 50%; transition: transform 0.42s cubic-bezier(0.33, 1, 0.68, 1); } /* Collapsed (panel hidden): chevron points down; expanded: points up */ .ai-message.bot .ai-prep-context-callout--open .ai-prep-context-bar-chevron svg { transform: rotate(180deg); } /* Legacy collapse when GSAP is not available (shim / load failure) */ .ai-message.bot .ai-prep-context-callout--collapsed:not(.ai-prep-context-callout--gsap):not( .ai-prep-context-callout--open ) .ai-prep-context-expanded { display: none !important; } .ai-message.bot .ai-prep-context-callout--collapsed.ai-prep-context-callout--open:not( .ai-prep-context-callout--gsap ) .ai-prep-context-expanded { display: flex !important; border-top: 1px solid rgba(134, 175, 255, 0.12); } /* GSAP path: panel stays in DOM for height animation */ .ai-message.bot .ai-prep-context-callout--gsap.ai-prep-context-callout--collapsed .ai-prep-context-expanded { overflow: hidden; } .ai-message.bot .ai-prep-context-callout--gsap.ai-prep-context-callout--collapsed.ai-prep-context-callout--open .ai-prep-context-expanded { border-top: 1px solid rgba(134, 175, 255, 0.12); } /* --- Orchestrator hybrid callout (below prep context, above bot text) --- */ .ai-message.bot .ai-orchestrator-callout { align-self: flex-start; width: 100%; max-width: min(520px, 100%); margin-bottom: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(26, 26, 46, 0.72); backdrop-filter: blur(10px); border: 1px solid rgba(91, 130, 253, 0.35); box-sizing: border-box; } .ai-message.bot .ai-orchestrator-callout--active { animation: ai-orchestrator-callout-pulse 1.8s ease-in-out infinite; border-color: rgba(100, 160, 255, 0.55); box-shadow: 0 0 0 1px rgba(100, 160, 255, 0.2), 0 0 18px rgba(80, 140, 255, 0.25); } .ai-message.bot .ai-orchestrator-callout--llm { animation: none; border-color: rgba(74, 222, 128, 0.45); box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.15), 0 0 12px rgba(52, 211, 153, 0.2); } .ai-message.bot .ai-orchestrator-callout--llm.ai-orchestrator-callout--last-failed { border-color: rgba(248, 113, 113, 0.5); box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.18), 0 0 12px rgba(248, 113, 113, 0.18); } .ai-message.bot .ai-orchestrator-callout--done { animation: none; } .ai-message.bot .ai-orchestrator-callout--done.ai-orchestrator-callout--last-success { border-color: rgba(74, 222, 128, 0.5); box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.12); } .ai-message.bot .ai-orchestrator-callout--done.ai-orchestrator-callout--last-failed { border-color: rgba(248, 113, 113, 0.52); box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.2), 0 0 14px rgba(248, 113, 113, 0.15); } .ai-message.bot .ai-orchestrator-callout--done.ai-orchestrator-callout--last-inflight { border-color: rgba(91, 130, 253, 0.38); box-shadow: 0 0 0 1px rgba(91, 130, 253, 0.12); } .ai-orchestrator-callout-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 0 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(134, 175, 255, 0.12); } .ai-orchestrator-callout-title { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(180, 200, 255, 0.72); } .ai-orchestrator-callout-header .wm-context-help-button { flex: 0 0 auto; margin-left: 0; } .ai-orchestrator-step-result-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 8px; padding: 4px; margin-left: 0; } .ai-orchestrator-orchestrator-feedback { display: flex; align-items: center; gap: 6px; } .ai-orchestrator-feedback-neon.neon-checkbox { transform: scale(0.95); transform-origin: center center; margin: 0; } .ai-orchestrator-feedback-neon.neon-checkbox input { pointer-events: none; } .ai-orchestrator-feedback-approved-text { font-size: 12px; font-weight: 600; color: rgba(110, 231, 183, 0.95); } .ai-orchestrator-deny-x { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 16px; font-weight: 700; line-height: 1; color: rgba(248, 113, 113, 0.95); } .ai-orchestrator-feedback-denied-text { font-size: 12px; font-weight: 600; color: rgba(248, 113, 113, 0.92); } @keyframes ai-orchestrator-callout-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(100, 160, 255, 0.2), 0 0 14px rgba(80, 140, 255, 0.2); } 50% { box-shadow: 0 0 0 1px rgba(120, 180, 255, 0.35), 0 0 22px rgba(100, 160, 255, 0.35); } } .ai-orchestrator-divider { font-size: 11px; letter-spacing: 0.12em; color: rgba(180, 200, 255, 0.35); margin: 10px 0 8px; user-select: none; } .ai-orchestrator-divider:first-child { margin-top: 0; } .ai-orchestrator-step { margin: 10px 0; padding: 10px 12px 12px; border: 1px solid rgba(134, 175, 255, 0.16); border-radius: 10px; background: rgba(0, 24, 56, 0.28); box-sizing: border-box; transition: background 0.18s cubic-bezier(0.4, 0.12, 0.3, 1), border-color 0.28s cubic-bezier(0.4, 0.12, 0.3, 1), box-shadow 0.28s cubic-bezier(0.4, 0.12, 0.3, 1), padding 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .ai-orchestrator-step:hover:not(.ai-orchestrator-step--completed):not( .ai-orchestrator-step--failed ) { border-color: rgba(134, 175, 255, 0.29); background: rgba(0, 28, 64, 0.34); box-shadow: 0 2px 12px 0 rgba(134, 175, 255, 0.1), 0 0 0 1.5px rgba(93, 170, 255, 0.14); } .ai-orchestrator-step--completed { border-color: rgba(52, 211, 153, 0.42); box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.1); } .ai-orchestrator-step--completed .ai-orchestrator-tool-name-pill { border-color: rgba(52, 211, 153, 0.5); color: rgba(209, 250, 229, 0.98); } .ai-orchestrator-step--completed.ai-orchestrator-step--collapsible:hover { border-color: rgba(52, 211, 153, 0.62); background: rgba(0, 36, 48, 0.36); box-shadow: 0 2px 14px 0 rgba(52, 211, 153, 0.12), 0 0 0 1px rgba(52, 211, 153, 0.18); } .ai-orchestrator-step--collapsible.ai-orchestrator-step--collapsed { padding-top: 8px; padding-bottom: 8px; } .ai-orchestrator-step--collapsible { cursor: pointer; } .ai-orchestrator-step--openable { cursor: pointer; } .ai-orchestrator-step--collapsible:focus-visible { outline: 2px solid rgba(110, 231, 183, 0.65); outline-offset: 2px; } .ai-orchestrator-step--openable:focus-visible { outline: 2px solid rgba(110, 231, 183, 0.65); outline-offset: 2px; } .ai-orchestrator-step--failed.ai-orchestrator-step--collapsible:focus-visible { outline-color: rgba(248, 113, 113, 0.75); } .ai-orchestrator-step-details { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1); } .ai-orchestrator-step--collapsible.ai-orchestrator-step--collapsed .ai-orchestrator-step-details { grid-template-rows: 0fr; } .ai-orchestrator-step-details-inner { min-height: 0; overflow: hidden; } .ai-orchestrator-step-chevron { margin-left: auto; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid rgba(167, 211, 200, 0.85); border-bottom: 2px solid rgba(167, 211, 200, 0.85); transform: rotate(45deg); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0.85; } .ai-orchestrator-step--details-expanded .ai-orchestrator-step-chevron { transform: rotate(-135deg); margin-top: 3px; } .ai-orchestrator-step--failed { border-color: rgba(248, 113, 113, 0.42); box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.12); } .ai-orchestrator-step--failed .ai-orchestrator-tool-icon { border-color: rgba(248, 113, 113, 0.55); box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.08); } .ai-orchestrator-step--failed .ai-orchestrator-tool-name-pill { border-color: rgba(252, 165, 165, 0.45); color: rgba(254, 226, 226, 0.96); } .ai-orchestrator-step--failed:hover { border-color: rgba(248, 113, 113, 0.55); background: rgba(48, 12, 16, 0.32); box-shadow: 0 2px 14px 0 rgba(248, 113, 113, 0.12), 0 0 0 1px rgba(248, 113, 113, 0.2); } .ai-orchestrator-step--failed .ai-orchestrator-step-chevron { border-right-color: rgba(252, 165, 165, 0.88); border-bottom-color: rgba(252, 165, 165, 0.88); } .ai-orchestrator-step-fail-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 18px; font-weight: 800; line-height: 1; color: rgba(254, 202, 202, 0.98); text-shadow: 0 0 8px rgba(248, 113, 113, 0.95), 0 0 16px rgba(239, 68, 68, 0.55); filter: drop-shadow(0 0 4px rgba(248, 113, 113, 0.75)); } .ai-orchestrator-orchestrator-feedback--run-failed { display: flex; align-items: center; gap: 6px; } .ai-orchestrator-feedback-run-failed-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 15px; font-weight: 800; line-height: 1; color: rgba(254, 202, 202, 0.98); text-shadow: 0 0 10px rgba(248, 113, 113, 0.85); } .ai-orchestrator-feedback-run-failed-text { font-size: 12px; font-weight: 600; color: rgba(252, 165, 165, 0.98); } .ai-orchestrator-step:last-child { margin-bottom: 0; } .ai-orchestrator-step-head { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px; margin-top: 10px; margin-bottom: 0; } .ai-orchestrator-step-mark { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; } .ai-orchestrator-step-status-row .ai-orchestrator-step-mark { align-self: center; } .ai-orchestrator-step-paused { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient( 145deg, rgba(255, 186, 120, 0.98), rgba(220, 110, 45, 0.92) ); box-shadow: 0 0 0 2px rgba(255, 160, 90, 0.45), 0 0 10px rgba(255, 140, 60, 0.35); } .ai-orchestrator-step-mark .ai-orchestrator-step-neon { transform: scale(0.74); transform-origin: center center; margin: 0; } .ai-orchestrator-step-mark .ai-orchestrator-step-neon input { pointer-events: none; } .ai-orchestrator-step-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(134, 175, 255, 0.25); border-top-color: rgba(160, 200, 255, 0.95); border-radius: 50%; animation: ai-orchestrator-spin 0.7s linear infinite; } @keyframes ai-orchestrator-spin { to { transform: rotate(360deg); } } .ai-orchestrator-step-check-fallback { color: rgba(110, 231, 183, 0.95); font-size: 16px; font-weight: 700; } .ai-orchestrator-step-mark--failed { align-items: center; justify-content: center; } .ai-orchestrator-step-subgoal { flex: 1 1 auto; font-size: 13px; line-height: 1.45; color: rgba(230, 235, 255, 0.95); min-width: 0; } .ai-orchestrator-step-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; align-self: flex-start; margin-left: auto; overflow: visible; } /* Points badge on Approve (matches .lab-actions .lab-continue-wrap + .lab-points-button) */ .ai-orchestrator-approve-wrap { position: relative; display: inline-flex; align-items: center; overflow: visible; } .ai-orchestrator-approve-wrap > .lab-points-button { position: absolute; top: -15px; right: -25px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 100px; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(5px); border: 2px solid rgba(255, 152, 0, 0.3); box-shadow: 0 0 5px rgba(255, 152, 0, 0.1); transition: all 0.3s ease; z-index: 1; font-size: 11px; font-weight: 500; opacity: 0.4; pointer-events: none; } .ai-orchestrator-approve-wrap:hover > .lab-points-button { background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); border: 2px solid #ff9800; box-shadow: 0 0 10px rgba(255, 152, 0, 0.3); z-index: 10; opacity: 1; } .ai-orchestrator-inline-btn.lab-button { min-height: 30px; padding: 4px 12px; margin: auto; font-size: 11px; } .ai-orchestrator-open-btn.lab-button.secondary { border-color: rgba(147, 197, 253, 0.45); color: rgba(191, 219, 254, 0.95); } .ai-orchestrator-step-status-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-size: 12px; color: rgba(190, 210, 255, 0.88); margin-top: 0; margin-left: 0; width: 100%; } .ai-orchestrator-status-hitl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; overflow: visible; } .ai-orchestrator-tool-icon { flex: 0 0 auto; min-width: 36px; min-height: 36px; padding: 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(134, 175, 255, 0.22); box-sizing: border-box; } .ai-orchestrator-tool-icon img { width: 26px; height: 26px; object-fit: contain; display: block; } .ai-orchestrator-tool-icon--fallback { font-size: 11px; color: rgba(160, 190, 255, 0.75); line-height: 1; } .ai-orchestrator-status-text { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; } .ai-orchestrator-tool-name-pill { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; min-height: 28px; box-sizing: border-box; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; color: rgba(220, 232, 255, 0.96); background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(134, 175, 255, 0.32); border-radius: 8px; } .ai-orchestrator-status-phrase { flex: 1 1 auto; min-width: 0; color: inherit; } .ai-orchestrator-async-hint { font-size: 11px; color: rgba(160, 190, 255, 0.65); margin-top: 6px; margin-left: 0; } .ai-orchestrator-step-outcome { font-size: 12px; line-height: 1.4; color: rgba(200, 220, 255, 0.82); margin-top: 8px; margin-left: 0; } /* Opening message quick-action cards: sibling below first bot bubble in #ai-messages-container */ .ai-messages-container > .chat-opening-cards { width: 100%; margin-top: 6px; margin-bottom: 4px; padding-top: 0; flex-shrink: 0; } .chat-opening-cards__inner { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; align-items: stretch; width: 100%; } .chat-opening-card { position: relative; text-align: left; cursor: pointer; border-radius: 16px; padding: 16px 14px 18px; flex: 0 0 auto; width: clamp(148px, 22vw, 176px); min-height: 152px; max-width: 100%; overflow: hidden; color: #f8fafc; background: #0a0c12; border: 1px solid rgba(120, 155, 230, 0.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 6px -1px rgba(0, 0, 0, 0.14), 0 2px 4px -1px rgba(0, 0, 0, 0.08); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease; } @media (max-width: 720px) { .chat-opening-cards__inner { flex-direction: column; align-items: center; } .chat-opening-card { width: min(260px, 100%); } } .chat-opening-card:hover { transform: translateY(-2px); border-color: rgba(120, 155, 230, 0.32); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 6px -1px rgba(0, 0, 0, 0.14), 0 2px 4px -1px rgba(0, 0, 0, 0.08); } .chat-opening-card:focus-visible { outline: 2px solid rgba(129, 161, 255, 0.85); outline-offset: 2px; } .chat-opening-card__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.95; background: radial-gradient( 120% 85% at 100% 0%, rgba(56, 189, 248, 0.42), transparent 55% ); transition: background 0.32s ease, opacity 0.32s ease, transform 0.32s ease; transform: scale(1); transform-origin: 100% 0%; } .chat-opening-card--next-task .chat-opening-card__glow { background: radial-gradient( 120% 85% at 100% 0%, rgba(56, 189, 248, 0.48), transparent 55% ); } .chat-opening-card--new-venture .chat-opening-card__glow { background: radial-gradient( 120% 85% at 100% 0%, rgba(52, 211, 153, 0.4), transparent 55% ); } .chat-opening-card--media .chat-opening-card__glow { background: radial-gradient( 120% 85% at 100% 0%, rgba(251, 191, 36, 0.44), transparent 55% ); } .chat-opening-card--blueprint .chat-opening-card__glow { background: radial-gradient( 120% 85% at 100% 0%, rgba(167, 139, 250, 0.48), transparent 55% ); } .chat-opening-card:hover .chat-opening-card__glow { opacity: 1; transform: scale(1.12); } .chat-opening-card--next-task:hover .chat-opening-card__glow { background: radial-gradient( 210% 145% at 100% -5%, rgba(56, 189, 248, 0.58), transparent 72% ); } .chat-opening-card--new-venture:hover .chat-opening-card__glow { background: radial-gradient( 210% 145% at 100% -5%, rgba(52, 211, 153, 0.52), transparent 72% ); } .chat-opening-card--media:hover .chat-opening-card__glow { background: radial-gradient( 210% 145% at 100% -5%, rgba(251, 191, 36, 0.55), transparent 72% ); } .chat-opening-card--blueprint:hover .chat-opening-card__glow { background: radial-gradient( 210% 145% at 100% -5%, rgba(167, 139, 250, 0.58), transparent 72% ); } .chat-opening-card__sparkles { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .chat-opening-card__sparkles-mesh { position: absolute; inset: 0; z-index: 0; opacity: 0.55; mix-blend-mode: screen; pointer-events: none; /* Wide soft haze + a few faint accents — avoids stacking bright dots on the corner */ background-image: radial-gradient( ellipse 115% 70% at 92% -8%, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 42%, transparent 62% ), radial-gradient( ellipse 100% 42% at 50% -18%, rgba(255, 255, 255, 0.08) 0%, transparent 58% ), radial-gradient( circle 5px at 16% 18%, rgba(255, 255, 255, 0.14) 0%, transparent 70% ), radial-gradient( circle 4px at 58% 14%, rgba(255, 255, 255, 0.1) 0%, transparent 68% ); } .chat-opening-card__sparkle { position: absolute; z-index: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.88); box-shadow: 0 0 5px 1px rgba(255, 255, 255, 0.28); transform: translate(0, 0); transition: transform 0.5s cubic-bezier(0.33, 1, 0.68, 1); } /* Varied weights so the field reads less “stamped” */ .chat-opening-card__sparkle--1, .chat-opening-card__sparkle--4 { width: 2px; height: 2px; opacity: 0.75; } .chat-opening-card__sparkle--2, .chat-opening-card__sparkle--3, .chat-opening-card__sparkle--5 { width: 3px; height: 3px; opacity: 0.92; } /* Spread across upper ~40%: left glint, top band, right anchor — not one corner pile */ .chat-opening-card__sparkle--1 { top: 17%; left: 14%; } .chat-opening-card__sparkle--2 { top: 11%; left: 44%; } .chat-opening-card__sparkle--3 { top: 14%; right: 10%; } .chat-opening-card__sparkle--4 { top: 30%; right: 26%; } .chat-opening-card__sparkle--5 { top: 22%; left: 58%; } .chat-opening-card:hover .chat-opening-card__sparkle--1 { transform: translate(3px, -3px); } .chat-opening-card:hover .chat-opening-card__sparkle--2 { transform: translate(-4px, 4px); } .chat-opening-card:hover .chat-opening-card__sparkle--3 { transform: translate(4px, 4px); } .chat-opening-card:hover .chat-opening-card__sparkle--4 { transform: translate(-3px, -5px); } .chat-opening-card:hover .chat-opening-card__sparkle--5 { transform: translate(5px, -2px); } @media (prefers-reduced-motion: reduce) { .chat-opening-card__sparkle, .chat-opening-card__icon { transition: none; } .chat-opening-card:hover .chat-opening-card__sparkle--1, .chat-opening-card:hover .chat-opening-card__sparkle--2, .chat-opening-card:hover .chat-opening-card__sparkle--3, .chat-opening-card:hover .chat-opening-card__sparkle--4, .chat-opening-card:hover .chat-opening-card__sparkle--5 { transform: none; } .chat-opening-card:hover .chat-opening-card__icon { transform: none; } } .chat-opening-card__icon-wrap { position: relative; z-index: 2; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; margin-bottom: 10px; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.18)); } .chat-opening-card__icon { width: 32px; height: 32px; object-fit: contain; display: block; transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1); } .chat-opening-card:hover .chat-opening-card__icon { transform: scale(1.09); } .chat-opening-card--next-task .chat-opening-card__icon-wrap { width: 50px; height: 50px; margin-bottom: 12px; } .chat-opening-card--next-task .chat-opening-card__icon { width: 44px; height: 44px; } .chat-opening-card__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; } .chat-opening-card__title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .chat-opening-card__subtitle { font-size: 12px; line-height: 1.45; color: rgba(200, 210, 230, 0.78); font-weight: 500; }