/* --- AI panel (floating overlay) ------------------------------------- */
.ds-ai-wrapper {
  position: fixed;
  top: 80px;
  right: 16px;
  bottom: 16px;
  width: 0;
  z-index: 1040;
  pointer-events: none;
}
.ds-ai-wrapper-open {
  pointer-events: auto;
}

/* Floating Assistant toggle. Pinned vertically-centered to the right
 * edge of the viewport, always visible. When the panel opens, the FAB
 * shifts left so it sits just outside the panel's left edge and the
 * icon morphs from chat-dots → x — same button serves as both open
 * AND close. The look is intentionally premium: deep velvet body with
 * a brass ring, warm radial highlight, and a layered shadow that
 * gives it weight against any page background. */
.ds-ai-fab {
  position: fixed;
  right: 22px;
  top: 50%;
  width: 60px;
  height: 60px;
  padding: 0;
  border-radius: 50%;
  z-index: 1042;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Layered fill: velvet base + warm radial highlight at the top-left
   * (suggests light catching the convex surface). */
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 220, 160, 0.32) 0%, transparent 55%),
    linear-gradient(155deg,
      var(--ds-velvet-light) 0%,
      var(--ds-velvet) 55%,
      var(--ds-mahogany-deep) 100%);
  border: 1px solid rgba(218, 165, 32, 0.6);
  color: #f4e7c8;
  /* Three-layer shadow: soft outer drop, brass-tinted halo, and an
   * inset highlight on the top edge for the "polished" feel. */
  box-shadow:
    0 10px 32px rgba(15, 23, 42, 0.34),
    0 0 0 4px rgba(218, 165, 32, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transform: translateY(-50%);
  transition:
    right 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.18s ease,
    box-shadow 0.22s ease,
    color 0.18s ease;
}
.ds-ai-fab:hover,
.ds-ai-fab:focus {
  color: #ffffff;
  transform: translateY(-50%) scale(1.05);
  box-shadow:
    0 14px 40px rgba(15, 23, 42, 0.42),
    0 0 0 5px rgba(218, 165, 32, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  outline: none;
}
.ds-ai-fab:active {
  transform: translateY(-50%) scale(0.97);
}
/* Open state: shift the FAB left to sit just outside the panel
 * (panel width 420 + 16 right margin + ~6 to clear the panel's edge). */
.ds-ai-fab-open {
  right: 442px;
}
/* Icon morph — both icons live in the button; the active one is
 * shown based on .ds-ai-fab-open. */
.ds-ai-fab-icon { font-size: 1.45rem; line-height: 1; }
.ds-ai-fab .ds-ai-fab-icon-close { display: none; }
.ds-ai-fab-open .ds-ai-fab-icon-open { display: none; }
.ds-ai-fab-open .ds-ai-fab-icon-close { display: inline-block; }
@media (max-width: 768px) {
  /* On mobile the panel becomes full-screen, so move the FAB to a
   * thumb-reachable bottom-right spot instead of competing with the
   * panel's edge. */
  .ds-ai-fab {
    top: auto;
    bottom: 18px;
    right: 18px;
    transform: none;
    width: 56px;
    height: 56px;
  }
  .ds-ai-fab:hover,
  .ds-ai-fab:focus { transform: scale(1.05); }
  .ds-ai-fab:active { transform: scale(0.97); }
  .ds-ai-fab-open { right: 18px; }
}

/* Discreet "Earlier conversation" link at the top of the chat panel.
 * Visible only when prior history exists. Low contrast so it doesn't
 * compete with the active exchange below it. */
.ds-history-reveal-wrap {
  text-align: center;
  padding: 6px 0 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  margin-bottom: 4px;
}
.ds-history-reveal {
  font-size: 0.78rem;
  color: var(--ds-ink-soft);
  text-decoration: none;
  letter-spacing: 0.02em;
  opacity: 0.7;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.ds-history-reveal:hover,
.ds-history-reveal:focus {
  color: var(--ds-mahogany-deep);
  opacity: 1;
  text-decoration: none;
}
/* Glassmorphic floating panel — translucent pane that reads like a
 * piece of frosted glass over the page. Three pieces make the effect:
 *  1. Semi-transparent background (~22% white) layered on a backdrop
 *     blur, so whatever's behind shows through softened.
 *  2. A 1px hairline border in white-with-low-alpha that catches light
 *     against any darker page content.
 *  3. A diffuse, slightly-offset shadow for depth without hard edges.
 *  -webkit-backdrop-filter is required for Safari + iOS. */
.ds-ai-panel.card {
  background: rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 14px;
  box-shadow:
    0 12px 36px rgba(15, 23, 42, 0.18),
    0 1px 2px rgba(255, 255, 255, 0.5) inset;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ds-ai-panel .card-body {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: transparent;
}

/* Quick-action chip shown above the input row (e.g. "Interview me").
 * Reads like an inline accent link, not a heavy CTA — keeps the panel
 * from looking chrome-laden while still being a clear affordance. */
.ds-ai-quick-chip.btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ds-mahogany-deep, #4a2b1a) !important;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(0, 0, 0, 0.08);
  text-decoration: none !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ds-ai-quick-chip.btn:hover,
.ds-ai-quick-chip.btn:focus {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(0, 0, 0, 0.14);
  color: var(--ds-mahogany-deep, #4a2b1a) !important;
}