/* Arodus — Ask Arodus: shared app-level entry point + answer panel (§14). One header field on every page. Two behaviours from one box: · pick a typeahead hit / Enter on an exact match → navigate instantly (no agent) · submit free text (a sentence) → right-side agent panel (canned demo data) The panel mounts at app level and rehydrates from sessionStorage so it survives route changes. Replace the canned askArodus() seam with the real MCP call later. */ .aa-field { position: relative; display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 7px 12px; flex: 1 1 auto; max-width: 320px; min-width: 150px; } .aa-field.aa-prominent { background: color-mix(in oklab, var(--accent) 7%, var(--surface)); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); padding: 9px 14px; } .aa-field.aa-prominent:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); } .aa-field.aa-prominent .aa-spark { color: var(--accent); } .aa-field svg { flex: none; } .aa-field input { background: none; border: 0; outline: none; color: var(--text-body); font-family: var(--font-ui); font-size: 13.5px; width: 100%; } .aa-field.aa-prominent input { font-size: 14px; } .aa-field input::placeholder { color: var(--text-muted); } .aa-spark { color: var(--accent); } /* typeahead dropdown */ .aa-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 80; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: 0 18px 48px rgba(0,0,0,.5); overflow: hidden; max-height: 60vh; overflow-y: auto; } /* portaled to : fixed + anchored to the field rect, on the popover layer above all page content */ .aa-pop.aa-pop-portal { position: fixed; top: auto; left: auto; right: auto; z-index: 1200; } .aa-pop[hidden] { display: none; } .aa-grp { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: 9px 12px 5px; } .aa-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; padding: 8px 12px; cursor: pointer; color: var(--text); font-family: var(--font-ui); font-size: 13px; text-decoration: none; } .aa-item:hover, .aa-item.hl { background: var(--surface-2); } .aa-item .bdot { width: 8px; height: 8px; border-radius: 999px; flex: none; } .aa-item .ai-meta { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } .aa-item .ai-ico { width: 16px; height: 16px; display: grid; place-items: center; color: var(--text-muted); flex: none; } .aa-ask { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--border); padding: 10px 12px; cursor: pointer; color: var(--text); font-family: var(--font-ui); font-size: 13px; } .aa-ask:hover, .aa-ask.hl { background: var(--surface-2); } .aa-ask .q { color: var(--text); } .aa-ask .hint { margin-left: auto; font-size: 11px; color: var(--text-muted); } .aa-ask .aa-spark { display: flex; } .aa-empty { padding: 10px 12px 4px; font-size: 12px; color: var(--text-muted); } /* right-side panel */ .aa-panel { position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw; background: var(--surface); border-left: 1px solid var(--border-strong); box-shadow: -24px 0 60px rgba(0,0,0,.45); z-index: 120; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1); } .aa-panel.show { transform: translateX(0); } .aa-phead { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border); } .aa-phead .ttl { font-family: var(--font-display); font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .aa-phead .ttl .aa-spark { color: var(--accent); display: flex; } .aa-pclose { margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center; background: none; border: 0; border-radius: var(--r-sm); color: var(--text-muted); cursor: pointer; } .aa-pclose:hover { background: var(--surface-2); color: var(--text); } .aa-thread { flex: 1 1 auto; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 18px; } .aa-q { align-self: flex-end; max-width: 88%; background: var(--accent); color: #fff; border-radius: 12px 12px 3px 12px; padding: 9px 13px; font-size: 13.5px; line-height: 1.4; } .aa-a { display: flex; flex-direction: column; gap: 11px; } .aa-answer { font-size: 14px; line-height: 1.5; color: var(--text); } .aa-interp { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); font-style: italic; } .aa-rows { display: flex; flex-direction: column; gap: 7px; } .aa-row { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 11px; text-decoration: none; color: var(--text); cursor: pointer; } .aa-row:hover { border-color: var(--border-strong); } .aa-row .bdot { width: 9px; height: 9px; border-radius: 999px; flex: none; } .aa-row .glyph { width: 9px; height: 9px; border-radius: 999px; flex: none; background: #8C99A9; } .aa-row .glyph.hollow { background: transparent; border: 1.4px solid #8C99A9; } .aa-row .nm { font-size: 13px; font-weight: 500; } .aa-row .sub { font-size: 11.5px; color: var(--text-muted); } .aa-row .rmeta { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); white-space: nowrap; } .aa-row .rcat { font-size: 11px; color: var(--text-muted); } .aa-rowtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .aa-handoff { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--link); text-decoration: none; padding: 3px 0; } .aa-handoff:hover { text-decoration: underline; text-underline-offset: 2px; } /* thinking state */ .aa-think { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 13px; } .aa-think .dots { display: inline-flex; gap: 4px; } .aa-think .dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); opacity: .35; animation: aa-pulse 1.1s infinite; } .aa-think .dots i:nth-child(2) { animation-delay: .18s; } .aa-think .dots i:nth-child(3) { animation-delay: .36s; } @keyframes aa-pulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } } /* advice / honest-failure framing */ .aa-note { font-size: 12px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-left: 2px solid var(--accent); border-radius: var(--r-sm); padding: 8px 11px; line-height: 1.45; } .aa-compose { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--border); } .aa-compose input { flex: 1 1 auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 11px; color: var(--text); font-family: var(--font-ui); font-size: 13px; outline: none; } .aa-compose input:focus { border-color: var(--border-strong); } .aa-send { width: 34px; height: 34px; display: grid; place-items: center; background: var(--accent); border: 0; border-radius: var(--r-sm); color: #fff; cursor: pointer; flex: none; } .aa-send:disabled { opacity: .4; cursor: default; } .aa-readonly { font-size: 10.5px; color: var(--text-muted); text-align: center; padding: 0 14px 10px; font-family: var(--font-mono); }