/* ask-bar.css — GCMD Library Intelligent Search (Ramy 2026-09-07). ONE bar shared by the library home, every collection page and every content page: same markup (.askbar), same suggested-questions row, same follow-up dock and "Continue chatting" button. Round 2 (Ramy): the field itself must read as a field (a real border), no "AI" wording, no sparkle icon, no gradient "Ask" pill, no coloured side rail on answer cards. The identity is the lens- with-waveform glyph and the ink search button; the only motion is the waveform "listening" while an answer is being composed. */ :root{ --ask-ink:#1C1917; --ask-ink2:#292524; --ask-mute:#78716C; --ask-line:#E7E5E4; --ask-edge:#C9C4BF; --ask-soft:#F5F5F4; --ask-accent:#4F46E5; --ask-accent-soft:#EEF2FF; } /* Proposal A (Ramy 2026-09-08): ONE field, ONE accent. No card frame — the field is the object, and its own border is the purple gradient ("makes you feel there will be intelligent answers"). Three sizes (16 / 13 / 12), two weights (400 / 600), no uppercase. */ :root{--ask-g1:#4F46E5;--ask-g2:#7C3AED;--ask-g3:#A855F7;--ask-g4:#6366F1; --ask-grad:linear-gradient(120deg,var(--ask-g1),var(--ask-g2) 45%,var(--ask-g3) 80%,var(--ask-g4)); --ask-accent-hover:#4338CA} .askbar{position:relative;padding:0;border:0;background:none;box-shadow:none} .askbar-in,.askbar .search-bar,.site-header .askbar .search-bar,.home-hero .askbar .search-bar{display:block;width:100%;max-width:none;margin:0} .askbar-field{display:flex;align-items:center;gap:12px;padding:6px 6px 6px 16px;border:1.5px solid transparent;border-radius:14px; background:linear-gradient(#fff,#fff) padding-box,var(--ask-grad) border-box; box-shadow:0 1px 2px rgba(28,25,23,.04),0 14px 34px -24px rgba(79,70,229,.45);transition:box-shadow .15s} .askbar-field:focus-within{box-shadow:0 0 0 4px rgba(79,70,229,.12),0 16px 36px -22px rgba(79,70,229,.55)} .askbar-icon{flex:none;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:var(--ask-accent)} .askbar-icon svg{width:20px;height:20px} .askbar-in input,.askbar-in .search-input, .home-hero .askbar .search-bar .search-input,.site-header .home-hero .askbar .search-bar .search-input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--ask-ink);padding:12px 0;height:auto;box-shadow:none;border-radius:0} /* ↑ the hero selectors out-rank the design bundle's .home-hero .search-bar .search-input (text-lg) rule */ .askbar-in input::placeholder,.askbar-in .search-input::placeholder{color:var(--ask-mute)} .askbar-in input::-webkit-search-cancel-button{-webkit-appearance:none} /* the button: brand violet, inside the field */ .askbar-btn{flex:none;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:0 18px;height:44px;min-height:0; background:var(--ask-accent);color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .12s} .askbar-btn:hover{background:var(--ask-accent-hover)} .askbar-btn:focus-visible{outline:2px solid var(--ask-accent);outline-offset:2px} .askbar-btn svg{width:16px;height:16px;transition:transform .15s} .askbar-btn:hover svg{transform:translateX(3px)} /* waveform "listening" while an answer is composed */ .askbar-glyph .wave{transform-box:fill-box;transform-origin:center} .askbar.is-thinking .askbar-glyph .wave{animation:askwave .9s ease-in-out infinite} .askbar.is-thinking .askbar-glyph .w2{animation-delay:.15s} .askbar.is-thinking .askbar-glyph .w3{animation-delay:.3s} @keyframes askwave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1.35)}} /* suggested questions: plain text links — they support the field, they never compete with it */ .askbar-starters{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:12px 6px 0;font-size:13px} .askbar-starters .try{font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ask-mute);margin:0} .askbar-starter{border:0;border-bottom:1px solid var(--ask-line);border-radius:0;padding:0 0 1px;font:inherit;font-size:13px;color:var(--ask-ink2);background:none;cursor:pointer;text-decoration:none;transition:color .12s,border-color .12s} .askbar-starter:hover{color:var(--ask-accent);border-color:var(--ask-accent);background:none} /* one note line: the Intelligent Search mark, the promise, the disclaimer */ .askbar-note{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:10px 6px 0;font-size:12px;color:var(--ask-mute);line-height:1.5} .askbar-note b{color:var(--ask-ink2);font-weight:600} .askbar-mark{display:inline-flex;align-items:center;gap:6px;color:var(--ask-accent);font-weight:600} .askbar-mark svg{width:14px;height:14px} .askbar-note a{margin-left:auto;color:var(--ask-accent);font-weight:600;text-decoration:none} /* one "Continue chatting" button everywhere */ .contchat button,.lac-contbtn{border:1.5px solid var(--ask-ink);border-radius:999px;padding:7px 15px;font:inherit;font-size:12.5px;font-weight:700; color:var(--ask-ink);background:#fff;cursor:pointer;transition:background .12s,color .12s} .contchat button:hover,.lac-contbtn:hover{background:var(--ask-ink);color:#fff} /* one follow-up dock everywhere (collection .chatdock / library .ldock) */ .chatdock,.ldock{width:420px;border-left:0;box-shadow:-12px 0 40px rgba(28,25,23,.18)} .cd-head,.ld-head{background:var(--ask-ink);color:#fff;border-bottom:0;padding:14px 16px} .cd-head b,.ld-head b{font-size:14px;color:#fff} .cd-head .cd-sub,.ld-head .ld-sub{color:#D6D3D1;font-size:11px} .cd-head button,.ld-head button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;font-size:12.5px;padding:4px 12px;font-family:inherit;cursor:pointer} .cd-head button:hover,.ld-head button:hover{background:rgba(255,255,255,.24)} .cd-msg.u,.ld-msg.u{background:var(--ask-ink);color:#fff} .cd-sugg button,.ld-sugg button{border:1px solid var(--ask-edge);color:var(--ask-ink2);font-family:inherit;background:#fff} .cd-sugg button:hover,.ld-sugg button:hover{border-color:var(--ask-ink);background:var(--ask-soft)} .cd-foot input,.ld-foot input{border:1.5px solid var(--ask-edge);border-radius:12px;padding:9px 14px} .cd-foot input:focus,.ld-foot input:focus{border-color:var(--ask-ink);outline:0} .cd-foot button,.ld-foot button{border-radius:12px;background:var(--ask-ink)} /* ── Reading Room, site-wide (PLAN-DESIGN-ROLLOUT-2026-09 Layer 2) ────── Under the flag the bar's private palette resolves to the Reading Room: ink field border instead of the violet gradient, the accent pill for the button, paper grounds instead of white. This is the INLINE size (the collection, content and search pages); the homepage hero keeps its own 80px version in pages/home-rr.css, whose `.rr .askbar` selectors out-rank these. Flag off, none of this matches. */ html.rr-theme{ --ask-ink:var(--rr-ink);--ask-ink2:var(--rr-ink-2);--ask-mute:var(--rr-ink-3);--ask-line:var(--rr-rule-soft); --ask-edge:var(--rr-rule-strong);--ask-soft:var(--rr-paper-sunken);--ask-accent:var(--rr-accent); --ask-accent-soft:var(--color-primary-light);--ask-accent-hover:var(--rr-ink);--ask-grad:none} html.rr-theme .askbar-field{border:1.5px solid var(--rr-ink);border-radius:var(--rr-radius-pill);background:var(--rr-paper-raised);box-shadow:none;padding:4px 4px 4px 18px} html.rr-theme .askbar-field:focus-within{box-shadow:var(--shadow-focus)} /* Intelligent Search, named inside the field on its left (Ramy 2026-10-03: "put it inside the search input field … color it to be vibrant in this library-style faded colors page"). The page's one vivid thing: the brand violet gradient (its --ask-g* stops are not remapped here) as a pill, glyph and words in paper. The words are drawn by CSS so every bar gets them without touching the templates; the note line below drops its mark (answer-card.js). */ html.rr-theme .askbar-icon{width:auto;height:auto;gap:6px;padding:7px 13px 7px 10px;border-radius:var(--rr-radius-pill); background:linear-gradient(120deg,var(--ask-g1),var(--ask-g2) 55%,var(--ask-g3));color:var(--rr-on-vivid); font-family:var(--rr-font-body);font-size:13px;font-weight:600;line-height:1;white-space:nowrap;letter-spacing:.01em} html.rr-theme .askbar-icon::after{content:"Intelligent Search"} /* the collection and item pages repaint .askbar-icon in ink from their own