/* 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}
/* the typeahead list (home) sits under the field */
.askbar .search-suggest{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40}

/* 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)}

@media (prefers-reduced-motion:reduce){.askbar.is-thinking .askbar-glyph .wave{animation:none}.askbar-btn svg{transition:none}}
@media (max-width:640px){.askbar-btn{padding:0 14px}.askbar-btn span{display:none}.askbar-field{padding-left:12px}}