/* assistant.css — the studio's project assistant, dressed for the atelier.
 * Same markup contract and same behaviour as the old widget (assistant.js is
 * untouched); only the surface is new. Palette tokens come from index.html. */

.project-assistant-shell{
  --a-radius:22px;
  --a-line:rgba(43,31,20,.13);
  --a-shadow:0 40px 90px -34px rgba(80,48,12,.55),0 2px 10px -4px rgba(80,48,12,.2);
  position:fixed;right:clamp(14px,2.4vw,28px);bottom:clamp(14px,2.4vw,26px);
  z-index:55;display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  font-family:var(--sans);
  transition:opacity .3s ease,transform .45s var(--ease-out);
}

html[data-site-mode="creative"] body.portfolio-utility-muted .project-assistant-shell[data-open="false"],
html[data-site-mode="creative"] body.project-open .project-assistant-shell[data-open="false"]{
  opacity:0;
  transform:translate3d(0,18px,0);
  pointer-events:none;
}

/* ---------- the call button ----------
 * Resting state is the orb alone. The label is a real grid column held at 0fr,
 * so hover animates it open to whatever width the words actually need — no
 * hardcoded pixel width to fall out of sync with the copy. */
.project-assistant-toggle{
  --spring:cubic-bezier(.22,1.4,.36,1);
  position:relative;display:grid;grid-template-columns:auto minmax(0,0fr);
  align-items:center;column-gap:0;
  max-width:min(330px,calc(100vw - 24px));
  /* no padding at rest: the orb is the whole button, and the ink capsule grows
   * out from behind it on hover rather than ringing it at rest */
  padding:0;border:0;border-radius:99px;
  background:var(--ink);color:var(--plaster);cursor:pointer;text-align:left;
  box-shadow:0 18px 40px -20px rgba(40,22,4,.62);
  transition:grid-template-columns .6s var(--spring),column-gap .6s var(--spring),
             padding .6s var(--spring),transform .45s var(--ease-out),
             box-shadow .45s var(--ease-out),background .3s;
}
.project-assistant-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* a warm light that tracks the pointer across the pill (--mx/--my set in JS) */
.project-assistant-toggle::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(90px circle at var(--mx,50%) var(--my,50%),
             rgba(233,180,92,.17),transparent 72%);
  opacity:0;transition:opacity .45s var(--ease-out)}
/* and one specular sweep that crosses it as it opens */
.project-assistant-toggle::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;overflow:hidden;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.14) 50%,transparent 58%);
  background-size:280% 100%;background-position:180% 0;
  transition:background-position 1.1s var(--ease-out)}

.assistant-toggle-orb{
  position:relative;flex:0 0 auto;display:grid;place-items:center;width:56px;height:56px;
  border-radius:50%;background:linear-gradient(150deg,var(--gold),var(--amber));color:#3a230c;
  transition:transform .6s var(--spring),box-shadow .5s var(--ease-out)}
.assistant-toggle-orb svg{width:21px;height:21px;display:block;grid-area:1/1;
  transition:transform .55s var(--spring),opacity .3s}
.assistant-toggle-orb::after{                    /* one slow golden-hour pulse */
  content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1px solid var(--gold);opacity:0;animation:aPulse 3.6s var(--ease-out) infinite}
@keyframes aPulse{0%{transform:scale(.82);opacity:.55}70%{transform:scale(1.28);opacity:0}100%{opacity:0}}

.assistant-toggle-copy{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden}
.assistant-toggle-title{font-size:13.5px;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.assistant-toggle-subtitle{font-size:11.5px;color:rgba(244,234,219,.62);white-space:nowrap}
.assistant-toggle-title,.assistant-toggle-subtitle{
  opacity:0;transform:translateX(-10px);
  transition:opacity .35s var(--ease-out),transform .55s var(--spring)}

/* hover/focus opens the label — pointer devices only, since a tap should go
 * straight to the panel rather than spending its first press on a reveal */
@media (hover:hover) and (pointer:fine){
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:hover,
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:focus-visible{
    grid-template-columns:auto minmax(0,1fr);column-gap:15px;padding-right:24px;
    transform:translateY(-3px);box-shadow:0 28px 54px -20px rgba(40,22,4,.72)}
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:hover::before,
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:focus-visible::before{opacity:1}
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:hover::after,
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:focus-visible::after{
    background-position:-60% 0}
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:hover .assistant-toggle-orb,
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:focus-visible .assistant-toggle-orb{
    transform:scale(1.06);box-shadow:0 0 0 4px rgba(233,180,92,.16)}
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:hover .icon-open,
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:focus-visible .icon-open{
    transform:rotate(-8deg) scale(1.1)}
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:hover .assistant-toggle-title,
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:hover .assistant-toggle-subtitle,
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:focus-visible .assistant-toggle-title,
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:focus-visible .assistant-toggle-subtitle{
    opacity:1;transform:none}
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:hover .assistant-toggle-title,
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:focus-visible .assistant-toggle-title{
    transition-delay:.12s}
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:hover .assistant-toggle-subtitle,
  .project-assistant-shell[data-open="false"] .project-assistant-toggle:focus-visible .assistant-toggle-subtitle{
    transition-delay:.19s}
}

/* open: the orb spins into a close mark and the panel takes over */
.project-assistant-shell[data-open="true"] .assistant-toggle-orb::after{animation:none}
.project-assistant-shell[data-open="true"] .icon-open{transform:rotate(-90deg) scale(.4);opacity:0}
.project-assistant-shell[data-open="false"] .icon-close{transform:rotate(90deg) scale(.4);opacity:0}

/* ---------- the panel ---------- */
.project-assistant-panel{
  position:absolute;right:0;bottom:calc(100% + 12px);
  display:flex;flex-direction:column;overflow:hidden;
  width:min(468px,calc(100vw - 28px));height:min(690px,calc(100vh - 120px));
  border:1px solid var(--a-line);border-radius:var(--a-radius);
  background:var(--ivory);box-shadow:var(--a-shadow);
  transform-origin:100% 100%;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.96);
  transition:opacity .3s ease,transform .5s var(--ease-out),visibility .5s;
}
.project-assistant-shell[data-open="true"] .project-assistant-panel{
  opacity:1;visibility:visible;transform:none}

/* the panel unfolds out of the orb, then its rows arrive in reading order —
 * a stagger short enough that the composer is ready before the eye gets there */
.project-assistant-panel > *{opacity:0;transform:translateY(12px);
  transition:opacity .4s var(--ease-out),transform .55s var(--ease-out)}
.project-assistant-shell[data-open="true"] .project-assistant-panel > *{opacity:1;transform:none}
.project-assistant-shell[data-open="true"] .assistant-panel-header{transition-delay:.10s}
.project-assistant-shell[data-open="true"] .assistant-suggestions{transition-delay:.17s}
.project-assistant-shell[data-open="true"] .assistant-messages{transition-delay:.23s}
.project-assistant-shell[data-open="true"] .assistant-composer{transition-delay:.29s}

.assistant-panel-header{padding:22px 22px 16px;background:var(--plaster);
  border-bottom:1px solid var(--a-line)}
.assistant-panel-topline{display:flex;align-items:flex-start;gap:14px}
.assistant-eyebrow{font-size: 11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--amber);margin-bottom:7px}
.assistant-panel-title{font-family:var(--serif);font-weight:600;font-size:23px;line-height:1.1;
  color:var(--ink)}
.assistant-panel-subtitle{margin-top:6px;font-size:12.5px;color:var(--ink-soft)}
.assistant-close{margin-left:auto;flex:0 0 auto;display:grid;place-items:center;
  width:32px;height:32px;border:1px solid var(--a-line);border-radius:50%;
  background:none;color:var(--ink);cursor:pointer;
  transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease-out)}
.assistant-close svg{width:13px;height:13px}
.assistant-close:hover{background:var(--amber);border-color:var(--amber);color:#fff;transform:rotate(90deg)}
.assistant-panel-meta{margin-top:14px}
.assistant-status-pill{display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px;border-radius:99px;border:1px solid var(--a-line);background:rgba(255,255,255,.6);
  font-size: 11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.assistant-status-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 0 rgba(196,106,43,.5);animation:aDot 2.4s ease-out infinite}
@keyframes aDot{0%{box-shadow:0 0 0 0 rgba(196,106,43,.45)}70%{box-shadow:0 0 0 7px rgba(196,106,43,0)}100%{box-shadow:0 0 0 0 rgba(196,106,43,0)}}

.assistant-suggestions{display:flex;flex-wrap:wrap;gap:7px;padding:14px 22px;
  border-bottom:1px solid var(--a-line);background:rgba(244,234,219,.35)}
.assistant-chip{border:1px solid var(--a-line);border-radius:99px;background:#fff;
  padding:7px 14px;font:500 12px var(--sans);color:var(--ink-soft);cursor:pointer;
  transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease-out)}
.assistant-chip:hover:not(:disabled){background:var(--ink);border-color:var(--ink);
  color:var(--plaster);transform:translateY(-2px)}
.assistant-chip:disabled{opacity:.45;cursor:default}

/* ---------- transcript ---------- */
.assistant-messages{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:20px 22px;display:flex;flex-direction:column;gap:18px;scrollbar-width:thin;
  scrollbar-color:rgba(43,31,20,.22) transparent}
.assistant-messages::-webkit-scrollbar{width:7px}
.assistant-messages::-webkit-scrollbar-thumb{background:rgba(43,31,20,.2);border-radius:99px}
.assistant-message{display:flex;flex-direction:column;gap:6px;max-width:88%;
  animation:aMsg .5s var(--ease-out) backwards}
@keyframes aMsg{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.assistant-message[data-role="user"]{align-self:flex-end;align-items:flex-end}
.assistant-message-label{font-size: 11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.75}
.assistant-bubble{padding:13px 16px;border-radius:16px;font-size:14.5px;line-height:1.6;
  border:1px solid var(--a-line);background:#fff;color:var(--ink)}
.assistant-message[data-role="user"] .assistant-bubble{
  background:var(--ink);border-color:var(--ink);color:var(--plaster);border-bottom-right-radius:5px}
.assistant-message[data-role="assistant"] .assistant-bubble{border-bottom-left-radius:5px}
.assistant-plain-text{white-space:pre-wrap}
.assistant-rich-text > * + *{margin-top:9px}
.assistant-rich-text ul,.assistant-rich-text ol{padding-left:19px;display:flex;
  flex-direction:column;gap:5px}
.assistant-rich-text h3,.assistant-rich-text h4{font-family:var(--serif);font-size:15px}
.assistant-rich-text a{color:var(--amber);text-decoration:none;
  border-bottom:1px solid rgba(196,106,43,.4)}
.assistant-rich-text a:hover{border-bottom-color:var(--amber)}
.assistant-rich-text code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  background:rgba(43,31,20,.07);padding:1px 5px;border-radius:5px}
.assistant-rich-text pre{background:var(--ink);color:var(--plaster);padding:12px 14px;
  border-radius:11px;overflow-x:auto;font-size:12.5px}
.assistant-rich-text pre code{background:none;padding:0;color:inherit}
.assistant-sources{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.assistant-source-link{font-size:11.5px;text-decoration:none;color:var(--ink-soft);
  border:1px solid var(--a-line);border-radius:99px;padding:5px 11px;
  transition:background .25s,color .25s,border-color .25s}
.assistant-source-link:hover{background:var(--seam);border-color:var(--amber);color:var(--ink)}
.assistant-typing{display:flex;gap:5px;padding:3px 0}
.assistant-typing span{width:6px;height:6px;border-radius:50%;background:var(--amber);
  animation:aType 1.3s ease-in-out infinite}
.assistant-typing span:nth-child(2){animation-delay:.16s}
.assistant-typing span:nth-child(3){animation-delay:.32s}
@keyframes aType{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* ---------- composer ---------- */
.assistant-composer{padding:14px 18px 16px;border-top:1px solid var(--a-line);
  background:var(--plaster)}
.assistant-input-wrap{display:flex;align-items:flex-end;gap:9px;padding:7px 7px 7px 15px;
  border:1px solid var(--a-line);border-radius:20px;background:#fff;
  transition:border-color .25s,box-shadow .25s}
.assistant-input-wrap:focus-within{border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(196,106,43,.12)}
.assistant-input{flex:1 1 auto;min-height:34px;max-height:160px;border:0;background:none;
  resize:none;font:400 14.5px/1.5 var(--sans);color:var(--ink);padding:7px 0}
.assistant-input:focus{outline:none}
.assistant-input::placeholder{color:rgba(43,31,20,.42)}
.assistant-send{flex:0 0 auto;display:grid;place-items:center;width:36px;height:36px;
  border:0;border-radius:50%;background:var(--ink);color:var(--plaster);cursor:pointer;
  transition:background .25s,transform .25s var(--ease-out)}
.assistant-send svg{width:15px;height:15px}
.assistant-send:hover:not(:disabled){background:var(--amber);transform:translateY(-2px)}
.assistant-send:disabled{opacity:.4;cursor:default}
.assistant-meta{display:flex;justify-content:space-between;gap:12px;margin-top:9px;
  padding:0 4px}
.assistant-disclaimer{font-size: 11px;color:var(--ink-soft);opacity:.8}
.assistant-counter[data-state="warning"]{color:var(--amber);opacity:1}
.assistant-counter[data-state="limit"]{color:#a8341f;opacity:1}

.assistant-resize-handle{position:absolute;top:0;left:0;width:20px;height:20px;
  border:0;background:none;cursor:nwse-resize;opacity:0;transition:opacity .25s}
.assistant-resize-handle::before{content:"";position:absolute;top:9px;left:9px;
  width:9px;height:9px;border-top:2px solid var(--seam);border-left:2px solid var(--seam);
  border-radius:2px 0 0 0}
.project-assistant-panel:hover .assistant-resize-handle{opacity:.75}
body.assistant-resizing{user-select:none;cursor:nwse-resize}

.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}

@media (max-width:767px){
  .project-assistant-shell{right:12px;bottom:12px}
  .project-assistant-shell.is-contact-obscured[data-open="false"]{
    opacity:0;transform:translate3d(0,22px,0);pointer-events:none
  }
  .project-assistant-panel{position:fixed;inset:10px 10px 74px;width:auto;height:auto}
  .assistant-resize-handle{display:none}
}

@media (prefers-reduced-motion:reduce){
  .project-assistant-toggle,.project-assistant-panel,.project-assistant-panel > *,
  .assistant-chip,.assistant-send,.assistant-close,.assistant-toggle-orb,
  .assistant-toggle-orb svg,.assistant-toggle-title,.assistant-toggle-subtitle{
    transition-duration:.01ms}
  .project-assistant-toggle::after{transition:none}
  .assistant-toggle-orb::after,.assistant-status-dot,.assistant-typing span{animation:none}
  .assistant-message{animation:none}
}