/* Recruiter chat widget (js/chat.js). Index only. Colours come from the site's semantic
   tokens, so both themes follow prefers-color-scheme with nothing extra here. The
   fallbacks after each comma only matter if a token is ever purged from the bundle. */

.chat {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 30; /* the closed launcher sits over page content (max 10) but under the nav overlay (40) */
  font-family: var(--font-body, system-ui, sans-serif);
  color: var(--text, #060644);
}

/* Open, the panel is a small modal: on a short phone it is as tall as the screen and has to
   cover the fixed header (50) instead of being cut through by it. */
.chat-open { z-index: 60; }

/* Open, it is placed against the VISIBLE viewport (--vv-*, set by js/chat.js), not the
   layout one. A phone keyboard covers the bottom of the layout viewport and leaves it the
   same size, so a bottom-anchored panel kept its input under the keys. Fallbacks are the
   old bottom-anchored placement. */
.chat {
  --chat-gap: max(16px, env(safe-area-inset-bottom));
  --panel-h: min(560px, calc(var(--vv-h, 100svh) - 16px - var(--chat-gap)));
}
.chat-open {
  top: calc(var(--vv-bottom, 100svh) - var(--chat-gap) - var(--panel-h));
  bottom: auto;
}

.chat-launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--turban, #b71208);
  color: #fff;
  font: 600 1rem/1 var(--font-body, system-ui, sans-serif);
  box-shadow: 0 6px 20px var(--shadow-md, rgba(6, 6, 68, .12)), 0 1px 3px var(--shadow-md, rgba(6, 6, 68, .12));
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.chat-launcher:hover { background: var(--turban-hover, #93100a); transform: translateY(-1px); }
.chat-launcher:focus-visible { outline: 2px solid var(--text, #060644); outline-offset: 3px; }

/* A quiet pulse ring, not a badge that screams for attention -- it says "this
   is a live AI, not a static mailto link" without competing with the hero. */
.chat-launcher::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 1.5px solid var(--turban, #b71208);
  opacity: 0;
  pointer-events: none;
  animation: chat-pulse 2.6s ease-out infinite;
}
@keyframes chat-pulse {
  0% { opacity: .5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.14); }
}

.chat-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--turban, #b71208);
  color: #fff;
}
.chat-avatar svg { width: 16px; height: 16px; }
.chat-launcher .chat-avatar-sm { width: 22px; height: 22px; background: rgb(255 255 255 / .18); }
.chat-launcher .chat-avatar-sm svg { width: 13px; height: 13px; }

.chat-panel {
  display: flex;
  flex-direction: column;
  width: min(380px, calc(100vw - 32px));
  height: var(--panel-h);
  background: var(--surface, #f2f7fd);
  border: 1px solid var(--border, rgba(6, 6, 68, .12));
  border-radius: var(--radius, 20px);
  box-shadow: 0 16px 48px var(--shadow-md, rgba(6, 6, 68, .12));
  overflow: hidden;
  transform-origin: bottom right;
  transition: opacity .18s ease, transform .18s ease, display .18s allow-discrete, overlay .18s allow-discrete;
}
/* Native show/hide transition on a [hidden] element: display and opacity/
   transform animate together instead of the panel just snapping in. */
.chat-panel[hidden] { opacity: 0; transform: scale(.95) translateY(10px); }
@starting-style {
  .chat-panel:not([hidden]) { opacity: 0; transform: scale(.95) translateY(10px); }
}

.chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 6px 10px 14px;
  border-bottom: 1px solid var(--border, rgba(6, 6, 68, .12));
}
.chat-head-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-head-text { min-width: 0; }
.chat-title { font: 600 1rem/1.2 var(--font-display, system-ui, sans-serif); letter-spacing: -.01em; }
.chat-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
  color: var(--text-soft, #2a2a5c);
  font-size: .75rem;
}
/* Header link to the README: in the header, not the note, because the note is hidden on a
   short landscape screen. min-height is the 24px target floor (WCAG 2.5.8). */
.chat-how {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--accent-ink, #b71208);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat-stats {
  margin-top: 1px;
  color: var(--text-soft, #2a2a5c);
  font-size: .75rem;
}
.chat-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgb(34 197 94 / .55);
  animation: chat-status-pulse 2s ease-out infinite;
}
@keyframes chat-status-pulse {
  0% { box-shadow: 0 0 0 0 rgb(34 197 94 / .45); }
  70% { box-shadow: 0 0 0 5px rgb(34 197 94 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0); }
}
.chat-close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.chat-close:hover { background: var(--border-soft, rgba(6, 6, 68, .08)); }
.chat-close:focus-visible,
.chat-how:focus-visible,
.chat-chip:focus-visible,
.chat-send:focus-visible,
.chat-input:focus-visible { outline: 2px solid var(--turban, #b71208); outline-offset: 2px; }

.chat-log {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Each message is a row so a bot reply can carry its own small avatar --
   that's the actual "who said this" signal; alignment alone just says "side". */
.chat-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0; /* in a short panel the log scrolls; rows must not squash */
}
.chat-row-user { justify-content: flex-end; }
.chat-row-bot .chat-avatar-sm { margin-bottom: 2px; }

.chat-msg {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: .9375rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.chat-msg p + p,
.chat-msg p + ul,
.chat-msg ul + p { margin-top: .5em; }
.chat-msg ul { padding-left: 1.2em; }
.chat-msg li + li { margin-top: .25em; }
.chat-msg a { color: var(--accent-ink, #b71208); text-decoration: underline; }

.chat-bot {
  background: var(--bg-alt, #eaf2fb);
  border-bottom-left-radius: 4px;
}
.chat-user {
  background: var(--feature-bg, #060644);
  color: var(--feature-text, #f2f7fd);
  border-bottom-right-radius: 4px;
}
.chat-error { border: 1px solid var(--accent-ink, #b71208); }

/* Shown until the first words arrive: the API sends the answer once it is complete. */
.chat-wait { color: var(--text-soft, #2a2a5c); }
.chat-dots { display: inline-flex; align-items: center; gap: 4px; height: 1.2em; }
.chat-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .35;
  animation: chat-bounce 1.1s ease-in-out infinite;
}
.chat-dots span:nth-child(2) { animation-delay: .15s; }
.chat-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes chat-bounce {
  0%, 60%, 100% { opacity: .35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.chat-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 12px;
}
.chat-chip {
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--border, rgba(6, 6, 68, .12));
  border-radius: 999px;
  background: var(--surface, #f2f7fd);
  color: inherit;
  font: .875rem/1.2 var(--font-body, system-ui, sans-serif);
  cursor: pointer;
}
.chat-chip:hover { background: var(--bg-alt, #eaf2fb); }

.chat-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border, rgba(6, 6, 68, .12));
}
.chat-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--border, rgba(6, 6, 68, .12));
  border-radius: 999px;
  background: var(--bg, #f2f7fd);
  color: inherit;
  font: 1rem var(--font-body, system-ui, sans-serif); /* 16px: iOS does not zoom the page on focus */
}
.chat-input::placeholder { color: var(--text-soft, #2a2a5c); opacity: .8; }
.chat-send {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--turban, #b71208);
  color: #fff;
  font: 600 .9375rem var(--font-body, system-ui, sans-serif);
  cursor: pointer;
}
.chat-send:hover { background: var(--turban-hover, #93100a); }
.chat-send:disabled { opacity: .5; cursor: default; }

.chat-note {
  padding: 0 16px 12px;
  color: var(--text-soft, #2a2a5c);
  font-size: .75rem;
  line-height: 1.4;
}

/* A phone held sideways leaves ~350px: give all of it to the conversation. */
@media (max-height: 520px) {
  .chat-starters, .chat-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-launcher::before { animation: none; display: none; }
  .chat-status-dot { animation: none; }
  .chat-dots span { animation: none; opacity: .7; }
  .chat-panel { transition: none; }
  .chat-launcher:hover { transform: none; }
}

/* The CV is this page printed; a chat box on it would be noise. */
@media print {
  .chat { display: none !important; }
}