/* Dark values here match Craft's own desktop palette (styles.css's :root) token-for-token where a mobile equivalent exists - same charcoal, same border, same text grays, same purple/green/red - so switching between the desktop app and this companion doesn't feel like two different products. Light theme is defined further down: system-default via `@media (prefers-color-scheme: light)`, or forced either way via `data-theme` on (see applyTheme() in mobile.js). */ :root { --bg: #1d1d20; --bg-card: #232327; --bg-card-hover: #28282d; --bg-card-active: #2d2d33; --border: #2b2b30; --border-strong: rgba(31, 174, 120, 0.38); --text: #ececf1; --text-muted: #a6a6b0; --text-faint: #6f6f7a; --violet: #1fae78; --violet-light: #4ce0a4; --violet-glow: rgba(31, 174, 120, 0.28); --green: #4cc38a; --green-glow: rgba(76, 195, 138, 0.25); --danger: #e5624d; --danger-bg: rgba(229, 98, 77, 0.14); --bubble-user-bg: #16342a; --bubble-user-text: #6ee7a8; --chrome-bg: rgba(15, 15, 17, 0.88); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-full: 9999px; --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', monospace; } /* LIGHT THEME - full white, minimal. System default when the OS prefers light and the user hasn't overridden it; :not([data-theme="dark"]) is what lets an explicit dark choice win over the OS signal. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #ffffff; --bg-card: #f6f6f8; --bg-card-hover: #eeeef1; --bg-card-active: #e6e6ea; --border: #e4e4e8; --border-strong: rgba(15, 157, 104, 0.32); --text: #0a0a0d; --text-muted: #14161a; --text-faint: #45494f; --violet: #0f9d68; --violet-light: #14b876; --violet-glow: rgba(15, 157, 104, 0.18); --green: #16a34a; --green-glow: rgba(22, 163, 74, 0.16); --danger: #dc2626; --danger-bg: #fdecea; --bubble-user-bg: #ddf5e3; --bubble-user-text: #146c43; --chrome-bg: rgba(255, 255, 255, 0.88); } } /* Explicit choice always wins over the OS signal, in both directions. */ :root[data-theme="light"] { --bg: #ffffff; --bg-card: #f6f6f8; --bg-card-hover: #eeeef1; --bg-card-active: #e6e6ea; --border: #e4e4e8; --border-strong: rgba(15, 157, 104, 0.32); --text: #0a0a0d; --text-muted: #14161a; --text-faint: #45494f; --violet: #0f9d68; --violet-light: #14b876; --violet-glow: rgba(15, 157, 104, 0.18); --green: #16a34a; --green-glow: rgba(22, 163, 74, 0.16); --danger: #dc2626; --danger-bg: #fdecea; --bubble-user-bg: #ddf5e3; --bubble-user-text: #146c43; --chrome-bg: rgba(255, 255, 255, 0.88); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { /* height (not min-height) + overflow: hidden locks the PAGE to exactly one viewport worth of pixels, so it can never itself grow taller than the screen and start scrolling. That's the actual bug behind "have to scroll down manually": every container below this was min-height, so nothing was ever capped - the page grew with the chat instead of .main-scroll's own overflow kicking in, which is the only place scrollToBottom() ever touches. */ height: 100%; margin: 0; padding: 0; background-color: var(--bg); color: var(--text); font-family: var(--font-main); overflow: hidden; } button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } .hidden { display: none !important; } /* Ambient glow backdrop */ .bg-ambience { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; overflow: hidden; } .glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.18; } .orb-1 { width: 280px; height: 280px; top: -80px; right: -50px; background: var(--violet); } .orb-2 { width: 320px; height: 320px; bottom: 10%; left: -100px; background: #3b82f6; } /* Main Mobile Shell */ .app-shell { position: relative; z-index: 1; height: 100dvh; overflow: hidden; max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; background: var(--bg); } /* PAIRING SCREEN */ .pair-screen { height: 100%; overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; padding: calc(32px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)); } .pair-header { text-align: center; margin-top: 20px; } .craft-logo { position: relative; width: 64px; height: 64px; margin: 0 auto 20px; display: grid; place-items: center; } .logo-icon-img { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; box-shadow: 0 10px 28px var(--violet-glow); } .badge-tag { display: inline-block; padding: 4px 10px; border-radius: var(--radius-full); background: var(--violet-glow); border: 1px solid var(--border-strong); color: var(--violet-light); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; margin-bottom: 14px; } .pair-header h1 { font-size: 28px; font-weight: 800; line-height: 1.15; margin: 0 0 10px; letter-spacing: -0.02em; } .pair-subtext { color: var(--text-muted); font-size: 14px; line-height: 1.5; margin: 0 auto; max-width: 320px; } .pair-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px 20px; display: grid; gap: 16px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4); } .input-group { display: grid; gap: 6px; } .input-group label { color: var(--text-muted); font-size: 12px; font-weight: 600; } .input-wrapper { position: relative; display: flex; align-items: center; } .input-icon { position: absolute; left: 14px; color: var(--text-faint); width: 18px; height: 18px; } .input-wrapper input { width: 100%; height: 48px; padding: 0 14px 0 42px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: 14px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .input-wrapper input:focus { border-color: var(--violet); box-shadow: 0 0 0 3px var(--violet-glow); } #pairCode { font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; } .btn { height: 48px; border-radius: var(--radius-md); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform 0.15s, background 0.2s, opacity 0.2s; } .btn:active { transform: scale(0.98); } .btn-primary { background: linear-gradient(135deg, var(--violet-light), var(--violet)); color: #fff; box-shadow: 0 4px 16px var(--violet-glow); } .btn-block { width: 100%; } .btn-quiet { background: var(--bg-card-hover); border: 1px solid var(--border); color: var(--text); } .form-error { color: var(--danger); font-size: 12px; margin: 4px 0 0; text-align: center; } .pair-footer { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-faint); font-size: 12px; margin-top: 20px; } /* SYNCING STATE - shown in place of the manual form while a scanned QR's ?code= is being exchanged for a token. */ .pair-syncing { display: grid; justify-items: center; gap: 16px; padding: 32px 0; color: var(--text-muted); font-size: 14px; } .sync-spinner { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--violet-light); animation: sync-spin 0.8s linear infinite; } @keyframes sync-spin { to { transform: rotate(360deg); } } /* WORKSPACE SCREEN */ .workspace { height: 100dvh; display: flex; flex-direction: column; } /* TOPBAR */ .topbar { display: flex; align-items: center; gap: 6px; padding: calc(10px + env(safe-area-inset-top)) 10px 10px; border-bottom: 1px solid var(--border); background: var(--chrome-bg); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 10; } .icon-btn { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: var(--radius-sm); color: var(--text); transition: background 0.15s ease; } .icon-btn:active { background: var(--bg-card-hover); } .topbar-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 0 4px; font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .status-dot { width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-glow); } /* TOPBAR FOLDER PICKER - the one thing Craft needs beyond a plain chat topbar. A real native