/* shared/ask-ai-internal.css — INTERNAL staff Ask-AI widget (bottom-right). Self-contained, namespaced .aii-*, so it never collides with the external client widget (.ask-ai-* / #askAi*) or the feedback FAB (#br-fab, bottom-left). Uses the app's --pm-* tokens with safe fallbacks. */ /* ── THE DOCK — placement contract (CC-TRACK Copperdusk · split pill: Halberdine) ── THE LAUNCHER'S PLACEMENT IS IDENTICAL ON EVERY PAGE: fixed, bottom-right, and it STACKS ABOVE whatever else is in that corner (z-9000 — nothing in the app out-stacks it; the Job Board's rework rail is static/z-auto and creates no stacking context). It does NOT move, shrink, or dodge per-page. A page that fills that corner owes the button clearance — it does not get to relocate it. (Thornbriar briefly had the Job Board slide the launcher left of its rework rail; that was reverted here by Brandon's ruling. Don't reintroduce it.) THE LAUNCHER NOW HAS TWO FORMS, and the contract governs BOTH identically: · STANDALONE #aiiLauncher — pages with AI but no chat dock (9 today). · SPLIT PILL .aii-pill — pages carrying the global header, where the chat dock mounts (9 today). Chat half + AI half in ONE launcher; it REPLACED the dock's own bubble, which used to fight this button for the corner. Built by StreamInternalAI.enableSplit, called by chat-dock.js. See "THE SPLIT PILL" below. Same box, same vars, same z — only the contents differ. TWO VARS MAKE UP THE CONTRACT — both live here because the widget owns its own footprint, and both inherit → #aiiHost, which is how the SPLIT launcher (chat + AI) inherits them for free by consuming the same names: · --aii-dock-clearance (OUTPUT, read by pages) How much bottom-right room the launcher occupies: 20px bottom offset + ~37px launcher height + breathing room. The SPLIT PILL is the same 37px tall (it grows sideways, not up), so this number is unchanged by it — verified by assertion, not assumed. A page with its own SCROLLABLE region under the button pads that region's bottom by this much so its last row can scroll clear instead of dying under the button. Consumers today: pm/worklist.css .wl-rework-rail-cards, plus BOTH panels on split pages (chat-dock.css .chatdock-panel and #aiiHost.aii-split #aiiPanel lift by it, so a panel never covers the pill). ONE number keeps rail padding and both panel lifts in sync. · --aii-dock-right-gap (INPUT, set by pages — still UNSET everywhere) Harmless at its 0px default: `calc(20px + 0px)` = the literal 20px this always used. Setting it shifts the dock left, which is exactly the behaviour Copperdusk removed — so do NOT set it to solve an overlap. NOTE: the split pill did NOT need it (the pill IS the container this anticipated, so there is nothing left to shift around), and Sagebluff's chat/AI overlap was fixed by the DOCK yielding, never by moving this button. It remains for a real future need (e.g. a permanent right dock), not as an overlap escape hatch. */ :root { --aii-dock-clearance: 68px; } #aiiLauncher { position: fixed; right: calc(20px + var(--aii-dock-right-gap, 0px)); bottom: 20px; z-index: 9000; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 13px; border: none; border-radius: 999px; background: var(--pm-accent, #4f46e5); color: #fff; cursor: pointer; font: 600 13.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 6px 20px rgba(17, 24, 39, .28); transition: transform .12s ease, box-shadow .12s ease, opacity .15s ease, right .18s ease; } #aiiLauncher:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(17, 24, 39, .34); } #aiiLauncher:active { transform: scale(.97); } #aiiLauncher svg { width: 17px; height: 17px; display: block; } #aiiLauncher[hidden] { display: none; } /* Standalone launcher only: it sits exactly where its panel opens, so it gets out of the way. The SPLIT PILL overrides this — see below, where the panel is lifted above the pill instead so both halves stay reachable. */ #aiiLauncher.is-panel-open { opacity: 0; pointer-events: none; } /* ── THE SPLIT PILL (CC-TRACK Halberdine) ───────────────────────────────────── ONE launcher, two halves: Chat (left) + AI (right). It replaces BOTH the standalone AI launcher and the chat dock's bubble on pages that carry both — the "future SPLIT launcher (chat + AI)" this file's placement contract anticipated. It inherits that contract for free by living in the same box and consuming the same two vars. ONLY built when the chat dock mounts (StreamInternalAI.enableSplit). On AI-only pages none of this applies and #aiiLauncher stays byte-identical. The AI half KEEPS id #aiiLauncher, so every existing code path that targets it (click→toggle, .is-panel-open) keeps working untouched; only its chrome is restyled from a standalone pill into a half. */ .aii-pill { position: fixed; right: calc(20px + var(--aii-dock-right-gap, 0px)); bottom: 20px; z-index: 9000; display: inline-flex; align-items: stretch; border-radius: 999px; background: var(--pm-accent, #4f46e5); box-shadow: 0 6px 20px rgba(17, 24, 39, .28); transition: transform .12s ease, box-shadow .12s ease, right .18s ease; /* NO overflow:hidden — the Chat badge overhangs the corner. The halves round their own outer edges instead (see below). */ } .aii-pill:hover, .aii-pill:focus-within { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(17, 24, 39, .34); } /* Both halves share this. The AI half is #aiiLauncher, re-dressed. */ .aii-pill-half, .aii-pill #aiiLauncher { /* relative (not static) — it resets #aiiLauncher's `fixed` AND anchors the badge, which would otherwise position against the viewport. */ position: relative; right: auto; bottom: auto; z-index: auto; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border: none; border-radius: 0; background: transparent; color: #fff; cursor: pointer; font: 600 13.5px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: none; transition: background .12s ease; } .aii-pill-half svg, .aii-pill #aiiLauncher svg { width: 17px; height: 17px; display: block; flex: 0 0 auto; } /* Outer edges keep the pill's rounding; the seam stays square. */ .aii-pill > :first-child { border-radius: 999px 0 0 999px; padding-left: 15px; } .aii-pill > :last-child { border-radius: 0 999px 999px 0; padding-right: 15px; } .aii-pill-div { width: 1px; align-self: stretch; background: rgba(255, 255, 255, .3); flex: 0 0 auto; } .aii-pill-half:hover, .aii-pill #aiiLauncher:hover { background: rgba(255, 255, 255, .13); } .aii-pill-half:focus-visible, .aii-pill #aiiLauncher:focus-visible { outline: 2px solid #fff; outline-offset: -3px; } /* ACTIVE = that half's panel is open. The AI half reuses .is-panel-open (already toggled by openPanel/closePanel), so there is no second source of truth. */ .aii-pill-half.is-active, .aii-pill #aiiLauncher.is-panel-open { background: rgba(255, 255, 255, .24); } /* ...and the pill NEVER hides — you must be able to click the other half to switch. */ .aii-pill #aiiLauncher.is-panel-open { opacity: 1; pointer-events: auto; } /* Chat unread badge — moved off the old dock bubble onto the Chat half. Matches the app's badge convention (alerts.js: >9 → "9+", hidden at zero). */ .aii-pill-badge { position: absolute; top: -5px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #D92D20; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid var(--pm-accent, #4f46e5); box-sizing: content-box; pointer-events: none; } .aii-pill-badge[hidden] { display: none; } /* PANELS SIT ABOVE THE PILL on split pages. The standalone launcher hides under its own panel; the pill must not, or its other half becomes unclickable — the exact bug this pill exists to fix (an open chat panel used to bury the AI launcher). Reuses --aii-dock-clearance (the launcher footprint) so the lift always matches the pill, and so a single number keeps the rail padding and this in sync. */ #aiiHost.aii-split #aiiPanel { bottom: var(--aii-dock-clearance, 68px); max-height: calc(100vh - 20px - var(--aii-dock-clearance, 68px)); } @media (max-width: 560px) { /* Match the standalone launcher's tighter inset at this breakpoint. */ .aii-pill { right: calc(14px + var(--aii-dock-right-gap, 0px)); bottom: 14px; } .aii-pill-half span, .aii-pill #aiiLauncher span { display: none; } /* icons only */ .aii-pill > :first-child { padding-left: 13px; } .aii-pill > :last-child { padding-right: 13px; } } #aiiPanel { position: fixed; right: calc(20px + var(--aii-dock-right-gap, 0px)); bottom: 20px; z-index: 9050; /* max-width also nets the gap out so a narrow viewport + an open rail can't push the panel off-screen. */ width: 384px; max-width: calc(100vw - 32px - var(--aii-dock-right-gap, 0px)); height: 580px; max-height: calc(100vh - 40px); display: none; flex-direction: column; background: var(--pm-panel, #fff); color: var(--pm-text, #111827); border: 1px solid var(--pm-border, #e5e7eb); border-radius: 16px; box-shadow: 0 20px 50px rgba(17, 24, 39, .30); overflow: hidden; font: 400 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } #aiiPanel.is-open { display: flex; animation: aiiSlideUp .16s ease; } @keyframes aiiSlideUp { from { transform: translateY(10px); opacity: .6; } to { transform: translateY(0); opacity: 1; } } .aii-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 15px; border-bottom: 1px solid var(--pm-border, #eef0f4); } .aii-head-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; } .aii-head-brand svg { width: 16px; height: 16px; color: var(--pm-accent, #4f46e5); } .aii-head-spacer { flex: 1 1 auto; } .aii-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; background: transparent; color: var(--pm-muted, #6b7280); border-radius: 8px; cursor: pointer; } .aii-iconbtn:hover { background: var(--pm-bg, #f3f4f6); color: var(--pm-text, #111827); } .aii-iconbtn svg { width: 16px; height: 16px; display: block; } .aii-newbtn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--pm-border, #e5e7eb); background: var(--pm-panel, #fff); color: var(--pm-text, #374151); border-radius: 8px; cursor: pointer; font: 600 12px/1 inherit; } .aii-newbtn:hover { background: var(--pm-bg, #f3f4f6); } .aii-chip-row { padding: 8px 15px 0; } .aii-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--pm-accent, #4f46e5) 12%, transparent); color: var(--pm-accent, #4338ca); font-size: 12px; font-weight: 600; } .aii-chip svg { width: 12px; height: 12px; flex: 0 0 auto; } .aii-chip-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aii-chip-row[hidden] { display: none; } .aii-msgs { flex: 1 1 auto; overflow-y: auto; padding: 14px 15px; display: flex; flex-direction: column; gap: 10px; } .aii-empty { margin: auto 0; text-align: center; color: var(--pm-muted, #6b7280); font-size: 13px; padding: 0 12px; } .aii-empty b { display: block; color: var(--pm-text, #374151); font-size: 14px; margin-bottom: 4px; } .aii-msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; font-size: 13.5px; } .aii-msg--user { align-self: flex-end; background: var(--pm-accent, #4f46e5); color: #fff; border-bottom-right-radius: 5px; } .aii-msg--ai { align-self: flex-start; background: var(--pm-bg, #f3f4f6); color: var(--pm-text, #111827); border-bottom-left-radius: 5px; } .aii-typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 11px 13px; background: var(--pm-bg, #f3f4f6); border-radius: 14px; border-bottom-left-radius: 5px; } .aii-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--pm-muted, #9ca3af); animation: aiiBounce 1.2s infinite ease-in-out; } .aii-typing span:nth-child(2) { animation-delay: .15s; } .aii-typing span:nth-child(3) { animation-delay: .3s; } @keyframes aiiBounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } } .aii-inputrow { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--pm-border, #eef0f4); } .aii-input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; border: 1px solid var(--pm-border, #d1d5db); border-radius: 10px; background: var(--pm-panel, #fff); color: var(--pm-text, #111827); font: 400 14px/1.3 inherit; outline: none; } .aii-input:focus { border-color: var(--pm-accent, #4f46e5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pm-accent, #4f46e5) 18%, transparent); } .aii-send { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; border-radius: 10px; background: var(--pm-accent, #4f46e5); color: #fff; cursor: pointer; } .aii-send:hover { filter: brightness(1.05); } .aii-send:disabled { opacity: .5; cursor: default; } .aii-send svg { width: 16px; height: 16px; display: block; } .aii-foot { padding: 7px 15px 10px; font-size: 11px; color: var(--pm-muted, #9ca3af); text-align: center; } /* ── History view (past conversations) ─────────────────────────────────────── */ .aii-history { display: none; flex-direction: column; flex: 1 1 auto; min-height: 0; } #aiiPanel.aii-mode-history .aii-chip-row, #aiiPanel.aii-mode-history .aii-msgs, #aiiPanel.aii-mode-history .aii-inputrow { display: none !important; } #aiiPanel.aii-mode-history .aii-history { display: flex; } .aii-hist-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--pm-border, #eef0f4); } .aii-hist-title { font-weight: 700; font-size: 13.5px; } .aii-hist-searchrow { padding: 10px 12px 6px; } .aii-hist-search { width: 100%; } .aii-hist-list { flex: 1 1 auto; overflow-y: auto; padding: 4px 8px; display: flex; flex-direction: column; gap: 2px; } .aii-hist-row { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 9px 10px; border: none; background: transparent; border-radius: 10px; cursor: pointer; font: inherit; color: inherit; } .aii-hist-row:hover { background: var(--pm-bg, #f3f4f6); } .aii-hist-row-title { font-size: 13.5px; font-weight: 600; color: var(--pm-text, #111827); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aii-hist-row-date { font-size: 11.5px; color: var(--pm-muted, #9ca3af); } .aii-hist-status { padding: 6px 14px; font-size: 12.5px; color: var(--pm-muted, #9ca3af); text-align: center; } .aii-hist-status:empty { display: none; } .aii-hist-more { margin: 4px auto 12px; } .aii-hist-more[hidden] { display: none; } @media (max-width: 480px) { /* Panel goes full-bleed here, so it ignores the dock gap entirely — and MUST reset the base max-width, or a page with a gap set would clamp this full-width panel to a sliver. */ #aiiPanel { right: 8px; left: 8px; bottom: 8px; width: auto; max-width: none; height: 76vh; } #aiiLauncher { right: calc(14px + var(--aii-dock-right-gap, 0px)); bottom: 14px; } }