/* ============================================================================
   DOCUMENT360 - AI SEARCH DOCK (standalone module, both themes in one file)
   ----------------------------------------------------------------------------
   DEFAULT  white dock — every page that loads this file
   /ai      black dock — WordPress puts .page-template-ai-tpl on <body>, and
            one override block below re-points the tokens to the original
            dark values

   Every colour the two themes disagree on is a custom property declared on
   .dock itself, so the dark theme is a single token block rather than a second
   copy of the rules. Nothing is declared on :root: the /ai page's inline
   <style> owns :root and defines --tx, --line, --ai and friends for the whole
   page, so writing there would leak the dock's palette into the page (and be
   overwritten by it). Tokens on .dock sit closer to the dock than :root does,
   so they win inside it and are invisible outside it.

   Layout, geometry and motion are declared once and shared.

   Pair with:  /js/ai-search-dock.js
               /template-parts/ai-search-dock.php
   ========================================================================= */

/* ------------------------------------------------------- tokens: LIGHT --- */
.dock{
  /* brand — identical in both themes */
  --p200:#ddc9ff; --p300:#c4a5ff; --p400:#a876ff; --p500:#904dff;
  --p600:#7433d9; --p700:#5a22a8;
  --ai:linear-gradient(100deg,var(--p600) 0%,var(--p500) 46%,var(--p400) 100%);

  /* geometry and easing — identical in both themes */
  --r-sm:14px; --r-lg:28px; --r-pill:999px;
  --gut:clamp(20px,5vw,44px);
  --ease:cubic-bezier(.22,.7,.24,1);

  /* ink */
  --tx:#0b0918;
  --tx-2:#3d3856;
  --tx-3:#5d5775;
  /* .6 rather than the dark theme's .34: the faint meta labels ("Sources",
     "Try asking", the footer note) are 11-11.6px, and on white anything
     lighter than this drops under a 4.5:1 ratio. */
  --tx-4:rgba(11,9,24,.6);

  /* accents. --p400 is a highlight tuned for a black ground and fails
     contrast on white, so the light theme steps down two stops. */
  --ac:var(--p600);
  --ac-2:var(--p700);
  --ac-soft:var(--p500);

  /* hairlines */
  --line:rgba(11,9,24,.09);
  --line-2:rgba(11,9,24,.14);

  /* answer panel. brightness() is absent here on purpose — in the dark theme
     it pushes the surface toward black, which would grey out white glass. */
  --panel-bg:rgba(255,255,255,.93);
  --panel-br:rgba(11,9,24,.10);
  --panel-fx:blur(30px) saturate(180%);
  --panel-sh:0 34px 80px -30px rgba(17,24,39,.30),inset 0 1px 0 rgba(255,255,255,.9);
  --head-br:rgba(11,9,24,.08);
  --head-grad:linear-gradient(180deg,rgba(11,9,24,.035),rgba(11,9,24,0));

  --close-bg:linear-gradient(160deg,rgba(255,255,255,.9),rgba(11,9,24,.03));
  --close-br:rgba(11,9,24,.12);
  --close-bg-h:rgba(11,9,24,.07);
  --close-br-h:rgba(11,9,24,.22);

  /* inline surfaces inside the answer body */
  --surf-1:rgba(144,77,255,.10);   /* code */
  --surf-2:rgba(11,9,24,.04);      /* pre, th */

  --cite-bg:rgba(144,77,255,.08);
  --cite-br:rgba(144,77,255,.30);
  --cite-bg-h:rgba(144,77,255,.16);
  --cite-br-h:rgba(144,77,255,.5);

  --sug-bg:rgba(11,9,24,.025);
  --sug-br:var(--line-2);
  --sug-bg-h:rgba(144,77,255,.10);
  --sug-tx-h:var(--p700);

  --more-tx:var(--p700);
  --more-sh-h:0 10px 26px -10px rgba(144,77,255,.55);

  /* the opaque fill behind a gradient border-box rim */
  --fill:#ffffff;
  --form-sh:0 22px 54px -22px rgba(17,24,39,.32),0 0 30px -8px rgba(144,77,255,.35);
  --form-sh-f:0 26px 60px -22px rgba(17,24,39,.34),0 0 38px -8px rgba(144,77,255,.5);
  --ph:rgba(11,9,24,.45);

  --wrap-bg:rgba(11,9,24,.08);
  --wrap-sh:0 22px 54px -22px rgba(17,24,39,.28),0 0 26px -10px rgba(144,77,255,.20);
  --wrap-sh-f:0 26px 60px -22px rgba(17,24,39,.30),0 0 38px -8px rgba(144,77,255,.42);

  /* the Eddy key. A white circle on a white pill disappears, so the light
     theme gives it a lavender fill and a purple rim. */
  --key-bg:linear-gradient(160deg,#f4ecff,#e7d9ff);
  --key-sh1:0 6px 18px -6px rgba(90,34,168,.35);
  --key-sh2:0 0 0 1px rgba(144,77,255,.35);
  --key-sh-h:0 10px 26px -8px rgba(144,77,255,.55),0 0 0 1px rgba(144,77,255,.6);
  --key-ring:rgba(144,77,255,.5);
  --key-ring-0:rgba(144,77,255,0);

  /* #ffcbbd on white is unreadable, so the light error state darkens
     instead of lightening */
  --err-br:rgba(214,64,0,.26);
  --err-bg:rgba(255,106,77,.10);
  --err-tx:#8a2c12;
  --err-ic:#d64000;

  --sb-track:rgba(11,9,24,.06);
  --sb-thumb:rgba(144,77,255,.45);
  --sb-thumb-h:rgba(144,77,255,.75);
  --sb-ff:rgba(144,77,255,.45);
}

/* -------------------------------------------------------- tokens: DARK ---
   /ai only. Values are the originals from the AI page template, unchanged. */
.page-template-ai-tpl .dock{
  --tx:#ffffff;
  --tx-2:#b4b4c2;
  --tx-3:#898999;
  --tx-4:rgba(255,255,255,.34);

  --ac:var(--p400);
  --ac-2:var(--p200);
  --ac-soft:var(--p300);

  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.15);

  /* neutral black — a coloured tint here reads as a gradient once the
     backdrop shows through; low saturate + brightness keep it black over
     whatever scrolls behind */
  --panel-bg:rgba(0,0,0,.88);
  --panel-br:rgba(255,255,255,.14);
  --panel-fx:blur(30px) saturate(100%) brightness(.4);
  --panel-sh:0 34px 80px -30px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.14);
  --head-br:rgba(255,255,255,.1);
  --head-grad:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,0));

  --close-bg:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  --close-br:rgba(255,255,255,.16);
  --close-bg-h:rgba(255,255,255,.16);
  --close-br-h:rgba(255,255,255,.3);

  --surf-1:rgba(255,255,255,.07);
  --surf-2:rgba(255,255,255,.05);

  --cite-bg:rgba(144,77,255,.1);
  --cite-br:rgba(144,77,255,.32);
  --cite-bg-h:rgba(144,77,255,.2);
  --cite-br-h:rgba(144,77,255,.5);

  --sug-bg:rgba(255,255,255,.035);
  --sug-br:var(--line);
  --sug-bg-h:rgba(144,77,255,.12);
  --sug-tx-h:#fff;

  --more-tx:#fff;
  --more-sh-h:0 10px 26px -10px rgba(144,77,255,.85);

  --fill:#050507;
  --form-sh:0 22px 54px -22px rgba(0,0,0,.94),0 0 30px -8px rgba(144,77,255,.45);
  --form-sh-f:inset 0 1px 0 rgba(255,255,255,.22);
  --ph:#c5c5c5a3;

  --wrap-bg:rgba(255,255,255,.1);
  --wrap-sh:0 22px 54px -22px rgba(0,0,0,.92),0 0 26px -10px rgba(144,77,255,.24);
  --wrap-sh-f:0 26px 60px -22px rgba(0,0,0,.92),0 0 38px -8px rgba(144,77,255,.5);

  --key-bg:#fff;
  --key-sh1:0 6px 18px -6px rgba(0,0,0,.7);
  --key-sh2:0 0 0 1px rgba(255,255,255,.5);
  --key-sh-h:0 10px 26px -8px rgba(144,77,255,.7),0 0 0 1px #fff;
  --key-ring:rgba(144,77,255,.55);

  --err-br:rgba(255,106,77,.3);
  --err-bg:rgba(255,106,77,.08);
  --err-tx:#ffcbbd;
  --err-ic:#ff6a4d;

  --sb-track:rgba(255,255,255,.06);
  --sb-thumb:rgba(144,77,255,.5);
  --sb-thumb-h:rgba(144,77,255,.8);
  --sb-ff:#413d3e;
}

/* --------------------------------------------------------------- helpers -- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.dai-eddy{position:relative;display:inline-grid;place-items:center;flex:0 0 auto}
.dai-eddy img{width:100%;height:auto}
.dai-eddy--xs{width:22px}

/* keyframes the dock borrows from the page ------------------------------- */
@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes typing{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-.14em)}}
@keyframes eddyHover{
  0%,100%{transform:translateY(5px)}
  50%{transform:translateY(-7px)}
}

/* Scroll bar */
/* scrollbar inside the AI answer panel */
#aiSearchPanel,
#aiSearchBody {
  scrollbar-width: thin;
  scrollbar-color: var(--sb-ff) var(--sb-track);
}

#aiSearchPanel::-webkit-scrollbar,
#aiSearchBody::-webkit-scrollbar {
  width: 4px;
}

#aiSearchPanel::-webkit-scrollbar-track,
#aiSearchBody::-webkit-scrollbar-track {
  background: var(--sb-track);
  border-radius: 99px;
}

#aiSearchPanel::-webkit-scrollbar-thumb,
#aiSearchBody::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 99px;
}

#aiSearchPanel::-webkit-scrollbar-thumb:hover,
#aiSearchBody::-webkit-scrollbar-thumb:hover {
  background: var(--sb-thumb-h);
}

/* ----------------------------------------------------- AI search dock ----- */
/* Reveal is handled entirely in JS (one scroll notch, every page). This file
   only ever parks the dock and lifts it on .is-on, so nothing flashes before
   the first apply().                                                        */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  padding:0 var(--gut) clamp(16px,2.6vw,26px);pointer-events:none;
  opacity:0;transform:translateY(140%);
  transition:opacity .45s var(--ease),transform .6s var(--ease);
}
.dock.is-on{opacity:1;transform:none}
.dock__in{width:100%;max-width:600px;margin-inline:auto;pointer-events:none}
.dock.is-on .dock__in{pointer-events:auto}
/* ---------------------------------------------------- answer panel -------
   Apple-style glass: a translucent fill over a heavy backdrop blur with
   saturation lifted, a hairline rim, and an inset top highlight so the edge
   catches light. Alpha stays high enough that answer text keeps its contrast
   over whatever scrolls behind.                                            */
.dock__panel{
  display:none;margin-bottom:12px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--panel-br);
  background:var(--panel-bg);
  backdrop-filter:var(--panel-fx);
  -webkit-backdrop-filter:var(--panel-fx);
  box-shadow:var(--panel-sh);
  animation:panelIn .35s var(--ease);
}
.dock__panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 16px;border-bottom:1px solid var(--head-br);
  background:var(--head-grad);
  font-size:12.4px;font-weight:600;color:var(--tx-2);
}
.dock__panel-head > span{display:inline-flex;align-items:center;gap:5px}
.dock__close{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--close-br);color:var(--tx-3);
  background:var(--close-bg);
  backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.dock__close:hover{background:var(--close-bg-h);border-color:var(--close-br-h);color:var(--tx)}
.dock__close svg{width:13px;height:13px}
.dock__body{padding:18px;max-height:min(52vh,440px);overflow-y:auto}

.ans-q{display:flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:600;color:var(--tx-2)!important;}
.ans-q svg{width:14px;height:14px;color:var(--ac);flex:0 0 auto;margin-top:2px}

/* ask-eddy has been observed taking ~18s, so the wait is a designed state */
.ans-load{display:flex;align-items:center;gap:12px;padding:6px 0}
.ans-load__dots{display:inline-flex;gap:5px}
.ans-load__dots i{width:7px;height:7px;border-radius:50%;background:var(--ac);animation:typing 1.3s ease-in-out infinite}
.ans-load__dots i:nth-child(2){animation-delay:.18s}
.ans-load__dots i:nth-child(3){animation-delay:.36s}
.ans-load__txt{font-size:13.4px;color:var(--tx-3)}

/* the API returns rendered HTML - these style whatever it sends back */
.ans-body{font-size:14px;line-height:1.65;color:var(--tx-2)}
.ans-body p:last-child{margin-bottom:0}
.ans-body strong,.ans-body b{color:var(--tx);font-weight:600}
.ans-body ol,.ans-body ul{margin:0 0 12px;padding-left:20px}
.ans-body li{margin-bottom:7px;    list-style: auto;}
.ans-body li::marker{color:var(--ac)}
.ans-body a{color:var(--ac);text-decoration:underline;text-underline-offset:2px}
.ans-body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  padding:2px 6px;border-radius:6px;background:var(--surf-1);color:var(--ac-2);
}
.ans-body pre{
  margin:0 0 12px;padding:12px 14px;border-radius:var(--r-sm);overflow-x:auto;
  background:var(--surf-2);border:1px solid var(--line);
}
.ans-body h3,.ans-body h4,.ans-body h5,.ans-body h6{
  font-size:15px;font-weight:600;color:var(--tx);margin:16px 0 8px;letter-spacing:-.015em;
}
.ans-body table{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:13.4px}
.ans-body th,.ans-body td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.ans-body th{background:var(--surf-2);color:var(--tx);font-weight:600}

.ans-cites{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.ans-cites__label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-4);}
.ans-cites__list{display:flex;flex-wrap:wrap;gap:8px}
.ans-cite{
  display:inline-flex;align-items:center;gap:5px;max-width:100%;
  padding:3px 10px;border-radius:var(--r-pill);
  border:1px solid var(--cite-br);background:var(--cite-bg);
  font-size:12px;font-weight:600;color:var(--ac-2)!important;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.ans-cite:hover{background:var(--cite-bg-h);border-color:var(--cite-br-h)}
.ans-cite svg{width:15px;height:15px;flex:0 0 auto}
.ans-cite span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ans-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.ans-note{font-size:11.6px;color:var(--tx-4)!important}
.ans-more{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:var(--r-pill);
  border:1px solid transparent;
  background:linear-gradient(var(--fill),var(--fill)) padding-box,var(--ai) border-box;
  font-size:12.4px;font-weight:600;color:var(--more-tx);white-space:nowrap;
  transition:box-shadow .3s var(--ease),transform .3s var(--ease);
}
.ans-more:hover{transform:translateY(-1px);box-shadow:var(--more-sh-h)}
.ans-more svg{width:13px;height:13px;color:var(--ac-soft);flex:0 0 auto}

.ans-err{
  display:flex;align-items:flex-start;gap:10px;
  padding:13px 15px;border-radius:var(--r-sm);
  border:1px solid var(--err-br);background:var(--err-bg);
  font-size:13.4px;line-height:1.55;color:var(--err-tx);
}
.ans-err svg{width:15px;height:15px;flex:0 0 auto;color:var(--err-ic);margin-top:1px}

.ans-sugs{display:flex;flex-wrap:wrap;gap:8px}
.ans-sug-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-4);}
.sug{
  padding:2px 14px;border-radius:var(--r-pill);
  border:1px solid var(--sug-br);background:var(--sug-bg);
  font-size:12.4px;font-weight:500;color:var(--tx-2);
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.sug:hover{border-color:rgba(144,77,255,.42);background:var(--sug-bg-h);color:var(--sug-tx-h)}

/* Motion-path border: a glowing orb travels the perimeter. The wrapper is
   unused by the current markup (the form is a direct child of .dock__in) but
   is kept so the rules stay available. */
.dock__form-wrap{
  position:relative;overflow:hidden;border-radius:var(--r-pill);padding:2px;
  background:var(--wrap-bg);
  box-shadow:var(--wrap-sh);
  transition:box-shadow .35s var(--ease);
}
.dock__form-wrap:focus-within{
  box-shadow:var(--wrap-sh-f);
}
.dock__border-orb{
  position:absolute;width:160px;height:160px;z-index:10;pointer-events:none;
  offset-path:rect(0px auto 100% auto);
  offset-anchor:50% 50%;
  animation:dockOrbTravel 8s linear infinite;
}
.dock__border-orb::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at center,#fff 0%,#d4b8ff 8%,#904dff 28%,rgba(232,0,108,.8) 50%,transparent 72%);
  rotate:45deg;
  filter:blur(8px);
}
@keyframes dockOrbTravel{0%{offset-distance:0%}100%{offset-distance:100%}}
/* The padding-box layer carries the theme fill; the border-box gradient is
   the brand rim and is identical in both themes. */
.dock__form{
  display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 8px 8px 8px 20px;
    border-radius: var(--r-pill);
    border: 2px solid transparent;
    background: linear-gradient(var(--fill), var(--fill)) padding-box, /* brand purple to magenta, brightest at the left and dimming toward the button. No cyan/teal - that was never in the reference. */ linear-gradient(112deg, #c07bff 0%, #e8006c 20%, #a259ff 42%, #7433d9 64%, #a259ff 85%, #e8006c 100%) border-box;
    box-shadow: var(--form-sh);
    transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.dock__form:focus-within{
  box-shadow:var(--form-sh-f);
}
.dock__form > svg{width:17px;height:17px;color:var(--tx-3);flex:0 0 auto}
.dock__form input{
  flex:1;min-width:0;border:0;background:none;color:var(--tx);
  font:inherit;font-size:15px;
}
.dock__form input::placeholder{color:var(--ph);}
.dock__form input:focus{outline:none;border: 0 !important;}
.dock__form input:disabled{opacity:.6}
/* the Eddy key - submits the question; long-press target for the full chat */
/* no overflow:hidden - it clipped the mascot the moment it moved, which is
   what made the drift look like it was barely happening */
.dock__submit{
  width:35px;height:35px;flex:0 0 auto;border-radius:50%;
  display:grid;place-items:center;
  background:var(--cite-bg-h);box-shadow:var(--key-sh1),var(--key-sh2);
 border: 2px solid #8d11f300;
 
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.page-template-ai-tpl .dock__submit{
 background:var(--key-bg);box-shadow:var(--key-sh1),var(--key-sh2);
 border: 2px solid #8d11f300;
}
.dock__submit:hover{transform:scale(1.07);box-shadow:var(--key-sh-h)}
.dock__submit:disabled{opacity:.8;transform:none;cursor:default}

/* --- Eddy, the octopus ---------------------------------------------------
   Three states, ordered so each overrides the one above:
     idle   slow drift with a lazy tilt, as if floating
     hover  a quick, livelier wiggle
     busy   squash-and-stretch, which reads as swimming, plus a ripple ring
   transform-origin sits low so the tilt pivots around the head rather than
   the middle of the box.                                                   */
.dock__submit img{
  width:50%;height:auto;                     /* room to move inside the circle */
  transform-origin:50% 40%;
  animation: eddyHover 7.5s ease-in-out infinite;
  will-change:transform;
}

/* Hover just accelerates the same path rather than switching to a separate
   wiggle - swapping keyframes mid-motion is what made it look jittery. */
.dock__submit:hover img{animation-duration:1.9s}

.dock__submit.is-busy img{animation:eddySwim 1.1s ease-in-out infinite}
@keyframes eddySwim{
  0%,100%{transform:translate(0,0)       scale(1,1)}
  40%    {transform:translate(-2px,-3px) scale(.92,1.12)}
  70%    {transform:translate(2px,2.5px) scale(1.08,.9)}
}
/* One keyframe set for both themes: the ring and the resting shadow come in
   as custom properties, which resolve per element rather than per keyframe. */
.dock__submit.is-busy{animation:eddyRing 1.5s ease-out infinite}
@keyframes eddyRing{
  0%  {box-shadow:0 0 0 0    var(--key-ring),  var(--key-sh1),var(--key-sh2)}
  70% {box-shadow:0 0 0 11px var(--key-ring-0),var(--key-sh1),var(--key-sh2)}
  100%{box-shadow:0 0 0 0    var(--key-ring-0),var(--key-sh1),var(--key-sh2)}
}

/* ------------------------------------------------- Document360 Eddy widget --
   The widget mounts its own 50x50 launcher bubble at bottom-right. The page
   keeps exactly one AI entry point - the dock - so the bubble is parked
   off-screen rather than display:none'd: the iframe has to stay rendered for
   its internal #doc360-button to remain clickable, which is how we open it.
   Colour-free, so it is shared by both themes and sits outside .dock.       */
#document360-widget-iframe{
  left:-9999px!important;right:auto!important;bottom:0!important;
  opacity:0!important;pointer-events:none!important;
}

/* ============================================================ responsive == */
@media (max-width: 1120px) {
    .dock {
        bottom: 60px;
    }
}
@media (max-width:760px){
  .dock__form{padding-left:16px;gap:8px}
  .dock__form > svg{display:none}
}

@media (prefers-reduced-motion:reduce){
  .dock,.dock *,.dock *::before,.dock *::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}
