/* Sol -- the site concierge. Loaded on every interactive page via
   <link rel="stylesheet" href="/sol.css"> and driven by /sol.js.
   Built on the site's glass tokens (styles.css :root) so it flips with the
   light/dark theme; nothing here hardcodes a theme-specific color except the
   accent orb, which is a fixed brand gradient on both themes. */

/* Cross-document view transitions: a short page crossfade so moving between
   pages feels continuous. The dock deliberately has NO view-transition-name:
   a named element becomes a "backdrop root", which isolates its children from
   the page behind and silently turns off the glass blur. It sits in the same
   spot on every page, so the crossfade carries it. Browsers without support
   just navigate normally. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 140ms; }

#sol-root {
  --sol-teal: #1f9bb5;
  --sol-crimson: #d93a5a;
  --sol-gold: #f2b84b;
  --sol-line: rgba(var(--ink-rgb), 0.12);
  /* Legibility floor: the panel floats over photos, art grids and headlines,
     so its base is a frosted tint (not the nav's thin glass) with the same
     highlight/edge recipe on top. */
  --sol-panel-fill: rgba(250, 247, 240, 0.5);
  --sol-field: rgba(255, 255, 255, 0.62);
  --sol-bubble: rgba(255, 255, 255, 0.72);
  --sol-solid: #fffdf8;
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  max-width: calc(100vw - 32px);
  color: var(--ink);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

/* The rock lightbox (z-index 50) is a full-screen modal; keep Sol above it so
   the conversation continues over the photo instead of vanishing behind it. */
body:has(.lightbox-backdrop.is-open) #sol-root { z-index: 60; }
:root[data-theme="dark"] #sol-root {
  --sol-teal: #4cc3dc;
  --sol-crimson: #ff6b88;
  --sol-panel-fill: rgba(22, 20, 18, 0.74);
  --sol-field: rgba(255, 255, 255, 0.09);
  --sol-bubble: rgba(255, 255, 255, 0.12);
  --sol-solid: #1d1a16;
}
#sol-root *, #sol-root *::before, #sol-root *::after { box-sizing: border-box; }
/* :where() keeps this reset at zero specificity so component colors (tabs, .sol-go) still win */
:where(#sol-root) button { font: inherit; color: inherit; cursor: pointer; }
#sol-root [hidden] { display: none !important; }
#sol-root :focus-visible { outline: 2px solid var(--sol-teal); outline-offset: 2px; }

.sol-glass {
  background: var(--glass-fill, rgba(255, 255, 255, 0.3));
  border: 1px solid var(--glass-stroke, rgba(255, 255, 255, 0.58));
  backdrop-filter: blur(24px) saturate(1.7);
  -webkit-backdrop-filter: blur(24px) saturate(1.7);
  box-shadow:
    0 14px 40px rgba(24, 21, 18, 0.2),
    inset 0 1px 0 var(--glass-depth-highlight-on-light, rgba(255, 255, 255, 0.9)),
    inset 0 -1px 0 var(--glass-depth-edge-on-light, rgba(0, 0, 0, 0.16));
}
:root[data-theme="dark"] .sol-glass {
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 var(--glass-depth-highlight-on-dark, rgba(255, 255, 255, 0.32)),
    inset 0 -1px 0 var(--glass-depth-edge-on-dark, rgba(0, 0, 0, 0.22));
}

/* ---- orb ---- */
.sol-orb {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--sol-teal), var(--sol-gold), var(--sol-crimson), var(--sol-teal));
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.7), 0 0 18px rgba(31, 155, 181, 0.45);
  animation: sol-spin 10s linear infinite;
}
.sol-orb::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.12) 62%);
}
.sol-orb.is-lg { width: 46px; height: 46px; }
.sol-orb.is-listening { animation-duration: 4s; box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.7), 0 0 26px rgba(217, 58, 90, 0.55); }
.sol-orb.is-speaking { animation: sol-spin 3s linear infinite, sol-talk 0.8s ease-in-out infinite; }
@keyframes sol-spin { to { transform: rotate(360deg); } }
@keyframes sol-talk { 50% { filter: saturate(1.5) brightness(1.12); scale: 1.12; } }

/* ---- launcher + nudge ---- */
.sol-launcher {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 7px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink);
  transition: transform 180ms ease;
}
.sol-launcher:hover { transform: translateY(-2px); }
.sol-nudge {
  position: relative;
  max-width: 260px;
  padding: 11px 34px 11px 15px;
  border-radius: 20px 20px 5px 20px;
  font-size: 0.88rem;
  text-align: left;
  color: var(--ink);
  animation: sol-rise 520ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.sol-nudge-x {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted, rgba(var(--ink-rgb), 0.6));
  font-size: 1rem;
  line-height: 1;
}
.sol-nudge-x:hover { background: rgba(var(--ink-rgb), 0.08); }
@keyframes sol-rise { from { opacity: 0; transform: translateY(10px) scale(0.95); } }

/* ---- panel ---- */
.sol-panel {
  position: relative;
  isolation: isolate;
  display: none;
  flex-direction: column;
  width: min(410px, calc(100vw - 32px));
  height: min(660px, calc(100svh - 92px));
  overflow: hidden;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.14)),
    var(--sol-panel-fill);
  border: 1px solid var(--glass-stroke, rgba(255, 255, 255, 0.58));
  backdrop-filter: blur(46px) saturate(1.8) contrast(1.02);
  -webkit-backdrop-filter: blur(46px) saturate(1.8) contrast(1.02);
  box-shadow:
    0 34px 90px rgba(24, 21, 18, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 0 20px rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}
:root[data-theme="dark"] .sol-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04)), var(--sol-panel-fill);
  box-shadow:
    0 34px 90px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 0 20px rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}
.sol-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.32), transparent 30%),
    radial-gradient(circle at 95% 14%, rgba(55, 177, 201, 0.28), transparent 34%),
    radial-gradient(circle at 40% 100%, rgba(220, 54, 88, 0.16), transparent 36%);
}
.sol-panel.is-open { display: flex; animation: sol-pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.08) both; transform-origin: bottom right; }
.sol-panel.is-open.is-restored { animation: none; }
@keyframes sol-pop { from { opacity: 0; transform: translateY(16px) scale(0.92); } }

/* One compact header row: orb, name + page, Chat/Talk icons, minimize. */
.sol-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 6px 14px; }
.sol-who { flex: 1; min-width: 0; }
.sol-who b { display: block; font-size: 0.98rem; }
.sol-who small { display: flex; align-items: center; gap: 6px; color: var(--muted, rgba(var(--ink-rgb), 0.66)); font-size: 0.74rem; }
.sol-dot { width: 7px; height: 7px; border-radius: 50%; background: #3fbf7a; box-shadow: 0 0 8px #3fbf7a; }
.sol-dot.is-off { background: #b9b2a8; box-shadow: none; }
.sol-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--sol-line);
  background: var(--sol-field);
}
.sol-icon:hover { background: rgba(var(--ink-rgb), 0.12); }
.sol-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the "seeing" line sits under the name in the header */
.sol-ctx { display: block; margin: 1px 0 0; font-family: "Geist Mono", ui-monospace, Menlo, monospace; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, rgba(var(--ink-rgb), 0.66)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sol-ctx::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; vertical-align: 1px; border-radius: 50%; background: var(--sol-teal); }

.sol-feed { flex: 1; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 12px 16px; overscroll-behavior: contain; }
/* Feed children must never shrink: a flex column otherwise squashes the card row to 0 height */
.sol-feed > * { flex-shrink: 0; }
.sol-msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 20px;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
  animation: sol-rise 380ms ease both;
}
.sol-msg.is-sol { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--sol-bubble); border: 1px solid var(--sol-line); }
.sol-msg.is-me { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--ink); color: var(--paper); }
.sol-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sol-trace {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px dashed var(--sol-line);
  font-family: "Geist Mono", ui-monospace, Menlo, monospace;
  font-size: 0.66rem;
  color: var(--muted, rgba(var(--ink-rgb), 0.66));
  animation: sol-rise 300ms ease both;
}
.sol-trace i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--sol-teal); border-top-color: transparent; animation: sol-spin 0.7s linear infinite; }
.sol-trace.is-done i { animation: none; border-color: #3fbf7a; background: #3fbf7a; }
.sol-typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 14px; border-radius: 18px; background: var(--sol-bubble); }
.sol-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted, rgba(var(--ink-rgb), 0.5)); animation: sol-bounce 1s infinite; }
.sol-typing i:nth-child(2) { animation-delay: 0.15s; }
.sol-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sol-bounce { 40% { transform: translateY(-4px); } }

.sol-cards { align-self: stretch; display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x mandatory; }
.sol-card {
  flex: none;
  width: 148px;
  padding: 0;
  overflow: hidden;
  scroll-snap-align: start;
  text-align: left;
  text-decoration: none;
  color: var(--ink);
  border-radius: 18px;
  border: 1px solid var(--sol-line);
  background: var(--sol-solid);
  animation: sol-rise 420ms ease both;
  transition: transform 160ms ease;
}
.sol-card:hover { transform: translateY(-2px); }
.sol-card img, .sol-card .sol-swatch { display: block; width: 100%; height: 116px; object-fit: cover; background: rgba(var(--ink-rgb), 0.08); }
.sol-card.is-icon img { object-fit: contain; padding: 16px; background: rgba(var(--ink-rgb), 0.05); }
.sol-card b { display: block; padding: 8px 10px 0; font-size: 0.82rem; line-height: 1.25; }
.sol-card small { display: block; padding: 2px 10px 10px; font-size: 0.72rem; color: var(--muted, rgba(var(--ink-rgb), 0.66)); }

.sol-rich {
  align-self: stretch;
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--sol-line);
  background: var(--sol-solid);
  font-size: 0.88rem;
  animation: sol-rise 420ms ease both;
}
.sol-rich h4 { margin: 0; font-size: 0.92rem; }
.sol-rich p { margin: 0; color: var(--muted, rgba(var(--ink-rgb), 0.66)); font-size: 0.8rem; }
.sol-rich input, .sol-rich textarea, .sol-rich select {
  width: 100%;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--sol-line);
  background: rgba(var(--ink-rgb), 0.05);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  resize: none;
}
.sol-rich label.sol-check { display: flex; align-items: flex-start; gap: 8px; font-size: 0.78rem; color: var(--muted, rgba(var(--ink-rgb), 0.66)); }
.sol-rich label.sol-check input { width: auto; margin-top: 3px; }
.sol-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sol-pill, .sol-go {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--sol-line);
  background: rgba(var(--ink-rgb), 0.05);
  font-size: 0.82rem;
  font-weight: 600;
}
.sol-pill:hover, .sol-pill.is-on { background: var(--ink); color: var(--paper); }
.sol-go { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sol-go:disabled { opacity: 0.5; cursor: default; }
.sol-error { color: var(--sol-crimson); font-size: 0.78rem; }
.sol-optin { display: flex; align-items: flex-start; gap: 8px; margin: 2px 0 4px; font-size: 0.82rem; line-height: 1.35; opacity: 0.85; cursor: pointer; }
.sol-optin input { margin-top: 2px; }
.sol-link { display: inline-block; text-decoration: none; }
.sol-cartrow { display: flex; align-items: center; gap: 12px; }
.sol-cartrow img { width: 56px; height: 56px; flex: none; border-radius: 12px; object-fit: cover; background: rgba(var(--ink-rgb), 0.08); }
.sol-ok { font-weight: 600; }
.sol-bars { display: flex; align-items: flex-end; gap: 5px; height: 64px; }
.sol-bars i { flex: 1; min-height: 3px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--sol-teal), rgba(31, 155, 181, 0.3)); }

.sol-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -2px; animation: sol-rise 380ms ease both; }
/* one scrolling strip: suggestions and the quick actions, shuffled per session */
.sol-strip { display: flex; align-items: center; padding: 0 0 4px; }
.sol-chips { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; gap: 6px; padding: 2px 8px 2px 16px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); }
.sol-chips::-webkit-scrollbar { display: none; }

.sol-chip { flex: none; white-space: nowrap; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--sol-line); background: var(--sol-field); font-size: 0.78rem; font-weight: 550; }
.sol-chip { display: inline-flex; align-items: center; gap: 6px; }
.sol-chip svg { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sol-chip:hover { background: rgba(var(--ink-rgb), 0.12); }


/* "email me these results" pill (sits in the feed, right after a set of cards) */
.sol-emailpill { align-self: flex-start; cursor: pointer; opacity: 0.85; animation: sol-rise 380ms ease both; }
.sol-emailpill:hover { opacity: 1; }

/* one-time "helpful?" row */
.sol-fb { display: flex; align-items: center; gap: 8px; align-self: flex-start; padding: 2px 4px; font-size: 0.76rem; color: var(--muted, rgba(var(--ink-rgb), 0.66)); animation: sol-rise 420ms ease both; }
.sol-fb button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid var(--sol-line); background: var(--sol-field); color: var(--ink); }
.sol-fb button:hover { background: rgba(var(--ink-rgb), 0.12); }
.sol-fb svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sol-fb .is-down svg { transform: rotate(180deg); }
.sol-foot { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px; }
.sol-foot input {
  flex: 1;
  min-width: 0;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--sol-line);
  background: var(--sol-field);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
}
@keyframes sol-pulse { 50% { box-shadow: 0 0 0 8px rgba(217, 58, 90, 0.18); } }

.sol-tabs { flex: none; display: flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--sol-field); border: 1px solid var(--sol-line); }
.sol-tabs button { display: grid; place-items: center; width: 32px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted, rgba(var(--ink-rgb), 0.66)); transition: background 160ms ease, color 160ms ease; }
.sol-tabs svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sol-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.sol-chatview { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sol-talk { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px 24px 20px; text-align: center; }
.sol-talk-visual { align-self: stretch; min-width: 0; }
.sol-talk-visual:empty { display: none; }
.sol-talk.has-visual { justify-content: flex-start; padding-top: 4px; }
.sol-talk-status { margin: 6px 0 0; font-size: 1.05rem; font-weight: 650; }
.sol-talk-caption { margin: 0; min-height: 3.2em; max-width: 30ch; font-size: 0.88rem; color: var(--muted, rgba(var(--ink-rgb), 0.66)); overflow-wrap: anywhere; }
.sol-talk-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; font-size: 0.95rem; }
.sol-talk-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sol-talk-btn.is-end { background: var(--sol-crimson); border-color: var(--sol-crimson); color: #fff; }
.sol-fine { padding: 0 16px 7px; line-height: 1.2; text-align: center; font-size: 0.68rem; color: var(--muted, rgba(var(--ink-rgb), 0.66)); }
.sol-fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sol-fine button { padding: 0; border: 0; background: none; text-decoration: underline; text-underline-offset: 2px; font-size: inherit; color: inherit; }

/* Pulse used by sol_highlight on any element of the host page */
.sol-pulse { outline: 3px solid var(--sol-crimson, #d93a5a) !important; outline-offset: 4px; animation: sol-pulse-ring 1.3s ease 3; }
@keyframes sol-pulse-ring { 50% { outline-color: transparent; } }

@media (max-width: 520px) {
  #sol-root { right: max(10px, env(safe-area-inset-right, 0px)); bottom: max(10px, env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 20px); }
  /* Bottom sheet feel: nearly full width, tall, but never past the visible area
     (JS sets --sol-vh from visualViewport so the on-screen keyboard is respected). */
  .sol-panel { width: calc(100vw - 20px); height: min(680px, calc(var(--sol-vh, 100dvh) - 28px - env(safe-area-inset-bottom, 0px))); border-radius: 26px; }
  .sol-launcher span.sol-label { display: none; }
  .sol-launcher { padding: 8px; }
  .sol-orb { width: 42px; height: 42px; }
  .sol-nudge { max-width: min(260px, calc(100vw - 40px)); }
  /* 16px inputs stop iOS Safari from zooming the page on focus; 44px-ish tap targets */
  .sol-foot input, .sol-rich input, .sol-rich textarea, .sol-rich select { font-size: 16px; }
  .sol-foot input { padding: 12px 16px; }
  .sol-icon { width: 40px; height: 40px; }
  .sol-tabs button { width: 42px; height: 36px; }
  .sol-chip { padding: 10px 15px; font-size: 0.84rem; }
  .sol-pill, .sol-go { padding: 10px 15px; font-size: 0.88rem; }
  .sol-nudge-x { width: 32px; height: 32px; top: 2px; right: 2px; }
  .sol-msg { font-size: 0.95rem; max-width: 92%; }
  .sol-card { width: 140px; }
  .sol-opt { display: none; }
  .sol-fine { padding-bottom: 4px; }
  .sol-fine button, .sol-fine a { display: inline-block; padding: 10px 4px; margin: -10px 0; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .sol-panel { height: calc(var(--sol-vh, 100dvh) - 20px); }
}
@media (prefers-reduced-motion: reduce) {
  #sol-root *, #sol-root *::before, #sol-root *::after { animation: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---- home page: a slim ribbon under the project grid that points at /sol-rising ---- */
.sol-ribbon {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1120px;
  margin: 14px auto 0;
  min-height: 54px; /* same height as the Ask Sol button so the two bars line up */
  /* docks in line with the Ask Sol button (same bottom offset) while the Projects section is in view */
  position: sticky;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 3;
  padding: 6px 22px 6px 6px;
  border: 1px solid var(--glass-stroke, rgba(255, 255, 255, 0.5));
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(31, 155, 181, 0.16), rgba(242, 184, 75, 0.16) 55%, rgba(217, 58, 90, 0.16)),
    var(--glass-fill, rgba(255, 255, 255, 0.3));
  box-shadow: 0 14px 40px var(--glass-shadow, rgba(24, 21, 18, 0.14)), inset 0 1px 0 var(--glass-depth-highlight-on-light, rgba(255, 255, 255, 0.9));
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  color: var(--ink);
  text-decoration: none;
  transition: transform 200ms ease;
}
.sol-ribbon:hover { transform: translateY(-2px); }
.sol-ribbon-orb {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 40%), conic-gradient(from 200deg, #1f9bb5, #f2b84b, #d93a5a, #1f9bb5);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.7), 0 0 22px rgba(31, 155, 181, 0.4);
  animation: sol-ribbon-spin 12s linear infinite;
}
.sol-ribbon-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.sol-ribbon-text b { font-size: 1.02rem; }
.sol-ribbon-text small { color: var(--muted, rgba(var(--ink-rgb), 0.68)); font-size: 0.88rem; }
/* a diagonal arrow: it opens a page, it does not point at the Ask Sol button */
.sol-ribbon-go { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--ink-rgb), 0.08); font-size: 1.05rem; line-height: 1; transition: transform 200ms ease, background-color 200ms ease; }
.sol-ribbon:hover .sol-ribbon-go { transform: translate(2px, -2px); background: rgba(var(--ink-rgb), 0.14); }
@keyframes sol-ribbon-spin { to { transform: rotate(360deg); } }
/* leave room for the Ask Sol button when it sits beside the ribbon */
@media (max-width: 1320px) { .sol-ribbon { width: calc(100% - 156px); margin-right: auto; } }
@media (max-width: 640px) {
  /* phone: one-line ribbon, same height and bottom offset as the Ask Sol orb, stopping short of it */
  .sol-ribbon { width: calc(100% - 78px); margin: 14px auto 0 0; min-height: 60px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); border-radius: 30px; padding: 8px 14px 8px 9px; }
  .sol-ribbon-text small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.8rem; }
  .sol-ribbon-orb { width: 42px; height: 42px; }
  .sol-ribbon-go { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .sol-ribbon-orb { animation: none; } }