/* Pip's pit lane: desktop only; mobile keeps the existing right-hand chat. */
.racer {
  position:fixed; z-index:42; bottom:18px; left:max(16px,calc((100vw - 1280px)/4 - 155px));
  width:310px; pointer-events:none; transition:opacity .3s,transform .32s;
  font-family:var(--ui); color:var(--text);
}
.racer-panel {
  pointer-events:auto; background:var(--surface); border:1px solid var(--border);
  border-radius:18px 18px 18px 5px; box-shadow:0 18px 60px #0003;
  position:relative; margin-bottom:8px; overflow:hidden;
  animation:pip-panel-in .35s cubic-bezier(.16,1,.3,1) both;
}
.racer-panel::before { content:''; display:block; height:3px; background:linear-gradient(90deg,var(--accent),var(--gold),transparent); }
.racer-head { display:flex; align-items:center; gap:5px; padding:13px 14px 9px; }
.racer-head > div { flex:1; }
.racer-kicker { font-size:8px; letter-spacing:1.7px; font-weight:800; color:var(--accent-hi); text-transform:uppercase; }
.racer-head h2 { font-size:15px; font-weight:800; line-height:1.5; color:var(--text-strong); margin:2px 0 0; }
.racer-icon { width:30px; height:30px; border:1px solid var(--border); border-radius:50%; color:var(--muted); background:var(--surface-2); font-size:19px; cursor:pointer; }
.racer-icon:hover { color:var(--text-strong); border-color:var(--accent); }
.racer-content { padding:4px 16px 9px; overflow-y:auto; max-height:min(360px,calc(100dvh - 365px)); overscroll-behavior:contain; scrollbar-width:thin; }
.racer-content h3 { font-size:14px; color:var(--text-strong); margin:6px 0 9px; font-weight:800; letter-spacing:-.25px; }
.racer-content p { font-size:12px; line-height:1.75; margin:0 0 10px; }
.racer-content .racer-priorities { font-size:10px; color:var(--muted); }
.racer-content a { color:var(--accent-hi); text-underline-offset:3px; }
.racer-tour-link { color:var(--accent-hi); background:var(--accent-soft); font-size:11px; font-weight:700; padding:8px 12px; border:1px solid var(--border); border-radius:7px; cursor:pointer; }
.racer-stale { border-left:2px solid var(--gold); padding-left:10px; color:var(--muted); }
.racer-podium { list-style:none; padding:0; margin:0 0 12px; }
.racer-podium li { display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid var(--border-soft); }
.racer-place { display:grid; place-items:center; flex:none; width:24px; height:28px; background:var(--surface-3); border-radius:5px; font-size:11px; font-weight:800; }
.racer-podium li:first-child .racer-place { background:var(--gold-soft); color:var(--gold); }
.racer-podium button { flex:1; min-width:0; text-align:left; border:0; padding:0; color:var(--text); background:none; cursor:pointer; }
.racer-podium b { font-size:12px; display:block; color:var(--text-strong); }
.racer-podium small { font-size:10px; display:block; color:var(--muted); margin-top:4px; }
.racer-why { font-size:11px; margin:8px 0; }
.racer-why summary { cursor:pointer; color:var(--accent-hi); font-weight:700; }
.racer-why p { margin-top:8px; font-size:11px; }
.racer-form { display:flex; gap:6px; padding:9px 12px 0; border-top:1px solid var(--border-soft); }
.racer-form .sr-only, #racer-drag-help { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.racer-form input { min-width:0; width:100%; border:1px solid var(--border); border-radius:9px; background:var(--surface-2); color:var(--text-strong); padding:10px; font-size:12px; }
.racer-form input::placeholder { color:var(--muted); }
.racer-form button { width:39px; height:39px; flex:none; background:var(--accent); color:var(--on-accent); font-size:21px; border:0; border-radius:9px; cursor:pointer; }
.racer-form button:disabled { opacity:.5; cursor:wait; }
.racer-status { padding:0 14px; margin:8px 0 5px; font-size:9px; line-height:1.55; color:var(--muted); }
.racer-connection { display:flex; align-items:center; gap:5px; padding:0 14px 12px; font-size:9px; color:var(--muted); }
.racer-connection::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--muted); }
.racer-connection[data-state='ready']::before { background:var(--accent); }
.racer-connection[data-state='waking']::before { background:var(--gold); }
.racer-launch { position:relative; pointer-events:auto; display:flex; align-items:end; gap:0; background:transparent; color:var(--text); border:0; padding:0 8px 4px 0; cursor:pointer; min-height:105px; text-align:left; }
.racer-launch img { position:relative; width:86px; height:129px; object-fit:contain; filter:drop-shadow(0 5px 7px #0002); transform-origin:50% 85%; transition:transform .25s; }
.racer-launch:hover img { transform:rotate(-5deg) translateY(-3px); }
.racer-launch, .racer-head { cursor:grab; touch-action:none; user-select:none; }
.racer-dragging, .racer-dragging .racer-launch, .racer-dragging .racer-head { cursor:grabbing; }
.racer-dragging .racer-launch img { animation:none; transform:none; }
.racer-orbit { position:absolute; bottom:4px; left:3px; width:84px; height:15px; border:1px solid var(--accent); border-radius:50%; background:var(--accent-soft); box-shadow:0 0 22px color-mix(in srgb,var(--accent) 15%,transparent); }
.racer-launch-label { display:grid; gap:3px; border:1px solid var(--border); border-radius:9px 9px 9px 1px; background:var(--surface); padding:8px 12px; margin:0 0 12px -5px; box-shadow:var(--shadow); }
.racer-launch-label b { font-size:12px; font-weight:800; color:var(--text-strong); }
.racer-launch-label > span { font-size:10px; color:var(--muted); }
.racer[data-open='true'] .racer-launch-label { opacity:0; }
.racer[data-open='true'] .racer-launch img { width:86px; height:129px; }
.racer-arriving .racer-launch img { animation:pip-arrive .65s cubic-bezier(.16,1,.3,1) both; }
.pip-avatar { display:block; flex:none; position:relative; overflow:hidden; width:34px; height:34px; border-radius:50%; background:var(--accent-soft); border:1px solid var(--border); }
.pip-avatar img { position:absolute; width:37px; height:auto; max-width:none; top:-2px; left:-2px; }
.pip-chat-identity { display:flex; align-items:center; gap:9px; min-width:0; flex:1; }
.pip-chat-identity > div { min-width:0; }
.pip-chat-identity small { display:block; color:var(--muted); font-size:9px; margin-top:3px; }
.chat-head { display:grid; grid-template-columns:minmax(0,1fr) auto; }
.pip-back-to-track { grid-column:1/-1; justify-self:start; display:inline-flex; align-items:center; gap:6px; min-height:32px; padding:6px 10px; border:1px solid var(--border); border-radius:7px; background:var(--accent-soft); color:var(--accent-hi); font-size:11px; font-weight:700; cursor:pointer; }
.pip-back-to-track svg { width:14px; height:14px; }
.pip-back-to-track:hover { border-color:var(--accent); background:var(--surface-3); }
.pip-back-to-track:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
#chat-toggle { position:relative; isolation:isolate; padding:12px 27px 12px 112px; min-height:64px; min-width:260px; max-width:280px; gap:0; border-radius:12px 12px 5px 5px; color:#f4f7ef; background:linear-gradient(135deg,#243541,#101923); border:1px solid #65756d; border-top:3px solid #b9f06b; box-shadow:0 8px 28px #0004; text-align:left; }
#chat-toggle::after { content:''; position:absolute; z-index:-1; bottom:0; left:0; right:0; height:5px; background:repeating-linear-gradient(90deg,#eef5ea 0 8px,#16212b 8px 16px); border-radius:0 0 4px 4px; }
.pit-car { position:absolute; left:-9px; bottom:12px; width:107px; height:38px; filter:drop-shadow(0 4px 3px #0009); }
.pit-car img { width:100%; height:auto; max-width:none; }
.pit-label { display:flex; flex-direction:column; gap:5px; }
.pit-label small { font-size:8px; font-weight:800; letter-spacing:1.3px; color:#b9f06b; }
.pit-label b { font-size:12px; font-weight:700; white-space:nowrap; }
.pit-flag { position:absolute; width:29px; height:34px; right:7px; top:-22px; border-left:2px solid #acb9b5; transform:rotate(8deg); transform-origin:bottom left; }
.pit-flag i { position:absolute; top:0; left:0; width:28px; height:20px; border:1px solid #9ba7a3; background:conic-gradient(#f5f6ed 25%,#15202b 0 50%,#f5f6ed 0 75%,#15202b 0) 0 0/10px 10px; transform-origin:left center; animation:pit-flag-wave 1.6s ease-in-out infinite alternate; }
#chat-toggle .dot { top:9px; right:10px; width:5px; height:5px; }
@keyframes pit-flag-wave { from { transform:perspective(70px) rotateY(-18deg) skewY(-5deg); border-radius:0 4px 2px 0; } to { transform:perspective(70px) rotateY(20deg) skewY(7deg); border-radius:0 1px 6px 0; } }
/* Deliberate cues: a raised flag for new results, a short nod for conversation. */
.racer-signal-flag { left:72px; right:auto; top:13px; width:34px; height:48px; opacity:0; pointer-events:none; transform:rotate(-18deg); }
.racer-signal-flag i { width:34px; height:24px; animation:none; }
.pip-attention .racer-signal-flag { opacity:1; }
.pip-attention .pit-flag { animation:pip-flag-salute .55s ease-in-out 4; }
.pip-attention .pit-flag i { animation:pit-flag-wave .25s ease-in-out 8 alternate; }
.pip-nod .racer-launch img, .pip-nod .pip-avatar img,
.pip-nod .chat-log .msg.assistant:last-child::before { animation:pip-nod .85s ease-in-out; }
@keyframes pip-flag-salute { 0%,100% { transform:rotate(-18deg); } 50% { transform:rotate(26deg); } }
@keyframes pip-nod { 0%,45%,100% { transform:translateY(0) rotate(0); } 22%,68% { transform:translateY(3px) rotate(4deg) scaleY(.97); } }
@media (prefers-reduced-motion:reduce) {
  .pip-attention .pit-flag, .pip-attention .pit-flag i, .pip-nod img,
  .pip-nod .chat-log .msg.assistant:last-child::before { animation:none!important; }
}
.pip-context { padding:8px 16px; border-bottom:1px solid var(--border); font-size:10px; color:var(--muted); background:var(--surface-2); }
.pip-context summary { color:var(--accent-hi); cursor:pointer; font-weight:700; }
.pip-context p { margin:7px 0 0; line-height:1.7; }
.chat-log .msg.assistant { position:relative; margin-left:30px; max-width:calc(100% - 30px); }
.chat-log .msg.assistant::before { content:''; position:absolute; left:-35px; top:3px; width:27px; height:27px; background:var(--accent-soft) url('assets/pip-racer.png') center -2px/30px auto no-repeat; border:1px solid var(--border); border-radius:50%; }
.racer-content .msg { font-size:12px; padding:10px; margin:10px 0 0; }
.racer-content .msg p { margin:0 0 6px; }
.racer-content .msg { overflow-wrap:anywhere; }
.racer-content .msg pre { white-space:pre-wrap; font-size:10px; }
.racer-content .msg.user, .chat-log .msg.user { color:var(--on-accent); }
.racer-content .sources { font-size:10px; }
body:has(dialog[open]) .racer, body:has(#settings.open) .racer, body:has(#compare-modal.open) .racer { visibility:hidden; pointer-events:none; }
@keyframes pip-arrive { from { opacity:0; transform:translateX(-65px) rotate(-14deg) scale(.8); } 65% { transform:translateX(4px) rotate(3deg); } to { opacity:1; transform:translateX(0) rotate(0); } }
@keyframes pip-panel-in { from { opacity:0; transform:translateY(12px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (min-width:1800px) {
  .racer { width:clamp(228px,calc((100vw - 1280px)/2 - 32px),310px); }
}
@media (max-width:900px), (max-width:1024px) and (max-height:500px) {
  .racer { display:none!important; }
  .pip-back-to-track { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .racer, .racer-panel, .racer-launch img { animation:none!important; transition:none!important; }
}

/* A short pit-lane transfer keeps Pip visible as he becomes the chat button. */
.pip-drive { position:fixed; z-index:80; width:250px; height:90px; pointer-events:none; filter:drop-shadow(0 7px 5px #0004); }
.pip-f1-car { width:250px; height:auto; position:absolute; bottom:0; left:0; max-width:none; }
.pip-smoke { position:absolute; width:28px; height:24px; border-radius:50%; background:radial-gradient(ellipse,#e6eaeecc,#bcc9d360,transparent 70%); left:9px; bottom:2px; animation:pip-smoke .6s ease-out infinite; }
.pip-smoke:nth-child(2) { animation-delay:.15s; }
.pip-smoke:nth-child(3) { animation-delay:.3s; }
.pip-speed { position:absolute; left:-48px; top:45px; width:75px; height:2px; background:linear-gradient(90deg,transparent,var(--accent)); box-shadow:-12px 9px 0 var(--accent-soft),10px -9px 0 var(--accent-soft); animation:pip-speed .2s ease-out infinite; }
.pip-parked { animation:pip-park .45s ease-out; }
@keyframes pip-smoke { from { transform:translate(0,0) scale(.4); opacity:.9; } to { transform:translate(-100px,-30px) scale(2.8); opacity:0; } }
@keyframes pip-speed { from { opacity:.25; transform:scaleX(.65); } to { opacity:.9; transform:scaleX(1.1); } }
@keyframes pip-park { 0% { transform:scale(.8); } 55% { transform:scale(1.08); } 100% { transform:scale(1); } }
@media (prefers-reduced-motion:reduce) {
  .pip-drive { display:none!important; }
  .pip-parked, .pit-flag i { animation:none; }
}

@media (max-width:900px), (max-width:1024px) and (max-height:500px) {
  /* The garage tab and its count replace the old tray on a narrow screen. */
  #comparetray { display:none; }
  #chat-toggle { min-width:52px; max-width:52px; width:52px; height:52px; min-height:52px; padding:0; border-radius:14px; }
  #chat-toggle::after { border-radius:0 0 12px 12px; }
  .pit-car { display:none; }
  .pit-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .pit-flag { left:13px; right:auto; top:8px; width:25px; height:30px; }
  .pit-flag i { width:25px; height:18px; }
  #chat-toggle .dot { right:5px; top:6px; }
}

@media (max-width:760px), (max-width:1024px) and (max-height:500px) {
  .chat-head { grid-template-columns:minmax(0,1fr) 44px; gap:0 8px; }
  .pip-chat-identity { grid-column:1; grid-row:1; }
  .pip-chat-identity small { display:none; }
  .chat-head-actions { display:contents; }
  .chat-head .switch { grid-column:1; grid-row:2; margin-left:43px; min-height:32px; }
  #chat-close { grid-column:2; grid-row:1 / 3; align-self:start; }
  .pip-context { font-size:12px; padding:10px 12px; max-height:160px; overflow-y:auto; }
}