/* §marketing-chat: styles for the onplana.com AI assistant.
 *
 * ORIGIN AND STATUS, honestly: this began as a port of
 * docs-site/public/ai-chat.css, which arrived broken (every rule written
 * against Starlight's --sl-* tokens, defined only on the docs site; the widget
 * rendered with transparent backgrounds and invisible text). The tokens were
 * first defined locally to make it visible, and the file has since been
 * DELIBERATELY RESKINNED for the marketing site, so it no longer diffs cleanly
 * against the docs version and is not meant to. The JS is the half that must
 * stay in sync with the docs widget (captcha, send path); the skin is this
 * site's own.
 *
 * The --sl-* names are kept as the palette layer even though Starlight is
 * nowhere near this site: they are what the shared class names were written
 * against, they keep every color decision in ONE block, and the widget test
 * pins that every token used below is defined here. Scoped to the two widget
 * roots rather than :root, so nothing leaks onto the page.
 */
#onplana-chat-btn,
#onplana-chat-panel {
  --sl-color-accent:      #4f46e5; /* primary-600 */
  --sl-color-accent-high: #4338ca; /* primary-700 */
  --sl-color-accent-soft: #6366f1; /* primary-500, gradient partner */
  --sl-color-bg:          #ffffff;
  --sl-color-bg-nav:      #f9fafb; /* gray-50 */
  --sl-color-text:        #111827; /* gray-900 */
  --sl-color-gray-3:      #6b7280; /* gray-500, muted text */
  --sl-color-gray-5:      #e5e7eb; /* gray-200, borders */
  --sl-color-gray-6:      #f3f4f6; /* gray-100, subtle fills */
  --sl-font:              Inter, system-ui, sans-serif;

  /* Derived, kept together so the gradient story is edited in one place. */
  --oc-gradient:       linear-gradient(135deg, var(--sl-color-accent-soft), var(--sl-color-accent-high));
  --oc-shadow-brand:   0 8px 24px rgba(79, 70, 229, 0.35);
  --oc-border-tinted:  #e0e7ff; /* primary-100 */
}

/* ── Floating launcher ────────────────────────────────────────────────────── */

#onplana-chat-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.75rem 1.125rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;

  background: var(--oc-gradient);
  color: #fff;
  font-family: var(--sl-font, inherit);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.01em;

  box-shadow: var(--oc-shadow-brand);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

#onplana-chat-btn:hover {
  filter: brightness(1.08);
  box-shadow: 0 12px 32px rgba(79, 70, 229, 0.45);
  transform: translateY(-2px);
}

#onplana-chat-btn:active {
  transform: translateY(0);
}

#onplana-chat-btn:focus-visible {
  outline: 2px solid var(--sl-color-accent);
  outline-offset: 3px;
}

#onplana-chat-btn svg {
  flex-shrink: 0;
}

/* ── Chat panel ───────────────────────────────────────────────────────────── */

#onplana-chat-panel {
  position: fixed;
  bottom: 5.5rem;
  right: 1.5rem;
  z-index: 9998;

  width: 380px;
  max-height: min(560px, calc(100vh - 7rem));
  display: flex;
  flex-direction: column;

  background: var(--sl-color-bg);
  border: 1px solid var(--oc-border-tinted);
  border-radius: 20px;
  /* Two shadows: a deep neutral one for elevation, a faint brand-tinted one
     so the panel reads as part of the indigo design language rather than a
     gray system dialog floating over it. */
  box-shadow:
    0 24px 60px -12px rgba(17, 24, 39, 0.28),
    0 4px 16px rgba(79, 70, 229, 0.10);
  overflow: hidden;

  font-family: var(--sl-font, inherit);
  transform-origin: bottom right;
  animation: chat-panel-in 0.22s cubic-bezier(0.21, 1.02, 0.73, 1);
}

#onplana-chat-panel[hidden] {
  display: none;
}

@keyframes chat-panel-in {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* ── Panel header ─────────────────────────────────────────────────────────── */

.oc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  background: var(--oc-gradient);
  color: #fff;
  flex-shrink: 0;
}

.oc-header-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.oc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  flex-shrink: 0;
}

.oc-header-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.oc-header-name {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.2;
}

.oc-header-sub {
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.oc-close-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.85);
  padding: 0.3rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  transition: color 0.12s, background 0.12s;
}

.oc-close-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

.oc-close-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

/* ── Messages area ────────────────────────────────────────────────────────── */
/* Gray-50 ground with white bubbles on it, matching how the site's own cards
   sit on their sections. The white-on-white the port had made the AI bubbles
   need borders to exist at all. */

.oc-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overscroll-behavior: contain;
  background: var(--sl-color-bg-nav);
}

/* ── Message bubbles ──────────────────────────────────────────────────────── */

.oc-msg {
  display: flex;
  flex-direction: column;
  max-width: 88%;
}

.oc-msg--user {
  align-self: flex-end;
  align-items: flex-end;
}

.oc-msg--ai {
  align-self: flex-start;
  align-items: flex-start;
}

.oc-bubble {
  padding: 0.625rem 0.875rem;
  border-radius: 16px;
  font-size: 0.875rem;
  line-height: 1.55;
  word-break: break-word;
}

.oc-msg--user .oc-bubble {
  background: var(--oc-gradient);
  color: #fff;
  border-bottom-right-radius: 5px;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

.oc-msg--ai .oc-bubble {
  background: var(--sl-color-bg);
  color: var(--sl-color-text);
  border-bottom-left-radius: 5px;
  border: 1px solid var(--sl-color-gray-5);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
}

/* ── Starter chips ────────────────────────────────────────────────────────── */

.oc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-width: 95%;
}

.oc-chip {
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--oc-border-tinted);
  background: var(--sl-color-bg);
  color: var(--sl-color-accent);
  font-family: var(--sl-font, inherit);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, border-color 0.12s, transform 0.12s;
}

.oc-chip:hover {
  background: #eef2ff; /* primary-50 */
  border-color: #c7d2fe; /* primary-200 */
  transform: translateY(-1px);
}

.oc-chip:focus-visible {
  outline: 2px solid var(--sl-color-accent);
  outline-offset: 2px;
}

/* ── Typing indicator ─────────────────────────────────────────────────────── */

.oc-typing {
  display: inline-flex;
  gap: 4px;
  padding: 0.7rem 0.875rem;
  background: var(--sl-color-bg);
  border: 1px solid var(--sl-color-gray-5);
  border-radius: 16px;
  border-bottom-left-radius: 5px;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06);
}

.oc-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sl-color-accent-soft);
  animation: oc-dot-bounce 1.2s ease-in-out infinite;
}

.oc-typing span:nth-child(2) { animation-delay: 0.2s; }
.oc-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes oc-dot-bounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: 0.4; }
  40%           { transform: translateY(-5px); opacity: 1;   }
}

/* ── Sources ──────────────────────────────────────────────────────────────── */
/* Rendered as link pills. The sources are the trust element of a grounded
   answer, so they get real affordance instead of an underlined comma list. */

.oc-sources {
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
}

.oc-sources-label {
  color: var(--sl-color-gray-3);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.65rem;
  margin-right: 0.1rem;
}

.oc-sources a {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--sl-color-gray-5);
  background: var(--sl-color-bg);
  color: var(--sl-color-accent);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s, border-color 0.12s;
}

.oc-sources a:hover {
  background: #eef2ff; /* primary-50 */
  border-color: #c7d2fe; /* primary-200 */
  color: var(--sl-color-accent-high, var(--sl-color-accent));
}

/* ── Input row ────────────────────────────────────────────────────────────── */

.oc-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
  border-top: 1px solid var(--sl-color-gray-5);
  background: var(--sl-color-bg);
  flex-shrink: 0;
}

.oc-input {
  flex: 1;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--sl-color-gray-5);
  background: var(--sl-color-bg-nav, var(--sl-color-bg));
  color: var(--sl-color-text);
  font-size: 0.875rem;
  font-family: var(--sl-font, inherit);
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.oc-input::placeholder {
  color: var(--sl-color-gray-3);
}

.oc-input:focus {
  border-color: var(--sl-color-accent);
  background: var(--sl-color-bg);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.oc-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.oc-send-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: var(--oc-gradient);
  color: #fff;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
  transition: filter 0.15s, transform 0.15s, opacity 0.15s;
}

.oc-send-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.oc-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.oc-send-btn:focus-visible {
  outline: 2px solid var(--sl-color-accent);
  outline-offset: 2px;
}

/* ── Error state ──────────────────────────────────────────────────────────── */
/* Site palette (red-50 / red-200 / red-700) rather than the port's color-mix.
   The docs version also carried a [data-theme="dark"] override; marketing has
   no dark theme and no data-theme attribute, so it was Starlight residue and
   is gone rather than kept as dead weight. */

.oc-msg--error .oc-bubble {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

/* ── Motion ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #onplana-chat-panel {
    animation: none;
  }
  #onplana-chat-btn,
  .oc-chip,
  .oc-send-btn {
    transition: none;
  }
  .oc-typing span {
    animation: none;
    opacity: 0.6;
  }
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  #onplana-chat-panel {
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
    bottom: 4.75rem;
    max-height: min(560px, calc(100vh - 6.25rem));
  }

  #onplana-chat-btn {
    right: 0.75rem;
    bottom: 1rem;
  }
}