/* Ask the Almanac — reference-desk query tool in the .aw research system. Powers the full /ask page (.askx--full) and the global floating popover (.askx-pop) + launcher (.askx-fab). Cool paper, hairline rules, near-zero radius, three-voice type — a research desk, not a chatbot. Class names match ask.js exactly; only the styling changed. Tokens (--ink/--paper/--panel/--band/ --line/--line-2/--accent/--flag/--muted, --serif/--sans/--mono) inherit from the .aw scope on ; fallbacks keep it sane if ever mounted bare. */ :root{ --askx-fab-bottom:20px; --askx-fab-gap:64px; } .askx{ --askx-ink:var(--ink,#16181C); --askx-ink2:var(--ink-2,#4A4E56); --askx-muted:var(--muted,#7C8189); --askx-panel:var(--panel,#FFFFFF); --askx-paper:var(--paper,#F6F5F1); --askx-band:var(--band,#ECEBE4); --askx-line:var(--line,#E1E0D8); --askx-line2:var(--line-2,#CDCCC2); --askx-accent:var(--accent,#1B3A5C); --askx-flag:var(--flag,#9C3B2C); --askx-elev:0 22px 50px -30px rgba(20,24,32,.45), 0 1px 0 0 var(--askx-line); display:flex;flex-direction:column;min-height:0; background:var(--askx-panel); color:var(--askx-ink); border:1px solid var(--askx-line); border-radius:2px; overflow:hidden; font-family:var(--sans,system-ui,sans-serif); font-size:.94rem; } /* ---- header ---- */ .askx-head{display:flex;align-items:center;gap:11px;padding:12px 15px; border-bottom:1px solid var(--askx-line);background:var(--askx-panel)} .askx-head__mark{display:grid;place-items:center;width:30px;height:30px;border-radius:2px;flex:none; background:var(--askx-ink);color:var(--askx-paper)} .askx-head__mark svg{width:17px;height:17px} .askx-head__t{display:flex;flex-direction:column;line-height:1.2;min-width:0} .askx-head__t b{font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:-.01em} .askx-head__t span{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--askx-muted); display:flex;align-items:center;gap:6px;margin-top:2px;text-transform:uppercase} .askx-head__dot{width:6px;height:6px;border-radius:50%;background:var(--positive,#2F6B4F)} .askx-head__sp{flex:1} .askx-icobtn{display:grid;place-items:center;width:30px;height:30px;border:1px solid transparent;border-radius:2px;cursor:pointer; background:transparent;color:var(--askx-muted);transition:.14s} .askx-icobtn:hover{background:var(--askx-band);color:var(--askx-ink)} .askx-icobtn svg{width:16px;height:16px} /* ---- transcript ---- */ .askx-log{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; padding:18px 15px;display:flex;flex-direction:column;gap:18px;background:var(--askx-paper)} .askx-log::-webkit-scrollbar{width:9px} .askx-log::-webkit-scrollbar-thumb{background:var(--askx-line2);border:2px solid transparent;background-clip:padding-box} .askx-msg{display:flex;gap:10px;align-items:flex-start;max-width:100%} .askx-msg--user{flex-direction:row-reverse} /* flat square mark, not a gradient avatar */ .askx-av{flex:none;width:24px;height:24px;border-radius:2px;display:grid;place-items:center;margin-top:1px; background:var(--askx-ink);color:var(--askx-paper)} .askx-av svg{width:14px;height:14px} .askx-bubble{max-width:84%;padding:11px 14px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word; border-radius:2px;border:1px solid var(--askx-line); animation:askx-rise .22s ease both} .askx-msg--bot .askx-bubble{background:var(--askx-panel);color:var(--askx-ink);border-left:2px solid var(--askx-accent)} .askx-msg--user .askx-bubble{background:var(--askx-band);color:var(--askx-ink);border-color:var(--askx-line2)} .askx-msg--err .askx-bubble{background:var(--askx-panel);color:var(--askx-flag);border-left:2px solid var(--askx-flag)} @keyframes askx-rise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}} /* sources — hairline record chips (mono kind + label), matches .aw-chip */ .askx-src{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;padding-top:11px;border-top:1px solid var(--askx-line)} .askx-src a{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;padding:5px 10px;border-radius:2px; background:var(--askx-panel);border:1px solid var(--askx-line2);color:var(--askx-ink);text-decoration:none;transition:.14s} .askx-src a:hover{border-color:var(--askx-accent);color:var(--askx-accent)} .askx-src b{font-family:var(--mono);font-weight:500;text-transform:uppercase;font-size:.58rem;letter-spacing:.08em; color:var(--askx-muted)} .askx-src a:hover b{color:var(--askx-accent)} .askx-typing{display:inline-flex;gap:5px;padding:3px 2px} .askx-typing i{width:6px;height:6px;border-radius:50%;background:var(--askx-muted);animation:askx-blink 1.3s infinite both} .askx-typing i:nth-child(2){animation-delay:.18s}.askx-typing i:nth-child(3){animation-delay:.36s} @keyframes askx-blink{0%,80%,100%{opacity:.2}40%{opacity:1}} /* ---- empty state ---- */ .askx-empty{display:flex;flex-direction:column;gap:16px;margin:auto 0;padding:6px 2px} .askx-empty__hi{font-family:var(--serif);font-size:1.12rem;line-height:1.5;color:var(--askx-ink2)} .askx-empty__hi b{font-family:var(--serif);font-weight:600;color:var(--askx-ink)} .askx-sugg{display:flex;flex-direction:column;gap:8px} .askx-chip{font:inherit;text-align:left;font-size:.88rem;padding:11px 13px;border-radius:2px;cursor:pointer; background:var(--askx-panel);border:1px solid var(--askx-line);color:var(--askx-ink);transition:.14s; display:flex;align-items:center;gap:10px} .askx-chip:hover{border-color:var(--askx-accent);color:var(--askx-accent)} .askx-chip svg{width:13px;height:13px;flex:none;color:var(--askx-muted)} .askx-chip:hover svg{color:var(--askx-accent)} /* ---- composer ---- */ .askx-foot{padding:12px 13px;border-top:1px solid var(--askx-line);background:var(--askx-panel)} .askx-form{display:flex;align-items:flex-end;gap:8px; background:var(--askx-paper);border:1px solid var(--askx-line2);border-radius:2px;padding:5px 5px 5px 13px;transition:.14s} .askx-form:focus-within{border-color:var(--askx-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--askx-accent) 18%,transparent)} .askx-input{flex:1;font:inherit;font-size:.94rem;line-height:1.45;color:var(--askx-ink);background:transparent;border:0;outline:none; resize:none;max-height:132px;padding:7px 0;overflow-y:auto} .askx-input::placeholder{color:var(--askx-muted)} .askx-send{flex:none;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--askx-ink);border-radius:2px;cursor:pointer; background:var(--askx-ink);color:var(--askx-paper);transition:.14s} .askx-send:hover{background:#000;border-color:#000} .askx-send:disabled{opacity:.35;cursor:not-allowed} .askx-send svg{width:17px;height:17px} .askx-note{margin:10px 2px 0;font-family:var(--mono);font-size:.66rem;letter-spacing:.02em;color:var(--askx-muted);text-align:center} .askx-ts{margin-top:9px;display:flex;justify-content:center} /* ---- full page variant ---- */ .askx--full{height:min(74vh,760px);min-height:480px} /* ---- floating launcher ---- */ /* z-index sits BELOW the cookie-consent banner (1000) and modal (1001) so it can never cover their buttons; JS also lifts it above the banner while it shows. */ .askx-fab{position:fixed;right:20px;bottom:calc(var(--askx-fab-bottom,20px) + env(safe-area-inset-bottom,0px));z-index:900; display:inline-flex;align-items:center;gap:9px;padding:0 17px 0 15px;height:46px; border:1px solid var(--ink,#16181C);border-radius:2px;cursor:pointer; background:var(--ink,#16181C);color:var(--paper,#F6F5F1); font-family:var(--sans,sans-serif);font-weight:600;font-size:.9rem;letter-spacing:.01em; box-shadow:0 14px 30px -16px rgba(20,24,32,.5); transition:transform .16s ease,box-shadow .16s;animation:askx-pop-in .3s ease both} .askx-fab:hover{transform:translateY(-1px);background:#000;box-shadow:0 18px 34px -16px rgba(20,24,32,.6)} .askx-fab:active{transform:translateY(0)} .askx-fab svg{width:19px;height:19px} .askx-fab__x{display:none} .askx-fab.is-open .askx-fab__label,.askx-fab.is-open .askx-fab__chat{display:none} .askx-fab.is-open .askx-fab__x{display:block} .askx-fab__label{font-family:var(--mono,monospace);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase} @keyframes askx-pop-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* ---- floating popover ---- */ .askx-pop{position:fixed;right:20px;z-index:901;width:390px;max-width:calc(100vw - 32px); bottom:calc(var(--askx-fab-bottom,20px) + var(--askx-fab-gap,64px) + env(safe-area-inset-bottom,0px)); height:min(596px,calc(100dvh - 150px));box-shadow:0 24px 56px -28px rgba(20,24,32,.5); transform-origin:bottom right;opacity:0;transform:translateY(10px) scale(.98);pointer-events:none; transition:opacity .18s ease,transform .2s ease} .askx-pop.is-open{opacity:1;transform:none;pointer-events:auto} @media (max-width:560px){ :root{ --askx-fab-bottom:14px; } .askx-fab{right:14px;height:46px;padding:0;width:46px;justify-content:center} .askx-fab__label{display:none} /* JS (fitMobile) overrides bottom/height when open, to sit above the keyboard and the consent banner; these are the closed-state / no-JS fallbacks. */ .askx-pop{right:8px;left:8px;width:auto;max-width:none;height:min(72dvh,560px)} } @media (prefers-reduced-motion:reduce){ .askx-bubble,.askx-fab,.askx-pop{animation:none;transition:none} } /* ---- "Listen" text-to-speech player (tts.js) — .aw research-desk skin ---- */ .tts{margin:10px 0 2px} .tts__bar{display:inline-flex;align-items:center;gap:8px;padding:5px 7px 5px 5px;border-radius:2px; border:1px solid var(--line,#E1E0D8);background:var(--panel,#FFFFFF)} .tts__btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans,sans-serif);font-size:.8rem;font-weight:600;cursor:pointer; border:1px solid var(--ink,#16181C);border-radius:2px;padding:7px 14px;background:var(--ink,#16181C);color:var(--paper,#F6F5F1);transition:.14s} .tts__btn:hover{background:#000} .tts__btn svg{width:14px;height:14px} .tts__stop,.tts__speed{background:transparent;color:var(--ink-2,#4A4E56);border-color:transparent;padding:7px 10px} .tts__stop:hover,.tts__speed:hover{background:var(--band,#ECEBE4)} .tts__speed{font-family:var(--mono,monospace);font-variant-numeric:tabular-nums;min-width:40px;justify-content:center} .tts__prog{width:84px;height:3px;border-radius:0;background:var(--line,#E1E0D8);overflow:hidden} .tts__prog i{display:block;height:100%;width:0;background:var(--accent,#1B3A5C);transition:width .3s ease} @media (max-width:560px){.tts__prog{width:52px}}