/* ═══════════════════════════════════════════════════════════════ ai.css — Chat + Newhaven widget styles Drop-in: ═══════════════════════════════════════════════════════════════ */ /* ── Section 1: CSS Variables ── */ :root { --chat-bg: #000000; --chat-radius: 10px; --chat-max-width: 1440px; --chat-bubble-bg: #ffffff; --chat-bubble-text: #000000; --chat-bubble-border: #ffffff; --chat-bubble-border-assistant: #8fd08f; --chat-bubble-assistant-tint: #b3e6b3; --chat-glass: linear-gradient(135deg, rgba(255,60,60,0.09), rgba(255,200,40,0.05), rgba(40,255,80,0.14), rgba(40,100,255,0.09), rgba(255,20,255,0.12)); --chat-composer-text: #ffffff; /* Chat bar chrome (the frame the widget mounts in) */ --chat-bar-bg: #ffffff; --chat-bar-border: #2a3a5a; --chat-bar-text: #86868b; --chat-bar-hint: #aeaeb2; --chat-bar-font: SFMono, 'JetBrains Mono', monospace; --chat-bar-shadow: 0 2px 12px rgba(0,0,0,0.1); --chat-expanded-bg: #000000; --chat-header-bg: #0a0a0a; --chat-header-bg-hover: #141414; --chat-header-text: #ffffff; --chat-header-border: #333333; --chat-clear-fg: rgba(255,255,255,0.55); --chat-clear-fg-hover: #ffffff; --chat-clear-bg-hover: rgba(255,255,255,0.12); --chat-body-bg: #000000; --chat-sep: #aeaeb2; --sidebar-w: calc(var(--note-size, 16px) * 2 + 2px); /* always fits two note columns */ --sidebar-offset: calc(-1 * (var(--sidebar-w) + 0.25rem)); /* strip + postits sit left of the message area */ /* Screen-ratio vars — width-based, declared here (ai.js no longer sets them). Desktop baseline scales with the window; mobile floors/caps via the media query at the bottom of this file. */ --note-size: calc(100vw * 0.00557); --screen-third: calc(100vw / 3); --term-bg: #000000; --term-text: #ffffff; --term-font: 'Courier New', Courier, monospace; --term-border: #ffffff; --term-log-bg: #0a0a0a; --term-placeholder: #555555; --term-scrollbar: #444444; --term-prompt: #ffffff; } /* ── Section 2: Chat widget ── */ #chat { width: 100%; max-width: var(--chat-max-width); height: 70vh; display: flex; flex-direction: column; border-radius: var(--chat-radius); overflow: hidden; background: var(--chat-bg); font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } #chat-header { padding: 0.75rem 1rem; font-weight: 600; font-size: 0.9rem; color: var(--chat-composer-text); border-bottom: 1px solid var(--chat-bubble-border); } #chat-messages { flex: 1; overflow-y: auto; padding: 1rem 0.25rem; } .chat-scroll { position: relative; min-height: 100%; } /* Annotation post-it grid pinned to each assistant bubble — carries its own black segment; only note-ful bubbles get the left gutter */ .chat-postits { position: absolute; left: var(--sidebar-offset); top: 0.25rem; width: var(--sidebar-w); background: #000; display: grid; grid-template-columns: repeat(2, var(--note-size, 16px)); gap: 2px; } .chat-msg.chat-assistant:has(.chat-postits) { margin-left: calc(var(--sidebar-w) + 0.25rem); } .chat-postit { width: var(--note-size, 16px); height: var(--note-size, 16px); background: #fdf6c9; border: 1px solid #8a8a8a; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: border-color 0.15s ease; } .chat-postit:hover { border-color: #000000; } /* Shared post-it tooltip — appended to , outside filtered ancestors */ #chat-tooltip { position: fixed; left: 0; top: 0; width: 140px; background: #fdf6c9; border: 1px solid #8a8a8a; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); font-size: 0.7rem; line-height: 1.3; color: #333; padding: 0.3rem 0.4rem; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; z-index: 10; } /* Show while any note is hovered; hide automatically on hover-off */ body:has(.chat-postit:hover) #chat-tooltip { opacity: 1; } .chat-msg { margin-bottom: 0.75rem; max-width: 85%; } .chat-user { margin-left: auto; max-width: 80%; background: var(--chat-bubble-bg) var(--chat-glass); border: 1px solid var(--chat-bubble-border); border-radius: var(--chat-radius); padding: 0.6rem 1rem; color: var(--chat-bubble-text); } .chat-assistant { margin-right: auto; max-width: 80%; position: relative; background: var(--chat-bubble-assistant-tint) var(--chat-glass); border: 1px solid var(--chat-bubble-border-assistant); border-radius: var(--chat-radius); padding: 0.6rem 1rem; backdrop-filter: blur(6px); } .chat-assistant p { margin: 0 0 0.5rem; line-height: 1.5; color: var(--chat-bubble-text); } /* Copy-to-clipboard button on plain text blocks */ .chat-copy { position: absolute; bottom: 0.35rem; right: 0.5rem; background: transparent; border: 1px solid var(--chat-bubble-border-assistant); border-radius: 4px; color: var(--chat-bubble-text); font-size: 0.8rem; padding: 0.15rem 0.45rem; cursor: pointer; opacity: 0; transition: opacity 0.15s ease; } .chat-assistant:hover .chat-copy { opacity: 1; } .chat-copy--done { border-color: var(--chat-bubble-border-assistant); color: #2d8a4e; } /* Content cards (tool_use: widget_url_card) — the card itself is the link */ .chat-card { display: block; max-width: var(--screen-third, calc(100vw / 3)); background: var(--chat-bubble-bg) var(--chat-glass); border: 1px solid var(--chat-bubble-border); border-radius: var(--chat-radius); padding: 0.75rem 1rem; margin-bottom: 0.5rem; text-decoration: none; color: inherit; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .chat-card:hover { border-color: var(--chat-bubble-border-assistant); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .chat-card:hover .chat-card-title { text-decoration: underline; } .chat-card:hover .chat-card-title::after { content: ' →'; } .chat-card-header { font-size: 0.75rem; color: #2d8a4e; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 0.25rem; } .chat-card-title { font-size: 1rem; font-weight: 500; margin-bottom: 0.15rem; } .chat-card-subtitle { font-size: 0.85rem; margin-bottom: 0.25rem; } .chat-card-text { font-size: 0.85rem; line-height: 1.4; color: #555; margin-bottom: 0.5rem; } /* Composer */ #chat-composer { display: flex; border-top: 1px solid var(--chat-bubble-border); } #chat-input { flex: 1; background: transparent; border: none; outline: none; color: var(--chat-composer-text); padding: 0.75rem 1rem; font-size: 0.9rem; } #chat-send { background: transparent; border: none; border-left: 1px solid var(--chat-bubble-border); color: var(--chat-composer-text); padding: 0.75rem 1.25rem; cursor: pointer; font-size: 0.9rem; } #chat-send:hover { opacity: 0.7; } /* X10 Engineering footer link — plain color, underlined so it reads clickable */ .x10-link { color: inherit; text-decoration: underline; cursor: pointer; } /* ── Chat bar chrome (the frame the widget mounts in) ── */ .chat-bar { background: var(--chat-bar-bg); border: 1px solid var(--chat-bar-border); border-radius: 12px; overflow: hidden; box-shadow: var(--chat-bar-shadow); margin-bottom: 1.5rem; cursor: pointer; transition: box-shadow 0.2s ease; scroll-snap-align: start; } .chat-bar:hover { box-shadow: none; } .chat-collapsed-content { padding: 0.75rem 1rem; display: flex; justify-content: space-between; align-items: center; color: var(--chat-bar-text); font-family: var(--chat-bar-font); font-size: 0.85rem; cursor: pointer; } .chat-expanded-content { display: none; } .chat-bar.expanded { cursor: default; background: var(--chat-expanded-bg); border-color: var(--chat-bar-border); } .chat-bar.expanded .chat-collapsed-content { display: none; } .chat-bar.expanded .chat-expanded-content { display: block; } .chat-bar-header { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; color: var(--chat-header-text); font-family: var(--term-font); font-size: 0.8rem; border-bottom: 1px solid var(--chat-header-border); background: var(--chat-header-bg); cursor: pointer; user-select: none; line-height: 1.25; } .chat-bar-header:hover { background: var(--chat-header-bg-hover); } .chat-bar-title { display: flex; align-items: center; gap: 0.5rem; } .chat-bar-clear { background: none; border: none; margin: 0; padding: 2px 4px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; color: var(--chat-clear-fg); border-radius: 4px; } .chat-bar-clear:hover { color: var(--chat-clear-fg-hover); background: var(--chat-clear-bg-hover); } .chat-bar-hint { color: var(--chat-bar-hint); font-size: 0.75rem; font-family: var(--chat-bar-font); } .chat-bar-body { background: var(--chat-body-bg); } /* The composer separator is its own full-width element so the seam never vanishes into subpixel rendering. Integer line-heights keep the widget's internal rows on whole pixels. */ .chat-sep { width: 100%; height: 2px; background: var(--chat-sep); } .chat-bar #chat-composer { border-top: none; } .chat-bar #chat-send { border-left: 2px solid var(--chat-sep); } .chat-bar #chat-send:hover { opacity: 1; } .chat-bar #chat-input, .chat-bar #chat-send { line-height: 1.25; } /* Chat lists don't need a visible scrollbar; wheel/trackpad still scrolls. */ .chat-bar #chat-messages { scrollbar-width: none; } .chat-bar #chat-messages::-webkit-scrollbar { display: none; } #chat-bar #chat { width: 100%; max-width: none; height: 460px; /* the chat-bar body height (desktop) */ background: var(--chat-body-bg); } /* Assistant "thinking" indicator while awaiting the backend reply */ .chat-waiting { display: inline-flex; align-items: center; gap: 5px; min-height: 2.2em; } .chat-waiting .wait-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chat-bubble-text); opacity: 0.15; animation: wait-dot 1.4s ease-in-out infinite; } .chat-waiting .wait-dot:nth-child(2) { animation-delay: 0.2s; } .chat-waiting .wait-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes wait-dot { 0%, 100% { opacity: 0.15; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } } /* ── Section 3: Newhaven terminal ── */ .nh-app { display: flex; flex-direction: column; height: 100%; width: 100%; color: var(--term-text); background: var(--term-bg); font-weight: bold; font-family: var(--term-font); } .nh-out { flex: 1 1 80%; min-height: 0; overflow-y: auto; padding: 1rem; white-space: pre-wrap; line-height: 1.5; border-bottom: 1px solid var(--term-border); } .nh-log { flex: 0 0 auto; max-height: 15vh; overflow-y: auto; padding: 0.4rem 1rem; background: var(--term-log-bg); border-bottom: 1px solid var(--term-border); font-size: 0.85rem; } .nh-input-row { flex: 0 0 auto; display: flex; border-top: 1px solid var(--term-border); } .nh-prompt { padding: 0.75rem 0 0.75rem 1rem; color: var(--term-prompt); user-select: none; } .nh-input { flex: 1; background: transparent; border: none; outline: none; color: var(--term-text); font: inherit; font-size: 14px; padding: 0.75rem 1rem 0.75rem 0.5rem; } .nh-input::placeholder { color: var(--term-placeholder); } .nh-input:focus { outline: none; } .nh-app ::-webkit-scrollbar { width: 6px; } .nh-app ::-webkit-scrollbar-track { background: var(--term-log-bg); } .nh-app ::-webkit-scrollbar-thumb { background: var(--term-scrollbar); border-radius: 3px; } /* ── Section 4: Mobile (≤560px) — width-based overrides ── Vars floor/cap so post-its and chat cards stay usable on phones. */ /* Newhaven terminal overlay (styles moved from ai.js so CSS can control layout) */ #nh-overlay { position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%; z-index: 2000; background: #000; border: 1px solid var(--term-border, #fff); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,0.5); } @media (max-width: 560px) { :root { --note-size: 12px; /* floor: post-its stay visible */ --screen-third: min(100%, 420px); /* chat cards fill the width, capped */ } /* Chat stays in-flow on mobile (scrolls away like desktop); no sheet. */ .chat-card { max-width: 100%; } #chat-input, .nh-input { font-size: 16px; } /* no iOS auto-zoom on inputs */ /* Newhaven: full-bleed, input row lifted above the keyboard */ #nh-overlay { top: 0; left: 0; right: 0; bottom: calc(var(--kb, 0px) + env(safe-area-inset-bottom, 0px)); border-radius: 0; } }