/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\ !*** css ../../node_modules/.pnpm/next@15.5.18_@babel+core@7.29.7_@opentelemetry+api@1.9.1_@playwright+test@1.60.0_react-dom@19_azt3aed7ozek442eicq4igghhu/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/.pnpm/next@15.5.18_@babel+core@7.29.7_@opentelemetry+api@1.9.1_@playwright+test@1.60.0_react-dom@19_azt3aed7ozek442eicq4igghhu/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***! \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/ /* Light palette is the default. The active theme is chosen by the no-flash script in the root layout, which sets `data-theme` on from the user's stored choice (or the OS preference for "System"). */ :root { color-scheme: light; --bg: #f6f7f9; --fg: #1a1d24; --muted: #5b6473; --accent: #2f5fe0; /* Foreground for text/icons placed ON an accent background. Light theme's accent is dark, so this is white; dark theme's accent is light, so it flips to near-black below. */ --on-accent: #ffffff; --card: #ffffff; --border: #d8dde6; /* iOS safe-area shorthands. Fall back to 0 on platforms without the env. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* Dark palette — applied when the user explicitly picks Dark. */ :root[data-theme='dark'] { color-scheme: dark; --bg: #0b0d12; --fg: #e7ecf3; --muted: #8b95a7; --accent: #7c9cff; --on-accent: #0b0d12; --card: #141821; --border: #232838; } /* No-JS / pre-hydration fallback: honour the OS preference when no explicit choice has been applied. (With JS the script always sets data-theme.) */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']):not([data-theme='dark']) { color-scheme: dark; --bg: #0b0d12; --fg: #e7ecf3; --muted: #8b95a7; --accent: #7c9cff; --on-accent: #0b0d12; --card: #141821; --border: #232838; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing: antialiased; /* Prevent the iOS double-tap zoom on touch buttons (covered by viewport meta) and let text scale predictably under Dynamic Type. */ -webkit-text-size-adjust: 100%; } a { color: var(--accent); } /* Tap targets ≥ 40px so file rows, breadcrumbs, and chat send button meet the WCAG 2.5.5 (Level AAA) and Apple HIG minimums on touch. */ button, [role='button'], input[type='button'], input[type='submit'] { min-height: 40px; } /* Form controls inherit the page font, and inputs render at >=16px so iOS Safari doesn't auto-zoom on focus (a footgun on the chat input). */ input, textarea, select, button { font: inherit; } input, textarea, select { font-size: 16px; } /* Skip link — visually hidden until focused, then anchored to the top-left of the shell. Hitting Tab on a fresh page surfaces it as the first focusable element so keyboard users can jump past the chrome straight into the active app's content (issue #47). */ .shell-skip-link { position: absolute; left: 0; top: 0; background: var(--accent); color: #0b0d12; padding: 8px 12px; border-radius: 0 0 8px 0; font-weight: 600; text-decoration: none; transform: translateY(-150%); transition: transform 120ms ease-out; z-index: 100; } .shell-skip-link:focus, .shell-skip-link:focus-visible { transform: translateY(0); outline: 2px solid var(--accent); outline-offset: 2px; } /* The shell's main content region is programmatically focusable (tabIndex=-1) so the launcher can shift focus into it after the route changes. Hide the focus ring there since the move is implicit. */ [data-testid='shell-content']:focus, [data-testid='shell-content']:focus-visible { outline: none; } /* Phone-class screens: collapse the wide chat drawer to full width, reduce horizontal padding, and let the file row's action cluster wrap underneath the name so the row stays readable at 360px. */ @media (max-width: 640px) { main { padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 2rem !important; } /* Files browser row → name on top, actions wrap below. */ [data-testid='node-row'] { grid-template-columns: 24px 1fr auto !important; grid-template-areas: 'icon name size' 'actions actions actions' !important; row-gap: 6px !important; } [data-testid='node-row'] > :nth-child(1) { grid-area: icon; } [data-testid='node-row'] > :nth-child(2) { grid-area: name; } [data-testid='node-row'] > :nth-child(3) { grid-area: size; } [data-testid='node-row'] > :nth-child(4) { grid-area: actions; flex-wrap: wrap; } /* Chat panel fills the viewport on phones; the session sidebar collapses and the textarea sits above the iOS home indicator. */ [data-testid='chat-panel'] { width: 100vw !important; padding-bottom: var(--safe-bottom); } [data-testid='chat-session-list'] { width: 110px !important; } /* File preview takes the full screen on phones — it was 70vw, which left a sliver of the file list peeking through on 360px. */ [data-testid='file-preview'] { width: 100vw !important; } /* The upload progress card hugged the right edge on desktop; on phones, span the bottom so it stays out of the thumb arc. */ [data-testid='upload-list'] { left: 12px !important; right: 12px !important; width: auto !important; bottom: calc(12px + var(--safe-bottom)) !important; } /* Shell top bar on phones: tighten the gap, drop the "Search" word (the icon remains and keeps its aria-label), and collapse the "Apps" label so the launcher pill becomes an icon-only control. The launcher and account menus stay reachable behind the same toggle they always use — they just take less horizontal room. */ [data-testid='shell-topbar'] { gap: 8px !important; padding: 0.5rem 0.75rem !important; padding-top: calc(0.5rem + var(--safe-top)) !important; padding-left: calc(0.75rem + var(--safe-left, 0px)) !important; padding-right: calc(0.75rem + var(--safe-right, 0px)) !important; } .shell-search-label { display: none !important; } [data-testid='launcher-active-label'] { display: none !important; } [data-testid='shell-search'] { padding: 0.4rem 0.55rem !important; } /* Launcher menu opens as a near-full-width sheet anchored to the top bar so the grid never overflows the viewport on 360px. */ [data-testid='launcher-menu'] { position: fixed !important; left: 8px !important; right: 8px !important; top: calc(56px + var(--safe-top)) !important; width: auto !important; max-width: none !important; grid-template-columns: repeat(3, 1fr) !important; } /* Account menu spans the right portion of the viewport instead of overflowing past the safe-area-right inset. */ [data-testid='account-menu'] { position: fixed !important; right: 8px !important; left: auto !important; top: calc(56px + var(--safe-top)) !important; min-width: 0 !important; width: min(280px, calc(100vw - 16px)) !important; } } /* Desktop app tiles — subtle hover/focus affordance on the landing grid. */ .app-tile { transition: border-color 0.12s ease, background 0.12s ease; } .app-tile:hover { border-color: var(--accent); } .app-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Typing indicator — three bouncing dots shown in the assistant bubble while we await the first streamed token. Reduced-motion users get static dots (the rule below freezes the animation). */ @keyframes chat-typing-bounce { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } } .chat-typing { display: inline-flex; align-items: center; gap: 4px; padding: 0.1rem 0; } .chat-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: chat-typing-bounce 1.2s infinite ease-in-out; } .chat-typing-dot:nth-child(2) { animation-delay: 0.15s; } .chat-typing-dot:nth-child(3) { animation-delay: 0.3s; } /* Honour user motion preferences. The chat-streaming bubble and upload progress bar both animate — drop both when reduced motion is on. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }