/* Ask me anything — the in-page chat panel (CHOSEN Oct 4: "side panel"; replaces the retired cole-sax-agent.html page).
   It speaks the menu's language: a white card, 10px radius, the menu card's shadow, Aeonik uppercase for titles, the header
   pills for chips, Think Less blue for the one live accent. It slides in from the right over a dimmed page; on phones it is a
   full-height sheet. Layout and design only for now — the answers come from the written knowledge base until the AI version. */
#ask{position:fixed;inset:0;z-index:120;pointer-events:none;visibility:hidden}
#ask.open{pointer-events:auto;visibility:visible}
#ask.under{z-index:80}   /* "Play film" from a card: the player (z 90) opens over the panel, which slides out beneath it */
#ask .ask-dim{position:absolute;inset:0;background:rgba(10,10,10,.28);opacity:0}
#ask .ask-panel{position:absolute;top:12px;right:12px;bottom:12px;width:min(470px,calc(100vw - 24px));display:flex;flex-direction:column;
  border-radius:10px;background:#fff;color:var(--ink);box-shadow:0 30px 70px -30px rgba(10,10,10,.45);overflow:hidden;
  font-family:var(--aeonik);-webkit-font-smoothing:antialiased}

/* head: the particle portrait (head and shoulders, right), the line (bottom left), New chat + close (top right) */
#ask .ask-head{position:relative;flex:none;height:178px;border-bottom:1px solid rgba(10,10,10,.08);background:var(--ground);overflow:hidden}
#ask .ask-face{position:absolute;inset:0;width:100%;height:100%;display:block}
#ask .ask-acts{position:absolute;top:14px;right:14px;display:flex;gap:8px;z-index:1}
#ask .ask-id{position:absolute;left:20px;bottom:18px;max-width:58%}
#ask .ask-id h2{margin:0;font-weight:400;font-size:34px;line-height:.95;text-transform:uppercase;letter-spacing:-.015em}
#ask .ask-id p{margin:10px 0 0;font-size:15px;line-height:1.3;opacity:.6}
#ask .ask-new{display:inline-flex;align-items:center;gap:7px;height:45px;padding:0 16px;border:0;border-radius:999px;background:rgba(241,240,236,.9);color:var(--ink);
  font:500 12px/1 var(--med);text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#ask .ask-new[hidden]{display:none}
#ask .ask-new svg{width:13px;height:13px}
#ask .ask-new:hover{background:var(--ink);color:#fff}
#ask .ask-x{flex:none;width:45px;height:45px;border:0;border-radius:50%;background:var(--pill);color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .3s,color .3s}
#ask .ask-x:hover{background:var(--ink);color:#fff}
#ask .ask-x svg{width:14px;height:14px}

/* thread */
#ask .ask-thread{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:26px 20px 12px;display:flex;flex-direction:column;gap:22px;scrollbar-width:thin}
#ask .msg{max-width:100%}
#ask .msg.me{align-self:flex-end;max-width:82%;padding:12px 16px;border-radius:18px 18px 4px 18px;background:var(--ink);color:#fff;font-size:16px;line-height:1.35}
#ask .msg.cole{align-self:flex-start;font-size:17px;line-height:1.45}
#ask .msg.cole .who{display:block;margin-bottom:8px;font-family:"Roobert Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.45}
#ask .msg.cole p{margin:0 0 .7em}#ask .msg.cole p:last-child{margin-bottom:0}
#ask .msg.cole strong{font-weight:500}
#ask .msg.cole p a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
#ask .msg .w{opacity:0}

/* thinking: three dots in Think Less blue */
#ask .thinking{display:inline-flex;gap:5px;padding:6px 0}
#ask .thinking i{width:7px;height:7px;border-radius:50%;background:var(--fill);animation:askDot 1s infinite ease-in-out}
#ask .thinking i:nth-child(2){animation-delay:.15s}#ask .thinking i:nth-child(3){animation-delay:.3s}
@keyframes askDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}

/* rich answers: work list, contact links */
#ask .ask-work{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
#ask .ask-work a{display:flex;align-items:center;gap:12px;padding:6px;margin:0 -6px;border-radius:8px;text-decoration:none;transition:background .25s}
#ask .ask-work a:hover{background:var(--pill)}
#ask .ask-work img{width:64px;height:40px;border-radius:5px;object-fit:cover;flex:none}
#ask .ask-work .t{flex:1;font-size:16px;line-height:1.2}
#ask .ask-work .c{font-family:"Roobert Mono",ui-monospace,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.04em;opacity:.45;text-align:right}
#ask .ask-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* a project the answer names: its still, title, client · category, Play film (real films only) + View project */
#ask .ask-card{display:flex;flex-direction:column;margin-top:16px;border-radius:10px;overflow:hidden;background:var(--pill)}
#ask .ask-card + .ask-card{margin-top:10px}
#ask .ask-card-img{position:relative;aspect-ratio:16/8;overflow:hidden}
#ask .ask-card-img[data-ask-film]{cursor:pointer}
#ask .ask-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
#ask .ask-card:hover .ask-card-img img{transform:scale(1.04)}
#ask .ask-card-b{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:12px 14px 14px}
#ask .ask-card-b .t{font-size:20px;line-height:1.1;text-transform:uppercase}
#ask .ask-card-b .c{font-family:"Roobert Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.04em;text-transform:uppercase;opacity:.45}
#ask .ask-card-b .ask-links{flex-basis:100%;margin-top:8px}
#ask .ask-card .ask-links a{background:#fff}
#ask .ask-links button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:0;border-radius:999px;font:500 13px/1 var(--med);text-transform:uppercase;cursor:pointer;transition:background .3s}
#ask .ask-links button.primary{background:var(--fill);color:#fff}
#ask .ask-links button.primary:hover{background:var(--ink)}
#ask .ask-links button i{font-style:normal;opacity:.7;font-family:"Roobert Mono",ui-monospace,monospace;font-size:11px}

/* chips: the header pill · starters after the hello, follow-ups after every answer */
#ask .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:-6px}
#ask .chips.fu::before{content:"Ask next";flex-basis:100%;margin-bottom:2px;font-family:"Roobert Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.4}
#ask .chip,#ask .ask-links a{display:inline-flex;align-items:center;height:38px;padding:0 16px;border:0;border-radius:999px;background:var(--pill);color:var(--ink);
  font:500 13px/1 var(--med);text-transform:uppercase;letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background .3s,color .3s}
#ask .chip:hover,#ask .ask-links a:hover{background:var(--ink);color:#fff}
#ask .ask-links a.primary{background:var(--fill);color:#fff}
#ask .ask-links a.primary:hover{background:var(--ink)}
#ask .chip{height:auto;min-height:38px;padding:9px 16px;text-align:left;line-height:1.2}   /* follow-ups can be long: let them wrap */

/* input: the footer's Ask field, in a pill */
#ask .ask-foot{padding:12px 14px 14px;border-top:1px solid rgba(10,10,10,.08)}
#ask .ask-form{position:relative;display:flex;align-items:center;height:56px;border-radius:999px;background:var(--pill)}
#ask .ask-field{flex:1;min-width:0;height:100%;border:0;outline:none;padding:0 8px 0 22px;background:transparent;font:inherit;font-size:17px;color:var(--ink)}
#ask .ask-field::placeholder{color:var(--ink);opacity:.35}
#ask .ask-go{flex:none;width:44px;height:44px;margin-right:6px;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer;display:grid;place-items:center;transition:background .3s,transform .3s}
#ask .ask-go:hover{background:var(--fill)}
#ask .ask-go:disabled{opacity:.25;cursor:default;background:var(--ink)}
#ask .ask-go svg{width:18px;height:18px}
#ask .ask-note{margin:10px 6px 0;font-family:"Roobert Mono",ui-monospace,monospace;font-size:10.5px;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;opacity:.4;text-align:center}

/* the floating pill: bottom right, once you've scrolled; the dot turns blue when there's a conversation to go back to */
#ask-fab{position:fixed;z-index:58;right:var(--gutter,5vw);bottom:clamp(20px,2.4vw,36px);display:inline-flex;align-items:center;gap:10px;height:var(--icon,45px);
  padding:0 20px 0 16px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:500 var(--ui-size,14px)/1 var(--med);text-transform:uppercase;cursor:pointer;
  box-shadow:0 14px 30px -14px rgba(10,10,10,.5);opacity:0;transform:translateY(16px) scale(.92);pointer-events:none;
  transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),background .3s}
#ask-fab.on{opacity:1;transform:none;pointer-events:auto}
#ask-fab:hover{background:var(--fill)}
#ask-fab .fab-dot{width:8px;height:8px;border-radius:50%;background:#fff;transition:background .3s}
#ask-fab.has .fab-dot{background:var(--fill)}
#ask-fab.has:hover .fab-dot{background:#fff}

@media (max-width:1023px){
  body:has(.cats) #ask-fab{bottom:76px}     /* clear of the category pill, which sits at the bottom on phones */
}
@media (max-width:640px){
  #ask .ask-panel{top:0;right:0;bottom:0;left:0;width:auto;border-radius:0}
  #ask .msg.cole{font-size:16px}
  #ask .ask-head{height:160px}
  #ask .ask-id h2{font-size:30px}
  #ask-fab{right:16px;bottom:16px}
  #ask-fab .fab-t{font-size:13px}
}
@media (prefers-reduced-motion:reduce){#ask .thinking i{animation:none;opacity:.6}}