/* Ask-about-me widget — "Loopie". Design ported from the standalone iteration file
   (Ask Widget (standalone).html). Site tokens substituted for the inlined hexes so
   the widget stays theme-aware; decorative gradient hues kept literal. */

@keyframes askw-clouds {
  0%   { background-position: 22% 30%, 78% 68%, 0 0, 0 0; }
  50%  { background-position: 60% 58%, 40% 40%, 0 0, 0 0; }
  100% { background-position: 22% 30%, 78% 68%, 0 0, 0 0; }
}
@keyframes askw-blink { 50% { opacity: 0; } }

/* Hero trigger — animated conic-gradient border with soft radial glows.
   The hero column stretches this flex item to full width; in isolation it hugs content. */
.askw-trigger {
  display: inline-flex; align-items: center; gap: 0.5rem;
  align-self: center;            /* hug content + center within the hero column */
  margin-top: 1.5rem;
  padding: 0.65rem 1.25rem;
  border: 0.98px solid transparent;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 38%, rgba(81, 130, 255, 0.11), rgba(81, 130, 255, 0) 48%) padding-box,
    radial-gradient(circle at 70% 64%, rgba(167, 139, 250, 0.10), rgba(167, 139, 250, 0) 48%) padding-box,
    linear-gradient(var(--background-color--background-primary), var(--background-color--background-primary)) padding-box,
    conic-gradient(from calc(var(--askw-angle, 210) * 1deg) at 50% 50%, #1e4fd6, #c4a0ff, #2c5fe0, #d9c2ff, #1e4fd6, #b98cff, #1e4fd6) border-box;
  background-size: 200% 200%, 200% 200%, 100% 100%, 100% 100%;
  animation: askw-clouds 9s ease-in-out infinite;
  color: var(--text-color--text-primary);
  font-family: 'Martian Mono', 'Courier New', monospace;
  font-size: 0.78rem; letter-spacing: 0.02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: color 0.25s ease, box-shadow 0.25s ease;
}
.askw-trigger:hover {
  color: var(--base-color-brand--blue);
  box-shadow: 0 0 0 1px rgba(81, 130, 255, 0.12), 0 6px 18px -8px rgba(81, 130, 255, 0.35);
  animation-play-state: paused;
}
.askw-trigger .askw-bot { width: 1.05rem; height: 1.05rem; color: var(--base-color-brand--blue); flex: none; }

/* Overlay + panel */
.askw-overlay {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 20, 20, 0.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.askw-overlay.askw-open { opacity: 1; pointer-events: auto; }

.askw-panel {
  display: flex; flex-direction: column;
  width: min(520px, calc(100vw - 2rem));
  height: min(560px, calc(100vh - 4rem));
  border: 0.5px solid var(--base-color-brand--border-color);
  border-radius: 1.5rem;
  background: color-mix(in srgb, var(--background-color--background-primary) 70%, transparent);
  -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transform: translateY(10px);
  transition: transform 0.25s ease;
}
.askw-overlay.askw-open .askw-panel { transform: translateY(0); }

/* Header */
.askw-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 0.5px solid var(--base-color-brand--border-color);
  background: #504d3808;
}
.askw-title { display: flex; align-items: baseline; gap: 0.7rem; }
.askw-name {
  font-family: 'Martian Mono', 'Courier New', monospace;
  font-size: 1.15rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--text-color--text-primary);
}
.askw-subtitle {
  font-family: 'Martian Mono', 'Courier New', monospace;
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-color--text-secondary);
}
.askw-head-right { display: flex; align-items: center; gap: 0.6rem; }

/* Model selector — 3 exposed box+icon options; the active one expands to show its name */
.askw-modelbar { display: inline-flex; align-items: center; gap: 0.3rem; }
.askw-modelopt {
  height: 1.95rem; min-width: 1.95rem; padding: 0 0.45rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0.5px solid var(--base-color-brand--border-color);
  border-radius: 0.5rem;
  background: var(--background-color--background-primary);
  color: var(--text-color--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.askw-modelopt svg { width: 1rem; height: 1rem; display: block; flex: none; }
.askw-modelopt-label {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; margin-left: 0;
  font-family: 'Martian Mono', 'Courier New', monospace;
  font-size: 0.62rem; letter-spacing: 0.02em;
  transition: max-width 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.25s ease, margin-left 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.askw-modelopt:hover { border-color: var(--base-color-brand--blue); color: var(--base-color-brand--blue); }
.askw-modelopt.is-selected {
  border-color: var(--base-color-brand--blue);
  color: var(--base-color-brand--blue);
  background: #c5d5ff80;
}
.askw-modelopt.is-selected .askw-modelopt-label { max-width: 7rem; opacity: 1; margin-left: 0.4rem; }

@media (prefers-reduced-motion: reduce) {
  .askw-modelopt, .askw-modelopt-label { transition: none !important; }
}
.askw-close {
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  border: 0.5px solid var(--base-color-brand--border-color);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--text-color--text-primary);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.askw-close:hover { border-color: var(--base-color-brand--blue); color: var(--base-color-brand--blue); }

/* Messages — bodies use a humanist sans for readability; UI chrome stays mono */
.askw-body {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 0.8rem;
  padding: 1.25rem;
}
.askw-msg {
  max-width: 90%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px; line-height: 1.6; font-weight: 300;
  white-space: pre-wrap; word-wrap: break-word;
}
.askw-msg--assistant { align-self: flex-start; color: var(--text-color--text-primary); }
.askw-msg--user {
  align-self: flex-end;
  padding: 0.6rem 0.9rem;
  border-radius: 1rem;
  background: var(--base-color-brand--blue);
  color: #fff;
}
.askw-typing::after { content: "▍"; animation: askw-blink 1s steps(1) infinite; color: var(--base-color-brand--blue); }

/* Thinking loader — tiny pixel-art flipbook, inherits currentColor */
.askw-loader { display: inline-block; width: 1.35rem; height: 1.35rem; color: var(--base-color-brand--blue); vertical-align: -0.2rem; }
.askw-loader svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .askw-loader .fr { animation: none !important; }
  .askw-loader .fr:first-child { opacity: 1 !important; }
}

/* Rendered markdown inside assistant messages (rich text, code, lists) */
.askw-msg > :first-child { margin-top: 0; }
.askw-msg > :last-child { margin-bottom: 0; }
.askw-msg p { margin: 0 0 0.6rem; }
.askw-msg strong { font-weight: 700; }
.askw-msg em { font-style: italic; }
.askw-msg a { color: var(--base-color-brand--blue); text-decoration: underline; text-underline-offset: 2px; }
.askw-msg ul, .askw-msg ol { margin: 0 0 0.6rem; padding-left: 1.2rem; }
.askw-msg li { margin: 0.15rem 0; }
.askw-msg li::marker { color: var(--text-color--text-secondary); }
.askw-msg h3, .askw-msg h4, .askw-msg h5, .askw-msg h6 {
  margin: 0.7rem 0 0.35rem; line-height: 1.3;
  font-family: 'Martian Mono', 'Courier New', monospace; font-weight: 700;
}
.askw-msg h3 { font-size: 0.95rem; }
.askw-msg h4 { font-size: 0.88rem; }
.askw-msg h5, .askw-msg h6 { font-size: 0.82rem; letter-spacing: 0.02em; }
.askw-msg hr { border: none; border-top: 0.5px solid var(--base-color-brand--border-color); margin: 0.7rem 0; }
.askw-msg code.askw-code {
  font-family: 'Martian Mono', 'Courier New', monospace; font-size: 0.85em;
  padding: 0.08rem 0.32rem; border-radius: 0.3rem;
  background: color-mix(in srgb, var(--text-color--text-secondary) 14%, transparent);
}
.askw-msg pre.askw-pre {
  margin: 0 0 0.6rem; padding: 0.7rem 0.8rem; border-radius: 0.6rem; overflow-x: auto;
  border: 0.5px solid var(--base-color-brand--border-color);
  background: color-mix(in srgb, var(--text-color--text-secondary) 12%, transparent);
}
.askw-msg pre.askw-pre code {
  font-family: 'Martian Mono', 'Courier New', monospace; font-size: 0.8rem; line-height: 1.5; white-space: pre;
}
/* User bubble stays plain text; keep any stray link readable on blue */
.askw-msg--user a { color: #fff; }

/* Suggestion chips */
.askw-suggestions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.askw-chip {
  padding: 0.55rem 0.9rem;
  border: 0.5px solid var(--base-color-brand--border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--text-color--text-secondary);
  font-family: 'Martian Mono', 'Courier New', monospace;
  font-size: 0.78rem; text-align: left; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.askw-chip:hover { border-color: var(--base-color-brand--blue); color: var(--base-color-brand--blue); }

/* Input row */
.askw-inputrow {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.9rem 1.25rem;
  border-top: 0.5px solid var(--base-color-brand--border-color);
  background: #504d3808;
}
.askw-input {
  flex: 1; min-width: 0;
  padding: 0.6rem 0.2rem;
  border: none; outline: none; background: transparent;
  color: var(--text-color--text-primary);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px; font-weight: 300;
}
.askw-input::placeholder { color: var(--text-color--text-secondary); }
.askw-send {
  flex: none; width: 2.4rem; height: 2.4rem;
  display: none; align-items: center; justify-content: center;
  border: 0.5px solid var(--base-color-brand--border-color);
  border-radius: 999px;
  background: var(--background-color--background-primary);
  color: var(--text-color--text-primary);
  font-size: 1rem; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.askw-send:hover { border-color: var(--base-color-brand--blue); color: var(--base-color-brand--blue); }

/* Submit affordance: desktop reads "press Enter"; touch gets a tappable button */
.askw-enterhint {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border: 0.5px solid var(--base-color-brand--border-color);
  border-radius: 0.5rem;
  color: var(--text-color--text-secondary);
  pointer-events: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.askw-enterhint svg { width: 0.9rem; height: 0.9rem; display: block; }
.askw-inputrow:focus-within .askw-enterhint { border-color: var(--base-color-brand--blue); color: var(--base-color-brand--blue); }

@media (hover: none), (pointer: coarse) {
  .askw-send { display: flex; }
  .askw-enterhint { display: none; }
}

@media (max-width: 767px) {
  .askw-panel { height: min(640px, calc(100vh - 2rem)); width: calc(100vw - 1.5rem); }
  .askw-msg { max-width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  .askw-overlay, .askw-panel, .askw-trigger, .askw-chip, .askw-close, .askw-send { transition: none !important; }
  .askw-trigger { animation: none !important; }
  .askw-typing::after { animation: none; }
}